@charset "UTF-8";

/* =========================
mainVisual
========================= */
.mainVisual {
    position: relative;
}

.mainVisual__bg--pc {
    display: none;
}

.mainVisual__bg--sp {
    display: block;
    width: 100%;
}

/* logo */
.mainVisual__ttl {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 位置 */
    top: 5%;
    /* 65px */
    left: 50%;
    transform: translateX(-50%);
}

.logo {
    width: 350px;
    height: auto;
    aspect-ratio: 350 / 25;
    margin-top: 16.2%;
    /* 65px */

    /* anim */
    opacity: 0;
    transform: translateY(15px);
    letter-spacing: 0.45em;
    animation: logoFade 1.2s ease forwards;
}

/* logo anim */
@keyframes logoFade {
    0% {
        opacity: 0;
        transform: translateY(15px);
        letter-spacing: .45em;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: .35em;
    }
}

.logo img {
    animation: sparkle 5s ease-in-out infinite;
}

@keyframes sparkle {

    0%,
    100% {
        filter: brightness(100%);
    }

    50% {
        filter: brightness(120%);
    }
}

/* anim end */

.catchcopy {
    font-family: "Zen Old Mincho", serif;
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 700;
    color: var(--primary-deepblue);
    margin-top: 10px;

    /* anim */
    opacity: 0;
    transform: translateY(10px);
    animation: catchcopyFade .9s ease forwards;
    animation-delay: .45s;
}

/* catchcopy anim */
@keyframes catchcopyFade {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* anim end */

.mainVisual__doll {
    position: absolute;
    width: 47.9%;
    height: auto;
    left: 36%;
    top: 44%;
    animation: float 5s ease-in-out infinite;
}

.mainVisual__doll img {
    width: 100%;
    height: auto;
}

/* mainVisual__doll anim */
@keyframes float {
    0% {
        transform: translateY(0);
        rotate: -1deg;
    }

    50% {
        transform: translateY(-18px);
        rotate: 1deg;
    }

    100% {
        transform: translateY(0);
        rotate: -1deg;
    }
}

/* anim end */

/* mainVisual pc */
@media screen and (min-width:769px) {
    .mainVisual {
        position: relative;
    }

    .mainVisual__bg--sp {
        display: none;
    }

    .mainVisual__bg--pc {
        display: block;
        width: 100%;
    }

    /* logo */
    .mainVisual__ttl {
        position: absolute;
        align-items: flex-start;
        transform: none;
        /* 位置 */
        top: 12%;
        /* 108px */
        left: 7.4%;
        /* 107px */
    }

    .logo {
        width: 500px;
        height: auto;
        aspect-ratio: 500 / 36;
    }

    .catchcopy {
        font-size: 2rem;
        line-height: 1;
        margin-top: 43px;
    }

    .mainVisual__doll {
        position: absolute;
        width: 28%;
        left: 55%;
        top: 36%;
    }

}

/* pc 769px */

/* =========================
works
========================= */
.section--works {
    padding-top: 50px;
    position: relative;
}

.works__list {
    margin-top: 40px;
}

.works__item {
    padding: 0 20px;
    /* slide間の余白 */
}

.works__item img {
    display: block;
    width: 270px;
    height: auto;
    aspect-ratio: 270 / 187;
}

.slick__arrow {
    position: absolute;
    top: 65%;
}

.slick__arrow img {
    display: block;
    width: 20px;
    height: 36px;
}

.slick__arrow--left {
    left: 3.3%;
    /* 余白12.5px */
}

.slick__arrow--right {
    right: 3.3%;
    /* 余白12.5px */
}

/* works pc */
@media screen and (min-width:769px) {
    .section--works {
        padding-top: 100px;
    }

    .works__list {
        margin-top: 50px;
    }

    .works__item {
        padding: 0 40px;
        /* slide間の余白 */
    }

    .works__item img {
        width: 550px;
        height: auto;
        aspect-ratio: 550 / 382;
    }

    .slick__arrow {
        position: absolute;
        top: 60%;
    }

    .slick__arrow img {
        display: block;
        width: 37px;
        height: 66px;
    }

    .slick__arrow--left {
        left: 4.4%;
        /* 余白63.8px */
    }

    .slick__arrow--right {
        right: 4.4%;
        /* 余白63.8px */
    }
}

/* pc 769px */

/* =========================
menu
========================= */
.section--menu {
    padding-top: 75px;
}

.topic--menu {
    position: relative;
}

.topic--menu::after {
    content: "";
    display: inline-block;
    width: 250px;
    height: auto;
    aspect-ratio: 250 / 175;
    background-image: url(../images/sectionMenuBG.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* 位置 */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -30%);
}

.menu__list {
    padding-top: 40px;
}

.menu__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 40px 40px;
    width: 280px;
    height: auto;
    aspect-ratio: 280 / 350;
    margin: 100px auto 0;
    /* ガラス風背景 */
    background-color: rgba(233, 239, 255, 0.2);
    backdrop-filter: blur(4px);
    /* safari用filter */
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 1px rgba(var(--primary-WhiteR), 0.6);
    border-radius: 20px;
    border: 3px solid rgba(var(--primary-linecolor));
}

.menu__itemTtl {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.menu__itemTxt {
    line-height: 1.8;
    letter-spacing: 0.08em;
    margin-top: 40px;
}

/* logo装飾 */
.menu__item--logo {
    position: relative;
}

.menu__item--logo::after {
    content: "";
    width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url(../images/logoDesign.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* 位置 */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* banner装飾 */
.menu__item--banner {
    position: relative;
}

.menu__item--banner::after {
    content: "";
    width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url(../images/bannerDesign.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* 位置 */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* flyer装飾 */
.menu__item--flyer {
    position: relative;
}

.menu__item--flyer::after {
    content: "";
    width: 200px;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url(../images/flyerDesign.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* 位置 */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* menu pc */
@media screen and (min-width:769px) {
    .section--menu {
        padding-top: 150px;
    }

    .topic--menu::after {
        width: 500px;
        height: auto;
        aspect-ratio: 500 / 350;
    }

    .menu__list {
        display: flex;
        justify-content: center;
        padding-top: 50px;
        gap: 5.1%;
        /* 60px */
    }

    .menu__item {
        margin: 100px 0 0;
    }
}

/* pc 769px */

/* =========================
price
========================= */
.section--price {
    padding-top: 75px;
    padding-bottom: 75px;
    background-image: url(../images/sp_topPriceBG.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

.price__item {
    margin-top: 40px;
    text-align: center;
}

.price__item img {
    width: 100%;
    height: auto;
}

.price__itemName {
    margin-top: 20px;
    line-height: 1.2;
    letter-spacing: 0.2em;
    font-weight: 500;
}

.price__itemTxt {
    letter-spacing: 0.2em;
    font-weight: 400;
    margin-top: 20px;
}

.price__itemPrice {
    display: block;
    font-family: "Asta Sans", sans-serif;
    font-size: 2rem;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;
    margin-top: 20px;
    padding-bottom: 25px;
}

/* price pc */
@media screen and (min-width:769px) {
    .section--price {
        padding-top: 150px;
        padding-bottom: 150px;
        background-image: url(../images/pc_toppriceBG.png);
    }

    .price__list {
        display: flex;
        justify-content: center;
        margin-top: 50px;
        gap: 17.2%;
        /* 200px */
    }

    .price__item {
        margin-top: 0;
    }

    .price__itemName {
        font-size: 2rem;
    }

    .price__itemTxt {
        font-size: 2rem;
    }

    .price__itemPrice {
        font-size: 2.4rem;
    }
}

/* pc 769px */

/* =========================
about
========================= */
.section--about {
    padding-top: 50px;
    padding-bottom: 75px;
}

/* profile */
.about__profile {
    padding-top: 50px;
}

.profile__flexBox {
    margin-top: 40px;
}

.profile__flexBox img {
    display: block;
    width: 250px;
    height: auto;
    aspect-ratio: 250 / 273;
    flex-shrink: 0;
    margin: 0 auto 0;
}

.profile__box {
    padding: 20px 20px 0 20px;
}

.profile__name {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-align: center;
}

.profile__line {
    border: 3px solid rgba(var(--primary-linecolor));
    border-radius: 20px;
    margin-top: 30px;
}

.profile__catchcopy {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2em;
    margin-top: 30px;
}

.profile__itemTtl {
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2em;
    margin-top: 30px;
    text-align: center;
}

.profile__itemTxt {
    line-height: 1.5;
    letter-spacing: 0.2em;
    margin-top: 10px;
}

/* activity */
.about__activity {
    padding-top: 50px;
}

.activity__txt {
    width: fit-content;
    margin: 40px auto 0;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.activity__item {
    margin-top: 40px;
}

.activity__item img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 0;
}

.activity__itemPf {
    margin-top: 25px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-align: center;
}

.activity__itemEvent {
    display: block;
    font-size: 2rem;
    margin-top: 20px;
    text-align: center;
}

.activity__line {
    display: block;
    width: 300px;
    height: auto;
    aspect-ratio: 300 / 2;
    background-image: url(../images/activity_line.svg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 20px auto 0;
}

.activity__itemDescription {
    line-height: 1.7;
    letter-spacing: 0.2em;
    margin-top: 20px;
}

.activity__timelineTxt {
    width: fit-content;
    line-height: 1.5;
    letter-spacing: 0.1em;
    margin: 40px auto 0;
}

.xTimeline {
    display: block;
    width: 100%;
    max-width: 343px;
    height: 500px;
    margin: 40px auto 0;
}

/* about pc */
@media screen and (min-width:769px) {
    .section--about {
        padding-top: 100px;
        padding-bottom: 150px;
    }

    /* profile */
    .about__profile {
        padding-top: 100px;
    }

    .profile__flexBox {
        display: flex;
        justify-content: center;
        margin-top: 50px;
        gap: 8.6%;
        /* 100px */
    }

    .profile__flexBox img {
        width: 350px;
        height: auto;
        aspect-ratio: 350 / 381;
        margin: 0;
    }

    .profile__box {
        padding: 0;
        width: 550px;
    }

    .profile__name {
        font-size: 2.4rem;
    }

    .profile__catchcopy {
        font-size: 2rem;
    }

    .profile__itemTtl {
        text-align: left;
    }

    /* activity */
    .about__activity {
        padding-top: 100px;
    }

    .activity__txt {
        margin: 50px auto 0;
    }

    .activity__list {
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
        gap: 4.7%;
        /* 55px */
    }

    .activity__item {
        margin-top: 0;
    }

    .activity__item img {
        margin: 0;
    }

    .activity__itemDescription {
        line-height: 1.7;
        letter-spacing: 0.2em;
        margin-top: 20px;
    }

    .activity__timelineTxt {
        margin: 50px auto 0;
    }

    .xTimeline {
        margin-top: 50px;
        max-width: 600px;
    }
}

/* pc 769px */