@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);


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

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


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

    Basic Layout

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

#sbArticle07{
    padding: 0 0 100px 0;
    font-weight: 300;
    font-size:14px;
    background-color: #ffffff;
}

#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

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

#sbArticle07 > header {
    flex-direction: row-reverse;
    background-image:url(../img/bg.jpg);
    background-position: left top;
    background-repeat: repeat-x; 
    background-size: auto 100%;
    color:#292639;
}

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

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

#sbArticle07 > header .text {
    display: block;
    position: absolute;
    left: 10%;
    width: 60%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transform: translateY(-50%);
}

#sbArticle07 > 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:16px;
    font-weight: 300;
    line-height: 1;
}

#sbArticle07 > header h2 {
    margin: 10px 0 0 0;
    padding: 0;
    
    font-family: "Cormorant Garamond", serif;
    text-align: left;
    font-size:40px;
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
}



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

    リード文

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

#sbArticle07 > .lead {
    margin: 50px 0 0 0;
    text-align: center;
    line-height: 2;
}



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

    リング共通

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

#sbArticle07 .sbRing {
    padding: 0;
    margin: 100px auto 0;
}



#sbArticle07 .sbRing header {
    display: block;
    position: absolute;
    left: 40%;
    top: 5%;
    width: 60%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    color: #2f2638;
}

#sbArticle07 .sbRing header h3 {
    display: inline-block;
    vertical-align: baseline;
    margin: 0;
    padding: 0;

    font-family: "Cormorant Garamond", serif;
    font-size:40px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

#sbArticle07 .sbRing header h4 {
    display: inline-block;
    vertical-align: baseline;
    margin: 0;
    padding: 0 0 0 20px;
    font-size:14px;
    font-weight: 400;
}
#sbArticle07 .sbRing header h4::before {
    content: "“";
    padding-right: 3px;
}
#sbArticle07 .sbRing header h4::after {
    content: "”";
    padding-left: 3px;
}

#sbArticle07 .sbRing header p {
    display: block;
    font-size:16px;
    font-weight: 300;
}




#sbArticle07 .sbRing .flx {
    display: flex;
    flex-direction:row-reverse;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 0;
}

#sbArticle07 .sbRing .text {
    width: 40%;
    margin: 0;
    padding: 0 20px 0 0;
    box-sizing: border-box;
}

#sbArticle07 .sbRing h5 {
    display: block;
    position: relative;
    margin: 20px 0 0 20%;
    padding: 0 10px 10px 0;
    font-size:16px;
    font-weight: 300;
}
#sbArticle07 .sbRing h5::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 120%;
    height: 1px;
    margin: 0;
    padding: 0;
    background:#dd80da;
    background:linear-gradient(to right, #6d48a0 0%, #6d48a0 75%, #d7c2dd 100%);
}

#sbArticle07 .sbRing .detail {
    margin: 30px 0 0 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.8;
    text-align: justify;
    z-index: 100;
}

#sbArticle07 .sbRing .cap {
    display: block;
    position: absolute;
    left: 40%;
    bottom:0;
    width: 60%;
    margin: 0;
    padding: 0 20px 10px 20px;
    box-sizing: border-box;
    
    font-size:12px;
    color: #231815;
    line-height: 1.5;
    text-align: justify;
}

#sbArticle07 .sbRing .arrowLink {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.8;
    text-align: right;
    z-index: 100;
}
#sbArticle07 .sbRing .arrowLink a::after {
    border-right-color: transparent;
}

#sbArticle07 .sbRing .image {
    width: 60%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#sbArticle07 .sbRing .image img {
    width: 100%;
    vertical-align: bottom;
}


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

    リング個別

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


#sbArticle07 #sbRing01-2 {
    margin: 0 auto;
}

#sbArticle07 #sbRing01-2 .flx {
    flex-direction:row;
}

#sbArticle07 #sbRing01-2 .text {
    padding: 0 0 0 20px;
}

#sbArticle07 #sbRing01-2 h5 {
    display: block;
    position: relative;
    margin: 20px 30% 0 0;
    padding: 0 10px 10px 10%;
    font-size:16px;
    font-weight: 300;
}
#sbArticle07 #sbRing01-2 h5::before {
    left: auto;
    right: 0;
    background:linear-gradient(to left, #6d48a0 0%, #6d48a0 75%, #d7c2dd 100%);
}

#sbArticle07 #sbRing01-2 .cap {
    left:25%;
    width: 35%;
    padding: 0 20px 10px 0;
    color:#ffffff;
}



#sbArticle07 #sbRing03 header {
    left: 0;
}

#sbArticle07 #sbRing03 .flx {
    flex-direction:row;
}

#sbArticle07 #sbRing03 .text {
    padding: 0 0 0 20px;
}

#sbArticle07 #sbRing03 h5 {
    margin: 0 30% 0 0;
    padding: 0 10px 10px 0;
}
#sbArticle07 #sbRing03 h5::before {
    left: auto;
    right: 0;
    background:linear-gradient(to left, #6d48a0 0%, #6d48a0 75%, #d7c2dd 100%);
}

#sbArticle07 #sbRing03 .cap {
    left: 0;
}

#sbArticle07 .sbRing .image {
    width: 60%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#sbArticle07 .sbRing .image img {
    width: 100%;
    vertical-align: bottom;
}


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

    意味

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

#sbArticle07 #means {
}

#sbArticle07 #means header {
    text-align: center;
}

#sbArticle07 #means header h3 {
    font-size:18px;
    font-weight: 400;
}

#sbArticle07 #means .detail {
    margin: 30px 0 0 0;
    text-align: center;
}

#sbArticle07 #means .arrowLink {
    margin: 30px 0 0 0;
    text-align: center;
    font-size:16px;
}

#sbArticle07 #means .arrowLink br {
    display: none;
}

#sbArticle07 #means .arrowLink a {
    margin: 0 20px;
}
#sbArticle07 #means .arrowLink a::after {
    border-right-color: transparent;
}


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

    Original Marriage Registration

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

#sbArticle07 #registration {
    padding: 30px;
/*    border:5px solid #d6c1dc; */
}

#sbArticle07 #registration::before {
    content: "";
    display: block;
    position: absolute;
    left: -5px;
    top:-5px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*    border:1px solid #d6c1dc; */
    border:1px solid #d6c1dc;
}
#sbArticle07 #registration::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    right:-5px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*    border:1px solid #d6c1dc; */
    border:1px solid #d6c1dc;
    visibility: visible;
}

#sbArticle07 #registration .flx {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0;
}

#sbArticle07 #registration .text {
    width: 50%;
    margin: 0;
    padding: 0 20px 0 0;
    box-sizing: border-box;
}

#sbArticle07 #registration .image {
    width: 50%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



#sbArticle07 #registration header {
    color: #292639;
}

#sbArticle07 #registration h3 {
    margin: 0;
    padding: 0;
    font-family: "Cormorant Garamond", serif;
    font-size:30px;
    font-weight: 400;
    font-style: italic;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: #a089a6;
    color: #662f76;
}

#sbArticle07 #registration h4 {
    margin: 10px 0 0 0;
    font-size:16px;
    font-weight: 300;
}

#sbArticle07 #registration .detail {
    margin: 40px 0 0 0;
}




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

    フッターリンク

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


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


#sbArticle07 .moreLink > a {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 10px 30px;
    color:#231815;
}
#sbArticle07 .moreLink > a::before,
#sbArticle07 .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;
}
#sbArticle07 .moreLink > a::before {
    left: -5px;
    top:-5px;
}
#sbArticle07 .moreLink > a::after {
    right: -5px;
    bottom: -5px;
}

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

#sbArticle07 .moreLink dl {
    display: block;
    position: relative;
    margin: 0;
    padding: 10px;
}
#sbArticle07 .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;
}
#sbArticle07 .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;
}
#sbArticle07 .moreLink a:hover dl::before,
#sbArticle07 .moreLink a:hover dl::after {
    opacity: 0;
}


#sbArticle07 .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;
}

#sbArticle07 .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;
}
#sbArticle07 .moreLink dd {
    margin: 10px 0 0 0;
    padding: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

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

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



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

    クレジット

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

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

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


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

    アニメーション

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

/* before */

#sbArticle07 .sbRing header {
    opacity: 0;
    
    transition-property: all;
    transition-duration: 3s;
    transition-timing-function: ease-in;
    transition-delay: 0s;
}

#sbArticle07 .sbRing h5 {
    opacity: 0;    
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 0s;
}


#sbArticle07 .sbRing h5::before {
    width: 1px;
    
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in;
    transition-delay: 0s;
    
}

#sbArticle07 .sbRing .detail {
    transform: translateY(50px);
    opacity: 0;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in;
    transition-delay: 0s;  
}


#sbArticle07 #registration::before {
    width: 1px;
    height: 1px;
    opacity: 0;
}
#sbArticle07 #registration::after {
    width: 1px;
    height: 1px;
    opacity: 0;
}


/* after */

#sbArticle07 .sbRing.sbFade header {
    opacity: 1;
    transition-timing-function: ease-out;
}

#sbArticle07 .sbRing.sbFade h5 {
    opacity: 1;
    transition-duration: 3s;
    transition-delay: 0s;
}

#sbArticle07 .sbRing.sbFade h5::before {
    width: 120%;
    
    transition-duration: 2s;
    transition-timing-function: ease-out;
    transition-delay: 1s;
}

#sbArticle07 .sbRing.sbFade .detail {
    transform: translateY(0px);
    opacity: 1;
    transition-duration: 2s;
    transition-timing-function: ease-out;
    transition-delay: 3s;  
}

#sbArticle07 .sbRing.sbFade .cap {
    opacity: 1;
    transition-duration: 2s;
    transition-delay: 4.5s;  
}

#sbArticle07 .sbRing.sbFade .arrowLink {
    opacity: 1;
    transition-duration: 2s;
    transition-delay: 4.5s;  
}

#sbArticle07 #registration.sbFade::before {
    width: 100%;
    height: 100%;
    opacity: 1;
    
    transition-duration: 2s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}
#sbArticle07 #registration.sbFade::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    
    transition-duration: 2s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
}



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


	Responsive for tablet


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



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




}



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


	Responsive for Smart Phone


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



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


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

    #sbArticle07 > header {
        display: block;
    }

    #sbArticle07 > header .image {
        width: auto;
    }

    #sbArticle07 > header .text {
        position: absolute;
        left: 10%;
        top:10%;
        width: 80%;
        padding: 0;
        transform: translateY(0px);
    }

    #sbArticle07 > header h1 {
        text-align: center;
        font-size:14px;
    }

    #sbArticle07 > header h2 {
        font-size:30px;
        text-align: center;
    }



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

    #sbArticle07 > .lead {
        margin: 50px 30px 0;
        text-align: left;
    }

    #sbArticle07 > .lead br {
        display: none;
    }
    
    

    /** リング共通 ---------------------------------------- **/

    #sbArticle07 .sbRing {
        margin: 100px 0 0;
    }

    #sbArticle07 .sbRing header {
        left: 5%;
        top: 2%;
        width: 90%;
    }

    #sbArticle07 .sbRing header h3 {
        display: block;
        font-size:30px;
    }

    #sbArticle07 .sbRing header h4 {
        display: block;
        margin: 5px 0 0 0;
        padding: 0;
        font-size:14px;
        font-weight: 300;
    }


    #sbArticle07 .sbRing .flx {
        display: block;
    }

    #sbArticle07 .sbRing .text {
        width: auto;
        margin: 30px 0 0 30px;
        padding: 0;
    }

    #sbArticle07 .sbRing h5 {
        margin: 0;
        padding: 0 0 10px 0;
    }
    #sbArticle07 .sbRing h5::before {
        width: 100%;
    }

    #sbArticle07 .sbRing .detail {
        margin: 30px 30px 0 0;
    }

    #sbArticle07 .sbRing .cap {
        position: relative;
        left: auto;
        bottom:auto;
        width: auto;
        margin: 30px 30px 0 0;
        padding: 0;
        color:#777777;
    }

    #sbArticle07 .sbRing .arrowLink {
        margin: 10px 30px 0 0;
    }

    #sbArticle07 .sbRing .image {
        width: auto;
    }



    /** リング個別 --------------------------------------- **/
    
    
    #sbArticle07 #sbRing01-2 {
        margin: 50px 0 0 0;
    }
    
    #sbArticle07 #sbRing01-2 h5 {
    margin: 0;
    padding: 0 0 10px 0;
    }
    #sbArticle07 #sbRing01-2 h5::before {
    left: 0;
    auto: 0;
    background:linear-gradient(to right, #6d48a0 0%, #6d48a0 75%, #d7c2dd 100%);
    }

    #sbArticle07 #sbRing01-2 .text {
        padding: 0;
    }
        
    #sbArticle07 #sbRing01-2 .cap {
        left: auto;
        width: auto;
        padding: 0;
        color:#888888;
    }

    #sbArticle07 #sbRing03 header {
        left: 5%;
    }

    #sbArticle07 #sbRing03 h5 {
        margin: 0;
        padding: 0 30px 10px 0;
    }

    #sbArticle07 #sbRing03 h5::before {
        left: 0;
        right: auto;
        background:linear-gradient(to right, #6d48a0 0%, #6d48a0 75%, #d7c2dd 100%);
    }
    
    #sbArticle07 #sbRing03 .text {
        padding: 0;
    }

    #sbArticle07 #sbRing03 .cap {
        left: auto;
    }


    
    /** 意味 ------------------------------------------------- **/

    #sbArticle07 #means {
        padding: 30px 0 0 0;
    }

    /*
    #sbArticle07 #means::before {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        width: 30px;
        height: 1px;
        margin: 0 0 0 -15px;
        padding: 0;
        background-color: #222222;
    }
    */
    
    #sbArticle07 #means header h3 {
        font-size:16px;
    }

    #sbArticle07 #means .detail {
        margin: 30px 30px 0;
        text-align: left;
    }
    
     #sbArticle07 #means .detail br {
         display: none;
    }   

    #sbArticle07 #means .arrowLink {
        font-size:14px;
    }

    #sbArticle07 #means .arrowLink a {
        margin: 0 10px;
    }


    /** Original Marriage Registration --------- **/

    #sbArticle07 #registration {
        margin: 50px 15px 0;
        padding: 30px 15px;
    }

    #sbArticle07 #registration .flx {
        display: block;
    }

    #sbArticle07 #registration .text {
        width: auto;
        padding: 0;
    }

    #sbArticle07 #registration .image {
        width: auto;
        margin: 30px 0 0 0;
    }

    #sbArticle07 #registration header {
        color: #292639;
    }

    #sbArticle07 #registration h3 {
        font-size:24px;
        white-space: normal;
        text-align: center;
    }

    #sbArticle07 #registration h4 {
        font-size:14px;
        font-weight: 300;
        text-align: center;
    }

    #sbArticle07 #registration .detail {
        margin: 20px 0 0 0;
    }


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


    #sbArticle07 .moreLink {
        margin: 100px 15px 0;
    }

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

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

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

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

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


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

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

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