@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/*----------------------------------------
全体設定
------------------------------------------*/
html {
    overflow-y: scroll;
}

body {
    font-family: "Noto Sans", sans-serif;
    font-weight: normal;
    font-size: clamp(16px, 18/1280*100vw, 18px);
    letter-spacing: 0;
    /* line-height: calc(27/19); */
    max-width: 100%;
    /* background-image: url(../images/);
    background-repeat: no-repeat; */
    overflow-x: hidden;
    overflow-y: hidden;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

img {
    height: auto;
    width: 100%;
    vertical-align: middle;
}

body,
a,
p,
ul li,
h1,
h2,
h3,
h4,
h5 {
    color: var(--black);
}

a {
    text-decoration: none;
    font-size: clamp(16px, 18/1280*100vw, 18px);
}

a img {
    display: block;
}

p {
    font-size: clamp(16px, 18/1280*100vw, 18px);
    line-height: 1.8;
    margin: 0.3em 0;
}

ul li {
    list-style: none;
}

h1 {
    font-size: clamp(22px, 24/1280*100vw, 24px);
    background: linear-gradient(90deg, #174698 45%, #113e99ca 10%, #00C7A3ca 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, var(--white), var(--gray-40), var(--white)) 1;
    width: 100%;
    padding: 1em 0;
    margin: 2em 0 1.5em;
    text-align: center;
}

h2 {
    color: var(--primary);
    font-size: clamp(18px, 21/1280*100vw, 21px);
    background: var(--white);
    font-weight: 600;
    width: 100%;
    margin: 1em 0;
    padding: 0.4em 0.5em;
    border-left: 5px solid;
    border-image: linear-gradient(180deg, #113e99ca 30%, #00C7A3ca 100%) 1 !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

h3 {
    font-size: clamp(18px, 21/1280*100vw, 21px);
    background: linear-gradient(90deg, #174698 10%, #113e99ca 20%, #00C7A3ca 80%);
    /* background: linear-gradient(90deg, #174698 10%, #113e99ca 15%, #00C7A3ca 50%); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    padding: 0.3em 0;
}

h4 {
    font-size: clamp(18px, 20/1280*100vw, 20px);
    font-weight: bold;
    color: var(--primary);
    padding: 0.5em 0;
}

.content_wrap_outer,
.content_wrap {
    width: 100%;
    max-width: 1200px;
    padding: 0 min(60 / 1280* 100vw, 60px);
    margin: 0 auto;
}

/*----------------------------------------
ボタン
------------------------------------------*/
button {
    margin: 0.5em 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* グラデーションボタン */
.gradation-button {
    background: linear-gradient(90deg, #174698 3%, #113e99ca 30%, #00C7A3ca 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border: 1px solid;
    border-image: linear-gradient(90deg, #174698 3%, #113e99ca 30%, #00C7A3ca 100%) 1;
    width: fit-content;
    height: min(63 / 1280* 100vw, 63px) !important;
    margin: 0.5em 0;
    padding: 0 2em;
    text-align: center;
}

.drawer__nav__item .gradation-button {
    height: min(45 / 1280* 100vw, 45px);
    padding: 0 0.7em;
}

.gradation-button:hover {
    background: linear-gradient(90deg, #174698 3%, #113e99ca 30%, #00C7A3ca 100%);
    -webkit-text-fill-color: #fff;
}

.gradation-button:hover a {
    background: var(--white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* グラデーションボタン：外部リンク */
.external {
    display: flex;
    justify-content: center;
    align-items: center;
}

.external img {
    width: clamp(20px, 24/1280*100vw, 24px) !important;
    margin-left: 0.5em;
}

.external:hover>img {
    filter: brightness(0) invert(1);
}

/* グラデーションボタン：白 */
.bc-white .gradation-button {
    border: 1px solid #fff;
}

.bc-white .gradation-button:hover {
    background: var(--primary);
    border: 1px solid var(--primary);
}

/* グラデーションボタン白：外部リンク*/
.external-white-outer {
    background-color: var(--white);
    width: fit-content;
    margin: 0.5em 0;
}

.external-white-outer .gradation-button {
    border: none;
}

.external-white-outer .gradation-button:hover {
    background: var(--primary);
    border: 1px solid var(--primary);
    -webkit-text-fill-color: #fff;
}

.external-white-outer .gradation-button:hover>img {
    filter: brightness(0) invert(1);
}

/* ボタン白 */
.white-button {
    border: 1px solid var(--white);
    width: min(370 / 1280* 100vw, 370px);
    height: min(60 / 1280* 100vw, 60px);
    text-align: center;
    margin: 0.5em 0;
    color: var(--white);
}

.white-button:hover {
    background: var(--white);
    -webkit-text-fill-color: #031945;
}

/* ボタン青 */
.blue-button {
    background: var(--primary);
    width: min(300 / 1280* 100vw, 300px);
    height: min(60 / 1280* 100vw, 60px);
    text-align: center;
    color: var(--white);
    margin: 0.5em 0;
}

.blue-button:hover {
    opacity: 0.8;
}

/* ボタン緑 */
.green-button {
    background: var(--green);
    width: min(300 / 1280* 100vw, 300px);
    height: min(60 / 1280* 100vw, 60px);
    text-align: center;
    color: var(--white);
    margin: 0.5em 0;
}

.green-button:hover {
    opacity: 0.8;
}

/*----------------------------------------
テーブル
------------------------------------------*/
table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.8em 0;
}

th,
td {
    padding: 0.7em;
    text-align: center;
}

thead th {
    background-color: var(--primary);
    color: white;
    font-weight: normal;
}

tbody tr:nth-child(odd) {
    background-color: white;
}

tbody tr:nth-child(even) {
    background-color: #EFF3FA;
}

th:nth-child(1),
td:nth-child(1) {
    border-right: 1px solid #cccccc;
}

/*----------------------------------------
クラス設定
------------------------------------------*/
:root {
    /* カラー（色） */
    --white: #ffffff;
    --gray-20: #f6f6f6;
    --gray-30: #dadada;
    --gray-40: #c1c1c1;
    --gray-50: #a7a7a7;
    --gray-60: #8e8e8e;
    --gray-70: #747474;
    --gray-80: #5b5b5b;
    --gray-90: #414141;
    --black: #333333;
    --primary: #113F99;
    /* --secondary: #0e3687; */
    /* --tertiary: #00C7A3; */
    --pdf: #e2574c;
    --word: #335f9e;
    --excel: #217346;
    --link: #004db9;
    --red: #FF5E61;
    --blue: #009BE3;
    --yellow: #EFC414;
    --green: #00C7A3;
    --purple: #8F4ADD;
    --bc-table: #EFF3FA;
    /* --navy: #113F99; */
    /* タイポグラフィ（フォントサイズ） */
    --body: clamp(1.4rem, 0.8rem + 1.25vw, 1.6rem);
    /* 16-18px */
    --display: clamp(3.2rem, -1.6rem + 10vw, 4.8rem);
    /* 72-160 */
    --heading1: clamp(2.2rem, -0.8rem + 6.25vw, 3.2rem);
    /* 32-64px */
    --heading2: calc(var(--body) * 1.5);
    /* 24-27px */
    --heading3: calc(var(--body) * 1.2);
    /* 19.2-21.6px */
    --small-heading2: clamp(var(--heading2) * 0.85);
    /* 14-27px */
    --small-heading3: calc(var(--heading3) * 0.85);
    /* 12-23px */
    --small-body: calc(var(--body) * 0.85);
    /* スペース（余白・間隔） */
    --space-xs: clamp(1rem, -0.8rem + 3.75vw, 1.6rem);
    /* 20-30px */
    --space-sm: calc(var(--space-xs) * 1.5);
    /* 30-45px */
    --space-md: calc(var(--space-xs) * 2);
    /* 40-60px */
    --space-lg: calc(var(--space-xs) * 3);
    /* 60-90px */
    --space-xl: calc(var(--space-xs) * 4);
    /* 80-120px */
    --space-jump: clamp(4.5rem, -3.6rem + 16.88vw, 7.2rem);
    /* 20-60px */
    --font-base: "游ゴシック", YuGothic, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fz14 {
    font-size: clamp(12px, 14/1280*100vw, 14px) !important;
}

.fz15 {
    font-size: clamp(13px, 15/1280*100vw, 15px) !important;
}

.fz16 {
    font-size: clamp(14px, 16/1280*100vw, 16px) !important;
}

.fz18 {
    font-size: clamp(16px, 18/1280*100vw, 18px) !important;
}

.fz20 {
    font-size: clamp(18px, 20/1280*100vw, 20px) !important;
}

.fz24 {
    font-size: clamp(21px, 24/1280*100vw, 24px) !important;
}

.fz27 {
    font-size: clamp(24px, 27/1280*100vw, 27px) !important;
}

.fz30 {
    font-size: clamp(27px, 30/1280*100vw, 30px) !important;
}

.fz36 {
    font-size: clamp(33px, 36/1280*100vw, 36px) !important;
}

.fz40 {
    font-size: clamp(33px, 40/1280*100vw, 40px) !important;
}

@media screen and (max-width: 767px) {
    .fz14 {
        font-size: clamp(12px, 14/375*100vw, 14px) !important;
    }

    .fz15 {
        font-size: clamp(13px, 15/375*100vw, 15px) !important;
    }

    .fz16 {
        font-size: clamp(14px, 16/375*100vw, 16px) !important;
    }

    .fz18 {
        font-size: clamp(16px, 18/375*100vw, 18px) !important;
    }

    .fz20 {
        font-size: clamp(18px, 20/375*100vw, 20px) !important;
    }

    .fz24 {
        font-size: clamp(21px, 24/375*100vw, 24px) !important;
    }

    .fz27 {
        font-size: clamp(24px, 27/375*100vw, 27px) !important;
    }

    .fz30 {
        font-size: clamp(27px, 30/375*100vw, 30px) !important;
    }

    .fz36 {
        font-size: clamp(33px, 36/375*100vw, 36px) !important;
    }

    .fz40 {
        font-size: clamp(33px, 40/375*100vw, 40px) !important;
    }
}

.center,
.has-text-align-center {
    text-align: center !important;
}

.m0auto {
    margin: 0 auto;
}

.left {
    text-align: left !important;
}

.right,
.has-text-align-right {
    text-align: right !important;
}

.acenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fstart {
    display: flex !important;
    justify-content: flex-start;
}

.fcenter {
    display: flex !important;
    justify-content: center;
}

.fend {
    display: flex !important;
    justify-content: flex-end;
}

.fspace {
    display: flex;
    justify-content: space-between;
}

.fcol {
    display: flex;
    flex-direction: column;
}

.valign-top {
    vertical-align: top !important;
}

.valign-middle {
    vertical-align: middle !important;
}

.smt {
    scroll-margin-top: 100px;
}

.word {
    color: var(--word) !important;
}

.excel {
    color: var(--excel) !important;
}

.pdf {
    color: var(--pdf) !important;
}

.link {
    color: var(--link) !important;
}

.white {
    color: var(--white) !important;
}

.red {
    color: var(--red) !important;
}

.blue {
    color: var(--primary) !important;
}

.primary {
    color: var(--primary) !important;
}

.yellow {
    color: var(--yellow) !important;
}

.green {
    color: var(--green) !important;
}

.purple {
    color: var(--purple) !important;
}

.navy {
    color: var(--navy) !important;
}

.black {
    color: var(--black) !important;
}

.bc-primary {
    background-color: var(--primary) !important;
}

.bc-red {
    background-color: var(--red) !important;
}

.bc-blue {
    background-color: var(--blue) !important;
}

.bc-yellow {
    background-color: var(--yellow) !important;
}

.bc-green {
    background-color: var(--green) !important;
}

.bc-purple {
    background-color: var(--purple) !important;
}

.bc-gray {
    background-color: var(--gray-20) !important;
}

.bc-black {
    background-color: var(--black) !important;
}

.bc-white {
    background-color: var(--white) !important;
}

.bc-table {
    background-color: var(--bc-table);
}

.fw500 {
    font-weight: 500;
}

.fw600 {
    font-weight: 600;
}

.bold {
    font-weight: bold;
}

.gap-xxs {
    gap: calc(var(--space-xs) / 2) !important;
}

.gap-xs {
    gap: var(--space-xs) !important;
}

.gap-sm {
    gap: var(--space-sm) !important;
}

.gap-md {
    gap: var(--space-md) !important;
}

.gap-lg {
    gap: var(--space-lg) !important;
}

.gap-xl {
    gap: var(--space-xl) !important;
}

.gap-jump {
    gap: var(--space-jump) !important;
}

.mt-none {
    margin-top: 0 !important;
}

.mt-xxs {
    margin-top: calc(var(--space-xs) / 2) !important;
}

.mt-xs {
    margin-top: var(--space-xs) !important;
}

.mt-sm {
    margin-top: var(--space-sm) !important;
}

.mt-md {
    margin-top: var(--space-md) !important;
}

.mt-lg {
    margin-top: var(--space-lg) !important;
}

.mt-xl {
    margin-top: var(--space-xl) !important;
}

.mt-jump {
    margin-top: var(--space-jump) !important;
}

.mb-none {
    margin-bottom: 0 !important;
}

.mb-xxs {
    margin-bottom: calc(var(--space-xs) / 2) !important;
}

.mb-xs {
    margin-bottom: var(--space-xs) !important;
}

.mb-sm {
    margin-bottom: var(--space-sm) !important;
}

.mb-md {
    margin-bottom: var(--space-md) !important;
}

.mb-lg {
    margin-bottom: var(--space-lg) !important;
}

.mb-xl {
    margin-bottom: var(--space-xl) !important;
}

.mb-jump {
    margin-bottom: var(--space-jump) !important;
}

.mi-auto {
    margin-inline: auto;
}

.mlem-015 {
    margin-left: -1.5em;
}

.mlem002 {
    margin-left: 0.2em !important;
}

.mlem01 {
    margin-left: 1em !important;
}

.mlem012 {
    margin-left: 1.2em !important;
}

.mlem02 {
    margin-left: 2em !important;
}

.mlem025 {
    margin-left: 2.5em !important;
}

.mlem03 {
    margin-left: 3em !important;
}

.mlem04 {
    margin-left: 4em !important;
}

.file {
    display: block;
    width: 100%;
    max-width: 4rem;
}

.file[href]:hover {
    opacity: 0.8;
    cursor: pointer;
}

.file img {
    display: block;
    width: 100%;
}

.fs-small-body {
    font-size: var(--small-body);
}

.ind01 {
    text-indent: -1em;
    padding-left: 1em;
}

.ind012 {
    text-indent: -1.2em;
    padding-left: 1.2em;
}

.ind02 {
    text-indent: -2em;
    padding-left: 2em;
}

.ind03 {
    text-indent: -3.2em;
    padding-left: 3.2em;
}

.ind04 {
    text-indent: -4em;
    padding-left: 4em;
}

.lem01 {
    text-indent: 1em;
}

.p01 {
    padding: 1em;
}

.p02 {
    padding: 2em;
}

.p03 {
    padding: 3em;
}

.lem02 {
    text-indent: 2em;
}

.plem01 {
    padding-left: 1em !important;
}

.plem02 {
    padding-left: 2em !important;
}

.plem03 {
    padding-left: 3em !important;
}

.plem04 {
    padding-left: 4em !important;
}

.wfit {
    width: fit-content !important;
}

.w01 {
    width: 1% !important;
}

.w02 {
    width: 2% !important;
}

.w03 {
    width: 3% !important;
}

.w04 {
    width: 4% !important;
}

.w05 {
    width: 5% !important;
}

.w06 {
    width: 6% !important;
}

.w07 {
    width: 7% !important;
}

.w08 {
    width: 8% !important;
}

.w09 {
    width: 9% !important;
}

.w10 {
    width: 10% !important;
}

.w11 {
    width: 11% !important;
}

.w12 {
    width: 12% !important;
}

.w13 {
    width: 13% !important;
}

.w14 {
    width: 14% !important;
}

.w15 {
    width: 15% !important;
}

.w16 {
    width: 16% !important;
}

.w17 {
    width: 17% !important;
}

.w18 {
    width: 18% !important;
}

.w19 {
    width: 19% !important;
}

.w20 {
    width: 20% !important;
}

.w21 {
    width: 21% !important;
}

.w22 {
    width: 22% !important;
}

.w23 {
    width: 23% !important;
}

.w24 {
    width: 24% !important;
}

.w25 {
    width: 25% !important;
}

.w26 {
    width: 26% !important;
}

.w27 {
    width: 27% !important;
}

.w28 {
    width: 28% !important;
}

.w29 {
    width: 29% !important;
}

.w30 {
    width: 30% !important;
}

.w31 {
    width: 31% !important;
}

.w32 {
    width: 32% !important;
}

.w33 {
    width: 33% !important;
}

.w34 {
    width: 34% !important;
}

.w35 {
    width: 35% !important;
}

.w36 {
    width: 36% !important;
}

.w37 {
    width: 37% !important;
}

.w38 {
    width: 38% !important;
}

.w39 {
    width: 39% !important;
}

.w40 {
    width: 40% !important;
}

.w41 {
    width: 41% !important;
}

.w42 {
    width: 42% !important;
}

.w43 {
    width: 43% !important;
}

.w44 {
    width: 44% !important;
}

.w45 {
    width: 45% !important;
}

.w46 {
    width: 46% !important;
}

.w47 {
    width: 47% !important;
}

.w48 {
    width: 48% !important;
}

.w49 {
    width: 49% !important;
}

.w50 {
    width: 50% !important;
}

.w51 {
    width: 51% !important;
}

.w52 {
    width: 52% !important;
}

.w53 {
    width: 53% !important;
}

.w54 {
    width: 54% !important;
}

.w55 {
    width: 55% !important;
}

.w56 {
    width: 56% !important;
}

.w57 {
    width: 57% !important;
}

.w58 {
    width: 58% !important;
}

.w59 {
    width: 59% !important;
}

.w60 {
    width: 60% !important;
}

.w61 {
    width: 61% !important;
}

.w62 {
    width: 62% !important;
}

.w63 {
    width: 63% !important;
}

.w64 {
    width: 64% !important;
}

.w65 {
    width: 65% !important;
}

.w66 {
    width: 66% !important;
}

.w67 {
    width: 67% !important;
}

.w68 {
    width: 68% !important;
}

.w69 {
    width: 69% !important;
}

.w70 {
    width: 70% !important;
}

.w71 {
    width: 71% !important;
}

.w72 {
    width: 72% !important;
}

.w73 {
    width: 73% !important;
}

.w74 {
    width: 74% !important;
}

.w75 {
    width: 75% !important;
}

.w76 {
    width: 76% !important;
}

.w77 {
    width: 77% !important;
}

.w78 {
    width: 78% !important;
}

.w79 {
    width: 79% !important;
}

.w80 {
    width: 80% !important;
}

.w81 {
    width: 81% !important;
}

.w82 {
    width: 82% !important;
}

.w83 {
    width: 83% !important;
}

.w84 {
    width: 84% !important;
}

.w85 {
    width: 85% !important;
}

.w86 {
    width: 86% !important;
}

.w87 {
    width: 87% !important;
}

.w88 {
    width: 88% !important;
}

.w89 {
    width: 89% !important;
}

.w90 {
    width: 90% !important;
}

.w91 {
    width: 91% !important;
}

.w92 {
    width: 92% !important;
}

.w93 {
    width: 93% !important;
}

.w94 {
    width: 94% !important;
}

.w95 {
    width: 95% !important;
}

.w96 {
    width: 96% !important;
}

.w97 {
    width: 97% !important;
}

.w98 {
    width: 98% !important;
}

.w99 {
    width: 99% !important;
}

.w100 {
    width: 100% !important;
}

/*----------------------------------------
SP
------------------------------------------*/
@media screen and (max-width: 767px) {
    a {
        text-decoration: none;
        font-size: clamp(16px, 18/375*100vw, 18px);
    }

    p {
        font-size: clamp(16px, 18/375*100vw, 18px);
    }

    h1 {
        font-size: clamp(22px, 24/375*100vw, 24px);
    }

    h2 {
        font-size: clamp(18px, 21/375*100vw, 21px);
    }

    h3 {
        font-size: clamp(18px, 21/375*100vw, 21px);
    }

    h4 {
        font-size: clamp(18px, 20/375*100vw, 20px);
    }

    .content_wrap_outer,
    .content_wrap {
        padding: 0 min(32 / 375* 100vw, 32px);
    }


    /* グラデーションボタン、ボタン白、青、緑 */
    .gradation-button,
    .white-button,
    .blue-button,
    .green-button {
        width: 100% !important;
        height: min(65 / 375* 100vw, 65px) !important;
    }



}