@charset "utf-8";

/* -- reset -- */
#lpCnt ::before,
#lpCnt ::after {
    box-sizing: border-box;
    border-style: solid;
    border-width: 0;
}

#lpCnt p,
#lpCnt table,
#lpCnt blockquote,
#lpCnt address,
#lpCnt pre,
#lpCnt iframe,
#lpCnt form,
#lpCnt figure,
#lpCnt dl,
#lpCnt h1,
#lpCnt h2,
#lpCnt h3,
#lpCnt h4,
#lpCnt h5,
#lpCnt h6 {
    margin: 0;
    box-sizing: border-box;
}

#lpCnt ul,
#lpCnt ol {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

#lpCnt img {
    vertical-align: bottom;
    width: 100%;
    height: auto;
}

#lpCnt video {
    width: 100%;
}


/* -- メイン外の設定 -- */
body {
    overflow-x: hidden;
}

:root {
    --scrollbar: 0;
}

/* 全画面表示させたい要素に下記を適用 */
#lpCnt {
    width: calc(100vw - var(--scrollbar));
    margin: 0 calc(50% - (50vw - var(--scrollbar) / 2));
}

/*
    lpCnt
*/
#lpCnt {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 2;
    color: #2f2f2f;
}

@media screen and (max-width: 900px) {
    #lpCnt {
        font-size: 12px;
    }
}

/* -- inner -- */
#lpCnt .inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
}

@media screen and (max-width: 1226px) {
    #lpCnt .inner {
        margin: 0 28px;
        width: auto;
    }
}


/*
    tag
*/
#lpCnt a {
    color: #000;
    text-decoration: none;
    transition: opacity 0.6s;
}

@media screen and (min-width: 901px) {
    #lpCnt a:hover {
        opacity: 0.6;
    }
}


/*
    common
*/
/* -- hide -- */
@media screen and (min-width: 901px) {
    .pc_hide {
        display: none !important;
    }
}

@media screen and (max-width: 900px) {
    .sp_hide {
        display: none !important;
    }
}

/* -- hide -- */
@media screen and (min-width: 787px) {
    .pc_mvhide {
        display: none !important;
    }
}

@media screen and (max-width: 786px) {
    .sp_mvhide {
        display: none !important;
    }
}


/*
    contents
*/
/* -- itemPriceTxt -- */
#lpCnt .itemPriceTxt>*,
#lpCnt .itemPriceTxt a {
    /*font-family: "gill-sans-nova", sans-serif;*/
    font-weight: 300;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: .04em;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

#lpCnt .itemPriceTxt> :not(:last-child) {
    margin-bottom: 10px;
}

#lpCnt .itemPriceTxt .name {
    width: 170px;
}

#lpCnt .itemPriceTxt .lpPrice {
    line-height: .9;
    margin-right: 11px;
}

#lpCnt .itemPriceTxt .lpPrice span {
    color: #d9105c;
}

#lpCnt .itemPriceTxt .btn {
    /*font-family: "kozuka-gothic-pr6n", sans-serif;*/
    font-size: 12px;
    line-height: 1;
    letter-spacing: .1em;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -5px;
    padding: 0 9px 2px 10px;
    height: 22px;
    border: 1px solid #000;
    background: #000;
}

@media screen and (max-width: 900px) {

    #lpCnt .itemPriceTxt>*,
    #lpCnt .itemPriceTxt a {
        font-size: 13px;
        letter-spacing: .1em;
        width: 100%;
    }

    #lpCnt .itemPriceTxt> :not(:last-child) {
        margin-bottom: 10px;
    }

    #lpCnt .itemPriceTxt .name {
        /*width: 9vw;*/
    }

    #lpCnt .itemPriceTxt .lpPrice {
        line-height: 1;
        letter-spacing: 0;
        margin-right: 0;
        padding-top: .1vw;
    }

    #lpCnt .itemPriceTxt .btn {
        font-size: 1.5vw;
        letter-spacing: .17em;
        padding: 0 14px 2px;
        height: 2.2vw;
        top: 0;
    }
}

@media screen and (max-width: 699px) {
    #lpCnt .itemPriceTxt .name {
        /*width: 13vw;*/
    }

    #lpCnt .itemPriceTxt .lpPrice {
        padding-top: .3vw;
    }

    #lpCnt .itemPriceTxt .btn {
        font-size: 2.8vw;
        height: 4.5vw;
        padding: 0 14px 0;
    }

    #lpCnt .itemPriceTxt>*,
    #lpCnt .itemPriceTxt a {
        font-size: 13px;
    }
}

/* -- mvBox -- */
#lpCnt .mvBox .txt {
    margin-top: 76px;
    text-align: center;
    margin-bottom: 100px;
}

@media screen and (max-width: 900px) {
    #lpCnt .mvBox .inner {
        margin: 0;
    }

    #lpCnt .mvBox .txt {
        margin: 39px 15px 34px;
    }
}

/* -- itemBox --*/
#lpCnt .bk {
    background-color: #f4f1ee;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    display: flex;
    justify-content: center;
}

#lpCnt .itemBox .inner .tit {
    font-size: 25px;
    letter-spacing: .08em;
    text-align: center;
    padding: 45px 0 0;
}

#lpCnt .itemBox_cnt {
    margin: 200px auto;
    max-width: 1170px;
}

#lpCnt #style_01 .itemBox_cnt {
    margin: 120px auto 200px;
}

#lpCnt .itemBox_cnt> :not(:last-child) {
    margin-bottom: 120px;
}

#lpCnt .bk .itemBox_cnt {
    margin: 0 28px;
}

#lpCnt .bk .itemBox_cnt .box01 {
    padding: 200px 0;
}

#lpCnt .itemBox_cnt .img_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

#lpCnt .itemBox_cnt .img_box:nth-of-type(1) {
    margin-top: 150px;
}

#lpCnt .itemBox_cnt .img_box>* {
    width: 47.009%;
}

#lpCnt .itemBox_cnt .img_box .img03 {
    margin-top: 17.3%;
}

#lpCnt .itemBox_cnt .img_box .copy_box p {
    font-family: "the-seasons", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 35px;
}

#lpCnt .itemBox_cnt .img_box .copy_box .top+.bottom {
    text-align: right;
    padding-top: 190px;
}

#lpCnt .itemBox_cnt .img_box .copy_box .top+.middle {
    text-align: right;
    padding-top: 150px;
}

#lpCnt .itemBox_cnt .img_box .copy_box .middle+.bottom {
    text-align: left;
    padding-top: 150px;
}

#lpCnt .itemBox_cnt .img_box .copy_box .middle+.bottom-c {
    text-align: center;
    padding-top: 150px;
}

#lpCnt .itemBox_cnt .txtCnt {
    line-height: 2.12;
    letter-spacing: .01em;
    margin: 30px auto 0;
}

#lpCnt .itemBox_cnt .itemPriceTxt {
    margin-top: 31px;
}

#lpCnt .itemBox_cnt .itemPriceTxt .lpPrice.fsS {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    padding-top: 3px;
}

@media screen and (min-width: 901px) {

    #lpCnt .itemBox_cnt .itemPriceTxt>*,
    #lpCnt .itemBox_cnt .itemPriceTxt a {
        /*font-size: 14px;*/
    }

    #lpCnt .itemBox_cnt .itemPriceTxt .name {
        width: 180px;
    }

    #lpCnt .itemBox_cnt .itemPriceTxt .lpPrice {
        line-height: 1;
        margin-right: 12px;
        letter-spacing: .095em;
    }

    #lpCnt .itemBox_cnt .itemPriceTxt .btn {
        font-size: 12px;
        letter-spacing: .12em;
        top: -3px;
        padding: 1px 20px;
        height: 20px;
    }

    #lpCnt .bk .itemBox_cnt {
        display: flex;
        justify-content: center;
    }

    /* - box01 - */
    #lpCnt .itemBox_cnt .box01 .txtCnt {
        line-height: 2.12;
        letter-spacing: .08em;
        margin: 30px auto 0 0;
        max-width: 550px;
    }

    #lpCnt .bk .itemBox_cnt .box01 .txtCnt {
        margin: 30px 0 0 auto;
    }

    #lpCnt .itemBox_cnt .box01 .itemPriceTxt {
        margin-top: 31px;
    }

    /* - box02 - */
    #lpCnt .itemBox_cnt .box02 .txtCnt {
        padding: 0 10.5% 0 38%;
    }

    /* - box03 - */
    #lpCnt .itemBox_cnt .box03 .txtCnt {
        margin-top: 66px;
        padding: 0 7% 0 23.3%;
    }

    /* - box04 - */
    #lpCnt .itemBox_cnt .box04 .txtCnt {
        padding: 0 39% 0 9.4%;
    }

    /* - box05 - */
    #lpCnt .itemBox_cnt .box05 .txtCnt {
        padding: 0 0.3% 0 48.7%;
    }
}

@media screen and (max-width: 900px) {
    #lpCnt .itemBox .inner>.tit {
        font-size: 22px;
        letter-spacing: .12em;
        padding: 65px 0 0;
    }

    #lpCnt .bk {
        width: auto;
        display: block;
    }

    #lpCnt .itemBox_cnt {
        margin: 50px auto 60px;
    }

    #lpCnt .itemBox_cnt> :not(:last-child) {
        margin-bottom: 61px;
    }

    #lpCnt #style_01 .itemBox_cnt {
        margin: 50px auto 60px;
    }

    #lpCnt .bk .itemBox_cnt .box01 {
        padding: 60px 0;
    }

    #lpCnt .itemBox_cnt .img01 {
        margin: 0 calc(50% - 50vw);
        width: 100vw;
    }

    #lpCnt .itemBox_cnt .img_box {
        margin-top: 56px;
    }

    #lpCnt .itemBox_cnt .img_box:nth-of-type(1) {
        margin-top: 60px;
    }

    #lpCnt .itemBox_cnt .img_box>* {
        max-width: 550px;
        width: 100%;
        margin: 0 auto;
    }

    #lpCnt .itemBox_cnt .img_box .img03 {
        margin-top: 9.4%;
    }

    #lpCnt .itemBox_cnt .img_box .copy_box {
        padding-top: 35px;
    }

    #lpCnt .bk .itemBox_cnt .img_box .copy_box {
        order: 2;
    }

    #lpCnt .itemBox_cnt .img_box .copy_box .top+.bottom {
        padding-top: 25px;
    }

    #lpCnt .itemBox_cnt .img_box .copy_box .top+.middle {
        padding-top: 25px;
    }

    #lpCnt .itemBox_cnt .img_box .copy_box .middle+.bottom {
        padding-top: 25px;
    }

    #lpCnt .itemBox_cnt .img_box .copy_box .middle+.bottom-c {
        padding-top: 25px;
    }

    #lpCnt #style_02 .itemBox_cnt .img_box .copy_box p.middle,
    #lpCnt #style_02 .itemBox_cnt .img_box .copy_box p.bottom {
        padding-top: 25px;
    }

    #lpCnt .itemBox_cnt .txtCnt {
        line-height: 2.07;
        letter-spacing: .08em;
        margin: 25px auto 0;
        order: 2;
    }

    #lpCnt .itemBox_cnt .itemPriceTxt {
        margin-top: 29px;
    }

    #lpCnt .itemBox_cnt .itemPriceTxt .lpPrice.fsS {
        font-size: 2vw;
        margin-left: 7px;
        padding-top: .3vw;
    }
}

@media screen and (max-width: 700px) {
    #lpCnt .itemBox_cnt .itemPriceTxt .lpPrice.fsS {
        font-size: 2.8vw;
        padding-top: .7vw;
    }

    #lpCnt .itemBox .inner .tit {
        font-size: 14px;
        padding: 20px 0 0;
    }

    #lpCnt .itemBox_cnt .img_box .copy_box p {
        font-size: 5vw;
    }
}

/* -- lp-btn_outer -- */
#lpCnt .lp-btn_outer {
    margin: 245px 0 180px;
}

#lpCnt .lp-btn {
    display: block;
    position: relative;
    font-size: 18px;
    background-color: transparent;
    border: 1px solid #000;
    width: 80%;
    max-width: 568px;
    margin: 0 auto 30px;
    padding: 16px 0;
    letter-spacing: 3.7px;
    font-family: "gill-sans-nova", sans-serif;
    text-align: center;
}

#lpCnt .lp-btn:after {
    content: ' ';
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    right: 4%;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: translate(-50%, -50%) rotate(45deg);
}

#lpCnt .lp-btn_outer .txt {
    font-size: 14px;
    letter-spacing: .045em;
    text-align: center;
    margin: 32px auto 0;
}

@media screen and (max-width: 900px) {
    #lpCnt .lp-btn_outer {
        margin: 75px 0 40px;
    }

    #lpCnt .lp-btn {
        font-size: 16px;
        letter-spacing: 0.22em;
        padding: 16px 0;
        margin-bottom: 7px;
        width: 82%;
    }

    #lpCnt .lp-btn_outer .txt {
        font-size: 10px;
        margin: 56px auto 0;
    }
}

@media screen and (max-width: 700px) {
    #lpCnt .lp-btn {
        font-size: 14px;
    }
}

/*
    js
*/
/* -- 'inview' フェードプラグイン -- */
/* フェードアップ */
.fadeUp {
    opacity: 0;
    transition: opacity 1.2s;
}

.on.fadeUp {
    opacity: 1;
}

/* 子要素 */
.fadeUpItem>* {
    opacity: 0;
    transition: opacity 1.2s;
}

.fadeUpItem>*.on {
    opacity: 1;
}