@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Source+Sans+Pro:200,300,400,600|Homenaje|Geo");
@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.7.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }

#landingpage{
    height: 100vh;
    overflow-y: auto;
}
#landingpage *:before{
    position: relative;
}

.search-bar{
    margin-left: 60px;
    padding: 20px;
    background-color: #FFF;
    display: flex;
}

.search-logo{
    width: auto;
    height: 64px;
    background-image: url('/images/shingaku.svg');
    background-size: 160px;
    background-position-x: left;
    background-position-y: bottom;
    font-size: 14px;
}

.search{
    margin-left: 40px;
    height: 64px;
    border: 2px solid #DDE2E8;
    border-radius: 6px;
    
    width: 640px;
    
}

.search input{
    height: 60px;
    font-size: 1.4rem;
    outline: none;
    border: none;
    padding: 0px 20px;
    width: 100%;
}

.search input::-webkit-input-placeholder{
    color: #DDE2E8;
}

.search::after{
    content: "\f002";
    font-family: FontAwesome;
    color: #DDE2E8;
    position: absolute;
    font-size: 1.4rem;
    line-height: 64px;
    right: 20px;
}

.result-bar{
    padding: 20px 80px;
    background-color: #FFF;
    display: flex;
    align-items: flex-end;
}

.result-bar p{
    margin: 0px 20px 0px 0px;
    line-height: 32px;
    padding: 0;
    font-size: 1rem;
}

.result-bar button{
    height: 32px;
    background-color: #88BEC4;
    border: 0;
    border-radius: 4px;
}

.contents{
    margin-left: 60px;
}
.center-pane{
    /* background-color: azure; */
    width: calc(100vw - 320px);
}
.right-pane{
    position: fixed;
    top: 0px;
    right: 0px;
    width: 320px;
    border: none;
}

.right-pane .cart{
    margin: 20px;
    background-color: #DC742A;
    padding: 20px;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
}

.right-pane .cart .num{
    font-size: 30px;
}

.right-pane .cart .num::before{
    content: "\f07a";
    font-family: FontAwesome;
    letter-spacing: 4px;
}

.right-pane .cart *{
    color: #FFF;
}

.right-pane .tags{
    text-align: left;
    padding: 0 20px;
}
.right-pane .tags p{
    font-size: 1.5rem;
    color: #000;
    margin: 0;
    padding: 0;
}
.right-pane .tags span{
    cursor: pointer;
    color: #000;
}
.right-pane .tags span:nth-child(n+2):before{
    content: ',';
}

ul.schools{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
}

ul.schools li{
    position: relative;
    margin: 20px;
    width: 430px;
    display: block;
    height: 360px;
    text-align: left;
    background-color: #FFF;
    box-shadow: 0px 2px 10px #888888
}

ul.schools li.on{
    background-color: #D9D9D9;
}

ul.schools li .photo{
    height: 240px;
    background-position: center;
    background-size: cover;
}

ul.schools li .detail{
    height: 40px;
    padding-top: 20px;
    padding-left: 20px; 
    padding-right: 20px;
}

ul.schools li .name{
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
}

ul.schools li .pref{
    padding-left: 10px;
}

ul.schools li .pref:before { content: "\f041"; font-family: FontAwesome; color: #5B687C; position: relative; }

ul.schools li .tags{
    font-size: 0.9rem;
}

ul.schools li .cart{
    position: absolute;
    top: 240px;
    right: 40px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    transform: translateY(-30px);
    background-color: #FFF;
    box-shadow: 0px 1px 5px #888888;
    cursor: pointer;
}

ul.schools li .cart:before { 
    content: "\f07a";
    font-family: FontAwesome;
    color: #212D3B;
    /* position: relative; */
    font-size: 30px;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    line-height: 60px;
    text-align: center;
}

ul.schools li.on .cart:before {
    color: #FFF;
    background-color: #212D3B;
}


.qr-code{
    margin: 20px;
}

article#mask{
    background-color: rgba(0, 0, 0, 0.7);

    
}

.popup.detail-pop{
    background-color: #FFF;
    border-radius: 0;
    margin-top: 40vh;
    padding-bottom: 20px;
}

.detail-pop .sc-info{
    display: flex;
}
.detail-pop .sc-info-txt{
    flex: 1;

    display: flex;
    flex-direction: column;
}
.detail-pop .sc-info-txt .name{
    font-size: 1.8rem;
    font-weight: bold;
    text-align: left;
    padding: 0px 20px;
}
.detail-pop .sc-info-txt .address{
    text-align: left;
    padding: 0px 20px;

    flex: 1;
}
.detail-pop .sc-info-txt .tags{
    padding: 0px 20px;
    text-align: left;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.detail-pop .sc-info-txt .tags span{
    color: #7F7F7F;
    border: 1px solid #F1F1F1;
    border-radius: 10px;
    display: block;
    margin: 2px 2px;
    padding: 0px 4px;
}
.detail-pop .sc-info .qr-code {
    margin: 0px 20px;
}

.detail-pop .detail-add-cart{
    background-color: #DC742A;
    height: 40px;
    line-height: 40px;
    margin: 20px 20px 0px 20px;
    color: #FFF;
    border-radius: 4px;
    font-size: 1.05rem;
}
.detail-pop .detail-add-cart:before { 
    content: "\f07a";
    font-family: FontAwesome;
    position: relative;
    padding: 0px 4px;
}

.detail-pop .media div { width: calc(100% - 40px); height: 20vw; margin: 20px; background-size: cover; background-position: center;}
.detail-pop .media video { width: calc(100% - 40px); height: 20vw; margin: 20px;}
.detail-pop .media .video-player{ position: relative; width: calc(100% - 40px); height: 20vw; margin: 20px;}

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 816px) 
/* and (-webkit-min-device-pixel-ratio: 2)  */
{ 
    #landingpage{
        -webkit-overflow-scrolling: touch;
    }
    .search-bar{
        margin-left: 0;
        flex-direction: column;
    }

    .search-bar .search-logo{
        padding-left: 164px;
        display: flex;
        flex-direction: column-reverse;
    }
    .search-bar .search{
        margin-top: 10px;
        margin-left: 0;
        width: auto;
    }
    .result-bar{
        padding: 20px 20px;
        flex-direction: column;
        align-items: baseline;
    }

    .contents{
        margin-left: 0;
        padding: 0px 0px;
    }

    .right-pane{
        bottom: 40px;
        top: auto;
        width: 200px;
        background-color: transparent;
    }
    .right-pane .cart{
        margin: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .right-pane .tags{
        display: none;
        
    }

    .center-pane{
        width: auto;
    }

    ul.schools{
        flex-direction: column;
    }
    ul.schools li{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        margin: 4px 20px;
    }

    ul.schools li .photo{
        margin: 8px;
        width: 80px;
        height: 80px;
    }

    ul.schools li .detail{
        flex: 1;
        padding-top: 8px;
        padding-left: 0;
        padding-right: 0;
    }
    ul.schools li .name{
        font-size: 1.1rem;
    }

    ul.schools li .tags{
        font-size: 0.8rem;
    }

    ul.schools li .cart{
        position: relative;
        top: 0px;
        right: 0px;
        bottom: 0px;
        transform: none;
        border: none;
        box-shadow: none;
        border-radius: unset;
        width: 60px;
        height: 96px;
    }

    ul.schools li .cart:before{
        border-radius: unset;
        width: 60px;
        height: 96px;
        line-height: 96px;
    }

    section.popup{
        width: 70vw !important;
    }

    .detail-pop .sc-info{
        flex-direction: column;
    }

    .detail-pop .sc-info-txt .name{
        text-align: center;
    }

    .detail-pop .sc-info-txt .address{
        text-align: center;
    }

    .detail-pop .sc-info-txt .tags{
        max-height: 20vh;
        overflow-y: auto;
        font-size: 1.2rem;
    }
    .detail-pop .sc-info .qr-code {
        margin-left: auto;
        margin-right: auto;
    }
}