html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
@font-face {
    font-family: "NotoSerifJP";
    src: url("fonts/NotoSerifJP-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "NotoSerifJP";
    src: url("fonts/NotoSerifJP-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "NotoSerifJP";
    src: url("fonts/NotoSerifJP-Black.woff2") format("woff2");
    font-weight: 900;
    font-display: swap;
}
@font-face {
    font-family: "NotoSansJP";
    src: url("fonts/NotoSansJP-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "NotoSansJP";
    src: url("fonts/NotoSansJP-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "NotoSansJP";
    src: url("fonts/NotoSansJP-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "NotoSansJP";
    src: url("fonts/NotoSansJP-Light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
html {
    line-height: 1;
    font-family: "NotoSerifJP", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 62.5%;
}
body{
    font-size: 1.5rem;
    line-height: 1;
    background-color: #000;
    color: #fff;
}
#page {
    width: 100%;
    height: 100%;
    max-width: 2000px;
    margin: 0 auto;
    box-shadow: 0px 0px 80px #dadada;
    overflow: hidden;
}
* {
    box-sizing: border-box;
}
img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
a{
    text-decoration: none;
    -webkit-transition: all .3s;
    transition: all .3s;
    display: inline-block;
}
ol, ul {
    list-style: none;
}
.wrap{
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}
.sp_none {
    display: none;
}
.pc_none {
    display: block;
}
.Content{
    position: relative;
}

/* Header */
.Header{
    background-color: #630E0F;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.Header_inner{
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    align-items: center;
}
.Header_logo{
    position: relative;
    width: 30vw;
    z-index: 10;
}

/* Nav */
.Nav_sp{
    position: fixed;
    inset: 0;
    padding: 5rem 0;
    background-color: #630E0F;
    text-align: center;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .4s ease, opacity .4s ease;
    z-index: 10;
}
body.nav-open .Nav_sp{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.Nav_sp .Nav_inner {
    padding-top: 8vw;
}
.Nav_sp .Nav_inner .Nav-item{
    width: 90%;
    margin: 0 auto;
    font-size: 4vw;
}
.Nav_sp .Nav_inner .Nav-item a{
    padding: 2rem 0;
    color: #fff;
}
.Nav_sp .Nav_inner .Nav-item+.Nav-item{
    position: relative;
}
.Nav_sp .Nav_inner .Nav-item+.Nav-item::before {
    content: '';
    display: block;
    width: 70%;
    height: .5px;
    background: #fff;
    opacity: .5;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.Hamburger_menu{
    position: relative;
    z-index: 10;
    width: 8vw;
}
.Hamburger_Toggle {
    position: relative;
    width: 8vw;
    height: 5vw;
}

.Hamburger_Toggle-border {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    transition: transform .3s ease, opacity .3s ease;
}
.Hamburger_Toggle-border:nth-child(1) {
    top: 0;
}

.Hamburger_Toggle-border:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.Hamburger_Toggle-border:nth-child(3) {
    bottom: 0;
}
.Hamburger_menu.open .Hamburger_Toggle-border:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.Hamburger_menu.open .Hamburger_Toggle-border:nth-child(2) {
    transform: translateX(100%) scaleX(0.5);
    opacity: 0;
}

.Hamburger_menu.open .Hamburger_Toggle-border:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}
.Breadcrumb-list {
    padding-top: 4vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 2.7vw;
    z-index: 2;
}
.Breadcrumb-list li{
    padding-right: 10px;
}
.Breadcrumb-list li:last-child{
    padding-right: 0;
    padding-left: 10px;
}
.Breadcrumb-list li + li{
    position: relative;
}
.Breadcrumb-list li + li::before {
    position: absolute;
    display: inline-block;
    content: "/";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.Breadcrumb-list li a{
    color: #fff;
}

.Container{
    padding-top: 14.6vw;
    position: relative;
}
.maruContainer{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.maru-item{
    position: absolute;
    top: -23vw;
    left: -28vw;
    width: 100vw;
}
.maru-item:nth-child(2) {
    display: none;
}
.maru-item:nth-child(3) {
    top: 7vw;
    left: 69vw;
    width: 40vw;
}
/* MV */
.MV {
    position: relative;
    background-image: url(../../../images/cpn/april2026/mv_sp.webp);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: center;
    padding-bottom: 127vw;
}
.MV_logo{
    position: absolute;
    width: 66%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-72%);
}

/* Section */
.Section {
    padding: 8vw 0;
}

/* Head */
.HeadSection{
    margin: 0 auto 10vw;
}

/* About */
.AboutSection{
    padding: 17vw 0 8vw;
    background-image: url(../../../images/cpn/april2026/sec01bg_sp.webp);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position-x: center;
    background-position-y: 0;
}
.AboutHead{
    width: 72vw;
}
.AboutSeciion_text {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 7%;
    width: 95%;
    margin: 0 auto;
}
.about-col:last-of-type{
    align-self: flex-end;
}
.AboutSeciion_img {
    width: 72vw;
    margin: 0 auto 8vw;
}


/* Btn */
.BtnContainer{
    text-align: center;
    margin-bottom: 3rem;
}
.Btn{
    width: 43vw;
}

/* Entry */
.EntryHead{
    width: 50vw;
}
.EntrySection{
    position: relative;
    background-image: url(../../../images/cpn/april2026/sec02bg_sp.webp);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.EntryContainer{
    position: relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align: flex-end;
    align-items: flex-end;
    margin-bottom: 4vh;
    overflow: visible;
}
.EntryContainer:first-child{
    padding-top: 11vw;
}
.EntryContainer:nth-child(even){
    -webkit-box-align: flex-start;
    align-items: flex-start;
}
.EntryContainer:last-child{
    margin-bottom: 0;
}
.EntryBgClip{
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    padding-bottom: 64%;
    transform: translate(-50%, 13%);
    z-index: -1;
    pointer-events: none;
    transform: translateX(-50%);
}
.EntryBg{
    position: absolute;
    display: inline-block;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%,13%);
    background-image: url(../../../images/cpn/april2026/entrychara_bg01_sp.webp);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    width: 100vw;
    padding-bottom: 64%;
}
.EntryBgMask{
    position: absolute;
    top: -5px;
    bottom: -35px;
    left: -5px;
    right: -5px;
    background:#000;
    will-change: transform;
    transform: translateX(0);
}
.EntryContainer:nth-child(2) .EntryBgClip{
    transform: translate(-50%, -15%);
}
.EntryContainer:nth-child(3) .EntryBgClip{
    transform: translate(-50%, 3%);
}
.EntryContainer:nth-child(4) .EntryBgClip{
    transform: translate(-50%, -23%);
}
.EntryContainer:nth-child(2) .EntryBg{
    background-image: url(../../../images/cpn/april2026/entrychara_bg02_sp.webp);
}
.EntryContainer:nth-child(3) .EntryBg{
    background-image: url(../../../images/cpn/april2026/entrychara_bg03_sp.webp);
}
.EntryContainer:nth-child(4) .EntryBg{
    background-image: url(../../../images/cpn/april2026/entrychara_bg04_sp.webp);
}
.EntryContainer-left,
.EntryContainer-right{
    position: relative;
}
.EntryContainer-left {
    width: 50vw;
}
.EntryContainer-right {
    width: 50vw;
}
.EntryContainer:nth-child(odd) .EntryContainer-left {
    margin-right: auto;
}
.EntryContainer:nth-child(odd) .EntryContainer-right {
    position: absolute;
    bottom: 0;
    right: 0;
}
.EntryContainer:nth-child(even) .EntryContainer-left {
    position: absolute;
    bottom: 0;
    left: 0;
}
.EntryContainer:nth-child(2) .EntryContainer-right {
    margin-left: 100%;
    padding-bottom: 25vw;
}
.EntryContainer:nth-child(4) .EntryContainer-right {
    margin-left: 100%;
    padding-bottom: 30vw;
}
.EntryContainer:first-child .EntryContainer-right {
    transform: translateX(-11%);
}
.EntryContainer:nth-child(2) .EntryContainer-left {
    bottom: -2px;
    transform: translateX(15%);
}
.EntryContainer:nth-child(3) .EntryContainer-right {
    width: 53vw;
    transform: translateX(-2%);
}
.EntryContainer:nth-child(4) .EntryContainer-left {
    width: 70vw;
    transform: translateX(-15%);
}
.EntryContainer.is-reveal::before{
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.EntryContainer_txt-img {
    width: 28vw;
    margin: 0 auto 1rem;
}
.EntryContainer_txt-name {
    text-align: center;
    margin-bottom: 1.5rem;
}
.storename{
    letter-spacing: .2rem;
    font-size: 9vw;
    font-weight: 700;
    margin-bottom: 1rem;
}
.storename.mid{
    font-size: 6.6vw;
}
.EntryContainer:nth-child(4) .EntryContainer-right .storename {
    letter-spacing: 0;
}
.EntryContainer:nth-child(3) .EntryContainer-left .storename{
    letter-spacing: 1px;
    margin-bottom: .5rem;
}
.EntryContainer_txt-name .small{
    letter-spacing: .1rem;
    font-size: 3.7vw;
    font-weight: 500;
    padding-bottom: 5px;
}
.EntryContainer_txt-name .exsmall{
    font-size: 3vw;
    font-weight: 500;
    padding-bottom: 5px;
}
.EntryContainer:nth-child(3) .EntryContainer_txt-name .exsmall {
    padding-bottom: 10px;
}
.EntryContainer_txt-name .nikukyu{
    width: 2vw;
    padding-bottom: 0.4vh;
    margin: 0 1vw;
}
.EntryContainer_txt-name .storename rt {
    font-size: 1vw;
}
.name{
    font-size: 2.7555vw;
}
.name .label{
    background-color: #000;
    padding: 1px 4px 2px 4px;
    margin-right: 3px;
}
.EntryContainer-btn{
    text-align: center;
}
.EntryContainer-btn a{
    width: 30vw;
}
.KumoContainer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2;
}
.kumo-item{
    position: absolute;
    top: 10%;
    left: 0;
    width: 40vw;
    will-change: transform;
}
.kumo-item:nth-child(2) {
    top: 28%;
}
.kumo-item:nth-child(3) {
    top: 41%;
}
.kumo-item:nth-child(4) {
    top: 56%;
}
.kumo-item:nth-child(5) {
    top: 69%;
}
.kumo-item:nth-child(6) {
    top: 88%;
}

/* Voice */
.VoiceHead{
    width: 44vw;
    margin: 0 auto 8vw;
}
.VoiceContainer{
    background-color: #fff;
    color: #000;
    border-radius: 5px;
    font-family: "NotoSansJP";
    overflow: hidden;
}
.VoiceContainer_cell{
    padding: 9vw 4vw 4vw;
}
.VoiceContainer_cell:nth-child(even){
    background-color: #f2f0e9;
}
.VoiceContainer_cell:first-child{
    padding: 11vw 3vw 4vw;
}
.VoiceContainer_cell:last-child{
    padding: 9vw 3vw 5vw;
}
.VoiceContainer_cell+.VoiceContainer_cell{
    position: relative;
}
.VoiceContainer_cell+.VoiceContainer_cell::before {
    position: absolute;
    content: '';
    display: block;
    width: 90%;
    border: 1px dotted #cecece;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.VoiceContainer_cell .storelabel{
    position: relative;
    display: inline-block;
    color: #fff;
    font-family: "NotoSerifJP";
    font-weight: 500;
    background-color: #4b5b75;
    padding: 1.2vw 2vw 1vw 15%;
    font-size: 3.3vw;
    margin-bottom: 2vw;
}
.VoiceContainer_cell:nth-child(2) .storelabel{
    background-color: #3c3b82;
}
.VoiceContainer_cell:nth-child(3) .storelabel{
    background-color: #7d7d7d;
}
.VoiceContainer_cell:nth-child(4) .storelabel{
    background-color: #995a5f;
}
.VoiceContainer_cell .storelabel::before{
    position: absolute;
    content: "";
    display: block;
    background-image: url(../../../images/cpn/april2026/entrycard_logo01.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    bottom: 0;
    left: 0;
    transform: translate(15%,-10%);
    width: 10vw;
    padding-bottom: 10vw;
}
.VoiceContainer_cell:nth-child(2) .storelabel::before{
    background-image: url(../../../images/cpn/april2026/entrycard_logo02.webp);
}
.VoiceContainer_cell:nth-child(3) .storelabel::before{
    background-image: url(../../../images/cpn/april2026/entrycard_logo03.webp);
}
.VoiceContainer_cell:nth-child(4) .storelabel::before{
    background-image: url(../../../images/cpn/april2026/entrycard_logo04.webp);
}
.VoiceContainer_cell .storelabel .small{
    font-size: 2.7vw;
    padding-left: 1vw;
}
.VoiceContainer_cell .storelabel.small{
    font-size: 2.7vw;
}
.VoiceContainer_cell .storelabel.small .nikukyu{
    width: 2vw;
    padding-bottom: 0.4vh;
    margin: 0 1vw;
}
.VoiceContainer_cell .namelabel{
    display: flex;
    align-items: center;
    margin-bottom: 2vw;
}
.VoiceContainer_cell .icon{
    width: 15vw;
    padding-right: 2%;
}
.VoiceContainer_cell .namelabel .name{
    font-family: "NotoSansJP";
    font-weight: 500;
    display: inline;
    font-size: 4vw;
    line-height: 1.2;
    color: #000;
}
.VoiceContainer_cell .text{
    font-family: "NotoSansJP";
    font-weight: 400;
    font-size: 3.5vw;
    line-height: 1.4;
    margin-bottom: 3vw;
}
.VoiceContainer_cell-btn{
    text-align: right;
}
.VoiceContainer_cell-btn a{
    text-align: center;
    color: #fff;
    font-family: "NotoSansJP";
    font-weight: 400;
    background-color: #630E0F;
    background-image: linear-gradient(0deg, #3e0e09, #630e0f);
    border-radius: 50px;
    width: 22vw;
    font-size: 3vw;
    padding: 1.2vw 0 1.3vw;
}

/* Campaign */
.CampaignHead{
    width: 56vw;
}
.CampaignContainer{
    position: relative;
    padding: 0 5vw 8vw;
    margin-bottom: 8vw;
}
.CampaignContainer::after{
    position: absolute;
    content: "";
    display: block;
    bottom: 0;
    left: 50%;
    width: 100%;
    padding-bottom: 53vw;
    background-color: #2E1011;
    transform: translate(-50%,0);
    z-index: -1;
    background-image: url(../../../images/cpn/april2026/campaignbg_sp.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.PageContents{
    position: relative;
    background-color: #000;
    background-image: linear-gradient(0deg, #000000, #222222);
    z-index: 1;
}

/* AboutPage */
.AboutPage {
    padding: 10vw 0 8vw;
}
.AboutPageHead {
    width: 72vw;
}
.AboutPage_Text {
    margin-bottom: 18vw;
}
.about-row {
    margin-bottom: 4vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.about-row:first-child {
    width: 39vw;
}
.about-row:nth-child(4) {
    width: 30vw;
}
.about-row:nth-child(10) {
    width: 58vw;
}
.about-row:nth-child(11){
    width: 48vw;
}
.about-row:nth-child(12) {
    width: 44vw;
}
.about-row:last-of-type{
    margin-bottom: 0;
    text-align: right;
}

.AboutPage .kumo-item {
    top: 1%;
}
.AboutPage .kumo-item:nth-child(2) {
    top: 15%;
}
.AboutPage .kumo-item:nth-child(3) {
    top: 30%;
}
.AboutPage .kumo-item:nth-child(4) {
    top: 50%;
}
.AboutPage .kumo-item:nth-child(5) {
    top: 68%;
}
.AboutPage .kumo-item:nth-child(6) {
    top: 80%;
}

.Howto{
    margin-bottom: 24vw;
}
.HowtoHead{
    margin: 0 auto 4vw;
}
.HowtoContainer{
    position: relative;
    text-align: center;
    padding-top: 14vw;
    margin-bottom: 8vw;
}
.HowtoContainer::before{
    position: absolute;
    content: "";
    display: block;
    background-image: url(../../../images/cpn/april2026/processtxt01_sp.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 0;
    left: 0;
    transform: translate(0);
    width: 25vw;
    padding-bottom: 12vw;
}
.HowtoContainer:nth-of-type(2)::before{
    background-image: url(../../../images/cpn/april2026/processtxt02_sp.webp);
}
.HowtoContainer:nth-of-type(3)::before{
    background-image: url(../../../images/cpn/april2026/processtxt03_sp.webp);
}
.HowtoContainer:last-of-type{
    margin-bottom: 0;
}
.HowtoContainer + .HowtoContainer{
    position: relative;
}
.HowtoContainer + .HowtoContainer::after {
    position: absolute;
    content: '';
    display: block;
    top: -5%;
    left: 50%;
    width: 4vw;
    height: 4vw;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: translateX(-50%) rotate(-45deg);
}
.HowtoContainer_img{
    padding-bottom: 4vw;
}
.HowtoContainer-txt{
    font-family: "NotoSansJP";
    font-weight: 400;
    font-size: 4vw;
}
.HowtoContainer:nth-of-type(3) .HowtoContainer-txt {
    margin-bottom: 1vw;
}
.HowtoContainer:nth-of-type(3) .HowtoContainer-txt:first-of-type {
    margin-bottom: 2vw;
}
.HowtoContainer-txt.strong {
    position: relative;
    font-weight: 500;
}
.HowtoContainer-txt .note {
    position: relative;
    font-size: 3vw;
    padding-left: 3.5vw;
    line-height: 1.3;
}
.HowtoContainer-txt .note::before {
    position: absolute;
    content: '※';
    display: block;
    left: 0;
    top: 0.1vw;
}
.HowtoContainer-txt.strong .note::after {
    position: absolute;
    content: "";
    display: inline;
    bottom: 0;
    left: 0;
    width: 100%;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(0%, #f6c457));
    background: linear-gradient(transparent 70%, #f6c457 0%);
}

/* Overview */
.Overview {
    font-family: "NotoSansJP";
    font-weight: 400;
    text-align: center;
    position: relative;
    border-left: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.5);
    padding: 14vw 0 4vw;
    margin-top: 6vw;
}
.Overview::before,.Overview::after{
    position: absolute;
    content: "";
    display: block;
    background-color: rgba(255,255,255,0.5);
    height: 1px;
    width: 34vw;
    top: 0;
    transform: translateY(-50%);
}
.Overview::before{
    left: 0;
}
.Overview::after{
    right: 0;
}
.Overview_icon {
    position: absolute;
    width: 25vw;
    left: 3.5vw;
    top: -12vw;
    animation: sway 3s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes sway {
    0%   { transform: rotate(-3deg); }
    50%  { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
.OverviewHead{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    padding: 0 3vw;
    font-size: 4vw;
    margin-bottom: 10vw;
    z-index: -2;
}
.Overview_inner {
    padding: 0 4vw 0;
}
.OverviewContainer {
    line-height: 1.5;
    margin-bottom: 4vw;
}
.OverviewContainer:last-of-type {
    margin-bottom: 8vw;
}
.Overview_head{
    font-size: 4.3vw;
    margin-bottom: 1vw;
}
.Overview_txt{
    font-size: 4vw;
}
.Overview_list li{
    position: relative;
    padding-left: 3vw;
    font-size: 4vw;
    margin-bottom: 2vw;
}
.Overview_list li::before{
    position: absolute;
    display: block;
    content: "";
    background-color: #fff;
    padding: 1vw;
    left: 0;
    top: 2vw;
    transform: rotate(45deg);
}
.Overview_txt .note{
    position: relative;
    padding-left: 3.4vw;
    font-size: 3vw;
    display: inline-block;
}
.Overview_txt .note::after{
    position: absolute;
    content: '※';
    display: block;
    left: 0;
    top: 0.1vw;
}

/* CharaPage */
.CharaPage_number {
    width: 33vw;
    margin-bottom: 4vw;
}
.CharaContainer {
    position: relative;
    margin-bottom: 16vw;
}
.CharaContainer .linkbox {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    transform: translate(-50%, -50%);
}
.CharaContainer .linkbox a {
    display: block;
    width: 4vw;
    height: 4vw;
    border-left: 1.8px solid #fff;
    border-bottom: 1.8px solid #fff;
    transform: rotate(45deg);
}
.CharaContainer .linkbox .arrow-right {
    transform: rotate(225deg);
}
.CharaPage .linkbox-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 8vw auto 3vw;
}
.CharaPage .linkbox-bottom a {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 3.5vw;
    width: fit-content;
}
.CharaPage .linkbox-bottom .arrow-left {
    text-align: end;
    padding-left: 6vw;
}
.CharaPage .linkbox-bottom .arrow-right {
    padding-right: 6vw;
}
.CharaPage .linkbox-bottom .arrow-left::before {
    position: absolute;
    content: "";
    display: block;
    left: 0;
    top: 50%;
    width: 3vw;
    height: 3vw;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: translateY(-40%) rotate(45deg);
}
.CharaPage .linkbox-bottom .arrow-right::after {
    position: absolute;
    content: "";
    display: block;
    right: 0;
    top: 50%;
    width: 3vw;
    height: 3vw;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: translateY(-40%) rotate(225deg);
}
.CharaContainer_name {
    display: flex;
}
.CharaContainer_name .logo {
    width: 20vw;
    margin: 0 auto 2vw;
}
.CharaContainer_name-img{
    width: 23%;
}
.CharaPage.villains .CharaContainer_name-img{
    width: 36%;
}
.CharaPage.vampire .CharaContainer_name-img{
    width: 28%;
}
.CharaPage.prince .CharaContainer_name-img{
    width: 33%;
}
.CharaContainer_name-img .storename {
    font-size: 4.5vw;
    text-align: center;
}
.CharaPage.vampire .CharaContainer_name-img .storename {
    line-height: 1.4;
}
.CharaPage.prince .CharaContainer_name-img .storename {
    font-size: 4vw;
    letter-spacing: .5px;
}
.CharaContainer_name-img .storename .small {
    display: inline-block;
    font-size: 3vw;
    margin-bottom: 1.8vw;
    letter-spacing: .9px;
}
.CharaContainer_name-img .storename .small .nikukyu {
    width: 2.8vw;
    margin: 0 1.3vw 1vw 0.7vw;
}
.CharaPage.vampire .CharaContainer_name-img .storename .small {
    font-size: 2.8vw;
}
.CharaContainer_name-img .storename rt {
    font-size: 1vw;
}
.CharaContainer_name .ramenname {
    letter-spacing: .9px;
    font-weight: 700;
    line-height: 1.2;
}
.CharaContainer_bottom {
    display: flex;
    position: relative;
    align-items: flex-end;
    margin-top: -13vw;
}
.CharaPage.sengoku .CharaContainer_bottom {
    margin-top: -5vw;
}
.CharaPage.vampire .CharaContainer_bottom {
    margin-top: -18vw;
}
.CharaPage .CharaContainer_bottom .ramen {
    margin-left: 5%;
    padding-bottom: 7vw;
    position: relative;
}
.CharaPage .CharaContainer_bottom .ramen .yuge img{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate3d(-50%, 0, 0) scale(0.92);
    transform-origin: 50% 100%;
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
    animation: yugeFloatSmooth 4s linear infinite;
}
.CharaPage .CharaContainer_bottom .ramen .yuge img:nth-child(2) {
    animation-delay: 5s;
    transform: translate3d(-50%, 0, 0) scale(0.90);
}

@keyframes yugeFloatSmooth{
    0%{
        opacity: 0;
        transform: translate3d(-50%, 0, 0) scale(0.92);
    }
    10%{
        opacity: 0.2;
        transform: translate3d(calc(-50% - 2px), -10%, 0) scale(0.9);
    }
    25%{
        opacity: 0.3;
        transform: translate3d(calc(-50% - 6px), -30%, 0) scale(1.00);
    }
    45%{
        opacity: 0.5;
        transform: translate3d(calc(-50% - 8px), -45%, 0) scale(1.04);
    }
    65%{
        opacity: 0.3;
        transform: translate3d(calc(-50% - 4px), -65%, 0) scale(1.07);
    }
    100%{
        opacity: 0;
        transform: translate3d(calc(-50% + 8px), -100%, 0) scale(1.10);
    }
}
.CharaPage .CharaContainer_name .ramenname {
    font-size: 5.4vw;
    padding-top: 4.5vw;
}
.CharaPage.sengoku .CharaContainer_name .ramenname {
    font-size: 5.4vw;
    padding-top: 5.5vw;
    padding-left: 5%;
}
.CharaPage.sengoku .CharaContainer_name .ramenname .small {
    font-size: 4.5vw;
}
.CharaPage.vampire .CharaContainer_name .ramenname .small {
    font-size: 2.3vw;
}
.CharaPage .CharaContainer_bottom .character{
    margin-right: 5%;
}
.CharaPage .obi{
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url(../../../images/cpn/april2026/charaobi_sp.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    width: 100%;
    height: 46vw;
    z-index: -1;
    overflow: hidden;
}
.CharaPage.villains .obi{
    background-color: #4B5B75;
}
.CharaPage.sengoku .obi{
    background-color: #3C3B82;
}
.CharaPage.vampire .obi{
    background-color: #7D7D7D;
}
.CharaPage.prince .obi{
    background-color: #995A5F;
}
.CharaPage .obi .obi-item {
    position: absolute;
}
.CharaPage .obi .obi-item:first-child {
    left: -21vw;
    bottom: 14vw;
    width: 90vw;
}
.CharaPage .obi .obi-item:last-child {
    right: 2vw;
    width: 48vw;
    bottom: 4vw;
}
/* TextContainer */
.TextContainer {
    margin-bottom: 10vw;
}
.TextContainer_head {
    position: relative;
    text-align: center;
    padding: 5.8vw 0 3.6vw;
    font-size: 5vw;
    margin-bottom: 5vw;
}
.TextContainer_head::before {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../../../images/cpn/april2026/linetop_sp.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 0;
    left: 0;
    transform: translate(0);
    width: 100%;
    padding-bottom: 4.3vw;
}
.TextContainer_head::after {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../../../images/cpn/april2026/linebottom_sp.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    bottom: 0;
    left: 0;
    transform: translate(0);
    width: 100%;
    padding-bottom: 1vw;
}
.TextContainer_img {
    margin: 0 auto 4vw;
    width: 40vw;
}
.TextContainer_box:first-child {
    margin-bottom: 10vw;
}
.TextContainer_box:nth-child(2) .TextContainer_img {
    width: 60vw;
}
.TextContainer_box .name {
    font-size: 5vw;
    margin-bottom: 3vw;
    font-weight: 700;
}
.TextContainer_box .text {
    font-size: 3.8vw;
    letter-spacing: 1px;
    line-height: 1.6;
    font-family: "NotoSansJP";
    font-weight: 300;
}
.TextContainer_box .text .big {
    font-size: 6vw;
}
.TextContainer_box .text .bold {
    font-family: "NotoSansJP";
    font-size: 4.5vw;
    font-weight: 500;
}
.VoteBtn {
    position: relative;
    width: 50vw;
    margin: 0 auto 10vw;
}
.VoteBtn::before {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../../../images/cpn/april2026/vote_kumo.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 50%;
    left: -33%;
    width: 14vw;
    padding-bottom: 7vw;
    animation: slideFade-reverse 3s cubic-bezier(0.5, 0, 0, 1) infinite;
}
.VoteBtn::after {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../../../images/cpn/april2026/vote_kumo.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 50%;
    right: -33%;
    width: 14vw;
    padding-bottom: 7vw;
    animation: slideFade 3s cubic-bezier(0.5, 0, 0, 1) infinite;
}

@keyframes slideFade {
    0% {
    opacity: 0;
    transform: translateX(-30px);
    }
    30% {
    opacity: 1;
    transform: translateX(0);
    }
    90% {
    opacity: 0;
    transform: translateX(30px);
    }
    100% {
    opacity: 0;
    transform: translateX(60px);
    }
}
@keyframes slideFade-reverse {
    0% {
    opacity: 0;
    transform: translateX(30px) rotateY(180deg);
    }
    30% {
    opacity: 1;
    transform: translateX(0) rotateY(180deg);
    }
    90% {
    opacity: 0;
    transform: translateX(-30px) rotateY(180deg);
    }
    100% {
    opacity: 0;
    transform: translateX(-60px) rotateY(180deg);
    }
}
.CharaVoice {
    padding-top: 6vw;
    margin-bottom: 10vw;
}
.CharaVoice .VoiceContainer .VoiceContainer_cell {
    padding: 4vw;
}
.CharaVoice .VoiceContainer .VoiceContainer_cell:first-child{
    padding: 5vw 3vw 4vw;
}
.CharaVoice .VoiceContainer .VoiceContainer_cell:nth-child(even) {
    padding: 4vw 3vw 4vw 12vw;
}
.CharaVoice .VoiceContainer .VoiceContainer_cell .namelabel.owner {
    position: relative;
}
.CharaVoice .VoiceContainer .VoiceContainer_cell .namelabel.owner::before {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../../../images/cpn/april2026/voicearrow.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 7vw;
    padding-bottom: 6vw;
    left: -9vw;
    top: 2vw;
}
.CharaVoice .VoiceContainer_cell .namelabel .name .small{
    font-size: 3.2vw;
}
.CharaVoice .VoiceContainer_cell .namelabel .name .small .nikukyu{
    width: 2.8vw;
    margin: 0 1vw 1vw 1vw;
    filter: brightness(0);
}
.CharaPage .kumo-item{
    top: 1%;
}
.CharaPage .kumo-item:nth-child(2) {
    top: 7%;
}
.CharaPage .kumo-item:nth-child(3) {
    top: 20%;
}
.CharaPage .kumo-item:nth-child(4) {
    top: 39%;
}
.CharaPage .kumo-item:nth-child(5) {
    top: 55%;
}
.CharaPage .kumo-item:nth-child(6) {
    top: 70%;
}

/* EntryCard */
.EntryCard_inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    row-gap: 10vw;
}
.EntryCardContainer{
    width: 47%;
}
.EntryCardContainer .storename{
    text-align: center;
    font-size: 6vw;
    margin-bottom: 3vw;
}
.EntryCardContainer .storename a{
    color: #fff;
}
.EntryCardContainer:nth-child(2) .storename {
    padding-top: 5vw;
}
.EntryCardContainer:nth-child(4) .storename {
    padding-top: 3vw;
}
.EntryCardContainer .storename.middle{
    font-size: 5vw;
}
.EntryCardContainer .storename .small{
    font-size: 3vw;
    display: inline-block;
    margin-bottom: 2vw;
}
.EntryCardContainer .storename .exsmall{
    display: inline-block;
    font-size: 2.5vw;
    letter-spacing: 0.9px;
    margin-bottom: 1vw;
}
.EntryCardContainer:nth-child(3) .storename .exsmall{
    margin-bottom: 0;
    margin-top: 1.2vw;
    line-height: 1.2;
}
.EntryCardContainer .storename rt {
    font-size: 1vw;
}
.EntryCardContainer .storename img{
    width: 2vw;
    margin: 0 0.9vw 0.7vw 0.6vw;
}
.EntryCardContainer:nth-child(4) .storename.middle {
    letter-spacing: .9px;
}
.EntryCardContainer .image{
    margin-bottom: 6vw;
}
.EntryCardContainer .btnbox{
    position: relative;
    width: 75%;
    margin: 0 auto;
}
.EntryCardContainer .btnbox::before{
    position: absolute;
    content: "";
    display: block;
    background-image: url(../../../images/cpn/april2026/entrycard_logo01.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 0;
    left: 0;
    transform: translate(-44%,-47%);
    width: 14vw;
    padding-bottom: 14vw;
}
.EntryCardContainer:nth-child(2) .btnbox::before{
    background-image: url(../../../images/cpn/april2026/entrycard_logo02.webp);
}
.EntryCardContainer:nth-child(3) .btnbox::before{
    background-image: url(../../../images/cpn/april2026/entrycard_logo03.webp);
}
.EntryCardContainer:nth-child(4) .btnbox::before{
    background-image: url(../../../images/cpn/april2026/entrycard_logo04.webp);
}
.EntryCard_inner,.EntryCardContainer {
    perspective: 900px;
}
.card-reveal {
    transform-style: preserve-3d;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.TOPBtnBox {
    text-align: center;
    padding: 8vw 0;
    width: 30vw;
    margin: 0 auto;
}

/* Footer */
.HeadFooter {
    position: relative;
    text-align: center;
    font-size: 7.2vw;
    padding-bottom: 4.5vw;
    margin-bottom: 8vw;
}
.HeadFooter::after{
    position: absolute;
    content: "";
    display: block;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    background-image: url(../../../images/cpn/april2026/headfooter.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 30%;
    padding-bottom: 1.3vw;
}
.Footer_inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8vw;
    padding-bottom: 8vw;
}
.Footer_top,.Footer_bottom{
    display: flex;
    column-gap: 8vw;
    align-items: center;
}
.Footer_bottom{
    display: flex;
    column-gap: 8vw;
    align-items: center;
}
.logo_official{
    min-width: 100px;
    width: 30vw;
    margin-right: 8vw;
}
.logo_ifc{
    width: 10vw;
}
.logo_title {
    width: 20%;
}
.Footer small{
    display: block;
    background-color: #630E0F;
    font-size: 1rem;
    padding: 1vw 0 1.2vw;
    text-align: center;
}


@media screen and (min-width: 751px) {
.pc_none {
    display: none;
}
.sp_none {
    display: block;
}
.wrap {
    width: 1200px;
}
.Header_inner {
    padding: 0;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: center;
}
.Header_logo {
    width: 11%;
}
.Hamburger_menu {
    display: none;
}
.Nav.Nav_sp {
    display: none;
}
.Nav.Nav_pc {
    -webkit-box-flex: 1;
    flex-grow: 1;
}
.Nav.Nav_pc .Nav_inner {
    display: flex;
    width: 65%;
    margin-left: auto;
}
.Nav.Nav_pc .Nav-item {
    font-size: 1.4rem;
    -webkit-box-flex: 1;
    flex-grow: 1;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.Nav.Nav_pc .Nav-item:hover {
    background-color: #380303;
}
.Nav.Nav_pc .Nav-item a {
    color: #fff;
    padding: 2.4rem 0;
}
.Nav.Nav_pc .Nav-item + .Nav-item {
    position: relative;
}
.Nav.Nav_pc .Nav-item + .Nav-item::after {
    content: '';
    display: block;
    width: 1px;
    height: 1em;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.Container {
    padding-top: 0;
    margin-top: 6.1rem;
}
.Section {
    padding: 22rem 0;
}
.Breadcrumb-list {
    padding-top: 1.5rem;
    font-size: 1rem;
}
.HeadSection {
    margin: 0 auto 8rem;
    text-align: center;
}
.MV {
    background-image: url(../../../images/cpn/april2026/mv_pc.webp);
    padding-bottom: 51%;
}
.MV_logo {
    width: 45%;
    transform: translate(-50%, -50%);
}
.AboutSection {
    padding: 20rem 0 8rem;
    background-image: url(../../../images/cpn/april2026/sec01bg.webp);
}
.AboutHead {
    width: initial;
    margin: initial;
    align-self: flex-start;
}
.AboutSeciion_text {
    width: 90%;
}
.about-col:last-of-type {
    align-self: inherit;
}
.AboutSeciion_text .about-col:last-child {
    align-self: flex-end;
}
.AboutSeciion_img {
    width: 71%;
    max-width: 850px;
}
.Btn {
    width: 100%;
}
.EntrySection {
    background-image: url(../../../images/cpn/april2026/sec02bg.webp);
}
.EntryHead {
    width: 100%;
    margin: 0 auto 13rem;
}


.EntryContainer_chara {
    display: flex;
}

.EntryContainer:nth-child(2) .EntryContainer-right,.EntryContainer:nth-child(4) .EntryContainer-right {
    padding-bottom: 0;
}

/* ===== Entry：全体 ===== */
.EntryContents{
    width: 100%;
    max-width: 2000px; /* #pageに合わせるなら任意 */
    margin: 0 auto;
}

/* 画面端→wrap端 になる幅（交互に左右寄せ） */
.EntrySection .EntryContainer{
    position: relative;
    width: calc(50vw + 600px);           /* 画面端→中央(=wrap半分) */
    margin-bottom: 15rem;                  /* 帯同士の間隔 */
    display: flex;
    overflow: visible;
}
.EntryContainer:nth-child(odd){
    margin-left: calc((100vw - 1200px)/2);
    margin-right: auto;
    padding: 2rem 0 2rem 6rem;
}
.EntryContainer:nth-child(even){
    margin-left: auto;
    margin-right: calc((100vw - 1200px)/2);
    padding: 2rem 6rem 2rem 0;
    align-items: initial;
    justify-content: flex-end;
}
.EntrySection .EntryContainer::before {
    position: absolute;
    content: "";
    display: block;
    top: -5rem;
    background-image: url(../../../images/cpn/april2026/entrynumber01.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 14%;
    padding-bottom: 2%;
}
.EntryContainer:first-child {
    padding: 2rem 0 2rem 6rem;
}
.EntryContainer:last-child {
    margin-bottom: 0;
}
.EntryContainer:nth-child(1)::before {
    left: 0;
}
.EntryContainer:nth-child(2)::before {
    right: 0;
    background-image: url(../../../images/cpn/april2026/entrynumber02.webp);
}
.EntryContainer:nth-child(3)::before {
    left: 0;
    background-image: url(../../../images/cpn/april2026/entrynumber03.webp);
}
.EntryContainer:nth-child(4)::before {
    right: 0;
    background-image: url(../../../images/cpn/april2026/entrynumber04.webp);
}
.EntryContainer_inner{
    width: 1200px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.EntryContainer:first-child .EntryContainer-right,.EntryContainer:nth-child(3) .EntryContainer-right,.EntryContainer:nth-child(2) .EntryContainer-left,.EntryContainer:nth-child(4) .EntryContainer-left {
    transform: initial;
    bottom: 0;
}

/* ===== 帯背景（SPのEntryBgをPC横帯として使用）===== */
.EntryBgClip{
    position: absolute;
    inset: 0;
    left: 0;               /* PCは左基準に */
    transform: none;        /* SPのtranslate無効化 */
    width: 100%;
    padding-bottom: 0;
    z-index: 0;
    padding-bottom: 0;
    pointer-events: none;   /* ★ クリック阻害しない */

}
.EntryContainer:nth-child(2) .EntryBgClip,.EntryContainer:nth-child(3) .EntryBgClip,.EntryContainer:nth-child(4) .EntryBgClip {
    transform: none;
}
.EntryBg{
    position:absolute;
    inset: 0;
    left: 0;
    bottom: auto;
    transform: none;
    width: 100%;
    height: 100%;
    background-image: url(../../../images/cpn/april2026/topobi_bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    padding-bottom: 0;
}
/* 帯の色を既存の nth-child で色分け（今のままOK） */
.EntryContainer:nth-child(1) .EntryBg {
    background-color:#4B5B75;
}
.EntryContainer:nth-child(2) .EntryBg {
    background-image: url(../../../images/cpn/april2026/topobi_bg.webp);
    background-color:#3C3B82;
}
.EntryContainer:nth-child(3) .EntryBg {
    background-image: url(../../../images/cpn/april2026/topobi_bg.webp);
    background-color:#7D7D7D;
}
.EntryContainer:nth-child(4) .EntryBg {
    background-image: url(../../../images/cpn/april2026/topobi_bg.webp);
    background-color:#995A5F;
}

/* マスク（既存EntryBgMaskを使う） */
.EntryBgMask{
    position:absolute;
    inset:-2px;
    background:#000;
    pointer-events:none;   /* ★ クリック阻害しない */
    will-change: transform;
}

  /* ===== 中身のレイヤー ===== */
.EntrySection .EntryContainer-left,
.EntrySection .EntryContainer-right,.EntryContainer:nth-child(even) .EntryContainer-left,.EntryContainer:nth-child(odd) .EntryContainer-right {
    position: relative;
}
.EntryContainer:nth-child(odd) .EntryContainer-left {
    margin-right: 0;
    width: auto;
}
.EntryContainer:nth-child(even) .EntryContainer-right {
    margin-left: 0;
    padding-bottom: 0;
    width: auto;
}

  /* ===== テキスト側（カード感） ===== */
.EntryContainer_txt{
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr; /* 左は中身幅、右は残り */
    grid-template-rows: auto auto;   /* 1段目：ロゴ+名前、2段目：ボタン */
    column-gap: 14px;
    align-items: center;
    width: fit-content; /* 中身幅にしたい場合 */
    z-index: 1;
}
.EntryContainer_txt::before {
    position: absolute;
    content: "";
    display: block;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../../../images/cpn/april2026/obimaru.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 360px;
    padding-bottom: 360px;
    z-index: -1;
}
.EntryContainer_txt-img {
    width: auto;
    margin: 0;
}
.EntryContainer_txt-name{
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    margin: 0;
    padding-left: 0;
    align-self: center;
}
.storename,.storename.mid {
    font-size: 5.8rem;
    margin-bottom: 2rem;
}
.EntryContainer:last-child .storename.mid {
    font-size: 5.1rem;
}
.EntryContainer_txt-name .small {
    font-size: 2.6rem;
    padding-bottom: 1rem;
}
.EntryContainer_txt-name .exsmall {
    font-size: 2.2rem;
    padding-bottom: 1rem;
}
.EntryContainer_txt-name .nikukyu {
    width: 4%;
    padding-bottom: 0;
    margin: 0 0.9rem 0.4rem;
}

.EntryContainer_txt-name .name {
    font-size: 2rem;
}
.EntryContainer_txt-name .storename rt {
    font-size: 1rem;
}
.EntryContainer:nth-child(3) .EntryContainer-left .storename {
    margin-bottom: 1rem;
}
.EntryContainer:nth-child(3) .EntryContainer_txt-name .exsmall {
    padding-bottom: 2rem;
}
.EntryContainer-btn {
    position: relative;
    margin-top: 1rem;
    padding-top: 1rem;
    grid-column: 1 / -1;
    grid-row: 2;
}
.EntryContainer-btn a {
    width: auto;
}
.EntryContainer-btn::after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background-color: rgba(255,255,255,0.5);
    top: 0;
    left: 0;
}
.EntryContainer_chara{
    display:flex;
}


.EntryContainer:nth-child(odd) .EntryContainer-right,.EntryContainer:nth-child(even) .EntryContainer-left,.EntryContainer:nth-child(4) .EntryContainer-left {
    width: 50%;
}
.EntryContainer_chara-ramen{
    position:absolute;
    bottom: 0;
}
.EntryContainer_chara-img {
    position:absolute;
    bottom: -2rem;
    z-index: 1;
}

.EntryContainer:nth-child(odd) .EntryContainer_chara .EntryContainer_chara-img {
    right: 0;
}
.EntryContainer:nth-child(2) .EntryContainer_chara .EntryContainer_chara-img {
    left: 0%;
}
.EntryContainer:nth-child(4) .EntryContainer_chara .EntryContainer_chara-img {
    left: 0;
}
.EntryContainer:nth-child(odd) .EntryContainer_chara .EntryContainer_chara-ramen {
    left: -10%;
}
.EntryContainer:nth-child(2) .EntryContainer_chara .EntryContainer_chara-ramen {
    right: -22%;
}
.EntryContainer:nth-child(4) .EntryContainer_chara .EntryContainer_chara-ramen {
    right: -5%;
    bottom: 37%;
}
.kumo-item{
    width: 13%;
    top: 6%;
}
.kumo-item:nth-child(2) {
    top: 31%;
}
.kumo-item:nth-child(3) {
    top: 50%;
}
.kumo-item:nth-child(4) {
    top: 69%;
}
.kumo-item:nth-child(5) {
    top: 80%;
}
.kumo-item:nth-child(6) {
    top: 92%;
}

.VoiceSection {
    padding: 5rem 0 10rem;
}
.VoiceContainer_cell {
    padding: 5rem 5rem;
}
.VoiceContainer_cell:first-child {
    padding: 6rem 5rem 2rem;
}
.VoiceContainer_cell:last-child{
    padding: 5rem 5rem 6rem;
}
.VoiceContainer_cell .text {
    font-size: 1.7rem;
    margin-bottom: 2rem;
}
.VoiceContainer_cell .namelabel {
    margin-bottom: 1rem;
}
.VoiceContainer_cell .storelabel::before,.VoiceContainer_cell:nth-child(2) .storelabel::before,.VoiceContainer_cell:nth-child(3) .storelabel::before,.VoiceContainer_cell:nth-child(4) .storelabel::before {
    width: 60px;
    padding-bottom: 60px;
}
.VoiceContainer_cell .namelabel .name {
    font-size: 2.2rem;
}
.VoiceContainer_cell .storelabel {
    padding: 0.6rem 2rem 0.6rem 8rem;
    font-size: 1.7rem;
    margin-bottom: 1rem;
}
.VoiceContainer_cell .storelabel.small {
    font-size: 1.7rem;
}
.VoiceContainer_cell .storelabel .small {
    font-size: 1.4rem;
    padding-left: 0.4rem;
}
.VoiceContainer_cell .storelabel.small .nikukyu {
    width: 16px;
    padding-bottom: 0.4rem;
    margin: 0 0.8rem;
}

.VoiceContainer_cell .icon {
    width: 80px;
    padding-right: 0;
    margin-right: 2rem;
}

.VoiceContainer_cell-btn a{
    width: 10%;
    font-size: 1.3rem;
    padding: 0.7rem 0 0.7rem;
}

.AboutPage {
    padding: 10rem 0 2rem;
}
.AboutPageHead {
    width: auto;
}
.about-row {
    margin-bottom: 4.5rem;
}
.about-row:first-child,.about-row:nth-child(4),.about-row:nth-child(10) {
    width: auto;
}
.about-row:nth-child(10) {
    margin-right: 0;
    margin-bottom: 0;
    text-align: right;
}
.AboutPage_Text {
    margin-bottom: 12rem;
}
.Howto {
    margin-bottom: 10rem;
}
.Howto_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.HowtoContainer {
    width: 30%;
    padding-top: 5.5rem;
    margin-bottom: 0;
}
.HowtoContainer::before {
    width: 26%;
    padding-bottom: 13%;
}
.HowtoContainer + .HowtoContainer::after {
    top: 37%;
    left: -11%;
    width: 1.5rem;
    height: 1.5rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(0) rotate(-135deg);
}
.HowtoContainer_img {
    padding-bottom: 3rem;
}
.HowtoContainer-txt {
    line-height: 1.6;
    font-weight: 300;
    font-size: 1.8rem;
}
.HowtoContainer:nth-of-type(3) .HowtoContainer-txt:first-of-type {
    margin-bottom: 1rem;
}
.HowtoContainer:nth-of-type(3) .HowtoContainer-txt.note {
    line-height: 1;
    margin-bottom: 0.5rem;
}
.HowtoContainer:nth-of-type(3) .HowtoContainer-txt.note:nth-child(2) {
    margin-bottom: 0;
}
.HowtoContainer-txt .note {
    line-height: 1.2;
    font-size: 1.4rem;
    padding-left: 1.6rem;
}
.HowtoContainer-txt.strong {
    font-weight: 300;
}
.Overview {
    border-left: 1px solid rgba(255, 255, 255, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    border-right: 1px solid rgba(255, 255, 255, 1);
    padding: 3rem 0 14rem;
    margin-top: 6rem;
}
.Overview::before, .Overview::after {
    background-color: rgba(255, 255, 255, 1);
    width: 42%;
}
.Overview_inner {
    padding: 4rem 5rem 0;
}
.Overview_icon {
    width: 10%;
    left: 25%;
    top: -8%;
}
.OverviewHead {
    background: none;
    font-size: 2.6rem;
    padding: 0 2rem;
}
.Overview_head {
    font-size: 2rem;
    margin-bottom: 1.4rem;
}
.Overview_txt {
    font-size: 1.7rem;
}
.Overview_txt .note {
    padding-left: 1.8rem;
    font-size: 1.5rem;
}
.Overview_txt .note::after {
    top: 0;
}
.Overview_list li {
    display: inline-block;
    font-size: 1.7rem;
    margin-bottom: 1rem;
    padding-left: 2.5rem;
}
.Overview_list li::before {
    padding: 0.6rem;
    top: 6px;
}
.OverviewContainer {
    margin-bottom: 5rem;
}
.OverviewContainer:last-of-type {
    margin-bottom: 0;
}
.Overview_img {
    position: relative;
}
.Overview_img-inner {
    display: flex;
    position: absolute;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    bottom: -11rem;
    left: 0;
}
.EntryCard {
    padding: 12rem 0 0;
}
.EntryCard .EntryHead {
    margin: 0 auto 10rem;
}
.EntryCard_inner {
    align-items: flex-start;
    row-gap: 3%;
}
.EntryCardContainer {
    width: 24%;
}
.EntryCardContainer .image {
    margin-bottom: 1rem;
}
.storenamebox {
    margin-bottom: 2rem;
}
.storenamebox a {
    width: 100%;
}
.storenamebox_inner {
    display: flex;
    align-items: center;
    justify-content: center;
}
.storenamebox_inner .storelogo {
    width: 30%;
    margin-right: 1rem;
}
.EntryCardContainer .storename {
    text-align: start;
    color: #fff;
    font-size: 2.8rem;
    margin-bottom: 0;
}
.EntryCardContainer:nth-child(2) .storename,.EntryCardContainer:nth-child(4) .storename.middle {
    padding-top: 0;
}
.EntryCardContainer .storename.middle {
    font-size: 2.4rem;
}
.EntryCardContainer .storename .small {
    font-size: 1.4rem;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}
.EntryCardContainer .storename .exsmall {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.EntryCardContainer:nth-child(3) .storename .exsmall {
    margin-top: 0.7rem;
    line-height: 1.3;
}
.EntryCardContainer .storename rt {
    font-size: 0.6rem;
}
.EntryCardContainer .storename img {
    width: 0.8rem;
    margin: 0 0.3rem 0.2rem 0.3rem;
}
.EntryCardContainer .btnbox::before {
    display: none;
}
.EntryCardContainer .btnbox {
    width: 60%;
}
.EntryCardContainer .image a {
    transition: all .5s;
}
.EntryCardContainer .image a:hover {
    transform: translate(0px, -20px);
}
.TOPBtnBox {
    padding: 14rem 0 2rem;
    width: auto;
}
.maru-item {
    top: -18%;
    left: -18%;
    width: 60%;
}
.maru-item:nth-child(2) {
    display: block;
    top: 6%;
    left: 80%;
    width: 27%;
}
.maru-item:nth-child(3) {
    top: -2%;
    left: 73%;
    width: 12%;
}
.AboutPage .kumo-item{
    width: 13%;
    top: 2%;
}
.AboutPage .kumo-item:nth-child(2) {
    top: 23%;
}
.AboutPage .kumo-item:nth-child(3) {
    top: 35%;
}
.AboutPage .kumo-item:nth-child(4) {
    top: 45%;
}
.AboutPage .kumo-item:nth-child(5) {
    top: 73%;
}
.AboutPage .kumo-item:nth-child(6) {
    top: 88%;
}

.Section.CharaPage {
    padding: 6rem 0;
}
.CharaContainer {
    margin-bottom: 10rem;
}
.CharaPage_number {
    width: 18%;
    margin-bottom: 3rem;
}
.CharaContainer .linkbox {
    width: 1250px;
}
.CharaContainer .linkbox a {
    top: 59%;
    width: 2.5rem;
    height: 2.5rem;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
}
.CharaContainer .linkbox::before {
    position: absolute;
    content: "前の店舗";
    display: block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.4rem;
    font-size: 1.6rem;
    top: 50%;
    left: -3%;
    transform: translateY(-50%);
}
.CharaContainer .linkbox::after {
    position: absolute;
    content: "次の店舗";
    display: block;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    letter-spacing: -0.4rem;
    line-height: 1;
    font-size: 1.6rem;
    top: 50%;
    right: -3%;
    transform: translateY(-50%);
}
.CharaContainer_name {
    flex-wrap: wrap;
}
.CharaContainer_name-img,.CharaPage.villains .CharaContainer_name-img,.CharaPage.sengoku .CharaContainer_name-img,.CharaPage.vampire .CharaContainer_name-img,.CharaPage.prince .CharaContainer_name-img {
    display: flex;
    width: 100%;
    align-items: center;
}
.CharaContainer_name .logo {
    width: 12%;
    margin: 0 2rem 0 0;
}
.CharaContainer_name-img .storename {
    font-size: 4rem;
    text-align: start;
    margin-bottom: 0;
}
.CharaContainer_name-img .storename .small {
    font-size: 2rem;
    margin-bottom: 1rem;
}
.CharaPage.vampire .CharaContainer_name-img .storename {
    line-height: 0.9;
}
.CharaPage.prince .CharaContainer_name-img .storename {
    font-size: 4rem;
}
.CharaPage.vampire .CharaContainer_name-img .storename .small {
    font-size: 2rem;
    margin-bottom: 0;
}
.CharaContainer_name-img .storename rt {
    font-size: 1rem;
}
.CharaContainer_name-img .storename .small .nikukyu {
    width: 1.5rem;
    margin: 0 0.7rem 0.4rem 0.7rem;
}
.CharaPage .CharaContainer_name .ramenname {
    font-size: 5rem;
    padding-top: 2rem;
}
.CharaPage.sengoku .CharaContainer_name .ramenname {
    font-size: 5rem;
    padding-top: 2rem;
    padding-left: 0;
}
.CharaPage.vampire .CharaContainer_name .ramenname {
    line-height: 0.9;
}
.CharaPage.sengoku .CharaContainer_name .ramenname .small {
    font-size: 4rem;
}
.CharaPage.vampire .CharaContainer_name .ramenname .small {
    font-size: 2.5rem;
}
.CharaContainer_bottom {
    justify-content: center;
    margin-top: -20rem;
    column-gap: 11rem;
}
.CharaPage.sengoku .CharaContainer_bottom {
    margin-top: -15rem;
}
.CharaPage.vampire .CharaContainer_bottom {
    margin-top: -15rem;
}
.CharaPage .CharaContainer_bottom .ramen {
    margin-left: 0;
    padding-bottom: 3rem;
}
.CharaPage .CharaContainer_bottom .character {
    margin-right: 0;
}
.CharaPage .obi {
    height: 42%;
}
.CharaPage .obi .obi-item:first-child {
    left: 3vw;
    bottom: 1vw;
    width: 57vw;
}
.CharaPage .obi .obi-item:last-child {
    right: -12vw;
    width: 50vw;
    bottom: -3vw;
}
.TextContainer_box {
    display: grid;
    grid-template-columns: 1fr 1fr 3fr;
    grid-template-rows: auto auto 1fr;
}
.TextContainer_box:first-child {
    margin-bottom: 8rem;
}
.TextContainer_head {
    padding: 3.5rem 0 2rem;
    font-size: 2.6rem;
    letter-spacing: 2px;
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 3rem;
}
.TextContainer_head::before {
    background-image: url(../../../images/cpn/april2026/linetop.webp);
    padding-bottom: 2.6rem;
}
.TextContainer_head::after {
    background-image: url(../../../images/cpn/april2026/linebottom.webp);
    padding-bottom: 1rem;
}
.TextContainer_img,.TextContainer_box:nth-child(2) .TextContainer_img {
    grid-column: 1;
    grid-row: 2 / 5;
    margin: 0 3rem 0 auto;
    width: auto;
}
.TextContainer_box .name {
    grid-column: 2 / 5;
    margin-bottom: 2rem;
    margin-bottom: 1rem;
    grid-row: auto;
    font-size: 2rem;
}
.TextContainer_box .text {
    grid-column: 2 / 4;
    grid-row: 3;
    line-height: 1.8;
    font-size: 1.8rem;
}
.TextContainer_box .text .bold {
    font-size: 2rem;
}

.Container.Chara .maru-item {
    top: -13%;
    left: -14%;
}
.Container.Chara .maru-item:nth-child(2) {
    top: 1%;
    left: 72%;
}
.Container.Chara .maru-item:nth-child(3) {
    top: -2%;
    left: 60%;

}
.CharaVoice .VoiceContainer .VoiceContainer_cell {
    padding: 5rem 5rem;
}
.CharaVoice .VoiceContainer .VoiceContainer_cell:first-child {
    padding: 5rem 5rem;
}
.CharaVoice .VoiceContainer .VoiceContainer_cell:nth-child(even) {
    padding: 4rem 5rem 4rem 14rem;
}
.CharaVoice .VoiceContainer .VoiceContainer_cell .text {
    line-height: 1.5;
    margin-bottom: 0;
}
.CharaVoice .VoiceContainer .VoiceContainer_cell .namelabel.owner::before {
    width: 4%;
    padding-bottom: 4%;
    left: -6%;
    top: 3%;
}
.CharaVoice .VoiceContainer_cell .namelabel .name .small {
    font-size: 1.9rem;
}
.CharaVoice .VoiceContainer_cell .namelabel .name .small .nikukyu {
    width: 1.4rem;
    margin: 0 0.5rem 0.3rem 0.5rem;
}


.CharaPage .linkbox-bottom {
    width: 1200px;
    margin: 2rem auto 0;
}
.CharaPage .linkbox-bottom a {
    font-size: 1.6rem;
}
.CharaPage .linkbox-bottom .arrow-left::before,.CharaPage .linkbox-bottom .arrow-right::after {
    width: 1.4rem;
    height: 1.4rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
.CharaPage .linkbox-bottom .arrow-right {
    padding-right: 3rem;
}
.CharaPage .linkbox-bottom .arrow-left {
    padding-left: 3rem;
}


.VoteBtn {
    width: fit-content;
    margin: 0 auto 6rem;
    text-align: center;
}
.VoteBtn::before,.VoteBtn::after {
    width: 80px;
    padding-bottom: 4.9rem;
}

.CampaignSection {
    padding: 8rem 0 0;
}
.CampaignContainer {
    padding: 0 0 5rem;
    margin-bottom: 10rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.CampaignContainer:last-child {
    margin-bottom: 0;
}
.CampaignContainer::after {
    padding-bottom: 26%;
}
.Footer {
    padding-top: 10rem;
}
.HeadFooter {
    font-size: 3rem;
    padding-bottom: 4rem;
    margin-bottom: 6rem;
}
.HeadFooter::after {
        width: 120px;
    padding-bottom: 1%;
}
.Footer_inner {
    flex-wrap: nowrap;
    padding-bottom: 6rem;
}
.logo_official {
    width: 50%;
    margin-right: 0;
}
.logo_ifc {
    width: 18%;
}
.Footer_top {
    width: 40%;
    padding-right: 10%;
}
.Footer_bottom {
    padding-left: 10%;
    width: 60%;
}
.Footer_top,.Footer_bottom {
    column-gap: 0;
    justify-content: space-between;
}
.Footer_top + .Footer_bottom {
    position: relative;
}
.Footer_top + .Footer_bottom::after {
    position: absolute;
    content: "";
    display: block;
    height: 70%;
    width: 1px;
    background-color: rgba(255,255,255,0.5);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.logo_title {
    width: 17%;
}
.Footer small {
    padding: 0.5rem 0;
}
}


@media (min-width: 751px) and (max-width: 1350px) {
    .wrap {
        width: 1000px;
    }
    .Container {
        margin-top: 4.7rem;
    }
    .Nav.Nav_pc .Nav-item {
        font-size: 1.1rem;
    }
    .Nav.Nav_pc .Nav-item a {
        padding: 1.8rem 0;
    }
    .EntrySection .EntryContainer {
    width: calc(50vw + 500px);
    }
    .EntryContainer:nth-child(odd) {
        margin-left: calc((100vw - 1000px) / 2);
        padding: 2rem 0 2rem 3rem;
    }
    .EntryContainer:nth-child(even) {
        margin-right: calc((100vw - 1000px) / 2);
        padding: 2rem 3rem 2rem 0;
    }
    .EntryContainer:last-child .storename.mid {
        font-size: 4.2rem;
    }
    .EntryContainer_txt-name .exsmall {
        font-size: 1.8rem;
        padding-bottom: 1rem;
    }
    .CampaignContainer img {
        width: 1000px;
    }
    .Overview_img-inner {
        width: 107%;
        bottom: -13rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .CharaPage .linkbox-bottom {
        width: 90%;
    }
    .CharaContainer .linkbox {
        width: 90%;
    }
}

@media (min-width: 768px) and (max-width: 1280px) {
    .AboutSeciion_text {
        width: 60%;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .wrap {
        width: 90%;
    }
    .EntrySection .EntryContainer {
    width: calc(50vw + 45%);
    }
    .EntryContainer:nth-child(odd) {
        margin-left: calc((100vw - 90%) / 2);
    }
    .EntryContainer:nth-child(even) {
        margin-right: calc((100vw - 90%) / 2);
    }
}


@media (min-width: 2000px) {
    .wrap {
        width: 1200px;
    }
    .EntryContents{
        width: 100%;
        max-width: 2000px;
        margin: 0 auto;
    }

.EntrySection .EntryContainer{
    position: relative;
    width: calc(50% + 600px);
    margin-bottom: 15rem;
    display: flex;
    overflow: visible;
}
.EntryContainer:nth-child(odd){
    margin-left: calc((100% - 1200px)/2);
    margin-right: auto;
    padding: 2rem 0 2rem 6rem;
}
.EntryContainer:nth-child(even){
    margin-left: auto;
    margin-right: calc((100% - 1200px)/2);
    padding: 2rem 6rem 2rem 0;
    align-items: initial;
    justify-content: flex-end;
}
}




/* =========================
    Modal
========================= */
.modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 999999;
    overflow: hidden;
}

.modal.show {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal.hide {
    opacity: 0;
    visibility: hidden;
}

/* =========================
    Modal inner
========================= */
.modal-inner {
    position: relative;
    z-index: 2;
    width: 90%;
}
.modal-head {
    width: 46vw;
    margin: 0 auto 5vw;
    text-align: center;
}
.ModalContainer {
    width: 100%;
    position: relative;
    background-image: url(../../../images/cpn/april2026/modal_bg_sp.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: multiply;
    border: 2px solid;
    border-image: linear-gradient(
    90deg,
    #d1aa64 0%,
    #f4e08f 16%,
    #c69037 32%,
    #f4e08f 48%,
    #d1aa64 64%,
    #c69037 82%,
    #f4e08f 100%
    ) 1;
    overflow: hidden;
    color: #fff;
}

.ModalContainer.villains {
    background-color: #4B5B75;
}
.ModalContainer.sengoku{
    background-color: #3C3B82;
}
.ModalContainer.vampire{
    background-color: #7D7D7D;
}
.ModalContainer.prince{
    background-color: #995A5F;
}
.ModalContainer-head {
    width: 42vw;
    margin: 6vw auto 1vw;
    text-align: center;
}
.ModalContainer::after {
    position: absolute;
    content: "";
    display: block;
    inset: 0;
    background: url("../images/waku_sp.webp") no-repeat center / 100% 100%;
    width: 96%;
    height: 96%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
}
.ModalContainer-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2vw;
}
.ModalContainer-top .logo {
    width: 18vw;
    margin-right: 2vw;
}
.ModalContainer-top .ramenname {
    font-size: 5.6vw;
    line-height: 1.1;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.sengoku .ModalContainer-top .ramenname {
    font-size: 4.5vw;
    line-height: 1.5;
}
.vampire .ModalContainer-top .ramenname {
    font-size: 5.4vw;
}
.vampire .ModalContainer-top .ramenname .small {
    font-size: 2.3vw;
}
.prince .ModalContainer-top .ramenname {
    font-size: 5.7vw;
    line-height: 1.3;
}
.ModalContainer-bottom {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    z-index: 1;
}
.ModalContainer-bottom .character {
    grid-column: 1;
    grid-row: 1 / 3;
}
.villains .ModalContainer-bottom .character {
    width: 90%;
    margin: 0 0.8vw 0 auto;
}
.sengoku .ModalContainer-bottom .character {
    width: 85%;
    margin: 0 -0.5vw 0 auto;
}
.vampire .ModalContainer-bottom .character {
    width: 90%;
    margin: 0 auto 0 2.8vw;
}
.ModalContainer-bottom .label {
    grid-column: 2;
    grid-row: auto;
    margin-left: -2vw;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.sengoku .ModalContainer-bottom .label {
    margin-left: 0;
}
.vampire .ModalContainer-bottom .label {
    margin-left: -5vw;
}
.ModalContainer-bottom .label .small {
    font-size: 3vw;
    letter-spacing: 0.1rem;
    margin-bottom: .8rem;
}
.ModalContainer-bottom .label .exsmall {
    font-size: 3vw;
    margin-bottom: .8rem;
}
.ModalContainer-bottom .label .nikukyu {
    width: 2vw;
    margin: 0vw 0.9vw 1vw 1vw;
}
.ModalContainer-bottom .storename {
    margin-bottom: 1rem;
    font-size: 5vw;
}
.ModalContainer-bottom .storename.mid {
    font-size: 4vw;
}
.vampire .ModalContainer-bottom .storename.mid {
    margin-bottom: .5rem;
}
.vampire .ModalContainer-bottom .storename.mid rt {
    font-size: .5rem;
}
.vampire .ModalContainer-bottom .label .small {
    font-size: 2.7vw;
    letter-spacing: 0;
    margin-bottom: 1rem;
}
.prince .ModalContainer-bottom .storename.mid {
    letter-spacing: 1px;
}
.ModalContainer-bottom .label .name .owner {
    background-color: #000;
    padding: 0.1vw 0.8vw 0.3vw 0.8vw;
    margin-right: 0.8vw;
}
.ModalContainer-bottom .ramen {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    width: 88%;
    align-self: flex-start;
    justify-self: left;
    margin-top: -17vw;
}
.sengoku .ModalContainer-bottom .ramen {
    width: 82%;
}
.vampire .ModalContainer-bottom .ramen {
    width: 80%;
    margin-left: 5%;
}
.prince .ModalContainer-bottom .ramen {
    width: 65%;
    margin-right: 10%;
    justify-self: center;
}
.ModalContainer-bottom .ramen .yuge img{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate3d(-50%, 0, 0) scale(0.92);
    transform-origin: 50% 100%;
    opacity: 0;
    will-change: transform, opacity;
    pointer-events: none;
    animation: yugeFloatSmooth 4s linear infinite;
}
.ModalContainer-bottom .ramen .yuge img:nth-child(2) {
    animation-delay: 5s;
    transform: translate3d(-50%, 0, 0) scale(0.90);
}
.ModalContainer-btn {
        position: absolute;
    left: 0;
    bottom: 5vw;
    width: 100%;
    background-color: #630E0F;
    text-align: right;
    padding: 3vw 0;
}
.ModalContainer-btn img {
    width: 40%;
    margin-right: 8%;
}


.modal-close {
    position: absolute;
    top: -3%;
    right: 0;
    z-index: 5;
    width: 8vw;
    height: 8vw;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
}

.modal-close::before,
.modal-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8vw;
    height: 3px;
    background: #fff;
    transform-origin: center;
}

.modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* =========================
    Confetti layer
========================= */
.modal-confetti {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.confetti {
    position: absolute;
    top: -18%;
    opacity: 0;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: paused;
    border-radius: 0;
    will-change: transform, opacity;
    transform-origin: center;
    transform-style: preserve-3d;
    backface-visibility: visible;
}
.modal.is-confetti-active .confetti {
    opacity: 1;
    animation-play-state: running;
}

.confetti:nth-child(4n) {
    width: 5px;
    height: 15px;
}

.confetti:nth-child(4n + 1) {
    width: 7px;
    height: 10px;
}

.confetti:nth-child(4n + 2) {
    width: 5px;
    height: 8px;
}

.confetti:nth-child(4n + 3) {
    width: 6px;
    height: 6px;
}
@media screen and (min-width: 751px) {
    .modal-inner {
        width: 1200px;
    }
    .modal-head {
        width: 25%;
        margin: 0 auto 2rem;
    }
    .modal-close {
        width: 4rem;
        height: 4rem;
    }
    .modal-close::before,.modal-close::after {
        width: 4rem;
    }
    .ModalContainer-head {
        width: 25%;
        margin: 2rem auto 1rem;
    }
    .ModalContainer {
        background-image: url(../../../images/cpn/april2026/modal_bg.webp);
        border: 4px solid;
        border-image: linear-gradient(90deg, #d1aa64 0%, #f4e08f 16%, #c69037 32%, #f4e08f 48%, #d1aa64 64%, #c69037 82%, #f4e08f 100%) 1;
    }
    .ModalContainer::after {
        background: url(../../../images/cpn/april2026/waku.webp) no-repeat center / 100% 100%;
        width: 98%;
    }
    .ModalContainer-top {
        margin-bottom: 0;
        margin-left: 28%;
        justify-content: flex-start;
    }
    .prince .ModalContainer-top {
        margin-left: 32%;
    }
    .ModalContainer-top .logo {
        width: 17%;
        margin-right: 1.6rem;
    }
    .ModalContainer-top .ramenname {
        font-size: 5.5rem;
    }
    .sengoku .ModalContainer-top .ramenname {
        font-size: 4.6rem;
        line-height: 1.2;
    }
    .vampire .ModalContainer-top .ramenname {
        font-size: 5.5rem;
        line-height: 0.8;
    }
    .vampire .ModalContainer-top .ramenname .small {
        font-size: 2.3rem;
    }
    .prince .ModalContainer-top .ramenname {
        font-size: 5.2rem;
        line-height: 1.1;
    }
    .ModalContainer-bottom {
        grid-template-columns: 1fr 1fr 1fr;
        align-items: center;
        margin-top: -19%;
    }
    .ModalContainer-bottom .character {
        margin: auto;
    }
    .villains .ModalContainer-bottom .character {
        width: 80%;
        margin: auto;
    }
    .sengoku .ModalContainer-bottom .character {
        width: 80%;
        margin: auto;
    }
    .ModalContainer-bottom .label {
        grid-column: 2;
        grid-row: 1 / 3;
        margin-left: 0;
        text-align: center;
        margin-top: 9rem;
    }
    .vampire .ModalContainer-bottom .label {
        margin-left: 0;
    }
    .ModalContainer-bottom .storename {
        font-size: 5rem;
        margin-bottom: 2rem;
    }
    .ModalContainer-bottom .storename.mid {
        font-size: 4rem;
    }
    .ModalContainer-bottom .label .small {
        font-size: 2.5rem;
        margin-bottom: 1.2rem;
    }
    .ModalContainer-bottom .label .exsmall {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    .ModalContainer-bottom .label .nikukyu {
        width: 4%;
        margin: 0 0.5rem 0.5rem 0.5rem;
    }
    .vampire .ModalContainer-bottom .storename.mid {
        margin-bottom: 1rem;
    }
    .vampire .ModalContainer-bottom .label .small {
        font-size: 2.3rem;
        margin-bottom: 2rem;
    }
    .sengoku .ModalContainer-bottom .storename.mid {
        margin-bottom: 3rem;
    }
    .ModalContainer-bottom .label .name {
        font-size: 2.5rem;
        line-height: 0;
        letter-spacing: 0.1rem;
        position: relative;
        display: inline-block;
        padding-left: 5.5rem;
    }
    .ModalContainer-bottom .label .name .owner {
        position: absolute;
        padding: 0.3rem 0.5rem 0.5rem 0.5rem;
        line-height: 1;
        display: inline-block;
        font-size: 1.8rem;
        left: 0;
        top: 50%;
        margin-right: 0;
        transform: translateY(-44%);
    }
    .ModalContainer-bottom .ramen {
        grid-column: 3;
        grid-row: 1 / 3;
        margin-top: 0;
        align-self: flex-end;
        width: auto;
        margin-bottom: 3rem;
        margin-left: 6rem;
    }
    .sengoku .ModalContainer-bottom .ramen {
        margin-left: 2rem;
        width: auto;
    }
    .vampire .ModalContainer-bottom .ramen {
        width: auto;
        margin-left: 10%;
    }
    .prince .ModalContainer-bottom .ramen {
        width: auto;
        margin-right: auto;
    }
    .ModalContainer-btn {
        bottom: 4%;
        text-align: center;
        padding: 2rem 0;
    }
    .ModalContainer-btn img {
        width: 24%;
        margin-right: 0;
    }
    .confetti:nth-child(4n) {
        width: 1rem;
        height: 1.5rem;
    }
    .confetti:nth-child(4n + 1) {
        width: .8rem;
        height: 1.5rem;
    }
    .confetti:nth-child(4n + 2) {
        width: .8rem;
        height: 1rem;
    }
    .confetti:nth-child(4n + 3) {
        width: 1rem;
        height: 1rem;
    }
    .vampire .ModalContainer-bottom .storename.mid rt {
    font-size: 1rem;
}
}

@media (min-width: 751px) and (max-width: 1360px) {
    .modal-inner {
        width: 1000px;
    }
    .ModalContainer-top .ramenname {
        font-size: 4.6rem;
    }
    .sengoku .ModalContainer-top .ramenname {
        font-size: 3.8rem;
    }
    .vampire .ModalContainer-top .ramenname {
        font-size: 5rem;
    }
    .vampire .ModalContainer-top .ramenname .small {
        font-size: 2rem;
    }
    .ModalContainer-bottom .label .exsmall {
        font-size: 2rem;
    }
    .vampire .ModalContainer-bottom .character {
        width: 80%;
        margin: auto;
    }
    .prince .ModalContainer-top .ramenname {
        font-size: 3.6rem;
        line-height: 1.2;
    }
    .ModalContainer-bottom .label .small,.vampire .ModalContainer-bottom .label .small {
        font-size: 1.8rem;
    }
    .ModalContainer-bottom .storename.mid {
        font-size: 3.2rem;
    }
    .ModalContainer-bottom .label .name {
        font-size: 1.8rem;
        padding-left: 4.5rem;
    }
    .ModalContainer-bottom .label .name .owner {
        font-size: 1.3rem;
    }
    .ModalContainer-bottom .ramen,.sengoku .ModalContainer-bottom .ramen,.vampire .ModalContainer-bottom .ramen,.prince .ModalContainer-bottom .ramen {
        margin-left: 0;
        width: 80%;
    }
    .ModalContainer-btn {
        padding: 1.2rem 0;
    }
}

@media (min-width: 768px) and (max-width: 1536px) {
    .modal-inner {
        width: 65%;
    }
    .modal-head {
        width: 22%;
        margin: 0 auto 1rem;
    }
    .ModalContainer-top .ramenname {
        font-size: 4rem;
    }
    .sengoku .ModalContainer-top .ramenname {
        font-size: 3.2rem;
    }
    .sengoku .ModalContainer-bottom .character {
        width: 72%;
    }
    .vampire .ModalContainer-top .ramenname {
        font-size: 4rem;
    }
    .vampire .ModalContainer-top .ramenname .small {
        font-size: 1.6rem;
    }
    .vampire .ModalContainer-bottom .label .small {
        font-size: 1.5rem;
    }
    .vampire .ModalContainer-bottom .character {
        width: 73%;
        margin: auto auto auto 2rem;
    }
    .modal-close {
        top: 0%;
    }
    .modal-close::before,.modal-close::after {
        width: 3rem;
    }
    .ModalContainer-bottom .ramen {
        margin-bottom: 2rem;
    }
    .sengoku .ModalContainer-bottom .ramen {
        margin-left: 2rem;
        width: 77%;
    }
    .ModalContainer-bottom .label .name {
        font-size: 1.7rem;
    }
    .ModalContainer-bottom .storename.mid {
        font-size: 3.2rem;
        margin-bottom: 1.2rem;
    }
    .vampire .ModalContainer-bottom .label {
        margin-top: 6rem;
    }
    .sengoku .ModalContainer-bottom .storename {
        margin-bottom: 2rem;
    }
}


.confetti.c1  { left: 1%;   animation: confetti-party-a 6.3s linear 0.2s infinite; background: #d4af37; }
.confetti.c2  { left: 4%;   animation: confetti-party-b 7.4s linear 1.3s infinite; background: #f7e27f; }
.confetti.c3  { left: 7%;   animation: confetti-party-c 6.8s linear 0.7s infinite; background: #c9a227; }
.confetti.c4  { left: 10%;  animation: confetti-party-d 8.1s linear 1.9s infinite; background: #f7e08b; }
.confetti.c5  { left: 13%;  animation: confetti-party-a 6.5s linear 0.9s infinite; background: #b8860b; }
.confetti.c6  { left: 16%;  animation: confetti-party-b 7.8s linear 0.3s infinite; background: #e0c04f; }
.confetti.c7  { left: 19%;  animation: confetti-party-c 6.9s linear 2.0s infinite; background: #d4af37; }
.confetti.c8  { left: 22%;  animation: confetti-party-d 8.4s linear 1.0s infinite; background: #f3df8a; }
.confetti.c9  { left: 25%;  animation: confetti-party-a 6.1s linear 1.6s infinite; background: #c9a227; }
.confetti.c10 { left: 28%;  animation: confetti-party-b 7.6s linear 0.5s infinite; background: #f7e27f; }
.confetti.c11 { left: 31%;  animation: confetti-party-c 6.7s linear 2.4s infinite; background: #b8860b; }
.confetti.c12 { left: 34%;  animation: confetti-party-d 8.2s linear 1.2s infinite; background: #e6c85c; }
.confetti.c13 { left: 37%;  animation: confetti-party-a 6.4s linear 0.8s infinite; background: #d4af37; }
.confetti.c14 { left: 40%;  animation: confetti-party-b 7.9s linear 2.1s infinite; background: #f7e08b; }
.confetti.c15 { left: 43%;  animation: confetti-party-c 6.6s linear 1.1s infinite; background: #c9a227; }
.confetti.c16 { left: 46%;  animation: confetti-party-d 8.5s linear 0.4s infinite; background: #f0d76a; }
.confetti.c17 { left: 49%;  animation: confetti-party-a 6.2s linear 2.3s infinite; background: #b8860b; }
.confetti.c18 { left: 52%;  animation: confetti-party-b 7.7s linear 1.4s infinite; background: #e0c04f; }
.confetti.c19 { left: 55%;  animation: confetti-party-c 6.9s linear 0.6s infinite; background: #d4af37; }
.confetti.c20 { left: 58%;  animation: confetti-party-d 8.0s linear 1.8s infinite; background: #f7e27f; }
.confetti.c21 { left: 61%;  animation: confetti-party-a 6.3s linear 1.0s infinite; background: #c9a227; }
.confetti.c22 { left: 64%;  animation: confetti-party-b 7.5s linear 2.2s infinite; background: #f3df8a; }
.confetti.c23 { left: 67%;  animation: confetti-party-c 6.8s linear 0.2s infinite; background: #b8860b; }
.confetti.c24 { left: 70%;  animation: confetti-party-d 8.3s linear 1.5s infinite; background: #f7e08b; }
.confetti.c25 { left: 73%;  animation: confetti-party-a 6.7s linear 0.4s infinite; background: #d4af37; }
.confetti.c26 { left: 76%;  animation: confetti-party-b 7.3s linear 1.7s infinite; background: #f7e27f; }
.confetti.c27 { left: 79%;  animation: confetti-party-c 6.4s linear 0.9s infinite; background: #c9a227; }
.confetti.c28 { left: 82%;  animation: confetti-party-d 8.6s linear 2.0s infinite; background: #f7e08b; }
.confetti.c29 { left: 85%;  animation: confetti-party-a 6.0s linear 1.2s infinite; background: #b8860b; }
.confetti.c30 { left: 88%;  animation: confetti-party-b 7.8s linear 0.6s infinite; background: #e0c04f; }
.confetti.c31 { left: 91%;  animation: confetti-party-c 6.5s linear 2.3s infinite; background: #d4af37; }
.confetti.c32 { left: 93%;  animation: confetti-party-d 8.1s linear 1.1s infinite; background: #f3df8a; }
.confetti.c33 { left: 95%;  animation: confetti-party-a 6.6s linear 0.3s infinite; background: #c9a227; }
.confetti.c34 { left: 97%;  animation: confetti-party-b 7.4s linear 1.9s infinite; background: #f7e27f; }
.confetti.c35 { left: 98.5%; animation: confetti-party-c 6.9s linear 0.8s infinite; background: #b8860b; }
.confetti.c36 { left: 100%; animation: confetti-party-d 8.4s linear 1.4s infinite; background: #f7e08b; }

@keyframes confetti-party-a {
    0% {
        transform: translate3d(0, -15vh, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.85);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translate3d(70px, 118vh, 0) rotateX(720deg) rotateY(360deg) rotateZ(540deg) scale(1.05);
        opacity: 1;
    }
}

@keyframes confetti-party-b {
    0% {
        transform: translate3d(0, -12vh, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
        opacity: 0;
    }
    8% {
        opacity: 0.95;
    }
    100% {
        transform: translate3d(-55px, 118vh, 0) rotateX(360deg) rotateY(900deg) rotateZ(420deg) scale(0.95);
        opacity: 0.95;
    }
}

@keyframes confetti-party-c {
    0% {
        transform: translate3d(0, -18vh, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.8);
        opacity: 0;
    }
    12% {
        opacity: 0.9;
    }
    100% {
        transform: translate3d(95px, 118vh, 0) rotateX(1080deg) rotateY(540deg) rotateZ(620deg) scale(1.1);
        opacity: 0.9;
    }
}

@keyframes confetti-party-d {
    0% {
        transform: translate3d(0, -10vh, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.95);
        opacity: 0;
    }
    10% {
        opacity: 0.85;
    }
    100% {
        transform: translate3d(-85px, 118vh, 0) rotateX(540deg) rotateY(1080deg) rotateZ(700deg) scale(1);
        opacity: 0.85;
    }
}



/* loading */
.loading{
    position: fixed;
    inset: 0;
    background:#fff;
    z-index: 99999;
    overflow:hidden;
    display:grid;
    place-items:center;
    opacity: 1;
}
.loading.is-hide{
    opacity:0;
    pointer-events:none;
    transition: opacity .8s ease;
}
body.is-loading {
    overflow:hidden;
}
.loadingText {
    position: relative;
    z-index: 3;
    font-size: 14px;
    letter-spacing: .1em;
    color: #555;
    opacity: .85;
}
.fog{
    position:absolute;
    inset:-10%;
    z-index:1;
    background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.70) 45%, rgba(255,255,255,0) 75%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.60) 45%, rgba(255,255,255,0) 78%);
    filter: blur(34px);
    opacity: 1;
    animation: fogDrift 2.2s ease-in-out infinite;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    -webkit-mask-size: 260px 260px;
    mask-size: 260px 260px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}
.loading.is-hide .fog{
    animation: fogOut .9s ease forwards;
}
@keyframes fogDrift {
    0% {
        transform: translate3d(-1.5%, 0, 0) scale(1.02);
    }
    50% {
        transform: translate3d(1.5%, -1%, 0) scale(1.05);
    }
    100% {
        transform: translate3d(-1.5%, 0, 0) scale(1.02);
    }
}
@keyframes fogOut {
    0%{
        opacity: 1;
        transform: translate3d(0,0,0) scale(1.02);
        filter: blur(38px);
    }
    100%{
        opacity: 0;
        transform: translate3d(6%, -4%, 0) scale(1.18);
        filter: blur(70px);
    }
}
@keyframes fogMaskMove {
    0%{ -webkit-mask-position: 0 0; }
    100%{ -webkit-mask-position: 140px -120px; }
}
.fog {
    animation: fogDrift 2.2s ease-in-out infinite, fogMaskMove 1.6s linear infinite;
}
.loading.is-hide .fog {
    animation: fogOutMask .9s ease forwards;
}
@keyframes fogDrift {
    0% {
        transform: translate3d(-1.5%, 0, 0) scale(1.02);
    }
    50% {
        transform: translate3d(1.5%, -1%, 0) scale(1.05);
    }
    100% {
        transform: translate3d(-1.5%, 0, 0) scale(1.02);
    }
}
@keyframes fogOutMask {
    0% {
        opacity:1; filter: blur(34px); transform: translate3d(0,0,0) scale(1.02); -webkit-mask-size: 260px 260px;
    }
    100% {
        opacity:0; filter: blur(76px); transform: translate3d(10%,-6%,0) scale(1.22); -webkit-mask-size: 520px 520px;}
}
.steam {
    position:absolute;
    bottom:-200px;
    width: 300px;
    height: 300px;
    z-index: 2;
    background:
        radial-gradient(circle at 40% 55%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 75%),
        radial-gradient(circle at 65% 60%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,0) 78%);
    filter: blur(46px);
    opacity: .9;
    animation: steamScatter 3.2s ease-out infinite;
    transform: translate3d(0,0,0);
}
.steam.s1 {
    left: 50%; animation-delay: 0s;
}
.steam.s2 {
    left: 35%; animation-delay: .5s; transform: scale(.9);
}
.steam.s3 {
    left: 65%; animation-delay: 1.0s; transform: scale(1.1);
}
.steam.s4 {
    left: 25%; animation-delay: 1.5s; transform: scale(.85);
}
.steam.s5 {
    left: 75%; animation-delay: 2.0s; transform: scale(1.2);
}
@keyframes steamScatter {
    0%{
        transform: translateY(0) translateX(0) scale(.95);
        opacity: .9;
    }
    55%{
        transform: translateY(-280px) translateX(-18px) scale(1.25);
        opacity: .65;
    }
    100%{
        transform: translateY(-600px) translateX(90px) scale(2.0);
        opacity: 0;
    }
}
.loading.is-hide .steam{
    animation: steamOut .9s ease forwards;
}
@keyframes steamOut {
    0%{ opacity: .9; filter: blur(46px); }
    100%{ opacity: 0; filter: blur(80px); transform: translateY(-120px) translateX(120px) scale(1.6); }
}