@charset "utf-8";

.l-whiteBox>section {
    position: relative;
    padding: 50px;
}

.l-whiteBox>section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 1px;
    background: #C1C1C1;
}

.l-whiteBox>section h2 {
    margin-bottom: 1em;
}

.catch_image {
    width: 100%;
    padding: 30px;
    margin: auto;
}

@media screen and (max-width: 767px) {
    .l-whiteBox>section {
        padding: 30px;
    }
}

/* 横並びリスト */
ul.card-list {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    gap: 1em;
}

ul.card-list.card-list--4col.icon {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

ul.card-list li.card-list__item {
    flex: 1;
}

ul.card-list li.card-list__item div.card__image {
    overflow: hidden;
    background-size: cover;
}

ul.card-list--3col li.card-list__item div.card__image {
    width: 100%;
    height: 200px;
}

ul.card-list--4col li.card-list__item div.card__image {
    width: 100%;
    height: 150px;
}

ul.card-list li.card-list__item div.card__content {
    margin-top: 20px;
}

/* 導入効果の背景・文字色を業務可視化ページでは青系に変更
 ul.card-list li.card-list__item div.card__content h3.blue {
    background: #efefef;
    color: #0077b6;
}
*/

/* 導入効果をビフォーアフター形式で表示 */
ul.card-list.beforeafter {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
ul.card-list.beforeafter li.card-list__item {
    position: relative;
    height: 100%;
    margin-bottom: 3em;
    display: flex;
    justify-content: center;
}
ul.card-list.beforeafter li.card-list__item div.card__content {
    margin-bottom: 1em;
    width: 80%;
}
ul.card-list.beforeafter li.card-list__item div.card__content h3 {
    margin-bottom: 30px;
}
ul.card-list.beforeafter li.card-list__item::after {
    content: "";
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    background: #000099;
    width: 20%;
    height: 1em;
    position: absolute;
    top: calc(100% - 2em);
    right: 40%;
}
ul.card-list.beforeafter li.card-list__item:nth-child(n+4)::after {
    display: none;
}

@media screen and (max-width: 767px) {
    ul.card-list.card-list--4col.icon {
        grid-template-columns: repeat(2, 1fr);
    }

    ul.card-list {
        display: block;
    }

    ul.card-list li.card-list__item {
        margin-bottom: 1em;
    }

    ul.card-list li.card-list__item div.card__image {
        width: 100%;
        height: unset;
        aspect-ratio: 16 / 9;
    }
}

/* 画像とテキストの2カラム */
div.media {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

div.media div.media__image {
    flex: 0 0 40%;
    padding-right: 1em;
}

div.media div.media__content {
    flex: 0 0 60%;
    padding-left: 1em;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    justify-content: center;
}

@media screen and (max-width: 767px) {
    div.media {
        display: block;
    }

    div.media>div {
        padding-right: 0;
        padding-right: 0;
    }

    div.media div.media__image {
        margin-bottom: 1em;
    }
}

/* 縦並びの場合 */
div.media.vertical {
    flex-wrap: wrap;
    flex-direction: column-reverse;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
}

div.media.vertical div.media__image,
div.media.vertical div.media__content {
    flex: 1;
}

div.media.vertical div.media__image {
    width: 100%;
    max-width: fit-content;
    padding: 0;
    margin: auto;
}

div.media.vertical div.media__content {
    width: 70%;
}

@media screen and (max-width: 767px) {
    div.media.vertical {
        width: 100%;
        margin-bottom: 1em;
    }

    div.media.vertical div.media__content {
        width: 100%;
    }
}

/* 導入企業アイコン */
ul.icon-list {
    display: table;
    margin: auto;
}

ul.icon-list li.icon-list__item {
    padding: 0 20px;
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}

ul.icon-list li.icon-list__item img {
    max-height: 100px;
    width: auto;
    max-width: 300px;
}

@media screen and (max-width: 767px) {
    ul.icon-list {
        display: block
    }

    ul.icon-list li.icon-list__item {
        display: block;
        width: 100%;
        height: unset;
        text-align: center;
        margin-bottom: 1em;
    }

    ul.icon-list li.icon-list__item:last-child {
        margin-bottom: 0;
    }

    ul.icon-list li.icon-list__item img {
        max-width: 100%;
    }
}

/* 料金体系 */
/* AI */
table.pricing {
    margin: auto;
    margin-bottom: 1em;
    border-collapse: separate;
    border-spacing: 1em 0;
    width: 100%;
    max-width: 1200px;
    font-size: 1em;
    font-weight: bold;
    background: #ffffff;
    padding: 50px;
    border-radius: 50px;
    text-align: center;
}

table.pricing tr th,
table.pricing tr td,
table.pricing tr th p,
table.pricing tr td p {
    padding: 1em 0.5em;
    border: 3px solid #fff;
    text-align: center;
}

table.pricing tr th:nth-child(2) p,
table.pricing tr th:nth-child(3) {
    border: none;
    color: #fff;
    font-weight: bold;
}

colgroup col:first-child {
    width: 20em;
}

colgroup col {
    width: calc(calc(100% - 20em) / 3);
}

table.pricing tr:nth-child(11) td:nth-child(4) p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

table.pricing tr:nth-child(11) td:nth-child(3) small {
    font-size: x-small;
    font-weight: normal;
    display: block;
    width: 100%;
    margin: auto;
    text-align: center !important;
    white-space: nowrap;
}

table.pricing tr th:first-child {
    text-align: left;
}

table.pricing tr th:nth-child(2),
table.pricing tr th:nth-child(3) {
    border: solid #01878a;
    border-width: 3px 3px 0 3px;
    background-color: #01878a !important;
}

table.pricing tr:last-child td:nth-child(2),
table.pricing tr:last-child td:nth-child(3) {
    border: solid #01878a;
    border-width: 0 3px 3px 3px;
}

table.pricing tr td {
    border: solid #01878a;
    border-width: 0 3px;
}

table.pricing tr:first-child th:first-child {
    background-color: unset;
}

table.pricing tr th span {
    display: block;
    font-size: small;
}

section#pricing small {
    text-align: right;
    display: block;
}

table.pricing br.tab {

    display: none;
}

@media (max-width: 959px) {
    section#pricing {
        width: 100%;
        overflow-x: scroll;
    }

    table.pricing {
        width: 960px;
    }
}

@media (min-width: 960px) and (max-width: 1299px) {
    table.pricing {
        padding: 2em;
    }
}

/* 業務可視化 */
div.simplePrice {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 70%;
    margin: auto;
    gap: 1em;
}

div.simplePrice>div {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    flex: 1;
    height: 880px;
    margin: 0 0.5em;
    padding: 4em 0;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    text-align: center;
}

div.simplePrice>div:first-child {
    margin-left: 0;
}

div.simplePrice>div:last-child {
    margin-right: 0;
}

div.simplePrice>div>* {
    display: block;
    width: 100%;
}

div.simplePrice>div p.price {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    font-weight: bold;
}

div.simplePrice>div p.price span {
    font-size: 14px;
    margin-left: 0.2em;
    font-weight: normal;
}

div.simplePrice>div h3 {
    font-size: 36px;
}

div.simplePrice>div h4 {
    position: relative;
    line-height: 3em;
    margin-bottom: 0.5em;
}

div.simplePrice>div h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6em;
    height: 2px;
    margin-bottom: 0.5em;
    background: #efefef;
}

div.simplePrice div ul:nth-of-type(1) {
    height: 16em;
}

div.simplePrice div ul:nth-of-type(2) {
    height: 8em;
}

div.simplePrice>div ul {
    margin-bottom: 2em;
}

div.simplePrice>div ul li {
    line-height: 2em;
    text-align: center;
}

.themecolor-green ul.card-list {
    gap: 4em
}

@media(max-width: 599px) {
    div.simplePrice {
        display: block;
        width: 100%;
    }

    div.simplePrice>div {
        width: 100%;
        max-width: unset;
        height: auto;
        margin-bottom: 1em;
    }

    div.simplePrice>div:first-child,
    div.simplePrice>div:last-child {
        margin-left: 0;
        margin-right: 0;
    }

    div.simplePrice div ul:nth-of-type(1) {
        height: auto;
    }

    div.simplePrice div ul:nth-of-type(2) {
        height: auto;
    }

}

/* レポートサンプル */
#reports p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.75;
    padding: 0 22px;
    letter-spacing: 0.5px;
    margin-bottom: 29px;
}

#reports ul.zoom {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: auto;
    margin-bottom: 40px;
    gap: 1em;
}

#reports ul.zoom li {
    margin: 0;
    flex: 1;
    overflow: hidden;
}

#reports ul.zoom li img {
    height: 100%;
    width: auto;
    object-fit: cover;
    border: 2px solid #eee;
}

#reports ul.zoom li img:hover {
    border: 2px solid #000;
}

#reports ul.zoom li:first-child {
    margin-left: 0;
}

#reports ul.zoom li:last-child {
    margin-right: 0;
}

@media only screen and (max-width: 959px) {
    #reports p {
        font-size: 14px;
        line-height: 1.3;
        padding: 0 16px;
        letter-spacing: 0.2px;
        margin-bottom: 11px;
    }

    #reports ul.zoom {
        display: block;
        width: 100%;
    }

    #reports ul.zoom li {
        margin: 1em 0 !important;
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
    }
}

/* クリックで画像拡大 */
.modal {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row-reverse;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 70px;
    width: 100%;
    height: calc(100% - 70px);
    padding: 30px;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

.modal-content {
    display: block;
    height: 100%;
    max-height: fit-content;
    width: auto;
}

#close {
    display: inline-block;
    line-height: 40px;
    vertical-align: top;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.modalImage {
    .modalImage {
        font-size: 40px;
        margin: 1em 0 0 1em;
    }
}

@media screen and (max-width: 767px) {
    .modal {
        height: 100%;
        top: 0;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .modal-content {
        width: 100%;
        height: auto;
        max-height: fit-content;
    }
}

/* 導入までの流れ */
ul.flow-list {
    display: block;
}

ul.flow-list li.flow-list__item {
    display: flex;
    width: 100%;
    background: #fff;
    margin-bottom: 1em;
}

ul.flow-list li.flow-list__item div.flow__image {
    flex: 1;
    height: 150px;
    margin-right: 0.5em;
}

ul.flow-list li.flow-list__item div.flow__content {
    flex: 3;

    margin-left: 0.5em;
}

@media screen and (max-width: 767px) {
    ul.flow-list li.flow-list__item {
        display: block;
    }

    ul.flow-list li.flow-list__item div.flow__content {
        margin-top: 20px;
    }

    ul.flow-list li.flow-list__item div.flow__content h3 {
        text-align: center
    }

    ul.flow-list li.flow-list__item div.flow__image {
        width: 100%;
        height: unset;
        aspect-ratio: 16 / 9;
    }
}

/* CTA */
.l-contents__contact {
    padding: 80px 0;
    background: #CB0013;
}

.l-contents__contact__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.l-contents__contact__telBox__title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 6rem;
}

.l-contents__contact__button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 46px;
    -moz-column-gap: 46px;
    column-gap: 46px;
}

.c-buttonType1--baseColor .c-buttonType1__link {
    color: #CB0013;
    background: #FFFFFF;
    border-color: #CB0013;
}

.c-buttonType1--baseColor .c-buttonType1__link::before {
    background-image: url(/assets/img/common/icon_arw01_red.svg);
}

.c-buttonType1__inner {
    position: relative;
    z-index: 1;
}

.c-buttonType1__link::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: 0;
    width: 0;
    height: calc(100% + 4px);
    margin: 0 auto;
    background: #F84949;
    border-radius: 100px;
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
}

@media screen and (max-width: 767px) {
    .l-contents__contact__telBox__title {
        font-size: 1.7rem;
        text-align: center;
        line-height: 1.7;
    }

    .l-contents__contact__button {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        row-gap: 50px;
        width: 100%;
        margin-top: 15px;
    }

    .c-buttonType1--baseColor .c-buttonType1__link {
        padding: 0 40px !important;
        width: 100%;
        line-height: 1.3;
    }
}

/* 概要説明カード（業務可視化用・4分割） */
.overview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    width: 70%;
    margin: auto;
}

.overview__card {
    padding: 2em;
    background: #efefef;
}

.overview__card:first-child {
    border-radius: 8px 0 0 0;
}

.overview__card:nth-child(2) {
    border-radius: 0 8px 0 0;
}

.overview__card:nth-child(3) {
    border-radius: 0 0 0 8px;
}

.overview__card:nth-child(4) {
    border-radius: 0 0 8px 0;
}

h3.overview__title {
    color: #0077b6;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
}

ul.overview__list li {
    position: relative;
    padding-left: 1em;
}

ul.overview__list li::before {
    content: "・";
    left: 0;
    position: absolute;
}

@media screen and (max-width: 767px) {
    .overview {
        width: 100%;
        display: block;
    }

    .overview__card:first-child,
    .overview__card:nth-child(2),
    .overview__card:nth-child(3),
    .overview__card:nth-child(4) {
        border-radius: 5px;
        margin-bottom: 1em;
    }
}

/* よくある質問間隔調整 */
section#faq .p-groupType1:first-child {
    padding-top: 0;
}

/* 業務可視化の「約2か月で業務を可視化」説明図 */
br.sp {
    display: none;
}

div.visualization-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 100px 100px 100px auto;
    gap: 0;
    margin-bottom: 1em;
}

div.visualization-flow div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

div.visualization-flow p {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
}

div.visualization-flow p,
div.visualization-flow ul {
    margin: 0;
}

div.visualization-flow ul.sp {
    display: none;
}

div.visualization-flow p span,
div.visualization-flow ul li {
    color: #767676;
}


div.visualization-flow div.div1 {
    grid-area: 1 / 1 / 2 / 2;
}

div.visualization-flow div.div1,
div.visualization-flow div.div3 {
    background: #767676;
    clip-path: polygon(
            /* 横線：2px */
            0% calc(50% - 1px),
            100% calc(50% - 1px),
            100% calc(50% + 1px),
            0% calc(50% + 1px),

            /* 端縦線：2px × 1em */
            0% calc(50% - 0.5em),
            2px calc(50% - 0.5em),
            2px calc(50% + 0.5em),
            0% calc(50% + 0.5em));
}

div.visualization-flow div.div2 {
    grid-area: 1 / 2 / 2 / 3;
}

div.visualization-flow div.div3 {
    grid-area: 1 / 3 / 2 / 4;
    transform: scale(-1, 1);
}

div.visualization-flow div.div4 {
    grid-area: 1 / 4 / 2 / 5;
}

div.visualization-flow div.div5 {
    grid-area: 2 / 1 / 4 / 2;
    background: #005792;
    clip-path: polygon(calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%, 0% 0%);
}

div.visualization-flow div.div6,
div.visualization-flow div.div7 {
    clip-path: polygon(calc(100% - 30px) 0%, 100% 50%, calc(100% - 30px) 100%, 0% 100%, 30px 50%, 0% 0%);
}

div.visualization-flow div.div6 {
    grid-area: 2 / 2 / 4 / 3;
    background: #0077b6;
}

div.visualization-flow div.div7 {
    grid-area: 2 / 3 / 4 / 4;
    background: #0096c7;
}

div.visualization-flow div.div8 {
    grid-area: 2 / 4 / 3 / 5;
    background: #00b4d8;
    clip-path: polygon(calc(100% - 30px) 0%, 100% 100%, 30px 100%, 0% 0%);
}

div.visualization-flow div.div9 {
    grid-area: 3 / 4 / 4 / 5;
    background: #48cae4;
    clip-path: polygon(100% 0, calc(100% - 30px) 100%, 0% 100%, 30px 0);
}

div.visualization-flow div.div10,
div.visualization-flow div.div11,
div.visualization-flow div.div12,
div.visualization-flow div.div13 {
    height: max-content;
}

div.visualization-flow div.div10 {
    grid-area: 4 / 1 / 5 / 2;
}

div.visualization-flow div.div11 {
    grid-area: 4 / 2 / 5 / 3;
}

div.visualization-flow div.div12 {
    grid-area: 4 / 3 / 5 / 4;
}

div.visualization-flow div.div13 {
    grid-area: 4 / 4 / 5 / 5;
}

@media (max-width: 767px) {
    br.sp {
        display: unset;
    }

    div.visualization-flow {
        display: grid;
        grid-template-columns: 2fr 2fr 1fr;
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    div.visualization-flow div.div1 {
        grid-area: 1 / 3 / 2 / 4;
    }

    div.visualization-flow div.div2 {
        grid-area: 2 / 3 / 3 / 4;
    }

    div.visualization-flow div.div2 p {
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    div.visualization-flow div.div3 {
        grid-area: 3 / 3 / 4 / 4;
    }

    div.visualization-flow div.div4 {
        grid-area: 4 / 3 / 5 / 4;
    }

    div.visualization-flow div.div5 {
        grid-area: 1 / 1 / 2 / 3;
    }

    div.visualization-flow div.div6 {
        grid-area: 2 / 1 / 3 / 3;
    }

    div.visualization-flow div.div7 {
        grid-area: 3 / 1 / 4 / 3;
    }

    div.visualization-flow div.div8 {
        grid-area: 4 / 1 / 5 / 2;
    }

    div.visualization-flow div.div9 {
        grid-area: 4 / 2 / 5 / 3;
    }

    div.visualization-flow div.div10 {
        grid-area: 5 / 1 / 6 / 4;
    }

    div.visualization-flow div.div11 {
        grid-area: 6 / 1 / 7 / 4;
    }

    div.visualization-flow div.div12 {
        grid-area: 7 / 1 / 8 / 4;
    }

    div.visualization-flow div.div13 {
        grid-area: 8 / 1 / 9 / 4;
    }

    div.visualization-flow div.div10,
    div.visualization-flow div.div11,
    div.visualization-flow div.div12,
    div.visualization-flow div.div13 {
        display: none;
    }

    div.visualization-flow ul.sp {
        display: block;
    }

    div.visualization-flow ul.sp li {
        white-space: normal;
        color: #fff;
    }

    div.visualization-flow div.div1,
    div.visualization-flow div.div3 {
        clip-path: polygon(calc(50% - 0.5em) 0%,
                calc(50% + 0.5em) 0%,
                calc(50% + 0.5em) 2px,
                calc(50% + 1px) 2px,
                calc(50% + 1px) 100%,
                calc(50% - 1px) 100%,
                calc(50% - 1px) 2px,
                calc(50% - 0.5em) 2px)
    }

    div.visualization-flow div.div3 {
        transform: scale(1, -1);
    }

    div.visualization-flow div.div5 {
        clip-path: polygon(100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px), 0% 0%);
    }

    div.visualization-flow div.div6,
    div.visualization-flow div.div7 {
        clip-path: polygon(100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px), 0 0, 50% 30px);
    }

    div.visualization-flow div.div8 {
        clip-path: polygon(100% 100%, 0 calc(100% - 30px), 0 0, 100% 30px);
    }

    div.visualization-flow div.div9 {
        clip-path: polygon(100% calc(100% - 30px), 0 100%, 0 30px, 100% 0);
    }

    div.visualization-flow div.div5,
    div.visualization-flow div.div6,
    div.visualization-flow div.div7 {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        gap: 0;
    }
}

/* ○○とは（画像なし） */
section#dictionary div.dictionary__content,
section#defineB div.defineB__text {
    width: 70%;
    margin: auto;
}

@media screen and (max-width: 767px) {

    section#dictionary div.dictionary__content,
    section#defineB div.defineB__text {
        width: 100%;
    }
}

/* メイン画像オーバーレイ解除 */
section.p-mv.p-mv--narrow.clear-overlay::before {
    background: none;
}

section.p-mv.p-mv--narrow.clear-overlay .c-headingType1--baseColor .c-headingType1__title__main {
    text-shadow: 0px 1px 4px #959595;
}

/* まるごと人事労務サポート */
span.jinjer-lead {
    display: block;
    color: #0e74ab;
    font-size: 2.8rem;
    text-align: center;
}

.jinjer ul.card-list.card-list--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 2em;
}

.jinjer ul.card-list.card-list--3col li {
    background: rgb(249, 249, 249);
    box-shadow: #868e96 5px 5px 5px;
    padding: 2em;
}

.jinjer ul.card-list--3col li.card-list__item div.card__image {
    transform: scale(70%, 70%);
    height: 120px;
}

.jinjer ul.card-list li.card-list__item div.card__content h3 {
    margin-bottom: 1em;
}

.jinjer.l-whiteBox>section::after {
    display: none;
}

.jinjer div.media {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: start;
}

.jinjer div.media div.media__image {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100%;
}

.jinjer div.media div.media__image img {
    border: 1px solid #eee;
    height: calc(1.6rem * 1.75 *6);
    width: auto;
}

@media screen and (max-width: 767px) {

    .jinjer ul.card-list.card-list--3col,
    .jinjer div.media {
        grid-template-columns: repeat(1, 1fr);
        gap: 1em;
    }

    .jinjer div.media div.media__image {
        padding-right: unset;
        margin-bottom: 1em;
    }

    section#jinjer>div {
        margin-bottom: 30px;
    }

    .jinjer div.media div.media__image img {
        width: 100%;
        height: auto;
    }
}


.fw500 {
    font-weight: 500;
}

.jinjer section#WYSIWYG .text {
    width: 70%;
    margin: auto;
}

@media screen and (max-width: 767px) {
    .jinjer section#WYSIWYG .text {
        width: 100%;
    }
}

section#jinjer>div {
    margin-bottom: 100px;
}

section#jinjer>div:last-child {
    margin-bottom: 0;
}

section#jinjer div.problems ul.problem-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 1rem 30px;
    counter-reset: section;
}

section#jinjer div.problems ul.problem-list li.problem-list__item {
    display: grid;
    grid-template-columns: 4em calc(100% - 5em);
    border: 2px solid #0e74ab;
    color: #0e74ab;
    padding: 0.2em 0.7em;
    border-radius: 4em;
    align-items: center;
    height: 4em;
    line-height: 1.5em;
}

section#jinjer div.problems ul.problem-list li.problem-list__item::before {
    counter-increment: section;
    content: counter(section);
    background: #0e74ab;
    width: 3em;
    height: 3em;
    line-height: 3em;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

@media screen and (max-width: 767px) {
    section#jinjer div.problems ul.problem-list {
        display: block;
    }

    section#jinjer div.problems ul.problem-list li.problem-list__item {
        height: fit-content;
        margin-bottom: 1em;
    }

    section#jinjer div.problems ul.problem-list li.problem-list__item:last-child {
        margin-bottom: 0;
    }
}

section#jinjer div.work {
    width: 70%;
    margin: 0 auto 100px;
}

section#jinjer div.work h3 {
    margin-bottom: 20px;
}

section#jinjer div.work div.accordion-list ul {
    width: fit-content;
}

section#jinjer div.work div.accordion-list ul li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

section#jinjer div.work div.accordion-list ul li::before {
    content: "";
    width: 0.3em;
    height: 0.3em;
    background: #000;
    border-radius: 50%;
    display: block;
    margin-right: 0.5em;
}

section#jinjer div.partner div.media__content {
    justify-content: flex-start;
}

section#jinjer div.partner div.media__content p {
    margin-top: 1em;
}

section#jinjer div.partner div.media__content p:first-child {
    margin-top: 0;
}

section#jinjer div.partner p.attention {
    margin-top: 2em;
    text-align: center;
}

@media screen and (max-width: 767px) {
    section#jinjer div.work {
        width: 100%;
    }
}

/* アコーディオン */
div.accordion-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 30px;
    margin: 0 auto 50px;
}

div.accordion-list div.accordion-card {
    border: 1px solid #eee;
    border-radius: 0.5rem;
    padding: 2rem;
    height: fit-content;
}

div.accordion-list div.accordion-card:hover {
    border: 1px solid #000;
}

div.accordion-list div.accordion-card div.accordion-card__title {
    font-size: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.accordion-list div.accordion-card div.accordion-card__title h4 {
    font-size: 1.6rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

div.accordion-list div.accordion-card div.accordion-card__title h4 img {
    width: 1.5em;
    height: auto;
    margin-right: 0.5em;
}

div.accordion-list div.accordion-card div.accordion-card__title::after {
    content: "+";
    color: #fff;
    background: #ccc;
    border-radius: 50%;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.accordion-list div.accordion-card:hover div.accordion-card__title::after {
    transform: translate(5px, -5px);
}


div.accordion-list div.accordion-card div.accordion-card__description {
    display: none;
}

div.accordion-list div.accordion-card div.accordion-card__description.visible {
    display: unset;
}

div.accordion-list div.accordion-card div.accordion-card__description.visible::before {
    content: "";
    border-bottom: 1px solid #cccccc;
    width: 100%;
    height: 1em;
    display: block;
    margin-bottom: 1em;
}

@media screen and (max-width: 767px) {
    div.accordion-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* サービスリスト（アコーディオンなし） */
div.service-detail-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 30px;
    margin: 0 auto 50px;
}

div.service-detail-list div.service-detail-card {
    border: 1px solid #eee;
    border-radius: 0.5rem;
    padding: 2rem;
    height: fit-content;
}

div.service-detail-list div.service-detail-card div.service-detail-card__title {
    font-size: 1.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.service-detail-list div.service-detail-card div.service-detail-card__title h4 {
    font-size: 1.6rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

div.service-detail-list div.service-detail-card div.service-detail-card__title h4 img {
    width: 1.5em;
    height: auto;
    margin-right: 0.5em;
}

@media screen and (max-width: 767px) {
    div.service-detail-list {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* テーマカラー変更 */
/* グリーン */
.themecolor-green .c-titleType1--mainColor,
.themecolor-green .c-textSize2--mainColor,
.themecolor-green .c-titleType2--mainColor {
    color: #0077b6;
}

.themecolor-green .c-titleType5 {
    background: #0077b6;
}

.themecolor-green .l-contents__contact {
    position: relative;
    background: #ffffff;
}
.themecolor-green .l-contents__contact::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 1px;
    background: #C1C1C1;
}

.themecolor-green .l-footer__contact {
    background: #90e0ef;
}

.themecolor-green .l-contents__contact__telBox__title,
.themecolor-green .l-footer__contact__telBox__title {
    color: #0077b6;
}

.themecolor-green .c-buttonType1--baseColor .c-buttonType1__link {
    color: #FFFFFF;
    background: #0077b6;
    border: none;
}

.themecolor-green .c-buttonType1--baseColor .c-buttonType1__link::before {
    filter: brightness(0) saturate(100%) invert(21%) sepia(68%) saturate(5687%) hue-rotate(187deg) brightness(100%) contrast(101%);
}

.themecolor-green .p-serviceLinkBlock__link:hover {
    color: #0077b6;
}

.themecolor-green .l-contents__contact .c-buttonType1--baseColor .c-buttonType1__link:hover {
    background: #90e0ef;
    color: #0077b6;
}

.themecolor-green .l-footer__contact .c-buttonType1--baseColor .c-buttonType1__link:hover {
    background: #ffffff;
    color: #0077b6;
}

.themecolor-green .c-buttonType1--baseColor .c-buttonType1__link::after,
.themecolor-green .c-buttonType1--baseColor .c-buttonType1__link:hover::after {
    background: none;
}

.themecolor-green .c-buttonType1--baseColor .c-buttonType1__link:hover::before,
.themecolor-green .p-serviceLinkBlock__link:hover .p-serviceLinkBlock__link__inner::before {
    filter: brightness(0) saturate(100%) invert(21%) sepia(68%) saturate(5687%) hue-rotate(187deg) brightness(100%) contrast(101%);
}

/* ブルー */
.themecolor-blue .c-textSize2--mainColor,
.themecolor-blue .c-titleType2--mainColor {
    color: #0e74ab;
}

.themecolor-blue .l-contents__contact,
.themecolor-blue .l-footer__contact {
    background: #9cd2dd;
}

.themecolor-blue .l-contents__contact__telBox__title,
.themecolor-blue .l-footer__contact__telBox__title {
    color: #0e74ab;
}

.themecolor-blue .c-buttonType1--baseColor .c-buttonType1__link {
    color: #FFFFFF;
    background: #0e74ab;
    border-color: #FFFFFF;
}

.themecolor-blue .c-buttonType1--baseColor .c-buttonType1__link::before {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(266deg) brightness(101%) contrast(101%);
}

.themecolor-blue .p-serviceLinkBlock__link:hover {
    color: #0e74ab;
}

.themecolor-blue .c-buttonType1--baseColor .c-buttonType1__link:hover {
    background: #ffffff;
    color: #0e74ab;
}

.themecolor-blue .c-buttonType1--baseColor .c-buttonType1__link::after,
.themecolor-blue .c-buttonType1--baseColor .c-buttonType1__link:hover::after {
    background: none;
}

.themecolor-blue .c-buttonType1--baseColor .c-buttonType1__link:hover::before,
.themecolor-blue .p-serviceLinkBlock__link:hover .p-serviceLinkBlock__link__inner::before {
    filter: brightness(0) saturate(100%) invert(35%) sepia(83%) saturate(595%) hue-rotate(159deg) brightness(93%) contrast(99%);
}

/* ネイビー */
.themecolor-navy .c-textSize2--mainColor,
.themecolor-navy .c-titleType2--mainColor {
    color: #000099;
}

.themecolor-navy .l-contents__contact,
.themecolor-navy .l-footer__contact {
    background: #000099;
}

.themecolor-navy .l-contents__contact__telBox__title,
.themecolor-navy .l-footer__contact__telBox__title {
    color: #ffffff;
}

.themecolor-navy .c-buttonType1--baseColor .c-buttonType1__link {
    background: #000099;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
}

.themecolor-navy .c-buttonType1--baseColor .c-buttonType1__link::before {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(266deg) brightness(101%) contrast(101%);
}

.themecolor-navy .p-serviceLinkBlock__link:hover {
    color: #000099;
}

.themecolor-navy .c-buttonType1--baseColor .c-buttonType1__link:hover {
    background: #ffffff;
    color: #000099;
    border-color: #000099;
}

.themecolor-navy .c-buttonType1--baseColor .c-buttonType1__link::after,
.themecolor-navy .c-buttonType1--baseColor .c-buttonType1__link:hover::after {
    background: none;
}

.themecolor-navy .c-buttonType1--baseColor .c-buttonType1__link:hover::before,
.themecolor-navy .p-serviceLinkBlock__link:hover .p-serviceLinkBlock__link__inner::before,
.themecolor-navy .c-checkList__item::before {
    filter: brightness(0) saturate(100%) invert(7%) sepia(76%) saturate(7030%) hue-rotate(230deg) brightness(97%) contrast(103%);
}

.themecolor-navy .c-headingType1__title__sub,
.themecolor-navy .c-textSize1--mainColor,
.themecolor-navy .c-titleType1--mainColor {
    color: #000099;
}

.themecolor-navy .c-titleType5 {
    background: #000099;
}

.themecolor-navy .p-serviceTable {
    border: 1px solid #000099;
}

.themecolor-navy .p-serviceTable__item__title {
    background: #000099;
}