@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;
    background: url("../img/bg-gray.jpg") repeat left top;
    background-size: 100px auto;
    position: relative;
    
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
	font-size: 62.5%;
    letter-spacing: 0.04em;
	line-height: 1.8em;
	color: #1c2324;
    /*overflow-x: hidden;*/
    
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body.EN {
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
}
body::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background: url("../img/bg-sput_pink.webp") repeat left top;
    background-size: 1500px auto;
}
a {
	outline: none;
    text-decoration: none;
}
a img {
	border: none;
    outline: none;
}
section, div, span, figure, article {
    box-sizing: border-box;
}
* img {
    width: 100%;
    height: auto;
    display: block;
}

body::-webkit-scrollbar {
    width: 12px;
}
body::-webkit-scrollbar-track-piece {
    background-color: #000;
}
body::-webkit-scrollbar-thumb {
    background-color: #ff2296;

    border: 2px solid transparent;
    border-radius: 20px;
    background-clip: content-box;
}
html {
    scrollbar-color: #ff2296 #000;
    scrollbar-width: 12px;
}
::selection      { background: #ff2296; color: #fff; }
::-moz-selection { background: #ff2296; color: #fff; }






/* --- L O A D I N G --- */

.OP {
    width: 100%;
    height: 100dvh;
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    pointer-events: none;
    
    background: url("../img/bg-black.jpg") repeat left top #111313;
    background-size: 100px auto;
    
    will-change: animation, opacity;
}
.OP section {
    width: 40%;
    height: auto;
    display: block;
    position: relative;
    margin: 0;
    
    visibility: hidden;
}
.OP article {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    
    position: absolute;
    top: 0;
    left: 0;
    
    mask-image: url("../img/logo_wt.webp");
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
}
.OP.EN article {
    mask-image: url("../img/logo_wt_en.webp");
}
.OP article span {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;

    background: url("../img/bg-black.jpg") repeat left top #111313;
    background-size: 100px auto;
}
.OP figure {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    
    will-change: animation, transform;
}
.OP section::before, .OP article::before, .OP figure::before {
    content: "";
    display: block;
    padding-bottom: 27.3%;
}
.ink1 {
    width: 70%;
    height: auto;
    display: block;
    margin: -35% 0 0 0;
    position: absolute;
    top: 50%;
    left: -20%;
    background: url("../img/ld-ink1.webp") no-repeat center center;
    background-size: contain;
}
.ink1 {
    width: 80%;
    margin: -40% 0 0 0;
    left: -20%;
    background: url("../img/ld-ink1.webp") no-repeat center center;
    background-size: contain;
}
.ink2 {
    width: 86%;
    margin: -43% 0 0 0;
    left: 3%;
    background: url("../img/ld-ink2.webp") no-repeat center center;
    background-size: contain;
}
.ink3 {
    width: 90%;
    margin: -45% 0 0 0;
    left: 30%;
    background: url("../img/ld-ink3.webp") no-repeat center center;
    background-size: contain;
}
.ink4 {
    width: 80%;
    margin: -47% 0 0 0;
    left: 55%;
    background: url("../img/ld-ink4.webp") no-repeat center center;
    background-size: contain;
}
.ink1, .ink2, .ink3, .ink4 {
    height: auto;
    display: block;
    position: absolute;
    top: 50%;
    
    will-change: animation, transform;
    animation: 1.2s LD-ink cubic-bezier(0, 1, 0, 1) forwards;
    transform: scale(0);
}
.ink1 { animation-delay: 0.50s; }
.ink2 { animation-delay: 0.65s; }
.ink3 { animation-delay: 0.80s; }
.ink4 { animation-delay: 0.90s; }

.ink1::before, .ink2::before, .ink3::before, .ink4::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}


.OP figure {
    animation: 0.5s LD-ink_out linear forwards 3.0s;
}
.OP.LD-op {
    animation: 1.0s LD-op linear forwards 0.2s;
}
.OP.LD-op_scd {
    animation: 1.0s LD-op linear forwards 0.2s;
}
.OP section.LD-start {
    visibility: visible;
}

.OP.close {
    animation: 0.8s LD-cl linear forwards;
}
.OP.close section {
    display: none;
}

/*
.OP figure {
    animation-delay: 1.2s;
}
.OP.fstacc, .OP.fstacc figure {
    animation: none;
}
.OP.close {
    animation: 0.8s LD-cl linear forwards;
}
*/

@keyframes LD-op {
    0%   { opacity: 1; }
    99%  { opacity: 0; }
    100% { opacity: 0; display: none; }
}
@keyframes LD-cl {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes LD-ink {
    0%   { transform: scale(0); }
    100% { transform: scale(1.0); }
}
@keyframes LD-ink_out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}






/* --- N A V  +   M E N U --- */

#nav {
    width: 100px;
    height: 100px;
    margin: 0;
    background: url("../img/ink_close.png") no-repeat center center;
    background-size: contain;
    cursor: pointer;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    
    position: fixed;
    left: 5px;
    top: 10px;
    z-index: 20;
    
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.25));
    
    will-change: transform;
    transition: all 0.8s cubic-bezier(0, 0.5, 0.3, 1);
    transform: translateY(-135px);
}
#nav p {
    width: 100%;
    height: auto;
    display: block;
    margin: -8px 0 8px 0;
    text-align: center;
    
    font-size: 0.7rem;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1em;
    color: #fff;
}
#nav div {
    width: 34px;
    height: 13px;
    display: block;
    margin: 0;
    position: relative;
    z-index: 20;
    pointer-events: none;
}
#nav div span {
    width: 100%;
    height: 3px;
    display: block;
    margin: 0;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    
    will-change: transform;
    transition: all 0.4s cubic-bezier(0, 0.5, 0.3, 1);
}
#nav div span:nth-of-type(1) {
	top: 0;
    left: 0;
    animation: 0.4s mnAni1B ease-out forwards alternate;
}
#nav div span:nth-of-type(2) {
	bottom: 0;
    left: 0;
    animation: 0.4s mnAni2B ease-out forwards alternate;
}
#nav p.active {
    color: #1c2324;
}
#nav div.active span:nth-of-type(1) {
	animation: 0.4s mnAni1A ease-out forwards alternate;
    background: #1c2324;
}
#nav div.active span:nth-of-type(2) {
    animation: 0.4s mnAni2A ease-out forwards alternate;
    background: #1c2324;
}

@keyframes mnAni1A {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(0,5px); }
    50%  { transform: translate(0,5px); }
    80%  { transform: translate(0,5px) rotate(-17deg); }
    100% { transform: translate(0,5px) rotate(-17deg); }
}
@keyframes mnAni1B {
    0%   { transform: translate(0,5px) rotate(-17deg); }
    25%  { transform: translate(0,5px); }
    50%  { transform: translate(0,5px); }
    80%  { transform: translate(0,0); }
    100% { transform: translate(0,0); }
}
@keyframes mnAni2A {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(0,-5px); }
    50%  { transform: translate(0,-5px); }
    80%  { transform: translate(0,-5px) rotate(17deg); }
    100% { transform: translate(0,-5px) rotate(17deg); }
}
@keyframes mnAni2B {
    0%   { transform: translate(0,-5px) rotate(17deg); }
    25%  { transform: translate(0,-5px); }
    50%  { transform: translate(0,-5px); }
    80%  { transform: translate(0,0); }
    100% { transform: translate(0,0); }
}

@keyframes mnAni1A_sp {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(0,4px); }
    50%  { transform: translate(0,4px); }
    80%  { transform: translate(0,4px) rotate(-17deg); }
    100% { transform: translate(0,4px) rotate(-17deg); }
}
@keyframes mnAni1B_sp {
    0%   { transform: translate(0,4px) rotate(-17deg); }
    25%  { transform: translate(0,4px); }
    50%  { transform: translate(0,4px); }
    80%  { transform: translate(0,0); }
    100% { transform: translate(0,0); }
}
@keyframes mnAni2A_sp {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(0,-4px); }
    50%  { transform: translate(0,-4px); }
    80%  { transform: translate(0,-4px) rotate(17deg); }
    100% { transform: translate(0,-4px) rotate(17deg); }
}
@keyframes mnAni2B_sp {
    0%   { transform: translate(0,-4px) rotate(17deg); }
    25%  { transform: translate(0,-4px); }
    50%  { transform: translate(0,-4px); }
    80%  { transform: translate(0,0); }
    100% { transform: translate(0,0); }
}

.menu-nav {
    width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
    
	position: fixed;
	top: 0;
	left: 0;
	z-index: 19;
    
    background: url("../img/bg-black.jpg") repeat left top #111313;
    background-size: 100px auto;

    display: none;
}
.menu-nav::before {
    content: "";
    display: block;
    margin: 0 0 0 -25%;
    width: 50%;
    height: 100%;
    
    background: url("../img/bg-ink_whole5D.webp") no-repeat center center;
    background-size: cover;
    
    position: absolute;
    top: 0;
    left: 50%;
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0.04;
    z-index: -1;
}
.menu-wrap {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 80px 0;
    overflow: hidden;
    position: relative;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.menu-wrap > section {
    width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.menu-wrap > section figure {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 60px 0;
    
    will-change: transform, opacity, animation;
	opacity: 0;
	animation: mn-TTL_in 1.2s cubic-bezier(0, 0.5, 0.3, 1) forwards;
}
.menu-wrap > section figure span {
    width: 60%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.menu {
    width: 100%;
    height: auto;
    margin: 0 0 40px 0;
    
    display: flex;
    flex-wrap: wrap;
}
.menu article {
    width: 30px;
    height: auto;
    margin: 0;
    position: relative;
    
    display: flex;
    flex-wrap: wrap;
}
.menu article::before {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #ff2296;
    
    will-change: transform;
    transform: translateY(0);
    transform-origin: top center;
	animation: mn-LN_in 1.2s linear forwards;
}
.menu article p {
    display: inline-block;
    margin: 0;
    
    font-size: 0.9rem;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 500;
    letter-spacing: 0.01em;
    font-style: normal;
    line-height: 1em;
    color: #ff2296;
    
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    
    will-change: transform, opacity, animation;
	opacity: 0;
	animation: mn-CTG_in 1.2s cubic-bezier(0, 0.5, 0.3, 1) forwards;
}
.menu section {
    width: calc(100% - 30px);
    height: auto;
    margin: 0;
    padding: 0 0 0 40px;
    
    display: flex;
    flex-wrap: wrap;
}
.menu section div {
    display: inline-block;
    position: relative;
    margin:  0 0.15em 0 0;
    
    font-size: 2.2rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
    line-height: 1em;
    
    will-change: transform, opacity, animation;
	opacity: 0;
	animation: mn-MNA_in 1.2s cubic-bezier(0, 0.5, 0.3, 1) forwards;
}
.menu section div::after {
    content: "/";
    display: inline-block;
    margin: 0 0.1em;
    
    font-size: 0.8em;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1em;
    color: #ff2296;
    
    transform: translateY(-0.15em);
}
.menu section div:nth-last-of-type(1) {
    margin: 0;
}
.menu section div:nth-last-of-type(1)::after {
    display: none;
}

.menu section.mn-lang div {
    font-size: 1.5rem;
}

.menu section div:nth-of-type(1) { animation-delay: 0.3s; }
.menu section div:nth-of-type(2) { animation-delay: 0.4s; }
.menu section div:nth-of-type(3) { animation-delay: 0.5s; }
.menu section div:nth-of-type(4) { animation-delay: 0.6s; }
.menu section div:nth-of-type(5) { animation-delay: 0.7s; }
.menu section div:nth-of-type(6) { animation-delay: 0.8s; }
.menu section div:nth-of-type(7) { animation-delay: 0.9s; }
.menu section div:nth-of-type(8) { animation-delay: 1.0s; }
.menu section div:nth-of-type(9) { animation-delay: 1.1s; }
.menu section div:nth-of-type(10){ animation-delay: 1.2s; }

.menu section div p, .menu section.mn-lang div a p {
    display: inline-block;
    margin: 0 0.15em 0 0;

    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: url("../img/txt-bgS_pink.webp");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: left top;
    
    will-change: contents;
    transition: all 0.2s ease-in-out;
}
.menu section.mn-lang div p {
    color: rgba(255,255,255,0.2);
    margin: 0 0.15em 0 0;
    
    background-clip: inherit;
    -webkit-background-clip: inherit;
    background: none;
}
.menu section div i {
    display: inline-block;
    margin: 0 0.15em 0 0;
    
    color: #ff2296;
    letter-spacing: -0.03em;
    line-height: 1em;
    
    will-change: contents;
    transition: all 0.2s ease-in-out;
}

.menu section div a:hover p, .menu section div a:hover i {
    color: #aeff00;
}

@keyframes mn-TL_in {
    0%   { transform: scale(1.4) translateX(-15%); }
    100% { transform: scale(1)   translateX(0); }
}
@keyframes mn-TL_in_sp {
    0%   { transform: scale(1.5); }
    100% { transform: scale(1)  ; }
}
@keyframes mn-MNA_in {
    0%   { transform: translateX(50px); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
}
@keyframes mn-TTL_in {
    0%   { transform: translateY(-50px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}
@keyframes mn-CTG_in {
    0%   { transform: translateY(50px);  opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}
@keyframes mn-LN_in {
    0%   { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}




/* --- C O M M O N --- */

.YT {
    display: none;
}

.TPcont {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}
.sec-wrap {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    position: relative;
    overflow: hidden;
}
/*.sec-wrap::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}*/
.sec-wrap::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}
.sput {
    width: 100%;
    height: calc(100% + 150px);
    margin: 0;
    position: absolute;
    top: -150px;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.sec-wrap#pnk-zone {
    background: url("../img/bg-pink.jpg") repeat left top;
    background-size: 100px auto;
}
.sec-wrap#pnk-zone .sput {
    background: url("../img/bg-sput_wt.webp") repeat left top;
    background-size: 1500px auto;
}
.sec-wrap#pnk-zone::after {
    background: url("../img/bg-ink_whole1.webp") repeat left top;
    background-size: cover;
}

.sec-wrap#blk-zone {
    background: url("../img/bg-black.jpg") repeat left top;
    background-size: 100px auto;
}
.sec-wrap#blk-zone .sput {
    background: url("../img/bg-sput_pink.webp") repeat left top;
    background-size: 1500px auto;
}
.sec-wrap#blk-zone::after {
    background: url("../img/bg-ink_whole4.webp") repeat left top;
    background-size: cover;
    opacity: 0.03;
}

.sec-wrap#gry-zone {
    background: url("../img/bg-gray.jpg") repeat left top;
    background-size: 100px auto;
}
.sec-wrap#gry-zone .sput {
    background: url("../img/bg-sput_pink.webp") repeat left top;
    background-size: 1500px auto;
}
.sec-wrap#gry-zone::after {
    background: url("../img/bg-ink_whole2.webp") repeat left top;
    background-size: cover;
}

.sec-wrap#ppl-zone {
    background: url("../img/bg-purple.jpg") repeat left top;
    background-size: 100px auto;
}
.sec-wrap#ppl-zone .sput {
    background: url("../img/bg-sput_pink.webp") repeat left top;
    background-size: 1500px auto;
}
.sec-wrap#ppl-zone::after {
    background: url("../img/bg-ink_whole2D.webp") repeat left top;
    background-size: cover;
}

.sec-wrap#gry2-zone {
    background: url("../img/bg-gray.jpg") repeat left top;
    background-size: 100px auto;
}
.sec-wrap#gry2-zone::after {
    background: url("../img/bg-wave.webp") repeat left top;
    background-size: 1000px auto;
}
.sec-wrap#gry2-zone .sput {
    background: url("../img/bg-sput_purple.webp") repeat left top;
    background-size: 1500px auto;
}


.cont-wrap {
    width: calc(100% - max(180px,20%));
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 50px 0 100px 0;
    position: relative;
    z-index: 1;
}
.cont-main {
    width: 100%;
    height: auto;
    display: block;
    margin: 50px auto 0 auto;
    padding: 0;
    position: relative;
}
.cttl {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0.7vw 0 0 0;
    position: relative;
    text-align: right;
    overflow: hidden;
    
    /*border: 1px dashed #fff;*/
}
.cttl h1 {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0 0.6vw 1.5vw 0;
    position: relative;
    box-sizing: border-box;
    
    font-size: max(4rem,8.5vw);
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.09em;
    line-height: 1em;
    
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: right top;
    
    will-change: transform;
    transition: all 1.5s cubic-bezier(0, 0.5, 0.3, 1);
    transform: translateY(100%);
}
.cttl.appr h1 {
    transform: translateY(0);
}
.cttl p {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    position: absolute;
    right: -1.5vw;
    top: 0;
    
    will-change: transform, opacity;
    transition: all 1.0s ease-out 0.5s;
    transform: translateY(100%);
    opacity: 0;
}
.cttl.appr p {
    transform: translateY(0);
    opacity: 1;
} 
.cttl p::before {
    content: "MARRIAGETOXIN";
    display: inline-block;
    margin: 0;
    box-sizing: border-box;
    
    font-size: 0.7vw;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 2.8em;
    line-height: 1em;
}
.cttl b {
    width: 15vw;
    height: 1px;
    display: block;
    margin: 0;
    
    position: absolute;
    right: 0;
    bottom: 0;
    
    will-change: transform;
    transition: all 1.8s ease-out 0.3s;
    transform: scaleX(0);
    transform-origin: right center;
}
.cttl.appr b {
    transform: scaleX(1);
}

#pnk-zone .cttl h1 { background-image: url("../img/txt-bgB_purple.webp"); }
#pnk-zone .cttl p { color: #490c49; }
#pnk-zone .cttl b { background: #490c49; }

#blk-zone .cttl h1 { background-image: url("../img/txt-bgB_pink.webp"); }
#blk-zone .cttl p { color: #ff2296; }
#blk-zone .cttl b { background: #ff2296; }

#gry-zone .cttl h1 { background-image: url("../img/txt-bgB_pink.webp"); }
#gry-zone .cttl p { color: #ff2296; }
#gry-zone .cttl b { background: #ff2296; }

#ppl-zone .cttl h1 { background-image: url("../img/txt-bgB_pink.webp"); }
#ppl-zone .cttl p { color: #ff2296; }
#ppl-zone .cttl b { background: #ff2296; }

#gry2-zone .cttl h1 { background-image: url("../img/txt-bgB_purple.webp"); }
#gry2-zone .cttl p { color: #490c49; }
#gry2-zone .cttl b { background: #490c49; }





/* --- T O P --- */

.top-wrap {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 0 40px 0;
    position: relative;
    background: url("../img/bg-wave.webp") repeat left top;
    background-size: 1000px auto;
    
    display: flex;
    flex-wrap: wrap;
    z-index: 6;
}

.top-CNT {
    width: max(25%,200px);
    height: auto;
    margin: 0;
    display: block;
    position: relative;
    z-index: 2;
}
.top-CNT::before {
    content: "";
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background: url("../img/bg-ink_wt1.webp") no-repeat right top; /* ../img/bg-ink_wt1B.webp */
    background-size: 100% auto;
    opacity: 0.1; /* 0.6 */
    z-index: -2;
}
.top-CNT::after {
    content: "";
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background: url("../img/bg-ink_lt1.webp") no-repeat left top; /* ../img/bg-ink_lt1B.webp */
    background-size: 90% auto;
    z-index: -1;
    
    will-change: transform;
    transition: all 2.5s cubic-bezier(0, 1, 0, 1);
    transform-origin: left top;
    transform: scale(0.5);
}
.top-CNT.appr::after {
    transform: scale(1);
}
.top-CNT article {
    width: 1vw;
    height: calc(100% - 50px);
    display: block;
    margin: 0;
    pointer-events: none;
    position: absolute;
    right: 0.5vw;
    top: 0;
}
.top-CNT article span {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/tp-DCtxt.webp") no-repeat center center;
    background-size: auto calc(100% - 3vw);
    
    will-change: transform, opacity;
    transition: all 1.5s cubic-bezier(0, 0.5, 0.3, 1) 0.4s;
    transform: translateX(30px);
    opacity: 0;
}
.top-CNT.appr article span {
    transform: translateX(0);
    opacity: 1;
}
.top-CNT article i {
    content: "";
    display: block;
    margin: 0;
    width: 12vw;
    height: auto;
    background: url("../img/bg-ink_tp.webp") no-repeat left bottom; /* ../img/bg-ink_tpB.webp */
    background-size: 100% auto;
    position: absolute;
    bottom: 0;
    right: -0.5vw;
    z-index: -1;
    
    will-change: transform;
    transition: all 1.5s cubic-bezier(0, 0.5, 0.3, 1) 1.2s;
    transform: scale(0);
    transform-origin: right center;
}
.top-CNT article i::before {
    content: "";
    display: block;
    padding-bottom: 158.5%;
}
.top-CNT.appr article i {
    transform: scale(1);
}

.top-CNT-wrap {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    padding: 20px 20px 0 30px;
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
}
.top-PIC {
    width: calc(100% - max(25%,200px));
    height: auto;
    margin: 0;
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.top-PIC .swiper_TP {
    position: relative;
    margin: 0;
    border-radius: 50px 0 0 50px;
    border-left:   2px solid #ff2296;
    border-top:    2px solid #ff2296;
    border-bottom: 2px solid #ff2296;
    border-right: none;
}
.top-PIC .swiper-wrapper {
    will-change: transform;
    transition: all 6s cubic-bezier(0, 1, 0, 1);
    transform: scale(1.5);
}
.top-PIC.appr .swiper-wrapper {
    transform: scale(1);
}
.tp-KV {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}
.tp-KV::before {
    content: "";
    display: block;
    padding-bottom: 75.48%;
}
.tp-KV article {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.tp-KV article p {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    
    will-change: filter;
    transition: all 1.8s linear 0.3s;
    filter: brightness(40%) contrast(130%);
}
.top-PIC.appr .tp-KV article p {
    filter: brightness(100%) contrast(100%);
}
.tp-KV article p::before {
    content: "";
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    background: #490c49;
    mix-blend-mode: color;
    
    will-change: opacity;
    transition: all 1.5s linear 0.8s;
}
.top-PIC.appr .tp-KV article p::before {
    opacity: 0;
}

.tp-KV.kv1 article p {
    background: url("../img/kv-01-jp_pc.webp") no-repeat left top;
    background-size: 100% auto;
}
.tp-KV.kv2 article p {
    background: url("../img/kv-02_pc.webp") no-repeat left top;
    background-size: 100% auto;
}

.top-PIC.EN .tp-KV.kv1 article p {
    background: url("../img/kv-01-en_pc.webp") no-repeat left top;
    background-size: 100% auto;
}
.top-PIC.EN .tp-KV.kv2 article p {
    background: url("../img/kv-02_pc.webp") no-repeat left top;
    background-size: 100% auto;
}

/*
.tp-KV.kv3 article p {
    background: url("../img/kv-03_pc.webp") no-repeat left top;
    background-size: 100% auto;
}
.tp-KV.kv4 article p {
    background: url("../img/kv-04_pc.webp") no-repeat left top;
    background-size: 100% auto;
}
*/

.thumtxt {
    width: 100%;
    height: auto;
    display: block;
    text-align: right;
    margin: 40px 0 0 0;
    padding: 0 30px 0 0;
}
.thumtxt p {
    display: inline-block;
    margin: 0;
    
    font-size: 0.8rem;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1em;
    color: #ff2296;
}

.logoTP {
    width: 40vw;
    height: auto;
    display: block;
    margin: 0;
    position: relative;
    
    will-change: transform;
    transition: all 4.0s cubic-bezier(0, 1, 0, 1);
    transform: scale(3);
}
.top-CNT.appr .logoTP {
    transform: scale(1);
}
.logoTP span {
    width: 100%;
    height: auto;
    display: block;
    margin: 5% 0 0 2%;
    position: relative;
    
    background: url("../img/logo_pink.webp") no-repeat center center;
    background-size: contain;
}
.logoTP.EN span {
    background: url("../img/logo_pink_en.webp") no-repeat center center;
    background-size: contain;
}
.logoTP span::after {
    content: "";
    display: block;
    padding-bottom: 30.3%;
}

.tp-ctg {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 8px 0;
}
.tp-ctg h6 {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    
    font-size: 0.8rem;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1em;
    color: #ff2296; /* #490c49 */
    
    will-change: transform, opacity;
    transition: all 1.0s cubic-bezier(0, 0.5, 0.3, 1) 0.2s;
    transform: translateX(50px);
    opacity: 0;
}
.top-CNT.appr .tp-ctg h6 {
    transform: translateX(0);
    opacity: 1;
}
.tpM {
    width: 100%;
    height: auto;
    margin: 0 0 1.6vw 0;
    padding: 0.8vw 0 5px 26px;
    position: relative;
}
.tpM::before {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: 100%;
    background: #ff2296; /* #490c49 */
    position: absolute;
    top: 0;
    left: 0;
    
    will-change: transform;
    transition: all 3.0s cubic-bezier(0, 0.5, 0.3, 1) 0.2s;
    transform: scaleY(0);
    transform-origin: top center;
}
.tpM:nth-last-of-type(1) {
    margin: 0;
}
.top-CNT.appr .tpM::before {
    transform: scaleY(1);
}
.tp-menu {
    display: block;
    overflow: hidden;
}
.tp-menu div, .tp-menu div span,
.tp-menu div p , .tp-menu div b {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}
.tp-menu div {
    margin: 0 0 0.5vw 0;
}
.tp-menu div span {
    position: relative;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.tp-menu div span i {
    width: 14px;
    height: 14px;
    display: block;
    margin: -5px 0 0 0;
    position: absolute;
    top: 50%;
    left: -26px;
    overflow: hidden;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.tp-menu div span i::before {
    content: "\f04b";
    display: inline-block;
    margin: 0;
    
    font: var(--fa-font-sharp-solid);
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1em;
    color: #ff2296; /* #490c49 */
    
    position: absolute;
    left: 0;
    top: 0;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
    transform: translateX(-14px);
}
.tp-menu div p {
    font-size: 2.4vw;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
    line-height: 1em;
}
.tp-menu div b {
    margin: -0.2em 0 0 0;
    
    font-size: 0.72vw;
    font-weight: 800;
    letter-spacing: 1.0em;
    line-height: 1em;
}
.tp-menu.EN div b {
    margin: -0.2em 0 0 0;
    
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 0.72vw;
    font-weight: 800;
    letter-spacing: 1.0em;
    line-height: 1em;
}
.tp-menu div p, .tp-menu div b {
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: url("../img/txt-bgS_pink.webp"); /* ../img/txt-bgS_purple.webp */
    background-repeat: repeat-x;
    background-size: auto 100%;
    
    will-change: contents;
    transition: all 0.2s ease-in-out;
}
.tp-menu div a:hover span {
    transform: translateX(5px);
}
.tp-menu div a:hover span i {
    transform: translateX(-5px);
}
.tp-menu div a:hover span i::before {
    transform: translateX(-5px);
}

.tp-sns {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.tp-sns div {
    display: inline-block;
    margin: 0;
}
.tp-sns div span {
    display: inline-block;
    margin: 0 1vw 0.3vw 0;
}
.tp-sns i {
    display: inline-block;
    margin: 0;
    
    font-size: 2.0vw;
    letter-spacing: 0;
    line-height: 1em;
    color: #ff2296; /* #490c49 */
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.tp-sns a:hover i {
    color: #ff2296; /* #490c49 */
    transform: scale(1.1);
}

.tp-lng {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.5vw;
    
    overflow: hidden;
}
.tp-lng div {
    display: inline-block;
    margin: 0 1.6vw 0 0;
    position: relative;
}
.tp-lng div:nth-last-of-type(1) {
    margin: 0;
}
.tp-lng div::before {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: 80%;
    position: absolute;
    right: -0.85vw;
    top: 5%;
    background: #ff2296; /* #490c49 */
    opacity: 1;
}
.tp-lng div:nth-last-of-type(1)::before {
    display: none;
}
.tp-lng div p {
    display: inline-block;
    margin: 0;
    position: relative;
    
    font-size: 1.25vw;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
    line-height: 1em;
    
    color: #ff2296; /* #490c49 */
    opacity: 1;
}
.tp-lng div a p {
    color:rgba(0,0,0,0.25);
    
    will-change: transform, contents;
    transition: all 0.2s ease-in-out;
    transform: scale(1);
}
.tp-lng div a:hover p {
    color:rgba(255,34,150,1);
    transform: scale(1.05);
}

.mnTP-wrap {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    
    will-change: transform;
    transition: all 1.4s cubic-bezier(0, 0.5, 0.3, 1);
    transform: translateX(-100%);
}
.tp-sns .mnTP-wrap { transition-delay: 0.6s; }
.tp-lng .mnTP-wrap { transition-delay: 0.8s; }

.top-CNT.appr .mnTP-wrap {
    transform: translateX(0);
}





/* --- L / R  s i d e --- */

.logoLT {
    width: 15vw;
    height: auto;
    display: block;
    margin: 0;
    pointer-events: none;
    z-index: 4;
    
    position: fixed;
    left: 0;
    top: 0;
    
    will-change: transform, opacity;
    transition: all 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}
.logoLT.lnk {
    pointer-events: inherit;
}
.logoLT::before {
    content: "";
    display: block;
    padding-bottom: 104%;
}
.logoLT i {
    height: auto;
    display: block;
    margin: 0;
    position: absolute;
}
.logoLT i:nth-of-type(1) {
    width: 67%;
    top: -52%;
    left: 0;
    background: url("../img/bg-ink_ltB-1.webp") no-repeat left center;
    background-size: 100% auto;
    
    will-change: transform;
    transition: all 1.2s cubic-bezier(0, 0.7, 0, 1);
    transform: scale(0);
    transform-origin: left center;
}
.logoLT i:nth-of-type(1)::before {
    content: "";
    display: block;
    padding-bottom: 187%;
}
.logoLT i:nth-of-type(2) {
    width: 60%;
    bottom: 0;
    right: 0;
    background: url("../img/bg-ink_ltB-2.webp") no-repeat left center;
    background-size: 100% auto;
    
    will-change: transform;
    transition: all 1.2s cubic-bezier(0, 0.7, 0, 1) 0.2s;
    transform: scale(0);
}
.logoLT i:nth-of-type(2)::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.logoLT.appr i:nth-of-type(1), .logoLT.appr i:nth-of-type(2) {
    transform: scale(1);
}

.logoLT span {
    width: 150%;
    height: auto;
    display: block;
    margin: 0;
    background: url("../img/logoS_pink.webp") no-repeat left top;
    background-size: 100% auto;
    
    position: absolute;
    top: 20%;
    left: 10%;
    
    will-change: transform, opacity;
    transition: all 1.0s cubic-bezier(0.7, 0, 0.3, 1);
    transform: translateX(-30px);
    opacity: 0;
}
.logoLT.EN span {
    background: url("../img/logoS_pink_en.webp") no-repeat left top;
    background-size: 100% auto;
}
.logoLT span::before {
    content: "";
    display: block;
    padding-bottom: 30.3%;
}
.logoLT.appr span {
    transform: translateX(0);
    opacity: 1;
}

.Lside, .Rside {
    width: 60px;
    height: 100vh;
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: 5;
}
.Lside { left:  30px; padding-top: 11vw; }
.Rside { right: 30px; }

.totop {
    width: 60px;
    height: auto;
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    
    position: fixed;
    right: 30px;
    bottom: 0;
    z-index: 6;
}

.Lside section, .Rside section, .totop section {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    position: relative;
}
.Lside section::before, .Rside section::before, .totop section::before {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: calc(100% + 40px);
    position: absolute;
    top: -20px;
    background: #ff2296;
    
    will-change: transform;
    transition: all 1.0s cubic-bezier(0, 0.5, 0.3, 1);
	transform: scaleY(0);
    transform-origin: top center;
}
.Lside section::before { left: 0; }
.Rside section::before { right: 0; }
.totop section::before { right: 0; }

.Lside.appr section::before, .Rside.appr section::before, .totop.appr section::before {
    transform: scaleY(1);
}

.Lside section div, .Rside section div, .totop section div {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 6px 0;
    padding: 0 0 6px 0;
    text-align: center;
    position: relative;
    
    will-change: transform, opacity;
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    pointer-events: none;
    opacity: 0;
}
.Lside section div {
    transform: translate(-20px,0);
}
.Rside section div {
    transform: translate(20px,0);
}
.totop section div {
    transform: translate(0,20px);
}
.Lside.appr section div, .Rside.appr section div, .totop.appr section div {
    transform: translate(0,0);
    opacity: 1;
    pointer-events: inherit;
}

.totop section div {
    margin: 0;
    padding: 0 0 20px 0;
}

.Lside section div:nth-of-type(1)  { transition-delay: 0; }
.Lside section div:nth-of-type(2)  { transition-delay: 0.1s; }
.Lside section div:nth-of-type(3)  { transition-delay: 0.2s; }
.Lside section div:nth-of-type(4)  { transition-delay: 0.3s; }
.Lside section div:nth-of-type(5)  { transition-delay: 0.4s; }
.Lside section div:nth-of-type(6)  { transition-delay: 0.5s; }
.Lside section div:nth-of-type(7)  { transition-delay: 0.6s; }
.Lside section div:nth-of-type(8)  { transition-delay: 0.7s; }
.Lside section div:nth-of-type(9)  { transition-delay: 0.8s; }
.Lside section div:nth-of-type(10) { transition-delay: 0.9s; }

.Rside section div:nth-of-type(1)  { transition-delay: 0; }
.Rside section div:nth-of-type(2)  { transition-delay: 0.1s; }
.Rside section div:nth-of-type(3)  { transition-delay: 0.2s; }
.Rside section div:nth-of-type(4)  { transition-delay: 0.3s; }

.Lside section div::before {
    content: "/";
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    height: auto;
    
    font-size: 0.9rem;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 300;
    letter-spacing: 0;
    font-style: normal;
    line-height: 1em;
    color: #ff2296;
    
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    
    position: absolute;
    bottom: 0;
    left: 0;
}
.Lside section div:nth-last-of-type(1), .Rside section div:nth-last-of-type(1)  {
    margin: 0;
    padding: 0;
}
.Lside section div:nth-last-of-type(1)::before {
    display: none;
}
.Lside section div span, .Rside section div span, .totop section div span {
    display: inline-block;
    margin: 0;
    position: relative;
    
    font-size: 1rem;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1em;
    color: #ff2296;
    
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.Rside section div span i {
    font-size: 1.2em;
    margin: 0 0 0 -0.2em;
}
.totop section div span::before {
    content: "\f077";
    display: inline-block;
    margin: 0 0 0.4em 0;
    font: var(--fa-font-regular);
    font-size: 1.2em;
    line-height: 1em;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}

.Lside section div span {
    position: relative;
}
.Lside section div span i, .Rside section div span b {
    width: 10px;
    height: 10px;
    display: block;
    margin: -5px 0 0 0;
    position: absolute;
    top: 50%;
    overflow: hidden;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.Lside section div span i { left: -22px; }
.Rside section div span b { right: -20px; }

.Lside section div span i::before, .Rside section div span b::before {
    content: "\f04b";
    display: inline-block;
    margin: 0;
    
    font: var(--fa-font-sharp-solid);
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1em;
    
    position: absolute;
    top: 0;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.Lside section div span i::before { content: "\f04b"; left: 0;  transform: translateX(-10px); }
.Rside section div span b::before { content: "\e780"; right: 0; transform: translateX(10px); }

.Lside section div a:hover span {
    transform: translateX(-4px);
}
.Lside section div a:hover span i {
    transform: translateX(4px);
}
.Lside section div a:hover span i::before {
    transform: translateX(-2px);
}
.Rside section div a:hover span {
    transform: translateX(4px);
}
.Rside section div a:hover span b {
    transform: translateX(-4px);
}
.Rside section div a:hover span b::before {
    transform: translateX(2px);
}
.totop section div a:hover span::before {
    transform: translateY(-4px);
}


.Lside.col-pnk section div span, .Lside.col-pnk section div::before,
.Rside.col-pnk section div span, .Rside.col-pnk section div::before,
.totop.col-pnk section div span, .totop.col-pnk section div::before {
    color: #ff2296;
}
.Lside.col-ppl section div span, .Lside.col-ppl section div::before,
.Rside.col-ppl section div span, .Rside.col-ppl section div::before,
.totop.col-ppl section div span, .totop.col-ppl section div::before {
    color: #490c49;
}
.Lside.col-ppl section::before,
.Rside.col-ppl section::before,
.totop.col-ppl section::before {
    background: #490c49;
}
.Lside.col-pnk section div span, .Lside.col-pnk section div::before,
.Rside.col-pnk section div span, .Rside.col-pnk section div::before,
.totop.col-pnk section div span, .totop.col-pnk section div::before {
    color: #ff2296;
}
.Lside.col-pnk section::before,
.Rside.col-pnk section::before,
.totop.col-pnk section::before {
    background: #ff2296;
}






/* --- N E W S --- */

.newsTP::before {
    content: "";
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    background: url("../img/bg-ink_nw.webp") no-repeat left top;
    background-size: 40% auto;
    z-index: -1;
}
.news-item {
    width: 80%;
    height: auto;
    margin-bottom: 30px;
    display: block;
    position: relative;
}
.news-item:nth-of-type(2) {
    margin-left: 7.5%;
}
.news-item:nth-of-type(3) {
    margin: 0 0 8px 15%;
}
.news-item::before {
    content: "";
    display: block;
    margin: 0;
    width: 100%;
    height: 1px;
    background: #490c49;
    
    position: absolute;
    bottom: -8px;
    left: 0;
    
    will-change: transform;
    transition: all 1.5s ease-out;
    transform-origin: left center;
    transform: scaleX(0);
}
.news-item:nth-of-type(1)::before { transition-delay: 0s; }
.news-item:nth-of-type(2)::before { transition-delay: 0.25s; }
.news-item:nth-of-type(3)::before { transition-delay: 0.5s; }

.newsTP.appr .news-item::before {
    transform: scaleX(1);
}
.news-item section {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 5px 0;
    overflow: hidden;
}
.news-item section span {
    width: 100%;
    height: auto;
    margin: 0;
    
    display: flex;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: center;
    
    will-change: transform;
    transition: all 1.0s cubic-bezier(0, 0.5, 0.3, 1);
    transform: translateY(calc(100% + 10px));
}
.newsTP.appr .news-item section span {
    transform: translateY(0);
}
.news-item:nth-of-type(1) section span { transition-delay: 0.2s; }
.news-item:nth-of-type(2) section span { transition-delay: 0.45s; }
.news-item:nth-of-type(3) section span { transition-delay: 0.70s; }

.days {
    width: 100px;
    height: auto;
    margin: 0;
    position: relative;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    
    color: #490c49;
}
.days::before {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: 90%;
    background: #490c49;
    
    position: absolute;
    top: 5%;
    right: 0;
}
.days b {
    width: 26px;
    height: auto;
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    font-size: 1.9rem;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1em;
    
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.days div {
    width: 35px;
    height: auto;
    display: block;
    margin: 3px 0 0 0;
}
.days div p {
    width: 100%;
    height: auto;
    display: block;
    margin: -0.22em 0;
    
    font-size: 2.8rem;
    font-family: "Chivo Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1em;
}
.news-title {
    width: calc(100% - (105px + 35px));
    height: auto;
    margin: 0;
    padding: 0 10px 0 20px;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.news-title p {
    display: inline-block;
    margin: 0;
    
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4em;
    
    color: #490c49;
}
.newsTP.EN .news-title p, .newsIDX.EN .news-title p {
    letter-spacing: -0.01em;
}

#news .news-item {
    height: 80px;
}
#news .news-title p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.news-item article {
    width: 35px;
    height: 100%;
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.news-item article::before {
    content: "\f054";
    display: inline-block;
    margin: 0;
    font: var(--fa-font-light);
    font-size: 2rem;
    letter-spacing: 0;
    line-height: 1em;
    color: #490c49;
}

.days, .days::before, .news-title p, article::before {
    will-change: contents, transform;
    transition: all 0.2s ease-in-out;
}
.news-item a:hover .days::before {
    background: #aeff00;
}
.news-item a:hover .days, .news-item a:hover .news-title p, .news-item a:hover article::before {
    color: #aeff00;
}
.news-item a:hover article::before {
    transform: translateX(6px);
}

.news-more {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    text-align: right;
    
    will-change: transform, opacity;
    transition: all 1.2s cubic-bezier(0, 0.5, 0.3, 1);
    transform: translateX(-80px);
    opacity: 0;
}
.news-more.appr {
    transform: translateX(0);
    opacity: 1;
}
.news-more span {
    display: inline-block;
    margin: 30px 0 0 0;
    position: relative;
    
    font-size: 2.4rem;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.02em;
    line-height: 1em;
    
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: url("../img/txt-bgB_purple.webp");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: right top;
    
    will-change: contents, transform;
    transition: all 0.2s ease-in-out;
}
.news-more span::after {
    content: "\f054";
    display: inline-block;
    margin: 0 0 0 0.3em;
    font: var(--fa-font-light);
    font-size: 2rem;
    letter-spacing: 0;
    line-height: 1em;
    color: #490c49;
    
    will-change: contents, transform;
    transition: all 0.2s ease-in-out;
    transform: translate(0,-0.05em);
}
.news-more a:hover span {
    color: #aeff00;
}
.news-more a:hover span::after {
    color:  #aeff00;
    transform: translate(6px,-0.05em);
}

.bg-txt {
    width: 100%;
    height: 1px;
    display: block;
    margin: 0;
    position: relative;
    pointer-events: none;
}
.bg-txt section {
    width: calc(2914px * 2);
    height: 300px;
    margin: 0;
    pointer-events: none;
    
    position: absolute;
    top: -150px;
    left: 0;
    
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    
    opacity: 0.85;
}
.bg-txt span {
    width: 2914px; /* 2864px + margin 50px*/
    height: 300px;
    display: block;
    margin: 0;
    pointer-events: none;
    
    background: url("../img/bg-txtL.svg") no-repeat left center;
    background-size: auto 100%;
    
    will-change: transform;
}
.bg-txt span:nth-of-type(1) {
    animation: 80s SCtxt1 linear infinite -40s;
}
.bg-txt span:nth-of-type(2) {
    animation: 80s SCtxt2 linear infinite;
}
@keyframes SCtxt1 {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
@keyframes SCtxt2 {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-200%); }
}






/* --- M O V I E --- */

.ct-movie {
    will-change: transform, opacity;
    transition: all 1.2s cubic-bezier(0, 0.5, 0.3, 1);
    transform: translateY(100px);
    opacity: 0;
}
.ct-movie.appr {
    transform: translateY(0);
    opacity: 1;
}
.ct-movie .swiper_MV {
    border: 2px solid #490c49;
    border-radius: 40px;
}
.ct-movie section {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    position: relative;
    overflow: hidden;
    pointer-events: none;
}
.ct-movie section::before {
    content: "";
    display: block;
    padding-bottom: 45%;
}
.ct-movie section article {
    width: 100%;
    height: 100%;
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.ct-movie section article p {
    width: 9vw;
    height: auto;
    display: block;
    margin: 0;
    pointer-events: auto;
	z-index: 2;
    
    background: url("../img/play.webp") no-repeat center center;
    background-size: contain;
    
    will-change: transform, contents, filter;
    transition: all 0.2s ease-in-out;
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0));
}
.ct-movie section article p::before {
    content: "";
    display: block;
    padding-bottom: 106%;
}
.ct-movie section article p::after {
    content: "";
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/play_hv.webp") no-repeat center center;
    background-size: contain;
    
    will-change: opacity;
    transition: all 0.2s ease-in-out;
    opacity: 0;
}
.ct-movie section:hover article p {
    transform: scale(0.95);
    filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.6));
}
.ct-movie section:hover article p::after {
    opacity: 1;
}

.ct-movie section span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	z-index: -1;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.ct-movie section span p {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: #490c49;
    mix-blend-mode: color;
    
    will-change: opacity;
    transition: all 0.2s ease-in-out;
}
.ct-movie section span b {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.6;
    
    will-change: opacity;
    transition: all 0.2s ease-in-out;
}

.ct-movie section:hover span {
    transform: scale(1.02) translate(-49%,-49%);
}
.ct-movie section:hover span b, .ct-movie section:hover span p {
    opacity: 0;
}

.ct-movie figure {
    width: 100%;
	height: 40px;
	margin: 0;
    padding: 0 25px;
    display: block;
	pointer-events: none;
	box-sizing: border-box;
	z-index: 1;
    
    position: absolute;
    bottom: 0;
    left: 0;
}
.ct-movie figure p {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 1em;
    position: relative;
    
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1em;
    color: #dce5e6;
}
.ct-movie figure p::before {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: 1em;
    background: #dce5e6;
    position: absolute;
    left: 0;
    top: 0;
}
.ct-movie section:hover figure {
    mix-blend-mode: difference;
}



/* ---------   S W I P E R   --------- */

.swiper-pagination.TPpgn {
    bottom: 25px;
    padding-right: 25px;
    text-align: right;
}
.TPpgn > .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
    margin: 0 5px !important;
    background: #ff2296;
    border-radius: 10px;
    outline: none;
	opacity: 1;
    transition: all 0.25s ease-in-out;
}
.TPpgn > .swiper-pagination-bullet-active {
    width: 80px;
}

.swiper-pagination.MVpgn {
    bottom: -30px;
    
    will-change: transform, opacity;
    transition: all 1.2s cubic-bezier(0, 0.5, 0.3, 1) 0.5s;
    opacity: 0;
    transform: translateY(-40px);
}
.ct-movie.appr .swiper-pagination.MVpgn {
    transform: translateY(0);
    opacity: 1;
}
.MVpgn > .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
    margin: 0 5px !important;
    background: #490c49;
    border-radius: 10px;
    outline: none;
	opacity: 1;
    transition: all 0.25s ease-in-out;
}
.MVpgn > .swiper-pagination-bullet-active {
    width: 80px;
}

.MV-prev, .MV-next {
    width: 60px;
    height: 60px;
    display: block;
    margin: -30px 0 0 0;
    
    position: absolute;
    top: 50%;
    
    outline: none;
    cursor: pointer;
    z-index: 10;
    
    will-change: transform, opacity;
    transition: all 1.2s cubic-bezier(0, 0.5, 0.3, 1) 0.5s;
    opacity: 0;
}
.MV-prev { 
    left: 10px;
    transform: translateX(50px);
}
.MV-next {
    right: 10px;
    transform: translateX(-50px);
}
.ct-movie.appr .MV-prev, .ct-movie.appr .MV-next {
    transform: translateX(0);
    opacity: 1;
}

.MV-prev span, .MV-next span {
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.MV-prev span::before, .MV-next span::before {
    display: inline-block;
    margin: 0;
    font: var(--fa-font-regular);
    font-size: 3.3rem;
    letter-spacing: 0;
    line-height: 1em;
    color: #ff2296;
    
    will-change: transform, contents;
    transition: all 0.2s ease-in-out;
}
.MV-prev span::before { content: "\f053"; }
.MV-next span::before { content: "\f054"; }

.MV-prev:hover span::before {
    color: #aeff00;
    transform: translateX(-6px);
}
.MV-next:hover span::before {
    color: #aeff00;
    transform: translateX(6px);
}




/* --- I N T R O D U C T I O N --- */

.ct-intro::before {
    content: "";
    display: block;
    margin: 0;
    pointer-events: none;
    width: 30%;
    height: 100%;
    position: absolute;
    top: 80px;
    right: 0;
    
    background: url("../img/bg-ink_int.webp") no-repeat center center;
    background-size: contain;
    
    will-change: opacity, transform;
    transition: all 1.0s ease-out 0.8s;
    opacity: 0;
}
.ct-intro.appr::before {
    opacity: 1;
}
.ct-intro section {
    width: 90%;
    height: auto;
    display: block;
    margin: 80px 0 80px 10%;
    position: relative;
    
    /*border: 1px dashed #bbb;*/
}
.ct-intro section p {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding-left: 5%;
    position: relative;
    box-sizing: border-box;
    
    font-size: 1.28rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 2.3em;
    color: #dce5e6;
}
.ct-intro.EN section p {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.9em;
}

.ct-intro section p::before {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: 100%;
    background: #ff2296;
    
    position: absolute;
    left: 0;
    top: 0;
    
    will-change: transform;
    transition: all 2.0s ease-out;
    transform: scaleY(0);
    transform-origin: top center;
}
.ct-intro section p span {
    display: inline-block;
    margin: 0;
}
.ct-intro.appr section p::before {
    transform: scaleY(1);
}





/* --- C H A R A C T E R --- */

.ct-chara {
    margin-top: 10px;
}
.ct-chara i {
    width: 35%;
    height: auto;
    display: block;
    margin: 0;
    pointer-events: none;
    position: absolute;
    left: -4%;
    top: 0;
    background: url("../img/bg-ink_cr.webp") no-repeat center center;
    background-size: contain;
    z-index: -1;
    
    will-change: transform, opacity;
    transition: all 1.2s cubic-bezier(0, 1, 0, 1);
    transform: scale(0);
}
.ct-chara i::before {
    content: "";
    display: block;
    padding-bottom: 100%;
}
.ct-chara.appr i {
    transform: scale(1);
} 

@keyframes bgName1 {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
@keyframes bgName2 {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}
@keyframes crpic {
    0%   { transform: translateX(30%); opacity: 0; }
    100% { transform: translateX(0);   opacity: 1; }
}
@keyframes crName1 {
    30%  { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
@keyframes crName2 {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
@keyframes crName3 {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(0); }
}
@keyframes crName4 {
    0%   { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
@keyframes crTxt1 {
    0%   { transform: translateX(50%); opacity: 0; }
    100% { transform: translateX(0);   opacity: 1; }
}
@keyframes crTxt2 {
    0%   { width: 0; }
    100% { width: 100%; }
}
@keyframes crTxt3 {
    0%   { transform: translateY(80px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
@keyframes crOth {
    0%   { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.0); opacity: 1; }
}

.chara-detail {
    width: 90%;
	height: auto;
	margin: 0 0 0 10%;
    position: relative;
	
	display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.bg-name {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.bg-name span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    overflow: hidden;
}
.bg-name span p {
    display: inline-block;
    margin: 0;
    
    font-size: 18vw;
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 900;
    font-style: normal;
    letter-spacing: -0.05em;
    line-height: 0.75em;
    
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: url("../img/txt-bgL_gray.webp");
    background-repeat: repeat;
    background-size: auto 20%;
    background-position: left top;
    
    will-change: transform, animation;
}
.bg-name span:nth-of-type(1) p {
    transform: translateY(100%);
}
.bg-name span:nth-of-type(2) p {
    transform: translateY(-100%);
}
.swiper-slide-active .chara-detail.appr .bg-name span:nth-of-type(1) p {
    animation: bgName1 1.5s cubic-bezier(0, 0.5, 0.3, 1) forwards 0.9s;
}
.swiper-slide-active .chara-detail.appr .bg-name span:nth-of-type(2) p {
    animation: bgName2 1.5s cubic-bezier(0, 0.5, 0.3, 1) forwards 0.9s;
}

.chara-detail figure {
    width: 50%;
    height: auto;
    display: block;
    margin: 0;
    position: relative;
    z-index: 0;
}
.chara-detail figure::before {
    content: "";
    display: block;
    padding-bottom: 147.3%;
}
.chara-detail figure div {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
}
.chara-detail figure div span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    
    will-change: filter, animation, transform, opacity;
    filter: drop-shadow(80px 0px 0px rgba(0,0,0,0.1));
    transform: translateX(30%); 
    opacity: 0;
}
.swiper-slide-active .chara-detail.appr figure div span {
    animation: crpic 2.0s cubic-bezier(0.4, 0, 0, 1) forwards;
}

.cr-data {
    width: 50%;
    height: auto;
    margin: 0;
    padding: 40px 0;
    z-index: 1;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
.cr-data section {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    position: relative;
}
.cr-name {
    display: inline-block;
    margin: 0 0 40px 0;
    position: relative;
    background: #1c2324;
    
    will-change: animation, transform;
    transform: scaleX(0);
    transform-origin: left top;
}
.swiper-slide-active .chara-detail.appr .cr-name {
    animation: crName1 1.0s cubic-bezier(0, 0.5, 0.3, 1) forwards;
}
.cr-name::before, .cr-name::after {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: 40px;
    background: #1c2324;
    position: absolute;
}
.cr-name::before {
    bottom: 100%;
    right: 0;
}
.cr-name::after {
    top: 100%;
    left: 0;
}
.cr-name h4 {
    display: inline-block;
    margin: 0;
    overflow: hidden;
}
.cr-name h4 span {
    display: inline-block;
    margin: 0;
    padding: 0 0.2em 0 0.2em;
    
    font-size: 4vw;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1em;
    color: #fff;
    
    will-change: animation, transform;
    transform: translateY(100%);
}
.cr-data.EN .cr-name h4 span {
    padding: 0.15em 0.2em 0 0.2em;
    
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 900;
    font-style: normal;
    letter-spacing: -0.01em;
}
.swiper-slide-active .chara-detail.appr .cr-name h4 span {
    animation: crName2 1.0s cubic-bezier(0, 0.5, 0.3, 1) forwards 1.0s;
}
.cr-name p {
    display: inline-block;
    margin: 0;
    overflow: hidden;
    
    position: absolute;
    top: -40%;
    right: 0;
}
.cr-name p span {
    display: inline-block;
    margin: 0;
    padding: 0 0.5em 0.12em 0.2em;
    
    font-size: 1vw;
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.6em;
    line-height: 1em;
    color: #1c2324;
    
    will-change: animation, transform;
    transform: translateX(100%);
}
.cr-data.EN .cr-name p span {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.6em;
}
.swiper-slide-active .chara-detail.appr .cr-name p span {
    animation: crName3 1.0s cubic-bezier(0, 0.5, 0.3, 1) forwards 1.0s;
}

.cv-name {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    position: relative;
}
.cv-name h5 {
    display: inline-block;
    margin: 0;
    position: relative;
    
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1em;
    color: #1c2324;
    
    will-change: animation, transform, opacity;
    transform: translateY(100%);
    opacity: 0;
}
.cr-data.EN .cv-name h5 {
    font-size: 1.7rem;
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
}
.swiper-slide-active .chara-detail.appr .cv-name h5 {
    animation: crName4 1.0s cubic-bezier(0, 0.5, 0.3, 1) forwards 1.0s;
}
.cv-name h5::before {
    content: "cv.";
    display: inline-block;
    margin: 0 0.5em 0 0;
    
    font-size: 0.8em;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1em;
    color: #1c2324;
}
.cr-data article {
    width: 100%;
    height: auto;
    margin: 25px 0 20px 0;
    
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.cr-data article p {
    width: auto;
    height: auto;
    display: block;
    margin: 0 1em 0 0;
    position: relative;
    
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1em;
}
.cr-data article p::before {
    content: "PROFILE";
    display: inline-block;
    margin: 0;
    
    will-change: animation, transform, opacity;
    transform: translateX(50%);
    opacity: 0;
}
.swiper-slide-active .chara-detail.appr article p::before {
    animation: crTxt1 1.0s cubic-bezier(0, 0.5, 0.3, 1) forwards 1.0s;
}
.cr-data article b {
    width: 0;
    height: 2px;
    display: block;
    margin: 0;
    background: url("../img/dotline.png") repeat-x left center;
    background-size: auto 100%;
    
    will-change: animation, contents;
}
.swiper-slide-active .chara-detail.appr article b {
    animation: crTxt2 1.2s ease-out forwards 1.2s;
}
.cr-txt {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 30px 0;
    position: relative;
}
.cr-txt p {
    display: inline-block;
    margin: 0;
    
    font-size: 1.0rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.8em;
    color: #1c2324;
    
    will-change: animation, transform, opacity;
    transform: translateY(80px);
    opacity: 0;
}
.cr-data.EN .cr-txt p {
    letter-spacing: 0;
}
.swiper-slide-active .chara-detail.appr .cr-txt p {
    animation: crTxt3 1.2s cubic-bezier(0, 0.5, 0.3, 1) forwards 1.0s;
}

.cr-other {
    width: 100%;
    height: auto;
    margin: 0 0 50px 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.cr-other span {
    width: calc((100% / 3) - 2px);
    height: auto;
    display: block;
    margin: 0 1px;
    
    will-change: animation, transform, opacity;
    transform: scale(1.3);
    opacity: 0;
}
.swiper-slide-active .chara-detail.appr .cr-other span {
    animation: crOth 0.8s ease-in-out forwards;
}
.swiper-slide-active .chara-detail.appr .cr-other span:nth-of-type(1) { animation-delay: 1.2s; }
.swiper-slide-active .chara-detail.appr .cr-other span:nth-of-type(2) { animation-delay: 1.3s; }
.swiper-slide-active .chara-detail.appr .cr-other span:nth-of-type(3) { animation-delay: 1.4s; }

.cmtM {
    width: 70px;
    height: 70px;
    margin: -35px 0 0 0;
    display: block;
    
    position: absolute;
    right: -80px;
    top: 50%;
    
    will-change: transform;
    transition: all 0.5s cubic-bezier(0, 0.5, 0.3, 1) 1.0s;
    transform: scale(0);
}
.chara-detail.appr .cmtM {
    transform: scale(1);
}
.st.appr .cmtM {
    transform: scale(1);
}
.cmtM span {
    width: 100%;
    height: 100%;
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/ink_pnk.png") no-repeat center center;
    background-size: contain;
    
    will-change: transform, contents;
    transition: all 0.2s ease-in-out;
}
.cmtM span::before {
    content: "\f141";
    display: inline-block;
    margin: 0;
    font: var(--fa-font-regular);
    font-size: 2rem;
    letter-spacing: 0;
    line-height: 1em;
    color: #fff;
    
    will-change: transform, contents, filter;
    transition: all 0.2s ease-in-out;
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0));
}
.cmtM span::after {
    content: "";
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/ink_pnk_hv.png") no-repeat center center;
    background-size: contain;
    z-index: -1;
    
    will-change: opacity;
    transition: all 0.2s ease-in-out;
    opacity: 0;
}
.cmtM span:hover {
    transform: scale(0.9);
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.2));
}
.cmtM span:hover::before {
    color: #1c2324;
}
.cmtM span:hover::after {
    opacity: 1;
}

.cr-thum {
    width: 100%;
    height: auto;
    margin: 30px 0 0 0;
    position: relative;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 1;
}
.crTHM {
    width: 100px;
    height: auto;
    display: block;
    margin: 0 8px;
    position: relative;
    cursor: pointer;
    z-index: 1;
}
.crTHM span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    
    border-radius: 12px;
    border: 2px solid #fff;
    overflow: hidden;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
    transform: scale(1);
}
.crTHM p {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: #490c49;
    mix-blend-mode: color;
     border-radius: 12px;
    
    will-change: opacity, contents;
    transition: all 0.2s ease-in-out;
}
.crTHM b {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: #490c49;
    opacity: 0.5;
     border-radius: 12px;
    
    will-change: opacity, contents;
    transition: all 0.2s ease-in-out;
}
.crTHM span:hover {
    transform: scale(0.97);
}
.crTHM.cr-active, .crTHM.cr-active {
    cursor: inherit;
    pointer-events: none;
}
.crTHM.cr-active p, .crTHM.cr-active b {
    opacity: 0;
}

.CR-prev, .CR-next {
    width: 100px;
    height: 50px;
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    position: absolute;
    bottom: 15px;
    
    outline: none;
    cursor: pointer;
    z-index: 1;
    
    will-change: transform, opacity;
    transition: all 0.8s cubic-bezier(0, 0.5, 0.3, 1);
    opacity: 0;
}
.CR-prev { right: 100px; transform: translateX(40px); }
.CR-next { right: 0;     transform: translateX(-40px); }

.CR-prev.appr, .CR-next.appr {
    opacity: 1;
    transform: translateX(0);
}

.CR-prev::before, .CR-next::after {
    display: inline-block;
    margin: 0;
    font: var(--fa-font-regular);
    font-size: 2.5rem;
    letter-spacing: 0;
    line-height: 1em;
    color: #ff2296;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.CR-prev::before { content: "\f053"; }
.CR-next::after  { content: "\f054"; }

.CR-prev p, .CR-next p {
    display: inline-block;
    margin: 0.1em 0 0 0;
    
    font-size: 0.85rem;
    font-weight: 500;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-style: normal;
    letter-spacing: 0.02em;
    line-height: 1em;
    color: #ff2296;
    
    will-change: transform,;
    transition: all 0.2s ease-in-out;
}
.CR-prev p { margin: 0.1em 0 0 0.5em; }
.CR-next p { margin: 0.1em 0.5em 0 0; }

.CR-prev.swiper-button-disabled, .CR-next.swiper-button-disabled {
    cursor: inherit;
    pointer-events: none;
}
.CR-prev.swiper-button-disabled p,
.CR-next.swiper-button-disabled p,
.CR-prev.swiper-button-disabled::before,
.CR-next.swiper-button-disabled::after {
    color: #000;
    opacity: 0.2;
}
.CR-prev:hover::before {
    transform: translateX(-5px);
}
.CR-prev.swiper-button-disabled:hover::before,
.CR-next.swiper-button-disabled:hover::after {
    transform: none;
}
.CR-next:hover::after {
    transform: translateX(5px);
}




/* --- S T A F F  and  C A S T --- */

.ct-staff::before {
    content: "";
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    background: url("../img/bg-ink_st.webp") no-repeat right top 80%;
    background-size: 40% auto;
    z-index: -1;
}
.staff-main {
    width: 100%;
    height: auto;
    margin: 0 0 80px 0;
    position: relative;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.staff-main:nth-last-of-type(1) {
    margin: 0;
}
.staff-main h3 {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 30px 0;
    overflow: hidden;
}
.staff-main h3 span {
    display: inline-block;
    margin: 0;
    
    font-size: 4.8vw;
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.05em;
    line-height: 1em;
    
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: url("../img/txt-bgB_pink.webp");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: left top;
    
    will-change: transform;
    transition: all 1.2s cubic-bezier(0, 0.5, 0.3, 1);
    transform: translateY(100%);
}
.staff-main h3.appr span {
    transform: translateY(0);
}
.staff-main article {
    width: calc(10% - 50px);
    height: auto;
    display: block;
    margin: 0;
    position: relative;
}
.staff-main article::before {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: 100%;
    background: #ff2296;
    position: absolute;
    left: 5%;
    top: 0;
    
    will-change: transform;
    transition: all 1.5s ease-out;
    transform: scaleY(0);
    transform-origin: top center;
}
.staff-main article.appr::before {
    transform: scaleY(1);
}

.staff-main section {
    width: calc(90% + 50px);
    height: auto;
    margin: 0;
    padding: 50px 0 0 0;
    position: relative;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.st {
    width: calc((100% / 3) - 50px);
    height: auto;
    display: block;
    margin: 0 0 50px 50px;
    
    color: #ff2296;
}
.st.twice {
    width: calc((100% - (100% / 3)) - 50px);
}
.st h6 {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    overflow: hidden;
}
.st h6 span {
    display: inline-block;
    margin: 0;
    
    font-size: 1.0rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.3em;
    
    will-change: transform;
    transition: all 1.2s cubic-bezier(0, 0.5, 0.3, 1) 0.2s;
    transform: translateY(100%);
}
.st.appr h6 span {
    transform: translateY(0);
}
.staff-main.EN .st h6 span {
    letter-spacing: 0;
}
.st figure {
    width: 100%;
    height: 30px;
    display: block;
    margin: 0;
    position: relative;
}
.st figure::after {
    content: "";
    display: block;
    margin: 0;
    width: 0;
    height: 2px;
    background: url("../img/dotline_pnk.png") repeat-x left center;
    background-size: auto 100%;
    
    position: absolute;
    left: 0;
    top: 50%;
    
    will-change: transform, contents;
    transition: all 1.5s ease-out;
    transform-origin: left center;
}
.st.appr figure::after {
    width: 100%;
}
.st div {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    
    font-size: 2.1rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.2em;
    
    overflow: hidden;
}
.staff-main.EN .st div {
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    font-style: normal;
}
.st.appr div {
    animation: st-name 0.1s cubic-bezier(0.18, 0.57, 0.27, 1) forwards 1.0s;
}
.st p {
    display: inline-block;
    margin: 0;
    position: relative;
    
    will-change: transform;
    transition: all 1.2s cubic-bezier(0, 0.5, 0.3, 1) 0.2s;
    transform: translateY(-100%);
}
.st.appr p {
    transform: translateY(0);
}

@keyframes st-name {
    0%   { overflow: hidden;  }
    100% { overflow: visible; }
}

.st p.EN {
    font-size: 1em;
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
}
.st i {
    display: inline-block;
    margin: 0 0.2em;
    
    font-size: 1em;
    letter-spacing: 0;
    line-height: 1em;
}

#staff .cmtM span {
    background: url("../img/ink_ppl.png") no-repeat center center;
    background-size: contain;
    right: -80px;
}
#staff .cmtM span::before {
    color: #ff2296;
    filter: none;
}
#staff .cmtM span::after {
    background: url("../img/ink_ppl_hv.png") no-repeat center center;
    background-size: contain;
}
#staff .cmtM span:hover::before {
    color: #aeff00;
}






/* ---------   M O D A L  [remodal]   --------- */

.mdW-cmt {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 50px 50px 50px 50px;
	position: relative;
    
    display: flex;
    flex-wrap: wrap;
    
    background: url("../img/bg-ink_whole3.webp") no-repeat center center;
    background-size: cover;
}

.mdW-cmt figure {
    width: 35%;
    height: auto;
    display: block;
    margin: 0;
}
.mdW-cmt figure span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid #dce5e6;
}
.mdW-cmt figure span::before {
    content: "";
    display: block;
    padding-bottom: 150%;
}
.mdW-cmt figure span b {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.mdW-cmt section {
    width: 65%;
    height: auto;
    margin: 0;
    padding: 0 0 0 50px;
    
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    
    text-align: left;
    color: #dce5e6;
}
.mdW-cmt.nopic figure {
    display: none;
}
.mdW-cmt.nopic section {
    width: 100%;
    padding: 0;
}
.mdW-cmt section h4, .mdW-cmt section h3, .mdW-cmt section p {
    width: 100%;
    height: auto;
    display: block;
}
.mdW-cmt section h4 {
    margin: 0 0 0.7em 0;
    padding: 0 0 0 20px;
    position: relative;
    
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1em;
}
.mdW-cmt.EN section h4 {
    letter-spacing: 0;
}
.mdW-cmt section h4::before {
    content: "";
    display: block;
    margin: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px;
    background: #aeff00;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.mdW-cmt section h3 {
    margin: 0;
    
    font-size: 3.0rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1em;
}
.mdW-cmt.EN section h3 {
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
}
.mdW-cmt section p {
    margin: 0;
    
    font-size: 1.0rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.8em;
}
.mdW-cmt.EN section p {
    letter-spacing: 0;
}
.mdW-cmt section p span.txtR {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    text-align: right;
}
.mdW-cmt section article{
    width: 100%;
    height: 63px;
    display: block;
    margin: 10px 0 0 0;
    
    background: url("../img/dotline_pnk.png") repeat-x left center;
    background-size: auto 3px;
}





/* --- C O M I C --- */

.ct-comic {
    width: 80%;
    height: auto;
    
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    flex-wrap: wrap;
}
.ct-comic figure {
    width: 45%;
    height: auto;
    display: block;
    margin: 0;
}
.ct-comic figure span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 15px;
    border: 1px solid #490c49;
    overflow: hidden;
    
    will-change: transform, opacity;
    transition: all 1.5s cubic-bezier(0, 0.5, 0.3, 1);
    transform: translateX(-80px);
    opacity: 0;
}
.ct-comic.appr figure span {
    transform: translateX(0);
    opacity: 1;
}
.cm-wrap {
    width: 55%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0 0 0 3vw;
}
.cm-ttl, .cm-ttl h4, .cm-ttl h3 {
    width: 100%;
    height: auto;
    display: block;
}
.cm-ttl {
    margin: 0 0 20px 0;
    overflow: hidden;
}
.cm-ttl h4 {
    margin: 0 0 0.5em 0;
    
    font-size: 0.8rem;
    font-family: helvetica-neue-lt-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.35em;
    line-height: 1em;
    color: #490c49;
    
    will-change: transform, opacity;
    transition: all 0.8s ease-out 0.4s;
    transform: translateY(100%);
    opacity: 0;
}
.ct-comic.appr .cm-ttl h4 {
    transform: translateY(0);
    opacity: 1;
}
.cm-ttl h3 {
    margin: 0;
    
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1em;
    
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    background-image: url("../img/txt-bgB_purple.webp");
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: right top;
    
    will-change: transform;
    transition: all 1.2s cubic-bezier(0, 0.5, 0.3, 1);
    transform: translateY(100%);
}
.ct-comic.appr .cm-ttl h3 {
    transform: translateY(0);
}
.cm-wrap.EN .cm-ttl h3 {
    font-size: 2.2rem;
    font-family: helvetica-neue-lt-pro-cond, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.01em;
    padding: 0 0 0.1em 0;
}
.cm-txt {
    width: 100%;
    height: auto;
    margin: 0;
    
    display: flex;
    flex-wrap: wrap;
}
.cm-txt article {
    width: 3vw;
    height: auto;
    margin: 0;
    position: relative;
}
.cm-txt article::before {
    content: "";
    display: block;
    margin: 0;
    width: 1px;
    height: 100%;
    background: #490c49;
    position: absolute;
    left: 0;
    top: 0;
    
    will-change: transform;
    transition: all 1.5s ease-out;
    transform: scaleY(0);
    transform-origin: top center;
}
.ct-comic.appr .cm-txt article::before {
    transform: scaleY(1);
}
.cm-txt section {
    width: calc(100% - 3vw);
    height: auto;
    margin: 0;
    padding: 1.2vw 0;
    
    will-change: transform, opacity;
    transition: all 1.2s cubic-bezier(0, 0.5, 0.3, 1) 0.2s;
    transform: translateY(80px);
    opacity: 0;
}
.ct-comic.appr .cm-txt section {
    transform: translateY(0);
    opacity: 1;
}
.cm-txt section p {
    display: inline-block;
    margin: 0 0 2.5em 0;
    
    font-size: 1.0rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.8em;
    color: #1c2324;
}
.cm-wrap.EN .cm-txt section p {
    font-size: 0.9rem;
    letter-spacing: 0;
    line-height: 1.7em;
}
.cm-txt section p strong {
    display: inline-block;
    margin: 0;
    
    font-size: 1.25em;
    font-weight: 700;
    color: #490c49;
}

.lnkBT {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
}
.lnkBT span {
    width: 100%;
    height: 60px;
    margin: 0;
    background: #490c49;
    border-radius: 60px;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    will-change: transform, filter;
    transition: all 0.2s ease-in-out;
}
.lnkBT span > p {
    display: inline-block;
    margin: 0 0 0 -12px;
    position: relative;
    
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1em;
    color: #dce5e6;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.lnkBT span > p::after {
    content: "\f054";
    display: inline-block;
    margin: -0.5em 0 0 0;
    
    font: var(--fa-font-regular);
    font-size: 1.2em;
    letter-spacing: 0;
    line-height: 1em;
    color: #dce5e6;
    
    position: absolute;
    right: -0.8em;
    top: 50%;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.lnkBT a:hover span {
    background: #aeff00;
    transform: scale(0.97);
    filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.2));
}
.lnkBT a:hover span > p {
    color: #1c2324;
}
.lnkBT a:hover span > p::after {
    transform: translateX(5px);
    color: #1c2324;
}






/* --- F O O T E R --- */

footer {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 80px 0;
    background: url("../img/bg-black.jpg") repeat left top;
    background-size: 100px auto;
    position: relative;
}
footer::before {
    content: "";
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    background: url("../img/bg-ink_whole5.webp") no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0.03;
}
footer article {
    width: 30%;
    height: auto;
    display: block;
    margin: 0 auto 60px auto;
    position: relative;
    background: url("../img/logo_wt.webp") no-repeat center center;
    background-size: contain;
}
footer.EN article {
    background: url("../img/logo_wt_en.webp") no-repeat center center;
    background-size: contain;
}
footer article::before {
    content: "";
    display: block;
    padding-bottom: 27.3%;
}
footer p {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    text-align: center;
    
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1em;
    color: #dce5e6;
}
.ft-bn {
    width: 80%;
    height: auto;
    margin: 0 auto 30px auto;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.ft-bn div {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 5px 10px 5px;
}
.ft-bn div span {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    position: relative;
    
    will-change: transform;
    transition: all 0.2s ease-in-out;
}
.ft-bn div a:hover span {
    transform: scale(0.98);
}




/* --------- < 1000px > --------- */

@media (max-width: 1000px) {

.news-title p {
    font-size: 0.9rem;
}
.newsTP.EN .news-title p, .newsIDX.EN .news-title p {
    font-size: 1rem;
}
.cttl {
    padding: 14px 0 0 0;
}
.cttl p::before {
    font-size: 0.5rem;
}
.ct-intro section p {
    font-size: 1.1rem;
}
.ct-intro.EN section p {
    font-size: 1.1rem;
}
.cr-txt p {
    font-size: 0.85rem;
}
.st h6 span {
    font-size: 0.85rem;
}
.st div {
    font-size: 1.4rem;
}
.ct-comic {
    width: 90%;
    margin-left: 10%;
    margin-right: 0;
}
.cm-wrap.EN .cm-ttl h3 {
    font-size: 1.6rem;
}
.cm-txt section p {
    font-size: 0.85rem;
}
.lnkBT span > p {
    margin: 0 0 0 -12px;
}

}






/* --------- < 900px > --------- */

@media (max-width: 900px) {

.top-CNT-wrap {
    padding: 20px 20px 0 20px;
}
.tpM {
    padding: 0.8vw 0 5px 20px;
}
.tp-menu div span i {
    left: -22px;
}

.Lside, .Rside {
    width: 40px;
}
.Lside { left:  20px; }
.Rside { right: 20px; }

.Lside section div span, .Rside section div span, .totop section div span {
    font-size: 0.85rem;
}
.Lside section div span i { left: -16px; }
.Rside section div span b { right: -14px; }

.totop {
    width: 40px;
    right: 20px;
}

.ct-intro section p {
    font-size: 1.0rem;
}


}







/* --------- < 800px > --------- */

@media (max-width: 800px) {

#nav {
    transform: translateY(0);
}

.top-CNT {
    display: none;
}
.top-PIC {
    width: 100%;
}

.top-PIC .swiper_TP {
    border-radius: 40px;
    border: 2px solid #ff2296;
}
.tp-KV::before {
    padding-bottom: 140.9%;
}
.tp-KV.kv1 article p {
    background: url("../img/kv-01-jp_sp.webp") no-repeat left top;
    background-size: 100% auto;
}
.tp-KV.kv2 article p {
    background: url("../img/kv-02_sp.webp") no-repeat left top;
    background-size: 100% auto;
}

.top-PIC.EN .tp-KV.kv1 article p {
    background: url("../img/kv-01-en_sp.webp") no-repeat left top;
    background-size: 100% auto;
}
.top-PIC.EN .tp-KV.kv2 article p {
    background: url("../img/kv-02_sp.webp") no-repeat left top;
    background-size: 100% auto;
}

/*
.tp-KV.kv3 article p {
    background: url("../img/kv-03_sp.webp") no-repeat left top;
    background-size: 100% auto;
}
.tp-KV.kv4 article p {
    background: url("../img/kv-04_sp.webp") no-repeat left top;
    background-size: 100% auto;
}
*/

.cont-wrap {
    width: calc(100% - 126px);
    padding: 20px 0 80px 0;
}
.cttl p::before {
    letter-spacing: 2.4em;
}

.news-item {
    width: 100%;
    margin-bottom: 25px;
}
.news-item:nth-of-type(2) {
    margin-left: 0;
}
.news-item:nth-of-type(3) {
    margin: 0 0 8px 0;
}

.bg-txt section {
    width: calc(1959px * 2);
    height: 200px;
    
    top: -100px;
}
.bg-txt span {
    width: 1959px; /* 1909px + margin 50px*/
    height: 200px;
}

.ct-movie .swiper_MV {
    border-radius: 30px;
}
.MV-prev, .MV-next {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 0;
}
.MV-prev span::before, .MV-next span::before {
    font-size: 2rem;
}
.ct-movie figure {
	height: 30px;
    padding: 0 20px;
}
.ct-movie figure p {
    font-size: 0.85rem;
}

.ct-intro section {
    width: 100%;
    margin: 0;
}
.chara-detail {
    width: 100%;
	margin: 0;
}
.cr-data {
    padding: 30px 0;
}
.cr-name {
    margin: 0 0 30px 0;
}
.cr-name::before, .cr-name::after {
    height: 30px;
}
.cr-name h4 span {
    padding: 0.15em 0.2em 0 0.2em;
    font-size: 2.2rem;
}
.cr-name p span {
    padding: 0 0.5em 0.5em 0.2em;
    font-size: 0.6rem;
}
.cv-name h5 {
    font-size: 1.2rem;
}
.cr-data.EN .cv-name h5 {
    font-size: 1.3rem;
}
.st {
    width: calc((100% / 3) - 30px);
    margin: 0 0 30px 30px;
}
.st.twice {
    width: calc((100% - (100% / 3)) - 30px);
}
.cmtM {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 0;
    right: -65px;
}
.cmtM span::before {
    font-size: 1.5rem;
}
.mdW-cmt {
    padding: 30px;
}
.mdW-cmt section h4 {
    padding: 0 0 0 15px;
    font-size: 0.9rem;
}
.mdW-cmt section h3 {
    font-size: 2.0rem;
}
.mdW-cmt section p {
    font-size: 0.85rem;
}
.mdW-cmt section article{
    height: 43px;
}

.cm-ttl h4 {
    font-size: 0.7rem;
}
.cm-ttl h3 {
    font-size: 1.8rem;
}
.cm-wrap.EN .cm-ttl h3 {
    font-size: 1.4rem;
}

}




/* --------- < 600px > --------- */

@media (max-width: 600px) {

.Lside, .Rside {
    display: none;
}
.cont-wrap {
    width: calc(100% - 60px);
}
.totop {
    width: 30px;
    right: 0;
    bottom: 60px;
}
.totop section::before {
    display: none;
}


}









/* --------- < 500px > --------- */

@media (max-width: 500px) {

.OP section {
    width: 60%;
}

.logoLT {
    display: none;
}

#nav {
    width: 80px;
    height: 80px;

    left: 0;
    top: 0;
}
#nav p {
    margin: -8px 0 6px 0;
    font-size: 0.5rem;
}
#nav div {
    width: 30px;
    height: 10px;
}

#nav div span {
    height: 2px;
}
#nav div span:nth-of-type(1) {
    animation: 0.4s mnAni1B_sp ease-out forwards alternate;
}
#nav div span:nth-of-type(2) {
    animation: 0.4s mnAni2B_sp ease-out forwards alternate;
}
#nav div.active span:nth-of-type(1) {
	animation: 0.4s mnAni1A_sp ease-out forwards alternate;
}
#nav div.active span:nth-of-type(2) {
    animation: 0.4s mnAni2A_sp ease-out forwards alternate;
}

.menu-nav::before {
    margin: 0;
    width: 100%;
    height: 100%;
    left: 0;
}
.menu-wrap {
    padding: 80px 0 160px 0;
}
.menu-wrap > section {
    width: 85%;
    margin: 0 auto;
}
.menu-wrap > section figure {
    margin: 0 0 40px 0;
}
.menu {
    margin: 0 0 30px 0;
}
.menu article {
    width: 25px;
}
.menu article p {
    font-size: 0.8rem;
}
.menu section {
    width: calc(100% - 25px);
    padding: 0 0 0 15px;
}
.menu section div {
    font-size: 1.7rem;
}
.menu section.mn-lang div {
    font-size: 1.1rem;
}
.menu section div i {
    display: inline-block;
    margin: 0 0.15em 0 0;
}

.sec-wrap#pnk-zone::before {
    background-size: 1000px auto;
}
.sec-wrap#blk-zone::before {
    background-size: 1000px auto;
}
.sec-wrap#ppl-zone::before {
    background-size: 1000px auto;
}
.sec-wrap#gry2-zone::after {
    background-size: 500px auto;
}
.sec-wrap#gry2-zone::before {
    background-size: 1000px auto;
}
.sec-wrap#gry-zone::after {
    background: none;
}

.top-wrap {
    padding: 0 0 20px 0;
    background-size: 500px auto;
}

.thumtxt {
    margin: 20px 0 0 0;
    padding: 0 15px 0 0;
}
.thumtxt p {
    font-size: 0.6rem;
}
.swiper-pagination.TPpgn {
    bottom: 15px;
    padding-right: 10px;
}
.TPpgn > .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
    margin: 0 4px !important;
}
.TPpgn > .swiper-pagination-bullet-active {
    width: 60px;
}

.cttl {
    padding: 14px 0 0 0;
}
.cttl h1 {
    padding: 0 0.07em 10px 0;
    font-size: 2.5rem;
}
.cttl p::before {
    font-size: 0.4rem;
    letter-spacing: 1.8em;
    margin: 0 -0.5em 0 0;
}

.cont-wrap {
    padding: 15px 0 60px 0;
}
.cont-main {
    margin: 30px auto 0 auto;
}

.newsTP::before {
    background-position: left bottom;
    background-size: 70% auto;
}
.news-item {
    margin-bottom: 15px;
}
.days {
    width: 60px;
}
.days::before {
    height: 80%;
    top: 10%;
}
.days b {
    width: 18px;
    font-size: 1.2rem;
}
.days div {
    margin: 2px 0 0 0;
}
.days div p {
    font-size: 1.8rem;
}
.news-title {
    width: calc(100% - (60px + 15px));
    padding: 0 8px 0 8px;
}
.news-title p {
    font-size: 0.75rem;
}
.newsTP.EN .news-title p, .newsIDX.EN .news-title p {
    font-size: 0.8rem;
}
.news-item article {
    width: 15px;
}
.news-item article::before {
    font-size: 1.0rem;
}
.news-more span {
    margin: 15px 0 0 0;
    font-size: 1.4rem;
}
.news-more span::after {
    font-size: 1.0rem;
}

#news .news-item {
    height: 56px;
}

.bg-txt section {
    width: calc(1195px * 2);
    height: 120px;
    
    top: -60px;
    opacity: 1;
}
.bg-txt span {
    width: 1195px; /* 1145px + margin 50px*/
    height: 120px;
}

.ct-movie .swiper_MV {
    border-radius: 15px;
}
.ct-movie section::before {
    padding-bottom: 56.25%;
}
.ct-movie section article p {
    width: 40px;
    background: url("../img/play_hv.webp") no-repeat center center;
    background-size: contain;
}
.ct-movie figure {
	height: 25px;
    padding: 0 15px;
}
.ct-movie figure p {
    font-size: 0.8rem;
    color: #fff;
    text-shadow: 0px 0px 3px rgba(0,0,0,0.8);
}
.ct-movie figure p::before {
    background: #fff;
}
.ct-movie section:hover figure {
    mix-blend-mode: normal;
}
.ct-movie section span p, .ct-movie section span b {
    display: none;
}


.swiper-pagination.MVpgn {
    bottom: -25px;
}
.MVpgn > .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
    margin: 0 4px !important;
}
.MVpgn > .swiper-pagination-bullet-active {
    width: 60px;
}
.MV-prev { 
    left: 2px;
}
.MV-next {
    right: 2px;
}
.MV-prev, .MV-next {
    width: 30px;
    height: 30px;
    margin: -15px 0 0 0;
}
.MV-prev span::before, .MV-next span::before {
    font-size: 1.2rem;
}

.ct-intro::before {
    width: 60%;
}
.ct-intro section p {
    font-size: 0.8rem;
}
.ct-intro.EN section p {
    font-size: 0.9rem;
    line-height: 1.8em;
}

.ct-chara i {
    width: 45%;
    left: -4%;
    top: 0;
}

.cr-data section {
    display: flex;
    flex-wrap: wrap;
}
.bg-name span p {
    font-size: 22vw;
    line-height: 0.8em;
}
.chara-detail figure {
    width: 100%;
    margin: 0 0 8px 0;
    overflow: hidden;
}
.chara-detail figure::before {
    padding-bottom: 120%;
}
.chara-detail figure div span {
    filter: drop-shadow(25px 0px 0px rgba(0,0,0,0.1));
}
.cr-data {
    width: 100%;
    padding: 0;
}
.cr-name {
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
    margin: 20px 0 20px 0;
    
    order: 2;
}
.cr-name::before, .cr-name::after {
    height: 20px;
}
.cr-name h4 span {
    padding: 0.15em 0.2em 0 0.2em;
    font-size: 1.8rem;
}
.cr-data.EN .cr-name h4 span {
    padding: 0.25em 0.2em 0 0.2em;
}
.cr-name p {
    top: -55%;
    right: 0;
}
.cr-name p span {
    padding: 0 0.5em 0 0.2em;
    font-size: 0.7rem;
}
.cv-name {
    order: 2;
}
.cv-name h5 {
    font-size: 1.2rem;
}
.cr-data.EN .cv-name h5 {
    font-size: 1.2rem;
}
.cr-data article {
    margin: 15px 0 10px 0;
    order: 2;
}
.cr-data article p {
    font-size: 0.7rem;
}
.cr-txt {
    margin: 0 0 80px 0;
    order: 2;
}
.cr-txt p {
    font-size: 0.75rem;
}
.cr-other {
    margin: 0 0 5px 0;
    order: 1;
}

.swiper-slide-active .chara-detail.appr .cr-other span:nth-of-type(1) { animation-delay: 0.7s; }
.swiper-slide-active .chara-detail.appr .cr-other span:nth-of-type(2) { animation-delay: 0.8s; }
.swiper-slide-active .chara-detail.appr .cr-other span:nth-of-type(3) { animation-delay: 0.9s; }

.cmtM {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 0;
    right: -40px;
}
.cmtM span::before {
    font-size: 1.25rem;
}

.cr-thum {
    margin: 20px 0 0 0;
}
.crTHM {
    width: 70px;
    margin: 0 5px;
    border-radius: 10px;
}
.crTHM p {
     border-radius: 10px;
}
.crTHM b {
    border-radius: 10px;
}

.CR-prev, .CR-next {
    width: 80px;
    height: 30px;
    bottom: 30px;
}
.CR-prev { right: inherit; left: 0; }
.CR-next { right: 0; }

.CR-prev::before, .CR-next::after {
    font-size: 2.2rem;
}
.CR-prev p, .CR-next p {
    font-size: 0.8rem;
}

.staff-main {
    margin: 0 0 40px 0;
}
.staff-main h3 {
    margin: 0 0 10px 0;
}
.staff-main h3 span {
    font-size: 1.8rem;
}
.staff-main article {
    width: 1px;
}
.staff-main article::before {
    left: 0;
}

.staff-main section {
    width: calc(100% - 1px);
    padding: 20px 0 0 0;
}
.st {
    width: calc((100% / 2) - 15px);
    margin: 0 0 25px 15px;
}
.st.twice {
    width: calc((100% - 15px));
}
.st.blank {
    display: none;
}
.st h6 span {
    font-size: 0.75rem;
}
.st figure {
    height: 16px;
}
.st div {
    font-size: 1.0rem;
}
.staff-main.EN .st div {
    font-size: 1.12rem;
}
.ct-comic {
    width: 100%;
}
.ct-comic figure {
    width: 60%;
    margin: 0 20% 20px 20%;
}
.ct-comic figure span {
    border-radius: 12px;
}
.cm-wrap {
    width: 100%;
    padding: 0;
}
.cm-ttl {
    margin: 0 0 15px 0;
}
.cm-ttl h4 {
    margin: 0 0 0.5em 0;
    font-size: 0.6rem;
}
.cm-ttl h3 {
    font-size: 1.5rem;
}
.cm-txt article {
    width: 1px;
}
.cm-txt section {
    width: calc(100% - 1px);
    padding: 10px 0 10px 15px;
}
.cm-txt section p {
    margin: 0 0 2.5em 0;
    font-size: 0.75rem;
}
.cm-wrap.EN .cm-txt section p {
    font-size: 0.8rem;
}
.lnkBT span {
    height: 48px;
}
.lnkBT span > p {
    margin: 0 0 0 -15px;
    font-size: 0.85rem;
}
.lnkBT span > p::after {
    right: -15px;
}

footer {
    padding: 40px 0;
}
footer article {
    width: 50%;
    margin: 0 auto 30px auto;
}
footer p {
    font-size: 0.6rem;
}
.ft-bn {
    width: 100%;
    margin: 0 auto 20px auto;
}
.ft-bn div {
    width: 120px;
}

.mdW-cmt {
    padding: 25px;
}

.mdW-cmt figure {
    width: 100%;
    margin: 0 0 15px 0;
}
.mdW-cmt figure span {
    border-radius: 13px;
}
.mdW-cmt figure span::before {
    padding-bottom: 100%;
}
.mdW-cmt section {
    width: 100%;
    padding: 0;
}
.mdW-cmt section h4 {
    margin: 0 0 0.8em 0;
    padding: 0 0 0 12px;
    font-size: 0.8rem;
}
.mdW-cmt section h4::before {
    width: 3px;
    border-radius: 4px;
}
.mdW-cmt section h3 {
    font-size: 1.6rem;
}
.mdW-cmt section p {
    font-size: 0.8rem;
}
.mdW-cmt section article{
    height: 33px;
    margin: 10px 0 0 0;
}


}