@charset "UTF-8";
@import url("/assets/css/base.css");

a {
    cursor: pointer;
}
a.btn {
    display: inline-flex;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 700;
}

.btn-orange {
    color: #fff !important;
    background: linear-gradient(92deg, #f4a261 28.05%, #e76f51 99.79%);
}
.btn-icon {
    position: relative;
    padding: 8px 54px 8px 24px !important;
    color: #fff !important;
}
.btn-mail::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background: url(../img/common/icon_email.png) no-repeat;
    top: 7px;
    right: 22px;
    background-size: cover;
}

.btn-blue {
    background: linear-gradient(92deg, #4c99b8 28.01%, #2c6f8c 99.9%);
    box-shadow: 0 2px 6px 0 rgba(125, 55, 4, 0.26);
}

.btn-blue-line {
    border: 1px solid #4c99b8;
    color: #4c99b8 !important;
    box-shadow: 0 2px 6px 0 rgba(125, 55, 4, 0.26);
    background: #fff;
}

.btn-pdf::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../img/common/icon_pdf.png) no-repeat;
    top: 9px;
    right: 22px;
    background-size: cover;
}

.btn-mailmag::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../img/common/icon_forward.png) no-repeat;
    top: 13px;
    right: 22px;
    background-size: cover;
}

a:hover {
    opacity: 0.8;
    transition: all 0.3s ease;
}
@media (max-width: 767px) {
    a.btn {
        display: flex;
    }
    .btn-icon {
        padding: 16px 54px 16px 24px !important;
    }
    .btn-pdf::after {
        top: 20px;
        right: 50px;
    }

    .btn-mailmag::after {
        top: 21px;
    }
}
@media (max-width: 429px) {
    .btn-mailmag {
        font-size: 15px;
    }
}

/* header */
header {
    margin: auto;
    display: flex;
    max-width: 1240px;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    line-height: normal;
    top: 42px;
    padding: 0 16px;
}
header ul {
    display: flex;
    padding: 8px 24px 8px 40px;
    align-items: center;
    border-radius: 99px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    gap: 48px;
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.16);
}
header a {
    padding: 4px;
    color: #434548;
    text-decoration: none;
}
/* ハンバーガーボタン */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

@media (max-width: 1240px) {
    header ul.nav-list {
        display: none; /* 非表示 */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        border-radius: 0;
        width: 100vw;
        height: 100vh;
        background: #fff;
        gap: 32px;
        font-size: 24px;
        z-index: 9998; /* メニューより下にする */
    }

    .hamburger {
        display: block;
        position: fixed; /* 画面上に固定 */
        top: 42px;
        right: 20px;
        z-index: 9999; /* メニューより上にする */
        background: none;
        border: none;
        padding: 13px;
        width: 40px;
        height: 40px;
        border-radius: 99px;
        background: #fff;
        box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.16);
    }

    .nav-list.active {
        display: flex;
    }

    .nav-list.active .btn-mail::after {
        top: 15px;
    }

    /* 中央揃えリンク */
    .nav-list li {
        text-align: center;
    }
}
@media (max-width: 955px) {
    header .logo img {
        width: calc(100% - 60px);
    }
    header {
        top: 22px;
    }
    .hamburger {
        top: 22px;
    }
    .nav-list.active .btn-mail::after {
        top: 23px;
    }
}
/* footer */
footer {
    background: #464646;
    display: flex;
    padding: 32px 0;
    flex-direction: column;
    align-items: center;
    gap: 17px;
    color: #fff;
    font-size: 10px;
}
footer .link ul {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 36px;
    font-size: 12px;
}
footer .link a {
    color: #fff;
    position: relative;
}
footer .link a::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: url(../img/common/icon_blank.png) no-repeat;
    top: 2px;
    right: -17px;
    background-size: cover;
}

/* common */
body {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #434548;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.container {
    margin: auto;
    max-width: 976px;
}
.font-bold {
    font-weight: 700;
}
.wr {
    word-wrap: break-word;
    display: inline-block;
}
.mgb-4 {
    margin-bottom: 4px;
}
.mgb-8 {
    margin-bottom: 8px;
}
.mgb-24 {
    margin-bottom: 24px;
}
.mgb-32 {
    margin-bottom: 32px;
}
.mgb-40 {
    margin-bottom: 40px;
}
@media (max-width: 767px) {
    .mgb-4 {
        margin-bottom: 2px;
    }
    .mgb-8 {
        margin-bottom: 4px;
    }
    .mgb-24 {
        margin-bottom: 12px;
    }
    .mgb-32 {
        margin-bottom: 16px;
    }
    .mgb-40 {
        margin-bottom: 20px;
    }
}
.flex_box {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}
h2 {
    color: #4c99b8;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 2.56px;
}
h2 small {
    color: #434548;
    font-size: 12px;
    font-weight: 700;
    line-height: normal;
    display: block;
}
.gray {
    color: #434548;
}
.red {
    color: #b70707;
}
@media (max-width: 767px) {
    .flex_box {
        display: block;
    }
    h2 {
        font-size: 24px;
    }
}
.bread ul {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin: 32px 0;
}
.bread ul li {
    position: relative;
    padding-left: 20px;
}
.bread ul li a {
    color: #4c99b8;
    text-decoration: none;
}
.bread ul li::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../img/common/icon_bread.png) no-repeat;
    background-size: cover;
    margin-right: 8px;
    top: 4px;
    left: 1px;
}
.bread ul li:first-child::before {
    display: none;
}