@charset "UTF-8";

pre {
    font-family: "Noto Sans JP", sans-serif;
    white-space: initial;
    font-weight: 500;
    line-height: 2;
}

.page_key {
    margin-bottom: 12rem;
}

.works_cat_col {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 8rem;
}

.works_cat_wrap .search_hl {
    width: 100%;
    line-height: 1.3;
    font-size: 2.4rem;
    font-weight: 900;
    padding-left: 2.6rem;
    border-left: 2px solid #1f2774;
    margin-bottom: 3rem;
}

.works_cat_col>span {
    width: calc((100% - 6rem) / 5);
    position: relative;
}

.works_cat_col>span:after {
    content: "";
    border-top: 10px solid #d1d1d1;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    position: absolute;
    top: calc(50% - 5px);
    right: 12px;
}

.works_cat_col select {
    width: 100%;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 1.6rem 2.5rem;
    appearance: none;
    border: 1px solid #9f9f9f;
    cursor: pointer;
}

.searchform {
    width: 71rem;
    max-width: 100%;
    position: relative;
    height: 6rem;
    margin-bottom: 2rem;
    padding-right: 4rem;
    border: 1px solid #9f9f9f;
}

.searchform .search-field {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 4rem);
    height: 100%;
    display: block;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 0 2.7rem;
    border: none;
}

.searchform .search-field:focus {
    outline: none;
}

.searchform .search-field::placeholder {
    color: #000;
}

.searchform .search-submit {
    position: absolute;
    border: none;
    font-size: 0;
    width: 6rem;
    height: 100%;
    top: 0;
    right: 0;
    background-color: initial;
    background-image: url(../img/common/search_3.svg);
    background-repeat: no-repeat;
    background-size: 2rem;
    background-position: center;
}



@media (max-width:767px) {
    .page_key {
        margin-bottom: 8rem;
    }

    .works_cat_col .search_hl {
        font-size: 2rem;
    }

    .works_cat_col>span {
        width: 100%;
    }

    .works_cat_col select {
        font-size: 1.6rem;
    }
}


.single-works .breadcrumb {
    margin-bottom: 8rem
}

.works_single {
    display: flex;
    flex-wrap: wrap;
    column-gap: 9rem;
}

.works_single .post_title {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 2rem;
    margin-bottom: 6rem;
    width: calc(100% - 40rem);
}

.works_single .post_title .cat {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    padding: .4rem 2rem;
    border-radius: 100px;
    background-color: #1f2774;
}

.works_single .post_title .date {
    font-size: 1.4rem;
    font-weight: 500;
    color: #8e8e8e;
}

.works_single .post_title .ttl {
    width: 100%;
    font-size: 3.5rem;
}

.works_single .post_title .workscat-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2em;
    row-gap: .5rem;
}

.works_single .post_title .workscat-meta .workscat-meta__row {
    display: flex;
}

.works_single .post_title .workscat-meta .workscat-meta__parent {
    margin-right: 1em;
    font-weight: 700;
    white-space: nowrap;
}

.works_single .post_title .workscat-meta .workscat-meta__children {
    display: flex;
    column-gap: .2em;
    flex-wrap: wrap;
}

.works_single .post_title .workscat-meta a {
    transition: .2s;
}

.works_single .post_title .workscat-meta a:hover {
    color: #ac1d28;
}

.works_single .works_main {
    width: calc(100% - 40rem);
}

.works_single .works_main>*:not(:last-child) {
    margin-bottom: 3.4rem;
}

.works_single .works_main p {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2;
}

.works_single .works_main p:not(:first-child) {
    margin-top: 2rem;
}

.works_single .works_main p strong {
    color: #326fcb;
    font-weight: 700;
}

.works_single .works_main p a {
    font-weight: 700;
    color: #326fcb;
    text-decoration: underline;
    display: inline;
}

.works_single .works_main .thumb {
    margin-bottom: 4rem;
}

.works_single .works_main>h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    padding: 1.8rem 2rem;
    border-radius: 5px;
    background-color: #1f2774;
}

.works_single .works_main>h2:not(:first-child) {
    margin-top: 6rem;
}

.works_single .works_main h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2774;
    padding: 1.6rem 2rem 1.8rem;
    background-color: #f3f4ff;
    border-bottom: 3px solid #1f2774;
}

.works_single .works_main>h3:not(:first-child) {
    margin-top: 6rem;
}

.works_single .works_main h4 {
    font-size: 2rem;
    font-weight: 600;
    color: #1f2774;
    padding-left: 1em;
    line-height: 1.4;
    border-left: 3px solid #1f2774;
}

.works_single .works_main h5 {
    font-size: 1.8rem;
    font-weight: 600;
}

.works_single .works_main img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.works_single .works_main img:not(:last-child) {
    margin-bottom: 3rem;
}

.works_single .works_main .thumb img {
    width: 100%;
}

.works_single .works_main .works_imgcol {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.5rem;
    row-gap: 3rem;
}

.works_single .works_main .works_imgcol .item {
    width: calc((100% - 5rem) / 3);
}

.works_single .works_achieve {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 3rem;
    padding: 3rem;
    border: 1px solid #8e8e8e;
    margin-top: 7rem;
}

.works_single .works_achieve img {
    width: 24rem;
    margin: 0 !important;
}

.works_single .works_achieve .works_achieve_right {
    width: calc(100% - 27rem);
}

.works_single .works_achieve .front {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.5;
}

.works_single .works_achieve .lead {
    font-size: 2.4rem;
    font-weight: 600;
    margin-top: .6rem !important;
    line-height: 1.5;
}

.works_single .works_achieve .middle {
    line-height: 1.5;
}

.works_single .works_achieve .more {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2774;
    padding: .3rem;
    width: 16rem;
    border-bottom: 1px solid #1f2774;
    position: relative;
    margin: 1rem 0 0 auto;
}

.works_single .works_achieve .more:after {
    content: "";
    width: 4px;
    height: 4px;
    border-top: 2px solid #1f2774;
    border-right: 2px solid #1f2774;
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    margin: auto 0;
    transform: rotate(45deg);
    transition: .2s;
}

.works_single .works_achieve .more:hover {
    color: #ac1d28;
    border-bottom: 1px solid #ac1d28;
}

.works_single .works_achieve .more:hover:after {
    border-top: 2px solid #ac1d28;
    border-right: 2px solid #ac1d28;
}



.works_single .sidebar {
    width: 31rem;
}

.works_single .sidebar h2 {
    font-size: 2rem;
    line-height: 1.25;
    padding: 0 0 .9em 1em;
    position: relative;
}

.works_single .sidebar h2:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 1.25em;
    width: 5px;
    background-color: #1f2774;
}

.works_single .sidebar h2:nth-of-type(even):before {
    background-color: #ac1d28;
}

.works_single .sidebar .side_category {
    margin-bottom: 5rem;
    border-top: 1px solid #d2d2d2;
}

.works_single .sidebar .side_category a {
    padding: 1.5rem 0;
    font-size: 1.8rem;
    font-weight: 500;
    border-bottom: 1px solid #d2d2d2;
}

.works_single .sidebar .side_category a:hover {
    color: #ac1d28;
}

.works_single .sidebar .side_pickup {
    margin-bottom: 24px;
    border-top: 1px solid #d2d2d2;
}

.works_single .sidebar .side_pickup .item {
    padding: 1rem 0;
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    align-items: center;
    column-gap: 1.5rem;
}

.works_single .sidebar .side_pickup .thumb {
    width: 11rem;
    min-width: 11rem;
}

.works_single .sidebar .side_pickup .info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .8rem;
    row-gap: .4rem;
}

.works_single .sidebar .side_pickup .cat {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    padding: 0 1.6rem;
    border-radius: 100px;
    background-color: #1f2774;
}

.works_single .sidebar .side_pickup .date {
    font-size: 1.2rem;
    font-weight: 500;
    color: #a5a5a5;
}

.works_single .sidebar .side_pickup .ttl {
    font-size: 1.4rem;
    font-weight: 500;
}

.works_single .sidebar .side_pickup .item:hover .ttl {
    color: #ac1d28;
}

.works_single .sidebar .side_taglist {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.8rem;
    row-gap: .3rem;
    padding-left: 2rem;
    margin: 0 0 4.2rem;
}

.works_single .sidebar .side_taglist a {
    font-size: 1.6rem;
    font-weight: 500;
    padding-left: 1em;
    background-image: url(../img/common/tag.svg);
    background-repeat: no-repeat;
    background-size: .8em auto;
    background-position: left center;
}

.works_single .sidebar .side_taglist a:hover {
    color: #ac1d28;
}

.works_single .sidebar .searchform .search-submit {
    display: none;
}

.works_single .sidebar .searchform label,
.works_single .sidebar .searchform .search-field {
    display: block;
    width: 100%;
    position: relative;
}

.works_single .sidebar .searchform .search-field {
    padding: 1.2rem 2rem 1.2rem 4rem;
    border: 1px solid #b2b2b2;
    border-radius: 5px;
}

.works_single .sidebar .searchform label:before {
    content: "";
    position: absolute;
    z-index: +1;
    width: 1em;
    height: 1em;
    top: calc(50% - .5em);
    left: 1.3rem;
    background-image: url(../img/common/search_1.svg);
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: center;
}

.works_single .sidebar .searchform {
    margin: 0 0 5rem;
}

.works_single .sidebar .wca {
    border-bottom: 1px solid #d2d2d2;
    margin-bottom: 5rem;
}

.works_single .sidebar .wca-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 1.5rem 0;
    line-height: 1.5;
    border-top: 1px solid #d2d2d2;
    outline: none;
    position: relative;
}

.works_single .sidebar .wca-toggle:after {
    content: "";
    position: absolute;
    top: 0;
    right: 2.5rem;
    bottom: 0;
    margin: auto 0;
    width: 5px;
    height: 5px;
    border-right: 2px solid #8e8e8e;
    border-bottom: 2px solid #8e8e8e;
    transform: rotate(45deg);
}

.works_single .sidebar .wca-children {
    padding-bottom: 2.4rem;
}

.works_single .sidebar .wca-children a {
    line-height: 1.8;
    font-size: 1.5rem;
    padding-left: 2em;
}











@media (max-width:767px) {
    .works_single .post_title,
    .works_single .works_main,
    .works_single .sidebar {
        width: 100%;
    }

    .single-works .breadcrumb {
        margin-bottom: 4rem;
    }

    .works_single .post_title .ttl {
        font-size: 2.4rem;
    }

    .works_single .guide_main > h2 {
        font-size: 2rem;
    }

    .works_single .guide_main h3 {
        font-size: 1.8rem;
    }

    .works_single .sidebar {
        margin-top: 6rem;
    }

    .works_single .sidebar .side_category a {
        font-size: 1.6rem;
    }

    .single-guide .breadcrumb {
        margin-bottom: 2rem;
    }

    .works_single .works_main .works_imgcol {
        gap: 2rem;
    }

    .works_single .works_main .works_imgcol .item {
        width: calc(50% - 1rem);
    }

    .works_single .works_main>h2 {
        font-size: 1.8rem;
    }

    .works_single .works_achieve img {
        width: 100%;
    }

    .works_single .works_achieve {
        padding: 3rem 2rem;
        row-gap: 3rem;
    }

    .works_single .works_achieve .works_achieve_right {
        width: 100%;
    }

    .works_single .works_achieve .front {
        font-size: 1.6rem;
    }

    .works_single .works_achieve .lead {
        font-size: 2rem;
    }

    .works_single .sidebar .wca-toggle {
        font-size: 1.6rem;
    }

    .works_single .post_title .workscat-meta .workscat-meta__row {
        width: 100%;
    }
}