@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,500,700,700i|Noto+Sans+JP:300,700&display=swap');
@import url(../common/css/common.css);
@import url(../common/css/hvSlider.css);






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

    共通部品 : loading

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



@keyframes loadinganim {
    0% {
        opacity:0;
    }
    70% {
        opacity:1;
    }
}

.loadingPage {
    display:block;
    position:fixed;
    left:0;
    top:100%;
    opacity:0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding:0;
    
    color:#666666;
    font-size:12px;
    
    background-color:#ffffff;
    z-index:2000;
    transition: all 0.5s ease-out;
}

.loadingPage svg {
    display: block;
    position: absolute;
    width:30px;
    height: 30px;
    left: 50%;
    bottom:50%;
    margin: -20px 0 0 -20px;
    padding: 0;
    vertical-align: bottom;
}

.loadingPage svg path {
    fill:#aaaaaa;
    animation-name: loadinganim;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    opacity:1;
}
.loadingPage svg path:nth-of-type(1)  { animation-delay: 0; }
.loadingPage svg path:nth-of-type(2)  { animation-delay: 100ms; }
.loadingPage svg path:nth-of-type(3)  { animation-delay: 200ms; }
.loadingPage svg path:nth-of-type(4)  { animation-delay: 300ms; }
.loadingPage svg path:nth-of-type(5)  { animation-delay: 400ms; }
.loadingPage svg path:nth-of-type(6)  { animation-delay: 500ms; }
.loadingPage svg path:nth-of-type(7)  { animation-delay: 600ms; }
.loadingPage svg path:nth-of-type(8)  { animation-delay: 700ms; }
.loadingPage svg path:nth-of-type(9)  { animation-delay: 800ms; }
.loadingPage svg path:nth-of-type(10) { animation-delay: 900ms; }
.loadingPage svg path:nth-of-type(11) { animation-delay: 1000ms; }
.loadingPage svg path:nth-of-type(12) { animation-delay: 1100ms; }


.loadingPage .message {
    display:block;
    position: absolute;
    left:10%;
    top:50%;
    width: 80%;
    margin: 5px 0 0 0;
    padding:0;
    text-align: center;
}

.sbPage.onLoad .loadingPage {
    left:0;
    top:0;
	opacity:1;
}



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

    Page Header

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

#sbIndex {
    font-weight: 300;
}


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

#sbIndex a img { transition: all 0.3s; }

#sbIndex a:hover img { 
    opacity: 0.6;
}


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

#sbIndex > header .image {
    display: block;
    position: relative;
    margin: 0 0 0 40%;
    padding: 0;
}

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

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

#sbIndex > header h1 {
    margin: 0;
    padding: 0;
    
    font-family: "Cormorant Garamond", serif;
    text-align: left;
    font-size:32px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

#sbIndex > header h1 strong {
    font-size:36px;
    font-weight: 400;
}



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


#sbIndex .lead {
    width: calc(100% - 100px);
    max-width: 800px;
    margin: 100px auto 0;
    padding: 0;
    font-size:16px;
    text-align: center;
}



/* ハッシュタグ一覧 ---------------------------------------------- */

#sbIndex #indexHashTags {
    margin: 0 auto;
}

#sbIndex .indexHashEntries {
    display: block;
    position: relative;
    margin: 0;
    padding: 150px 0 0 0;
}

/*
#sbIndex .indexHashEntries::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top:0;
    width:1px;
    height: 200px;
    margin: 0 0 0 60px;
    padding: 0;
    background:#69307c;
    background:linear-gradient(to bottom, #69307c 0%, #ffffff 100%);
    transform: rotate(45deg);
    transform-origin: center top;
}
*/

#sbIndex .indexHashEntries > header {
/*    width: 33.3%; */
    padding: 0 0 50px 0;
    box-sizing: border-box;
    text-align: center;
}


#sbIndex .indexHashEntries > header h2 {
    margin: 0;
    padding: 0;
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: #69307c;
}

#sbIndex .indexHashEntries > header h2 strong {
    font-weight: 500;
    font-size: 36px;
}

#sbIndex .indexHashEntries > header h3 {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-size: 16px;
}


/* 記事一覧 */

#sbIndex .indexHashEntries > .entries {
    box-sizing: border-box;
}

#sbIndex .indexHashEntries > .entries > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
}


#sbIndex .indexHashEntries > .entries > ul > li {
    width: 33.3%;
    margin: 0;
    padding: 0 20px;
    list-style-type: none;
    box-sizing: border-box;
}


#sbIndex .indexHashEntries .entry {
    display: block;
    position: relative;
    margin: 0 0 40px;
    padding: 0;
}

#sbIndex .indexHashEntries .entry dl {
    padding: 0 5px;
    box-sizing: border-box;
}

#sbIndex .indexHashEntries .entry dd {
    margin: 0;
    padding: 20px 20px 0;
    font-size: 16px;
}



/* アニメーション -------------------------------------- */

/*
#sbIndex .indexHashEntries::before {
    opacity: 0;
    height: 1px;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: ease-out;
}
*/

#sbIndex .indexHashEntries > header h2 {
    opacity: 0;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: linear;
}

#sbIndex .indexHashEntries > header h3 {
    opacity: 0;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: linear;
}

#sbIndex .indexHashEntries > .entries {
    opacity: 0;
    transition-duration: 1s;
    transition-delay: 0s;
    transition-timing-function: linear;
}


/*
#sbIndex .indexHashEntries.sbFade::before {
    opacity: 1;
    height: 200px;
    transition-duration: 1s;
    transition-timing-function: ease-in;
}
*/

#sbIndex .indexHashEntries.sbFade > header h2 {
    opacity: 1;
    transition-delay: 0s;
}

#sbIndex .indexHashEntries.sbFade > header h3 {
    opacity: 1;
    transition-delay: 1s;
}

#sbIndex .indexHashEntries.sbFade > .entries {
    opacity: 1;
    transition-delay: 2s;
}



/* issue一覧 ------------------------------------------------------- **/

#sbIndexIssues {
    margin: 0 auto;
    padding: 150px 0 0 0;
}


#sbIndexIssues > header {
    text-align: center;
}

#sbIndexIssues > header h2 {
    margin: 0;
    padding: 0;
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0.1em;
    line-height: 1.2;
    color: #69307c;
}

#sbIndexIssues > header h2 strong {
    font-weight: 500;
    font-size: 36px;
}

#sbIndexIssues > header h3 {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-size: 16px;
}

#sbIndexIssues .hvSlider {
    margin: 50px 0 0 0;
}


#sbIndexIssues .hvSlider .screen > ul {
    align-items: flex-start;
}

#sbIndexIssues .hvSlider .screen > ul > li {
    width:0.25%;           /* 4枚見える想定 */
    padding: 0 5px;
}


#sbIndexIssues .entry {
    border-top: 1px dotted #c0c0c0;
    margin: 0;
    padding: 5px 0;
}

#sbIndexIssues .entry img {
    vertical-align: bottom;
}

#sbIndexIssues .entry dl {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

#sbIndexIssues .entry dt {
    width: 30%;
    box-sizing: border-box;
}


#sbIndexIssues .entry dd {
    width: 70%;
    padding: 0 0 0 10px;
    box-sizing: border-box;
}



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


	Responsive for tablet


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



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



    
    
    
    

}



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


	Responsive for Smart Phone


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



@media all and (max-width: 768px) {
    
    /** Page Header ------------------------------------------ **/

    #sbIndex > header {
        margin-top: 0; /* 初期状態で余白をゼロにしておく */
        transition: margin-top 0.3s ease; /
    }

    #sbIndex > header .image {
        margin: 0;
    }

    #sbIndex > header .text {
        display: none;
    }



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

    #sbIndex .lead {
        width: auto;
        max-width: none;
        margin: 30px 30px 0;
        font-size:14px;
        text-align: left;
    }

    #sbIndex .lead br {
        display: none;
    }
    
    

    /* ハッシュタグ一覧 ---------------------------------------------- */

    #sbIndex #indexHashTags {
    }

    #sbIndex .indexHashEntries {
        padding: 100px 0 0 0;
    }

    #sbIndex .indexHashEntries > header {
        width: auto;
        margin: 0 20px;
        padding: 0;
        text-align: center;
    }

    #sbIndex .indexHashEntries > header h2 {
        font-size: 26px;
    }

    #sbIndex .indexHashEntries > header h2 strong {
        font-size: 30px;
    }

    #sbIndex .indexHashEntries > header h3 {
        font-size: 16px;
    }

    

    /* 記事一覧 */

    #sbIndex .indexHashEntries > .entries {
        width: auto;
        margin: 20px 0 0 0;
    }

    #sbIndex .indexHashEntries > .entries > ul {
        margin: 0 5px;
    }


    #sbIndex .indexHashEntries > .entries > ul > li {
        width: 50%;
        padding: 0 5px;
    }


    #sbIndex .indexHashEntries .entry {
        display: block;
        position: relative;
        margin: 0 0 40px;
        padding: 0;
    }

    #sbIndex .indexHashEntries .entry dl {
        padding: 0;
    }

    #sbIndex .indexHashEntries .entry dd {
        margin: 0;
        padding: 10px 10px 0;
        font-size: 14px;
    }


    
    /* issue一覧 ------------------------------------------------------- **/

    #sbIndexIssues {
        padding: 100px 0 0 0;
    }


    #sbIndexIssues > header {
    }

    #sbIndexIssues > header h2 {
        font-size: 26px;
    }

    #sbIndexIssues > header h2 strong {
        font-size: 30px;
    }

    #sbIndexIssues > header h3 {
        font-weight: 400;
    }

    #sbIndexIssues .hvSlider {
        margin: 20px 0 0 0;
    }

    #sbIndexIssues .hvSlider .screen > ul > li {
        width:1%;           /* 4枚見える想定 */
        padding: 0;
    }

    
    #sbIndexIssues .hvSlider .view .prev {
        top:18%;
        width: 40px;
        height: 40px;
        left: auto;
        right: 90%;
        z-index: 100;
    }    

    #sbIndexIssues .hvSlider .view .next {
        top:18%;
        width: 40px;
        height: 40px;
        left: 90%;
        right: auto;
        z-index: 100;
    }
    
    
    #sbIndexIssues .hvSlider .view .prev.disabled,
    #sbIndexIssues .hvSlider .view .next.disabled {
        opacity: 1;
        cursor: pointer;
    }
    
    #sbIndexIssues .hvSlider .view .next a::before,
    #sbIndexIssues .hvSlider .view .prev a::before {
        border-top-color: #69307c;
        border-left-color: #69307c;
        border-top-width: 2px;
        border-left-width: 2px;
    }
    
        
    #sbIndexIssues .entry {
        border-top: 1px dotted #c0c0c0;
        margin: 0 20px;
        padding: 5px 0;
    }

    #sbIndexIssues .entry img {
        vertical-align: bottom;
    }

    #sbIndexIssues .entry dl {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    #sbIndexIssues .entry dt {
        width: 30%;
        box-sizing: border-box;
    }


    #sbIndexIssues .entry dd {
        width: 70%;
        padding: 0 0 0 10px;
        box-sizing: border-box;
    }

    
    
}