@charset "utf-8";

/* ==============================
loading
   ============================== */

:root {
    --pink-bg: #f5c8cf;
    --pink-mid: #e8a0ac;
    --pink-dark: #b07080;
    --pink-logo: #c48090;
    --white: #fff;
    --font-family: 'Italiana', 'EB Garamond', Georgia, serif;
}

body.loading-active {
    overflow: hidden;
}


/* ── ローディング画面全体 ── */

.loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 100svh;
    background: var(--pink-bg);
    font-family: var(--font-family);
    transition: transform 1.1s cubic-bezier(.76, 0, .24, 1), opacity 0.7s ease;
    will-change: transform, opacity;
}

html.loading-screen-visited .loading {
    display: none;
}

.loading.fade-out {
    opacity: 0.98;
    pointer-events: none;
    transform: translate3d(0, -100%, 0);
}


/* ── ロゴ ── */

.logo-wrap {
    text-align: center;
    margin-bottom: 22px;
    animation: fadeDown 1s ease both;
}

.logo-wrap img {
    display: block;
    width: 145px;
    height: auto;
}


/* ── イラストウィンドウ（クリッピング枠） ── */

.illust-window {
    width: 250px;
    height: 65px;
    overflow: hidden;
    position: relative;
    animation: fadeIn 1s ease 0.3s both;
}


/* イラストトラック：重ね合わせのコンテナ */

.illust-track {
    position: relative;
    width: 250px;
    height: 65px;
}


/* 各スライド：絶対配置で重ねる */

.illust-slide {
    position: absolute;
    inset: 0;
    width: 250px;
    height: 65px;
    overflow: hidden;
    opacity: 0;
    /* フェードイン：ふわっとゆっくり現れる */
    transition: opacity 0.5s ease-in-out;
}


/* 表示中スライド */

.illust-slide.active {
    opacity: 1;
}

.illust-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}


/* ── Loading テキスト ── */

.loading-text {
    font-family: Italiana;
    font-size: 3.2rem;
    color: var(--primary-dustyPink);
    letter-spacing: 0.02em;
    display: flex;
    gap: 1px;
}


/* 各文字をずらしてウェーブアニメ */

.loading-text span {
    display: inline-block;
    animation: wave 1.6s ease-in-out infinite;
}

.loading-text span:nth-child(1) {
    animation-delay: 0.00s;
}

.loading-text span:nth-child(2) {
    animation-delay: 0.08s;
}

.loading-text span:nth-child(3) {
    animation-delay: 0.16s;
}

.loading-text span:nth-child(4) {
    animation-delay: 0.24s;
}

.loading-text span:nth-child(5) {
    animation-delay: 0.32s;
}

.loading-text span:nth-child(6) {
    animation-delay: 0.40s;
}

.loading-text span:nth-child(7) {
    animation-delay: 0.48s;
}


/* ── keyframe ── */

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes wave {
    0%,
    60%,
    100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-5px);
    }
}

@keyframes tulipReveal {
    from {
        clip-path: inset(100% 0 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .loading,
    .illust-slide {
        transition-duration: 0.01ms;
    }
    .logo-wrap,
    .illust-window,
    .loading-text span {
        animation: none;
    }
}


/* ======= petal animation ========= */

.content-with-petals {
    position: relative;
    overflow: hidden;
}

#petals-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.petal {
    width: 6.2rem;
    height: 6.2rem;
    display: inline-block;
    position: absolute;
    top: -10rem;
    z-index: 10;
}

.petal .rotate img.askew {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.petal .rotate {
    animation: driftyRotate 1s infinite both ease-in-out;
    perspective: 1000;
}

.petal .askew {
    background: currentColor;
    transform: skewY(10deg);
    display: block;
    width: 2rem;
    height: 2rem;
    animation: drifty 1s infinite alternate both ease-in-out;
    perspective: 1000;
}

.petal {
    color: rgba(0, 0, 0, 0);
}

.petal:nth-of-type(7n) .askew {
    animation-delay: -.6s;
    animation-duration: 2.25s;
}

.petal:nth-of-type(7n + 1) .askew {
    animation-delay: -.879s;
    animation-duration: 3.5s;
}

.petal:nth-of-type(7n + 2) .askew {
    animation-delay: -.11s;
    animation-duration: 1.95s;
}

.petal:nth-of-type(7n + 3) .askew {
    animation-delay: -.246s;
    animation-duration: .85s;
}

.petal:nth-of-type(7n + 4) .askew {
    animation-delay: -.43s;
    animation-duration: 2.5s;
}

.petal:nth-of-type(7n + 5) .askew {
    animation-delay: -.56s;
    animation-duration: 1.75s;
}

.petal:nth-of-type(7n + 6) .askew {
    animation-delay: -.76s;
    animation-duration: 1.5s;
}

.petal:nth-of-type(9n) .rotate {
    animation-duration: 2s;
}

.petal:nth-of-type(9n + 1) .rotate {
    animation-duration: 2.3s;
}

.petal:nth-of-type(9n + 2) .rotate {
    animation-duration: 1.1s;
}

.petal:nth-of-type(9n + 3) .rotate {
    animation-duration: 1.75s;
}

.petal:nth-of-type(9n + 4) .rotate {
    animation-duration: 4.3s;
}

.petal:nth-of-type(9n + 5) .rotate {
    animation-duration: 3.05s;
}

.petal:nth-of-type(9n + 6) .rotate {
    animation-duration: 2.76s;
}

.petal:nth-of-type(9n + 7) .rotate {
    animation-duration: 7.6s;
}

.petal:nth-of-type(9n + 8) .rotate {
    animation-duration: 1.78s;
}

@keyframes drifty {
    0% {
        transform: skewY(10deg) translate3d(-250%, 0, 0);
        display: block;
    }
    100% {
        transform: skewY(-12deg) translate3d(250%, 0, 0);
        display: block;
    }
}

@keyframes driftyRotate {
    0% {
        transform: rotateX(0);
        display: block;
    }
    100% {
        transform: rotateX(359deg);
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .petal {
        width: 4.2rem;
        height: 4.2rem;
    }
}


/*メインビジュアル */

.fv {
    position: relative;
    padding: 24px 2.4%;
    background: var(--primary-palePink);
}

.fv::before {
    position: absolute;
    content: "";
    inset: 0;
    background-image: url(../images/top/FV_Background_frilly.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    opacity: 1;
    z-index: 0;
    pointer-events: none;
}

.fv__content {
    margin: 0 auto;
    transform-origin: center;
    position: relative;
    width: 100%;
    height: auto;
    top: -48px;
}

.fv__content::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 32px;
    z-index: 2;
    pointer-events: none;
}

.fv__illust--sp {
    display: none;
}

.fv__illust--pc {
    max-height: calc(100vh - 64px);
    width: auto;
    margin: auto;
    display: block;
    border-radius: 32px;
    z-index: 1;
}

.fv__bottom {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 3.3%;
    gap: 4vw;
}

.fv__title {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.2rem;
    position: relative;
    top: -28px;
    text-decoration: none;
    color: inherit;
}

.fv__logo {
    flex: 0 1 auto;
    position: relative;
    top: -4px;
}

.fv__logo img {
    width: 30vw;
    height: auto;
    display: block;
}

.fv__txt {
    color: var(--primary-dustyPink);
    font-family: Italiana;
    font-size: 4vw;
    line-height: 1.5;
    transform: translateY(-10px);
    white-space: nowrap;
}

.fv__scroll {
    position: relative;
    width: 12vw;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

.fv__scroll-circle {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    animation: rotateCircle 8s linear infinite;
    object-fit: contain;
    margin: auto;
}

@keyframes rotateCircle {
    to {
        transform: rotate(360deg);
    }
}

.fv__scroll-arrow {
    position: absolute;
    inset: 0;
    margin: auto;
    top: 44%;
    left: 23%;
    width: 23%;
    max-width: 23%;
    height: auto;
    display: block;
    transform: translate(-50%, -50%);
}


/* SP切り替え */

@media screen and (max-width: 768px) {
    .fv {
        padding: 24px 0 0 0;
        z-index: 0;
    }
    .fv::before {
        background-image: none;
    }
    .fv::before,
    .fv::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 80px;
        background-repeat: no-repeat;
        background-size: cover;
        pointer-events: none;
        z-index: -1;
    }
    /* 上のレース */
    .fv::before {
        top: -9%;
        height: 24vw;
        background-image: url(../images/top/FV_Background_frillySpTop.png);
        background-position: center;
    }
    /* 下のレース */
    .fv::after {
        bottom: -1%;
        height: 28vw;
        left: -22px;
        background-image: url(../images/top/FV_Background_frillySpBottom.png);
        background-position: center;
        z-index: 0;
    }
    .fv__content {
        overflow: hidden;
        z-index: 100;
    }
    .fv__illust--pc {
        display: none;
    }
    .fv__illust--sp {
        display: block;
        width: 128%;
        max-width: none;
        border-radius: 24px;
        transform: translateX(-8%);
    }
    .fv__scroll {
        display: none;
    }
    .fv__bottom {
        position: absolute;
        left: 0;
        right: 0;
        bottom: clamp(-13px, calc(1.8vw - 4vw), 14px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0;
        z-index: 200;
    }
    .fv__title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        position: static;
    }
    .fv__logo {
        position: static;
        text-align: center;
        width: 100%;
        transform: translateX(-10px);
    }
    .fv__logo img {
        width: calc(202 / 375 * 100vw);
        display: inline-block;
    }
    .fv__txt {
        font-size: 6.4vw;
        text-align: center;
        transform: none;
        margin-top: -2px;
    }
}


/* fv_sp 768px */


/* lead */

.lead {
    padding: calc(200 / 1440 * 100vw) 12% calc(380 / 1440 * 100vw);
    position: relative;
    overflow: hidden;
}

.lead::after {
    position: absolute;
    content: "";
    background-image: url(../images/top/friliy_lead.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 23vw;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.lead__inner {
    background-image: url(../images/top/BackgroundFlower.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    margin-bottom: 56px;
    z-index: 1;
}

.lead__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.ribbon {
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    aspect-ratio: 1;
    width: 8vw;
}

@keyframes ribbonFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(+2vw);
    }
    100% {
        transform: translateY(0);
    }
}

.ribbon--1 {
    background-image: url(../images/top/ribbon_01.png);
    top: -14vw;
    right: 2vw;
    width: 14vw;
    animation: ribbonFloat 8s ease-in-out infinite;
}

.ribbon--2 {
    background-image: url(../images/top/ribbon_02.png);
    top: 4vw;
    right: 1vw;
    animation: ribbonFloat 7s ease-in-out infinite;
    animation-delay: 0.4s;
}

.ribbon--3 {
    background-image: url(../images/top/ribbon_03.png);
    bottom: -8vw;
    left: -3vw;
    width: 12vw;
    animation: ribbonFloat 6.5s ease-in-out infinite;
    animation-delay: 1s;
}

.ribbon--4 {
    background-image: url(../images/top/ribbon_04.png);
    bottom: -16vw;
    left: 8vw;
    animation: ribbonFloat 7s ease-in-out infinite;
    animation-delay: 0.2s;
}

.lead__label {
    color: var(--primary-darkGreen);
    font-family: Italiana;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0.64px;
}

.lead__copy {
    color: var(--primary-darkGreen);
    font-family: Italiana;
    font-size: var(--fz-lead);
    line-height: 1.5;
    margin-top: 32px;
    opacity: 0.64;
}

@keyframes leadFade {
    from {
        opacity: 0;
        transform: perspective(400px) translate3d(-10px, -14px, 0) rotate3d(1, -1, 0, 8deg);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.lead__right {
    margin-left: auto;
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.lead__text-ja {
    color: var(--primary-darkGreen);
    font-size: var(--fz-16);
    letter-spacing: 0.02rem;
    margin-top: 80px;
}

.lead__sign {
    margin-top: 24px;
}

.lead__sign img {
    width: 15vw;
    height: auto;
    display: block;
}


/* SP切り替え */

@media screen and (max-width: 768px) {
    .lead {
        margin-top: 86px;
        padding: 24vw 6% 32vw;
    }
    .lead__inner {
        background-position: center 8%;
        margin-bottom: calc(56 / 375 * 100vw);
    }
    .lead__label {
        font-size: clamp(12px, 3.2vw, 14px);
        letter-spacing: clamp(0.0467em, 0.3vw, 0.05em);
    }
    .lead__copy {
        font-size: clamp(24px, 6vw, 28px);
        line-height: 1.5;
        margin-top: calc(32 / 375 * 100vw);
    }
    .lead__right {
        margin-top: calc(100 / 375 *100vw);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .lead__text-ja {
        color: var(--primary-darkGreen);
        font-size: var(--fz-13sp);
        letter-spacing: 0.02rem;
        margin-top: 0;
        max-width: calc(240 / 375 * 100vw);
    }
    .lead__sign {
        margin-top: 16px;
    }
    .lead__sign img {
        width: calc(96 / 375 * 100vw);
        display: block;
    }
    .ribbon {
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        aspect-ratio: 1;
        width: 8vw;
    }
    .ribbon--1 {
        top: -20vw;
        right: 3vw;
        width: 18vw;
    }
    .ribbon--2 {
        top: 1vw;
        right: 4vw;
        width: 10vw;
    }
    .ribbon--3 {
        bottom: -5vw;
        left: 2vw;
        width: 16vw;
    }
    .ribbon--4 {
        bottom: -14vw;
        left: 14vw;
        width: 10vw;
    }
}


/*================== 
about 
=================== */

.about {
    padding: 104px calc(190 /1440 * 100vw) 24px calc(190 /1440 * 100vw);
    overflow: hidden;
}

.about__inner {
    background-color: var(--primary-palePink);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.about__text-block {
    padding-top: clamp(16px, 2vw, 40px);
    align-items: center;
    width: calc(448 / 1440 * 100vw);
}

.about__header {
    margin-bottom: 48px;
}

.about__title {
    margin: 0;
}

.about__title img {
    display: block;
    width: clamp(240px, 25vw, 360px);
    height: auto;
}

.about__subtitle {
    margin: 0 0 28px;
    color: var(--primary-dustyPink);
    font-family: Italiana;
    font-size: var(--fz-about-name);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.about__description {
    margin-top: 24px;
    color: var(--primary-darkGreen);
    font-size: var(--fz-16);
    letter-spacing: 0.08em;
}

.about__more {
    display: flex;
    gap: 8vh;
    margin-top: 48px;
    justify-content: center;
}

.about__more-text {
    margin-top: 48px;
    color: var(--primary-dustyPink);
    font-family: Italiana;
    font-size: var(--fz-32);
    line-height: 1.5;
    white-space: nowrap;
}

.about__more-btn {
    align-self: center;
}

.about__visual {
    position: relative;
    display: grid;
    flex: 1;
    justify-content: end;
}

.about__figure {
    position: relative;
    width: calc(455 / 1440 * 100vw);
}

.about__figure img {
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
    position: relative;
}

@keyframes rotateCircle {
    0% {
        transform: totate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.about__figure::before {
    position: absolute;
    content: "";
    top: -94px;
    right: -168px;
    width: calc(392 / 1440 * 100vw);
    aspect-ratio: 1 / 1;
    background-image: url(../images/top/About_circle.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
    animation: rotateCircle 24s linear infinite reverse;
}


/* SP切り替え */

@media screen and (max-width: 768px) {
    .about {
        padding: 80px calc(24 / 375 * 100vw);
        margin-bottom: 48px;
    }
    .about__inner {
        display: flex;
        flex-direction: column;
        gap: 64px;
        padding: 0;
    }
    .about__visual {
        display: flex;
        order: 1;
        justify-content: center;
    }
    .about__figure {
        width: calc(327 / 375 * 100vw);
    }
    .about__figure::before {
        top: -32px;
        right: -56px;
        width: calc(144 / 375 * 100vw);
    }
    .about__text-block {
        align-items: center;
        width: 100%;
        padding-top: 0;
        max-width: 375px;
        margin: 0 auto;
    }
    .about__title img {
        display: block;
        width: clamp(120px, 38.933vw, 146px);
    }
    .about__subtitle {
        margin: 0 auto;
        font-size: clamp(28px, 5vw, 32px);
    }
    .about__description {
        font-size: var(--fz-13sp);
        letter-spacing: 0.02em;
        text-align: left;
    }
    .about__more-text {
        margin-top: 40px;
        font-size: var(--fz-16sp);
        text-align: center;
    }
    .about__more {
        gap: 8vh;
        justify-content: center;
        margin-top: 16px;
    }
}


/* ================= 
works
================= */

.works {
    position: relative;
    background-color: var(--primary-palePink);
    padding: calc(160 / 1440 * 100vw) calc(80 / 1440 * 100vw);
    overflow: hidden;
}

.works__inner {
    position: relative;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr calc(412 / 1440 * 100vw) 1fr;
    align-items: center;
    column-gap: clamp(32px, 5vw, 72px);
    z-index: 1;
}


/* レース共通 */

.works__lace {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    background: url(../images/top/Works_race.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 1 / 1;
}

@keyframes rotateLace {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/*  各レース */

.works__lace--1 {
    width: clamp(190px, 24vw, 480px);
    top: 14%;
    left: 23%;
    animation: rotateLace 40s linear infinite;
}

.works__lace--2 {
    width: 34vw;
    top: 38%;
    left: -8%;
    animation: rotateLace 50s linear infinite reverse;
}

.works__lace--3 {
    width: 21vw;
    bottom: 8%;
    left: 9%;
    animation: rotateLace 50s linear infinite;
}

.works__lace--4 {
    width: 28vw;
    top: 23%;
    right: -6%;
    animation: rotateLace 50s linear infinite reverse;
}

.works__lace--5 {
    width: 28vw;
    bottom: 14%;
    right: 21%;
    animation: rotateLace 40s linear infinite;
}

.works__lace--6 {
    display: none;
}


/* 左右カラム */

.works__col {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vw, 48px);
}


/* 左カラム */

.works__col--left {
    align-items: start;
}

.works__col--left .works__item:nth-child(1) {
    aspect-ratio: 336 / 442;
}

.works__col--left .works__item:nth-child(2) {
    aspect-ratio: 304 / 332;
    margin-left: 5.3vw;
    margin-top: 16.6vw;
}


/* 中央カラム */

.works__col--center {
    align-items: center;
    position: relative;
}

.works_cage-background {
    width: calc(303 / 1440 * 100vw);
}

.works_cage-wrapper {
    position: absolute;
    top: 77%;
    transform: translate(0, -50%);
    display: grid;
    justify-items: center;
}

.works__title,
.works__cage {
    z-index: 100;
}

.works__cage {
    margin-top: 24px;
}

.works__title img {
    width: min(360px, 100%);
    height: auto;
    display: block;
    margin: 0 auto;
}

.works__lead {
    color: var(--primary-dustyPink);
    font-family: Italiana;
    font-size: var(--fz-24);
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-top: 96px;
    text-align: center;
}


/* 右カラム */

.works__col--right {
    align-items: flex-end;
}

.works__col--right .works__item:nth-child(1) {
    aspect-ratio: 227 / 248;
    margin-left: 7.5vw;
}

.works__col--right .works__item:nth-child(2) {
    aspect-ratio: 300 / 202;
    margin-right: 2.43vw;
    margin-top: 16vw;
}

.works__col--right .works__item:nth-child(3) {
    aspect-ratio: 326 / 428;
    margin-left: 3.2vw;
    margin-top: 12.6vw;
}


/* 各画像カード */

.works__item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}


/*====== SP切り替え =======*/

@media screen and (max-width: 768px) {
    .works {
        padding: 148px 6.4% calc(64 / 375 * 100vw);
    }
    .works__inner {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 24px;
    }
    .works__col {
        display: contents;
        gap: 0;
    }
    /* 中央ブロック */
    .works__col--center {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .works_cage-background {
        width: calc(163 / 375 * 100vw);
    }
    .works__title img {
        display: block;
        width: calc(146 / 375 * 100vw);
    }
    .works__cage {
        margin-top: 16px;
    }
    .works_cage-wrapper {
        position: absolute;
        top: 77%;
        transform: translate(0, -50%);
        display: grid;
        justify-items: center;
    }
    .works__lead {
        font-size: var(--fz-16sp);
        margin-top: 0;
        margin-top: 72px;
    }
    .works__inner::before {
        width: calc(163 / 375 * 100vw);
        top: calc(-334 / 375 * 100vw);
    }
    .works__col--left .works__item:nth-child(1) {
        aspect-ratio: 194 / 256;
        margin-right: calc(84 / 375 * 100vw);
    }
    .works__col--left .works__item:nth-child(2) {
        aspect-ratio: 168 / 184;
        margin-left: calc(88 / 375 * 100vw);
        margin-top: calc(32 / 375 * 100vw);
        margin-right: calc(46 / 375 * 100vw);
        margin-bottom: calc(24 / 375 * 100vw);
    }
    .works__col--right .works__item:nth-child(1) {
        aspect-ratio: 162 / 182;
        margin-left: calc(88 / 375 * 100vw);
        margin-right: calc(46 / 375 * 100vw);
        margin-top: calc(96 / 375 * 100vw);
    }
    .works__col--right .works__item:nth-child(2) {
        aspect-ratio: 217 / 146;
        margin-right: calc(105 / 375 * 100vw);
        margin-top: calc(42 / 375 * 100vw);
    }
    .works__col--right .works__item:nth-child(3) {
        aspect-ratio: 194 / 256;
        margin-left: calc(84 / 375 * 100vw);
        margin-top: calc(44 / 375 * 100vw);
    }
    /*  各レース */
    .works__lace--1 {
        width: calc(193 / 375 * 100vw);
        top: 0%;
        left: 47%;
    }
    .works__lace--2 {
        width: calc(184 / 375 * 100vw);
        top: 20%;
        left: -13%;
    }
    .works__lace--3 {
        width: calc(141 / 375 * 100vw);
        top: 31%;
        left: 74%;
    }
    .works__lace--4 {
        width: calc(141 / 375 * 100vw);
        top: 51%;
        left: -6%;
    }
    .works__lace--5 {
        width: calc(219 / 375 * 100vw);
        bottom: 26%;
        right: -14%;
    }
    .works__lace--6 {
        display: block;
        width: calc(197 / 375 * 100vw);
        bottom: 12%;
        left: -4%;
        animation: rotateLace 40s linear infinite reverse;
    }
}


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

.gallery {
    position: relative;
    background-color: var(--primary-palePink);
    padding: calc(146 / 1440 * 100vw) 13% calc(274 / 1440 * 100vw);
    margin-top: 80px;
}


/* blush background */

.gallery__blush-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.gallery__blush {
    position: absolute;
}

.gallery__blush--1,
.gallery__blush--4 {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235, 180, 208, 1), transparent 70%);
    filter: blur(32px);
    opacity: 1;
}

.gallery__blush--2,
.gallery__blush--3 {
    position: absolute;
    background-image: url(../images/top/Gallery_heartBlur.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: 0.8;
}

.gallery__blush--1 {
    width: calc(263 / 1440 * 100vw);
    aspect-ratio: 1 / 1;
    bottom: calc(403 / 1440 * 100vw);
    left: calc(-11 / 1440 * 100vw);
}

.gallery__blush--4 {
    width: calc(274 / 1440 * 100vw);
    aspect-ratio: 1 / 1;
    top: calc(-52 / 1440 * 100vw);
    right: calc(56 / 1440 * 100vw);
}

.gallery__blush--2 {
    width: calc(190 / 1440 * 100vw);
    aspect-ratio: 1 / 1;
    top: calc(-56 /1440 * 100vw);
    left: calc(397 / 1440 * 100vw);
}

.gallery__blush--3 {
    width: calc(248 / 1440 * 100vw);
    aspect-ratio: 1 / 1;
    bottom: calc(384 / 1440 * 100vw);
    right: calc(493 / 1440 * 100vw);
}

.gallery__inner {
    margin: 0 auto;
    position: relative;
    display: flex;
    z-index: 2;
    flex-direction: column;
}

.gallery__list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: calc(28 / 1440 * 100vw);
    margin: 0 auto;
    margin-bottom: calc(105 / 1440 * 100vw);
    order: 1;
}

.gallery__item img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery__item:nth-child(1) {
    transform: translateY(-120px);
}

.gallery__item:nth-child(3) {
    transform: translateY(-120px);
}

.gallery__more {
    display: flex;
    align-items: center;
    gap: 16px;
    order: 2;
    width: fit-content;
    margin-left: auto;
    margin-right: 48px;
}

.gallery__title img {
    display: block;
    width: clamp(260px, 32vw, 420px);
    height: auto;
}

.gallery__more-btn {
    margin-left: 0 !important;
    flex: 0 0 auto;
}

.gallery::after {
    position: absolute;
    content: "";
    background-image: url(../images/top/frilly_gallery.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: 18vw;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}


/* ==== SP切り替え====== */

@media screen and (max-width: 920px) {
    .gallery {
        padding: calc(80 / 375 * 100vw) 6.4% calc(122 / 375 * 100vw);
        margin-top: 0;
    }
    .gallery__inner {
        max-width: 100%;
        margin: 0 auto;
    }
    .gallery__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: calc(16 / 375 * 100vw);
        row-gap: calc(80 / 375 * 100vw);
        justify-items: center;
    }
    .gallery__item:nth-child(1),
    .gallery__item:nth-child(3) {
        transform: none;
    }
    .gallery__item:nth-child(2),
    .gallery__item:nth-child(4) {
        transform: translateY(86px);
    }
    .gallery__more {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        margin-right: 24px;
        margin-top: 80px;
    }
    .gallery__title img {
        width: calc(146 / 375 * 100vw);
    }
    .gallery__blush--1 {
        width: calc(141 / 375 * 100vw);
        bottom: 0;
        top: calc(301 / 375 * 100vw);
        left: calc(-8 / 375 * 100vw);
    }
    .gallery__blush--2 {
        width: calc(148 / 375 * 100vw);
        top: calc(623 / 375 * 100vw);
        left: calc(26 / 375 * 100vw);
    }
    .gallery__blush--3 {
        width: calc(148 / 375 * 100vw);
        top: calc(64 / 375 * 100vw);
        right: calc(9 / 375 * 100vw);
    }
    .gallery__blush--4 {
        width: calc(128 / 375 * 100vw);
        top: calc(386 / 375 * 100vw);
        right: calc(16 / 375 * 100vw);
    }
}


/* CONTACT */

.contact {
    position: relative;
    background-color: var(--primary-palePink, #f8dee6);
    padding: calc(144 / 1440 * 100vw) 6.4% calc(160 / 1440 * 100vw);
    overflow: hidden;
}

.contact__inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: calc(40 / 1440 * 100vw);
    position: relative;
    z-index: 1;
}

.contact__inner::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(640 / 1440 * 100vw);
    height: auto;
    aspect-ratio: 2 / 1;
    background-image: url(../images/top/Contact_background.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}


/* contact common */

.contact__col {
    display: flex;
    justify-content: center;
    align-items: center;
    @media screen and (min-width: 769px) {
        position: relative;
    }
}

.contact__item {
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    position: relative;
}

.contact__item img {
    display: block;
    width: 100%;
    height: auto;
}


/* 左カラム */

.contact__col--left .contact__item {
    transform: translateY(calc(-56 / 1440 * 100vw));
}


/* center */

.contact__col--center {
    text-align: center;
    flex-direction: column;
    gap: calc(28 / 1440 * 100vw);
}

.contact__lead img {
    display: block;
    width: calc(198/ 1440 * 100vw);
    height: auto;
}

.contact__title img {
    display: block;
    width: calc(420 / 1440 * 100vw);
    height: auto;
}


/* 右カラム */

.contact__col--right .contact__item {
    transform: translateY(calc(56 / 1440 * 100vw));
}


/* heart */

.contact__heart {
    position: absolute;
    max-width: 1200px;
    align-items: center;
    width: 100%;
    transform: translate(-50%, 0);
    inset: 0;
    z-index: 2;
    pointer-events: none;
    left: 50%;
}


/* heart common */

.heart {
    position: absolute;
    width: min(calc(40 / 1440 * 100vw), 64px);
    height: min(calc(38 / 1440 * 100vw), 48px);
    background-image: url(../images/top/heart_contactDeco.png);
    background-size: contain;
    background-repeat: no-repeat;
    animation: heartFloat 4s ease-in-out infinite;
    opacity: 0.9;
}


/* fuwafuwa animation */

@keyframes heartFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}


/* 左カラムハート */

.heart--1 {
    top: 94%;
    left: 16.6%;
    animation-delay: 0s;
}

.heart--2 {
    top: 105%;
    left: 43.3%;
    animation-delay: .2s;
}

.heart--3 {
    top: 94%;
    left: 72%;
    animation-delay: .4s;
}


/* 右カラムハート */

.heart--4 {
    top: -13%;
    left: 19%;
    animation-delay: 0s;
}

.heart--5 {
    top: -4%;
    left: 46%;
    animation-delay: .2s;
}

.heart--6 {
    top: -13%;
    left: 74%;
    animation-delay: .4s;
}


/* SP版切り替え */

@media screen and (max-width: 768px) {
    .contact {
        padding: calc(86 / 375 * 100vw) 6.4% calc(128 / 375 * 100vw);
    }
    .contact__inner {
        max-width: 768px;
        padding: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* 中央タイトル */
    .contact__col--center {
        grid-column: 1 / -1;
        grid-row: 1;
        display: flex;
        align-items: center;
        gap: 16px;
    }
    .contact__lead img {
        width: calc(155 / 375 * 100vw);
    }
    .contact__title img {
        width: calc(146 / 375 * 100vw);
    }
    /* 左右の画像 */
    .contact__col--left {
        grid-column: 1 / 2;
        grid-row: 2;
        justify-content: flex-start;
    }
    .contact__col--right {
        grid-column: 2 / 3;
        grid-row: 2;
        justify-content: flex-end;
    }
    .contact__item {
        width: calc(154 / 375 * 100vw);
    }
    .contact__col--left .contact__item {
        transform: translateY(8px);
    }
    .contact__col--right .contact__item {
        transform: translateY(calc(75 / 375 * 100vw));
    }
    .contact__inner::after {
        top: 4%;
        width: 100%;
    }
    .heart {
        width: calc(19 / 375 * 100vw);
        height: calc(19 / 375 * 100vw);
    }
    /* 左カラムハート */
    .heart--1 {
        top: calc(470 / 375 * 100vw);
        left: calc(48 / 375 * 100vw);
        animation-delay: 0s;
    }
    .heart--2 {
        top: calc(500 / 375 * 100vw);
        left: calc(97 / 375 * 100vw);
        animation-delay: .2s;
    }
    .heart--3 {
        top: calc(473 / 375 * 100vw);
        left: calc(146 / 375 * 100vw);
        animation-delay: .4s;
    }
    /* 右カラムハート */
    .heart--4 {
        top: calc(288 / 375 * 100vw);
        left: calc(228.75 / 375 * 100vw);
        animation-delay: 0s;
    }
    .heart--5 {
        top: calc(256 / 375 * 100vw);
        left: calc(270 / 375 * 100vw);
        animation-delay: .2s;
    }
    .heart--6 {
        top: calc(284 / 375 * 100vw);
        left: calc(322 / 375 * 100vw);
        animation-delay: .4s;
    }
}