body{
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

p {
    max-width: 728px;
    margin: 1rem auto;
    font-size: .9em;
}

a {
    color: inherit;
    /* text-decoration: none; */
}

a:hover {
    opacity: .6;
}

td{
    font-size: .9em;
}

i {
    margin-right: 6px;
}

.red {
    color: #BA3B31;
}

.yellow {
    color: #EFC342;
}

.strong {
    color: #283F5D;
    font-weight: bold;
}

.marker {
    font-weight: bold;
    background: linear-gradient(transparent 60%, #ff6 60%);
}

.text-muted {
    font-size: 80%;
    color: #aaa !important;
    vertical-align: text-bottom;
}

.bracket {
    font-size: 1.3em;
    margin: 0 6px;
}

.bold {
    font-weight: bold;
    margin-right: 3px;
    font-size: 1.25em;
}

.btn {
    text-align: center;
    /*width: 100%;*/
}

.btn a {
    background-color: #BA3B31;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    padding: 8px 40px;
}


/*** Header ***/

nav {
    background: #1e73be;
}

header .nav-link {
    color: #fff;
    text-align: center;
    font-size: .9em;
    font-weight: bold;
    padding-left: 0!important;
}

.header-brand img {
    display: block;
    width: auto;
    max-width: 150px;
    margin: 1rem 0;
}


/*** Main ***/

.mainvisual img {
    width: 100%;
    border-radius: 12px;
    margin: 1.5rem auto;
}

.h1-wrapper {
    border-radius: 12px;
    background: #fff;
    padding: 1.5rem 1rem;
    text-align: center;
}

.h1-sub {
    display: inline-block;
    font-size: 1.1em;
    padding: 0 2rem;
    border-right: 4px dotted #F3E383;
    border-left: 4px dotted #F3E383;
}

h1 {
    font-size: 2em;
    font-weight: bold;
    line-height: 2;
}

h2 {
    background-color: #EFC342;
    padding: .5rem 1rem;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 2;
    border-radius: 8px;
    margin-top: 3rem;
}

h3 {
    padding: 1rem 0 .2rem 0;
    font-size: 1.3em;
    font-weight: bold;
    color: #283F5D;
    border-bottom: 2px solid #fff;
}

h4 {
    background: #1e73be;
    color: #fff;
    line-height: 1.5;
    padding: .5em;
    font-size: 1.2em;
}

h5 {
    font-weight: bold;
    font-size: 1.1em;
    padding-bottom: 0;
}

.article{
    background: #EEF0F0;
    padding: 1rem; 
}

.article-box {
    background: #fff;
    border-radius: 12px;
    padding: .5rem 1rem;
    color: #283F5D;
}

.article-img img {
    display: block;
    width: 60%;
    margin: 0 auto;
}

.article-list {
    list-style: none;
    margin: 2rem auto;
}

.article-list li {
    background-image: url(img/check.svg);
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding-left: 25px;
    line-height: 2;
    color: #283F5D;
    font-weight: bold;
}

.article-box .article-list li {
    background-image: none;
    padding-left: 0px;
    color: #283F5D;
    font-weight: bold;
}

.job-cat-list-wrapper {
    background-color: #F6F6F6;
    padding: .5rem;
    margin-top: 1rem;
}

.job-cat-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    list-style: none;
    padding-left: 0;
}

.job-cat-list li {
    width: 48%;
    border-radius: 12px;
    background-color: #fff;
    border: solid 1px #ddd;
    font-size: .8em;
    padding: 12px;
    margin: 3px;
    font-weight: bold;
    box-shadow: 2px 2px 4px #ddd;
}

.job-cat-list li a {
    text-decoration: none;
}

.job-cat-img {
    display: block;
    width: 80%;
    max-width: 380px;
    margin: 0rem auto;
}

.agent-item {
    border: solid 1px #283F5D;
    margin: 1rem .2rem;
}

.agent-item i {
    margin-right: 5px;
}

.agent-item p {
    padding: .5rem;
    width: 90%;
    max-width: 680px;
}

.agent-item h3 {
    background: #283F5D;
    color: #fff;
    padding: .5rem;
}

.agent-item-img img {
    display: block;
    width: 90%;
    max-width: 680px;
    margin: 0 auto;
}

.agent-item-btn {
    text-align: center;
}

.agent-item-btn a {
    display: inline-block;
    background: #283F5D;
    color: #fff;
    border-radius: 25px;
    text-decoration: none;
    padding: .6rem 2rem;
    margin: 1rem auto;
    font-weight: bold;
    font-size: 1.1em;
    text-align: center;
    box-shadow: 3px 3px 6px #ddd;
}

.shikaku-cat-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
}

.shikaku-cat-list li {
    width: 48%;
    line-height: 2.5;
    border-radius: 12px;
    background: #1e73be;
    font-size: 1em;
    padding: 6px 12px;
    margin: 3px;
    box-shadow: 2px 2px 4px #ddd;
    background-repeat: no-repeat;
    background-position: 10px 50%;
}

.shikaku-cat-list li a {
    font-size: .85em;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    display: block;
}


/*** List Page ***/

.job-item,
.shikaku-item {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.job-item-title {
    padding-left: 60px;
    background-image: url(img/person-circle.svg);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: auto 80%;
    color: #283F5D;
}

.job-item-title-sub {
    color: #BA3B31;
    font-size: .9em;
    font-weight: bold;
}

.job-item-dsc,
.shikaku-item-dsc {
    font-size: .87em;
    color: #555;
    margin-top: 10px;
    border-top: dotted 2px #EFC342;
}

.shikaku-item-title {
    padding-left: 26px;
    background-image: url(img/bookmark-star-fill.svg);
    background-repeat: no-repeat;
    background-position: 0 50%;
    color: #283F5D;
}

.shikaku-item-title h5 {
    line-height: 2rem;
}

.pagination .page-item .page-link {
    border: none;
    border-radius: 0;
    color: #333;
    background: none;
}

.pagination .page-item.current .page-link {
    background: #333;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    opacity: .6;
}


/*** Side ***/

#side ul {
    list-style: none;
    padding-left: 0;
}

#side .nav-item {
    padding: .5rem;
    margin: 5px;
    background-image: url(img/caret-right-fill.svg);
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding-left: 24px;
    font-weight: bold;
}


/*** Footer ***/

footer div {
    margin-top: 2rem;
    background: #333;
    color: #fff;
    text-align: center;
    line-height: 4;
    font-size: .75em;
}


/*** Banner ***/

.banners {
    width: 100%;
    text-align: center;
    margin: 20px 0 20px 0;
}

.banners img {
    width: auto;
}

.banner-long {
    display: block;
    margin: 10px auto;
}

.banner-640 {
    display: block;
    margin: 40px auto;
}

.banner-468 {
    display: block;
    margin: 40px auto;
}

.banner-300 {
    display: none;
}

.banner-180 {
    display: block;
    margin: 10px auto;
}


.textbook-list {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
}

.textbook-list-item {
    width: 33%;
    text-align: center;
    padding: 1rem;
}

.textbook-list-img {
    width: 100%;
}

.textbook-list-img img {
    width: 55%;
}

.textbook-list-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #594A45;
    /*text-align: start;*/
    margin-top: 8px;
    font-weight: bold;
    font-size: .9em;

}

.textbook-list-price {
    font-size: .8em;
    color: #594A45;
    /*text-align: end;*/
}


@media (max-width: 992px) {
    .banner-180 {
        display: inline;
    }
    .banner-long {
        display: none;
    }
}

@media (max-width: 768px) {
    .banner-468 {
        display: block;
        margin: 10px auto;
    }
    .banner-300 {
        display: none;
    }
}

@media (max-width: 576px) {
    .banner-468 {
        display: none;
    }
    .banner-300 {
        display: block;
        margin: 10px auto;
    }
}

@media (max-width: 360px) {
    .banner-180 {
        display: block;
    }
}


/*** Responsive ***/

.sp {
    display: none;
}

.pc {
    display: block;
}

@media (max-width: 992px) {
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
    /*
    nav .nav-link {
        color: #283F5D!important;
        background: #eeee;
    }
    */
}

@media (max-width: 576px) {
    p {
        /*        font-size: .85em;*/
    }
    h1 {
        line-height: 1;
    }
    h2 {
        font-size: 1.3em;
    }
    .shikaku-cat-list li,
    .h1-sub,
    h4 {
        font-size: 80%;
    }
    .article-list {
        padding-left: 0;
    }
    .shikaku-cat-list li {
        background-image: none;
    }
    .job-item-title {
        background-size: auto 36px;
        background-position: 0 0;
        padding-left: 50px;
        font-size: 1em;
    }
    .agent-item-btn a {
        padding: 15px 30px;
        font-size: 90%;
    }

    .textbook-list-item {
        text-align: center;
        padding: 1rem;
        width: unset;
    }
    .shikaku-cat-list li a {
        font-size: unset;
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        display: block;
    }

    .article-img img {
    display: block;
    width: unset;
    margin: 0 auto;
}
}

.text-bg-primary {
  color: #fff !important;
  background-color: #1e73be !important;
}


.caption p {
  margin:unset;
  font-size: .9em;
  max-width:unset;
}

.caption h5 {
  margin-top:1rem;
}

.caption h3 {
  background: #283F5D;
  color: #fff;
  padding:.5rem;
}

.btn404 {
    text-align: center;
    /*width: 100%;*/
}

.btn404 a {
    background-color: #283F5D;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    padding: 8px 40px;
}

.navbar-toggler{
    background-color:#fff;
}