﻿#listQueryBTN
{
    margin-bottom: 20px;    
    }

h3
{
    margin: 0px;
    padding-top: 0px;
    }

h4 {
    letter-spacing: 0.1em;
    width: auto;
    padding: 0em; 
    padding-left: 0px;
    font-weight: 100;
    text-align: left;
     font-family: 'Noto Sans JP', sans-serif;
}

.date {
    color: #9fa1ad;
}

.tag {
    background-color:transparent;
    margin-left: -15px;
    background-image: url('/img/frame/TAG.png');
    background-repeat: no-repeat;
    width: 80px;
    height: 40px;
    padding-top: 10px;
    padding-left: 14px;
    font-size: 11pt;
    font-weight: 600;
    color: white;
    background-position: left top;
}

.location {
    margin-top: 1em;
}    
.grid-item 
{
   
    border: 0px solid red;
    padding: 5px;
    padding-top: 0px;
    border-radius: 10px;
   
    padding: 15px; 
    }

.grid-item p
{
    margin-top: 15px; 
        display: block;
    min-height: 5em;
    }

.panel-item {
    margin-bottom: 3em;
}

.marginLeftRight {
    width: 100%;
    display:block;
    margin-left:0%;
    margin-right:auto;
}

.grid-item h4 {
    margin-bottom:0px;
}

.grid-item h4
{
    color: #000000;
    display:block;
    min-height: 3.5em;
    line-height: 1.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    }

.grayTxt {
     color: #999999;

}

a.grayTxt {
     color: #999999;

}

.grid-img {
    height: 20vh;
    background-size:cover;
    background-position:center center;
    /*margin-right: 5px;
    margin-left: 5px;*/
    border: 3px white solid;
}

    .grayTxt p {
        letter-spacing: 1px;
        line-height: 1.5em;
    }

.organgeTxt {
    color: #fdc33e;
}

.location_1 {
    color: #31beb5;
}

.location_2 {
    color: #ed3823;
}

.location_3 {
    color: #00a650;
}

.location_4 {
    color: #f171ac;
}

.location_5 {
    color: #02a554;
}
.location_6 {
    color: #f9c221;
}
.location_7 {
    color: #92278f;
}
.location_8 {
    color: #998779;
}
.location_9 {
    color: #d6df22;
}

.transparent {
    opacity: 0.25;
}

.dropdown-toggle, #_input_keyword {
    width: 100%;
    background-color: transparent;
    border: 2px solid #fdc00f;
    height: 53px;
}

#filter {
    background-color: #fdc00f;
    border: 2px solid #fdc00f;
    width: 100%;
    height: 53px;
}

.dropdown {
 width: 100%;
 height: 53px;
}

.dropdown-menu {
    width: 100%;

}

.dropdown-item {
    display: inline-block;
    text-align: center;
    padding-top: 15px; 
    width: 100%;
    height: 53px;
}

.dropdown-item:hover {
    background-color: #fdc00f;
}


.pagination .nav, .pagination .page{
    width:53px;
    height:53px;
   
    border: 2px solid #fdc00f;
    margin-right: 10px;
    text-align:center;
    padding-top: 15px;
    border-radius: 5px;
}
.pagination a.current {
    background: #fdc00f;
}


.pagination {
    width: 100%;
    text-align:right;
	 padding: 20px;
}
 .pagination, .pagination * {
	 user-select: none;
}
 .pagination a {
	 display: inline-block;
	 padding: 0 10px;
	 cursor: pointer;
}
 .pagination a.disabled {
	 opacity: 0.3;
	 pointer-events: none;
	 cursor: not-allowed;
}


.oneCard {
    width:92%;
    padding-left: 4%;
}


.btn-fuchsia {
    color: #b61b44;
    background-color: transparent;
    border-color: #b61b44;
    padding: 0.8em 1.0em;
    font-weight: 900;
    border-radius: 2em;
    padding-left:1.5em;
    padding-right:1.5em;
    margin-right: 1em;
    min-width: 6em;
}


.btn-fuchsia:hover {
    color: #fff;
    background-color: #b61b44;
    border-color: #b61b44;
}

.active, .btn-fuchsia:hover {
    color: #fff;
    background-color: #b61b44;
    border-color: #b61b44;
}

.openingTxt {
    color: #444444;
    padding-top: 200px;
}

    body {
        background-position: top center;
        background-repeat: no-repeat;
    }

    .firstContent {
        margin-bottom: 2em; min-height: 800px;
    }

@media only screen and (max-width: 500px) {
    body {
        background-position: 55% -200px;
    }

    .openingTxt {
        color:#444444; padding-top: 100px;
    }

    .firstContent {
        margin-bottom: 2em; min-height:80vh;
    }

    .grid-img {
    height: 25vh;
}

    .dateBottons .btn {
        margin-bottom: 10px;
        font-size: 8pt;
        font-weight: 100;
    }
}