@charset "UTF-8";
/* 
本サイトにおける BEM の書式は以下の通り
.block {}
.block.--modifier {}
.block__element {}
.block__element.--modifier {}
.block__element.--css-property_css-value {} 
*/
/* ======================================== Common ======================================== */
/* ============================== html tags ============================== */
html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: 'Zen Kaku Gothic New', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 62.5%;
    font-weight: 700;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #FFFFFF;
    background-color: #0C1116;
}
@media screen and (min-width: 1280px) {
    html {
        font-size: 62.5%;
    }
}
@media screen and (max-width: 1280px) {
    html {
        font-size: 0.78125vw;
    }
}
@media screen and (max-width: 750px) {
    html {
        font-size: 62.5%;
    }
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "palt";
}
*::before, *::after {
    box-sizing: border-box;
    margin: 0; padding: 0;
}
:focus-visible {
    outline: 3px solid #2b6dff; /* お好みでブランド色に */
    outline-offset: 2px;
}
body {
    position: relative;
    font-size: 1.5rem;
    color: #FFFFFF;
    background-color: #0C1116;
}
@media screen and (max-width: 750px) {
    body {
        font-size: max(1.5rem, 12px);
    }
}
body.index {
    /* overflow-x: hidden; */
}
body.-fixed {
    /* overflow: hidden; */
}
.main {
    padding-top: 14rem;
    transition: padding .4s;
}
body.-scroll .main {
    padding-top: 8rem;
}
@media screen and (max-width: 750px) {
    .main {
        padding-top: 80px;
    }
    body.-scroll .main {
        padding-top: 80px;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
h1, h2, h3, h4, h5, h6, p, span, a, button,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, p span, a span, button span,
th, td, input, textarea,
input::placeholder, textarea::placeholder, *::before, *::after {
    letter-spacing: 0;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, p span, a span, button span  {
    font: inherit;
    color: inherit;
}
p {
    font-size: max(1.5rem, 10px);
    font-weight: 700;
    line-height: 2;
}
a {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
a:focus-visible,
article:focus-visible {
    outline: unset;
}
a:-webkit-any-link:focus-visible {
    outline-offset: 0;
}
a:-webkit-any-link:focus-visible {
    outline-offset: unset;
}
button {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 0;
    font: inherit;
    color: inherit;
    background: transparent;
}
button:focus-visible {
    outline: 3px solid #2b6dff;
    outline-offset: 2px;
}
/* リスト */
ul, ol {
    padding: 0;
    margin: 0;
    list-style: none;
    caret-color: transparent;
}
/* テーブル */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
th, td {
    text-align: left;
}
/* フォーム */
button, input, select, textarea {
    font: inherit; color: inherit;
}
input,textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 0;
    border: unset;
    border-width: 0;
    background-color: transparent;
}
input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    -webkit-text-fill-color: #222;
}
input[type="text" i] {
    padding: 0;
}
input[type="search"]::-webkit-search-cancel-button {
    display: none;
}
/* プレースホルダー（標準＋互換） */
::placeholder {
    font-family:
        dnp-shuei-gothic-gin-std,
        system-ui, -apple-system, BlinkMacSystemFont,
        "Hiragino Sans","Hiragino Kaku Gothic ProN",
        "Yu Gothic UI","Yu Gothic","Meiryo",
        "Noto Sans CJK JP", Roboto,
        "Segoe UI", Arial, sans-serif;
}
/* Chrome/Safari */
::-webkit-input-placeholder {
    font-family: inherit;
}
/* Firefox */
::-moz-placeholder {
    font-family: inherit;
}
/* 旧Edge/IE（必要なら） */
:-ms-input-placeholder {
    font-family: inherit;
}
select {
    appearance: none;         /* 標準 */
    -webkit-appearance: none; /* Safari/Chrome用 */
    -moz-appearance: none;    /* Firefox用 */
    border: none;
    background: none;         /* 必要なら背景も消す */
}
/* ============================== End html tags ============================== */
/* ============================== Utility Classes ============================== */
/* Display Utilities: Show/Hide on Devices */
/* 
- .pc / .tablet-sp:
- Default: .pc is visible, .tablet-sp is hidden.
- Below 1000px: .pc is hidden, .tablet-sp is visible.
*/
.pc {
    display: block;
}
.tablet-sp {
    display: none;
}
@media screen and (max-width: 1000px) {
    .pc {
        display: none !important;
    }
    .tablet-sp {
        display: block !important;
    }
}
/* 
- .pc-tablet / .sp:
- Default: .pc-tablet is visible, .sp is hidden.
- Below 750px: .pc-tablet is hidden, .sp is visible.
*/
.pc-tablet {
    display: block;
}
.sp {
    display: none;
}
@media screen and (max-width: 750px) {
    .pc-tablet {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
}
/* 
- .pc-sp / .tablet:
- Default (over 1000px): .pc-sp is visible, .tablet is hidden.
- 1000px and below (tablet only zone): .pc-sp is hidden, .tablet is visible.
- 750px and below (sp zone): .pc-sp is visible again, .tablet is hidden.
*/
.pc-sp {
    display: block;
}
.tablet {
    display: none;
}
@media screen and (max-width: 1000px) {
    .pc-sp {
        display: none !important;
    }
    .tablet {
        display: block !important;
    }
}
@media screen and (max-width: 750px) {
    .pc-sp {
        display: block !important;
    }
    .tablet {
        display: none !important;
    }
}
.display_inline-block {
    display: inline-block;
}
.width_0 {
    display: inline-block;
    width: 0;
}
/* color */
.color_white {
    color: #fff;
}
/* background-color */
.background-color_white {
    color: #fff;
}
/* ============================== End Utility Classes ============================== */
/* ============================== Helper Classes ============================== */
/* English Font Settings */
.en {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.en-poppins {
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.en-oi {
    font-family: "Oi", serif;
    font-weight: 400;
    font-style: normal;
}
.img,
.video {
    width: 100%;
    height: auto;
    object-fit: contain;
}
/* wrapper */
:root {
    --wrapper-width: 85%;
    --wrapper-home-width: 88%;
    --wrapper-max-width: 130rem;
    --wrapper-home-max-width: 130rem;
}
.wrapper {
	width: var(--wrapper-width);
    max-width: var(--wrapper-max-width);
    margin: 0 auto;
}
.wrapper.--home {
	width: 88%;
    max-width: 140rem;
}
@media screen and (max-width: 1000px) {
    :root {
        --wrapper-width: 89%;
        --wrapper-home-width: 95%;
    }
}
.wrapper-max-width {
    max-width: var(--wrapper-max-width);
}
/* text */
.text {
    font-size: max(1.5rem, 12px);
    line-height: 2;
}
.text + .text {
    margin-top: 3.5rem;
}
@media screen and (max-width: 1000px) {
    .text + .text {
        margin-top: 2.8rem;
    }
}
/* text-link */
.text-link {
    text-decoration: underline;
    opacity: 1;
    transition: opacity .3s;
}
@media (hover: hover) {
    .text-link:hover {
        opacity: .6;
    }
}
/* hover-animation opacity */
.hover-opacity {
    opacity: 1;
    transition: opacity .3s;
}
@media (hover: hover) {
    .hover-opacity:hover {
        opacity: .6;
    }
}
/* inview */
.inview {
    transform: translate(0, 5px);
    opacity: 0;
    transition: filter 1s, opacity 1s, transform 1s;
}
.inview.show {
    transform: translate(0, 0);
    opacity: 1.0;
}
.inview.--like-tree {
    transform: translate(0,0);
    opacity: 1;
    transition: filter 1s, opacity 1s, transform 1s;
}
.inview.--like-tree.show {
    transform: translate(0, 0);
    opacity: 1.0;
}
/* ============================== End Helper Classes ============================== */
/* ============================== Common Component Classes ============================== */
/* ==================== header ==================== */
.header {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2rem 3.9% 2rem 2.3%;
    background-color: rgba(28,34,40);
    transition: background-color .4s;
}
.header.-scroll .header__inner {
    padding: 1.3rem 3.9% 1.2rem 2.3%;
}
.header__logo {
    display: inline-block;
    width: 10.3rem;
    opacity: 1;
    transition: width .4s, opacity .2s;
}
@media (hover: hover) {
    a.header__logo:hover {
        opacity: .6;
    }
}
.header.-scroll .header__logo {
    width: 5.5rem;
}
.header-nav {}
.header-nav__list {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-top: 4rem;
    transition: padding .4s;
}
.header.-scroll .header-nav__list {
    padding-top: 0.4rem;
}
.header-nav__item {}
.header-nav__link {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
    color: #FFF;
    transition: color .1s;
}
body.page .header-nav__link {
    opacity: 0.3;
}
body.page .header-nav__link.on {
    opacity: 1;
}
.header-nav__link.--about.on,
.header-nav__link.--about:hover {
    color: #E62487;
}
.header-nav__link.--disco:hover {
    color: #A0A0A0;
}
.header-nav__link.--disco.on{
    color: #FFF;
}
.header-nav__link.--mission-go5.on,
.header-nav__link.--mission-go5:hover {
    color: #2EA2DD;
}
.header-nav__link.--topics.on,
.header-nav__link.--topics:hover {
    color: #FFE42C;
}
.header-nav__link.--premium.on,
.header-nav__link.--premium:hover {
    color: #2AA53A;
}
@media (hover: hover) {
    .header-nav__link:hover {
        /* text-shadow: 0 0 5px rgba(255,255,255, 0.5); */
    }
    .header-nav__link.--about:hover {
        color: #E62487;
    }
    .header-nav__link.--disco:hover {
        color: #A0A0A0;
    }
    .header-nav__link.--mission-go5:hover {
        color: #2EA2DD;
    }
    .header-nav__link.--topics:hover {
        color: #FFE42C;
    }
    .header-nav__link.--premium:hover {
        color: #2AA53A;
    }
}
.header-nav__text-en {
    font-size: max(2rem, 12px);
}
.header-nav__text-en .adjuster5 {
    position: relative;
    top: -0.2rem;
}
.header-nav__text-jp {
    font-size: max(1.2rem, 10px);
    font-weight: 700;
}
.header__upper-links-area {
    position: absolute;
    top: 2.4rem;
    right: 3.1%;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 3rem;
    opacity: 1;
    visibility: visible;
    transition: opacity .4s, visibility .4s;;
}
.header.-scroll .header__upper-links-area {
    opacity: 0;
    visibility: hidden;
}
.header__upper-link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    height: 1.8rem;
    opacity: 1;
    transition: opacity .1s;
}
@media (hover: hover) {
    .header__upper-link:hover {
        opacity: .6;
    }
}
.header__upper-link img {
    height: 1.8rem;
}
.header__upper-link.--x span {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: max(1.2rem, 10px);
    font-weight: 500;
}
/* -------------------- header responsive (750) -------------------- */
@media screen and (max-width: 750px) {
    .header {
        position: fixed;
    }
    .header__inner {
        padding: 12px 3.9% 12px 2.3%;
    }
    .header.-scroll .header__inner {
        padding: 12px 3.9% 12px 2.3%;
    }
    .header__logo {
        width: 56px;
    }
    .header.-scroll .header__logo {
        width: 56px;
    }
    .header__nav-area {}
    .header-nav {}
    .header-nav__list {
        display: flex;
        align-items: center;
        gap: 3rem;
        padding-top: 4rem;
    }
    .header-nav__item {}
    .header-nav__link {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 0.5rem;
    }
    .header-nav__text-en {
        font-size: max(2rem, 12px);
    }
    .header-nav__text-en .adjuster5 {
        position: relative;
        top: -0.2rem;
    }
    .header-nav__text-jp {
        font-size: max(1.2rem, 10px);
        font-weight: 700;
    }
    .header__upper-links-area {
        position: absolute;
        top: 2.4rem;
        right: 3.1%;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 3rem;
    }
    .header__upper-link {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        height: 1.8rem;
    }
    .header__upper-link img {
        height: 1.8rem;
    }
    .header__upper-link.--x span {
        font-size: max(1.2rem, 10px);
        font-weight: 500;
    }
}
/* ==================== End header ==================== */
/* ==================== Hamburger Button ==================== */
.hamburger-button {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 80px;
}
.hamburger-button__line-base {
    position: relative;
    width: 22px;
    height: 14px;
    transition: top .46s, right .46s, width 0s, height 0s;
}
.hamburger-button.-open .hamburger-button__line-base {
    width: 20px;
    height: 20px;
}
.hamburger-button__line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: transform .3s, background-color .3s, opacity 0.3s;
}
.hamburger-button__line.--1 {
    top: 0;
    transform: translateY(-50%);
}
.hamburger-button__line.--2 {
    top: 50%;
    transform: translateY(-50%);
}
.hamburger-button.-open .hamburger-button__line.--2 {
    opacity: 0;
}
.hamburger-button__line.--3 {
    bottom: 0;
    transform: translateY(50%);
}
@keyframes menu-open-top {
    0% {
        top: 0;
        transform: translateY(-50%);
    }
    60% {
        top: 50%;
        transform: translateY(-50%) rotate(0);
    }
    100% {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
}
@keyframes menu-open-bottom {
    0% {
        bottom: 0;
        transform: translateY(50%);
    }
    60% {
        bottom: 50%;
        transform: translateY(50%) rotate(0);
    }
    100% {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }
}
@keyframes menu-close-top {
    0% {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    40% {
        top: 50%;
        transform: translateY(-50%) rotate(0);
    }
    100% {
        left: 0;
        transform: translateY(-50%);
    }
}
@keyframes menu-close-bottom {
    0% {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }
    40% {
        bottom: 50%;
        transform: translateY(50%) rotate(0);
    }
    100% {
        bottom: 0;
        transform: translateY(50%);
    }
}
/* ==================== End Hamburger Button ==================== */
/* ==================== Hamburger Menu ==================== */
.hamburger-menu {
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(0,-20%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 110px 0 40px;
    border-radius: 0 0 32px 32px;
    background-color: #1C2228;
    opacity: 0;
    visibility: hidden;
    transition: transform .5s ease, opacity .5s, visibility .5s;
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none;    /* Firefox */
}
.hamburger-menu::-webkit-scrollbar {
    display: none;            /* Chrome, Safari */
}
@media screen and (max-height: 840px) {
    .hamburger-menu {
        justify-content: start;
    }
}
.hamburger-menu.-open {
    transform: translate(0,0);
    opacity: 1;
    visibility: visible;
}
.hamburger-menu__inner {
    position: relative;
    z-index: 1;
}
.hamburger-nav {
    overflow: hidden;
    padding-bottom: 35px;
    border-bottom: 1px solid #32373C;
}
.hamburger-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.hamburger-nav__item {
    text-align: center;
}
.hamburger-nav__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    color: #fff;
}
body.page .hamburger-nav__link {
    opacity: 0.3;
}
body.page .hamburger-nav__link.on {
    opacity: 1
}
.hamburger-nav__link.--about.on,
.hamburger-nav__link.--about:hover {
    color: #E62487;
}
.hamburger-nav__link.--disco:hover {
    color: #A0A0A0;
}
.hamburger-nav__link.--disco.on {
    color: #FFF;
}
.hamburger-nav__link.--mission-go5.on,
.hamburger-nav__link.--mission-go5:hover {
    color: #2EA2DD;
}
.hamburger-nav__link.--topics.on,
.hamburger-nav__link.--topics:hover {
    color: #FFE42C;
}
.hamburger-nav__link.--premium.on,
.hamburger-nav__link.--premium:hover {
    color: #2AA53A;
}
@media (hover: hover) {
    .hamburger-nav__link:hover {
        /* text-shadow: 0 0 5px rgba(255,255,255, 0.5); */
    }
    .hamburger-nav__link.--about:hover {
        color: #E62487;
    }
    .hamburger-nav__link.--disco:hover {
        color: #A0A0A0;
    }
    .hamburger-nav__link.--mission-go5:hover {
        color: #2EA2DD;
    }
    .hamburger-nav__link.--topics:hover {
        color: #FFE42C;
    }
    .hamburger-nav__link.--premium:hover {
        color: #2AA53A;
    }
}
.hamburger-nav__text-en {
    font-size: 22px;
}
.hamburger-nav__text-en .adjuster5 {
    position: relative;
    top: -0.2rem;
}
.hamburger-nav__text-jp {
    font-size: 12px;
}
.hamburger-menu__sns-links-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-top: 35px;
}
.hamburger-menu__sns-link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 15px;
}
.hamburger-menu__sns-link img {
    height: 15px;
}
.hamburger-menu__sns-link.--x span {
    font-size: 10px;
    font-weight: 700;
}
.hamburger-menu-escape {
    cursor: pointer;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: #0a1016;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s, visibility .55s;
}
.hamburger-menu-escape.-open {
    visibility: visible;
    opacity: 0.85;
}
/* ==================== End Hamburger Menu ==================== */
/* ==================== footer ==================== */
.footer {
    padding: 0 2%;
}
.footer__inner {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    width: 100%;
    padding: 2.6rem;
    border-radius: 4rem 4rem 0 0;
    background-image: url('/assets/img/footer-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.footer__logo-and-share-area {
    display: flex;
    align-items: center;
    gap: 5.8rem;
}
.footer__logo {
    width: 10.3rem;
}
.footer-share {}
.footer-share__text {
    margin-bottom: 1.3rem;
    font-size: max(1.5rem, 10px);
    font-weight: 700;
}
.footer-share__links {
    display: flex;
    align-items: center;
    gap: 3rem;
}
.footer-share__link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    height: 1.8rem;
}
.footer-share__link img {
    height: 1.8rem;
}
.footer-share__link.--x span {
    font-size: max(1.2rem, 10px);
}
.footer__copyright {
    font-size: max(1.4rem, 10px);
}
/* -------------------- footer responsive (750) -------------------- */
@media screen and (max-width: 750px) {
    .footer {
        padding: 0 3.6%;
    }
    .footer__inner {
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding: 3.8rem 2rem 4rem;
        background-image: url('/assets/img/footer-bg-sp.jpg');
    }
    .footer__logo-and-share-area {
        flex-direction: column;
        gap: 0;
    }
    .footer__logo {
        width: 7.2rem;
        margin-bottom: 3.3rem;
    }
    .footer-share__text {
        margin-bottom: 1.5rem;
        font-size: 1.4rem;
    }
    .footer-share__links {
        flex-direction: column;
        gap: 2rem;
    }
    .footer-share__link {
        gap: 1.2rem;
        height: 1.8rem;
    }
    .footer-share__link img {
        height: 1.8rem;
    }
    .footer-share__link.--x span {
        font-size: 1.2rem;
    }
    .footer__copyright {
        margin-top: 3.5rem;
        font-size: 1.2rem;
    }
}
/* ==================== End footer ==================== */
/* ==================== Other Common Modules ==================== */

/* ========== common-circle-right-angle ========== */
.common-circle-right-angle {
    position: relative;
    display: inline-block;
    width: 3.5rem;
    height: 3.5rem;
    background-image: url('/assets/img/circle-right-angle-white.svg');
    background-repeat: no-repeat;
    background-size: 3.5rem 3.5rem;
}
/* ----- responsive (750) ----- */
@media screen and (max-width: 750px) {
    .common-circle-right-angle {
        width: 2rem;
        height: 2rem;
        background-size: 2rem 2rem;
    }
}
/* ========== End common-circle-right-angle ========== */
/* ========== common-rounded-square-button ========== */
.common-rounded-square-button {}
.common-rounded-square-button.--longer {}
.common-rounded-square-button.--animate {}
.common-rounded-square-button.--amazon {}
.common-rounded-square-button.--watch-on-abema {}
.common-rounded-square-button.--watch-on-youtube {}
.common-rounded-square-button__link {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 12.5rem;
    padding: 0.6rem 1rem 0.5rem;
    border: 1px solid #fff;
    border-radius: 4px;
    background-color: rgba(97,101,105,0.2);
    transition: border .1s, box-shadow .1s;
}
.common-rounded-square-button.--longer .common-rounded-square-button__link {
    min-width: 14.5rem;
    min-width: max(14.5rem, 110px);
}
.common-rounded-square-button.--watch-on-abema .common-rounded-square-button__link {
    min-width: max(19.5rem, 150px);
    padding: 0.6rem 2.8rem 0.5rem 1.2rem;
}
.common-rounded-square-button.--watch-on-youtube .common-rounded-square-button__link {
    min-width: max(19.5rem, 150px);
    padding: 0.6rem 2.8rem 0.5rem 1.2rem;
}
.common-rounded-square-button.--animate .common-rounded-square-button__link {
    min-width: 220px;
    padding: 0.6rem 1rem 0.8rem;
}
.common-rounded-square-button.--amazon .common-rounded-square-button__link {
    min-width: 195px;
    padding: 0.6rem 1rem 0.8rem;
}
.common-rounded-square-button__link::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1rem;
    z-index: 1;
    transform: translate(0,-50%) rotate(45deg);
    display: block;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transition: border .1s, box-shadow .1s;
}
.common-rounded-square-button.--watch-on-abema .common-rounded-square-button__link::after {
    right: 1.2rem;
}
.common-rounded-square-button__text {
    font-size: max(1.8rem, 14px);
    font-weight: 700;
    line-height: 1.5;
    transition: color .1s;
}
.common-rounded-square-button.--animate .common-rounded-square-button__text,
.common-rounded-square-button.--amazon .common-rounded-square-button__text {
    font-size: max(1.6rem, 14px);
}
@media (hover: hover) {
    .common-rounded-square-button__link:hover {
        border: 1px solid #FFFFB5;
        box-shadow: 0 0 4px #FFFF62;
    }
    .common-rounded-square-button__link:hover::after {
        border-top: 2px solid #FFFF62;
        border-right: 2px solid #FFFF62;
    }
    .common-rounded-square-button__link:hover .common-rounded-square-button__text {
        color: #FFFF55;
    }
}
/* ----- responsive (750) ----- */
@media screen and (max-width: 750px) {
    .common-rounded-square-button.--animate .common-rounded-square-button__link {
        align-items: center;
        min-width: 220px;
        padding: 0.6rem 1rem 0.8rem;
    }
    .common-rounded-square-button.--amazon .common-rounded-square-button__link {
        align-items: center;
        min-width: 195px;
        padding: 0.6rem 1rem 0.8rem;
    }
}
/* ========== End common-rounded-square-button ========== */
/* ========== common-title-block ========== */
.common-title-block {
    position: relative;
    padding-left: 10rem;
}
.common-title-block.--without-icon {
    padding-left: 0;
}
.common-title-block__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
}
.common-title-block__text-en {
    position: relative;
    font-size: max(3.6rem, 20px);
    line-height: 1;
}
.common-title-block__text-en .adjuster5 {
    position: relative;
    top: -0.3rem;
}
.common-title-block__text-jp {
    font-size: max(1.7rem, 12px);
}
.common-title-block__icon {
    position: absolute;
    top: -1.4rem;
    left: 0;
    z-index: 0;
    display: block;
    width: 8rem;
    height: 8rem;
}
/* ---------- common-title-block responsive (750) ---------- */
@media screen and (max-width: 750px) {
    .common-title-block {
        padding-left: 6rem;
    }
    .common-title-block.--sp-smaller {
        padding-left: 5rem;
    }
    .common-title-block__title {
        gap: 0.4rem;
    }
    .common-title-block.--sp-smaller  .common-title-block__title {
        gap: 0.3rem;
    }
    .common-title-block__text-en {
        font-size: 2.4rem;
    }
    .common-title-block.--sp-smaller .common-title-block__text-en {
        font-size: 2.2rem;
    }
    .common-title-block__text-en .adjuster5 {
        top: -0.2rem;
    }
    .common-title-block__text-jp {
        font-size: 1.4rem;
    }
    .common-title-block__icon {
        top: -0.5rem;
        width: 5rem;
        height: 5rem;
    }
    .common-title-block.--sp-smaller .common-title-block__icon {
        top: -0.4rem;
        width: 4.5rem;
        height: 4.5rem;
    }
}
/* ========== End common-title-block ========== */
/* ========== common-small-title ========== */
.common-small-title {
    position: relative;
}
.common-small-title__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
}
.common-small-title__text-en {
    position: relative;
    font-size: max(2.6rem, 17px);
    line-height: 1;
}
.common-small-title__text-en .adjuster5 {
    position: relative;
    top: -0.2rem;
}
.common-small-title__text-jp {
    font-size: max(1.7rem, 12px);
}
/* ---------- common-small-title responsive (750) ---------- */
@media screen and (max-width: 750px) {
    .common-small-title {}
    .common-small-title__title {
        gap: 0.4rem;
    }
    .common-small-title__text-en {
        font-size: 2.2rem;
    }
    .common-small-title__text-en .adjuster5 {
        top: -0.2rem;
    }
    .common-small-title__text-jp {
        font-size: 1.4rem;
    }
}
/* ========== End common-title-block ========== */
/* ========== common-topics-archive ========== */
.common-topics-archive {}
.common-topics-archive__list {}
.common-topics-archive__item {
    transform: translate(2rem,2rem);
    opacity: 0;
    transition: transform .6s, opacity .6s;
}
.common-topics-archive__item:nth-child(1) {
    transition-delay: 0;
}
.common-topics-archive__item:nth-child(2) {
    transition-delay: 0.05s;
}
.common-topics-archive__item:nth-child(3) {
    transition-delay: 0.1s;
}
.common-topics-archive__item:nth-child(4) {
    transition-delay: 0.15s;
}
.common-topics-archive__item:nth-child(5) {
    transition-delay: 0.2s;
}
.common-topics-archive__item:nth-child(6) {
    transition-delay: 0.25s;
}
.common-topics-archive__item:nth-child(7) {
    transition-delay: 0.3s;
}
.common-topics-archive__item:nth-child(8) {
    transition-delay: 0.35s;
}
.common-topics-archive__item:nth-child(9) {
    transition-delay: 0.4s;
}
.common-topics-archive__item:nth-child(10) {
    transition-delay: 0.45s;
}
.common-topics-archive__item.inview.show {
    transform: translate(0);
}
.common-topics-archive__link {
    cursor: pointer;
    position: relative;
    display: block;
    padding: 2.8rem 0 2.2rem;
}
.common-topics-archive__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    border-bottom: 1px solid #32373C;
    transition: border-color .1s, box-shadow .1s;
}
@media (hover: hover) {
    .common-topics-archive__link:hover::after {
        border-bottom: 1px solid #FFFFB5;
        box-shadow: 0 0 6px #FFFF62;
    }
}
.common-topics-archive__date-and-cats-area {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 0;
    margin-bottom: 0.4rem;
}
.common-topics-archive__link.--new .common-topics-archive__date-and-cats-area::after {
    content: 'NEW!';
    position: relative;
    transform: translateY(0.1rem);
    margin-left: 2rem;
    font-family: "Oi", serif;
    font-size: max(1.5rem, 10px);
    font-weight: 400;
    line-height: 1;
    color: #FFFF55;
}
.common-topics-archive__date {
    position: relative;
    display: flex;
    gap: 2rem;
    font-size: max(1.4rem, 10px);
    line-height: 1;
}
.common-topics-cats {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 2rem;
}
.common-topics-cat {
    display: inline-block;
    padding: 2px 5px 3px;
    border: 1px solid #FFF;
    border-radius: 2px;
    font-size: max(1.1rem, 10px);
    font-weight: 700;
    color: #0C1116;
    background-color: #FFF;
}
.common-topics-archive__title {
    font-size: max(1.7rem, 13px);
    line-height: 1.88;
}
/* ----- responsive (750) ----- */
@media screen and (max-width: 750px) {
    .common-topics-archive {}
    .common-topics-archive__link {
        padding: 2.4rem 5.5% 1.8rem;
    }
    .common-topics-archive__date-and-cats-area {
        gap: 1rem 0;
        margin-bottom: 0.4rem;
    }
    .common-topics-archive__link.--new .common-topics-archive__date-and-cats-area::after {
        margin-left: 2rem;
        font-size: max(1.5rem, 10px);
    }
    .common-topics-archive__date {
        font-size: 1.3rem;
    }
    .common-topics-archive__link.--new .common-topics-archive__date::after {
        transform: 0;
        font-size: 1.3rem;
    }
    .common-topics-archive__title {
        font-size: 1.5rem;
        line-height: 1.8;
    }
}
/* ========== End common-topics-archive ========== */
/* ========== pagination ========== */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
}
.page-numbers {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Oi", serif;
    font-size: max(3rem, 16px);
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    color: #2e3236;
    opacity: 1;
    transition: opacity .3s;
}
.page-numbers.current {
    color: #FFF;
    opacity: 1;
}
a.page-numbers:hover {
    opacity: 0.7;
}
/* ---------- pagination responsive (750) ---------- */
@media screen and (max-width: 750px) {
    .pagination {
        gap: 3.2rem;
    }
    .page-numbers {
        font-size: 2.6rem;
    }
}
/* ========== End pagination ========== */
/* ========== common-disco-cards ========== */
.common-disco-cards {}
.common-disco-cards__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6rem 2.5%;
}
.common-disco-cards__item {
    width: calc((100% - 2.5% * 3) / 4);
}
/* ----- common-disco-cards responsive (750) ----- */
@media screen and (max-width: 750px) {
    .common-disco-cards {}
    .common-disco-cards__list {
        gap: 4rem 2rem;
    }
    .common-disco-cards__item {
        width: calc((100% - 2rem) / 2);
    }
}
/* ========== common-disco-card ========== */
/* ========== common-disco-card ========== */
.common-disco-card {}
.common-disco-card__link {}
.common-disco-card__img {
    overflow: hidden;
    position: relative;
    aspect-ratio: 1/1;
    object-fit: contain;
    background-color: #FFF;
}
.common-disco-card__img::before {
    content:'';
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index:1;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
    transition: background-color .4s;
}
.common-disco-card__img img {
    transform: scale(1.01);
    aspect-ratio: 1/1;
    object-fit: contain;
    transition: transform .4s;
}
.common-disco-card__cats-area {
    margin-top: 2rem;
}
.common-disco-card__title {
    margin-top: 1rem;
    font-size: max(1.6rem, 13px);
    line-height: 1.75;
}
@media (hover: hover) {
    a:hover .common-disco-card__img::before {
        background-color: rgba(0,0,0,0.5);
    }
    a:hover .common-disco-card__img img {
        transform: scale(1.1);
    }
}
/* ========== End common-disco-card ========== */
/* ========== common-cats ========== */
.common-cats {}
.common-cats__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
}
.common-cats__item {}
/* ========== End common-cats ========== */
/* ========== common-cat ========== */
.common-cat {
    display: inline-block;
    padding: 4px 10px 3px;
    border: 1px solid transparent;
    border-radius: 2px;
    font-size: max(1.3rem, 10px);
    opacity: 1;
    transition: opacity .1s;
}
a.common-cat:hover {
    opacity: 0.5;
}
a.common-cat.--large.on {
    color: #0C1116;
    background-color: #FFF;
}
.common-cat.--large {
    padding: 5px 10px 4px;
    border: 1px solid #FFF;
    font-size: max(1.7rem, 12px);
}
.common-cat.--cd {
    color: #0C1116;
    background-color: #FFE132;
}
.common-cat.--large.--cd {
    border: 1px solid #FFE132;
    color: #FFE132;
    background-color: transparent;
}
a.common-cat.--large.--cd.on {
    color: #0C1116;
    background-color: #FFE132;
}
.common-cat.--dvd {
    color: #FFF;
    background-color: #E62487;
}
.common-cat.--large.--dvd {
    border: 1px solid #E62487;
    color: #E62487;
    background-color: transparent;
}
a.common-cat.--large.--dvd.on {
    color: #FFF;
    background-color: #E62487;
}
.common-cat.--blu-ray {
    color: #FFF;
    background-color: #2EA2DD;
}
.common-cat.--large.--blu-ray {
    border: 1px solid #2EA2DD;
    color: #2EA2DD;
    background-color: transparent;
}
a.common-cat.--large.--blu-ray.on {
    color: #FFF;
    background-color: #2EA2DD;
}
.common-cat.--book {
    color: #FFF;
    background-color: #2AA53A;
}
.common-cat.--large.--book {
    border: 1px solid #2AA53A;
    color: #2AA53A;
    background-color: transparent;
}
a.common-cat.--large.--book.on {
    color: #FFF;
    background-color: #2AA53A;
}
.common-cat.--mission-go5 {
    color: #0C1116;
    background-color: #B9B9BB;
}
.common-cat.--large.--mission-go5 {
    border: 1px solid #B9B9BB;
    color: #B9B9BB;
    background-color: transparent;
}
a.common-cat.--large.--mission-go5.on {
    color: #0C1116;
    background-color: #B9B9BB;
}
/* ---------- common-disco-card responsive (1000) ---------- */
@media screen and (max-width: 1000px) {
    .common-cat {}
    .common-cat.--large {
        padding: 4px 10px 3px;
        font-size: 1.5rem;
    }
}
/* ========== End common-disco-card ========== */
/* ==================== End Other Common Modules ==================== */
/* ============================== End Common Component Classes ============================== */
/* ======================================== End Common ======================================== */