html,
body {
    overflow-x: hidden;
}

body {
    font-family: "Shippori Mincho B1", "Yu Gothic", "Hiragino Sans", sans-serif;
    margin: 0;
    padding: 0;
    color: #141414;
    line-height: 1.6;
    background-color: #fff;
}

main {
    margin: 0 auto;
    overflow: hidden;
}

.mainContent {
    margin: auto;
}

.inner {
    padding: 0 5%;
}

.pc {
    display: block;
}

.sp {
    display: none;
}


.taC {
    text-align: center;
}

.white {
    color: #fff !important;
}

.tdU {
    text-decoration: underline;
}

h1 {
    font-size: 28px;
    font-weight: 400;
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
}

h2 {
    font-weight: 400;
    text-align: center;
    margin-top: 0;
    margin-bottom: 40px;
}

h3 {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
}

h4 {
    font-weight: normal;
    font-size: 18px;
}

p {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 400;
    margin: 0 auto;
}

a {}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 25px;
}

.mw160 {
    max-width: 160px;
    margin: auto;
}

.mw620 {
    max-width: 620px;
    margin: auto;
    display: block;
}

.mw680 {
    max-width: 680px;
    margin: auto;
}

.mw720 {
    max-width: 720px;
    margin: auto;
    overflow: hidden;
}

.mw765 {
    max-width: 765px;
    margin: auto;
}

.mw940 {
    max-width: 940px;
    margin: auto;
    overflow: hidden;
}


.mw1200 {
    max-width: 1200px;
    margin: auto;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

.mb60 {
    margin-bottom: 60px !important;
}

.mb80 {
    margin-bottom: 80px !important;
}

.mb100 {
    margin-bottom: 100px !important;
}

.mb120 {
    margin-bottom: 120px !important;
}

.mb200 {
    margin-bottom: 200px !important;
}


/* =========================================
   KV
   ========================================= */
#kv {
    position: relative;
    z-index: 1;
}

#kv img {
    margin-bottom: 0;
}

.main-art {
    position: absolute;
    z-index: 10;
    left: 50%;
    width: 100%;
    top: 23.4vw;
    transform: translate(-50%, 0);
}

.title-text {
    position: absolute;
    z-index: 5;
    left: 50%;
    width: 100%;
    top: 16vw;
    transform: translate(-50%, 0);
}

.main-art img,
.title-text img {
    width: 100%;
    height: auto;
}

.gallery-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1.5%;
    padding-top: 7px;
    position: relative;
    z-index: 1;
}

.col-left {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

.item-1 {
    width: 100%;
}

.item-2 {
    width: 70%;
}

.item-3 {
    width: 30%;
    margin-top: 13px;
}

.item-4 {
    width: 30%;
    margin-top: 0px;
}


/* =========================================
   黒背景
   ========================================= */
#black-section {
    position: relative;
    z-index: 10;
    margin: -5vw auto 5vw;
}

.black-content-wrapper {
    position: relative;
    top: 9vw;
    z-index: 10;
    background-color: #000;
    color: #fff !important;
    padding-bottom: 22vw;
}

.black-content-wrapper p {
    color: #fff !important;
}

/* 斜めのバー装飾 */
.bars-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.bars-wrapper-bottom,
.bars-wrapper-bottom2 {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10;
}

.bar {
    position: absolute;
    width: 120vw;
    left: -10vw;
    height: 24.53vw;
}

.bar-2 {
    background-color: #666;
    top: 0;
    transform: rotate(6deg);
    z-index: 1;
}

.bar-1 {
    background-color: #000;
    transform: rotate(-10deg);
    z-index: 2;
}

.bar-4 {
    background-color: #914A8F;
    top: 0;
    transform: rotate(6deg);
    z-index: 1;
}

.bar-3 {
    background-color: #F7C640;
    transform: rotate(-10deg);
    z-index: 2;
}

.bar-6 {
    background-color: #245BA7;
    top: 0;
    transform: rotate(6deg);
    z-index: 2;
}

.bar-5 {
    background-color: #D53A3F;
    transform: rotate(-10deg);
    z-index: 1;
}


/* =========================================
   販売期間
   ========================================= */
#schedule-section {
    position: relative;
    padding-top: 30vw;
    color: #141414 !important;
    margin-bottom: 50vw;
}


/* =========================================
   MENU
   ========================================= */
.menu-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px 6%;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}

.menu-wrapper .box {
    width: 43%;
}

.menu-wrapper .box img {
    margin-bottom: 0;
    width: 100%;
    height: auto;
}

.menu-wrapper.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 2%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 140px;
}

.menu-wrapper.is-fixed .box {
    width: 20%;
    max-width: 100px;
}

.button {
    padding: 0;
    font-size: 14px;
    background-color: #343434;
    border-radius: 50px;
    max-width: 310px;
    width: 100%;
    margin: 30px auto;
}

.button a {
    width: 75%;
    padding: 10px 0 10px 35px;
    display: block;
    box-sizing: border-box;
    position: relative;
    margin: auto;
    color: #fff;
    text-decoration: none;
}

.button a::before {
    content: "";
    position: absolute;
    background: #ffffff;
    display: block;
    height: calc(tan(60deg) * 20px / 2);
    width: 20px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    left: 0;
    top: 0;
    bottom: 0;
    right: auto;
    margin: auto;
}


/* =========================================
   RING SECTION
   ========================================= */
.ring-black-section {
    position: relative;
    padding-top: 50px;
    overflow: hidden;
}

/* 背景カラーボックス */
.content-color-box {
    position: absolute;
    left: 0;
    width: 100%;
    height: 200%;
    z-index: 1;
}

.content-color-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20vw;
    width: 150vw;
    height: 200%;
    transform: rotate(9deg);
    transform-origin: top left;
    z-index: -1;
}

.yellow-bg::before {
    background-color: #F7C640;
}

.purple-bg::before {
    background-color: #914A8F;
}

.blue-bg::before {
    background-color: #245BA7;
}

.red-bg::before {
    background-color: #D53A3F;
}

/* アートエリア（立ち絵・手元） */
.ring-section .art-wrapper {
    position: relative;
    width: 100%;
    z-index: 2;
}

.tachie-box {
    position: relative;
    width: 58%;
    z-index: 3;
}

#ring02 .tachie-box {
    width: 61%;
}

#ring03 .tachie-box {
    width: 57.2%;
}

#ring04 .tachie-box {
    width: 53.4%;
}

.hand-box {
    position: absolute;
    top: 32vw;
    right: 2%;
    width: 67.5%;
    z-index: 2;
}

/* 黒背景ボックス（リングとテキストを囲う） */
.content-black-box {
    position: relative;
    margin-top: -16.5vw;
    z-index: 4;
}

.content-black-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -20vw;
    width: 150vw;
    height: 200%;
    background-color: #000;
    transform: rotate(9deg);
    transform-origin: top left;
    z-index: -1;
}


/* リング画像 */
.ring-section .ring {
    width: 100%;
    padding-top: 2vw;
}

.ring-section .ring img {
    margin-bottom: 5px;
}

/* 名前・テキストエリア */
.ring-section .name {
    position: absolute;
    z-index: 5;
    right: 3%;
    bottom: 5vw;
}

.ring-section .name h3 {
    font-size: 25px;
    margin: 0;
    text-align: right;
    line-height: 1.3;
    color: #141414;
}

.ring-section .name span {
    font-size: 20px;
    padding-right: 4px;
    letter-spacing: normal;
}

.ring-section .name span.dot {
    font-size: 25px;
    padding: 0;
    letter-spacing: -20%;
    margin-left: -4%;
}

#ring04.ring-section .name {
    right: 2%;
}

#ring04.ring-section .name h3 {
    letter-spacing: -2%;
}

.ring-section .text-area {
    position: relative;
    z-index: 5;
    padding: 0 20px 50px 20px;
}

.ring-section .text-area p {
    color: #fff;
}

/* 特典エリア */
.tokuten .img {
    padding: 0 30px;
}

.tokuten img {
    margin-bottom: 0;
}

/* =========================================
    アクスタ
   ========================================= */
.stand-section .content-wrapper {
    background-color: #2B2B2B;
    padding: 30px 25px;
    color: #fff;
}

.stand-wrapper {
    display: flex;
    gap: 20px 5%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.stand-section .box {
    width: 47%;
}

.stand-detail-wrapper {
    display: flex;
    gap: 20px 5%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* =========================================
    オンラインショップ
   ========================================= */
.ec-section {
    padding: 0 20px;
}

.caution {
    padding: 10px;
    background-color: #EDEDED;
        border: 1px solid #000;
}

.ec-section .button a {
    width: 60%;
    padding: 14px 5px 14px 0px;
    text-align: center;
}

.ec-section .button a::before {
    width: 15px;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    right: 0;
    bottom: 0;
    left: auto;
}

/* =========================================
    Photo Spot
   ========================================= */
.photot-section {
    padding: 0 20px;
}

.photot-section .button a {
    width: 50%;
    padding: 14px 5px 14px 0px;
    text-align: center;
}

.photot-section .button a::before {
    width: 15px;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    right: 0;
    bottom: 0;
    left: auto;
}

.shop-wrapper {
    display: flex;
    gap: 20px 5%;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.shop-wrapper .box {
    width: 47%;
}

/* =========================================
    Footer
   ========================================= */
footer p {
    font-family: "Roboto", "Yu Gothic", sans-serif;
}

/* =========================================
    レスポンシブ
   ========================================= */

/* --- タブレット（681px 〜 768px） --- */
@media screen and (min-width: 681px) and (max-width: 768px) {
    h1 {
        font-size: 30px !important;
    }

    h4 {
        font-size: 28px !important;
    }

    p {
        font-size: 16px !important;
    }

    .hdS {
        font-size: 20px !important;
    }

    .hdL {
        font-size: 35px !important;
    }

    .black-content-wrapper {
        padding-bottom: 21vw !important;
    }

    #schedule-section {
        padding-top: 30vw !important;
        padding-bottom: 10vw !important;
        margin-bottom: 25vw !important;
    }

    .ring-section .name h3 {
        font-size: 45px !important;
        padding: 0 20px;
    }

    .ring-section .name {
        bottom: 12vw !important;
    }

    .ring-section .name span {
        font-size: 35px !important;
    }
}

/* --- スマホ全般（768px 以下） --- */
@media screen and (max-width: 768px) {
    .sp {
        display: block;
    }

    .pc {
        display: none;
    }

    p {
        font-size: 13px;
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 24px;
    }

    h2 .sp img {
        margin-bottom: 10px;
    }

    h3 {
        font-size: 20px;
    }

    .hdS {
        font-size: 15px;
    }
    .caution .hdS {
        font-size: 18px;
    }

    .hdL {
        font-size: 25px;
    }

    .mb80 {
        margin-bottom: 40px !important;
    }

    .mb120 {
        margin-bottom: 80px !important;
    }

    .mb200 {
        margin-bottom: 100px !important;
    }
}

/* --- スマホ小さめ（480px 以下） --- */
@media screen and (max-width: 480px) {
    h1 {
        font-size: 20px;
        margin-bottom: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 18px;
    }

    p {
        font-size: 13px;
    }

    .mb40 {
        margin-bottom: 20px !important;
    }

    .mb50 {
        margin-bottom: 35px !important;
    }

    .mb60 {
        margin-bottom: 35px !important;
    }

    .mb30 {
        margin-bottom: 20px !important;
    }

    .mb20 {
        margin-bottom: 13px !important;
    }

    .menu-wrapper.is-fixed .box {
        max-width: 70px;
    }

    .menu-wrapper.is-fixed {
        height: 92px;
    }
}

/* =========================================
    PC版 KVレイアウト（769px 〜）
========================================= */
@media screen and (min-width: 769px) {
    .sp {
        display: none !important;
    }

    .pc {
        display: block;
    }

    h4 {
        font-size: 24px;
    }

    .pctaC {
        text-align: center;
    }

    .hdL {
        font-size: 30px;
    }

    #kv {
        position: relative;
        padding-top: 50px;
        padding-bottom: 0;
        max-width: 1020px;
        margin: auto;
    }

    .caution {
        padding: 30px;
    }

    .gallery-wrapper {
        gap: 1%;
        padding-top: 0px;
    }

    .item-pc-logo {
        width: 24.5%;
        position: relative;
        z-index: 10;
        --bottom-position: -9;
        --box-opacity: 1;
    }

    .item-pc-logo::before {
        content: "";
        position: absolute;
        bottom: calc(var(--bottom-position) * 1vw);
        right: -1vw;
        background-color: #000;
        width: 96%;
        height: 65%;
        z-index: 2;
        opacity: var(--box-opacity);
    }

    .item-pc-logo picture {
        display: block;
        position: relative;
        z-index: 1;
    }

    .gallery-wrapper .col-left {
        width: 36%;
        gap: 10px;
    }

    .item-2 {
        width: 55%;
        margin-left: 1vw;
    }

    .gallery-wrapper .item-3 {
        width: 19%;
        margin-top: 5vw;
    }

    .gallery-wrapper .item-4 {
        width: 19%;
        margin-top: 0;
    }

    .main-art {
        top: 3vw;
        width: 100%;
        z-index: 10;
    }

    .title-text {
        position: absolute;
        left: 5%;
        bottom: 28%;
        top: auto;
        width: 34%;
        transform: none;
        z-index: 9;
        max-width: 360px;
    }

    .bar {
        height: 7vw;
    }

    .bar-1,
    .bar-2 {
        height: 16vw;
    }

    .bar-1,
    .bar-2,
    .bar-3,
    .bar-4,
    .bar-5,
    .bar-6 {
        top: 0;
    }

    .bar-2,
    .bar-4,
    .bar-6 {
        transform: rotate(4deg);
    }

    .bar-1,
    .bar-3,
    .bar-5 {
        transform: rotate(-4deg);
    }

    #black-section {
        margin: -7vw auto 7vw;
    }

    .black-content-wrapper {
        top: 5vw;
        padding-bottom: 13vw;
    }

    #schedule-section {
        padding-top: 5vw;
        margin-bottom: 20vw;
    }

    #schedule-section .mb60 {
        margin-bottom: 90px !important;
    }

    .menu-wrapper .box {
        width: 12%;
    }

    .button {
        font-size: 16px;
        max-width: 370px;
    }

    .button a {
        width: 66%;
    }

    .tachie-box {
        width: 48%;
        max-width: 466px;
    }

    #ring02 .tachie-box {
        max-width: 419px;
    }

    #ring03 .tachie-box {
        max-width: 383px;
    }

    .hand-box {
        top: 12vw;
        top: 23vh;
        right: 17vw;
        right: 30vh;
        width: 37.5%;
        max-width: 406px;
    }

    #ring03 .hand-box {
        right: 38vh;
    }

    .ring-section .ring {
        width: 100%;
        position: relative;
        max-width: 575px;
        right: -10vw;
        margin: auto;
    }

    #ring03 .ring-section .ring {
       
    }

    .mw1100 {
        max-width: 1100px;
        margin: auto;
        position: relative;
    }

    .content-color-box::before {
        transform: rotate(5deg);
        height: 80%;
    }

    .content-black-box::before {
transform: rotate(5deg);
        height: 80%;
    }

    .content-black-box {
margin-top: -20.5vh;
    }

    .ring-section .name {
        right: 0%;
        bottom: 7vw;
    }

    .ring-section .name h3 {
        font-size: 45px;
        padding: 0 20px;
    }

    .ring-section .name span {
        font-size: 35px;
        top: -0.5vw;
    }

    .text-area-wrapper {
        max-width: 1200px;
        margin: auto;
        display: flex;
        padding: 6vw 20px 0;
    }

    .ring-black-section {
        overflow: visible;
    }

    .content-bottom {
        padding-top: 5vw;
    }

    .tokuten img {
        max-width: 450px;
    }

    .content-black-box::before {
        top: 8vh;
    }

    #ring02 .content-color-box::before,
    #ring04 .content-color-box::before,
    #ring02 .content-black-box::before,
    #ring04 .content-black-box::before {
        transform: rotate(-5deg);
        transform-origin: top right;
        left: auto;
        right: -20vw;
    }

    .ring-section .text-area {
        width: 82%;
    }

    #ring02 .tachie-box,
    #ring04 .tachie-box {
        margin: 0 0 0 auto;
    }

    #ring04 .tachie-box {
        max-width: 570px;
        position: relative;
        right: -4vw;
    }

    #ring02 .hand-box {
        left: 40vh;
    }

    #ring04 .hand-box {
        left: 38vh;
        top: 19vh;
    }

    .ring-section .name span.dot {
        font-size: 35px;
    }

    #ring02.ring-section .name,
    #ring04.ring-section .name {
        left: 0%;
        right: auto;
    }

    #ring02.ring-section .name h3,
    #ring04.ring-section .name h3 {
        text-align: left;
    }

    #ring02.ring-section .ring {
        right: 6vh;
    }

    #ring04.ring-section .ring {
        right: 2vw;
    }

    #ring02 .text-area-wrapper,
    #ring04 .text-area-wrapper {
        flex-direction: row-reverse;
    }

    #ring04 .text-area-wrapper {
        padding: 3vw 20px 0;
    }

    #ring02 .content-black-box::before {
       top: 4vw;
    }

    #ring04 .content-black-box::before {
        top: 3.8vw;
    }

    .stand-section .content-wrapper {
        padding: 70px 25px;
    }

    .stand-wrapper {
        gap: 20px 0%;
        max-width: 914px;
        margin: auto;
    }

    .stand-section .box {
        width: 25%;
    }

    .stand-detail-wrapper {
        max-width: 500px;
        margin: auto;
    }

    .stand-detail-wrapper .box:nth-of-type(2) {
        width: 70%;
    }

    .photot-section h4 {
        margin-top: 0;
    }

    .photo-spot-wrapper {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .photo-spot-wrapper .box {}

    .shop-wrapper {
        max-width: 310px;
    }
}

@media screen and (max-width:1100px) and (min-width:770px) {
    .hand-box {
        top: 16vw !important;
        right: 17vw !important;
    }

    #ring02 .hand-box,
    #ring04 .hand-box {
        left: 31vw !important;
    }
    #ring03 .hand-box {
        right: 24vw ! Important;
    }

    .content-black-box::before {
        top: 0 !important;
        height: 200% !important;
    }

    .ring-black-section {
        overflow: hidden !important;
    }

    .hand-box {
        width: 42.5% !important;
    }

    .text-area-wrapper {
        display: block !important;
    }

    .tachie-box {
        width: 48% !important;
    }

    #ring02 .tachie-box {
        width: 43% !important;
    }

    #ring03 .tachie-box {
        width: 39% !important;
    }

    #ring04 .tachie-box {
        width: 58% !important;
    }

    #ring04.ring-section .name h3 {
        letter-spacing: -2%;
        line-height: 1;
    }

    .ring-section .text-area {
        width: 100%;
    }
        .content-black-box {
        margin-top: -11.5vh;
    }

}
@media screen and (min-width:1101px) {
    .content-black-box::before {
        height: 86%!important;
    }
    #ring02 .text-area-wrapper , #ring04 .text-area-wrapper {
        padding: 2vw 20px 0!important;
    }

}
@media screen and (min-width:1400px) {

    .content-black-box::before {
        top: 6vh!important;
    }

}
@media screen and (min-width:1600px) {

    .content-black-box::before {
        top: 3vh!important;
    }

}