/*
Theme Name:一蓮
Theme URI:
Version: 1.0
Author: takami
Author URI: https://yoshida-designbu.com/
License: takami
*/


/*----------
@ 共通
----------*/
:root{
    --bg-beige:#fffbf0;
    --color-navy:#383557;
    --color-pink:#ed7d63;
    --color-beige:#c8bb9b;
}

/*------- slider -------*/
.swiper-slide{
    margin: 0px 8px;
}

.slider-bottom.swiper-slide{
    margin: 32px 16px 0;
}

.swiper-slide img {
    display: block;
}

.swiper .swiper-wrapper {
    transition-timing-function: linear;
}

/*------- fade in -------*/
.fade-in {
    opacity : 0;
    transform : translate(0, 30px);
    transition : all 1.2s;
  }
  
.fade-in.scroll-in {
    opacity: 1;
    transform: translate(0, 0);
}

.fuwafuwa{
    animation: fuwafuwa 6s infinite ease-in-out .8s alternate;
}

@keyframes fuwafuwa{
    0% {
        transform: translate(0, 0);
    }
    
    50% {
        transform: translate(0, -8px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/*----------
しめ縄ブーケ
----------*/
.l-i-logo{
    position: absolute;
    width: min(240px, 29vw);
    top: 2vw;
    left: 4vw;
}

.shimenawaBouquet{
    background: var(--bg-beige);
    position: relative;
}

.shimenawaBouquet::before,
.shimenawaBouquet:after{
    content: "";
    position: absolute;
    background: var(--color-pink);
    height: 100%;
    width: 2px;
    z-index: 1;
}

.shimenawaBouquet::before{
    top: 0;
    right: 3vw;
}

.shimenawaBouquet::after{
    top: 0;
    left: 3vw;
}

.bouquetStyle-sideDeco{
    position: absolute;
    top: 4%;
    max-width: 30px;
    width: 4vw;
    box-sizing: border-box;
    padding: 16px 0;
    background: var(--bg-beige);
    z-index: 2;
}

.-sideDeco_right{
    right: 2vw;
}

.-sideDeco_left{
    left: 2vw;
}

/*----- KV -----*/
.bouquetKV{
    position: relative;
    padding-bottom: 10vw;
}

.bouquetKV-bouquetImage{
    max-width: 760px;
    width: 84vw;
    margin: auto;
    position: relative;
    z-index: 1;
}

.bouquetKV-title{
    position: absolute;
    top: 43%;
    width: 38vw;
    max-width: 418px;
    left: 7%;
}

.bouquetKV-copy{
    position: absolute;
    font-size: 2.24rem;
    text-transform: uppercase;
    writing-mode: tb;
    bottom: -4%;
    left: 20%;
}

.bouquetKV-copy p{
    color: var(--color-navy);
    height: 356px;
    font-weight: 500;
    line-height: 2;
}

.bouquetKV-copy p span{
    display: block;
}

.bouquetKV-onlineLInk{
    position: fixed;
    right: 92px;
    bottom: 26px;
    max-width: 110px;
    width: 16vw;
    z-index: 3;
}

.bouquetKV-onlineLInk img{
    transition: ease  .5s;
}

.bouquetKV-onlineLInk:hover img{
    transform: scale(1.1);
}

.bouquetKV-deco{
    position: absolute;
}

.-bouquetImage_backIMage1{
    width: 36vw;
    max-width: 510px;
    bottom: 16%;
    left: 0%;
    z-index: -1;
}

.-bouquetImage_backIMage2{
    width: 40vw;
    max-width: 410px;
    top: 21%;
    left: 30%;
    z-index: -1;
}

.bouquetKV-deco1{
    width: 20vw;
    bottom: 5%;
    max-width: 320px;
}

.bouquetKV-deco2{
    right: 0;
    width: 20vw;
    bottom: 5%;
    max-width: 320px;
}

.bouquetKV-deco3{
    top: 15%;
    width: 24vw;
    right: -6%;
    max-width: 240px;
    z-index: -1;
}

.bouquetKV-deco4{
    top: 15%;
    width: 26vw;
    left: 8%;
    max-width: 300px;
    z-index: -1;
}

.bouquetKV-deco5{
    width: 23vw;
    max-width: 370px;
    bottom: 40%;
    right: 23%;
}

/*----- style -----*/
.bouquetStyle{
    background: var(--color-navy);
    padding: 72px 0;
}

.bouquet-titleImage{
    margin: auto;
    padding-bottom: 16px;
}

.bouquetStyle-main{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin-left: calc(100% - 92vw);
    justify-content: space-between;
    z-index: 2;
    position: relative;
}

.bouquetStyle-textArea{
    color: var(--color-beige);
    font-size: 1.83rem;
    font-weight: 400;
    width: 36%;
    text-align: center;
}

.bouquetStyle-textArea ul{
    display: flex;
    flex-direction: column;
    gap: 16px;
    line-height: 1.5;
}

.bouquetStyle-textArea h3{
    max-width: 124px;
    width: 18vw;
}

.bouquetStyle-imageArea{
    background: url(img/bouquet/style-mainImage.jpg) no-repeat center;
    background-size: cover;
    width: 60%;
    height: 30vw;
    border-radius: 24em 0 0 0;
    position: relative;
}

.bouquetStyle-slider{
    padding: 56px 0;
    z-index: 2;
    position: relative;
}

.bouquetStyle-deco{
    position: absolute;
}

.bouquetStyle-deco.-deco1{
    width: 13vw;
    bottom: 13%;
    left: -8vw;
}

.bouquetStyle-upCycling{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: calc(100% - 88vw);
    gap: 8rem;
    z-index: 1;
    position: relative;
}

.bouquetStyle-upCycling-imageArea{
    background: url(img/bouquet/style-mainImage2.jpg) no-repeat center;
    background-size: cover;
    width: 64%;
    height: 26vw;
    border-radius: 0 22em 0 0
}

.bouquetStyle-upCycling-textArea{
    color: var(--color-beige);
    font-size: 1.83rem;
    width: 46%;
}

.bouquetStyle-upCycling-textArea h3{
    max-width: 248px;
    width: 32vw;
}

/*----- spec -----*/
.bouquetSpec{
    padding: 72px 0;
    position: relative;
    z-index: 1;
}

.upCycling-upCycling{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 720px;
    width: 90%;
    flex-direction: row-reverse;
    padding-bottom: 56px;
    gap: 24px;
}

.-upCycling_textArea{
    color: var(--color-navy);
    font-size: 1.83rem;
}

.-upCycling_textArea p{
    text-align: center;
}

.-upCycling_imageArea{
    width: 52%;
}

.bouquetSpec-specInfo{
    border: var(--color-pink) solid 2px;
    box-sizing: border-box;
    padding: 32px;
    max-width: 920px;
    width: 84%;
    margin: auto;
}

.bouquetSpec-specInfo h3{
    margin: initial;
    padding-bottom: 8px;
}

.bouquetSpec-specInfo h3 img{
    height: 36px;
}

.-specInfo_details{
    border-top: var(--color-pink) solid 2px;
    color: var(--color-navy);
    padding-top: 16px;
}

.-specInfo_details dl{
    padding-bottom: 32px;
}

.-specInfo_details dt{
    font-size: 2.24rem;
    font-weight: 600;
    padding-bottom: 8px;
}

.-specInfo_details dd{
    font-size: 1.83rem;
    padding-left: 16px;
}

.-specInfo_details ul li{
    text-indent: -1.83rem;
    padding-left: 18.3px;
    padding-bottom: 4px;
}

.bouquetSpec-linkArea{
    padding: 48px 0 0;
}

.bouquetSpec-linkArea a{
    color: var(--color-pink);
    display: block;
    max-width: 920px;
    width: 70%;
    margin: auto;
    text-align: center;
    font-size: 2.24rem;
    padding: 8px;
    box-sizing: border-box;
    border: double 6px var(--color-pink);
}

.bouquetUpCycling-deco{
    position: absolute;
    z-index: -1;
}

.bouquetUpCycling-decoImage1{
    top: 58%;
    width: 18vw;
}

.bouquetUpCycling-decoImage2{
    top: 21%;
    left: 9%;
    width: 20vw;
}

.bouquetUpCycling-decoImage3{
    width: 14vw;
    right: 8vw;
    bottom: 14vw;
}

.bouquetUpCycling-decoImage4{
    right: 0;
    width: 14vw;
    bottom: 0;
}

._details-wanted{
    padding-bottom: 6px;
}

._details-wanted h4{
    padding-bottom: 4px;
    font-weight: 600;
}

._details-wanted p,
._details-wanted ul{
    font-size: 1.6rem;
}

.bouquetSpec-wrapping{
    margin-top: 40px;
}

.-specInfo_contents{
    padding-bottom: 32px;
}

.-specInfo_contents h4{
    padding-bottom: 4px;
    font-weight: 600;
    font-size: 1.83rem;
}

.-specInfo_contents img{
    width: 100%;
    max-width: 420px;
    margin: auto;
    display: block;
    padding-top: 16px;
}


@media screen and (max-width: 1024px){
/*----------
しめ縄ブーケ
----------*/
.bouquetKV-onlineLInk{
    width: 23vw;
    right: 6px;
    width: 20vw;
    bottom: 70px;
}

.bouquetKV-copy{
    font-size: 1.83rem;
    bottom: 6%;
}

.bouquetKV-copy p{
    height: auto;
}

.bouquetStyle-upCycling{
    margin-right: calc(100% - 96vw);
    gap: 28px;
}

.bouquetStyle-textArea ul{
    gap: 8px;
}

.bouquetStyle-imageArea{
    border-radius: 12em 0 0 0;
}

.bouquetStyle-upCycling-imageArea{
    border-radius: 0 10em 0 0;
}


/*----- spec -----*/
.-upCycling_textArea{
    font-size: 1.83rem;
}

.-specInfo_details dl {
    padding-bottom: 24px;
}

.-specInfo_details dt{
    font-size: 1.83rem;
}

.-specInfo_details dd{
    font-size: 1.6rem;
    padding-left: 8px;
}

.bouquetSpec-linkArea{
    padding: 32px 0 0;
}

.bouquetSpec-linkArea a{
    font-size: 1.6rem;
}

.bouquetSpec-specInfo{
    padding: 24px;
}

.-specInfo_details{
    padding: 24px;
}


}

@media screen and (max-width: 780px){
    h4{
        font-size: 1.6rem;
    }

    .shimenawaBouquet::after{
        left: 2vw;
    }

    .shimenawaBouquet::before{
        right: 2vw;
    }

    .shimenawaBouquet::before, .shimenawaBouquet:after{
        width: 1px;
    }

    .-sideDeco_right{
        right: 2vw;
    }
    
    .-sideDeco_left{
        left: 2vw;
    }

.bouquetKV-copy{
    font-size: 3vw;
    left: 22%;
    bottom: -5%;
}

.bouquetKV-title {
    top: 38%;
    left: 14%;
    width: 43vw;
}

.bouquetKV-deco1,
.bouquetKV-deco2{
    width: 25vw;
}

.bouquetKV-deco4 {
    top: 13%;
    width: 35vw;
    left: -4%;
}

.bouquetKV-deco5 {
    width: 30vw;
    bottom: 40%;
    right: 3%;
}

.bouquetSpec-specInfo{
    padding: 24px;
}

.bouquetSpec-specInfo h3 img {
    height: 32px;
}

.bouquetStyle,
.bouquetSpec{
    padding: 48px 0;
}

.bouquetStyle-main,
.bouquetStyle-upCycling,
.upCycling-upCycling{
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.bouquetStyle-upCycling-textArea,
.bouquetStyle-textArea,
.-upCycling_textArea{
    font-size: 1.4rem;
}

.bouquetStyle-imageArea,
.bouquetStyle-upCycling-imageArea{
    height: 36vw;
    width: 100%;
}

.bouquetStyle-upCycling-textArea{
    padding: 0 4vw;
    width: 86%;
}

.bouquet-titleImage{
    padding-bottom: 8px;
}

.bouquetStyle-slider {
    padding: 32px 0;
}

.upCycling-upCycling{
    padding-bottom: 32px;
}

.-upCycling_imageArea{
    max-width: 380px;
    width: 72%;
}
.bouquetStyle-textArea{
    width: 100%;
}

.-specInfo_details{
    border-top: var(--color-pink) solid 2px;
    border-left: none;
    padding: 16px 0 0;
}

.-specInfo_details dl {
    padding-bottom: 16px;
}

.-specInfo_details dt{
    font-size: 1.6rem;
    padding-bottom: 4px;
}

.-specInfo_details dd{
    font-size: 1.4rem;
}

.-specInfo_contents h4{
    font-size: 1.6rem;
}

.-bouquetImage_backIMage1 {
    width: 46vw;
    bottom: 24%;
    left: 10%;
}

.bouquetUpCycling-decoImage1 {
    top: 67%;
    width: 36vw;
}

.bouquetUpCycling-decoImage2{
    top: 24%;
    left: 4%;
    width: 36vw;
}

.bouquetUpCycling-decoImage3 {
    width: 30vw;
    right: 0vw;
    bottom: 36vw;
}

.bouquetUpCycling-decoImage4{
    width: 40vw;
}

._details-wanted p, ._details-wanted ul{
    font-size: 1.4rem;
}

}