html {
    height: 100%;
}

body {
    margin: 0;
}

#spring_campaign h3,
#spring_campaign p,
#spring_campaign span {
    font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    letter-spacing: .05em;
}

/* ---- concept-gallery ---- */
.gallery-1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-template-rows: repeat(1, 5.75vw);
    gap: 24px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

.gallery-1 .g-1 {
    grid-column: 3 / span 9;
    grid-row: 3 / span 14;
    background-color: #F8E3E8;
    position: relative;
}

.gallery-1 .g-1 .concept-txt-box {
    width: 60%;
    max-width: 240px;
}

.gallery-1 .g-2 {
    grid-column: 1 / span 10;
    grid-row: 1 / span 3;
}

.gallery-1 .g-3 {
    grid-column: 1 / span 7;
    grid-row: 20 / span 3;
}

.gallery-1 .g-4 {
    grid-column: 2 / span 8;
    grid-row: 14 / span 2;
    z-index: 2;
}

.gallery-1 .g-5 {
    grid-column: 7 / span 5;
    grid-row: 16 / span 2;
    z-index: 2;
}

.gallery-1 .g-6 {
    grid-column: 1 / span 9;
    grid-row: 27 / span 16;
    background-color: #E2E8D5;
    position: relative;
}

.gallery-1 .g-6 .concept-txt-box {
    width: 70%;
    max-width: 200px;
    top: 65%;
    left: 0;
    transform: translate(30%, -50%);
}

.gallery-1 .g-7 {
    grid-column: 2 / span 10;
    grid-row: 29 / span 3;
}

.gallery-1 .g-8 {
    grid-column: 3 / span 9;
    grid-row: 44 / span 2;
}

.gallery-1 .g-9 {
    grid-column: 1 / span 4;
    grid-row: 42 / span 2;
    z-index: 2;
}

.gallery-1 .g-10 {
    grid-column: 2 / span 7;
    grid-row: 48 / span 3;
}

.gallery-1 .g-11 {
    grid-column: 1 / span 6;
    grid-row: 56 / span 6;
    z-index: 2;
}

.gallery-1 .g-12 {
    grid-column: 8 / span 4;
    grid-row: 69 / span 5;
    z-index: 2;
}

.gallery-1 .g-13 {
    grid-column: 5 / span 7;
    grid-row: 57 / span 6;
    background-color: #AE9378;
    position: relative;
}

.gallery-1 .g-13 .concept-txt-box {
    top: 45%;
    transform: translate(-30%, -50%);
}

.gallery-1 .g-14 {
    grid-column: 2 / span 9;
    grid-row: 64 / span 5;
}

/* ---- concept-gallery-img ---- */
.gallery-1 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- concept-gallery-txt ---- */
.concept-txt-box {
    font-size: 14px;
    line-height: 2;
    letter-spacing: .08em;
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #707070;
}

.gallery-1 .concept-ttl img {
    width: auto;
    display: inline-block;
    height: auto;
    object-fit: initial;
}

.sp-item {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 3rem;
}

.sp-item-price {
    font-size: 1.4rem;
    letter-spacing: .05em;
}

@media screen and (min-width: 768px) {
    .head-XS.wrap-L-c>* {
        margin-bottom: 3rem;
    }

    .head-XS.wrap-L-c>*:last-child {
        margin-bottom: 0;
    }

    .gallery-1 {
        gap: 48px;
    }

    .gallery-1 .g-1 {
        grid-column: 9 / span 8;
        grid-row: 2 / span 9;
    }

    .gallery-1 .g-2 {
        grid-column: 1 / span 10;
        grid-row: 1 / span 4;
    }

    .gallery-1 .g-3 {
        grid-column: 1 / span 6;
        grid-row: 8 / span 6;
    }

    .gallery-1 .g-4 {
        grid-column: 8 / span 7;
        grid-row: 6 / span 3;
    }

    .gallery-1 .g-5 {
        grid-column: 12 / span 5;
        grid-row: 9 / span 3;
    }

    .gallery-1 .g-6 {
        grid-column: 1 / span 11;
        grid-row: 16 / span 10;
    }

    .gallery-1 .g-6 .concept-txt-box {
        top: 50%;
        left: 0;
        transform: translate(40%, -50%);
    }

    .gallery-1 .g-7 {
        grid-column: 7 / span 10;
        grid-row: 18 / span 6;
    }

    .gallery-1 .g-8 {
        grid-column: 8 / span 8;
        grid-row: 28 / span 4;
    }

    .gallery-1 .g-9 {
        grid-column: 2 / span 4;
        grid-row: 24 / span 5;
    }

    .gallery-1 .g-10 {
        grid-column: 4 / span 7;
        grid-row: 33 / span 4;
    }

    .gallery-1 .g-11 {
        grid-column: 3 / span 5;
        grid-row: 40 / span 8;
        z-index: 2;
    }

    .gallery-1 .g-12 {
        grid-column: 11 / span 4;
        grid-row: 48 / span 4;
        z-index: 2;
    }

    .gallery-1 .g-13 {
        grid-column: 6 / span 8;
        grid-row: 42 / span 8;
        z-index: 1;
    }

    .gallery-1 .g-13 .concept-txt-box {
        transform: translate(-40%, -50%);
    }

    .gallery-1 .g-14 {
        grid-column: 4 / span 7;
        grid-row: 51 / span 3;
        z-index: 2;
    }

    .g-col-1 {
        grid-column: 1/4;
    }

    .concept-txt-box {
        top: 18%;
        transform: translate(-30%, -50%);
    }
}

/* ---- スクロールアニメーション速度調整 ---- */
.visible.translateYs,
.invisible.translateYs {
    transform: translateY(100px);
    transition: all 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.visible.translateYs {
    transform: translateY(0);
}

.visible.translateYl,
.invisible.translateYl {
    transform: translateY(100px);
    transition: all 1.0s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.visible.translateYl {
    transform: translateY(0);
}

.visible.extend-trigger:before {
    animation: extend-wrap 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.visible.extend-trigger.extend-R::before {
    animation: extend-right 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

/*==================================================
    シャッ（背景色が伸びて出現）
    ================================================*/

/*---背景が伸びて出現---*/
.visible.bg-trigger,
.invisible.bg-trigger {
    opacity: 0;
}

.visible.bg-trigger {
    position: relative;
    animation-name: lineAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@keyframes lineAnimeBase {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.visible.bg-trigger::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    /*伸びる背景色の設定*/
    z-index: 999;
}

.visible.L-extend::before {
    animation-name: bgLAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes bgLAnime {
    0% {
        transform-origin: left;
        transform: scaleX(0);
    }

    50% {
        transform-origin: left;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: right;
    }

    100% {
        transform-origin: right;
        transform: scaleX(0);
    }
}

.visible.R-extend::before {
    animation-name: bgRAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes bgRAnime {
    0% {
        transform-origin: right;
        transform: scaleX(0);
    }

    50% {
        transform-origin: right;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: left;
    }

    100% {
        transform-origin: left;
        transform: scaleX(0);
    }
}

.visible.bg-trigger>* {
    /*animation: bgInnerAnime .5s linear .6s forwards;*/
    animation: bgInnerAnime .3s ease .4s forwards;
    visibility: hidden;
}

@keyframes bgInnerAnime {
    0% {
        opacity: 0;
    }

    50% {
        visibility: visible;
        opacity: 0.5;
    }

    100% {
        visibility: visible;
        opacity: 1;
    }
}

.content {
    width: 100%;
}

.str__animation {
    display: flex;
    justify-content: center;
    font-size: 1.2rem;
}

.str__animation .str {
    will-change: auto;
    min-width: .3rem;
    transform: translateY(0);
    opacity: 0;
}


/* ------------------------------------------
     2023春婚礼キャンペーン用style 
  --------------------------------------------- */

#spring_campaign2023 .gallery-1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-template-rows: repeat(1, 5.75vw);
    gap: 24px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

.flower-shower-logo {
    text-align: center;
}

.flower-shower-logo img {
    width: 60%;
}

.flower-shower-logo+* {
    max-width: fit-content;
    letter-spacing: .1rem;
    margin: 0.5em auto;
}

#spring_campaign2023 .gallery-1 .g-1 {
    grid-column: 3 / span 9;
    grid-row: 3 / span 17;
    background-color: #F8E3E8;
    position: relative;
}

#spring_campaign2023 .gallery-1 .g-1 .concept-txt-box {
    width: 60%;
    max-width: 240px;
}

#spring_campaign2023 .gallery-1 .g-2 {
    grid-column: 1 / span 10;
    grid-row: 1 / span 3;
}

#spring_campaign2023 .gallery-1 .g-3 {
    grid-column: 1 / span 7;
    grid-row: 20 / span 3;
}

#spring_campaign2023 .gallery-1 .g-3_1 {
    grid-column: 1 / span 9;
    grid-row: 24 / span 3;
}

#spring_campaign2023 .gallery-1 .g-3_2 {
    grid-column: 1 / span 9;
    grid-row: 27 / span 3;
}

#spring_campaign2023 .gallery-1 .g-4 {
    grid-column: 2 / span 8;
    grid-row: 17 / span 2;
    z-index: 2;
}

#spring_campaign2023 .gallery-1 .g-5 {
    grid-column: 7 / span 5;
    grid-row: 19 / span 2;
    z-index: 2;
}

#spring_campaign2023 .gallery-1 .g-6 {
    grid-column: 1 / span 9;
    grid-row: 35 / span 21;
    background-color: #E2E8D5;
    position: relative;
}

#spring_campaign2023 .gallery-1 .g-6 .concept-txt-box {
    width: 80%;
    max-width: 240px;
    top: 65%;
    left: 0;
    transform: translate(25%, -50%);
}

#spring_campaign2023 .gallery-1 .g-7 {
    grid-column: 2 / span 10;
    grid-row: 37 / span 3;
}

#spring_campaign2023 .gallery-1 .g-8 {
    grid-column: 3 / span 9;
    grid-row: 58 / span 2;
}

#spring_campaign2023 .gallery-1 .g-9 {
    grid-column: 1 / span 4;
    grid-row: 55 / span 2;
    z-index: 2;
}

#spring_campaign2023 .gallery-1 .g-10 {
    grid-column: 2 / span 8;
    grid-row: 62 / span 3;
}

#spring_campaign2023 .gallery-1 .g-10-1 {
    grid-column: 2 / span 7;
    grid-row: 65 / span 3;
}

#spring_campaign2023 .gallery-1 .g-11 {
    grid-column: 1 / span 5;
    grid-row: 73 / span 4;
    z-index: 2;
}

#spring_campaign2023 .gallery-1 .g-12 {
    grid-column: 6 / span 6;
    grid-row: 72 / span 5;
    z-index: 2;
}

#spring_campaign2023 .gallery-1 .g-13 {
    grid-column: 2 / span 10;
    grid-row: 75 / span 17;
    background-color: #A69794;
    position: relative;
}

#spring_campaign2023 .gallery-1 .g-13 .concept-txt-box {
    top: 55%;
    transform: translate(-40%, -50%);
    width: 70%;
    max-width: 240px;
}

#spring_campaign2023 .gallery-1 .g-14 {
    grid-column: 1 / span 9;
    grid-row: 93 / span 5;
}

/* ---- concept-gallery-img ---- */
#spring_campaign2023 .gallery-1 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---- concept-gallery-txt ---- */
#spring_campaign2023 .concept-txt-box {
    font-size: 14px;
    line-height: 2;
    letter-spacing: .08em;
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #707070;
}

#spring_campaign2023 .gallery-1 .concept-ttl img {
    width: auto;
    display: inline-block;
    height: auto;
    object-fit: initial;
}

#spring_campaign2023 .sp-item {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 3rem;
}

#spring_campaign2023 .sp-item-price {
    font-size: 1.4rem;
    letter-spacing: .05em;
}

@media screen and (min-width: 768px) {
    #spring_campaign2023 .head-XS.wrap-L-c>* {
        margin-bottom: 3rem;
    }

    #spring_campaign2023 .head-XS.wrap-L-c>*:last-child {
        margin-bottom: 0;
    }

    .flower-shower-logo {
        text-align: end;
    }

    .flower-shower-logo+* {
        text-align: justify;
    }

    .gallery-1 {
        gap: 48px;
    }

    #spring_campaign2023 .gallery-1 .g-1 {
        grid-column: 9 / span 8;
        grid-row: 2 / span 9;
    }

    #spring_campaign2023 .gallery-1 .g-2 {
        grid-column: 1 / span 10;
        grid-row: 1 / span 4;
    }

    #spring_campaign2023 .gallery-1 .g-3 {
        grid-column: 1 / span 6;
        grid-row: 8 / span 6;
    }

    #spring_campaign2023 .gallery-1 .g-3_1 {
        grid-column: 2 / span 6;
        grid-row: 7 / span 3;
    }

    #spring_campaign2023 .gallery-1 .g-3_2 {
        grid-column: 2 / span 6;
        grid-row: 10 / span 3;
    }

    #spring_campaign2023 .gallery-1 .g-4 {
        grid-column: 10 / span 6;
        grid-row: 6 / span 3;
    }

    #spring_campaign2023 .gallery-1 .g-5 {
        grid-column: 14 / span 3;
        grid-row: 9 / span 3;
    }

    #spring_campaign2023 .gallery-1 .g-6 {
        grid-column: 1 / span 11;
        grid-row: 16 / span 10;
    }

    #spring_campaign2023 .gallery-1 .g-6 .concept-txt-box {
        top: 45%;
        left: 0;
        transform: translate(40%, -50%);
    }

    #spring_campaign2023 .gallery-1 .g-7 {
        grid-column: 7 / span 10;
        grid-row: 18 / span 6;
    }

    #spring_campaign2023 .gallery-1 .g-8 {
        grid-column: 8 / span 8;
        grid-row: 28 / span 4;
    }

    #spring_campaign2023 .gallery-1 .g-9 {
        grid-column: 2 / span 4;
        grid-row: 24 / span 5;
    }

    #spring_campaign2023 .gallery-1 .g-10 {
        grid-column: 4 / span 7;
        grid-row: 36 / span 4;
    }

    #spring_campaign2023 .gallery-1 .g-10-1 {
        grid-column: 11 / span 5;
        grid-row: 36 / span 2;
    }

    #spring_campaign2023 .gallery-1 .g-11 {
        grid-column: 1 / span 4;
        grid-row: 47 / span 3;
        z-index: 2;
    }

    #spring_campaign2023 .gallery-1 .g-12 {
        grid-column: 5 / span 5;
        grid-row: 45 / span 5;
        z-index: 2;
    }

    #spring_campaign2023 .gallery-1 .g-13 {
        grid-column: 8 / span 9;
        grid-row: 47 / span 6;
        z-index: 1;
    }

    #spring_campaign2023 .gallery-1 .g-13 .concept-txt-box {
        transform: translate(-25%, -50%);
    }

    #spring_campaign2023 .gallery-1 .g-14 {
        grid-column: 1 / span 7;
        grid-row: 50 / span 6;
        z-index: 2;
    }

    #spring_campaign2023 .g-col-1 {
        grid-column: 1/4;
    }

    #spring_campaign2023 .concept-txt-box {
        top: 18%;
        transform: translate(-30%, -50%);
    }
}

.spring-gifts-1 {
    display: grid;
    grid-gap: 32px;
}

.spring-gifts-1>* {
    background-color: #fff;
}

.spring-gifts-1 .txt-box {
    padding: 0 1rem 1rem;
}

.spring-gifts-1 .txt-box>*:first-child {
    text-align: center;
}

.spring-gifts-2 > * {
    margin-bottom: 32px;
}

.spring-gifts-2 .txt-box1 {
    padding: 2rem;
    line-height: 2;
}

@media screen and (min-width: 768px) {
    .spring-gifts-1 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 24px;
    }

    .spring-gifts-1>*:first-child {
        grid-column: 1/5;
        display: flex;
        align-items: center;
    }

    .spring-gifts-1 > *:first-child>* {
        flex-basis: calc(100%/ 2);
    }

    .spring-gifts-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 32px;
    }

    .spring-gifts-2 > * {
        grid-column: 1/3;
        display: flex;
        align-items: center;
    }

    .spring-gifts-2 .gifts-ly-order2 {
        order: 2;
    }
}


#spring_campaign2023 .dg-col {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 3rem;
}

#spring_campaign2023 .dg-col>* {
    flex-basis: 100%;
    gap: 1rem;
}

@media screen and (min-width: 900px) {
    #spring_campaign2023 .dg-col {
        gap: 0;
    }

    #spring_campaign2023 .dg-col>*:first-child {
        flex-basis: 45%;
    }

    #spring_campaign2023 .dg-col>*:last-child {
        flex-basis: 50%;
    }
}

.visible.time-slow1,
.invisible.time-slow1 {
    opacity: 0.0;
    transition: opacity 0.8s ease;
}

.visible.time-slow1 {
    opacity: 1.0;
}

.visible.time-slow2,
.invisible.time-slow2 {
    opacity: 0.0;
    transition: opacity 1.6s ease;
}

.visible.time-slow2 {
    opacity: 1.0;
}

#spring_campaign2023 .visible.extend-trigger {
    z-index: 0;
}

/* ---- スクロールアニメーション速度調整 ---- */
#spring_campaign2023 .visible.translateYs,
#spring_campaign2023 .invisible.translateYs {
    transform: translateY(100px);
    transition: all 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

#spring_campaign2023 .visible.translateYs {
    transform: translateY(0);
}

#spring_campaign2023 .visible.translateYl,
#spring_campaign2023 .invisible.translateYl {
    transform: translateY(100px);
    transition: all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

#spring_campaign2023 .visible.translateYl {
    transform: translateY(0);
}

#spring_campaign2023 .visible.extend-trigger:before {
    animation: extend-wrap 0.8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

#spring_campaign2023 .visible.extend-trigger.extend-R::before {
    animation: extend-right 0.8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}