@charset utf-8;



/** ================================================================================================



	6. LOVE STAR PROPOSE 2020

	@vertion 1.0   2020.5.25 New



==================================================================================================== **/



/* @import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700,700i|Noto+Sans+JP:300,700|Noto+Serif+JP:400,700&display=swap'); */
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,400i,700,700i|Noto+Sans+JP:300,700&display=swap');
@import url(../../common/css/common.css);
@import url(../../common/css/hvSlider.css);


del {
    color: #ff0000;
    text-decoration: line-through;
}

ins {
    color: #0000ff;
    text-decoration: none;
}


/** -------------------------------------------------------

    Basic Layout

----------------------------------------------------------- */

#sbArticle06{
    padding: 0 0 100px 0;
    font-weight: 300;
    font-size:14px;
    
    background-color: #ffffff;
/*
    background-image:url(../img/bg.jpg);
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto;
*/
}

#sbArticle06 a {
    color:#231815;
    text-decoration: none;
    transition: all 0.3s;
}
#sbArticle06 a:link,
#sbArticle06 a:visited,
#sbArticle06 a:hover,
#sbArticle06 a:active { color:#231815; }



/** -------------------------------------------------------

    Page Header

----------------------------------------------------------- **/

#sbArticle06 > header {
    flex-direction: row-reverse;
    background: #f0f0f0;
    background:linear-gradient(to bottom, #e3e3e3 0%, #f3f6f5 25%, #f3f6f5 75%, #e3e3e3 100%);
}

#sbArticle06 > header .image {
    width: 60%;
    margin: 0;
    padding: 0;
}

#sbArticle06 > header .image img {
    width: 100%;
    vertical-align: bottom;
}

#sbArticle06 > header .text {
    width: 40%;
    margin: 0;
    padding: 0 0 0 50px;
    box-sizing: border-box;
}

#sbArticle06 > header h1 {
    margin: 0;
    padding: 0;
    text-align: left;
    font-family:'Noto Sans JP', 'Yu Gothic Medium', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
    font-size:14px;
    font-weight: 300;
    line-height: 1;
}

#sbArticle06 > header h2 {
    margin: 20px 0 0 0;
    padding: 0;
    text-align: center;
    font-size:14px;
    font-weight: 400;
    line-height: 1;
}

#sbArticle06 > header h2 img {
    width: 100%;
    vertical-align: bottom;
}

#sbArticle06 > header .lead {
    padding: 0 0 0 19%;
}



/** -------------------------------------------------------

    Section共通

----------------------------------------------------------- **/



#sbArticle06 .sbSection {
    margin: 0 auto;
    padding: 50px 0;
}

#sbArticle06 .sbSection .flx {
    display: flex;
    flex-direction:row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    margin: 30px 0 0 0;
    padding: 0;
}

#sbArticle06 .sbSection header {
    display: block;
    position: relative;
    margin: 0;
    padding: 0 0 15px 0;
    box-sizing: border-box;
}
#sbArticle06 .sbSection header::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    background:#dd80da;
    background:linear-gradient(to right, #d7c2dd 0%, #6d48a0 25%, #6d48a0 75%, #d7c2dd 100%);
}

/*
#sbArticle06 .sbSection header::after {
    content: "★";
    display: block;
    position: absolute;
    left: 0px;
    bottom:-8px;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;

    color: #dd80da;
    text-align: center;
    font-size:12px;
    font-weight: 400;
    line-height: 20px;
    transform: rotate(-10deg);
}
*/

#sbArticle06 .sbSection header h3 {
    margin: 0;
    padding: 0;
    font-size:16px;
    font-weight: 300;
}

#sbArticle06 .sbSection .image {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#sbArticle06 .sbSection .image img {
    width: 100%;
    vertical-align: bottom;
}

#sbArticle06 .sbSection .image dd {
    margin: 10px 10px 0;
    font-size:12px;
}

#sbArticle06 .sbSection .detail {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.8;
    text-align: justify;
    z-index: 100;
}

#sbArticle06 .sbSection a.lineLink {
    display: inline-block;
    position: relative;
}
#sbArticle06 .sbSection a.lineLink::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color:#d7c2dd;
}
#sbArticle06 .sbSection a.lineLink::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    background-color:#6d48a0;
    opacity: 0;
    transition: all 0.3s linear;
}

#sbArticle06 .sbSection a.lineLink:hover::after {
    width: 100%;
    opacity: 1;
}




/** -------------------------------------------------------

    リード

----------------------------------------------------------- **/


#sbArticle06 #propose {
    margin: 0 auto;
    padding: 100px 0;
}

#sbArticle06 #propose header {
    margin: 0 25%;
}

#sbArticle06 #propose .image {
    width:34%;
}

#sbArticle06 #propose .detail {
    width:31%;
    padding: 0 20px;
}



/** -------------------------------------------------------

    サポート共通

----------------------------------------------------------- **/

#sbArticle06 .support {
}

#sbArticle06 .support .hvSlider .screen > ul > li {
    background-color: transparent;
}

#sbArticle06 .support .hvSlider .screen > ul > li img {
    width: 100%;
}




/** -------------------------------------------------------

    サポート個別

----------------------------------------------------------- **/


/* 01 --------------------------------- */

#sbArticle06 #support01 header {
    margin: 0 50% 0 0;
    text-align: left;
}

#sbArticle06 #support01 header h3 br {
    display: none;
}

#sbArticle06 #support01 .detail {
    width: 34%;
    padding: 0;
}

#sbArticle06 #support01 .image {
    width: 33%;
    padding: 0 0 0 10px;
}


/* 02 --------------------------------- */


#sbArticle06 #support02 .flx {
    flex-direction: row-reverse;
    align-items: center;
}

#sbArticle06 #support02 header {
    margin: 0 0 20px -80px;
    padding: 0 0 15px 80px;
    text-align: left;
}

#sbArticle06 #support02 header h3 br {
    display: none;
}

#sbArticle06 #support02 .detail {
    width: 45%;
    padding: 0 0 0 30px;
}

#sbArticle06 #support02 .image {
    width: 35%;
    padding: 0 0 0 10px;
}

#sbArticle06 #support02 .arrowLink {
    text-align: right;
}

#sbArticle06 #support02 .arrowLink a::after {
    border-right-color: transparent;
}


/* 03 --------------------------------- */

#sbArticle06 #support03 header {
    margin: 0 50% 0 0;
    text-align: left;
}

/*
#sbArticle06 #support03 .flx {
    flex-direction: row-reverse;
}
*/

#sbArticle06 #support03 header h3 br {
    display: none;
}

#sbArticle06 #support03 .detail {
    width: 34%;
    padding: 0 10px 0 0;
}

#sbArticle06 #support03 .image {
    width: 33%;
    padding: 0 10px 0 0;
}


/** -------------------------------------------------------

    フッターリンク

----------------------------------------------------------- **/


#sbArticle06 .moreLink {
    margin: 70px 0 0 0;
    text-align: center;
}


#sbArticle06 .moreLink > a {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 10px 30px;
}
#sbArticle06 .moreLink > a::before,
#sbArticle06 .moreLink > a::after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border:1px solid #6d48a0;
    opacity: 0;
    transition: all 1s;
}
#sbArticle06 .moreLink > a::before {
    left: -5px;
    top:-5px;
}
#sbArticle06 .moreLink > a::after {
    right: -5px;
    bottom: -5px;
}

#sbArticle06 .moreLink > a:hover::before {
    opacity: 1;
    width: 100%;
    height: 100%;
    border-color:#d7c2dd;
}
#sbArticle06 .moreLink > a:hover::after {
    opacity: 1;
    width: 100%;
    height: 100%;
}

#sbArticle06 .moreLink dl {
    display: block;
    position: relative;
    margin: 0;
    padding: 10px;
}
#sbArticle06 .moreLink dl::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom : 0;
    width: 100%;
    height: 1px;
    margin: 0;
    padding: 0;
    background-color: #6d48a0;
    transition: all 1s;
}
#sbArticle06 .moreLink dl::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom : 0;
    width: 10px;
    height: 1px;
    margin: 0;
    padding: 0;
    background-color: #6d48a0;
    transition: all 1s;
    transform: rotate(45deg);
    transform-origin: right center;
    opacity: 1;
}
#sbArticle06 .moreLink a:hover dl::before,
#sbArticle06 .moreLink a:hover dl::after {
    opacity: 0;
}


#sbArticle06 .moreLink dt {
    position: relative;
    padding: 0 0 10px;
    
    text-align: center;
    font-family: "Cormorant Garamond", serif;
    font-size:20px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.05em;
    line-height: 1;
}

#sbArticle06 .moreLink dt::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 20px;
    height: 1px;
    margin: 0 0 0 -10px;
    padding: 0;
    background-color: #222222;
}
#sbArticle06 .moreLink dd {
    margin: 10px 0 0 0;
    padding: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

#sbArticle06 .moreLink dd br {
    display: none;
}

/*
#sbArticle06 .moreLink > a::before, .boxLink > a::after {
    border-color:#dd80da;
}
*/

#sbArticle06 .boxLink > a br {
    display: none;
}

/** -------------------------------------------------------

    その他リンク

----------------------------------------------------------- **/

#sbArticle06 #otherLink {
    margin: 70px 0 0 0;
    text-align: center;
}

#sbArticle06 #otherLink a::after {
    border-right-color:transparent;
}



/** -------------------------------------------------------

    クレジット

----------------------------------------------------------- **/

#sbArticle06 .credits {
    display: block;
    position: relative;
    width: auto;
    max-width: 800px;
    margin: 70px auto 0;
    padding: 0;
    text-align: center;
    font-size:10px;
    color:#888888;
}

#sbArticle06 .credits li {
    display: inline-block;
    padding: 0 0.5em;
}


/** -------------------------------------------------------

    アニメーション

----------------------------------------------------------- **/

/* before */

#sbArticle06 .sbSection header {
    opacity: 0;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0s;
}
#sbArticle06 .sbSection header::before {
    opacity: 0;
    width: 1px;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}

/*
#sbArticle06 .sbSection header::after {
    opacity: 0;
    left: 0px;
}
*/
#sbArticle06 .sbSection .image {
    opacity: 0;
    transform: translateY(100px);

    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in;
    transition-delay: 0s;
}

#sbArticle06 .sbSection .detail {
    opacity: 0;
    transform: translateY(100px);

    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in;
    transition-delay: 0s;
}


#sbArticle06 #support01 .image,
#sbArticle06 #support02 .image,
#sbArticle06 #support03 .image {
    opacity: 1;
    transform: translateY(0px);
    transition-duration: 0s;
    transition-delay: 0s;
}








/* after */

@keyframes sbStar {
    0% {
        opacity: 0;
        left: 0%;
    }
    50% {
        opacity: 1;
        left: 50%;
    }
    100% {
        opacity: 0;
        left: 100%;
    }
}


#sbArticle06 .sbSection.sbFade header {
    opacity: 1;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0s;
}
#sbArticle06 .sbSection.sbFade header::before {
    opacity: 1;
    width: 100%;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 1s;
}
/*
#sbArticle06 .sbSection.sbFade header::after {
    opacity: 0;
    left: 100%;
    
    animation-name: sbStar;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 1s;
}
*/
#sbArticle06 .sbSection.sbFade .image {
    opacity: 1;
    transform: translateY(0px);

    transition-duration: 3s;
    transition-timing-function: ease-out;
}

#sbArticle06 .sbSection.sbFade .detail {
    opacity: 1;
    transform: translateY(0px);

    transition-duration: 3s;
    transition-timing-function: ease-out;
}



#sbArticle06 #propose.sbFade .image.image01 {
    transition-delay: 2s;
}

#sbArticle06 #propose.sbFade .detail {
    transition-delay: 3s;
}

#sbArticle06 #propose.sbFade .image.image02 {
    transition-delay: 4s;
}



#sbArticle06 #support01.sbFade .detail {
    transition-delay: 2s;
}

#sbArticle06 #support01.sbFade .image.image01 {
    transition-delay: 3s;
}

#sbArticle06 #support01.sbFade .image.image02 {
    transition-delay: 4s;
}


#sbArticle06 #support02.sbFade .image {
    transition-delay: 2s;
}

#sbArticle06 #support03.sbFade .detail {
    transition-delay: 2s;
}

#sbArticle06 #support03.sbFade .image.image01 {
    transition-delay: 3s;
}

#sbArticle06 #support03.sbFade .image.image02 {
    transition-delay: 4s;
}








/** ============================================================================


	Responsive for tablet


================================================================================ **/



@media all and (max-width: 1024px) and (min-width:768px) {




}



/** ============================================================================


	Responsive for Smart Phone


================================================================================ **/



@media all and (max-width: 767px) {


    /** Basic Layout -------------------------------------- */

    #sbArticle06{
        padding: 0 0 100px 0;
        font-size:12px;
        background-position: center top;
        background-size: 200% auto;
    }



    /** Page Header --------------------------------------- **/

    #sbArticle06 > header {
/*        background:linear-gradient(to bottom, #e5e7e6 0%, #f3f6f5 25%, #f3f6f5 75%, #e5e7e6 100%); */
    }

    #sbArticle06 > header .image {
        width: auto;
        margin: 0;
        padding: 0;
        background: #f0f0f0;
        background:linear-gradient(to bottom, #e5e7e6 0%, #f3f6f5 25%, #f3f6f5 75%, #e5e7e6 100%);
    }

    #sbArticle06 > header .image img {
        width: 100%;
        vertical-align: bottom;
    }

    #sbArticle06 > header .text {
        position: absolute;
        left: 5%;
        top:12%;
        width: 90%;
        margin: 0;
        padding: 0;
    }

    #sbArticle06 > header h1 {
        font-size:12px;
    }

    #sbArticle06 > header h2 {
        margin: 10px 0 0 0;
        font-size:12px;
    }



    /** Section共通 ----------------------------------------------------------- **/

    #sbArticle06 .sbSection .flx {
        display: block;
        margin: 0;
    }

    #sbArticle06 .sbSection .image dd {
        margin: 10px 30px 0;
        font-size:12px;
    }
    
    #sbArticle06 .sbSection .image dd br {
        display: none;
    }


    /** リード ----------------------------------------------------------- **/

    #sbArticle06 #propose {
        margin: 0 auto;
        padding: 100px 0;
    }

    #sbArticle06 #propose header {
        margin: 0 20px;
    }

    #sbArticle06 #propose .image {
        width:auto;
        margin: 30px 0 0 0;
    }

    #sbArticle06 #propose .detail {
        width:auto;
        padding: 30px 30px 0;
    }



    /** サポート共通 ----------------------------------------------------------- **/

    /** サポート個別 ----------------------------------------------------------- **/

    /* 01 --------------------------------- */

    #sbArticle06 #support01 header {
        margin: 0 20px;
        text-align: center;
    }

    #sbArticle06 #support01 header h3 br {
        display: inline;
    }

    #sbArticle06 #support01 .detail {
        width: auto;
        margin: 30px 30px 0;
        padding: 0;
    }

    #sbArticle06 #support01 .image {
        width: auto;
        margin: 30px 0 0 0;
        padding: 0;
    }


    /* 02 --------------------------------- */

    #sbArticle06 #support02 header {
        margin: 0 20px 30px;
        padding: 0 0 15px;
        text-align: center;
    }

    #sbArticle06 #support02 header h3 br {
        display: inline;
    }


    #sbArticle06 #support02 .detail {
        width: auto;
        padding: 0;
    }
    
    #sbArticle06 #support02 .detail p {
        margin: 1em 30px;
    }

    #sbArticle06 #support02 .image {
        width: auto;
        margin: 30px 0 0 0;
        padding: 0;
    }


    /* 03 --------------------------------- */

    #sbArticle06 #support03 header {
        margin: 0 20px;
        text-align: center;
    }

    #sbArticle06 #support03 header h3 br {
        display: inline;
    }

    #sbArticle06 #support03 .detail {
        width: auto;
        margin: 30px 30px 0;
        padding: 0;
    }

    #sbArticle06 #support03 .image {
        width: auto;
        margin: 30px 0 0 0;
        padding: 0;
    }


    /** フッターリンク ----------------------------------------------------------- **/


    #sbArticle06 .moreLink {
        margin: 100px 35px 0;
    }

    #sbArticle06 .moreLink > a {
        display: block;
    }
    #sbArticle06 .moreLink > a::before,
    #sbArticle06 .moreLink > a::after {
        opacity: 1;
        width: 100%;
        height: 100%;
    }

    #sbArticle06 .moreLink dl::before,
    #sbArticle06 .moreLink dl::after {
        display: none;
    }

    #sbArticle06 .moreLink dt {
        font-size:18px;
    }

    #sbArticle06 .moreLink dd {
        font-size: 14px;
    }

    #sbArticle06 .moreLink dd br {
        display: inline;
    }


    /** クレジット ----------------------------------------------------------- **/

    #sbArticle06 .credits {
        max-width: none;
        margin: 100px 30px 0;
    }

    #sbArticle06 .credits li {
        display: block;
        padding: 0;
    }


    /** -------------------------------------------------------

        アニメーション

    ----------------------------------------------------------- **/

    /* before */

    /*
    #sbArticle06 .sbSection header {
        opacity: 0;
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 0s;
    }
    #sbArticle06 .sbSection header::before {
        opacity: 0;
        width: 1px;
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-out;
        transition-delay: 0s;
    }
    #sbArticle06 .sbSection header::after {
        opacity: 0;
        left: 0px;
    }

    #sbArticle06 .sbSection .image {
        opacity: 0;
        transform: translateY(100px);

        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in;
        transition-delay: 0s;
    }

    #sbArticle06 .sbSection .detail {
        opacity: 0;
        transform: translateY(100px);

        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in;
        transition-delay: 0s;
    }
*/
    /* after */
/*
    @keyframes sbStar {
        0% {
            opacity: 0;
            left: 0%;
        }
        50% {
            opacity: 1;
            left: 50%;
        }
        100% {
            opacity: 0;
            left: 100%;
        }
    }


    #sbArticle06 .sbSection.sbFade header {
        opacity: 1;
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 0s;
    }
    #sbArticle06 .sbSection.sbFade header::before {
        opacity: 1;
        width: 100%;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 1s;
    }
    #sbArticle06 .sbSection.sbFade header::after {
        opacity: 0;
        left: 100%;

        animation-name: sbStar;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-delay: 1s;
    }

    #sbArticle06 .sbSection.sbFade .image {
        opacity: 1;
        transform: translateY(0px);

        transition-duration: 3s;
        transition-timing-function: ease-out;
    }

    #sbArticle06 .sbSection.sbFade .detail {
        opacity: 1;
        transform: translateY(0px);

        transition-duration: 3s;
        transition-timing-function: ease-out;
    }



    #sbArticle06 #propose.sbFade .image.image01 {
        transition-delay: 2s;
    }

    #sbArticle06 #propose.sbFade .detail {
        transition-delay: 3s;
    }

    #sbArticle06 #propose.sbFade .image.image02 {
        transition-delay: 4s;
    }



    #sbArticle06 #support01.sbFade .detail {
        transition-delay: 2s;
    }

    #sbArticle06 #support01.sbFade .image.image01 {
        transition-delay: 3s;
    }

    #sbArticle06 #support01.sbFade .image.image02 {
        transition-delay: 4s;
    }



    #sbArticle06 #support02.sbFade .image {
        transition-delay: 2s;
    }


    #sbArticle06 #support03.sbFade .detail {
        transition-delay: 2s;
    }

    #sbArticle06 #support03.sbFade .image.image01 {
        transition-delay: 3s;
    }

    #sbArticle06 #support03.sbFade .image.image02 {
        transition-delay: 4s;
    }

*/   




}