@charset "utf-8";

@import "_thumbnails.css";

html,
body {
}
nav.header.navbar-light .container a {
}
.navbar-light .navbar-toggler {
}
a {
}

h1,
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

nav.header {
    position: fixed;
    z-index: 10000;
    width: 100%;
}
.header .navbar-nav .dropdown-menu {
}
footer {}
.card {}
.card input,
.card select,
.card textarea {}
.page-item.disabled,
.page-link {}
.sidebar-item {
    margin: 0 0 15px 0;
}
.ad-item {}

.breadcrumb {
    background-color: transparent;
    border-radius: 0;
}

a.site_logo {
    display: block;
    position: absolute;
    top: 6px;
    width: 118px;
    height: 42px;
    z-index:10001;

}
a.site_logo .site_logo_img {
    width: 118px;
    height: 42px;
    background: center / contain no-repeat url('../brand/ktsys-wordmark.svg');
}

.list-items-li {
    cursor: pointer;
    display:block;
    min-height: 75px;
    margin-bottom: 15px;
}

main.py-4 {
    position: relative;
    top: 34px;
}

nav .container,
footer .container {
    padding: 0;
}

.main.col-xs-12,
.main-no-sidebar.col-xs-12 {
        margin: 0 0 15px 0;
}
.sidebar.col-xs-12 {}

/*
 * ----- スマスマ ~575px -----
 */
@media screen and (max-width:575px) {
    .sidebar h2 {
        background-color: #0ff;
    }
    .header .navbar-nav .dropdown-menu {
        margin-bottom: 1rem;
    }
    .main.col-xs-12 {
        padding: 0 15px;
    }
    .main-no-sidebar.col-xs-12 {
        padding: 0 15px;
    }
    .main-no-sidebar.col-xs-12 .container {
        padding: 0;
    }
    .sidebar.col-xs-12 {
        width: 100%;
        padding: 0 15px;
    }
    .sidebar .row {
        width: 100%;
        margin: 0;
    }
    .sidebar-item {
        flex: none;
        width: 100%;
        margin: 15px auto;
        padding: 0;
    }
    .sidebar-item:last-child {
        margin-bottom: 0;
    }
    .sidebar-item-ad-banner {
        flex: none;
        max-width: 300px;
        margin: 15px auto 30px auto;
    }
    .sidebar-item-ad-banner:nth-child(odd) {
        padding: 0;
    }
    .sidebar-item-ad-banner:nth-child(even) {
        padding: 0;
    }
    .sidebar-item-ad-banner:nth-last-child(2) {
        margin-bottom: 15px;
    }
    .sidebar-item-ad-banner:last-child {
        margin-bottom: 0;
    }
    .breadcrumb {
        padding: 0 15px;
        margin: 0 0 .5rem 0;
    }
}
/*
 * ----- 小 576px ~ -----
 */
@media screen and (min-width:576px) {
    .sidebar h2 {
        background-color: #0f0;
    }
    .header .navbar-nav .dropdown-menu {
        margin-bottom: 1rem;
    }
    nav.header .container {
        max-width: 540px;
    }
    main.py-4 .container {
        max-width: 540px;
    }
    .main.col-xs-12 {
        padding: 0;
    }
    .main-no-sidebar.col-xs-12 {
        padding: 0;
    }
    .sidebar.col-xs-12 {
        max-width: 540px;
        padding: 0;
        margin: 0;
    }
    .sidebar .row {
        max-width: 540px;
        margin: 0;
    }
    .sidebar-item {
        flex: 0 0 50%;
        max-width: 262.5px;
        padding: 0 15px;
    }
    .sidebar-item:nth-child(odd) {
        padding: 0 0 0 0;
        margin: 0 7.5px 15px 0;
    }
    .sidebar-item:nth-child(even) {
        padding: 0 0 0 0;
        margin: 0 0 15px 7.5px;
    }
    .sidebar-item:nth-last-child(2) {
        margin-bottom: 0;
    }
    .sidebar-item:last-child {
        margin-bottom: 0;
    }
    .sidebar-item-ad-banner {
        flex: none;
        max-width: 300px;
        margin: 15px auto 30px auto;
    }
    .sidebar-item-ad-banner:nth-child(odd) {
        padding: 0;
    }
    .sidebar-item-ad-banner:nth-child(even) {
        padding: 0;
    }
    .sidebar-item-ad-banner:nth-last-child(2) {
        margin-bottom: 15px;
    }
    .sidebar-item-ad-banner:last-child {
        margin-bottom: 0;
    }
    .breadcrumb {
        padding: 0;
        margin: 0;
    }
}
/*
 * ----- 中 768px ~ -----
 */
/*
@media screen and (min-width:645px) {
*/
@media screen and (min-width:768px) {
    .sidebar h2 {
        background-color: #f0f;
    }
    ul.navbar-nav.member-nav {
        position: relative;
        left: 128px;
    }
    nav.header .container {
        max-width: 615px;
    }
    main.py-4 .container {
        max-width: 615px;
    }
    .main.col-xs-12 {
        max-width: 615px;
        padding: 0;
    }
    .main-no-sidebar.col-xs-12 {
    }
    footer section.navbar .container {
        max-width: 615px;
    }
    .sidebar.col-xs-12 {
        max-width: 720px;
        padding: 0;
    }
    .sidebar .row {
        max-width: 615px;
        padding: 0;
    }
    .sidebar-item {
        flex: 0 0 50%;
        max-width: 300px;
        padding: 0 15px;
    }
    .sidebar-item:nth-child(odd) {
        padding: 0 0 0 0;
        margin: 0 7.5px 15px 0px;
    }
    .sidebar-item:nth-child(even) {
        padding: 0 0 0 0;
        margin: 0 0px 15px 7.5px;
    }
    .sidebar-item:nth-last-child(2),
    .sidebar-item:last-child {
        margin-bottom: 0;
    }
    .sidebar-item-ad-banner {
        flex: 0 0 50%;
        max-width: 300px;
        margin: 0px auto 15px auto;
    }
    .sidebar-item-ad-banner:nth-child(odd) {
        padding: 0 0 0 0;
        margin: 0 7.5px 15px 0px;
    }
    .sidebar-item-ad-banner:nth-child(even) {
        padding: 0 0 0 0;
        margin: 0 0px 15px 7.5px;
    }
    .sidebar-item-ad-banner:nth-last-child(2) {
        margin-bottom: 0;
    }
    .sidebar-item-ad-banner:last-child {
        margin-bottom: 0;
    }
    .breadcrumb {}
}
/*
 * ----- 大 992px ~ -----
 */
@media screen and (min-width:975px) {
    .sidebar h2 {
        background-color: #f00;
    }
    nav.header .container {
        max-width: 930px;
    }
    main.py-4 .container {
        max-width: 930px;
    }
    .main.col-xs-12 {
        margin-bottom: 0;
        flex: 0 0 615px;
        max-width: 615px;
    }
    .main-no-sidebar.col-xs-12 {
        margin-bottom: 0;
        flex: 0 0 930px;
        max-width: 930px;
    }
    footer section.navbar .container {
        max-width: 930px;
    }
    .sidebar .row {
        margin: 0;
    }
    .sidebar.col-xs-12 {
        flex: 0 0 300px;
        max-width: 300px;
        margin: 0 0 0 15px;
        padding: 0 0 0 0;
    }   
    .sidebar-item {
        flex: none;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    .sidebar-item:nth-child(odd) {
        margin: 0 0 15px 0;
        padding: 0;
    }
    .sidebar-item:nth-child(even) {
        margin: 0 0 15px 0;
        padding: 0;
    }
    .sidebar-item:nth-last-child(2) {
        margin-bottom: 15px;
    }
    .sidebar-item:last-child {
        margin-bottom: 0;
    }
    .sidebar-item-ad-banner {
        flex: none;
        max-width: 300px;
        margin: 0px auto 15px auto;
    }
    .sidebar-item-ad-banner:nth-child(odd) {
        padding: 0;
        margin: 0 0 0 15px 0;
    }
    .sidebar-item-ad-banner:nth-child(even) {
        padding: 0;
        margin: 0 0 15px 0;
    }
    .sidebar-item-ad-banner:nth-last-child(2) {
        margin-bottom: 15px;
    }
    .sidebar-item-ad-banner:last-child {
        margin-bottom: 0;
    }
}
/*
 * ----- 特大 1200px ~ -----
 */
@media screen and (min-width:1292px) {
    .sidebar h2 {
        background-color: #00f;
    }
    nav.header .container {
        max-width: 1245px;
    }
    main.py-4 .container {
        max-width: 1245px;
    }
    .main.col-xs-12 {
        flex: 0 0 615px;
        max-width: 615px;
        margin-bottom: 0;
    }
    .main-no-sidebar.col-xs-12 {
        flex: 0 0 1245px;
        max-width: 1245px;
        margin-bottom: 0;
    }
    .sidebar .row {
        max-width: 615px;
        padding: 0;
    }
    .sidebar.col-xs-12 {
        flex: 0 0 615px;
        max-width: 615px;
        margin: 0 0 0 15px;
        padding: 0 0 0 0;
    }
    .sidebar-item {
        flex: 0 0 50%;
        max-width: 300px;
        margin: 0;
        padding: 0 15px;
    }
    .sidebar-item:nth-child(odd) {
        padding: 0;
        margin: 0 7.5px 15px 0;
    }
    .sidebar-item:nth-child(even) {
        padding: 0;
        margin: 0 0 15px 7.5px;
    }
    .sidebar-item:nth-last-child(2) {
        margin-bottom: 15px;
    }
    .sidebar-item:last-child {
        margin-bottom: 0;
    }
    .sidebar-item-ad-banner {
        flex: 0 0 50%;
        max-width: 300px;
        margin: 0;
        padding: 0 15px;
    }
    .sidebar-item-ad-banner:nth-child(odd) {
        padding: 0;
        margin: 0 7.5px 15px 0;
    }
    .sidebar-item-ad-banner:nth-child(even) {
        padding: 0;
        margin: 0 0 15px 7.5px;
    }
    .sidebar-item-ad-banner:nth-last-child(2) {
        margin-bottom: 0;
    }
    .sidebar-item-ad-banner:last-child {
        margin-bottom: 0;
    }
}

.breadcrumb li {
    font-size: .8rem;
    display: inline;
    list-style: none;
}
.breadcrumb li:after {
    content: '>';
    padding: 0 .5rem;
    color: #888;
}
.breadcrumb li:last-child:after {
    content: '';
}
.breadcrumb li a {
    text-decoration: none;
    color: #888;
}
.breadcrumb li a:hover {
    text-decoration: underline;
}

footer {
    position: relative;
    top: 34px;
    background-color: transparent;
}
footer .shadow-sm {
    box-shadow: 0!important;
}

.main h2,
.main-no-sidebar h2 {}
.main table.list,
.main-no-sidebar table.list {}
.main table.list tr,
.main-no-sidebar table.list tr {}
.main table.list tr th,
.main-no-sidebar table.list tr th {
    background-color: #333;
    color: #fff;
}

.sidebar h2,
.sidebar h3 {
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 0;
}
.sidebar ul {
    margin: 0;
    padding: 0;
}
.sidebar ul li {
    list-style: none;
}

.ad-wrapper {
    position: relative;
    width: 100%;
}

.ad-wrapper:before {
    content:"";
    display: block;
    /* 高さを幅の75%に固定 */
    /*
    padding-top: 78.585%;
    */
    padding-top: 89.78%;
    /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
    /*
    padding-top: 56.25%;
    */
}
.ad-item {
    max-width: 300px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}