@charset "UTF-8";
@media (min-width: 751px) {
    .pchidden{
        display: none;
    }
}
@media (max-width: 750px) {
    .sphidden{
        display: none;
    }
}

/**********************************
    common
**********************************/
.woofie__lp{
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 28px;
    letter-spacing: 0.01em;
    line-height: 1.9;
    color: #FFF;
}
.woofie__lp a{
    transition: all 0.6s ease;
}
.woofie__lp img{
    width: auto;
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
.futura{
    /*font-family: futura-pt, sans-serif;
    font-weight: 600;
    font-style: normal;*/
    font-family: "Sofia Sans Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

#wf__contents{
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#wf__contents.item__page.item__sand{
    padding-top: 14.5151vw;
}

#wf__contents__inner{
    background: linear-gradient(180deg, #003f54, #006f90);
}

@media (min-width: 751px) {
    .woofie__lp a:hover{
        opacity: 0.8;
    }
}
@media (max-width: 750px) {
    .woofie__lp{
        font-size: 14px;
    }
    #wf__contents.item__page.item__sand{
        padding-top: 14.5151vw;
    }
}



/**********************************
    logo
**********************************/
.main__logo{
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
}
.main__logo .logo__top{
    position: relative;
    padding:0 32% 0 13%;
}
.main__logo .logo__top h1,
.main__logo .logo__top p{
    position: relative;
    z-index: 1;
}
.main__logo .logo__top p{
    padding: 0;
    margin-top: 40%;
}
.fv__area::after{
    content: "";
    display: block;
    width: 100%;
    height:68.5%;
    position: absolute;
    top: 0;
    left: 0;
    background: #9c9a99;
    z-index: 0;
}

.logo__bottom{
    padding:0 26% 0 11%;
    margin-top: 2%;
    transform: translateX(1%);
}

.main__logo__title{
    position: relative;
    z-index: 1;
    margin-top: 16.3%;
    padding-left: 1%;
}
.main__logo__title p{
    font-size: 36px;
    line-height: 1.3;
    font-weight: 600;
}
.main__logo__title p small{
    font-size: 27px;
    font-weight: 500;
}
.main__logo__title h1{
    width: 60%;
    margin: 5px 0 15px;
}

@media (max-width: 750px) {
    .main__logo .logo__top{
        padding: 0 25%;
        height: 58vw;
        display: flex;
        flex-wrap: wrap;
        align-content: end;
    }
    .logo__bottom{
        padding: 0 22%;
        margin-top: 5%;
    }
    .fv__area::after{
        height: 60vw;
    }
}

/**********************************
    butterfly
**********************************/
.butterfly{
    position: absolute;
    z-index: 1;
    width: 70px;
    top: -2%;
    left: 4%;
}
.butterfly.butt02{
    width: 38px;
    top: 5%;
    left: auto;
    right: 1%;
}
@media (max-width: 750px) {
   .butterfly{
        width: 9.33vw;
   }
   .butterfly.butt02{
        width: 5.066vw;
   }
}


/**********************************
    fv
**********************************/
.fv__area{
    position: relative;
    margin-bottom: 120px;
}
@media (min-width: 751px) {
    .fv__area{
        display: flex;
        justify-content: center;
    }
    .fv__area .main__logo,
    .fv__area .main__logo__title{
        width: 50%;
        max-width: 600px;
    }
}
@media (max-width: 750px) {
   .main__logo__title{
        margin-top: 8vw;
        text-align: center;
   }
   .main__logo__title p{
        font-size: 5.066vw;
        line-height: 1.5;
   }
   .main__logo__title h1{
        margin: 3.66vw auto 0vw;
   }
   .main__logo__title p small{
        font-size: 4vw;
   }
    .main__logo .logo__top .butt01{
        top: 10vw;
        left: 15vw;
    }
    .main__logo .logo__top .butt02{
        top: 12vw;
        right: 12vw;
    }
}



/**********************************
    fv arrow
**********************************/
.fv__arrows {
    position: absolute;
    bottom: -100px;
    left: 0;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100px;
    justify-content: center;
    align-items: center;
}
.fv__arrows .fv__arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,80%);
    width: 60px;
    height: 10px;
    opacity: 0;
}
.fv__arrows .fv__arrow:first-child {
  animation: arrow-move08 2s ease-in-out infinite;
}
.fv__arrows .fv__arrow:nth-child(2)  {
  animation: arrow-move08 2s 1s ease-in-out infinite;
}
.fv__arrows .fv__arrow:before,
.fv__arrows .fv__arrow:after {
  position: absolute;
  content: '';
  bottom: 0;
  width: 60px;
  height: 3px;
  background: #FFF;
}
.fv__arrows .fv__arrow:before {
  left: -26px;
  transform: rotate(30deg);
}
.fv__arrows .fv__arrow:after {
  right: -26px;
  transform: rotate(-30deg);
}
@keyframes arrow-move08 {
    0% { opacity: 0; top: 20%;}
   70% { opacity: 1;}
  100% { opacity: 0;}
}

@media (max-width: 750px) {
    .fv__arrows .fv__arrow{
        width: 22px;
    }
    .fv__arrows .fv__arrow:before,
    .fv__arrows .fv__arrow:after {
        width: 40px;
        height: 2px;
    }
}


/**********************************
    title
**********************************/
.title{
    text-align: center;
    padding-bottom: 40px;
    margin-bottom: 50px;
    background: url(/cms/img/usr/feature/woofie_lp/wf_lp26_bar_white.png) no-repeat center bottom;
    position: relative;
}
.title h2{
    font-size: 77px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
}
.title p{
    font-size: 30px;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-top: 10px;
    font-weight: bold;
}

@media (max-width: 750px) {
    .title{
        padding-bottom: 5vw;
        margin-bottom: 7.66vw;
        background-size: auto 0.93vw;
    }
    .title h2{
        font-size: 10.4vw;
    }
    .title p{
        font-size: 4.666vw;
        margin-top: 1.66vw;
    }
}

/**********************************
    section
**********************************/
#wf__contents__inner__01{
    padding-bottom: 7.5151vw;
    position: relative;
    z-index: 0;
}
#wf__contents__inner__02{
    background-color: #e8eef0;
    color: #006586;
    position: relative;
    z-index: 1;
}
#wf__contents__inner__02::before,
#wf__contents__inner__02::after{
    content: "";
    display: block;
    width: 100%;
    height:11.5151vw;
    background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_01_pc.png);
    background-size: cover;
    position: absolute;
    top: -11.5151vw;
}
#wf__contents__inner__02::after{
    background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_02_pc.png);
    top: auto;
    bottom:-11.5151vw;
}
#wf__contents__inner__03{
    padding-top: 220px;
    padding-bottom: 160px;
    position: relative;
    z-index: 1;
}
#wf__contents__inner__04{
    background-color: #e8eef0;
    color: #006586;
    position: relative;
    z-index: 1;
}
#wf__contents__inner__04::before,
#wf__contents__inner__04::after{
    content: "";
    display: block;
    width: 100%;
    height:11.5151vw;
    background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_01_pc.png);
    background-size: cover;
    position: absolute;
    top: -11.5151vw;
}
#wf__contents__inner__04::after{
    background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_02_pc.png);
    top: auto;
    bottom:-11.5151vw;
}

#wf__contents__inner__05{
    padding-top: 200px;
    padding-bottom: 230px;
    position: relative;
    z-index: 0;
}
#wf__contents__inner__06{
    position: relative;
    z-index: 1;
}
#wf__contents__inner__06::before{
    content: "";
    display: block;
    width: 100%;
    height:11.5151vw;
    background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_03_pc.png);
    background-size: cover;
    position: absolute;
    top: -11.5151vw;
}
@media (max-width: 750px) {
    #wf__contents__inner__01{
        padding-bottom: 7.5151vw;
    }
    #wf__contents__inner__02::before,
    #wf__contents__inner__02::after{
        height:11.466vw;
        background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_01_sp.png);
        top: -11.466vw;
    }
    #wf__contents__inner__02::after{
        background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_02_sp.png);
        top: auto;
        bottom:-11.466vw;
    }
    #wf__contents__inner__03{
        padding: 8vw 0 23.66vw;
    }
    #wf__contents__inner__04::before,
    #wf__contents__inner__04::after{
        height:11.466vw;
        background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_01_sp.png);
        top: -11.466vw;
    }
    #wf__contents__inner__04::after{
        background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_02_sp.png);
        top: auto;
        bottom:-11.466vw;
    }

    #wf__contents__inner__05{
        padding:0;
    }
    #wf__contents__inner__06::before{
        height:11.466vw;
        background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_nami_03_sp.png);
        top: -11.466vw;
    }
}


/**********************************
    about
**********************************/
.about__area{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 45px;
}
@media (max-width: 750px) {
    .about__area{
        overflow: hidden;
        padding: 0;
    }
}

/**********************************
    Schedule
**********************************/
.schedule__area{
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0 0;
}
.schedule__area .butt01{
    top: -50%;
    left: auto;
    right: 90px; 
}

.schedule__area .comming{
    background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_comming.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    text-align: center;
    padding-top: 90px;
    position: relative;
}
.schedule__area .comming:after{
    content: "";
    display: block;
    background: url(/cms/img/usr/feature/woofie_lp/wf_lp26_logo_01.png) no-repeat;
    background-size: cover;
    width: 306px;
    height: 306px;
    margin: 10px auto 0;
}
.comming dt{
    display: inline-block;
    background: #FFF;
    border-radius: 100px;
    font-size: 28px;
    line-height: 1;
    color: #ec728d;
    font-family: "Sofia Sans Condensed", sans-serif;
    letter-spacing: 0.2em;
    padding: 15px 45px;
    margin-bottom: 20px;
}
.comming dd{
    font-size: 28px;
    font-weight: 600;
    font-family: "Zen Kurenaido", sans-serif;
    letter-spacing: 0.1em;
    line-height: 2;
}

.schedule__box dl{
    background: #9c9a99;
    border-radius: 50px;
    margin: 30px auto 0;
    padding: 40px 0 35px;
}
.schedule__box dt{
    text-align: center;
    font-weight: bold;
}
.schedule__box dd{
    font-weight: bold;
    border-bottom: 1px #FFF dotted;
}
.schedule__box dd:last-child{
    border-bottom: none;
}

.schedule__box dd.sc__time{
    line-height: 1;
    letter-spacing: 0.2em;
    padding:0;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.schedule__box dd.sc__time .day{
    font-size: 60px;
    margin:0 10px;
    display: inline-block;
}
.schedule__box dd.sc__time .day small{
    font-size: 28px;
}
.schedule__box dd.sc__time .time{
    font-size: 42px;
}
.schedule__box dd.sc__time>small{
    display: flex;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
}

.sc__text{
    text-align: center;
}
@media (min-width: 751px) {
    .schedule__area{
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        align-items: center;
    }
    .schedule__area .schedule__box{
        width: 50%;
    }
    .item__page .schedule__area .schedule__box{
        width: 100%;
    }
    .item__page .schedule__box dl{
        max-width: 640px;
    }
    .schedule__area .comming{
        width: 43.334%;
        height: 680px;
    }
}
@media (max-width: 750px) {
    .schedule__area{
        padding: 0 0 30vw;
    }
    .schedule__area .butt01{
        display: none;
    }
    .schedule__box dl{
        margin: 0 auto 9.33vw;
        padding: 2.66vw 0;
        width: 86%;
        border-radius: 20px;
    }

    .schedule__box dd.sc__time{
        padding: 10px 0;
    }
    .schedule__box dd.sc__time .day{
        font-size: 8.66vw;
        margin: 0 5px;
    }
    .schedule__box dd.sc__time .day small{
        font-size: 4vw;
    }
    .schedule__box dd.sc__time>small{
        font-size: 2.4vw;
        margin-top: 2.66vw; 
    }

    .schedule__area .comming{
        width: 62.26vw;
        height: 64vw;
        margin: 0 auto;
        padding-top: 10.26vw;
    }
    .comming dt{
       font-size: 3.46vw;
        padding: 2.3vw 5.33vw 2vw;
        margin-bottom: 2.39vw; 
    }
    .comming dd{
        font-size: 3.733vw;
    }
    .schedule__area .comming:after{
        width: 40vw;
        height: 40vw;
        margin-top: 1vw;
    }
    .schedule__area .comming:before{
        content: "";
        display: block;
        background: url(/cms/img/usr/feature/woofie_lp/wf_lp26_butterfly_01.png) no-repeat;
        background-size: cover;
        width: 9.33vw;
        height: 9.46vw;
        position: absolute;
        bottom: -17vw;
        right: -9vw;
        z-index: 1;
    }

    .item__page.item__sand #wf__contents__inner__03{
        padding: 8vw 0 12.66vw;
    }
    .item__page .schedule__area{
        padding: 20vw 0 10vw;
    }
    .item__page.item__sand .schedule__area{
        padding: 20vw 0 0;
    }
}

/**********************************
    #item__01
**********************************/
#item__01.item__area .item__box {
    transform: translateY(-2vw);
}
@media (min-width: 751px) {
    #item__01.item__area .item__box {
        flex-direction: row-reverse;
    }
}

/**********************************
    point__area
**********************************/
.point__area {
    padding-top: 100px;
    padding-bottom: 90px;
    text-align: center;
}
.point__area .title{
    background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_bar_gray.png);
     margin-bottom: 70px;
}
.point__area .butt01{
    left: calc(50% + 240px);
    top: auto;
    bottom: -10px;
}
.point__box{
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}
.point__box>p{
    position: relative;
    width:49.167%;
    margin: 0 auto;
}

.point__detail dl{
    position: absolute;
    font-weight: 600;
}
.point__detail dt{
    font-size: 18px;
    line-height: 1;
    text-align: right;
    color: #ec728d;
    padding: 0 20px 5px 0;
}
.point__detail dd{
    width: 256px;
    font-size: 20px;
    line-height: 1;
    color: #FFF;
    text-align: center;
    padding: 15px 0;
    background-color: #006586;
    border-radius: 100px;
    position: relative;
}
.point__detail dd::after{
    content: "";
    display: block;
    width: 62%;
    height: 2px;
    background: #ec728d;
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -1px;
}
.point__detail dl.p_1{
    top: 15%;
    left: 10px;
}
.point__detail dl.p_2{
    top: 45%;
    right: 10px;
}
.point__detail dl.p_2 dd::after{
    left: auto;
    right: 100%;
}

.point__detail dl.p_3{
    bottom: 16%;
    left: 10px;
}

.item__page__point__btn{
    position: absolute;
    bottom: -20%;
    right: 13%;
    z-index: 1;
}
@media (max-width: 1200px) {
    .point__detail dd::after{
        width:calc( 35vw - 256px );
    }
}
@media (max-width: 750px) {
    .point__area{
        padding: 16vw 5% 26.66vw;
    }
    .point__area .title{
        margin-bottom: 10.66vw;
    }
    .point__area .butt01{
        left: auto;
        right: 8vw;
        top: -5vw;
        bottom: auto;
    }
    .point__box>p{
        width: 73.33vw;
    }
    .point__detail dt{
        font-size: 2.4vw;
        padding: 0 2.66vw 0.66vw 0;
        color: #ecc9d2;
    }
    .point__detail dd{
        border: 1px solid #ecc9d2;
        width: 34.133vw;
        padding: 2vw 0;
        font-size: 2.66vw;
    }
    .point__detail .p_2 dt{
        text-align: left;
        padding: 0 0 0.66vw 2.66vw;
    }

    .point__detail dl.p_1{
        top: 1.5vw;
        left: 0vw;
    }
    .point__detail dl.p_2{
        top: 27vw;
        right: 1vw;
    }
    .point__detail dl.p_3{
        bottom: 25vw;
        left: 0vw;
    }
    
    .item__page__point__btn{
        width: 28vw;
        bottom: -20vw;
        right: -4vw;
    }
}

/**********************************
    point__modal
**********************************/
.click__modal{
    cursor: pointer;
}
#point__modal{
    position: relative;
    opacity: 0;
    z-index: -1;
    transition: all 0.3s ease-in;
}
#point__modal.active{
    opacity: 1;
    z-index: 99;
}
#point__modal::before{
    content: "";
    display: block;
    width: 100%;
    height: 100vh;
    background: rgba(0, 46, 61, .52);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
#point__modal .point__modal__inner{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%,-50%);
    max-width: 1000px;
    width: 80%;
    background: #FFF;
    border-radius: 50px;
    padding: 65px 65px;
    color: #006586;
}

.point__modal__desc>p{
    font-size: 30px;
    font-weight: 600;
}
.point__modal__desc dl{
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.point__modal__desc dl::after{
    content: "";
    display: block;
    width: 90%;
    height: 2px;
    background-color: #848484;
    position: absolute;
    bottom: 0;
    left: 5%;
}
.point__modal__desc dt{
    width: 62px;
    height: 62px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
    color: #FFF;
    background-color: #ec728d;
}
.point__modal__desc dd{
    width: calc( 100% - 82px );
    font-size: 20px;
    line-height: 1.5;
}
.point__modal__desc dd b{
    display: block;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    padding: 10px 0 5px;
}
#modal__close{
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: #003f54;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
#modal__close::before,
#modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 30px;
  background: #FFF;
}
 
#modal__close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
 
#modal__close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

@media (min-width: 751px) {
    #point__modal .point__modal__inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #point__modal .photo{
        width: 42.53%;
    }
    .point__modal__desc{
        width: 50%;
    }
}

@media (max-width: 750px) {
    #point__modal .point__modal__inner{
        padding: 5.33vw;
        border-radius: 25px;
    }
    #point__modal .point__modal__inner>p.photo{
        margin-bottom: 4vw;
    }
    .point__modal__desc>p{
        font-size: 4.49vw;
        line-height: 1;
        text-align: center;
    }
    .point__modal__desc dl{
        padding: 3.2vw 0;
    }
    .point__modal__desc dt{
        width: 9.33vw;
        height: 9.33vw;
        font-size: 5.33vw;
    }
    .point__modal__desc dd{
        width: calc(100% - 12.33vw);
        font-size: 3.2vw;
    }
    .point__modal__desc dd b{
        font-size: 4.39vw;
        padding: 8px 0 5px;
    }
    .point__modal__desc dl::after{
        height: 1px;
    }
    #modal__close{
        width: 37px;
        height: 37px;
        top: -15px;
        right: -10px;
    }
    #modal__close::before,
    #modal__close::after{
        height: 20px;
    }
}

/**********************************
    gift__area
**********************************/
.gift__area{
    padding-top: 100px;
    max-width: 1200px;
    margin: 0 auto;
}
.gift__area .butt01{
    left: calc(50% + 320px);
    top: -50px;
}
.gift__area .butt02{
    left: auto;
    right: calc(50% + 280px);
    top: auto;
    bottom: 10px;
}
.gift__box>p{
    font-size: 22px;
    text-align: center;
    margin-bottom: 60px;
}
.gift__package{
    padding:0 30px 230px 90px;
    position: relative;
    display: flex;
    justify-content: flex-end;
}
.gift__package li{
    position: absolute;
    z-index: 1;
}
.gift__package li.packege01{
    width: 28%;
    top: 2%;
    left: 90px;
}
.gift__package li.packege02{
    width: 34.25%;
    left: 24%;
    bottom: 0;
}
.gift__package li.packege03{
    position: relative;
    z-index: 0;
    width: 46.38%;
}
.gift_catch{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 220px;
    background: url(/cms/img/usr/feature/woofie_lp/wf_lp26_gift_icon.png) no-repeat;
    background-size: cover;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    position: absolute;
    top: 97%;
    left: 50%;
    margin-left: -110px;
}
@media (max-width: 750px) {
    .gift__area{
        padding-top: 17.33vw;
    }
    .gift__area .butt01{
        left: auto;
        right: 8vw;
        top: auto;
        bottom: -4vw;
    }
    .gift__area .butt02{
        left: 17vw;
        right: auto;
        bottom: auto;
        top: -5vw;
    }
    .gift__box>p{
        font-size: 3.73vw;
        margin-bottom: 8vw;
    }
    .gift__package{
        padding: 0 4% 14vw 49%;
    }
    .gift__package li.packege01{
        top: 4%;
        left: 4%;
        width: 29%;
    }
    .gift__package li.packege02{
        left: 22%;
    }
    .gift__package li.packege03{
        width: 100%;
    }
    .gift_catch{
        width: 29.33vw;
        height: 29.33vw;
        font-size: 2.93vw;
        font-weight: 500;
        margin-left: -11.66vw;
        top: 46vw;
    }
}

/**********************************
    lineup__area
**********************************/
.lineup__area{
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 40px;
}
.lineup__area .title {
    background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_bar_gray.png);
}
.lineup__area .butt01{
    left: calc(50% + 250px);
    top: auto;
    bottom: 0px;
}
.item__text{
    text-align: center;
}

.note__box{
    font-size: 30px;
    text-align: center;
    color: #ec728d;
    margin-bottom: 50px;
}

.lineup__item{
    display: flex;
    justify-content: space-between;
}
.lineup__item .item__desc{
    background: #FFF;
    border-radius: 50px;
    width: 39.167%;
    margin: 0 5.4165%;
    padding: 30px 45px;
}
.lineup__item .item__desc .photo{
    padding: 0;
    margin-bottom: 30px;
}
.lineup__item .item__desc .name{
    font-size: 24px;
}
.lineup__item .item__desc .name b{
    font-size: 28px;
}
.lineup__item .price__box .num {
    font-size: 22px;;
    width: 110px;
    height: 48px;
    margin-right: 10px;
}
.lineup__item .price__box .num b{
    font-size: 32px;
}
.lineup__item .price__box{
    font-size: 22px;
}
.lineup__item .price__box b{
    font-size: 50px;
}
.lineup__item .btn__box {
    padding: 30px 0 0;
}
.lineup__item .btn__buy a{
    background: #004359;
}
.lineup__item .btn__buy a::after{
    background-image: url(/cms/img/usr/feature/woofie_lp/wf_lp26_icon_blue.png);
}

@media (max-width: 750px) {
    .lineup__area{
        padding: 8.66vw 0;
    }
    .lineup__area .butt01{
        left: auto;
        right: 14vw;
        top: -5vw;
        bottom: auto;
    }
    .note__box{
        margin-bottom: 6.66vw;
    }
    .note__box p{
        font-size: 4vw;
        font-weight: 600;
    }

    .lineup__item{
        padding: 0 2%;
    }
    .lineup__item .item__desc{
        border-radius: 20px;
        width: 47%;
        margin: 0 1.5%;
        padding: 3vw;
    }
    .lineup__item .item__desc .photo{
        margin-bottom: 2.66vw;
    }
    .lineup__item .item__desc .name{
        font-size: 2.66vw;
    }
    .lineup__item .item__desc .name b{
        font-size: 3.2vw;
    }
    .lineup__item .price__box{
        margin-top: 2.66vw;
    }
    .lineup__item .price__box .num{
        font-size: 2.66vw;
        width: 11.66vw;
        height: 5.6vw;
        letter-spacing: 0;
        margin-right: 5px;
    }
    .lineup__item .price__box .num b{
        font-size: 3.73vw;
    }
    #wf__wrapper .lineup__item .price{
        font-size: 2.66vw;
        letter-spacing: 0;
    }
    .lineup__item .price__box .price b{
        font-size: 5.06vw;
    }
    .lineup__item .btn__box{
        padding-top: 3.66vw;
    }
    .lineup__item .btn__box .btn__cap{
        font-size: 2.4vw;
        font-weight: 500;
        margin-bottom: 1vw;
    }
    .lineup__item .btn__buy a{
        font-size: 2.66vw;
        padding: 2.66vw 0;
    }
    .lineup__item .btn__buy a::after{
        width: 5.46vw;
        height: 5.46vw;
        background-size: 3.33vw auto;
    }

}

/*******  item__img__inner  ******/
.item__img{
    position: relative;
}
.item__area .item__img{
    width: 50%;
}
.item__img .item__img__inner span{
    display: block;
    position: absolute;
    top: 0;
    z-index: 1;
}
.item__img__inner{
    position: relative;
}
.item__img__inner p{
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.item__img__inner p img{
    width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 750px) {
    .item__area .item__img{
        width: 100%;
        margin: 0 auto;
    }
}

/*******  item__img__inner setting  ******/
.item__no1__01{
    padding: 0 100px;
}
.item__no1__01 .item__img__inner>p{
    width: 100%;
    padding: 25px 0;
}
.item__no1__01 .item__img__inner span{
    width: 100%;
}
.item__no1__01 .item__img__inner>p.text{
    position: absolute;
    bottom: 30px;
    text-align: center;
    font-size: 30px;
    display: inline-block;
    width: auto;
    padding: 0;
}
.item__no1__01 .item__img__inner>p.text b{
    font-size: 38px;
    color: #ffbac9;
}
@media (max-width: 750px) {
    .item__no1__01{
        padding: 0;
        width: 100%;
    }
    .item__no1__01 .item__img__inner>p{
        width: 130%;
        transform: translateX(-15%);
    }
    .item__no1__01 .item__img__inner>p.text{
        font-size: 5.06vw;
        width: 100%;
        transform: translateX(0);
        margin-top: -2vw;
        position: relative;
        z-index: 2;
    }
    .item__no1__01 .item__img__inner>p.text b{
        font-size: 5.33vw;
    }
}


/**********************************
    #item__01
**********************************/
.item__no2__01 .item__img__inner>p{
    width: 110%;
    transform: translate(0, -10%);
    padding:0;
}
.item__no2__01 .item__img__inner span{
    top: auto;
    bottom: 2%;
    right: -4%;
}
@media (max-width: 750px) {
    #item__01 .item__img{
        width: 94%;
        margin: 0 auto; 
    }
    #item__01 .item__img .item__img__inner{
        transform: translateY(-3vw);
    }

    .item__no2__01 .item__img__inner>p{
        width: 100%;
        transform: translate(0);
    }
    .item__no2__01 .item__img__inner span{
        width: 85%;
        right: 5%;
        bottom: -5%; 
    }
    .item__no2__01 .item__img__inner span.icon{
        width: 32vw;
        right: 0%;
        bottom: -5%;
    }
}

/**********************************
    #item__02
**********************************/
#item__02.item__area .item__box{
    transform: translateY(-6vw);
}
#item__02 .item__img__inner>p{
    width: 110%;
    transform: translate(-7%, -6%);
    padding: 0;
}
#item__02.item__area .item__box .price{color: #FFF;}
@media (min-width: 751px) {
    #item__02 .btn__box .btn__cap{
        color: #FFF;
    }
}

@media (max-width: 750px) {
    #item__02.item__area .item__img{
        width: 96%;
    }
    #item__02 .item__img__inner>p{
        width: 100%;
        transform: translate(0);
    }
    #item__02 .item__img__inner span{
        top: 2vw;
        left: 2%;
        width: 96%;
    }
    
}

/**********************************
    #item__03
**********************************/
#item__03{
    padding-bottom: 100px;
}
#item__03.item__area .item__box {
    flex-direction: row-reverse;
    align-items: flex-start;
}
#item__03 .item__img__inner>p{
    width: 110%;
}
#item__03 .item__img .item__img__inner span{
    top: 140px;
    right: -6%;
}
#item__03 .item__img .item__img__inner span.icon{
    top: 60%;
    left: -63%;
    right: auto;
}
#item__03 .item__img .item__img__inner span.cach{
    max-width: 515px;
    width: 90%;
    z-index: 3;
    top: -20px;
    right: auto;
    left: 50%;
    transform: translateX(-40%);
}

@media (min-width: 751px) {
    .item__area{
        max-width: 1200px;
        margin: 0 auto;
    }
    .item__area .item__box{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

@media (max-width: 750px) {
    #item__03{
        padding: 21.33vw 0 0;
    }
    #item__03 .item__img__inner>p{
        width: 85%;
        left: -7%;  
    }
    #item__03 .item__img .item__img__inner span{
        width: 68%;
        top: 18%;
        left: 6%;
    }
    #item__03 .item__img .item__img__inner span.icon{
        width: 50%;
        top: 60%;
        left: auto;
        right: -3%;
        z-index: 2;
    }
    #item__03 .item__img .item__img__inner span.cach{
        top: -10%;
        left: 5%;
        transform: translateX(0);
    }

    #item__03 .item__desc{
        margin-top: 22vw;
    }
}

/*******  item__desc  ******/
.item__desc{
    text-align: center;
    width: 40%;
}
.item__desc .photo{
    padding: 0 95px 40px;
}
.item__desc .name{
    line-height: 1.5;
    font-size: 32px;
}
.item__desc .name b{
    font-size: 38px;
}
.item__desc .name .pink{
    color: #ffc6d3;
}
.item__desc .item__text{
    font-size: 22px;
    margin-top: 30px;
}
.price__box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    line-height: 1;
    letter-spacing: 0.05em;
}
.price__box .num{
    border: 2px #004359 solid;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 164px;
    height: 58px;
    margin-right: 25px;
}
.price__box .num b{
    font-size: 40px;
}
.price__box .price b{
    font-size: 55px;
}
.price::after,
.default-price::after{
    display: none;
}
.btn__box{
    padding:70px 0 0;
}
.btn__box .btn__cap{
    display: block;
    color: #ec728d;
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    margin-bottom: 20px;
}

.btn__buy a{
    display: block;
    width: 100%;
    border-radius: 100px;
    background: #ec728d;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.2em;
    padding: 25px 0;
    color: #FFF;
    position: relative;
}
.btn__buy a::after{
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: url(/cms/img/usr/feature/woofie_lp/wf_lp26_icon_red.png) no-repeat center;
    background-size: 35px auto;
    background-color: #FFF;
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translateY(-50%);
}
@media (max-width: 750px) {
   .item__desc{
        margin-top: 8vw;
        width: 100%;
   }
   .item__desc .name{
        font-size: 5.6vw;
   }
   .item__desc .name b{
        font-size: 6.66vw;
   }
   .price__box{
        margin-top: 4.16vw;
   }
   .price__box .num{
        width: 26.66vw;
        height: 9.6vw;
        border-width: 1px;
        margin-right: 6vw;
        font-size: 4.533vw;
   }
   .price__box .num b{
        font-size: 6.66vw;
   }
   #wf__wrapper .price{
        color: #006586;
        font-size: 4.533vw;
   }
   .price__box .price b{
        font-size: 9.066vw;
   }
   .btn__box{
        padding: 8.33vw 8% 0;
   }
   .btn__box .btn__cap{
        font-size: 4vw;
        margin-bottom: 2.93vw;
   }
   .btn__buy a{
        font-size: 4.66vw;
        padding: 4.26vw 0;
   }
   .btn__buy a::after{
        width: 9.33vw;
        height: 9.33vw;
        background-size: 5.6vw auto;
   }
   .item__desc .item__text{
        margin-top: 5.33vw;
   }
   .item__desc .item__text p{
        font-size: 4vw;
   }
}

/**********************************
    store__area
**********************************/
.store__area{
    max-width: 1200px;
    margin: 0 auto;
    padding: 180px 0 50px;
}
.store__area .butt01{
    left: 280px;
    top: -120px;
}
.store__area dl{
    text-align: left;
    margin: 0;
}
.store__area dt{
    font-size: 30px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 15px;
}
.store__area dd{
    text-align: left;
    font-size: 22px;
    line-height: 1.5;
}
.store__area dd small{
    font-size: 18px;
}
@media (min-width: 751px) {
    .store__area{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .store__area .title{
        text-align: left;
        background-position-x: left;
        margin-bottom: 30px;
    }
    .store__image{
        width: 57.5%;
    }
    .store__detail{
        width: 36%;
    }
}
@media (max-width: 750px) {
    .store__area{
        padding:24vw 8vw 10vw;
    }
    .store__area .butt01{
        left: auto;
        right: 4vw;
        top: 0vw;
    }
    .store__area .store__image{
        margin-bottom: 14vw;
    }
    .store__area dl{
        text-align: center;
    }
    .store__area dt{
        margin-bottom: 2.66vw;
        font-size: 4.66vw;
    }
    .store__area dd{
        font-size: 3.33vw;
        text-align: center;
        line-height: 1.7;
    }
    .store__area dd small{
        font-size: 2.8vw;
    }
}



/**********************************
    story__area
**********************************/
#wf__contents__inner__06::after{
    content: "";
    display: block;
    width: 100%;
    height:70.5%;
    background-color: #9c9b9a;
    position: absolute;
    z-index: 0;
    top: 0;
}
.story__area{
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 90px 0 80px;
}
.story__area .main__logo__title{
    margin: 0;
    padding: 0 5%;
}
.story__area .main__logo__title h1{
    width: 100%;
    margin: 0;
}
.story__area .main__logo .logo__top{
    padding: 0 12%;
}
.story__area .main__logo .logo__top p{
    margin-top: 70px;
}
.story__area .logo__bottom{
    padding: 0 8%;
}
@media (min-width: 751px) {
    .story__area{
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-end;
    }
    .story__logo{
        width: 35.19%;
    }
    .story__detail{
        width: 52%;
        text-align: left;
    }
    .story__detail .title {
        text-align: left;
        background-position-x: left;
    }
    .story__text{
        font-size: 24px;
        font-weight: 400;
        line-height: 2.4;
    }
}
@media (max-width: 750px) {
    .story__area{
        padding: 10vw 0 12vw;
    }
    .story__area .main__logo__title{
        width: 56.66vw;
        margin: 0 auto;
        padding: 0;
    }
    .story__area .main__logo .logo__top{
        width: 42.13vw;
        padding: 0;
        margin: 0 auto; 
        height: auto;
    }
    .story__area .main__logo .logo__top p{
        margin-top: 8.66vw;
    }
    .story__area .logo__bottom{
        width: 53.06vw;
        padding: 0;
        margin: 5% auto 0;
    }
    .story__detail{
        margin-top: 13.33vw;
        text-align: center;
    }
    .story__text p{
        font-size: 4.66vw;
    }
    #wf__contents__inner__06::after{
        height: 90vw;
    }
}



/**********************************
    float btn
**********************************/
#float__btn{
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 10;
    transform: translateY(-50%);
}
@media (min-width: 751px) {
    #float__btn{
        width: 180px;
    }
}
@media (max-width: 750px) {
    #float__btn{
        z-index: 10;
    }
}


/**********************************
    background
**********************************/
#wf__wrapper{
  background: url(/cms/img/usr/feature/woofie_lp/wf_lp_back.gif) center;
  background-size: 100% auto;
  clip-path: inset(0);
}
#wf__wrapper .ocean{
    display: block;

  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  background: url(/cms/img/usr/feature/woofie_lp/wf_lp_back.gif) center;
  background-size: cover;
  /*animation: sway 12s infinite linear;*/
}
/*#wf__wrapper .ocean::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  background: url(/cms/img/usr/feature/woofie_lp/wf_lp_back.gif) no-repeat center;
  background-size: cover;
  opacity: 1;
}*/

/* 光のノイズ層 */
#wf__wrapper .ocean::before {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  opacity: 0.2;
  animation: drift 20s infinite linear;
}

@keyframes sway {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

@keyframes drift {
  from { background-position: 0 0; }
  to   { background-position: 100% 100%; }
}


/**********************************
    start animation
**********************************/
.fv__area::after{
    transform: translateY(-150%);
    opacity: 0;
    transition: all 1.2s 0.2s ease;
}
#wf__wrapper .ocean::after{
    opacity: 0;
    filter: blur(1.5rem);
    transition: all 2.0s 0.4s ease;
}
.fv__area .main__logo .logo__top p{
    opacity: 0;
    transition: all 2.4s 1.0s ease;
}
.fv__area .main__logo .logo__top h1{
    transform: translateY(-150%);
    filter: blur(1.5rem);
    opacity: 0;
    transition: all 1.6s 1.2s ease;
}
.fv__area .logo__bottom{
    opacity: 0;
    filter: blur(1.5rem);
    transition: all 1.6s 1.6s ease;
}
.fv__area .fv__arrows{
    opacity: 0;
    transition: all 0.8s 2.0s ease;
}

.main__logo .logo__top .butt01{
    opacity: 0;
    filter: blur(1.5rem);
    transition: all 1.2s 2.0s ease;
}
.main__logo .logo__top .butt02{
    opacity: 0;
    filter: blur(1.5rem);
    transition: all 1.2s 2.2s ease;
}

#float__fv__btn{
    opacity: 0;
    filter: blur(1.5rem);
    transition: all 1.8s 2.6s ease;
}

#wf__wrapper.active .fv__area::after,
#wf__wrapper.active .fv__area .main__logo .logo__top h1,
#wf__wrapper.active .fv__area .main__logo .logo__top p,
#wf__wrapper.active .fv__area .logo__bottom,
#wf__wrapper.active .fv__area .fv__arrows,
#wf__wrapper.active #float__fv__btn,
#wf__wrapper.active .ocean::after,
#wf__wrapper.active .main__logo .logo__top .butt01,
#wf__wrapper.active .main__logo .logo__top .butt02{
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
}
@media (min-width: 751px) {

}

#float__btn{
    opacity: 0;
    transform: translate(100%,-50%);
    transition: all 1.2s ease;
}
#wf__wrapper.scroll #float__btn{
    opacity: 1;
    transform: translate(0,-50%);
}
#wf__wrapper.scroll #float__fv__btn{
    transition: all 1.2s ease;
}
#wf__wrapper.scroll #float__fv__btn{
    opacity: 0;
    z-index:-1;
}
@media (max-width: 750px) {
    #wf__wrapper #float__btn{
        width: 10.66vw;
    }
}

/**********************************
    fadein
**********************************/
.fadein{
    opacity: 0;
    transition: all 1.0s 0.2s ease;
}
.fadein.effect__under{
    transform: translateY(100px);
}
.fadein.effect__left{
    transform: translateX(-100px);
}
.fadein.effect__right{
    transform: translateX(100px);
}

.fadein.scrollin{
    opacity: 1;
    transform: translate(0);
}

/**********************************
    old type
**********************************/
#old.item__area{
    padding-bottom: 5%;
}
.item__area .item__img.item__no1__03{
    margin: 5% auto -2%;
    width: 80%;
}
.item__no1__03 .item__img__inner>p{
    width: 20%;
    max-width: 305px;
    transform: translate(58%, 16%);
}
.item__no1__03 .item__img__inner span{
    top: 5%;
    right: 15%;
}
.item__no1__03.item__img .item__text>p{
    font-size: 26px;
    width: 45%;
    transform: translate(60%, -85%);
}

.item__area .item__img.item__no1__04{
    width: 100%;
}
.item__no1__04 .item__img__inner>p{
    width: 42%;
    transform:translate(8%, -17%);
}
.item__no1__04 .item__img__inner span{
    top: 10%;
    right: 12%;
}
.item__no1__04 .item__img__inner span.bk02{
    top: 18%;
    right: 5%;
}
.item__no1__04.item__img .item__text>p{
    width: 58%;
    transform: translate(60%, -170%);
}
@media (max-width: 750px) {
    .item__area .item__img.item__no1__03{
        margin: 25% auto -20vw;
        width: 100%;
    }
    .item__no1__03 .item__img__inner>p{
        width: 32.4%;
        transform: translate(10%, 6%);
    }
    .item__no1__03 .item__img__inner span{
        width: 80%;
        top: 0%;
        right: -4%;
    }
    .item__no1__03.item__img .item__text{
        transform: translate(69%, -42vw);
        width: 50%;
        position: relative;
        z-index: 1;
    }
    .item__no1__03.item__img .item__text>p{
        font-size: 4.2vw;
        transform: translate(0);
        width: 100%;
    }

    .item__no1__04 .item__img__inner>p {
        width: 67%;
        transform: translate(-8%, -22%);
    }
    .item__no1__04 .item__img__inner span{
        width: 70%;
        top: 15%;
        right: 1%;
    }
    .item__no1__04 .item__img__inner span.bk02{
        top: 18.5%;
        right: -11%;
    }
    .item__no1__04.item__img .item__text>p{
        font-size: 3.8vw;
        width: 55%;
        transform:translate(82%, -29vw);
    }
}


/**********************************
    既存
**********************************/
#wf__wrapper li::marker{
    display: none;
}

/**********************************
    既存header
#wf__wrapper li::marker{
    display: none;
}
@media (min-width: 751px) {
    #header{
        transition: all 0.8s ease;
        position: fixed;
        top: -80px;
        left: 0;
    }
    #header.scroll{
        top: 0;
    }
    .pane-contents .container{width: 100%;}
}
@media (max-width: 750px) {
    #header{
        transition: all 0.8s ease;
        position: fixed;
        top: -60px;
        left: 0;
    }
    #header.fixed{
        top: 0;
    }
}
@media (min-width: 751px) {
    .page-event .block-event-page--goods,
    .block-event-page--accessory{
        background: #FFF;
        position: relative;
    }
    .pane-right-menu{
        background: #FFF;
        position: relative;
        z-index: 1;
    }
    .pane-right-menu .block-recent-item{
        margin: 0;
    }
    .pane-footer{
        position: relative;
        z-index: 1;
    }
}
@media (max-width: 750px) {
    .block-event-page--goods{
        background: #FFF;
        position: relative;
        margin: 0;
    }
    .pane-footer{
        background: #FFF;
        position: relative;
        margin: 0;
    }
}
**********************************/