@charset "utf-8";

.page_zerokara {
    color: #000000;
    padding-top: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

/* ==================================================
Section00 - MV
================================================== */



/* ==================================================
Section01 - Topics
================================================== */
.topics {
    background: #ececec;
    padding-bottom: min(calc((15) / 560 * 100vw), (15) * 1px);
}

.topics-section__heading {
    color: #ffffff;
    font-size: min(calc((27.5) / 560 * 100vw), (27.5) * 1px);
    font-feature-settings: "palt";
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
    text-align: center;
    background: #000000;
    padding: 0.5em 0 0.6em;
    margin-bottom: min(calc((12) / 560 * 100vw), (12) * 1px);
}

.topics-section__slider {
    width: calc(100% - (min(calc((20) / 560 * 100vw), (20) * 1px)));
    margin: auto;
    overflow: hidden;
}

.topics-section__slider__list {}

.topics-section__slider__item {
    overflow: hidden;
    border-radius: min(calc((6) / 560 * 100vw), (6) * 1px);
}

/* スライダー 読み込み崩れ防止 */
.topics-section__slider {
    max-height: min(calc((113) / 560 * 100vw), (113) * 1px);
    transition: ease opacity 0.3s;
    opacity: 0;
}
.topics-section__slider.swiper-initialized {
    max-height:none;
    opacity: 1;
}




/* ==================================================
Section02 - About
================================================== */
.about {
    background: #ffe0ed;
}

.about-section__heading {
    position: relative;
    background: url('/wp-content/uploads/2026/04/zerokara2026-about-heading-bg.png') no-repeat top center / 100%;
    padding-top: min(calc((132) / 560 * 100vw), (132) * 1px);
    margin-bottom: min(calc((15) / 560 * 100vw), (15) * 1px);
}

.about-section__heading__illust {
    position: absolute;
}
.about-section__heading__illust--01 {
    width: min(calc((165) / 560 * 100vw), (165) * 1px);
    right: 0;
    top: 0;
}

.about-section__feature {}

.about-section__feature__item {
    position: relative;
}

.about-section__feature__item--01 {
    z-index: 1;
}

.about-section__feature__item--02 {
    margin-top: calc( -1 * (min(calc((65) / 560 * 100vw), (65) * 1px))) ;
    z-index: 0;
}

.about-section__feature__illust {
    position: absolute;
}
.about-section__feature__illust--01 {
    z-index: 2;
    width: min(calc((174) / 560 * 100vw), (174) * 1px);
    top: calc( -1 * (min(calc((60) / 560 * 100vw), (60) * 1px))) ;
    left: calc( -1 * (min(calc((12) / 560 * 100vw), (12) * 1px))) ;
}

.about-section__info {
    font-size: min(calc((14.5) / 560 * 100vw), (14.5) * 1px);
    font-weight: 500;
    text-align: center;
    margin: min(calc((5) / 560 * 100vw), (5) * 1px) 0;
}



/* ==================================================
Section03 - Notes
================================================== */
.notes {
    background:
        /* url('../img/notes-outer-bg-start.png') no-repeat top center / 100%, */
        url('/wp-content/uploads/2026/04/zerokara2026-notes-outer-bg-start.png') no-repeat top center / 100%,
        url('/wp-content/uploads/2026/04/zerokara2026-notes-outer-bg-end.png') no-repeat bottom center / 100%,
        #ff6ca8
    ;
    position: relative;
    padding: min(calc((80) / 560 * 100vw), (80) * 1px) 0 min(calc((55) / 560 * 100vw), (55) * 1px);
}

.notes-section__brush {
    position: absolute;
    top: calc(-1 * (min(calc((24) / 560 * 100vw), (24) * 1px)));
}

.notes-section__illust {
    position: absolute;
    z-index: 2;
}
.notes-section__illust--01 {
    width: min(calc((239) / 560 * 100vw), (239) * 1px);
    top: calc(-1 * (min(calc((222) / 560 * 100vw), (222) * 1px)));
    right: min(calc((24) / 560 * 100vw), (24) * 1px);
}
.notes-section__illust--02 {
    width: min(calc((124) / 560 * 100vw), (124) * 1px);
    top: min(calc((168) / 560 * 100vw), (168) * 1px);
    left: 0;
}
.notes-section__illust--03 {
    width: min(calc((98) / 560 * 100vw), (98) * 1px);
    top: min(calc((360) / 560 * 100vw), (360) * 1px);
    right: min(calc((8) / 560 * 100vw), (8) * 1px);
}

.notes-section__frame {}

.notes-section__frame__main {
    position: relative;
    z-index: 1;
    background: url('/wp-content/uploads/2026/04/zerokara2026-notes-frame-main.png') repeat-y top center / 100%;
    padding: 0 min(calc((80) / 560 * 100vw), (80) * 1px);
    margin-bottom: calc(-1 * (min(calc((22) / 560 * 100vw), (22) * 1px)));
}

.notes-section__logo {
    width: min(calc((166) / 560 * 100vw), (166) * 1px);
    margin: 0 auto;
}

.notes-section__heading {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: min(calc((25) / 560 * 100vw), (25) * 1px);
    line-height: 1.2em;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin: min(calc((17) / 560 * 100vw), (17) * 1px) 0 0;
}

.notes-section__heading__icon {
    width: 1.76em;
    margin: 0 0.36em 0 0;
}

.notes-section__heading__txt {}

.notes-section__list {
    font-size: min(calc((14.4) / 560 * 100vw), (14.4) * 1px);
    font-weight: 500;
    line-height: 1.875;
    margin: min(calc((45) / 560 * 100vw), (45) * 1px) 0 0;
}

.notes-section__item {
    text-indent: -1em;
    padding-left: 1em;
}

.notes-section__item--kome {}



/* ==================================================
Section04 - Gallery
================================================== */
.gallery {
    background: url('/wp-content/uploads/2026/04/zerokara2026-gallery-outer-bg.png') #000000 no-repeat bottom center / 100%;
    position: relative;
    padding: 0 0 min(calc((175) / 560 * 100vw), (175) * 1px);
}

.gallery-section__brush {
}

.gallery-section__heading {
    position: relative;
    background: url('/wp-content/uploads/2026/04/zerokara2026-gallery-heading-bg.png') no-repeat top center / 100%;
    padding:
        min(calc((112) / 560 * 100vw), (112) * 1px)
        0
        min(calc((35) / 560 * 100vw), (35) * 1px)
    ;
    
    margin-bottom: min(calc((27) / 560 * 100vw), (27) * 1px);
}

.gallery-section__heading__illust {
    position: absolute;
}
.gallery-section__heading__illust--01 {
    width: min(calc((286) / 560 * 100vw), (286) * 1px);
    left: min(calc((10) / 560 * 100vw), (10) * 1px);
    top: calc(-1 * (min(calc((75) / 560 * 100vw), (75) * 1px)));
}
.gallery-section__heading__illust--02 {
    width: min(calc((74) / 560 * 100vw), (74) * 1px);
    right: min(calc((32) / 560 * 100vw), (32) * 1px);
    top: min(calc((14) / 560 * 100vw), (14) * 1px);
}

.gallery-section__list {
    color: #ffffff;
    font-size: min(calc((23) / 560 * 100vw), (23) * 1px);
    line-height: 1.44;
    width: min(calc((492) / 560 * 100vw), (492) * 1px);
    margin: auto;
}

.gallery-section__item {
    cursor: pointer;
    display: flex;
    justify-content: space-between;  
    position: relative;
}

.gallery-section__item:before {
}

.gallery-section__item:not(:first-child) {
    margin-top: min(calc((40) / 560 * 100vw), (40) * 1px);
}

.gallery-section__open {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;  
    margin: auto;  
    z-index: 5;
}

.gallery-section__thumb {
    width: min(calc((230) / 560 * 100vw), (230) * 1px);
    height: min(calc((214) / 560 * 100vw), (214) * 1px);
    overflow: hidden;
    position: relative;
}

.gallery-section__thumb__icon {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: min(calc((100) / 560 * 100vw), (100) * 1px);
    background: rgba(255,255,255,0.7);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 0.08em solid #69696a;
    transition: ease all 0.3s;
    opacity: 1;
}

.gallery-section__thumb__icon:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.28em;
    margin: auto;
    height: 0.46em;
    aspect-ratio: cos(30deg);
    clip-path: polygon(0 0,100% 50%,0 100%);
    background: #69696a;
}

.gallery-section__thumb__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: ease all 0.3s;
}

.gallery-section__txts {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    padding:
        0
        min(calc((25) / 560 * 100vw), (25) * 1px)
        min(calc((15) / 560 * 100vw), (15) * 1px)
        min(calc((25) / 560 * 100vw), (25) * 1px)
    ;
    position: relative;
}

.gallery-section__date {
    color: #ff84bc;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 1em;
}

.gallery-section__name {
    font-weight: 700;
    letter-spacing: 0.15em;
}

.gallery-section__item__frame {
    position: absolute;
    z-index: 2;
    top: calc( -1 * (min(calc((2) / 560 * 100vw), (2) * 1px)));
    right: calc( -1 * (min(calc((2) / 560 * 100vw), (2) * 1px)));
    bottom: calc( -1 * (min(calc((2) / 560 * 100vw), (2) * 1px)));
    left: calc( -1 * (min(calc((2) / 560 * 100vw), (2) * 1px)));
    pointer-events: none;
}

.gallery-section__item__frame img {
    width: 100%;
    height: 100%;
}

/* hover */
.gallery-section__item:hover .gallery-section__thumb__icon {
    opacity: 0;
}
.gallery-section__item:hover .gallery-section__thumb__img {
    transform: scale(1.15);
}



/* ==================================================
Section05 - Column
================================================== */
.column {
    background: #ff6ca8;
    padding: 0 0 min(calc((145) / 560 * 100vw), (145) * 1px);
}

.column-section__brush {}

.column-section__heading {
    position: relative;
    background: url('/wp-content/uploads/2026/04/zerokara2026-column-heading-bg.png') no-repeat top center / 100%;
    padding-top: min(calc((84) / 560 * 100vw), (84) * 1px);
    margin-bottom: min(calc((46) / 560 * 100vw), (46) * 1px);
}

.column-section__heading__illust {
    position: absolute;
}
.column-section__heading__illust--01 {
    width: min(calc((180) / 560 * 100vw), (180) * 1px);
    left: min(calc((46) / 560 * 100vw), (45) * 1px);
    top: calc(-1 * (min(calc((48) / 560 * 100vw), (48) * 1px)));
}
.column-section__heading__illust--02 {
    width: min(calc((275) / 560 * 100vw), (275) * 1px);
    right: 0;
    top: calc(-1 * (min(calc((192) / 560 * 100vw), (192) * 1px)));
}

.column-section__list {
    color: #ffffff;
    font-size: min(calc((20.5) / 560 * 100vw), (20.5) * 1px);
    line-height: 1.6;
    width: min(calc((492) / 560 * 100vw), (492) * 1px);
    margin: auto;
}

.column-section__item {}
.column-section__item:not(:first-child) {
    margin-top: min(calc((100) / 560 * 100vw), (100) * 1px);
}

.column-section__item__inner {}

.column-section__thumb {
    margin-bottom: 0.92em;
    height: min(calc((216) / 560 * 100vw), (216) * 1px);
    overflow: hidden;
}

.column-section__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: ease all 0.3s;
}

.column-section__txts {}

.column-section__name {
    font-weight: 500;
    letter-spacing: 0.125em;
    margin-bottom: 0.68em;
}

.column-section__tag__list {
    display: flex;
    gap: min(calc((12) / 560 * 100vw), (12) * 1px);
    font-size: 0.9em;
    line-height: 1.25;
    color: #ff50a0;
}

.column-section__tag__item {
    font-weight: 700;
    background: #ffffff;
    letter-spacing: 0.08em;
    border-radius: 0.35em;
    padding: 0.13em 0.65em 0.18em;
}

/* Hover */
.column-section__item:hover .column-section__item__inner {
    opacity: 1;
}
.column-section__item:hover .column-section__thumb img {
    transform: scale(1.15);
}



/* ==================================================
Section06 - FAQ
================================================== */
.faq {
    background: #211715;
    padding: 0 0 min(calc((75) / 560 * 100vw), (75) * 1px);
}
.faq-section__brush {}

.faq-section__heading {
    position: relative;
    background: url('/wp-content/uploads/2026/04/zerokara2026-faq-heading-bg.png') no-repeat top center / 100%;
    padding:
        min(calc((110) / 560 * 100vw), (110) * 1px)
        0
        min(calc((55) / 560 * 100vw), (55) * 1px)
    ;
    margin-bottom: min(calc((38) / 560 * 100vw), (38) * 1px);
}

.faq-section__heading__illust {    
    position: absolute;
}

.faq-section__heading__illust--01 {
    width: min(calc((158) / 560 * 100vw), (158) * 1px);
    left: min(calc((15) / 560 * 100vw), (15) * 1px);
    top: calc(-1 * (min(calc((90) / 560 * 100vw), (90) * 1px)));
}

.faq-section__heading__illust--02 {
    width: min(calc((210) / 560 * 100vw), (210) * 1px);
    right: min(calc((10) / 560 * 100vw), (10) * 1px);
    top: calc(-1 * (min(calc((177) / 560 * 100vw), (177) * 1px)));
}

.faq-section__list {
    font-size: min(calc((21.6) / 560 * 100vw), (21.6) * 1px);
    line-height: 1.6;
    width: min(calc((492) / 560 * 100vw), (492) * 1px);
    margin: auto;
}

.faq-section__item {
    background: #ffffff;
}

.faq-section__item:not(:first-child) {
    margin-top: min(calc((35) / 560 * 100vw), (35) * 1px);
}

.faq-section__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    line-height: 1.6em;
    background: #ffcae2;
    position: relative;
    padding:
        min(calc((20) / 560 * 100vw), (20) * 1px)
        min(calc((27) / 560 * 100vw), (27) * 1px)
        min(calc((20) / 560 * 100vw), (20) * 1px)
        min(calc((18) / 560 * 100vw), (18) * 1px)
    ;
    transition: ease opacity 0.3s;
}

.faq-section__q__inner {
    display: flex;
    align-items: baseline;
}

.faq-section__q__txt {
    flex: 1;
    letter-spacing: 0.15em;
    padding-right: 1.25em;
}

.faq-section__q__toggle {
    position: relative;
    display: block;
    width: min(calc((32) / 560 * 100vw), (32) * 1px);
    height: min(calc((32) / 560 * 100vw), (32) * 1px);
}

.faq-section__q__toggle:before,
.faq-section__q__toggle:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: min(calc((6) / 560 * 100vw), (6) * 1px);
    background: #000000;
}
.faq-section__q__toggle:after {
    transform: rotate(90deg);
}

.faq-section__a {
    font-weight: 500;
    line-height: 1.6em;
    padding:
        min(calc((27) / 560 * 100vw), (27) * 1px)
        min(calc((18) / 560 * 100vw), (18) * 1px)
        min(calc((32) / 560 * 100vw), (32) * 1px)
    ;
}

.faq-section__a__inner {
    display: flex;
    align-items: baseline;
}

.faq-section__a__txt {
    flex: 1;
    letter-spacing: 0.15em;
}

/* 疑似要素テキスト */
.faq-section__q__inner:before,
.faq-section__a__inner:before {
    display: block;
    color: #fa0064;
    font-size: 1.17em;
    width: 1.7em;
    font-weight: 700;
    line-height: inherit;
}
.faq-section__q__inner:before {
    content: "Ｑ.";
}
.faq-section__a__inner:before {
    content: "Ａ.";
}

/* Hover */
.faq-section__q:hover {
    cursor: pointer;
    opacity: 0.8;
}



/* ==================================================
Section07 - SNS
================================================== */
.sns {
    background: #ff6ca8;
}

.sns-section__brush {}

.sns-section__heading {
    position: relative;
    padding: min(calc((118) / 560 * 100vw), (118) * 1px) 0 0;
}

.sns-section__heading__txt {
    color: #ffffff;
    font-size: min(calc((28.5) / 560 * 100vw), (28.5) * 1px);
    line-height: 1.7;
    letter-spacing: 0.15em;
    text-indent: 0.65em;
    text-align: center;
    font-weight: 700;
}

.sns-section__heading__illust {
    position: absolute;
}

.sns-section__heading__illust--01 {
    width: min(calc((160) / 560 * 100vw), (160) * 1px);
    left: min(calc((13) / 560 * 100vw), (13) * 1px);
    top: calc(-1 * (min(calc((52) / 560 * 100vw), (52) * 1px)));
}

.sns-section__heading__illust--02 {
    width: min(calc((307) / 560 * 100vw), (307) * 1px);
    right: min(calc((0) / 560 * 100vw), (0) * 1px);
    top: calc(-1 * (min(calc((88) / 560 * 100vw), (88) * 1px)));
}

.sns-section__list {
    display: flex;
    width: min(calc((366) / 560 * 100vw), (366) * 1px);
    margin: auto;
    justify-content: space-between;
}

.sns-section__item {
    width: min(calc((152) / 560 * 100vw), (152) * 1px);
}



/* ==================================================
Section08 - Kensaku
================================================== */
.kensaku {
}
.kensaku__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fa0064;
    font-size: min(calc((38) / 560 * 100vw), (38) * 1px);
    line-height: 1;
    padding-bottom: 0.15em;
    border: min(calc((11) / 560 * 100vw), (11) * 1px) solid #fa0064;
    height: min(calc((146) / 560 * 100vw), (146) * 1px);
}
.kensaku__icon {
    margin: 0 0.3em 0 0;
    width: 1.05em;
}
.kensaku__txt {
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    font-weight: 700;
}



/* ==================================================
Javascript
================================================== */
/* START - Swiper */
/* END - Swiper */

/* START - Toggle */
    /* 汎用 */
    .js-toggle .js-toggle-content {
        display: none;
    }
    /* FAQ */
    .open .faq-section__q__toggle:after {
        opacity: 0;
    }
/* END - Toggle */

/* START - VideoModal */
    /* 動画ギャラリー */
    .gallery-section__modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        margin: auto;
        display: none;
    }    
    .gallery-section__modal__overlay {
        background: rgba(0,0,0,0.7);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .gallery-section__modal__content {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        margin: auto;
        transform: translateY(-50%);
        z-index: 1001;
        width: 75%;
    }
    .gallery-section__modal__player {
        position: relative;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        padding-top: 56.25%;
        height: 0;
    }
    .gallery-section__modal__player iframe {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    .gallery-section__modal__close {
        position: absolute;
        right: 0;
        bottom: calc(100% + min(calc((10) / 560 * 100vw), (10) * 1px));
        width: min(calc((32) / 560 * 100vw), (32) * 1px);
        height: min(calc((32) / 560 * 100vw), (32) * 1px);
        cursor: pointer;
    }
    .gallery-section__modal__close:before,
    .gallery-section__modal__close:after {
        content: "";
        display: block;
        width: min(calc((6) / 560 * 100vw), (6) * 1px);
        height: calc(100% * 1.414); /* 正方形の対角線 */
        background: #ffffff;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .gallery-section__modal__close:before {
        transform: rotate(-45deg);
    }
    .gallery-section__modal__close::after {
        transform: rotate(45deg);
    }
    .gallery-section__modal__close:after {}
    @media screen and (max-width: 767px) {
        .gallery-section__modal__content {
            width: 90%;
        }
    }
/* END - VideoModal */