@charset "UTF-8";
/*=======================================
                  PC   
========================================*/
/*=======================================
 	        animation
 ========================================*/
.inview {
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition: all 1500ms;
    transition: all 1500ms;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}

.inview.active {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/* ===================
	　　 General
=================== */
html {
    font-size: 62.5%;
}

/* * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
} */

@media screen and (min-width: 768px) {
    #wrapper #breadcrumb {
        max-width: 1400px;
        width: 100%;
        margin: 0 auto;
    }
}

#mainLP_Contents {
    /* background-image: url(../img/pc.jpg); */
    background-repeat: no-repeat;
    background-size: 140rem;
    background-position-x: center;
    background-position-y: -6.6rem;
    overflow: hidden;
}

#breadcrumb.edit_lp .cateList {
    margin: 0 auto 30px 120px;
}

#wrapper {
    width: 140rem;
    margin: 3.9rem auto 0;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #000;
}

#wrapper img {
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
}

#wrapper .yugothic {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", "メイリオ", sans-serif;
    line-height: 2;
    letter-spacing: 0.03em;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    color: #000;
    font-size: 1.3rem;
}

#wrapper .Crimson_Text {
    font-family: 'Crimson Text', serif;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
}

#wrapper .noto-serif-jp {
    font-family: 'Noto Serif JP', serif;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    font-weight: 600;
}

#wrapper .price {
    font-family: 'Crimson Text', serif;
    font-size: 1.3rem;
    letter-spacing: 0.015em;
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    line-height: 1.3;
    margin-top: 2.4rem;
}

#wrapper .price span {
    border-bottom: 0.1rem solid #cccccc;
}

#wrapper .ml {
    margin-left: 0.9rem;
}

#wrapper h3 {
    position: relative;
    margin-bottom: 3.9rem;
    font-size: 2.2rem;
    font-style: italic;
}
#wrapper h3::before {
    position: absolute;
    content: "";
    margin: auto;
    background-repeat: no-repeat;
    background-size: contain;
    top: 2.85rem;
    left: 0.1rem;
    right: 0;
}

#wrapper h4 {
    position: relative;
    margin-bottom: 4.8rem;
    padding: 0 2rem;
    font-size: 3rem;
    letter-spacing: 0.025em;
    display: inline-block;
    background-color: #fff;
}

/* ===================
	　　  common
=================== */
@media screen and (max-device-width: 767px) {
    #breadcrumb .cateList {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
}

/* ===================
	　 firstview
=================== */
#firstview {
    position: relative;
    text-align: center;
    margin-bottom: 12.1rem;
    padding-top: 5.1rem;
    padding-bottom: 4.6rem;
}
#firstview::before {
    content: "";
    position: absolute;
    width: 120rem;
    height: 100%;
    border: 0.1rem solid #666666;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
}
#firstview::after {
    content: "";
    position: absolute;
    width: 0.1rem;
    height: 100.1%;
    background: #666666;
    right: 12rem;
    top: 0;
}
#firstview .headline {
    position: absolute;
    top: 7.8rem;
    right: 7.6rem;
    padding: 0 1rem;
    font-family: 'Crimson Text', serif;
    font-size: 1.5rem;
    letter-spacing: 0.025em;
    transform: rotate(90deg);
    background-color: #fff;
    z-index: 2;
}

#firstview .fv-img {
    width: 78rem;
    position: relative;
    margin: 0 auto 4.8rem;
}

#firstview .fv-img a {
    display: block;
}

#firstview h2 {
    margin-bottom: 4rem;
    font-family: 'Crimson Text', serif;
    font-size: 3.6rem;
    letter-spacing: 0.025em;
}

#firstview p:nth-of-type(1) {
    margin-bottom: 2.1rem;
}

/* ===================
	　 section01
=================== */
.sec01 {
    text-align: center;
    margin-bottom: 11.5rem;
}

.sec01 .img01 {
    width: 60rem;
    margin: 0 auto 3.7rem;
}

.sec01 .description {
    margin-bottom: 5.5rem;
}

.sec01 .img02 {
    width: 63rem;
    margin: 0 auto;
}

.sec01 h3::before {
    width: 14.4rem;
    height: 0.9rem;
    background-image: url("../img/line01.png");
}

.sec01 h3 {
    letter-spacing: 0.01em;
}

/* ===================
	　 section02
=================== */
.sec02 {
    position: relative;
    margin-bottom: 11.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sec02 .img01 {
    width: 36.8rem;
}
.sec02 .img01 video {
    width: 36.8rem;
    height: 64rem;
}
.sec02 .description {
    width: 40rem;
    margin-left: 6rem;
    margin-bottom: -5rem;
    text-align: justify;
}

.sec02 h3 {
    margin-left: 1rem;
    letter-spacing: 0.02em;
}
#wrapper .sec02 h3::before {
    width: 17.2rem;
    height: 0.9rem;
    top: 2.9rem;
    left: -23.9rem;
    background-image: url("../img/line02.png");
}

/* ===================
	　 section03
=================== */
.sec03 {
    margin-bottom: 11.9rem;
    text-align: center;
}

.sec03 .img01 {
    width: 40rem;
    margin: 0 auto 3.7rem;
}

.sec03 h3 {
    letter-spacing: 0.025em;
}
#wrapper .sec03 h3::before {
    width: 22rem;
    height: 0.9rem;
    background-image: url("../img/line03.png");
}

/* ===================
	　 section04
=================== */
.sec04 {
    position: relative;
    margin-bottom: 11.7rem;
    text-align: center;
}
.sec04::before {
    content: "";
    position: absolute;
    width: 130rem;
    height: 0.1rem;
    background-color: #666666;
    top: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.sec04 .contents-wrapper {
    width: 68rem;
    margin: 0 auto 9.7rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}
.sec04 .contents-wrapper:nth-of-type(1),
.sec04 .contents-wrapper:nth-of-type(4) {
    margin-bottom: 9.6rem;
}
.sec04 .contents-wrapper:nth-of-type(3) {
    width: 69rem;
    margin-left: 36rem;
    justify-content: flex-start;
}
.sec04 .contents:nth-child(2) {
    margin-left: 8rem;
}
.sec04 .contents-wrapper:nth-of-type(3) .contents:nth-child(2) {
    margin-left: 7.3rem;
}
.sec04 .img01 {
    width: 30rem;
    margin: 0 auto 4rem;
}
.sec04 .title {
    margin-bottom: 2.3rem;
    font-size: 2.2rem;
    letter-spacing: 0.03em;
}
.sec04 .contents-txt {
    font-size: 1.3rem;
    line-height: 2;
    letter-spacing: 0.025em;
}

/* ===================
	　　  button
=================== */
.m-btn {
    width: 60rem;
    margin: 0 auto 11.8rem;
}

.m-btn a {
    width: 60rem;
    height: 6.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0.1rem solid #000;
    background-color: #fff;
    font-family: "Crimson Text", serif;
    font-size: 1.1rem;
    line-height: 1.54;
    letter-spacing: 0.002em;
    text-align: center;
}

#dvUserBox table {
    background-color: #fff;
}

/*=======================================
               IE
========================================*/
/*=======================================
               Responsive   
========================================*/
@media screen and (min-device-width: 768px) {
    .sp_only {
        display: none;
    }
}

/* for SP */
@media screen and (max-width: 767px) {
    /*=======================================
                    SP    
  ========================================*/
    /* ===================
	　　 animation
=================== */
    /* ===================
	　　 General
=================== */
    #breadcrumb.edit_lp .cateList {
        margin: 0 auto;
    }
    .main-inner {
        /* background-image: url("../img/sp.jpg"); */
        background-repeat: no-repeat;
        background-size: calc(750* (100vw / 750));
        background-position-x: center;
        background-position-y: calc(-119* (100vw / 750));
        overflow: hidden;
        position: relative;
    }
    /* .main-inner::before{
        content: "";
        position: absolute;
        background-image: url(../img/sp2.jpg);
        background-repeat: no-repeat;
        background-size: calc(750* (100vw / 750));
        background-position-x: center;
        top: calc(13276* (100vw / 750));
        width: calc(750* (100vw / 750));
        height: calc(15224* (100vw / 750));
        overflow: hidden;
        z-index: -1;
    } */
    .main-area .main-inner {
        width: 100%;
    }
    #wrapper {
        width: calc(750* (100vw / 750));
        margin: 0 auto;
        -webkit-font-feature-settings: "palt";
        font-feature-settings: "palt";
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #wrapper .yugothic {
        font-size: calc(24* (100vw / 750));
        line-height: 2.2;
    }
    #wrapper .price {
        font-size: calc(24* (100vw / 750));
        letter-spacing: 0.015em;
        margin-top: calc(43* (100vw / 750));
    }
    #wrapper .ml {
        margin-left: calc(21* (100vw / 750));
    }
    #wrapper .price span {
        border-bottom:  calc(2* (100vw / 750)) solid #cccccc;
    }
    #wrapper .sp_only {
        display: block !important;
    }
    #wrapper .pc_only {
        display: none;
    }
    #wrapper h3 {
        margin-bottom: calc(68* (100vw / 750));
        font-size: calc(38* (100vw / 750));
    }
    #wrapper h3::before {
        position: absolute;
        content: "";
        margin: auto;
        background-repeat: no-repeat;
        background-size: contain;
        top: calc(45* (100vw / 750));
        left: 0;
        right: 0;
    }

    #wrapper h4 {
        position: relative;
        margin-bottom:  calc(77* (100vw / 750));
        padding: 0  calc(20* (100vw / 750));
        font-size:  calc(46* (100vw / 750));
        letter-spacing: 0.025em;
    }

    /* ===================
    　　  common
  =================== */
    @media screen and (max-device-width: 767px) {
        #breadcrumb .cateList {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    /* ===================
    　 firstview
  =================== */
    #firstview {
        margin-bottom: calc(149* (100vw / 750));
        padding-top: calc(40* (100vw / 750));
        padding-bottom: calc(49* (100vw / 750));
    }
    #firstview::before {
        width: calc(750* (100vw / 750));
        height: 100%;
        border-left: none;
        border-right: none;
        border-top: calc(2* (100vw / 750)) solid #666666;
        border-bottom: calc(2* (100vw / 750)) solid #666666;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
    }
    #firstview::after {
        width: calc(2* (100vw / 750));
        height: 100%;
        right: calc(19* (100vw / 750));
        top: 0;
    }
    #firstview .headline {
        top: calc(77* (100vw / 750));
        right: calc(-35* (100vw / 750));
        padding: 0 calc(10* (100vw / 750));
        font-size: calc(20* (100vw / 750));
        letter-spacing: 0.025em;
    }

    #firstview .fv-img {
        width: calc(640* (100vw / 750));
        margin: 0 auto calc(60* (100vw / 750));
        margin-left: calc(40* (100vw / 750));
    }

    #firstview h2 {
        margin-left: calc(40* (100vw / 750));
        margin-bottom: calc(40* (100vw / 750));
        font-size: calc(54* (100vw / 750));
        letter-spacing: 0.02em;
        text-align: left;
    }

    #firstview p {
        width: calc(640* (100vw / 750));
        margin-left: calc(40* (100vw / 750));
        text-align: justify;
    }
    #firstview p:nth-of-type(1) {
        margin-bottom: calc(21* (100vw / 750));
    }

    /* ===================
    　 section01
  =================== */
    .sec01 {
        margin-bottom: calc(139* (100vw / 750));
    }

    .sec01 .img01 {
        width: 100%;
        margin: 0 auto calc(76* (100vw / 750));
    }

    .sec01 .description {
        margin-bottom: 5.5rem;
    }

    .sec01 .img02 {
        width: 63rem;
        margin: 0 auto;
    }

    .sec01 h3::before {
        width: calc(256* (100vw / 750));
        height: calc(16* (100vw / 750));
        background-image: url("../img/sp_line01.png");
    }

    .sec01 h3 {
        letter-spacing: 0.01em;
    }

    /* ===================
    　 section02
  =================== */
    .sec02 {
        margin-bottom: calc(139* (100vw / 750));
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .sec02 .img01 {
        width: calc(552* (100vw / 750));
        margin: 0 auto calc(76* (100vw / 750));
    }
    .sec02 .img01 video {
        width: calc(552* (100vw / 750));
        height: calc(960* (100vw / 750));
    }
    .sec02 .description {
        width: auto;
        margin: 0 auto;
        text-align: center;
    }

    .sec02 h3 {
        margin-left: 0;
        letter-spacing: 0.02em;
    }
    #wrapper .sec02 h3::before {
        width: calc(302* (100vw / 750));
        height: calc(17* (100vw / 750));
        top: calc(46* (100vw / 750));
        left: 0;
        background-image: url("../img/sp_line02.png");
    }

    /* ===================
    　 section03
  =================== */
    .sec03 {
        margin-bottom:  calc(150* (100vw / 750));
        text-align: center;
    }

    .sec03 .img01 {
        width: calc(540* (100vw / 750));
        margin: 0 auto calc(76* (100vw / 750));
    }

    .sec03 h3 {
        letter-spacing: 0.025em;
    }
    #wrapper .sec03 h3::before {
        width: calc(346* (100vw / 750));
        height: calc(17* (100vw / 750));
        background-image: url("../img/sp_line03.png");
    }

    /* ===================
    　 section04
  =================== */
    .sec04 {
        position: relative;
        margin-bottom: calc(31* (100vw / 750));
        text-align: center;
    }
    .sec04::before {
        width: 100%;
        height:  calc(2* (100vw / 750));
        top:  calc(18* (100vw / 750));
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    .sec04 .contents-wrapper {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }
    .sec04 .contents {
        margin-bottom: calc(110* (100vw / 750));
    }
    .sec04 .contents-wrapper:nth-of-type(1),
    .sec04 .contents-wrapper:nth-of-type(4) {
        margin-bottom: 0;
    }
    .sec04 .contents-wrapper:nth-of-type(3) {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
    .sec04 .contents:nth-child(2) {
        margin-left: 0;
    }
    .sec04 .contents-wrapper:nth-of-type(3) .contents:nth-child(2) {
        margin-left: 0;
    }
    .sec04 .contents-wrapper:nth-of-type(2) .contents:nth-child(1) {
        margin-bottom: calc(111* (100vw / 750));
    }
    .sec04 .contents-wrapper:nth-of-type(3) .contents:nth-child(1) {
        margin-bottom: calc(111* (100vw / 750));
    }
    .sec04 .img01 {
        width:  calc(480* (100vw / 750));
        margin: 0 auto  calc(61* (100vw / 750));
    }
    .sec04 .title {
        margin-bottom:  calc(33* (100vw / 750));
        font-size:  calc(38* (100vw / 750));
        letter-spacing: 0.03em;
    }
    .sec04 .contents-txt {
        font-size:  calc(24* (100vw / 750));
        line-height: 2.2;
        letter-spacing: 0.025em;
    }

    /* ===================
    　　  button
  =================== */
    .m-btn {
        width: calc(615* (100vw / 750));
        margin: 0 auto calc(150* (100vw / 750));
    }

    .m-btn a {
        width: calc(615* (100vw / 750));
        height: calc(124* (100vw / 750));
        border: calc(2* (100vw / 750)) solid #000;
        font-size: calc(22* (100vw / 750));
        line-height: 1.54;
        letter-spacing: 0.002em;
    }
}

/* for Tablet */
@media screen and (min-width: 768px) and (max-width: 1400px) {
    /*=======================================
                    Tablet    
  ========================================*/
    /* ===================
	　　 General
=================== */
    html {
        font-size: calc(10* (100vw / 1400)) !important;
    }
    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}
/*# sourceMappingURL=style.css.map */