@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
/*
------------------------------
(C)ACPA Style CSS ver.1.0
------------------------------
*/

:root {
    --color-primary-700: #094270;
    --color-primary-500: #0C5A99;
    --color-primary-300: #80A9CA;
    --color-primary-200: #B9D2E5;
    --color-primary-50: #f1f3fc;
    --color-bg: #F6F6F4;
    --color-gray-700: #344D61;
    --color-gray-500: #546A7C;
    --color-gray-400: #6A7D8D;
    --color-gray-300: #8798A6;
    --color-gray-200: #B7C2CB;
    --color-gray-100: #E6EAF0;
    --color-gray-50: #F6F7F8;

    --color-text-link: var(--color-primary-500);

    --color-btn-sub: var(--color-white);
    --color-btn-sub-text: var(--color-gray-500);
    --color-btn-sub-frame: var(--color-gray-500);

    --font-size-h1: clamp(3.2rem, 5vw, 4rem);

    --font-family-en: "Figtree", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "Segoe UI", "verdana", sans-serif;
    --size-contents: clamp(375px, 90%, 1200px);

    --height-header: var(--size-10);
}

html {
    scroll-padding-top: var(--height-header);
}

.c-contents {
    margin: 0 auto;
    padding: 0 1.6rem;
    width: var(--size-contents);
    position: relative;
}

.c-sec {
    position: relative;
    padding-top: clamp(var(--size-05), 5vw, var(--size-08));
    padding-bottom: clamp(var(--size-05), 5vw, var(--size-08));
}

.p-en {
    font-family: var(--font-family-en);
}

/* 見出し */
.c-head {
    color: var(--color-gray-700);
}

.c-head-sec {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: var(--size-06);
}

.c-head-sec .c-head-sub {
    position: relative;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-m);
    color: var(--color-gray-500);
}

.c-head-sec .c-head-sub::before {
    content: "■";
    padding-right: var(--size-005);
    color: var(--color-primary-500);
}

.c-head-sec .c-head {
    font-size: var(--font-size-h2);
}

.c-head.c-head-h1 {
    font-size: var(--font-size-h1);
    padding-bottom: var(--size-06);
    position: relative;
    margin-bottom: var(--size-06);
}

.c-head.c-head-h1::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2em;
    height: 3px;
    background-color: var(--color-primary-500);
}

.c-head.c-head-l {
    font-size: var(--font-size-h2);
    margin-bottom: var(--size-03);
    margin-top: var(--size-06);
}

.c-head.c-head-m {
    font-size: var(--font-size-xl);
    padding-left: var(--size-02);
    border-left: solid 5px var(--color-primary-500);
    margin-bottom: var(--size-02);
    margin-top: var(--size-06);
}

.c-head.c-head-s {
    font-size: var(--font-size-l);
    color: var(--color-primary-500);
    padding-left: var(--size-025);
    position: relative;
    margin-bottom: var(--size-02);
    margin-top: var(--size-05);
}


.c-head.c-head-s::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--size-015);
    height: 3px;
    background-color: var(--color-primary-500);
}

/* ボタン */
.c-btn {
    flex-direction: unset;
    justify-content: space-between;
    gap: var(--size-03);
    padding-top: var(--size-01);
    padding-bottom: var(--size-01);
    padding-left: var(--size-04);
    padding-right: var(--size-01);
    max-width: fit-content;
}

@media (any-hover: hover) {
    .c-btn:hover {
        opacity: 1;
    }
}


/* テキストボタン */
.c-link {
    display: inline-flex;
    align-items: center;
    gap: var(--size-02);
    text-decoration: none;
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
}

.c-link.p-link-primary {
    color: var(--color-gray-500);
}

.c-link.p-link-sub {
    color: var(--color-white);
}


.p-mark-arrow,
.p-mark-blank,
.p-mark-anchor,
.p-mark-back {
    width: var(--size-06);
    height: var(--size-06);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    display: block;
    border: 1px solid var(--color-gray-500);
    flex-shrink: 0;
}

.p-mark-pdf {
    position: relative;
    width: var(--size-06);
    height: var(--size-06);
    margin-left: var(--size--02);
}

.p-mark-arrow::before,
.p-mark-arrow::after,
.p-mark-blank::before,
.p-mark-blank::after,
.p-mark-anchor::before,
.p-mark-anchor::after,
.p-mark-back::before,
.p-mark-back::after {
    content: "";
    position: absolute;
    inset: 0;
    mask-image: url(../img/arrow.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 12px 12px;
    -webkit-mask-image: url(../img/arrow.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 12px 12px;
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--color-gray-500);
}

.p-mark-pdf::before {
    content: "";
    position: absolute;
    inset: 0;
    mask-image: url(../img/pdf.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--color-gray-500);
}

.c-btn.u-btn-primary .p-mark-arrow,
.c-btn.u-btn-primary .p-mark-blank,
.c-btn.u-btn-primary .p-mark-anchor,
.c-btn.u-btn-primary .p-mark-back,
.c-link.p-link-sub .p-mark-arrow,
.c-link.p-link-sub .p-mark-blank,
.c-link.p-link-sub .p-mark-anchor,
.c-link.p-link-sub .p-mark-back {
    border: 1px solid var(--color-white);
}

.c-btn.u-btn-primary .p-mark-arrow::before,
.c-btn.u-btn-primary .p-mark-arrow::after,
.c-btn.u-btn-primary .p-mark-blank::before,
.c-btn.u-btn-primary .p-mark-blank::after,
.c-btn.u-btn-primary .p-mark-anchor::before,
.c-btn.u-btn-primary .p-mark-anchor::after,
.c-btn.u-btn-primary .p-mark-back::before,
.c-btn.u-btn-primary .p-mark-back::after,
.c-btn.u-btn-primary .p-mark-pdf::before,
.c-link.p-link-sub .p-mark-arrow::before,
.c-link.p-link-sub .p-mark-arrow::after,
.c-link.p-link-sub .p-mark-blank::before,
.c-link.p-link-sub .p-mark-blank::after,
.c-link.p-link-sub .p-mark-anchor::before,
.c-link.p-link-sub .p-mark-anchor::after,
.c-link.p-link-sub .p-mark-back::before,
.c-link.p-link-sub .p-mark-back::after,
.c-link.p-link-sub .p-mark-pdf::before {
    background-color: var(--color-white);
}


.p-mark-arrow::after {
    transform: translateX(0);
    opacity: 1;
}

.p-mark-arrow::before {
    transform: translateX(-120%);
    opacity: 0;
}

.p-mark-anchor::after {
    transform: translate(0, 0);
    opacity: 1;
    transform: rotate(90deg);
}

.p-mark-anchor::before {
    transform: translateY(-120%);
    opacity: 0;
}

.p-mark-blank::after {
    transform: translate(0, 0);
    opacity: 1;
    transform: rotate(-45deg);
}

.p-mark-blank::before {
    transform: translate(-120%, 120%);
    opacity: 0;
}

.p-mark-back::after {
    transform: translateX(0);
    opacity: 1;
    transform: rotate(-180deg);
}

.p-mark-back::before {
    transform: translateX(120%) rotate(-180deg);
    opacity: 0;
}

@media (any-hover: hover) {
    .c-link.p-link-primary:hover {
        color: var(--color-primary-500);
    }

    .c-link.p-link-sub:hover {
        color: var(--color-white);
    }

    a:hover .p-mark-arrow,
    a:hover .p-mark-blank,
    a:hover .p-mark-anchor,
    a:hover .p-mark-back {
        border: 1px solid var(--color-primary-500);
    }

    a:hover .p-mark-arrow::before,
    a:hover .p-mark-arrow::after,
    a:hover .p-mark-blank::before,
    a:hover .p-mark-blank::after,
    a:hover .p-mark-anchor::before,
    a:hover .p-mark-anchor::after,
    a:hover .p-mark-back::before,
    a:hover .p-mark-back::after {
        background-color: var(--color-primary-500);
    }

    .c-btn.u-btn-primary:hover .p-mark-arrow,
    .c-btn.u-btn-priary:hover .p-mark-blank,
    .c-btn.u-btn-priary:hover .p-mark-anchor,
    .c-btn.u-btn-priary:hover .p-mark-back,
    .c-link.p-link-sub:hover .p-mark-arrow,
    .c-link.p-link-sub:hover .p-mark-blank,
    .c-link.p-link-sub:hover .p-mark-anchor,
    .c-link.p-link-sub:hover .p-mark-back {
        border: 1px solid var(--color-white);
    }

    .c-btn.u-btn-sub:hover .p-mark-arrow,
    .c-btn.u-btn-sub:hover .p-mark-blank,
    .c-btn.u-btn-sub:hover .p-mark-anchor,
    .c-btn.u-btn-sub:hover .p-mark-back {
        border: 1px solid var(--color-gray-500);
    }

    .c-btn.u-btn-primary:hover .p-mark-arrow::before,
    .c-btn.u-btn-primary:hover .p-mark-arrow::after,
    .c-btn.u-btn-primary:hover .p-mark-blank::before,
    .c-btn.u-btn-primary:hover .p-mark-blank::after,
    .c-btn.u-btn-primary:hover .p-mark-anchor::before,
    .c-btn.u-btn-primary:hover .p-mark-anchor::after,
    .c-btn.u-btn-primary:hover .p-mark-back::before,
    .c-btn.u-btn-primary:hover .p-mark-back::after,
    .c-link.p-link-sub:hover .p-mark-arrow::before,
    .c-link.p-link-sub:hover .p-mark-arrow::after,
    .c-link.p-link-sub:hover .p-mark-blank::before,
    .c-link.p-link-sub:hover .p-mark-blank::after,
    .c-link.p-link-sub:hover .p-mark-anchor::before,
    .c-link.p-link-sub:hover .p-mark-anchor::after,
    .c-link.p-link-sub:hover .p-mark-back::before,
    .c-link.p-link-sub:hover .p-mark-back::after {
        background-color: var(--color-white);
    }

    .c-btn.u-btn-sub:hover .p-mark-arrow::before,
    .c-btn.u-btn-sub:hover .p-mark-arrow::after,
    .c-btn.u-btn-sub:hover .p-mark-blank::before,
    .c-btn.u-btn-sub:hover .p-mark-blank::after,
    .c-btn.u-btn-sub:hover .p-mark-anchor::before,
    .c-btn.u-btn-sub:hover .p-mark-anchor::after,
    .c-btn.u-btn-sub:hover .p-mark-back::before,
    .c-btn.u-btn-sub:hover .p-mark-back::after {
        background-color: var(--color-gray-500);
    }

    a:hover .p-mark-arrow::after {
        transform: translateX(120%);
        opacity: 0;
    }

    a:hover .p-mark-arrow::before {
        transform: translateX(0);
        opacity: 1;
    }

    a:hover .p-mark-anchor::after {
        transform: translateY(120%);
        opacity: 0;
    }

    a:hover .p-mark-anchor::before {
        transform: translateY(0) rotate(90deg);
        opacity: 1;
    }


    a:hover .p-mark-blank::after {
        transform: translate(120%, -120%) rotate(-45deg);
        opacity: 0;
    }

    a:hover .p-mark-blank::before {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 1;
    }

    a:hover .p-mark-back::after {
        transform: translateX(-120%) rotate(-180deg);
        opacity: 0;
    }

    a:hover .p-mark-back::before {
        transform: translateX(0) rotate(-180deg);
        opacity: 1;
    }

    a:hover .p-mark-pdf::before {
        background-color: var(--color-primary-500);
    }
}

/* カード */
/* .c-card.u-card-bg a.c-card-box .c-card-cnt,
.c-card.u-card-frame a.c-card-box .c-card-cnt {
    padding-bottom: var(--size-02);
} */

/* .c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link {
    position: relative;
    right: auto;
    bottom: auto;
    display: flex;
    justify-content: end;
} */

.c-card .c-card-box {
    border-radius: var(--size-005);
}

.c-card.u-card-num .c-card-num {
    font-family: var(--font-family-en);
    background-color: var(--color-white);
    padding: 0 var(--size-02);
}

.c-card.u-card-num.u-card-bg .c-card-num,
.c-card.u-card-num.u-card-frame .c-card-num {
    left: var(--size-015);
}

.c-card.u-card-text .c-card-box .c-card-ttl .c-head {
    color: var(--color-primary-500);
    font-size: var(--font-size-l);
}

.c-card.u-card-text .c-card-box .c-card-dtl {
    font-size: var(--font-size-s);
}

.c-card.u-card-bg .c-card-box,
.c-card.u-card-frame .c-card-box {
    background-color: var(--color-white);
}

.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link {
    right: var(--size-005);
    bottom: var(--size-005);
    line-height: 0;
}

.c-card.u-card-bg a.c-card-box .c-card-cnt,
.c-card.u-card-frame a.c-card-box .c-card-cnt {
    padding-bottom: var(--size-04);
}

.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-arrow,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-arrow,
.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-blank,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-blank {
    width: var(--size-06);
    height: var(--size-06);
    display: block;
    /* border-radius: 50%; */
    background-color: var(--color-primary-500);
    /* overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    clip-path: polygon(
        100% 100%,
        0 100%, 
        100% 0 
    ); */
    mask: url(../img/card-link.svg) no-repeat center / contain;
    -webkit-mask: url(../img/card-link.svg) no-repeat center / contain;
}

.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::before,
.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::after,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::before,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::after,
.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-blank::before,
.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-blank::after,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-blank::before,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-blank::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-white);
    mask-image: url(../img/arrow.svg);
    mask-repeat: no-repeat;
    mask-size: 12px 12px;
    -webkit-mask-image: url(../img/arrow.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 12px 12px;
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::before,
.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::after,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::before,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::after {
    mask-position: calc(50% + 8px) calc(50% + 6px);
    -webkit-mask-position: calc(50% + 8px) calc(50% + 6px);
}

.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-blank::before,
.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-blank::after,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-blank::before,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-blank::after {
    mask-position: calc(50% + 2px) calc(50% + 10px);
    -webkit-mask-position: calc(50% + 2px) calc(50% + 10px);

}


.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::after,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::after {
    transform: translateX(0);
    opacity: 1;
}

.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::before,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-arrow::before {
    transform: translateX(-120%);
    opacity: 0;
}


.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-blank::after,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-blank::after {
    transform: translate(0, 0);
    opacity: 1;
    transform: rotate(-45deg);
}

.c-card.u-card-bg a.c-card-box .c-card-cnt .c-card-link .p-card-blank::before,
.c-card.u-card-frame a.c-card-box .c-card-cnt .c-card-link .p-card-blank::before {
    transform: translate(-120%, 120%);
    opacity: 0;
}


@media (any-hover: hover) {
    .c-card a.c-card-box:hover {
        opacity: 1;
    }


    .c-card.u-card-bg a.c-card-box:hover .c-card-cnt .c-card-link .p-card-arrow::before,
    .c-card.u-card-bg a.c-card-box:hover .c-card-cnt .c-card-link .p-card-arrow::after,
    .c-card.u-card-frame a.c-card-box:hover .c-card-cnt .c-card-link .p-card-arrow::before,
    .c-card.u-card-frame a.c-card-box:hover .c-card-cnt .c-card-link .p-card-arrow::after,
    .c-card.u-card-bg a.c-card-box:hover .c-card-cnt .c-card-link .p-card-blank::before,
    .c-card.u-card-bg a.c-card-box:hover .c-card-cnt .c-card-link .p-card-blank::after,
    .c-card.u-card-frame a.c-card-box:hover .c-card-cnt .c-card-link .p-card-blank::before,
    .c-card.u-card-frame a.c-card-box:hover .c-card-cnt .c-card-link .p-card-blank::after {
        background-color: var(--color-white);
    }

    .c-card.u-card-bg a.c-card-box:hover .c-card-cnt .c-card-link .p-card-arrow::after,
    .c-card.u-card-frame a.c-card-box:hover .c-card-cnt .c-card-link .p-card-arrow::after {
        transform: translateX(120%);
        opacity: 0;
    }

    .c-card.u-card-bg a.c-card-box:hover .c-card-cnt .c-card-link .p-card-arrow::before,
    .c-card.u-card-frame a.c-card-box:hover .c-card-cnt .c-card-link .p-card-arrow::before {
        transform: translateX(0);
        opacity: 1;
    }

    .c-card.u-card-bg a.c-card-box:hover .c-card-cnt .c-card-link .p-card-blank::after,
    .c-card.u-card-frame a.c-card-box:hover .c-card-cnt .c-card-link .p-card-blank::after {
        transform: translate(120%, -120%) rotate(-45deg);
        opacity: 0;
    }

    .c-card.u-card-bg a.c-card-box:hover .c-card-cnt .c-card-link .p-card-blank::before,
    .c-card.u-card-frame a.c-card-box:hover .c-card-cnt .c-card-link .p-card-blank::before {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 1;
    }
}

/* パンくず */
.c-bcrumb {
    margin-top: 0;
    padding-top: var(--size-02);
}

.c-bcrumb ul li:not(:last-child)::after {
    content: "/";
}

/* テーブル */
.c-tbl tbody th {
    background-color: var(--color-primary-50);
}

.c-tbl thead th {
    background-color: var(--color-primary-500);
    color: var(--color-white);
}

/* フッター */
.c-footer {
    background-color: var(--color-gray-100);
}

.c-footer .c-head.c-head-m {
    font-size: var(--font-size-m);
}

.c-footer .c-footer-wrap {
    display: flex;
    gap: var(--size-08);
    justify-content: space-between;
    padding-top: clamp(var(--size-05), 5vw, var(--size-06));
    padding-bottom: clamp(var(--size-05), 5vw, var(--size-08));
}

.c-footer .c-footer-cnt {
    flex: 1;
    color: var(--color-gray-700);
}


.c-footer .c-footer-cnt .c-footer-list {
    font-size: var(--font-size-s);
    display: flex;
    flex-direction: column;
    color: var(--color-gray-500);
    gap: var(--size-01);
}

@media (any-hover: hover) {
    .c-footer .c-footer-cnt .c-footer-list li a:hover {
        text-decoration: underline;
    }
}

.c-footer .c-footer-head {
    font-size: var(--font-size-m);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--size-02);
}

.c-footer .c-footer-logo img {
    width: 200px;
}

.c-footer .c-footer-copr {
    background-color: var(--color-gray-700);
    color: var(--color-gray-200);
    font-size: 1.2rem;
    padding: var(--size-005) 0;
    font-family: var(--font-family-en);
    text-align: center;

}



/* ヘッダー */
header {
    height: var(--height-header);
}

.c-header {
    background-color: var(--color-white);
    border-bottom: solid 1px var(--color-gray-100);
}


.c-header > .c-contents {
    display: flex;
    justify-content: space-between;
    gap: var(--size-04);
    align-items: center;
}

.u-header-pc {
    height: var(--height-header);
}


.c-header .c-header-wrap {
    padding: 0 var(--size-02);
}


.c-header .c-header-nav .c-btn {
    font-size: var(--font-size-s);
    max-width: 20rem;
    white-space: nowrap;
}

.c-header .c-header-nav .c-btn .p-mark-arrow {
    width: var(--size-04);
    height: var(--size-04);
}

.c-header .c-header-menu .c-header-item.has-submenu::before {
    content: "";
    mask-image: url(../../assets/img/nav.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 10px 10px;
    -webkit-mask-image: url(../../assets/img/nav.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    /* display: block;
    margin: auto; */
    position: absolute;
    /* left: 0; */
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateY(0);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    bottom: var(--size-01);
    width: 10px;
    height: 10px;
    background-color: var(--color-gray-500);
}


.c-header .c-header-nav ul.c-header-menu {
    gap: var(--size-03);
}

.c-header .c-header-menu .c-header-item {
    position: relative !important;
    color: var(--color-gray-700);
    position: relative;
    display: flex;
    font-size: var(--font-size-s);
    border-bottom: solid 3px transparent;
    transition: all 0.15s ease-in-out;
    align-items: center;
    height: var(--height-header);
}

.c-header .c-header-menu .c-header-item.has-submenu:hover::before {
    background-color: var(--color-primary-500);
    animation: navIconSlide 0.4s ease forwards;
}

.c-header-item.is-open .c-header-submenu {
    opacity: 1;
}

.c-header-item.is-open.has-submenu::before {
    opacity: 0;
}

@keyframes navIconSlide {
    0% {
        transform: translateY(-50%) translateY(0);
        opacity: 1;
    }

    45% {
        transform: translateY(-50%) translateY(12px);
        opacity: 0;
    }

    55% {
        transform: translateY(-50%) translateY(-12px);
        opacity: 0;
    }

    100% {
        transform: translateY(-50%) translateY(0);
        opacity: 1;
    }
}

.c-header .c-header-submenu {
    position: fixed;
    top: var(--height-header);
    left: 0;
    width: 100vw;
    padding: var(--size-03);
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);

    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;

    transition: opacity 0.25s ease, transform 0.25s ease;
    will-change: opacity, transform;
}

.c-header-item.is-open .c-header-submenu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.c-header .c-header-submenu .p-nav {
    display: flex;
    align-items: baseline;
    gap: var(--size-02);
    position: relative;
}


.c-header .c-header-submenu .p-nav-main {
    font-size: var(--font-size-m);
    width: fit-content;
    flex: 1;
    text-wrap: nowrap;
}


.c-header .c-header-submenu .p-nav-sub::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--color-gray-200);
    left: var(--size--04);
    position: absolute;
}

.c-header .c-header-submenu .p-nav-sub {
    font-size: var(--font-size-s);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--size-02);
    row-gap: var(--size-02);
    width: 100%;
    flex: 4;
    position: relative;
}


.c-header .c-header-item.has-submenu.is-open {
    border-bottom: solid 3px var(--color-primary-500);
}

.c-header .c-header-menu .c-header-item>button,
.c-header .c-header-menu .c-header-item>a {
    cursor: pointer;
    padding: var(--size-03) var(--size-02) var(--size-03);
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 3;
    text-wrap: nowrap;
}


@media (any-hover: hover) {
    .c-header .c-header-nav .c-header-menu li a:hover {
        opacity: 1;
    }

    .c-header .c-header-menu .c-header-item:hover>button,
    .c-header .c-header-menu .c-header-item:hover>a {
        color: var(--color-primary-500);
    }

    .c-header .c-header-submenu li a:hover {
        color: var(--color-primary-500);
    }
}


.c-header .c-header-burger {
    width: var(--size-04);
    height: var(--size-03);
    position: relative;
    z-index: 1001;
}

.c-header .c-header-burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary-500);
    transition: 0.3s;
}

.c-header .c-header-burger span:nth-child(1) {
    top: 0;
}

.c-header .c-header-burger span:nth-child(2) {
    top: 10px;
}

.c-header .c-header-burger span:nth-child(3) {
    bottom: 0;
}

/* active状態 */
.c-header .c-header-burger.is-open span:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
}

.c-header .c-header-burger.is-open span:nth-child(2) {
    opacity: 0;
}

.c-header .c-header-burger.is-open span:nth-child(3) {
    transform: rotate(-45deg);
    bottom: 12px;
}

/* SPナビ */
.c-header .c-header-nav-sp {
    position: fixed;
    top: var(--height-header);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--height-header));
    background: var(--color-white);
    transform: translateX(100%);
    transition: 0.3s ease;
    padding: var(--size-03);
    z-index: 999;
    color: var(--color-gray-700);
    font-weight: var(--font-weight-bold);
    max-height: calc(100vh - var(--height-header));
    overflow-y: auto;
}

.c-header .c-header-nav-sp>ul {
    display: flex;
    flex-direction: column;
}

.c-header .c-header-nav-sp>ul>li {
    border-bottom: solid 1px var(--color-gray-100);
    padding: var(--size-03) 0;
}

.c-header .c-header-nav-sp>ul ul {
    padding-left: var(--size-03);
}

.c-header .c-header-nav-sp.is-open {
    transform: translateX(0);
}

.c-header .c-header-nav-sp .c-btn {
    max-width: none;
}

.c-header .c-acd .c-acd-ttl button[aria-expanded="true"] {
    color: var(--color-primary-500);
    background-color: var(--color-primary-50);
}

.c-header .c-acd ul {
    display: flex;
    flex-direction: column;
    gap: var(--size-02);
    margin-top: var(--size-02);
}

.c-header .c-acd ul a {
    display: block;
}

.c-header .c-acd .c-acd-ttl>a {
    padding: var(--size-02);
    padding-right: var(--size-06);
    display: block;
}

/* 注釈文 */
.p-asterisk {
    font-size: var(--font-size-s);
}

.p-asterisk a {
    color: var(--color-primary-500);
    text-decoration: underline;
}


/* お知らせ */
.p-news-date {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-400);
}

.p-news-tag {
    color: var(--color-primary-500);
    font-size: var(--font-size-s);
    padding: 0 var(--size-02);
    border-radius: var(--size-005);
    border: solid 1px var(--color-primary-500);
    min-width: calc(5em + var(--size-04));
    text-align: center;
    background-color: var(--color-white);
}

.p-news-cnt {
    min-height: var(--size-06);
    display: flex;
    align-items: center;
}

.p-news .p-news-item {
    display: flex;
    gap: var(--size-02);
}

.p-news li:first-of-type {
    padding-top: var(--size-02);
    border-top: solid 1px var(--color-gray-100);
}

.p-news li {
    padding-bottom: var(--size-02);
    border-bottom: solid 1px var(--color-gray-100);
    display: flex;
    align-items: center;
    gap: var(--size-03);
}

.p-news li a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease-in-out;
    color: var(--color-gray-500);
    font-weight: var(--font-weight-bold);
    gap: var(--size-02);
}

.p-news li a:hover {
    color: var(--color-primary-500);
}


#service .c-sec {
    padding-top: clamp(var(--size-05), 5vw, var(--size-10));
    padding-bottom: clamp(var(--size-05), 5vw, var(--size-10));
}

#service #sec-mv {
    overflow: hidden;
}

#service #sec-mv::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--size-15);
    background-color: var(--color-primary-500);
    z-index: 1;
}


#service #sec-mv .p-lead {
    color: var(--color-gray-700);
}

#service #sec-mv.c-sec {
    padding-top: 0;
    padding-bottom: var(--size-08);
}

#service #sec-mv .p-mv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--size-column);
    align-items: center;
}

#service #sec-mv .p-mv-cnt {
    margin-top: var(--size--07);
    z-index: 2;
}

#service #sec-mv .p-mv-thumb {
    margin-right: calc(50% - 50vw);
    z-index: 2;
    border-radius: var(--size-005);
    overflow: hidden;
    position: relative;
}

#service #sec-mv+section {
    padding-top: 0;
    padding-bottom: var(--size-15);
}


#service #sec-intro {
    background-color: var(--color-primary-500);
    color: var(--color-white);
}

#service #sec-intro .c-head,
#service #sec-intro .c-head-sec .c-head-sub,
#service #sec-intro .c-head-sec .c-head-sub::before {
    color: var(--color-white);
}


#sec-contact {
    background-color: var(--color-gray-500);
    color: var(--color-white);
}

#sec-contact .c-head-sec .c-head,
#sec-contact .c-head-sec .c-head-sub,
#sec-contact .c-head-sec .c-head-sub::before {
    color: var(--color-white);
}

#sec-contact .p-contact {
    align-items: end;
}

#sec-contact .p-contact-btn {
    max-width: none;
    padding-top: var(--size-03);
    padding-bottom: var(--size-03);
    padding-right: var(--size-03);
    font-size: var(--font-size-l);
}

#sec-contact .p-contact-btn .p-mark-arrow {
    border: solid 1px var(--color-white);
}

#sec-contact .p-contact-btn .p-mark-arrow::before,
#sec-contact .p-contact-btn .p-mark-arrow::after {
    background-color: var(--color-white);
}

#about-overview #sec-executive .l-exec:not(:last-of-type) {
    margin-bottom: var(--size-03);
}

#about-overview #sec-executive .l-exec .l-exec-ttl {
    font-size: var(--font-size-s);
    color: var(--color-gray-500);
    display: block;
    position: relative;
    padding-left: var(--size-03);
}

#about-overview #sec-executive .l-exec .l-exec-ttl::before {
    content: "-";
    padding-right: var(--size-02);
}

@media only screen and (max-width:1024px) {
    :root {
        --height-header: var(--size-07);
    }

    header {
        height: var(--height-header);
    }

    .u-header-sp {
        padding: var(--size-01) 0;
        height: var(--height-header);
    }

    #service #sec-mv .p-mv {
        display: block;
    }

    #service #sec-mv.c-sec {
        padding-top: clamp(var(--size-05), 5vw, var(--size-10));
    }

    #service #sec-mv .p-mv-thumb {
        margin-right: auto;
        margin-top: var(--size-06);
    }

    #service #sec-mv .p-mv-cnt {
        margin-top: 0;
    }
}

@media only screen and (max-width:768px) {
    .c-footer .c-footer-wrap {
        flex-direction: column;
    }

    #sec-contact .p-contact-btn {
        padding-top: var(--size-01);
        padding-bottom: var(--size-01);
        padding-right: var(--size-01);
    }

    .p-news li {
        flex-direction: column;
        align-items: baseline;
        gap: var(--size-005);
    }

    .p-news li a {
        width: 100%;
    }
}



@media (max-width: 520px) {}