/* ---------- 
font-weightについて
・ Noto Sans JP
　 mediumの場合は500
・ Inter
　 regularの場合は400
・ Unna
　 regularの場合は400
----------*/

/*
 * 共通スタイル
 */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #333;

    /*header下に要素が来るようにする*/
    margin-top: 100px;
}
@media screen and (max-width: 1110px) {
    body {
        margin-top: 60px;
    }
}

.sp-only {
    display: none;
}
@media screen and (max-width: 700px) {
    .sp-only {
        display: block;
    }
    .pc-only {
        display: none;
    }
}

.inner {
    width: clamp(1000px, 71.4vw, 1200px);
    max-width: 100%;
    margin: 0 auto;
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
    .inner {
        padding-left: 30px;
        padding-right: 30px;
    }
}
@media screen and (max-width: 700px) {
    .inner {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* パンくず */
.breadcrumb {
    padding: 20px 40px 80px;
}
.breadcrumb .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
}
.breadcrumb .breadcrumb-item {
    position: relative;
}
.breadcrumb .breadcrumb-item br {
    display: none;
}
.breadcrumb .breadcrumb-item:not(:last-child):after {
    content: "";
    position: absolute;
    top: 50%;
    right: -12px;
    transform: translateY(-50%) rotate(45deg);
    width: 5px;
    height: 5px;
    border-top: 1px solid var(--color-line);
    border-right: 1px solid var(--color-line);
}
.breadcrumb .breadcrumb-item a {
    font-size: clamp(11px, 0.78vw, calc(11px * var(--ratio)));
    font-weight: 400;
    line-height: 2.72;
    letter-spacing: 0.05em;
    color: var(--color-line);
}
.breadcrumb .breadcrumb-item span {
    line-height: 2.72;
}
@media screen and (max-width: 700px) {
    .breadcrumb {
        padding: 15px 20px 40px;
    }
    .breadcrumb .breadcrumb-item {
        display: flex;
        align-items: center;
        line-height: 1;
    }
    .breadcrumb .breadcrumb-item a {
        line-height: 1.72;
        letter-spacing: 0;
    }
    .breadcrumb .breadcrumb-item span {
        line-height: 1.72;
    }
}

/* パンくず フッター用 */
.breadcrumb.footer {
    padding: 0px 40px 20px;
}
@media screen and (max-width: 700px) {
    .breadcrumb.footer {
        padding: 0px 20px 15px;
    }
}
/* ---------- 
クッキー_共通CSS
----------*/
#cookie-notice{
    position: fixed;
    z-index: 1010;
    background-color: var(--color-text-sub);
    border: 1px solid var(--color-text);
    bottom: 30px;
    left: 50%;
    right: auto;
    min-width: 95.71%;
    margin: 0;
    transform: translateX(-50%);
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
}

#cookie-notice .cookie-notice-container{
    text-align: left;
    padding: clamp(25px, 1.78vw, calc(25px * var(--ratio)));
    display: flex;
    align-items: center;
    gap: 20px;
}

#cookie-notice .cookie-text-wrap{
    width: 72.5%;
}

#cookie-notice .cookie-text-wrap .cookie-text{
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: calc(30/16);
}

#cookie-notice .cookie-text-wrap .cookie-text .link-text{
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
}

#cookie-notice .cookie-button-wrap{
    width: 24.6%;
 }
 

#cookie-notice .cookie-button{
    color: var(--color-text-sub);
    background-color: var(--color-text);
    border-radius: 2rem;
    text-align: center;
    text-transform: none;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    padding: 14px 0;
    font-size: clamp(15px, 1.07vw, calc(15px * var(--ratio)));
    font-weight: 500;
    font-family: "Noto Sans JP", sans-serif;
    width: 100%;
}


/*バツボタン*/
#cookie-notice .cookie-close-wrap{
    right: 10px;
    top: 20px;
    position: absolute;
    margin: -10px 0 0 0;
    width: 15px;
    height: 15px;
    opacity: 0.5;
    padding: 10px;
    border: none;
    outline: 0;
    background: 0 0;
    box-shadow: none;
    cursor: pointer;
}

#cookie-notice .cookie-close-button::before, #cookie-notice .cookie-close-button::after{
    position: absolute;
    content: ' ';
    height: 15px;
    width: 2px;
    top: 3px;
    background-color: var(--color-text);
}
#cookie-notice .cookie-close-button::before{
    transform: rotate(45deg);
}
#cookie-notice .cookie-close-button::after{
    transform: rotate(-45deg);
}

@media screen and (min-width: 701px) {
    #cookie-notice .cookie-button-wrap:hover .cookie-button{
        background: linear-gradient(to right, var(--color-link_009BDA), var(--color-banner_004E6D)) !important;
        color: var(--color-text-sub)
    }

    #cookie-notice .cookie-close-button:hover::before, #cookie-notice .cookie-close-button:hover::after{
        opacity: 1;
    }
}

@media screen and (max-width: 700px) {
    #cookie-notice{
        min-width: 84%;
    }

    #cookie-notice .cookie-notice-container{
        flex-direction: column;
    }

    #cookie-notice .cookie-text-wrap, #cookie-notice .cookie-button-wrap{
        width: 100%;
    }

    #cookie-notice .cookie-text-wrap .cookie-text, #cookie-notice .cookie-text-wrap .cookie-text .link-text{
        font-size: calc(12px / var(--fs-base) * 1rem);
    }

    #cookie-notice .cookie-button{
        font-size: calc(12px / var(--fs-base) * 1rem);
    }
}



/* 共通パーツ：ページタイトルA Unna 90px*/
.page-title-a {
    display: flex;
    flex-direction: column;
    margin-bottom: 125px;
}
.page-title-a .page-title-en {
    font-size: clamp(90px, 6.42vw, calc(90px * var(--ratio)));
    font-family: "Unna", serif;
    font-weight: 400;
    line-height: 1.16;
}
.page-title-a .page-title-ja {
    font-size: clamp(14px, 1vw, calc(14px * var(--ratio)));
    font-weight: 500;
    letter-spacing: 0.05em;
}
.en .page-title-a .page-title-ja {
    display: none;
}
@media screen and (max-width: 700px) {
    .page-title-a {
        margin-bottom: 80px;
    }
    .page-title-a .page-title-en {
        font-size: calc(60px / var(--fs-base) * 1rem);
    }
    .page-title-a .page-title-ja {
        font-size: calc(14px / var(--fs-base) * 1rem);
    }
}

/* 共通パーツ：ページタイトルB Noto 44px*/
.page-title-b {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 80px;
}
.page-title-b .page-title-ja {
    font-size: clamp(44px, 3.14vw, calc(44px * var(--ratio)));
    font-weight: 500;
}
.page-title-b .page-title-en {
    font-size: clamp(14px, 1vw, calc(14px * var(--ratio)));
    font-family: "Inter", sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
}
.en .page-title-b .page-title-en {
    display: none;
}
@media screen and (max-width: 700px) {
    .page-title-b {
        margin-bottom: 60px;
        text-wrap: wrap;
    }
    .page-title-b .page-title-ja {
        font-size: calc(32px / var(--fs-base) * 1rem);
        line-height: 1.3125;
    }
    .page-title-b .page-title-en {
        font-size: calc(12px / var(--fs-base) * 1rem);
    }
}

/* 共通パーツ：ページタイトルC Noto 28px*/
.page-title-c {
    font-size: clamp(28px, 2vw, calc(28px * var(--ratio)));
    font-weight: 500;
    line-height: 1.64;
}
@media screen and (max-width: 700px) {
    .page-title-c {
        font-size: calc(24px / var(--fs-base) * 1rem);
        line-height: 1.58;
    }
}

/* 共通パーツ：見出しA Unna 55px*/
.sec-title-a {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}
.sec-title-a .title-en {
    font-size: clamp(55px, 3.92vw, calc(55px * var(--ratio)));
    font-family: "Unna", serif;
    font-weight: 400;
    line-height: 1.16;
}
.sec-title-a .title-ja {
    font-size: clamp(14px, 1vw, calc(14px * var(--ratio)));
    font-weight: 500;
    letter-spacing: 0.05em;
}
.en .sec-title-a .title-ja {
    display: none;
}
@media screen and (max-width: 700px) {
    .sec-title-a {
        margin-bottom: 30px;
    }
    .sec-title-a .title-en {
        font-size: calc(38px / var(--fs-base) * 1rem);
    }
    .sec-title-a .title-ja {
        font-size: calc(12px / var(--fs-base) * 1rem);
    }
}

/* 共通パーツ：見出しB Noto 32px*/
.sec-title-b {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}
.sec-title-b .title-ja {
    margin-bottom: 4px;
    font-size: clamp(32px, 2.28vw, calc(32px * var(--ratio)));
    font-weight: 500;
}
.sec-title-b .title-en {
    font-size: clamp(14px, 1vw, calc(14px * var(--ratio)));
    font-family: "Inter", sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
}
.en .sec-title-b .title-en {
    display: none;
}
@media screen and (max-width: 700px) {
    .sec-title-b {
        margin-bottom: 30px;
    }
    .sec-title-b .title-ja {
        font-size: calc(24px / var(--fs-base) * 1rem);
    }
    .sec-title-b .title-en {
        font-size: calc(12px / var(--fs-base) * 1rem);
    }
}

/* 共通パーツ：見出し3（共通見出し）A Noto 24px */
.common-title-a {
    position: relative;
    font-size: clamp(18px, 1.28vw, calc(18px * var(--ratio)));
    font-weight: 500;
    margin-bottom: 40px;
    padding-bottom: 9px;
    padding-left: 30px;
    border-bottom: 1px solid var(--color-text);
    letter-spacing: 0.05em;
    line-height: 1.77;
}
.common-title-a:before {
    content: "";
    position: absolute;
    top: 5%;
    left: 0;
    width: 10px;
    height: 95%;
    background: var(--color-text);
}
@media screen and (max-width: 700px) {
    .common-title-a {
        margin-bottom: 30px;
        padding-bottom: 7px;
        padding-left: 27px;
        font-size: calc(17px / var(--fs-base) * 1rem);
        letter-spacing: 0;
        line-height: 1.64;
    }
    .common-title-a:before {
        width: 7px;
    }
}

/* 共通パーツ：見出し5（共通見出し）A Noto 24px */
.common-title-b {
    position: relative;
    font-size: clamp(24px, 1.71vw, calc(24px * var(--ratio)));
    font-weight: 500;
    margin-top: 80px;
    margin-bottom: 40px;
    padding: 18px 20px 18px 30px;
    background-color: var(--color-text);
    color: var(--color-text-sub);
    letter-spacing: 0.05em;
    line-height: 1.66;
    word-break: keep-all;
}
.common-title-b:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--color-text-sub);
}
@media screen and (max-width: 700px) {
    .common-title-b {
        margin-top: 60px;
        margin-bottom: 30px;
        padding: 15px 20px 15px 27px;
        font-size: calc(20px / var(--fs-base) * 1rem);
        letter-spacing: 0;
        line-height: 1.5;
    }
    .common-title-b:before {
        width: 7px;
        height: 7px;
    }
}

.single-title-sub{
    font-size: clamp(18px, 1.28vw, calc(18px * var(--ratio)));
    font-weight: 500;
    line-height: calc(32/18);
    margin-top: 15px;
}

@media screen and (max-width: 700px) {
    .single-title-sub{
        font-size: calc(17px / var(--fs-base) * 1rem);
        line-height: calc(28/17);
    }
}


/* 共通パーツ：見出し4（アイコン付き共通見出し）A Noto 20px */
.icon-title{
    position: relative;
    font-size: clamp(18px, 1.28vw, calc(18px * var(--ratio)));
    line-height: calc(32/18);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 30px;
    padding-left: 20px;
}
.icon-title:before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--color-link_009BDA);
}
@media screen and (max-width: 700px) {
    .icon-title{
        font-size: calc(17px / var(--fs-base) * 1rem);
        line-height: calc(28/17);
        padding-left: 17px;
    }
    .icon-title:before{
        width: calc(7px / var(--fs-base) * 1rem);
        height: calc(7px / var(--fs-base) * 1rem);
    }
}

/* ホバーアニメーションボタン 
<div class="btn-wrap">
    <a class="btn-hover-grad btn-hover-grad-white" href=""></a>
    <a class="btn-hover-grad btn-hover-grad-right" href=""></a>
</div>
*/
.btn-wrap {
    text-align: center;
}
.btn-hover-grad {
    position: relative;
    display: inline-block;
    width: clamp(330px, 23.6vw, calc(330px * var(--ratio)));
    padding: 16px 15px 17px;
    background: var(--color-text);
    border-radius: 24px;
    font-size: clamp(15px, 1.07vw, calc(15px * var(--ratio)));
    color: var(--color-text-sub);
}
.btn-hover-grad-white {
    background: var(--color-text-sub);
    color: var(--color-text);
}
.btn-wrap.governance-btn .btn-hover-grad,
.btn-hover-grad.btn-governance {
    padding: 20px 15px;
    background: var(--color-sub);
    color: var(--color-text);
    border-radius: 43px;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
.btn-hover-grad:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 30px;
    width: 8.5px;
    height: 8.5px;
    border-top: 1px solid var(--color-text-sub);
    border-right: 1px solid var(--color-text-sub);
    transform: translateY(-50%) rotate(45deg);
}
.btn-hover-grad-white:after {
    border-top: 1px solid var(--color-text);
    border-right: 1px solid var(--color-text);
}
.btn-hover-grad-right:after {
    left: auto;
    right: 30px;
    transform: translateY(-50%) rotate(225deg);
}
.btn-wrap.governance-btn .btn-hover-grad:after,
.btn-hover-grad.btn-governance:after {
    right: 26px;
    left: auto;
    width: 15px;
    height: 16px;
    border: none;
    background: url(../../images/common/icon_external-link-black.svg) no-repeat;
    background-size: contain;
    transform: translateY(-50%);
}
.btn-wrap.governance-btn .btn-hover-grad[href$=".pdf"]:after,
.btn-hover-grad.btn-governance[href$=".pdf"]:after {
    background: url(../../images/common/icon-pdf-black.svg) no-repeat;
    background-size: contain;
}
.btn-wrap.governance-btn .btn-hover-grad small,
.btn-hover-grad.btn-governance small {
    font-size: clamp(15px, 1.07vw, calc(15px * var(--ratio)));
}
@media screen and (min-width: 701px) {
    .btn-hover-grad:hover,
    .btn-hover-grad-white:hover,
    .btn-hover-grad-right:hover,
    .btn-wrap.governance-btn .btn-hover-grad:hover,
    .btn-hover-grad.btn-governance:hover {
        background: linear-gradient(to right, #009BDA , #004E6D);
        color: var(--color-text-sub);
    }
    .btn-hover-grad:hover:after,
    .btn-hover-grad-white:hover:after {
        border-color: var(--color-text-sub);
        animation: moveBtnArrowToRight 0.6s ease-out forwards;
    }
    .btn-hover-grad-right:hover:after {
        border-color: var(--color-text-sub);
        animation: moveBtnArrowToLeft 0.6s ease-out forwards;
    }
    .btn-wrap.governance-btn .btn-hover-grad:hover:after,
    .btn-hover-grad.btn-governance:hover:after {
        animation: none;
        background: url(../../images/common/icon_external-link-white.svg) no-repeat;
    }
    .btn-wrap.governance-btn .btn-hover-grad[href$=".pdf"]:hover:after,
    .btn-hover-grad.btn-governance[href$=".pdf"]:hover:after {
        animation: none;
        background: url(../../images/common/icon-pdf-white.svg) no-repeat;
    }
    @keyframes moveBtnArrowToRight {
        from {
            left: 30px;
        }
        to {
            left: calc(100% - 38.5px);
        }
    }
    @keyframes moveBtnArrowToLeft {
        from {
            right: 30px;
        }
        to {
            right: calc(100% - 38.5px);
        }
    }
}
@media screen and (max-width: 700px) {
    .btn-hover-grad {
        width: 255px;
        padding: 14px 0;
        border-radius: 20px;
        font-size: calc(12px / var(--fs-base) * 1rem);
    }
    .btn-wrap.governance-btn .btn-hover-grad,
    .btn-hover-grad.btn-governance {
        padding: 9px 0;
    }
    .btn-hover-grad:after {
        left: auto;
        right: 20px;
        transform: translateY(-50%) rotate(45deg);
    }
    .btn-hover-grad-right:after {
        left: 20px;
        right: auto;
        transform: translateY(-50%) rotate(225deg);
    }
    .btn-wrap.governance-btn .btn-hover-grad:after,
    .btn-hover-grad.btn-governance:after {
        width: 14px;
        height: 15px;
        right: 20px;
    }
    .btn-wrap.governance-btn .btn-hover-grad small,
    .btn-hover-grad.btn-governance small {
        font-size: calc(12px / var(--fs-base) * 1rem);
    }
}


/* ホバーアニメーションリンク
<a class="link-hover-line" href=""></a>
*/
.link-hover-line {
    font-size: clamp(12px, 0.86vw, calc(12px * var(--ratio)));
    font-weight: 400;
    color: #009BDA;
}
.link-hover-line {
    position: relative;
    text-decoration: none;
}
@media screen and (min-width: 701px) {
    .link-hover-line {
        text-decoration: none;
        background-image: linear-gradient(#009BDA, #009BDA);
        background-size: 100% 1px;
        background-position: right bottom;
        background-repeat: no-repeat;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        /*下線非表示の速度*/
        transition: background-size 0.5s ease;
    }
    .link-hover-line:hover {
        background-size: 0% 1px;
        /*下線再表示の速度*/
        animation: linkHoverLineUnderline 0.3s ease forwards;
        /*下線再表示までの遅延*/
        animation-delay: 0.3s;
    }
    @keyframes linkHoverLineUnderline {
        0% {
            background-size: 0% 1px;
            background-position: left bottom;
            background-image: linear-gradient(#009BDA, #009BDA);
        }
        100% {
            background-size: 100% 1px;
            background-position: left bottom;
            background-image: linear-gradient(#009BDA, #009BDA);
        }
    }
}
@media screen and (max-width: 700px) {
    .link-hover-line {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* ホバーアニメーションリンク_共通使用(下線なしVer)
<a class="link-text" href=""></a>
*/
.link-text {
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    font-weight: 400;
    color: var(--color-link_009BDA);
    letter-spacing: 0.05em;
    background-image: linear-gradient(var(--color-link_009BDA), var(--color-link_009BDA));
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-out;
}
.link-text[target="_blank"] {
    display: inline;
    padding-right: 1.4em;
    margin-right: 0.5em;
    background-image:
        linear-gradient(var(--color-link_009BDA), var(--color-link_009BDA)),
        url(../../images/common/icon_external-link.svg);
    background-size: 0% 1px, 1em 1em;
    background-position: left bottom, right center;
}
.link-text[href$=".pdf"] {
    display: inline;
    padding-right: 1.4em;
    margin-right: 0.5em;
    background-image:
        linear-gradient(var(--color-link_009BDA), var(--color-link_009BDA)),
        url(../../images/common/icon-pdf.svg);
    background-size: 0% 1px, 1em 1em;
    background-position: left bottom, right center;
}
@media screen and (min-width: 701px) {
    .link-text:hover {
        background-size: 100% 1px;
    }
    .link-text[target="_blank"]:hover {
        background-size: calc(100% - 1.4em) 1px, 1em 1em;
    }
    .link-text[href$=".pdf"]:hover {
        background-size: calc(100% - 1.4em) 1px, 1em 1em;
    }
}
@media screen and (max-width: 700px) {
    .link-text {
        background-size: 100% 1px;
        transition: none;
    }
    .link-text[target="_blank"] {
        background-size: calc(100% - 1.4em) 1px, 1em 1em;
    }
    .link-text[href$=".pdf"] {
        background-size: calc(100% - 1.4em) 1px, 1em 1em;
    }
}

/*　
ヘッダー、フッター共通適応用 下線のアニメーション
*/
#corp-header ul.nav-list a,#corp-footer a {
    position: relative;
    display: inline;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease;
}

#corp-header ul.nav-list a[target="_blank"]{
    display: inline;
    padding-right: 1.4em;
    margin-right: 0.5em;
    background-image:
        linear-gradient(var(--color-text-sub), var(--color-text-sub)),
        url(../../images/common/icon_external-link-white.svg);
    background-size: 0% 1px, 1em 1em;
    background-position: left bottom, right center;
}

#corp-footer a[target="_blank"] {
    display: inline;
    padding-right: 1.4em;
    margin-right: 0.5em;
    background-image:
        linear-gradient(var(--color-text), var(--color-text)),
        url(../../images/common/icon_external-link-black.svg);
    background-size: 0% 1px, 1em 1em;
    background-position: left bottom, right center;
}

    /* ホバー時に右へ伸びる */
@media screen and (min-width: 1111px) {
    #corp-header ul.nav-list a:hover,#corp-footer a:hover  {
        background-size: 100% 1px;
    }

    #corp-header ul.nav-list a[target="_blank"]:hover,
    #corp-footer a[target="_blank"]:hover {
        background-size: calc(100% - 1.4em) 1px, 1em 1em;
    }
}

/* お問い合わせ */
.contact {
    margin-bottom: 60px;
    padding: 40px;
    background: var(--color-sub);
}
.contact h4 {
    position: relative;
    margin-bottom: 20px;
    padding-left: 20px;
    font-size: clamp(14px, 1vw, calc(14px * var(--ratio)));
    font-weight: 500;
    letter-spacing: 0.05em;
}
.contact h4:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
    background-color: var(--color-link_009BDA);
}
.contact h5 {
    margin-bottom: 16px;
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    font-weight: bold;
    letter-spacing: 0.05em;
}
.contact p {
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 2.125;
}
.contact .link-hover-line {
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
}
@media screen and (max-width: 700px) {
    .contact {
        margin-bottom: 40px;
        padding: 30px;
    }
    .contact h4 {
        margin-bottom: 8px;
        padding-left: 17px;
        font-size: calc(14px / var(--fs-base) * 1rem);
    }
    .contact h4:before {
        width: 7px;
        height: 7px;
    }
    .contact h5 {
        margin-bottom: 6px;
        font-size: calc(15px / var(--fs-base) * 1rem);
    }
    .contact p {
        font-size: calc(15px / var(--fs-base) * 1rem);
        line-height: 2;
    }
    .contact .link-hover-line {
        font-size: calc(15px / var(--fs-base) * 1rem);
    }
}


/* 関連リンク */
.related-links {
    margin-bottom: 80px;
}
.related-links h4 {
    position: relative;
    margin-bottom: 30px;
    padding-left: 20px;
    font-size: clamp(18px, 1.28vw, calc(14px * var(--ratio)));
    font-weight: 500;
    letter-spacing: 0.05em;
}
.related-links h4:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    transform: translateY(-50%);
    background-color: var(--color-link_009BDA);
}
.related-links ul li a {
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    font-weight: 400;
    color: var(--color-link_009BDA);
    letter-spacing: 0.05em;
    line-height: 2.125;
}
@media screen and (max-width: 700px) {
    .related-links {
        margin-bottom: 60px;
    }
    .related-links h4 {
        margin-bottom: 20px;
        padding-left: 17px;
        font-size: calc(17px / var(--fs-base) * 1rem);
    }
    .related-links h4:before {
        width: 7px;
        height: 7px;
    }
    .related-links ul li a {
        font-size: calc(15px / var(--fs-base) * 1rem);
        line-height: 2;
    }
}

/* PDFリンク */
.pdf-link{
    position: relative;
}

.pdf-link::after{
    content: "";
    position: absolute;
    background-image: url(../../images/common/icon-pdf.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 15px;
    height: 16px;
    top: 0.24em;
    margin-left: 5px;
}

.pdf-link .link-text[target="_blank"] {
    background-image: none;
    padding-right: 0;
    margin-right: 0;
}

/* snsシェア */
.sns-share {
    display: flex;
    gap: 20px;
    margin-bottom: 80px;
}
@media screen and (max-width: 700px) {
    .sns-share {
        margin-bottom: 60px;
    }
}

/* 引用*/
blockquote{
    padding: 20px;
    background-color: var(--color-E1F8FE);
}


/* リスト（ドット） */
ul.list-dot li {
    position: relative;
    margin-left: 20px;
}
ul.list-dot li::before {
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--color-link_009BDA);
    border-radius: 50%;
    top: 0.5em;
    left: -20px;
}
ul.list-dot li > ul li::before {
    background-color: unset;
    border: 1px solid var(--color-link_009BDA);
}
ul.list-dot li > ul li > ul li::before {
    content: "・";
    top: 0;
    border: unset;
    color: var(--color-link_009BDA);
}


/* ---------- 
採用系ページ設置用
----------*/
/*採用系ページ_三角形背景*/
.careers-page::before{
    content: "";
    position: absolute;
    top: 100px;
    left: 0;
    z-index: -10;
    width: clamp(530px, 37.895vw, 530px);
    height: clamp(234px, 16.714vw, 234px);
    background: var(--color-F7F7F7);
    clip-path: polygon(0 0, 100% 0, 0 100%);

}

@media screen and (max-width: 1110px){
    .careers-page::before{
        top: 60px;
    }
}

@media screen and (max-width: 700px) {
    .careers-page::before{
        max-width: 280px;
        width: 74.67%;
        height: 124px;
    }
}

/* 採用系ページ_共通パーツ：ページタイトルA */
.careers-page .page-title-a{
    color: var(--color-corp);
}

@media screen and (max-width: 700px) {
.careers-page .page-title-a .page-title-en{
    font-size: calc(55px / var(--fs-base) * 1rem);
    }
}

/* 採用系ページ_共通パーツ：ページタイトル上の楕円形カテゴリタイトル */
.careers-page .category-title{
    display: inline-block;
    font-size: clamp(12px, 0.86vw, calc(12px * var(--ratio)));
    font-weight: 500;
    border-radius: 23px;
    color: var(--color-corp);
    border: 1px solid var(--color-corp);
    padding: 2px 15px;
}
@media screen and (max-width: 700px) {
    .careers-page .category-title{
        font-size: calc(12px / var(--fs-base) * 1rem);
    }
}
/* 採用系ページ_共通パーツ：ページタイトルB */
.careers-page .page-title-b{
    color: var(--color-corp);
}

/* 採用系ページ_共通パーツ：見出しA*/
.careers-page .sec-title-a{
    color: var(--color-corp);
}
/* 採用系ページ_共通パーツ：見出しB*/
.careers-page .sec-title-b{
    color: var(--color-corp);
}

/* 採用系ページ_共通パーツ：見出し3（共通見出し）A Noto 24px */
.careers-page .common-title-a{
    color: var(--color-corp);
    border-bottom: 1px solid var(--color-corp);
}
.careers-page .common-title-a:before {
    background: var(--color-corp);
}

/* 採用系ページ_共通パーツ：見出し5（共通見出し）A Noto 24px */
.careers-page .common-title-b{
    color: var(--color-corp);
    background-color: var(--color-sub);
}

.careers-page .common-title-b:before {
    background: var(--color-corp);
}

@media screen and (max-width: 700px) {
    .careers-page .common-title-b{
        padding-right: 15px;
    }
}

/* 採用系ページ_共通パーツ：見出し5_青背景Ver（共通見出し）A Noto 24px */
.careers-page .common-title-b.blue-title{
    background-color: var(--color-corp);
    color:var(--color-text-sub);
}

.careers-page .common-title-b.blue-title:before{
    background: var(--color-text-sub);
}

/* リンク上タイトル */
.careers-page .related-links h4{
    color: var(--color-corp);
}

.careers-page .related-links h4:before{
    background: var(--color-corp);
}

/* slide-title_スライダー上タイトル */
.careers-page .slide-title{
    margin-bottom: 24.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.careers-page .slide-title h4{
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: calc(25/16);
    color: var(--color-corp);
    white-space: nowrap;
    flex-shrink: 0;
}

.careers-page .slide-title hr{
    flex: 1;
    height: 1px;
    background: var(--color-corp);
    border: none;
    margin: 0;
}


/* ---------- 
career-banner　採用系ページ設置用_追従バナー
----------*/
.career-banner {
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 25px 30px;
    background: var(--color-banner_C2F1FD);
    border-radius: 40px 40px 0 40px;
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.career-banner .career-arrow {
    position: relative;
    padding-left: 26px;
}

.career-banner .career-arrow::before{
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%; 
    background: #FFC107;
}

.career-banner .career-arrow::after {
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 10px;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--color-text-sub);
    border-right: 1px solid var(--color-text-sub);
    transform: rotate(45deg);
}

.career-banner:hover .career-arrow::before{
    background: var(--color-corp);
}

.career-banner p {
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    font-weight: 500;
    color: var(--color-corp);
    white-space: nowrap;
    margin: 0;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 700px) {
    .career-banner{
        padding: 15px 20px 15px 15px;
    }
    .career-banner .career-arrow {
        padding-left: 26px;
    }
    .career-banner p {
        font-size: calc(12px / var(--fs-base) * 1rem);
        line-height: calc(20/12);
    }
}

/* ---------- 
採用系ページ_絞り込み検索(JSも必要_interviewlist.jsを参考に。)
----------*/
.filter-wrap {
    margin-top: 60px;
}
.filter-title {
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    letter-spacing: 0.05em;
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 15px;
}
.filter-content-wrap{
    border: 1px solid var(--color-line);
    padding: 40px;
    margin-bottom: 60px;
}
.filter-inner {
    display: flex;
    gap: 40px;
}
.filter-section {
    flex: 1;
}
.filter-category {
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--color-text);
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--color-line);
}
.filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;
}
.filter-item {
    flex: 0 0 auto;
    max-width: 100%;
}
.filter-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s;
}
.filter-text {
    overflow-wrap: break-word;
    min-width: 0;
}

/*チェックボックス*/
.filter-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-right: 5px;
    cursor: pointer;
    border: 1px solid var(--color-link_009BDA);
    background-color: #FFFFFF;
    position: relative;
    transition: all 0.3s;
}
.filter-checkbox:checked {
    background-color: var(--color-link_009BDA);
    border-color: var(--color-link_009BDA);
}
.filter-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 1.5px 1.5px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.filter-text {
    font-size: clamp(12px, 0.83vw, calc(12px * var(--ratio)));
    color: var(--color-text);
    user-select: none;
}
.filter-checkbox:checked ~ .filter-text {
    font-weight: bold;
}
.filter-action {
    margin-top: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.filter-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(220px, 15.63vw, calc(220px * var(--ratio)));
    gap: 10px;
    padding: 13px 0;
    background: var(--color-text);
    color: var(--color-text-sub);
    font-size: clamp(15px, 1.07vw, calc(15px * var(--ratio)));
    font-weight: 500;
    border: none;
    border-radius: 30px;
    cursor: pointer;
}
.filter-search-btn:hover {
    background: linear-gradient(to right, #009BDA, #004E6D);
}
.filter-search-icon {
    display: inline-block;
    width: clamp(14px, 1vw, calc(14px * var(--ratio)));
    height: clamp(14px, 1vw, calc(14px * var(--ratio)));
    background-image: url('../../images/common/icon-search.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
.filter-toggle-label {
    position: absolute;
    left: calc(50% + clamp(110px, 7.81vw, calc(110px * var(--ratio))));
    padding-left: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s;
}
.filter-toggle-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid var(--color-link_009BDA);
    background-color: #FFFFFF;
    position: relative;
    transition: all 0.3s;
}
.filter-toggle-checkbox:checked {
    background-color: var(--color-link_009BDA);
    border-color: var(--color-link_009BDA);
}
.filter-toggle-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 8px;
    border: solid var( --color-text-sub);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.filter-toggle-checkbox:indeterminate {
    background-color: var(--color-link_009BDA);
    border-color: var(--color-link_009BDA);
}
.filter-toggle-checkbox:indeterminate::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 2px;
    background-color: white;
    transform: translate(-50%, -50%);
    border: none;
}
.filter-toggle-text {
    font-size: 14px;
    color: var(--color-text);
    user-select: none;
}
.filter-toggle-checkbox:checked ~ .filter-toggle-text,
.filter-toggle-checkbox:indeterminate ~ .filter-toggle-text {
    font-weight: bold;
}

/* 検索結果 */
.search-result {
    display: none;
    margin-bottom: 80px;
}
.search-result.show {
    display: block;
}
.search-result-text {
    font-size: clamp(16px, 1.14vw, calc(16px * var(--ratio)));
    color: var(--color-text);
    font-weight: bold;
    letter-spacing: 0.05em;
}
.search-result-count {
    font-weight: bold;
}

/* タブレット・スマホ対応 */
@media screen and (max-width: 700px) {
    .filter-wrap {
        margin-top: 40px;
    }
    .filter-title {
        font-size: calc(15px / var(--fs-base) * 1rem);
        margin-bottom: 20px;
    }
    .filter-content-wrap{
        padding: 30px;
    }
    .filter-inner {
        flex-direction: column;
        gap: 30px;
    }
    .filter-category {
        font-size: clamp(15px, 1.07vw, calc(15px * var(--ratio)));
        padding-bottom: 15px;
        margin-bottom: 30px;
    }
    .filter-list {
        gap: 15px 30px;
    }
    .filter-text {
        font-size: clamp(12px, 0.83vw, calc(12px * var(--ratio)));
    }
    .filter-action {
        flex-direction: column;
        gap: 25px;
    }
    .filter-search-btn {
        width: 100%;
        padding: 12px 0px;
        font-size: calc(12px / var(--fs-base) * 1rem);
    }
    .filter-toggle-label{
        position: relative;
        left: initial;
        padding-left: 0;
    }
    .filter-toggle-text{
        font-size: calc(13px / var(--fs-base) * 1rem);
    }
}


/* ---------- 
プロジェクト事例共通部分
----------*/
.project-item {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    cursor: pointer;
    width: clamp(326px, 23.286vw, calc(326px * var(--ratio)));
}
.project-img {
    display: block;
}
.project-img img {     
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
}
.project-content {
    height: clamp(295px, 21.071vw, calc(295px * var(--ratio)));
    width: 100%;
    padding: 30px;
    padding-top: clamp(30px, 2.143vw, calc(30px * var(--ratio)));
    background: var(--color-sub);
    box-sizing: border-box;
}
.project-title{
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    text-overflow: clip;
    overflow: hidden;
}
.project-title a {
    font-size: clamp(16px, 1.143vw, calc(16px * var(--ratio)));
    font-weight: 500;
    line-height: calc(30/16);
    color: var(--color-text);
    background-image: linear-gradient(var(--color-text), var(--color-text));
}
.project-title .link-text[target="_blank"] {
    background-image:
        linear-gradient(var(--color-text), var(--color-text)),
        url(../../images/common/icon_external-link-black.svg);
    background-size: 0% 1px, 1em 1em;
    background-position: left bottom, right center;
}
.project-client {
    margin-bottom: 20px;
    font-size: clamp(12px, 0.857vw, calc(12px * var(--ratio)));
    height: 2.2em;
    overflow: hidden;
    text-overflow: clip;
}
.project-client span {
    font-family: "Inter", sans-serif;
    font-size: clamp(14px, 1.0vw, calc(14px * var(--ratio)));
    font-weight: 400;
}

/* 複数リンク：flex だと各 a が行単位になりやすいのでインライン流し＋末尾 margin で間隔 */
.project-link-wrap {
    display: block;
    font-size: clamp(12px, 0.86vw, calc(12px * var(--ratio)));
    line-height: 1.83;
    max-height: calc(1em * 1.83 * 3);
    overflow: hidden;
    text-overflow: clip;
}
.project-link-wrap a:not(:last-child) {
    margin-right: 10px;
}
.project-link-wrap .link-hover-line {
    line-height: 1.83;
}
@media screen and (min-width: 701px) {
    .project-item:hover .project-img{
        filter:  brightness(0.85);
    }
    .project-item:hover .project-title .link-text {
        background-size: 100% 1px;
    }
    .project-item:hover .project-title .link-text[target="_blank"] {
        background-size: calc(100% - 1.4em) 1px, 1em 1em;
    }
}
@media screen and (max-width: 700px) {
    .project-content {
        height: 294px;
    }
    .project-title {
        margin-bottom: 5px;
        font-size: calc(16px / var(--fs-base) * 1rem);
    }
    .project-title .link-text[target="_blank"] {
        background-size: calc(100% - 1.4em) 1px, 1em 1em;
    }
    .project-client {
        font-size: calc(12px / var(--fs-base) * 1rem);
    }
    .project-client span {
        font-size: calc(14px / var(--fs-base) * 1rem);
    }
    .project-link-wrap {
        row-gap: 15px;
    }
    .project-link-wrap a:not(:last-child) {
        margin-right: 5px;
    }
}


/* ---------- 
コラム共通部分
----------*/
.column div.column-item {
    line-height: 1;
}
.column .column-item[target="_blank"] .column-text .line {
    display: inline;
    padding-right: 1.4em;
    margin-right: 0.5em;
    background-image: linear-gradient(var(--color-text-sub), var(--color-text-sub)), url(../../../images/common/icon_external-link-white.svg);
    background-size: 0% 1px, 1em 1em;
    background-position: left bottom, right center;
}
.column .column-item[target="_blank"] .column-text .line.animate {
    background-size: calc(100% - 1.4em) 1px, 1em 1em;
}
@media screen and (max-width: 700px) {
    .column .column-item[target="_blank"] .column-text .line {
        background-size: calc(100% - 1.4em) 1px, 1em 1em !important;
        transition: none !important;
    }
}