@charset "utf-8";

/* =========================
gallery
========================= */

/* pulldown/category Area */
.gallery__setPulldownArea {
    margin: 100px 0 0 7.63%;
    position: relative;
    width: 202.5px;
}

.setPulldownList {
    font-size: 1.4rem;
    letter-spacing: 0.10em;
    height: 40px;
    line-height: 40px;
    border-radius: 100px;
    border: 0.5px solid var(--btnColor-bk);
    padding: 0 108px 0 20px;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.gallery__setPulldownArea::after {
    --b: 1px;
    width: 15px;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% 100%, 100% 0, 0 0, 50% 100%, 50% calc(100% - var(--b)), calc(var(--b)*cos(30deg)) calc(var(--b)/2), calc(100% - var(--b)*cos(30deg)) calc(var(--b)/2), 50% calc(100% - var(--b)));
    background: linear-gradient(45deg, var(--textColor-bk));

    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/* Pulldown hover */
.setPulldownList:hover {
    color: var(--textColor-wh);
    border-color: #FFF;
    background-color: var(--categoryColor-05);
}

.gallery__setPulldownArea:hover::after {
    background: linear-gradient(45deg, var(--textColor-wh));
}

/* Pulldown hover END */

.gallery__charaCategoryArea {
    margin: 40px 7.63% 0;
}

.charaCategoryList {
    display: grid;
    grid-template-columns: repeat(auto-fit, 99.5px);
    gap: 20px 17px;
    width: 100%;
    font-size: 1.4rem;
}

.charaCategoryList li {
    border-radius: 100px;
    border: 0.5px solid var(--btnColor-bk);
    width: 99.5px;
    text-align: center;
    cursor: pointer;
}

.charaCategoryList li a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 100px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* category hover */
.charaCategoryList li:hover a,
.charaCategoryList li.active a {
    color: var(--textColor-wh);
}

.charaCategoryList li:hover,
.charaCategoryList li.active {
    border-color: #FFF;
}

.charaCategoryList li:first-child:hover a,
.charaCategoryList li:first-child.active a,
.charaCategoryList li:nth-child(2):hover a,
.charaCategoryList li:nth-child(2).active a {
    background-color: var(--categoryColor-05);
    color: var(--textColor-wh);
}

.charaCategoryList li.kaedeko:hover a,
.charaCategoryList li.kaedeko.active a {
    background-color: var(--categoryColor-kaedeko) !important;
    color: var(--textColor-wh);
}

.charaCategoryList li.asahi:hover a,
.charaCategoryList li.asahi.active a {
    background-color: var(--categoryColor-asahi) !important;
    color: var(--textColor-wh);
}

.charaCategoryList li.toba:hover a,
.charaCategoryList li.toba.active a {
    background-color: var(--categoryColor-toba) !important;
    color: var(--textColor-wh);
}

.charaCategoryList li.shinbashi:hover a,
.charaCategoryList li.shinbashi.active a {
    background-color: var(--categoryColor-shinbashi) !important;
    color: var(--textColor-wh);
}

.charaCategoryList li.asagi:hover a,
.charaCategoryList li.asagi.active a {
    background-color: var(--categoryColor-asagi) !important;
    color: var(--textColor-wh);
}

.charaCategoryList li.hanada:hover a,
.charaCategoryList li.hanada.active a {
    background-color: var(--categoryColor-hanada) !important;
    color: var(--textColor-wh);
}

.charaCategoryList li.yamabuki:hover a,
.charaCategoryList li.yamabuki.active a {
    background-color: var(--categoryColor-yamabuki) !important;
    color: var(--textColor-wh);
}

.charaCategoryList li.beni:hover a,
.charaCategoryList li.beni.active a {
    background-color: var(--categoryColor-beni) !important;
    color: var(--textColor-wh);
}

/* category hover END */

.charaCategoryList li:nth-child(3) {
    grid-column: 1;
}

/* gallery Area */
.galleryArea {
    margin: 50px 7.63% 0;
}

.galleryList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.galleryItem img {
    width: 156.5px;
    height: 231px;
    object-fit: cover;
}

/* 393px以下 */
@media screen and (max-width: 392px) {
    .charaCategoryList {
        grid-template-columns: repeat(auto-fit, 94.5px);
    }

    .galleryItem img {
        width: 148.5px;
        height: 218px;
    }
}

/* 393px以下 */

/* PC 769px */
@media screen and (min-width: 769px) {

    /* pulldown/category Area */
    .gallery__setPulldownArea {
        margin: 100px 0 0 5.55%;
    }

    .gallery__charaCategoryArea {
        margin: 30px 5.55% 0;
    }

    .charaCategoryList {
        grid-template-columns: repeat(auto-fit, 120px);
        gap: 20px;
    }

    .charaCategoryList li {
        border-radius: 120px;
        width: 120px;
    }

    /* gallery Area */
    .galleryArea {
        margin: 50px 5.55% 0;
    }

    .galleryList {
        gap: 70px;
    }

    .galleryItem img {
        width: 380px;
        height: 562px;
    }

}

/* PC 769px */

/* =========================
gallery detail
========================= */

.galleryDetail {
    width: 100%;
    position: fixed;
    inset: 0;
    background: var(--backgroundColor-wh);
    z-index: 1000;
    flex-direction: column;
    justify-content: flex-start;
    overflow: auto;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
}

.gallery__close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 15px;
    right: 15px;
    transition: transform 0.2s ease;
}

.gallery__close:hover {
    transform: scale(1.5);
}

.gallery__close span {
    width: 12.23px;
    height: 0.5px;
    background-color: var(--btnColor-bk);
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    display: block;
}

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

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

.galleryDetail img {
    width: 373px;
    height: 552px;
    object-fit: cover;
    margin: 80px auto 0;
}

.galleryText {
    margin: 20px 0 80px 7.63%;
    font-family: "Noto Serif JP";
}

#galleryText__SET {
  display: inline-flex;
  align-items: center;
}

#galleryText__SET::before {
  content: "Set：";
}

#galleryText__title {
    font-size: 2.5rem;
    letter-spacing: 0.10em;
    margin-top: 5px;
}

#galleryText__name {
    font-size: 1.0rem;
    letter-spacing: 0.10em;
    margin-top: 5px;
}

.gallery__prev,
.gallery__next {
    display: none;
}

/* PC 769px */
@media screen and (min-width: 769px) {
    .galleryDetail {
        flex-direction: row-reverse;
        justify-content: center;
        gap: 50px;
    }

    .gallery__close {
        width: 36px;
        height: 36px;
        top: 25px;
        right: 25px;
    }

    .gallery__close span {
        width: 18.34px;
        height: 0.5px;
    }

    .galleryDetail img {
        width: 625px;
        height: 924px;
        margin: 50px 6.94% 50px 0;
    }

    .galleryText {
        margin: 200px 0 0 6.94%;
    }

    #galleryText__SET {
        font-size: 2.0rem;
        letter-spacing: 0.10em;
    }

    #galleryText__title {
        font-size: 3.0rem;
        margin-top: 10px;
    }

    #galleryText__name {
        font-size: 1.5rem;
        margin-top: 10px;
    }

    .gallery__prev,
    .gallery__next {
        display: block;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        z-index: 10;
    }

    .gallery__prev img,
    .gallery__next img {
        width: 30px;
        height: 30px;
        margin: 0;
        transition: transform 0.2s ease;
    }

    .gallery__prev img:hover,
    .gallery__next img:hover {
        transform: scale(1.2);
    }

    .gallery__prev {
        left: 30px;
    }

    .gallery__next {
        right: 30px;
    }
}

/* PC 769px */

/*==========================
fadeIn
==========================*/
.fadeIn {
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated {
    transform: translate(0, 0);
    opacity: 1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.95) translateY(5px);
    }
}

.galleryDetail.is-active {
    opacity: 1;
    pointer-events: auto;
}

.galleryDetail.is-hide {
    opacity: 0;
    pointer-events: none;
}