/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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 { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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 */ /* 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 */ /* preformatted text - use only for this feature */ /* 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; } /* --------------------------------------------------------- * * Sass Variables * *--------------------------------------------------------- */ /* --------------------------------------------------------- * * Media query * *--------------------------------------------------------- */ /* --------------------------------------------------------- * * Responsive size * *--------------------------------------------------------- */ /* --------------------------------------------------------- * * Text * *--------------------------------------------------------- */ :root { --black25: #c8c6d3; --black60: #7b7695; --black100: #231b4e; --blue20: #e3e1ff; --blue100: #736bff; --pink30: #ffe8ff; --pink100: #ffb3f3; --deep-pink: #ff62e6; --orange20: #ffe9cf; --orange100: #ff8f10; --deep-orange: #ff5900; --red: #ff42a4; --green: #1fe995; --deep-green: #00c674; --yellow: #e9f62d; --gray: #f8f8f8; --primary: #1fe995; --top100: #736bff; --rookie: #ff42a4; --group: #00c674; --vocalop: #ff8f10; --border-radius8: 8; --btn-hover: var(--black100); --btn-disabled: var(--black25); --spacing-harf: 4; --spacingdefault: 8; --spacing2: 16; --spacing3: 24; --spacing4: 32; --spacing5: 40; --spacing6: 48; --spacing7: 56; --spacing8: 64; --spacing9: 72; --spacing10: 80; --spacing11: 88; --spacing12: 96; --ttl-spacing: var(--spacing4); --ttl-ja-size: 16; --ttl-en-size: 32; --ff-base: "Noto Sans JP", "Noto Sans", sans-serif; --ff-roboto: "Roboto", sans-serif; --ff-en: "Goblin One", serif; --zindex-sticky: 1020; --zindex-fixed: 1030; --zindex-modal: 1055; --body-color: #231b4e; --hover-opacity: 0.5; --header-height: 64; --global-nav-height: 48; --card-transform-y: 4px; --card-width: 382; --card-img-aspect-ratio: 141 / 79; --card-body-space: 12; --card-ttl-size: 16; --card-ttl-weight: 700; --card-ttl-clamp: 2; --card-text-size: 14; --card-text-clamp: 3; --breakpoint-pc: 1025; --base-width: 390; --vw-per-px: calc(100vw / var(--base-width)); } @media screen and (min-width: 528px) { :root { --base-width: 528; } } @media screen and (min-width: 1025px) { :root { --base-width: 1280; --header-height: 72; --global-nav-height: 56; } }/* --------------------------------------------------------- * * Sass Variables * *--------------------------------------------------------- */ /* --------------------------------------------------------- * * Media query * *--------------------------------------------------------- */ /* --------------------------------------------------------- * * Responsive size * *--------------------------------------------------------- */ /* --------------------------------------------------------- * * Text * *--------------------------------------------------------- */ html { height: 100%; } body { height: 100%; margin-top: calc(min(var(--header-height) * var(--vw-per-px), var(--header-height) * 1px) + min(var(--global-nav-height) * var(--vw-per-px), var(--global-nav-height) * 1px)); font-family: var(--ff-base); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 500; line-height: 1.5; color: var(--body-color); background-color: #fff; } @media screen and (min-width: 1025px) { body { --header-height: 72; } } img, svg { height: auto; vertical-align: middle; } .img-fluid { max-width: 100%; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentcolor; } /* --------------------------------------------------------- * * .container * *--------------------------------------------------------- */ .container { max-width: min(390 * var(--vw-per-px), 390 * 1px); padding-right: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); padding-left: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); margin-right: auto; margin-left: auto; } @media screen and (min-width: 528px) { .container { max-width: min(528 * var(--vw-per-px), 528 * 1px); padding-right: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); padding-left: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } } @media screen and (min-width: 1025px) { .container { max-width: min(1280 * var(--vw-per-px), 1280 * 1px); } } @media screen and (min-width: 528px) { .container-fluid { max-width: min(768 * var(--vw-per-px), 768 * 1px); } } @media screen and (min-width: 1025px) { .container-02 { max-width: min(1040 * var(--vw-per-px), 1040 * 1px); } } /* --------------------------------------------------------- * * ttl * *--------------------------------------------------------- */ .ttl-group { margin-bottom: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); text-align: center; } .ttl-group-img { width: auto; height: min(40 * var(--vw-per-px), 40 * 1px); } @media screen and (min-width: 1025px) { .ttl-group-img { height: min(48 * var(--vw-per-px), 48 * 1px); } } /* --------------------------------------------------------- * * List * *--------------------------------------------------------- */ .list-disc { padding-left: 1.5em; list-style: disc; } /* --------------------------------------------------------- * * Swiper * *--------------------------------------------------------- */ .swiper { --swiper-scrollbar-size: 8px; --swiper-scrollbar-bg-color: #231b4e; --swiper-scrollbar-drag-bg-color: #1fe995; --swiper-scrollbar-border-radius: 50rem; --swiper-pagination-bullet-horizontal-gap: 8px; --swiper-pagination-color: var(--primary); --swiper-pagination-bullet-size: 16px; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-inactive-color: var(--body-color); } @media screen and (max-width: 1024.98px) { .swiper-topics.swiper .swiper-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); } } @media screen and (min-width: 1025px) { .swiper-playlist.swiper .swiper-wrapper { display: flex; flex-wrap: wrap; gap: min(24 * var(--vw-per-px), 24 * 1px); justify-content: center; } } @media screen and (max-width: 1024.98px) { .swiper-playlist:not(.swiper-initialized).swiper .swiper-wrapper { display: flex; flex-direction: column; gap: min(24 * var(--vw-per-px), 24 * 1px); max-width: min(342 * var(--vw-per-px), 342 * 1px); margin-right: auto; margin-left: auto; } } .swiper .swiper-slide { display: flex; align-self: stretch; height: auto; } @media screen and (max-width: 1024.98px) { .swiper-topics:not([aria-expanded=true]).swiper .swiper-slide:nth-child(4) ~ .swiper-slide { display: none; } } @media screen and (max-width: 1024.98px) { .swiper-topics.swiper-topics-02:not([aria-expanded=true]).swiper .swiper-slide:nth-child(2) ~ .swiper-slide { display: none; } } @media screen and (min-width: 528px) { .swiper-playlist.swiper .swiper-slide { width: min(338 * var(--vw-per-px), 338 * 1px); } } @media screen and (min-width: 1025px) { .swiper-playlist.swiper .swiper-slide { width: min(282 * var(--vw-per-px), 282 * 1px); } } @media screen and (min-width: 528px) { .swiper-bar.swiper .swiper-slide { width: min(342 * var(--vw-per-px), 342 * 1px); } } .swiper .swiper-pagination { position: static; display: flex; justify-content: center; margin-top: calc(min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) - var(--card-transform-y)); } @media screen and (min-width: 1025px) { .swiper-playlist.swiper .swiper-pagination { display: none; } } .swiper .swiper-pagination-bullet { user-select: none; border: 1px solid var(--swiper-pagination-bullet-inactive-color); } .swiper .swiper-pagination-lock { display: none; } .swiper-topics.swiper .swiper-controls { display: flex; gap: 24px; align-items: center; justify-content: center; max-width: 560px; margin: 0 auto; margin-top: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } @media screen and (max-width: 1024.98px) { .swiper-topics.swiper .swiper-controls { display: none; } } .swiper-bar.swiper .swiper-controls { display: flex; gap: 24px; align-items: center; justify-content: center; max-width: 560px; margin: 0 auto; margin-top: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } .swiper-topics.swiper .swiper-prev, .swiper .swiper-next { cursor: pointer; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .swiper-topics.swiper .swiper-prev:hover, .swiper .swiper-next:hover { color: var(--primary); } .swiper-topics.swiper .swiper-prev.swiper-button-lock, .swiper-topics.swiper .swiper-prev.swiper-button-disabled, .swiper .swiper-next.swiper-button-lock, .swiper .swiper-next.swiper-button-disabled { color: var(--black25); cursor: default; } .swiper-bar.swiper .swiper-prev, .swiper .swiper-next { cursor: pointer; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } @media screen and (max-width: 1024.98px) { .swiper-bar.swiper .swiper-prev, .swiper .swiper-next { display: none; } } .swiper-bar.swiper .swiper-prev:hover, .swiper .swiper-next:hover { color: var(--primary); } .swiper-bar.swiper .swiper-prev.swiper-button-lock, .swiper-bar.swiper .swiper-prev.swiper-button-disabled, .swiper .swiper-next.swiper-button-lock, .swiper .swiper-next.swiper-button-disabled { color: var(--black25); cursor: default; } .swiper-topics.swiper .swiper-scrollbar { position: static; } .swiper-bar.swiper .swiper-scrollbar { position: static; max-width: 90%; } @media screen and (min-width: 528px) { .swiper-bar.swiper .swiper-scrollbar { max-width: min(310 * var(--vw-per-px), 310 * 1px); } } @media screen and (min-width: 1025px) { .swiper-bar.swiper .swiper-scrollbar { max-width: 100%; } } .swiper-topics.swiper .swiper-button-lock { display: block; } .swiper-bar.swiper .swiper-button-lock { display: block; } .swiper-topics.swiper .swiper-scrollbar-lock { --swiper-scrollbar-bg-color: var(--black25); display: block !important; } .swiper-topics.swiper .swiper-scrollbar-lock .swiper-scrollbar-drag { display: none !important; } .swiper-bar.swiper .swiper-scrollbar-lock { --swiper-scrollbar-bg-color: var(--black25); display: block !important; } .swiper-bar.swiper .swiper-scrollbar-lock .swiper-scrollbar-drag { display: none !important; } .swiper.swiper-topics { max-width: 1200px; margin-right: auto; margin-left: auto; } @media screen and (max-width: 1024.98px) { .swiper.swiper-topics { max-width: min((342 + var(--spacing3) * 2) * var(--vw-per-px), calc(342 + var(--spacing3) * 2) * 1px); margin-bottom: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); } } @media screen and (min-width: 528px) { .swiper.swiper-playlist { overflow: inherit; } } @media screen and (max-width: 1024.98px) { .swiper.swiper-bar { margin-bottom: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); } } /* --------------------------------------------------------- * * Button * *--------------------------------------------------------- */ .btn-link { --btn-height: 64; --btn-color: var(--body-color); --btn-bg-color: var(--primary); --btn-border-color: var(--body-color); position: relative; display: inline-flex; align-items: center; justify-content: center; width: min(280 * var(--vw-per-px), 280 * 1px); max-width: 100%; min-height: min(var(--btn-height) * var(--vw-per-px), var(--btn-height) * 1px); padding: min(10 * var(--vw-per-px), 10 * 1px) min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px) min(10 * var(--vw-per-px), 10 * 1px) min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.4; color: var(--btn-color); text-align: center; letter-spacing: 0.04em; cursor: pointer; background: var(--btn-bg-color); border: 2px solid var(--btn-border-color); border-radius: 50rem; outline: 0; box-shadow: 0 4px 0 0 rgba(35, 27, 78, 0.2); fill: var(--btn-color); transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .btn-link:hover { --btn-color: #fff; --btn-bg-color: var(--body-color); } .btn-link-before { position: absolute; top: 50%; left: min(20 * var(--vw-per-px), 20 * 1px); width: min(var(--icon-size) * var(--vw-per-px), var(--icon-size) * 1px); height: min(var(--icon-size) * var(--vw-per-px), var(--icon-size) * 1px); transform: translateY(-50%); } .btn-link-center .btn-link-before { position: static; transform: inherit; } .btn-link-after { position: absolute; top: 50%; right: min(16 * var(--vw-per-px), 16 * 1px); width: min(var(--icon-size) * var(--vw-per-px), var(--icon-size) * 1px); height: min(var(--icon-size) * var(--vw-per-px), var(--icon-size) * 1px); transform: translateY(-50%); } .btn-link-center .btn-link-after { position: static; transform: inherit; } .btn-link-white { --btn-bg-color: #fff; } .btn-link-yellow { --btn-bg-color: var(--yellow); } .btn-link-md { --btn-height: 56; } .btn-link-sm { --btn-height: 48; } .btn-link-sm-size { --btn-height: 48; width: min(160 * var(--vw-per-px), 160 * 1px); padding-right: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); padding-left: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); font-size: min(12 * var(--vw-per-px), 12 * 1px); } .btn-link-center { gap: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); padding-right: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); padding-left: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); } .btn-link-more { --btn-height: 48; width: min(160 * var(--vw-per-px), 160 * 1px); padding-right: min(var(--spacing6) * var(--vw-per-px), var(--spacing6) * 1px); padding-left: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); font-size: min(12 * var(--vw-per-px), 12 * 1px); line-height: 1.4; } .btn-link-collapse { width: 100%; border-radius: min(var(--border-radius8) * var(--vw-per-px), var(--border-radius8) * 1px); } .btn-link.disabled { --btn-color: var(--btn-disabled); --btn-bg-color: #fff; --btn-border-color: var(--btn-disabled); pointer-events: none; cursor: default; box-shadow: none; } /* --------------------------------------------------------- * * Playlist * *--------------------------------------------------------- */ .playlist-section { margin-bottom: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } @media screen and (min-width: 1025px) { .playlist-section { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); } } .mb-0 .playlist-section { margin-bottom: 0; } .playlist-lead { margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; } @media screen and (min-width: 528px) { .playlist-lead { text-align: center; } } .playlist-lead-small { font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; } /* --------------------------------------------------------- * * Award * *--------------------------------------------------------- */ .award-space { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); } .award-block { display: grid; grid-template-columns: 100%; gap: min(24 * var(--vw-per-px), 24 * 1px); padding: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); background-color: #fff; border: 1px solid var(--black100); } @media screen and (min-width: 1025px) { .award-block { padding: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); } } .award-block-yellow { border: 8px solid transparent; border-image: linear-gradient(111deg, #f9c600 14.63%, #fff8db 48.59%, #f9c600 52.83%, #f9c600 85.37%) 1; } @media screen and (max-width: 1024.98px) { .award-winner-ttl { max-width: min(240 * var(--vw-per-px), 240 * 1px); margin-inline: auto; } } .award-block-more { padding: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px) 0; font-size: min(14 * var(--vw-per-px), 14 * 1px); font-weight: 700; line-height: 1.8; text-align: right; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .award-row { display: grid; grid-template-columns: min(284 * var(--vw-per-px), 284 * 1px) 1fr; gap: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); } } .award-winner-row { display: grid; gap: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); margin-inline: auto; } @media screen and (max-width: 1024.98px) { .award-winner-row { gap: min(var(--spacing) * var(--vw-per-px), var(--spacing) * 1px); max-width: 310px; } } @media screen and (min-width: 1025px) { .award-winner-row { grid-template-columns: min(320 * var(--vw-per-px), 320 * 1px) 1fr; } } .award-winner-text { font-size: min(20 * var(--vw-per-px), 20 * 1px); font-weight: 700; line-height: 1.8; color: var(--black100); letter-spacing: 0.04em; } @media screen and (max-width: 1024.98px) { .award-winner-text { margin-top: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); line-height: 1.4; } } .award-winner-text-gray { color: var(--black60); } a.award-winner-row { transition: opacity 0.15s ease-in-out; } @media screen and (min-width: 1025px) { a.award-winner-row:hover { opacity: 0.8; } } .award-image { width: min(240 * var(--vw-per-px), 240 * 1px); margin: 0 auto min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); text-align: center; } @media screen and (min-width: 1025px) { .award-image { width: auto; margin: 0; } } .award-ttl { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(20 * var(--vw-per-px), 20 * 1px); font-weight: 700; line-height: 1.4; text-align: center; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .award-ttl { font-size: min(28 * var(--vw-per-px), 28 * 1px); line-height: 1.4; text-align: left; } } .award-caption { font-family: var(--notosansjp); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; } .award-text-small { font-size: min(16 * var(--vw-per-px), 16 * 1px); line-height: 1.8125; } @media screen and (max-width: 1024.98px) { .award-text-small { font-size: min(12 * var(--vw-per-px), 12 * 1px); line-height: 1.4; } } .award-block-body { padding: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px) 0 0; } @media screen and (min-width: 1025px) { .award-block-body { padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) 0; } } .award-winner-block-body { padding: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px) 0 0; margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); } @media screen and (min-width: 1025px) { .award-winner-block-body { padding: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) 0 0; } } .award-winner-block-body-last { padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) 0 0; } .award-comment-block-body { display: grid; grid-template-columns: min(96 * var(--vw-per-px), 96 * 1px) 1fr; gap: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); align-items: center; padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); text-align: left; background-color: var(--gray); } .award-comment-block-body-last { margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); } .award-comment-block-body .award-comment-link { color: var(--blue100); text-decoration: underline; } .award-comment-align-top { align-items: flex-start; } @media screen and (min-width: 1025px) { .award-comment-align-top { grid-template-columns: min(96 * var(--vw-per-px), 96 * 1px) 1fr; gap: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); text-align: left; } } @media screen and (max-width: 1024.98px) { .award-comment-align-top { grid-template-columns: 1fr; gap: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); text-align: center; } } .award-comment-title { margin-bottom: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; } .award-comment-small-text { font-size: min(14 * var(--vw-per-px), 14 * 1px); font-weight: 500; line-height: 1.8; text-align: left; letter-spacing: 0.04em; } .award-block-rule { padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(14 * var(--vw-per-px), 14 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; background-color: var(--gray); } @media screen and (min-width: 1025px) { .award-block-rule { padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); line-height: 1.8; } } .award-block .award-block-rule { margin-top: min(-8 * var(--vw-per-px), -8 * 1px); } .award-block-rule-ttl { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; text-align: center; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .award-block-rule-ttl { margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(18 * var(--vw-per-px), 18 * 1px); line-height: 1.8; } } .award-block-rule-row { display: grid; grid-template-columns: 100%; gap: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); } @media screen and (min-width: 1025px) { .award-block-rule-row { display: flex; gap: min(var(--spacing4) * var(--vw-per-px), var(--spacing4) * 1px); justify-content: center; } } .award-block-rule-apps { font-size: min(16 * var(--vw-per-px), 16 * 1px); line-height: 1.8; letter-spacing: 0.04em; } .award-block-rule-apps dt, .award-block-rule-apps dd { margin-bottom: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); } .award-block-rule-apps dt:last-child, .award-block-rule-apps dd:last-child { margin-bottom: 0; } .award-block-rule-apps dt { font-weight: 700; } .award-note { font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; } /* --------------------------------------------------------- * * Privilege * *--------------------------------------------------------- */ .privilege { margin-bottom: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } @media screen and (min-width: 1025px) { .privilege { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); } } .privilege-row { display: grid; grid-template-columns: 100%; gap: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); } @media screen and (min-width: 1025px) { .privilege-row { grid-template-columns: repeat(2, 1fr); gap: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); } } .privilege-01 { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .privilege-01 { font-size: min(24 * var(--vw-per-px), 24 * 1px); line-height: 1.8; text-align: center; } } .privilege-02 { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .privilege-02 { font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.8; text-align: center; } } .privilege-text { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; } .privilege-note { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 500; line-height: 1.8; color: var(--red); letter-spacing: 0.04em; } .privilege-list { font-size: min(14 * var(--vw-per-px), 14 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .privilege-list { font-size: min(16 * var(--vw-per-px), 16 * 1px); line-height: 1.8; } } .privilege-list li { display: flex; gap: min(4 * var(--vw-per-px), 4 * 1px); margin: min(4 * var(--vw-per-px), 4 * 1px) 0; } @media screen and (min-width: 1025px) { .privilege-list li { margin: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px) 0; } } .privilege-list-icon { flex: 0 0 auto; width: min(20 * var(--vw-per-px), 20 * 1px); height: min(20 * var(--vw-per-px), 20 * 1px); margin-top: min(2 * var(--vw-per-px), 2 * 1px); color: var(--blue100); } .privilege-items { display: flex; flex-direction: column; gap: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); width: 100%; padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); background-color: var(--gray); } @media screen and (min-width: 1025px) { .privilege-items { display: inline-flex; flex-flow: row wrap; gap: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); width: auto; } } .privilege-item { display: flex; gap: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; text-align: left; letter-spacing: 0.04em; } .privilege-item-icon { flex: 0 0 auto; width: min(20 * var(--vw-per-px), 20 * 1px); height: min(20 * var(--vw-per-px), 20 * 1px); margin-top: min(4 * var(--vw-per-px), 4 * 1px); } .privilege-artists { display: flex; flex-wrap: wrap; gap: min(16 * var(--vw-per-px), 16 * 1px); align-items: center; justify-content: center; margin-bottom: min(8 * var(--vw-per-px), 8 * 1px); } .privilege-artist { width: min(110 * var(--vw-per-px), 110 * 1px); } /* --------------------------------------------------------- * * Approval * *--------------------------------------------------------- */ @media screen and (min-width: 1025px) { .approval-wrap { max-width: min(560 * var(--vw-per-px), 560 * 1px); margin: 0 auto; } } .approval-lead { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(20 * var(--vw-per-px), 20 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .approval-lead { text-align: center; } } .approval-collapse-btn { --btn-height: 56; padding-right: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.4; } @media screen and (min-width: 1025px) { .approval-collapse-btn { --btn-height: 72; font-size: min(24 * var(--vw-per-px), 24 * 1px); line-height: 1.4; } } .approval-collapse-btn[aria-expanded=true] { background-color: var(--blue20); border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; box-shadow: none; } .approval-collapse-btn[aria-expanded=true]:hover { color: var(--body-color); } .approval-collapse-btn .btn-link-after { right: min(10 * var(--vw-per-px), 10 * 1px); } .approval-collapse { display: none; padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); background-color: #fff; border-right: 2px solid var(--body-color); border-bottom: 2px solid var(--body-color); border-left: 2px solid var(--body-color); border-bottom-right-radius: min(var(--border-radius8) * var(--vw-per-px), var(--border-radius8) * 1px); border-bottom-left-radius: min(var(--border-radius8) * var(--vw-per-px), var(--border-radius8) * 1px); box-shadow: 0 4px 0 0 rgba(35, 27, 78, 0.2); } @media screen and (min-width: 1025px) { .approval-collapse { padding: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); } } .approval-collapse[aria-expanded=true] { display: block; } .approval-section { margin-bottom: min(var(--spacing4) * var(--vw-per-px), var(--spacing4) * 1px); } @media screen and (min-width: 1025px) { .approval-section { margin-bottom: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); } } .approval-heading { display: flex; gap: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); align-items: flex-start; margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .approval-heading { font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.8; } } .approval-heading-num { flex: 0 0 auto; width: min(24 * var(--vw-per-px), 24 * 1px); width: height(24); margin-top: min(2 * var(--vw-per-px), 2 * 1px); } @media screen and (min-width: 1025px) { .approval-heading-num { margin-top: min(6 * var(--vw-per-px), 6 * 1px); } } .approval-item { display: flex; gap: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); align-items: flex-start; margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; } .approval-item-icon { flex: 0 0 auto; width: min(20 * var(--vw-per-px), 20 * 1px); height: min(20 * var(--vw-per-px), 20 * 1px); margin-top: min(6 * var(--vw-per-px), 6 * 1px); } .approval-note { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 500; line-height: 1.8; color: var(--black60); letter-spacing: 0.04em; } /* --------------------------------------------------------- * * Profile * *--------------------------------------------------------- */ .profile { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); } .profile-block { position: relative; padding: min(var(--spacing4) * var(--vw-per-px), var(--spacing4) * 1px) min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); background-color: var(--pink100); border: 1px solid var(--black100); } @media screen and (min-width: 528px) { .profile-block { width: min(448 * var(--vw-per-px), 448 * 1px); margin: 0 auto; } } @media screen and (min-width: 1025px) { .profile-block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); width: 100%; padding: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } } .profile-sticker { position: absolute; top: min(-13 * var(--vw-per-px), -13 * 1px); right: min(-13 * var(--vw-per-px), -13 * 1px); width: min(143 * var(--vw-per-px), 143 * 1px); } @media screen and (min-width: 1025px) { .profile-sticker { top: min(-24 * var(--vw-per-px), -24 * 1px); right: min(38 * var(--vw-per-px), 38 * 1px); width: min(180 * var(--vw-per-px), 180 * 1px); } } .profile-image { margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); text-align: center; } @media screen and (min-width: 1025px) { .profile-image { margin-bottom: 0; } } .profile-avatar { width: min(200 * var(--vw-per-px), 200 * 1px); border: 1px solid var(--black100); } @media screen and (min-width: 1025px) { .profile-avatar { width: min(240 * var(--vw-per-px), 240 * 1px); } } .profile-thumb { width: min(280 * var(--vw-per-px), 280 * 1px); } @media screen and (min-width: 1025px) { .profile-thumb { width: min(320 * var(--vw-per-px), 320 * 1px); } } .profile-ttl { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(20 * var(--vw-per-px), 20 * 1px); font-weight: 700; line-height: 1.4; text-align: center; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .profile-ttl { font-size: min(32 * var(--vw-per-px), 32 * 1px); line-height: 1.4; text-align: left; } .profile-ttl--small { font-size: min(24 * var(--vw-per-px), 24 * 1px); line-height: 1.4; } } .profile-name { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(32 * var(--vw-per-px), 32 * 1px); font-weight: 700; line-height: 1.4; text-align: center; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .profile-name { text-align: left; } } .profile-caption { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; } .profile-sns { display: flex; flex-wrap: wrap; gap: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); justify-content: center; margin-top: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); } @media screen and (min-width: 1025px) { .profile-sns { justify-content: flex-start; } } .profile-sns-icon { width: min(48 * var(--vw-per-px), 48 * 1px); height: min(48 * var(--vw-per-px), 48 * 1px); } /* --------------------------------------------------------- * * Post Schedule * *--------------------------------------------------------- */ .post-schedule { margin-bottom: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } @media screen and (min-width: 1025px) { .post-schedule { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); } } .post-schedule-date { position: relative; padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(20 * var(--vw-per-px), 20 * 1px); font-weight: 700; line-height: 1.8; text-align: center; letter-spacing: 0.04em; background-color: var(--pink30); } @media screen and (min-width: 1025px) { .post-schedule-date { padding: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(24 * var(--vw-per-px), 24 * 1px); line-height: 1.8; } } .post-schedule-date-sticker { position: absolute; top: -36px; left: 0; width: min(80 * var(--vw-per-px), 80 * 1px); max-block-size: inherit; } @media screen and (min-width: 1025px) { .post-schedule-date-sticker { top: -53px; width: min(143 * var(--vw-per-px), 143 * 1px); } } .post-schedule-caution { margin-top: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 700; line-height: 1.8; color: var(--red); letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .post-schedule-caution { font-size: min(16 * var(--vw-per-px), 16 * 1px); line-height: 1.8; text-align: center; } } /* --------------------------------------------------------- * * Post setting * *--------------------------------------------------------- */ .post-setting-ttl { padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; color: #fff; text-align: center; letter-spacing: 0.04em; background-color: var(--red); } @media screen and (min-width: 1025px) { .post-setting-ttl { font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.8; } } .post-setting-dl { padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); overflow: hidden; background-color: var(--pink30); border: 1px solid var(--red); } @media screen and (min-width: 1025px) { .post-setting-dl { padding: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); } } .post-setting-dl dt { float: left; width: min(80 * var(--vw-per-px), 80 * 1px); padding: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px) 0; margin-top: min(2 * var(--vw-per-px), 2 * 1px); margin-right: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(14 * var(--vw-per-px), 14 * 1px); font-weight: 700; line-height: 1.4; color: #fff; text-align: center; letter-spacing: 0.04em; background-color: var(--red); border-radius: 50rem; } @media screen and (min-width: 1025px) { .post-setting-dl dt { margin-top: min(4 * var(--vw-per-px), 4 * 1px); } } .post-setting-dl dd { display: flex; flex-direction: column; gap: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); overflow: hidden; font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; } @media screen and (min-width: 528px) { .post-setting-dl dd { flex-flow: row wrap; align-items: center; } } @media screen and (min-width: 1025px) { .post-setting-dl dd { gap: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.8; } } .post-setting-small { font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; vertical-align: middle; } .post-setting-list { font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; } .post-setting-list li { display: flex; gap: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); align-items: flex-start; margin-bottom: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); } .post-setting-list-icon { flex: 0 0 auto; width: min(20 * var(--vw-per-px), 20 * 1px); height: min(20 * var(--vw-per-px), 20 * 1px); margin-top: min(6 * var(--vw-per-px), 6 * 1px); } .post-setting-block { padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); background-color: var(--pink30); border: 1px solid var(--red); border-top: 0; } @media screen and (min-width: 1025px) { .post-setting-block { padding: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) min(var(--spacing4) * var(--vw-per-px), var(--spacing4) * 1px); } } .post-setting-lead { margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; text-align: center; letter-spacing: 0.04em; } .post-setting-heading { padding: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); font-size: min(14 * var(--vw-per-px), 14 * 1px); font-weight: 700; line-height: 1.4; color: #fff; text-align: center; letter-spacing: 0.04em; background-color: var(--red); border-radius: 50rem; } .post-setting-tags { display: flex; flex-direction: column; gap: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .post-setting-tags { flex-flow: row wrap; gap: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); justify-content: center; font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.8; } } /* --------------------------------------------------------- * * Post Action * *--------------------------------------------------------- */ .post-action { margin: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px) 0; text-align: center; } @media screen and (min-width: 1025px) { .post-action { margin: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px) 0; } } .post-action-btns { display: flex; flex-wrap: wrap; gap: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); align-items: flex-start; justify-content: center; max-width: min(960 * var(--vw-per-px), 960 * 1px); margin: 0 auto; } @media screen and (min-width: 1025px) { .post-action-btns { gap: min(var(--spacing4) * var(--vw-per-px), var(--spacing4) * 1px); } } .post-action-note { margin-top: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 500; line-height: 1.8; color: var(--red); text-align: left; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .post-action-note { font-size: min(16 * var(--vw-per-px), 16 * 1px); line-height: 1.8; text-align: center; } } .post-action .btn-link { --btn-height: 80; width: min(320 * var(--vw-per-px), 320 * 1px); font-size: min(18 * var(--vw-per-px), 18 * 1px); line-height: 1.8; } /* --------------------------------------------------------- * * Ranking * *--------------------------------------------------------- */ .ranking-block { padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); background-color: #fff; } @media screen and (min-width: 1025px) { .ranking-block { padding: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) min(var(--spacing4) * var(--vw-per-px), var(--spacing4) * 1px); } } .ranking-list li { display: flex; gap: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); align-items: flex-start; font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; } .ranking-list li:not(:last-child) { margin-bottom: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px); } .ranking-list-icon { flex: 0 0 auto; width: min(20 * var(--vw-per-px), 20 * 1px); height: min(20 * var(--vw-per-px), 20 * 1px); margin-top: min(6 * var(--vw-per-px), 6 * 1px); } .ranking-note { font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 500; line-height: 1.8; color: var(--black60); letter-spacing: 0.04em; } .ranking-permission { margin-bottom: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } @media screen and (min-width: 1025px) { .ranking-permission { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); } } .ranking-permission-block { padding: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); background-color: #fff; border: 1px solid var(--black100); } @media screen and (min-width: 1025px) { .ranking-permission-block { padding: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) min(var(--spacing4) * var(--vw-per-px), var(--spacing4) * 1px); } } .ranking-permission-heading { margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; text-align: center; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .ranking-permission-heading { font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.8; } } .ranking-rule { margin-bottom: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } @media screen and (min-width: 1025px) { .ranking-rule { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); } } .ranking-terms { margin-bottom: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } @media screen and (min-width: 1025px) { .ranking-terms { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); } } .ranking-terms-section { margin-bottom: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px); } .ranking-terms-section .btn-link-yellow { padding-right: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); } @media screen and (min-width: 1025px) { .ranking-terms-section { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px); } } .ranking-terms-lead { margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; text-align: center; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .ranking-terms-lead { font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.8; } } .ranking-reference-link { font-size: min(14 * var(--vw-per-px), 14 * 1px); font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; } .ranking-btns { display: flex; flex-wrap: wrap; gap: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px); justify-content: center; margin: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px) 0; } .ranking-btns .btn-link { --btn-height: 56; width: 100%; max-width: min(296 * var(--vw-per-px), 296 * 1px); padding-right: min(18 * var(--vw-per-px), 18 * 1px); padding-left: 0; } /* --------------------------------------------------------- * * Special * *--------------------------------------------------------- */ .special-top { margin-bottom: min(var(--spacing6) * var(--vw-per-px), var(--spacing6) * 1px); text-align: center; background-color: #8c5cac; } @media screen and (min-width: 1025px) { .special-top { margin-bottom: min(var(--spacing10) * var(--vw-per-px), var(--spacing10) * 1px); } } .special-top-img { width: 100%; } @media screen and (min-width: 1025px) { .special-top-img { width: min(1200 * var(--vw-per-px), 1200 * 1px); } } .special-ttl { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px); text-align: center; } .special-ttl-inner { display: inline-block; padding: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px) min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; color: #fff; letter-spacing: 0.04em; background-color: var(--body-color); } @media screen and (min-width: 1025px) { .special-ttl-inner { font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.8; } } .special-lead { margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); font-size: min(16 * var(--vw-per-px), 16 * 1px); font-weight: 700; line-height: 1.8; text-align: center; letter-spacing: 0.04em; } @media screen and (min-width: 1025px) { .special-lead { font-size: min(20 * var(--vw-per-px), 20 * 1px); line-height: 1.8; } } .special-note { font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 500; line-height: 1.8; letter-spacing: 0.04em; } /* --------------------------------------------------------- * * Fancybox * *--------------------------------------------------------- */ body .fancybox__container { --fancybox-zIndex: calc(var(--zindex-modal) - 1); --fancybox-bg: rgb(0 0 0 / 50%); top: min(var(--header-height) * var(--vw-per-px), var(--header-height) * 1px); } body .fancybox__backdrop { top: min(var(--header-height) * var(--vw-per-px), var(--header-height) * 1px); } body .is-compact .fancybox__content > .f-button.is-close-btn, body .fancybox__content > .f-button.is-close-btn { --f-button-bg: var(--black100); --f-button-hover-bg: var(--black60); --f-button-active-bg: var(--black100); --f-button-border-radius: 100%; --f-button-width: 40px; --f-button-height: 40px; --f-button-svg-width: 20px; --f-button-svg-height: 20px; top: -8px; right: -8px; border: 1px solid #fff; opacity: 1; } body .fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn, body .fancybox__container .fancybox__slide.has-close-btn { padding-top: min(64 * var(--vw-per-px), 64 * 1px); padding-bottom: min(64 * var(--vw-per-px), 64 * 1px); } @media screen and (max-width: 527.98px) { body .fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn, body .fancybox__container .fancybox__slide.has-close-btn { padding-right: min(28 * var(--vw-per-px), 28 * 1px); padding-left: min(20 * var(--vw-per-px), 20 * 1px); } } body .modal-body .container { padding-right: 0; padding-left: 0; } /* --------------------------------------------------------- * * Card Ranking * *--------------------------------------------------------- */ .card-ranking-list { display: flex; flex-wrap: wrap; gap: min(24 * var(--vw-per-px), 24 * 1px) min(16 * var(--vw-per-px), 16 * 1px); align-items: stretch; counter-reset: card-ranking; } @media screen and (min-width: 528px) { .card-ranking-list { max-width: min(342 * var(--vw-per-px), 342 * 1px); margin: 0 auto; } } @media screen and (min-width: 1025px) { .card-ranking-list { gap: min(40 * var(--vw-per-px), 40 * 1px) min(24 * var(--vw-per-px), 24 * 1px); justify-content: center; max-width: 100%; } } .card-ranking-list-item { width: calc(50% - min(8 * var(--vw-per-px), 8 * 1px)); } @media screen and (min-width: 1025px) { .card-ranking-list-item { width: calc(20% - min(20 * var(--vw-per-px), 20 * 1px)); } } .card-ranking-list-item:nth-child(1), .card-ranking-list-item:nth-child(2), .card-ranking-list-item:nth-child(3) { width: 100%; } @media screen and (min-width: 1025px) { .card-ranking-list-item:nth-child(1), .card-ranking-list-item:nth-child(2), .card-ranking-list-item:nth-child(3) { width: calc(33.33333% - min(80 * var(--vw-per-px), 80 * 1px)); } } @media screen and (min-width: 1025px) { .card-ranking-list-item:nth-child(4), .card-ranking-list-item:nth-child(5), .card-ranking-list-item:nth-child(6), .card-ranking-list-item:nth-child(7), .card-ranking-list-item:nth-child(9) { width: calc(25% - min(40 * var(--vw-per-px), 40 * 1px)); } } @media screen and (min-width: 1025px) { .card-ranking-list-item:nth-child(8), .card-ranking-list-item:nth-child(10) { width: calc(37.5% - min(40 * var(--vw-per-px), 40 * 1px)); } } @media screen and (max-width: 1024.98px) { .card-ranking-list-item:nth-child(10) ~ .card-ranking-list-item { margin-bottom: min(16 * var(--vw-per-px), 16 * 1px); } .card-ranking-list-home .card-ranking-list-item:nth-child(10) ~ .card-ranking-list-item { margin-bottom: 0; } } @media screen and (min-width: 1025px) { .card-ranking-list-item:nth-child(8), .card-ranking-list-item:nth-child(9), .card-ranking-list-item:nth-child(10) { margin-bottom: min(16 * var(--vw-per-px), 16 * 1px); } } @media screen and (max-width: 1024.98px) { .card-ranking-list-item:nth-child(10) { width: 100%; margin-bottom: min(32 * var(--vw-per-px), 32 * 1px); } } @media screen and (max-width: 1024.98px) { .card-ranking-list-item:nth-child(10) ~ .card-ranking-list-item:nth-last-child(1), .card-ranking-list-item:nth-child(10) ~ .card-ranking-list-item:nth-last-child(2) { margin-bottom: 0; } } @media screen and (min-width: 1025px) { .card-ranking-list-home .card-ranking-list-item { width: calc(20% - min(20 * var(--vw-per-px), 20 * 1px)); } } @media screen and (max-width: 1024.98px) { .card-ranking-list-home .card-ranking-list-item:not(:nth-child(1)) { width: calc(50% - min(8 * var(--vw-per-px), 8 * 1px)); } } @media screen and (min-width: 1025px) { .card-ranking-list-home { gap: min(16 * var(--vw-per-px), 16 * 1px); } } .card-ranking-item { position: relative; height: 100%; transition: opacity 0.15s ease-in-out; } .card-ranking-item:hover:has(a) { opacity: var(--hover-opacity); } @media screen and (min-width: 1025px) { .card-ranking-list-item:nth-child(8) .card-ranking-item, .card-ranking-list-item:nth-child(10) .card-ranking-item { width: 63.415%; } } .card-ranking-list-item:nth-child(8) .card-ranking-item { margin-left: auto; } @media screen and (max-width: 1024.98px) { .card-ranking-list-item:nth-child(10) .card-ranking-item { width: calc(50% - min(8 * var(--vw-per-px), 8 * 1px)); } } .card-ranking-link { position: relative; display: flex; flex-direction: column; height: 100%; background-color: #fff; border: 2px solid var(--body-color); border-radius: min(var(--border-radius8) * var(--vw-per-px), var(--border-radius8) * 1px); box-shadow: 0 var(--card-transform-y) rgba(35, 27, 78, 0.2); transition: opacity 0.15s ease-in-out; } .card-ranking-num { position: absolute; top: -8px; left: -6px; display: flex; align-items: center; justify-content: center; width: min(56 * var(--vw-per-px), 56 * 1px); height: min(32 * var(--vw-per-px), 32 * 1px); font-family: var(--ff-roboto); font-size: min(20 * var(--vw-per-px), 20 * 1px); font-weight: 900; line-height: 1; color: #fff; text-align: center; background-color: var(--black100); border-radius: min(4 * var(--vw-per-px), 4 * 1px); } .card-ranking-list-item:nth-child(1) .card-ranking-num, .card-ranking-list-item:nth-child(2) .card-ranking-num, .card-ranking-list-item:nth-child(3) .card-ranking-num { left: -10px; width: min(60 * var(--vw-per-px), 60 * 1px); height: min(60 * var(--vw-per-px), 60 * 1px); font-size: min(36 * var(--vw-per-px), 36 * 1px); color: var(--black100); } @media screen and (min-width: 1025px) { .card-ranking-list-home .card-ranking-list-item:nth-child(1) .card-ranking-num { width: min(44 * var(--vw-per-px), 44 * 1px); height: min(44 * var(--vw-per-px), 44 * 1px); font-size: min(24 * var(--vw-per-px), 24 * 1px); } } .card-ranking-list-home .card-ranking-list-item:nth-child(2) .card-ranking-num, .card-ranking-list-home .card-ranking-list-item:nth-child(3) .card-ranking-num { width: min(44 * var(--vw-per-px), 44 * 1px); height: min(44 * var(--vw-per-px), 44 * 1px); font-size: min(24 * var(--vw-per-px), 24 * 1px); } .card-ranking-list-item:nth-child(1) .card-ranking-num { background: url("../../assets/images/ranking-num-01-Cw0aON53.png") center/contain no-repeat; } .card-ranking-list-item:nth-child(2) .card-ranking-num { background: url("../../assets/images/ranking-num-02-dr1s_xaj.png") center/contain no-repeat; } .card-ranking-list-item:nth-child(3) .card-ranking-num { background: url("../../assets/images/ranking-num-03-B7siYos3.png") center/contain no-repeat; } .card-ranking-list-item:nth-child(4) .card-ranking-num, .card-ranking-list-item:nth-child(5) .card-ranking-num, .card-ranking-list-item:nth-child(6) .card-ranking-num, .card-ranking-list-item:nth-child(7) .card-ranking-num, .card-ranking-list-item:nth-child(8) .card-ranking-num, .card-ranking-list-item:nth-child(9) .card-ranking-num, .card-ranking-list-item:nth-child(10) .card-ranking-num { left: -10px; width: min(44 * var(--vw-per-px), 44 * 1px); height: min(44 * var(--vw-per-px), 44 * 1px); font-size: min(24 * var(--vw-per-px), 24 * 1px); color: var(--black100); background: url("data:image/png;base64,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") center/contain no-repeat; } .card-ranking-num::before { content: counter(card-ranking); counter-increment: card-ranking; } .card-ranking-image { aspect-ratio: var(--card-img-aspect-ratio); overflow: hidden; background-color: var(--black25); border-top-left-radius: min(6 * var(--vw-per-px), 6 * 1px); border-top-right-radius: min(6 * var(--vw-per-px), 6 * 1px); } .card-ranking-img { width: 100%; height: 100%; object-fit: cover; } .card-ranking-body { display: flex; flex-direction: column; gap: min(4 * var(--vw-per-px), 4 * 1px); width: 100%; min-width: 0; padding: min(10 * var(--vw-per-px), 10 * 1px) min(8 * var(--vw-per-px), 8 * 1px); } .card-ranking-list .card-ranking-list-item:nth-child(1) .card-ranking-body, .card-ranking-list:not(.card-ranking-list-home) .card-ranking-list-item:nth-child(2) .card-ranking-body, .card-ranking-list:not(.card-ranking-list-home) .card-ranking-list-item:nth-child(3) .card-ranking-body { gap: min(4 * var(--vw-per-px), 4 * 1px); padding: min(12 * var(--vw-per-px), 12 * 1px); } .card-ranking-ttl { font-size: min(14 * var(--vw-per-px), 14 * 1px); font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .card-ranking-list .card-ranking-list-item:nth-child(1) .card-ranking-ttl, .card-ranking-list:not(.card-ranking-list-home) .card-ranking-list-item:nth-child(2) .card-ranking-ttl, .card-ranking-list:not(.card-ranking-list-home) .card-ranking-list-item:nth-child(3) .card-ranking-ttl { font-size: min(16 * var(--vw-per-px), 16 * 1px); line-height: 1.4; } @media screen and (min-width: 1025px) { .card-ranking-list-home .card-ranking-ttl, .card-ranking-list-home .card-ranking-list-item:nth-child(1) .card-ranking-ttl { font-size: min(14 * var(--vw-per-px), 14 * 1px); line-height: 1.4; } } .card-ranking-user { font-size: min(12 * var(--vw-per-px), 12 * 1px); font-weight: 500; line-height: 1.4; color: var(--black60); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-ranking-list .card-ranking-list-item:nth-child(1) .card-ranking-user, .card-ranking-list:not(.card-ranking-list-home) .card-ranking-list-item:nth-child(2) .card-ranking-user, .card-ranking-list:not(.card-ranking-list-home) .card-ranking-list-item:nth-child(3) .card-ranking-user { font-size: min(14 * var(--vw-per-px), 14 * 1px); line-height: 1.4; } @media screen and (min-width: 1025px) { .card-ranking-list-home .card-ranking-user { font-size: min(12 * var(--vw-per-px), 12 * 1px); line-height: 1.4; } }/* --------------------------------------------------------- * * Sass Variables * *--------------------------------------------------------- */ /* --------------------------------------------------------- * * Media query * *--------------------------------------------------------- */ /* --------------------------------------------------------- * * Responsive size * *--------------------------------------------------------- */ /* --------------------------------------------------------- * * Text * *--------------------------------------------------------- */ .d-none { display: none !important; } .d-block { display: block !important; } .d-inline-block { display: inline-block !important; } @media screen and (min-width: 528px) { .d-tab-none { display: none !important; } .d-tab-block { display: block !important; } .d-tab-inline { display: inline !important; } } @media screen and (min-width: 1025px) { .d-pc-none { display: none !important; } .d-pc-block { display: block !important; } .d-pc-inline { display: inline !important; } } .w-100 { width: 100% !important; } .w-auto { width: auto !important; } .ms-auto { margin-left: auto !important; } .mb-0 { margin-bottom: 0 !important; } .mb-half { margin-bottom: min(var(--spacing-harf) * var(--vw-per-px), var(--spacing-harf) * 1px) !important; } .mb-1 { margin-bottom: min(var(--spacingdefault) * var(--vw-per-px), var(--spacingdefault) * 1px) !important; } .mb-2 { margin-bottom: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px) !important; } .mb-3 { margin-bottom: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) !important; } .mb-4 { margin-bottom: min(var(--spacing4) * var(--vw-per-px), var(--spacing4) * 1px) !important; } .mb-5 { margin-bottom: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px) !important; } @media screen and (min-width: 1025px) { .mb-pc-3 { margin-bottom: min(var(--spacing3) * var(--vw-per-px), var(--spacing3) * 1px) !important; } .mb-pc-5 { margin-bottom: min(var(--spacing5) * var(--vw-per-px), var(--spacing5) * 1px) !important; } .mb-pc-7 { margin-bottom: min(var(--spacing7) * var(--vw-per-px), var(--spacing7) * 1px) !important; } } .text-center { text-align: center !important; } .text-start { text-align: left !important; } .text-end { text-align: right !important; } @media screen and (min-width: 1025px) { .text-pc-center { text-align: center !important; } } .align-top { vertical-align: top; } .fw-500 { font-weight: 500; } .fw-700 { font-weight: 700; } .text-link { color: var(--blue100); text-decoration: underline; } .text-link:hover { text-decoration: none; } .text-blue { color: var(--blue100) !important; } .text-red { color: var(--red) !important; } .text-gray { color: var(--black60) !important; } .text-body { color: var(--body-color) !important; } .text-white { color: #fff !important; } .border { border: 1px solid var(--black100); } .hover-opacity { transition: opacity 0.15s ease-in-out; } .hover-opacity:hover { opacity: var(--hover-opacity); } [aria-expanded=false] .d-expanded-false-none { display: none !important; } [aria-expanded=true] .d-expanded-true-none { display: none !important; } .is-tablet .d-show-mobile, .is-pc .d-show-mobile { display: none !important; } .is-mobile .d-show-pc { display: none !important; } .more-text { text-align: right; margin-top: min(var(--spacing2) * var(--vw-per-px), var(--spacing2) * 1px); } .more-text-link { font-size: min(14 * var(--vw-per-px), 14 * 1px); font-weight: 700; line-height: 1.8; letter-spacing: 0.04em; text-decoration: underline; display: inline-flex; align-items: center; gap: min(4 * var(--vw-per-px), 4 * 1px); } .more-text-link:hover { text-decoration: none; }.btn-to-top[data-astro-cid-35ed7um5]{position:fixed;right:min(12 * var(--vw-per-px),12 * 1px);bottom:min(12 * var(--vw-per-px),12 * 1px);z-index:var(--zindex-sticky);width:min(48 * var(--vw-per-px),48 * 1px);height:min(48 * var(--vw-per-px),48 * 1px);cursor:pointer;border-radius:100px}@media screen and (min-width: 1025px){.btn-to-top[data-astro-cid-35ed7um5]{width:min(56 * var(--vw-per-px),56 * 1px);height:min(56 * var(--vw-per-px),56 * 1px)}}.btn-to-top-bg[data-astro-cid-35ed7um5]{fill:var(--black100);transition:fill 0.15s ease-in-out}.btn-to-top[data-astro-cid-35ed7um5]:hover .btn-to-top-bg[data-astro-cid-35ed7um5]{fill:var(--primary)}.footer[data-astro-cid-35ed7um5]{padding:min(var(--spacing7) * var(--vw-per-px),var(--spacing7) * 1px) 0;color:#fff;text-align:center;background-color:var(--body-color);border-top:1px solid #fff}@media screen and (min-width: 1025px){.footer[data-astro-cid-35ed7um5]{padding:min(var(--spacing12) * var(--vw-per-px),var(--spacing12) * 1px) 0}}.footer-sns[data-astro-cid-35ed7um5]{margin-bottom:min(var(--spacing5) * var(--vw-per-px),var(--spacing5) * 1px)}.footer-sns-heading[data-astro-cid-35ed7um5]{margin-bottom:min(var(--spacing2) * var(--vw-per-px),var(--spacing2) * 1px);font-family:var(--ff-en);font-size:min(16 * var(--vw-per-px),16 * 1px);font-weight:400;line-height:1.2;text-transform:uppercase}@media screen and (min-width: 1025px){.footer-sns-heading[data-astro-cid-35ed7um5]{margin-bottom:min(var(--spacing3) * var(--vw-per-px),var(--spacing3) * 1px);font-size:min(24 * var(--vw-per-px),24 * 1px);line-height:1.2}}.footer-sns-btn[data-astro-cid-35ed7um5]{display:block;width:min(64 * var(--vw-per-px),64 * 1px);margin:0 auto}@media screen and (min-width: 1025px){.footer-sns-btn[data-astro-cid-35ed7um5]{width:min(48 * var(--vw-per-px),48 * 1px)}}.footer-yamaha[data-astro-cid-35ed7um5]{margin-bottom:min(var(--spacing5) * var(--vw-per-px),var(--spacing5) * 1px);font-size:min(12 * var(--vw-per-px),12 * 1px);line-height:1.8;letter-spacing:0.04em}.footer-yamaha-logo[data-astro-cid-35ed7um5]{margin-bottom:min(12 * var(--vw-per-px),12 * 1px);vertical-align:top}@media screen and (min-width: 1025px){.footer-yamaha-logo[data-astro-cid-35ed7um5]{margin-bottom:0}}.footer-copyright-small[data-astro-cid-35ed7um5]{font-size:min(12 * var(--vw-per-px),12 * 1px);line-height:1.8;letter-spacing:0.04em}.burger[data-astro-cid-sltviwnf]{--burger-width: 40px;z-index:var(--zindex-fixed);display:flex;align-items:center;justify-content:center;width:min(56 * var(--vw-per-px),56 * 1px);height:min(48 * var(--vw-per-px),48 * 1px);margin:0;text-align:center;cursor:pointer;background:none;border:none;outline:none;transition:transform 0.3s ease-in-out}.burger-bar[data-astro-cid-sltviwnf]{position:relative;margin:13px auto 13px auto;user-select:none}.burger-bar[data-astro-cid-sltviwnf],.burger-bar[data-astro-cid-sltviwnf]::before,.burger-bar[data-astro-cid-sltviwnf]::after{display:block;width:var(--burger-width);height:2px;background-color:var(--black100);outline:1px solid transparent;transition-duration:0.3s;transition-property:background-color,transform}.burger-bar[data-astro-cid-sltviwnf]::before,.burger-bar[data-astro-cid-sltviwnf]::after{position:absolute;content:""}.burger-bar[data-astro-cid-sltviwnf]::before{top:-13px}.burger-bar[data-astro-cid-sltviwnf]::after{top:13px}.burger[data-astro-cid-sltviwnf][aria-expanded=true] .burger-bar[data-astro-cid-sltviwnf]{--burger-width: 50px;background-color:transparent;transform:rotate(270deg)}.burger[data-astro-cid-sltviwnf][aria-expanded=true] .burger-bar[data-astro-cid-sltviwnf]::before{transform:translateY(13px) rotate(45deg)}.burger[data-astro-cid-sltviwnf][aria-expanded=true] .burger-bar[data-astro-cid-sltviwnf]::after{transform:translateY(-13px) rotate(-45deg)}@media screen and (min-width: 1025px){.burger[data-astro-cid-sltviwnf]{display:none}}.gnav[data-astro-cid-tjmd3nzy]{font-size:min(16 * var(--vw-per-px),16 * 1px);font-weight:700;letter-spacing:0.04em}@media screen and (max-width: 1024.98px){.gnav[data-astro-cid-tjmd3nzy]{position:fixed;top:0;right:0;z-index:var(--zindex-fixed);width:100%;height:0;padding-top:min(var(--header-height) * var(--vw-per-px),var(--header-height) * 1px);overflow:hidden;visibility:hidden;background-color:#fff}.gnav[data-astro-cid-tjmd3nzy][aria-expanded=false]{transition:visibility 0s ease 0.4s,height 0.4s ease-out}.gnav[data-astro-cid-tjmd3nzy][aria-expanded=true]{height:100vh;height:100dvh;visibility:visible;transition:visibility 0s ease,height 0.4s ease-out}}@media screen and (min-width: 1025px){.gnav[data-astro-cid-tjmd3nzy]{position:static;width:auto;height:auto;overflow:inherit;visibility:visible}}.gnav-wrap[data-astro-cid-tjmd3nzy]{height:calc(100vh - min(var(--header-height) * var(--vw-per-px),var(--header-height) * 1px));height:calc(100dvh - min(var(--header-height) * var(--vw-per-px),var(--header-height) * 1px));overflow-y:auto;overscroll-behavior-y:contain}@media screen and (min-width: 1025px){.gnav-wrap[data-astro-cid-tjmd3nzy]{height:auto;overflow:inherit}}.gnav-container[data-astro-cid-tjmd3nzy]{max-width:min(390 * var(--vw-per-px),390 * 1px);padding:0 min(var(--spacing3) * var(--vw-per-px),var(--spacing3) * 1px) min(var(--spacing3) * var(--vw-per-px),var(--spacing3) * 1px);margin-right:auto;margin-left:auto}@media screen and (min-width: 528px){.gnav-container[data-astro-cid-tjmd3nzy]{max-width:min(528 * var(--vw-per-px),528 * 1px);padding-right:min(var(--spacing5) * var(--vw-per-px),var(--spacing5) * 1px);padding-left:min(var(--spacing5) * var(--vw-per-px),var(--spacing5) * 1px)}}@media screen and (min-width: 1025px){.gnav-container[data-astro-cid-tjmd3nzy]{display:flex;align-items:center;max-width:100%;padding:0;margin:0}}.gnav-item[data-astro-cid-tjmd3nzy]{margin-top:-1px;border-top:1px solid var(--body-color);border-bottom:1px solid var(--body-color)}@media screen and (min-width: 1025px){.gnav-item[data-astro-cid-tjmd3nzy]{position:relative;padding:min(var(--spacing2) * var(--vw-per-px),var(--spacing2) * 1px);margin:0;border:0}}.gnav-link[data-astro-cid-tjmd3nzy]{display:flex;gap:min(var(--spacingdefault) * var(--vw-per-px),var(--spacingdefault) * 1px);align-items:center;height:min(61 * var(--vw-per-px),61 * 1px);transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}@media screen and (min-width: 1025px){.gnav-link[data-astro-cid-tjmd3nzy]{display:block;height:auto;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}}.gnav-link[data-astro-cid-tjmd3nzy]:not(a){cursor:default}.gnav-link[data-astro-cid-tjmd3nzy]:hover{color:var(--primary)}.gnav-item-beginner[data-astro-cid-tjmd3nzy] .gnav-link[data-astro-cid-tjmd3nzy]{padding:min(var(--spacingdefault) * var(--vw-per-px),var(--spacingdefault) * 1px) min(32 * var(--vw-per-px),32 * 1px);background-color:var(--primary);border-radius:50rem}.gnav-group[data-astro-cid-tjmd3nzy]:hover .gnav-link[data-astro-cid-tjmd3nzy]{color:var(--primary)}.gnav-item-beginner[data-astro-cid-tjmd3nzy]:hover .gnav-link[data-astro-cid-tjmd3nzy]{color:#fff;background-color:var(--btn-hover)}@media screen and (min-width: 1025px){.gnav-children[data-astro-cid-tjmd3nzy]{position:absolute;top:calc(100% - 1px);left:50%;display:flex;flex-direction:column;gap:min(var(--spacing2) * var(--vw-per-px),var(--spacing2) * 1px);padding:min(var(--spacing3) * var(--vw-per-px),var(--spacing3) * 1px);white-space:nowrap;pointer-events:none;visibility:hidden;background-color:#fff;border:1px solid var(--body-color);border-radius:min(var(--border-radius8) * var(--vw-per-px),var(--border-radius8) * 1px);box-shadow:0 min(4 * var(--vw-per-px),4 * 1px) rgba(35,27,78,0.2);opacity:0;transition:visibility 0s ease 0.4s,opacity 0.4s ease-out,transform 0.4s ease-out;transform:translate(-50%,-20px)}.gnav-group[data-astro-cid-tjmd3nzy]:hover .gnav-children[data-astro-cid-tjmd3nzy],.gnav-group[data-astro-cid-tjmd3nzy]:focus-within .gnav-children[data-astro-cid-tjmd3nzy]{pointer-events:inherit;visibility:visible;opacity:1;transition:visibility 0s ease,opacity 0.4s ease-out,transform 0.4s ease-out;transform:translateX(-50%)}}@media screen and (min-width: 1025px){.gnav-item-beginner[data-astro-cid-tjmd3nzy] .gnav-children[data-astro-cid-tjmd3nzy]{right:0;left:inherit;transform:translate(0,-20px)}}@media screen and (min-width: 1025px){.gnav-item-beginner[data-astro-cid-tjmd3nzy]:hover .gnav-children[data-astro-cid-tjmd3nzy],.gnav-item-beginner[data-astro-cid-tjmd3nzy]:focus-within .gnav-children[data-astro-cid-tjmd3nzy]{transform:translate(0,0)}}.gnav-child-link[data-astro-cid-tjmd3nzy]{display:block;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}.gnav-child-link[data-astro-cid-tjmd3nzy]:hover{color:var(--primary)}.gnav-child-link[data-astro-cid-tjmd3nzy].disabled{color:var(--btn-disabled);pointer-events:none;cursor:default}@media screen and (max-width: 1024.98px){.gnav-item-beginner[data-astro-cid-tjmd3nzy] .gnav-child-link[data-astro-cid-tjmd3nzy]{display:flex;gap:min(var(--spacingdefault) * var(--vw-per-px),var(--spacingdefault) * 1px);align-items:center;padding:min(var(--spacingdefault) * var(--vw-per-px),var(--spacingdefault) * 1px) 0;font-size:min(14 * var(--vw-per-px),14 * 1px);letter-spacing:0.04em}}.gnav-item-beginner[data-astro-cid-tjmd3nzy]{margin:min(var(--spacing3) * var(--vw-per-px),var(--spacing3) * 1px) 0;border:0}@media screen and (min-width: 1025px){.gnav-item-beginner[data-astro-cid-tjmd3nzy]{padding:0;margin:0 0 0 min(var(--spacing2) * var(--vw-per-px),var(--spacing2) * 1px)}}.gnav-ranking[data-astro-cid-tjmd3nzy]{margin-bottom:min(var(--spacing3) * var(--vw-per-px),var(--spacing3) * 1px)}@media screen and (min-width: 1025px){.gnav-ranking[data-astro-cid-tjmd3nzy]{display:none}}.gnav-ranking-ttl[data-astro-cid-tjmd3nzy]{display:flex;gap:min(2.5 * var(--vw-per-px),2.5 * 1px);margin-bottom:min(var(--spacing2) * var(--vw-per-px),var(--spacing2) * 1px);font-size:min(16 * var(--vw-per-px),16 * 1px);line-height:1.8;letter-spacing:0.04em}.gnav-ranking-ttl-icon[data-astro-cid-tjmd3nzy]{flex:0 0 auto;width:min(24 * var(--vw-per-px),24 * 1px);height:min(24 * var(--vw-per-px),24 * 1px)}.gnav-ranking-date[data-astro-cid-tjmd3nzy]{margin:min(var(--spacing2) * var(--vw-per-px),var(--spacing2) * 1px) 0 min(var(--spacingdefault) * var(--vw-per-px),var(--spacingdefault) * 1px);font-size:min(16 * var(--vw-per-px),16 * 1px);font-weight:700;line-height:1.2;letter-spacing:0.04em}.gnav-ranking-link[data-astro-cid-tjmd3nzy]{position:relative;display:flex;align-items:center;width:100%;height:min(64 * var(--vw-per-px),64 * 1px);padding:0 min(var(--spacing2) * var(--vw-per-px),var(--spacing2) * 1px);margin-bottom:min(var(--spacingdefault) * var(--vw-per-px),var(--spacingdefault) * 1px);background-color:var(--primary);border-radius:min(var(--border-radius8) * var(--vw-per-px),var(--border-radius8) * 1px);transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}.gnav-ranking-link[data-astro-cid-tjmd3nzy]:hover{color:#fff;background-color:#231b4e;fill:#fff}.gnav-ranking-link[data-astro-cid-tjmd3nzy].disabled{color:#fff;pointer-events:none;cursor:default;background-color:var(--btn-disabled);fill:#fff}.gnav-ranking-row[data-astro-cid-tjmd3nzy]{display:grid;grid-template-columns:repeat(2,1fr);gap:min(10 * var(--vw-per-px),10 * 1px) min(var(--spacingdefault) * var(--vw-per-px),var(--spacingdefault) * 1px)}.gnav-icon[data-astro-cid-tjmd3nzy]{flex:0 0 auto;width:min(24 * var(--vw-per-px),24 * 1px);height:min(24 * var(--vw-per-px),24 * 1px)}@media screen and (min-width: 1025px){.gnav-icon[data-astro-cid-tjmd3nzy]{display:none}}.gnav-aside[data-astro-cid-tjmd3nzy]{display:flex}@media screen and (min-width: 1025px){.gnav-aside[data-astro-cid-tjmd3nzy]{display:none}}.gnav-aside-item[data-astro-cid-tjmd3nzy]{position:relative;padding:0 min(var(--spacing2) * var(--vw-per-px),var(--spacing2) * 1px)}.gnav-aside-item[data-astro-cid-tjmd3nzy]:not(:first-child)::before{position:absolute;top:50%;left:0;width:1px;height:min(16 * var(--vw-per-px),16 * 1px);content:"";background-color:#231b4e;transform:translateY(-50%)}.gnav-aside-link[data-astro-cid-tjmd3nzy]{display:block;padding:min(8 * var(--vw-per-px),8 * 1px) 0;font-size:min(14 * var(--vw-per-px),14 * 1px);line-height:1.8;letter-spacing:0.04em;transition:color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out}.gnav-aside-link[data-astro-cid-tjmd3nzy]:hover{color:var(--primary)}.gnav-copyright[data-astro-cid-tjmd3nzy]{margin:min(var(--spacing4) * var(--vw-per-px),var(--spacing4) * 1px) 0 0}@media screen and (min-width: 1025px){.gnav-copyright[data-astro-cid-tjmd3nzy]{display:none}}.gnav-copyright-small[data-astro-cid-tjmd3nzy]{font-size:min(12 * var(--vw-per-px),12 * 1px);color:var(--black60)}.header[data-astro-cid-qlfjksao]{position:fixed;top:0;left:0;z-index:var(--zindex-modal);width:100%;height:min(var(--header-height) * var(--vw-per-px),var(--header-height) * 1px);background-color:#fff}.header-container[data-astro-cid-qlfjksao]{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:100%;height:min(var(--header-height) * var(--vw-per-px),var(--header-height) * 1px)}@media screen and (max-width: 527.98px){.header-container[data-astro-cid-qlfjksao]{padding:0 min(var(--spacingdefault) * var(--vw-per-px),var(--spacingdefault) * 1px)}}.header-logo[data-astro-cid-qlfjksao]{width:min(187 * var(--vw-per-px),187 * 1px);margin:0;font-size:16px;line-height:1}.global-nav[data-astro-cid-qlfjksao]{display:flex;align-items:center;justify-content:center;padding:min(12 * var(--vw-per-px),12 * 1px) 0;font-size:min(12 * var(--vw-per-px),12 * 1px);font-weight:700;line-height:1.4;color:inherit;text-align:center;text-decoration:none;letter-spacing:0.04em;cursor:pointer;background-color:var(--pink30);border-top:1px solid var(--black100, #231b4e);box-shadow:0 2px 4px 0 rgba(0,0,0,0.1019607843)}@media screen and (min-width: 528px){.global-nav[data-astro-cid-qlfjksao]{font-size:min(16 * var(--vw-per-px),16 * 1px)}}.global-nav[data-astro-cid-qlfjksao] .link[data-astro-cid-qlfjksao]{margin-right:0 min(4 * var(--vw-per-px),4 * 1px);color:var(--red)}.global-nav[data-astro-cid-qlfjksao] .text[data-astro-cid-qlfjksao]{color:var(--black100)}.global-nav[data-astro-cid-qlfjksao]:hover .link[data-astro-cid-qlfjksao]{opacity:0.5}@media screen and (min-width: 1025px){.icon[data-astro-cid-qlfjksao]{width:min(32 * var(--vw-per-px),32 * 1px)}}.wrapper[data-astro-cid-sckkx6r4]{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:100%;min-height:100%}