@font-face {
    /*フォントの名前*/
    font-family: "lulo-clean-w01-one-bold";
    /*フォントファイルへのパス（複数指定の場合、上から順に読み込まれる）*/
    src: url("font/font.woff2") format("woff2"),
        url("font/font.woff") format("woff");
}

.mamelonClass {
    font-family: "mamelon";
}

/* header */
.wrapper {
    height: 100%;
    overflow-x: hidden;
    position: relative;
    padding-top: 100px;
}

header {
    border-bottom: 9px solid #171C61;
    position: fixed;
    width: 100%;
    background-color: #fff;
    z-index: 100;
}

a:hover {
    transition: 0.4s;
}

.header_nav_container {
    height: 100%;
}

.header_nav_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 980px;
    margin: 0 auto;
}

.header_nav_inner a {
    width: 78px;
}

.header_nav_inner a h1 {
    padding-top: 5px;
}

.header_menu ul {
    width: 595px;
    height: 91px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.header_menu ul li {
    display: flex;
    align-items: center;
    width: 88px;
    height: 55px;
    list-style: none;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.header_menu ul li:last-child {
    border-right: none;
}

.header_menu ul li a {
    font: 400 12px 'Noto Sans JP';
    color: rgba(0, 0, 0, 0.6);
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0 auto;
}

.header_menu ul li a:hover {
    color: rgba(0, 0, 0, 0.2);

}

/* header */

/* top */
.top_img {
    width: 100%;
    height: 650px;
    position: relative;
    background-image: url(images/top_img.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.top_img_box {
    position: absolute;
    z-index: -1;
}

.top_img_box img {
    height: 650px;
    max-width: 100%;
    object-fit: cover;
}

.top_text_box {
    width: 750px;
    margin: 0 auto;
    padding-top: 175px;
}

.top_text_box p {
    font: italic bold 87px 'lulo-clean-w01-one-bold', 'sans-serif';
    line-height: 96px;
    color: #fff;
    letter-spacing: -0.1em;
    text-shadow: rgb(10 189 240 / 30%) 3px 3px 0px, rgb(254 1 1 / 30%) -3px -3px 0px;
    text-align: center;
}

.top_text_box aside {
    font: Italic 700 22px 'Noto Sans JP';
    line-height: 29px;
    color: #fff;
    text-align: center;
    padding-top: 30px;
    text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px, rgba(0, 0, 0, 0.6) -1px -1px 1px;
    letter-spacing: 0.2em;
}

.child_top_img {
    background-image: url(images/about_top.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 960px;
    height: 270px;
}

.business_top {
    background-image: url(images/business_top_img.webp);
}

.work_top {
    background-image: url(images/work_top_img.webp);
}

.recruit_top {
    background-image: url(images/index_footer_img.webp);
}

/* top */
/* index_content */
.index_side_layout {
    padding-bottom: 150px;
}

.side_layout_content {
    width: 210px;
    position: absolute;
    right: 65%;
    font: 400 14px 'Noto Sans JP';
    text-align: center;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.7);
}

.side_layout_content h3 {
    font: 500 25px 'Noto Sans JP';
    padding-bottom: 30px;
}

.side_flex_right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-left: auto;
    margin-top: 150px;
}

.side_layout_img {
    width: 59%;
    margin-left: auto;
    height: 395px;
    background-image: url(images/index_side_img1.webp);
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.side_flex_left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-right: auto;
    margin-top: 150px;
}

.side_flex_left .side_layout_img {
    width: 59%;
    margin-right: auto;
    margin-left: 0;
    height: 395px;

    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.side_flex_left .side_layout_content {
    width: 210px;
    position: absolute;
    left: 65%;
    font: 400 14px 'Noto Sans JP';
    text-align: center;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.7);
}

.layout_second {
    background-image: url(images/index_side_img2.webp);
}

.layout_third {
    background-image: url(images/index_side_img3.webp);
}

.layout_fourth {
    background-image: url(images/index_side_img4.webp);
}

.read_btn {
    padding: 40px 0px 55px 0px;
    text-align: center;
}

.read_btn a {
    font: 400 14px 'Noto Sans JP';
    color: #fff;
    background-color: #171C61;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-block;
    margin: 0 auto;
}

/* index_content */
/* green_back */
.border_up {
    position: relative;
}

.border_up::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
    width: 1px;
    height: 50px;
    margin: auto;
    background-color: #fff;
}

.border_up::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25px;
    width: 1px;
    height: 50px;
    margin: auto;
    background-color: #000;
}

.green_back_contents {
    background-color: rgba(23, 29, 97);
}

.green_back_text {
    font: 400 14px 'Noto Sans JP';
    line-height: 23px;
    color: #fff;
    text-align: center;
    width: 470px;
    padding-top: 80px;
    padding-bottom: 80px;
    margin: 0 auto;
}

.green_back_text h2 {
    font: bold 25px 'Noto Sans JP';
    margin-bottom: 30px;
}

.font_yellow {
    color: #DEC328;
}

.child_green_back_text {
    font: 400 14px 'Noto Sans JP';

    color: #fff;
    text-align: left;
    width: 800px;
    padding-top: 80px;
    padding-bottom: 80px;
    margin: 0 auto;
    letter-spacing: 0.02em;
}

.child_green_back_text p {
    line-height: 1.5rem;
}

.child_green_back_title {
    font: 500 25px 'Noto Sans JP';
    text-align: center;
    margin-bottom: 50px;
}

.greeting_name {
    text-align: right;
}

/* green_back */

/* white_back */


.white_back_contents {
    background-color: #fff;
}

.white_back_text {
    font: 400 14px 'Noto Sans JP';
    line-height: 23px;
    color: #fff;
    text-align: center;
    width: 470px;
    padding-top: 80px;
    padding-bottom: 80px;
    margin: 0 auto;
}

.white_back_text h2 {
    font: bold 25px 'Noto Sans JP';
    margin-bottom: 30px;
}

.font_yellow {
    color: #DEC328;
}

.child_white_back_text {
    font: 400 14px 'Noto Sans JP';
    color: #fff;
    text-align: left;
    width: 800px;
    padding-top: 80px;
    padding-bottom: 120px;
    margin: 0 auto;
    letter-spacing: 0.02em;
    color: #333;
}

.child_white_back_text p {
    line-height: 1.5rem;
}

.child_white_back_title {
    font: 500 25px 'Noto Sans JP';
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.recruit_white_back_text {
    font: 400 14px 'Noto Sans JP';
    color: #fff;
    text-align: left;
    width: 800px;
    padding-top: 0px;
    padding-bottom: 120px;
    margin: 0 auto;
    letter-spacing: 0.02em;
    color: #333;
}

.recruit_white_back_text p {
    line-height: 1.5rem;
}

.recruit_white_back_title {
    font: 500 18px 'Noto Sans JP';
    text-align: center;
    margin-bottom: 50px;
    color: #171C61;
}

.greeting_name {
    text-align: right;
}

.center {
    text-align: center;
}

/* white_back */
/* company_info */
.company_info_list {
    margin-top: 45px;
}

.company_info_list li {
    display: flex;
    justify-content: center;
    align-items: center;
    font: 400 14px 'Noto Sans JP';
    border-bottom: 1px solid #333;
    padding: 25px 0px;
}

.company_title {
    width: 20%;
    padding-left: 20px;
    font: 500 14px 'Noto Sans JP';
}

.company_info {
    width: 80%;
}

/* company_info */

/* business */
.business_flex_container {
    min-width: 1120px;
}

.business_flex_container ul {
    display: flex;
    flex-wrap: wrap;
}

.business_flex_container ul li {
    list-style: none;
    width: 50%;
    min-width: 560px;
    font: 400 14px 'Noto Sans JP';
}

.business_flex_container ul li h3 {
    font: 500 18px 'Noto Sans JP';
    margin-bottom: 10px;
}

.business_flex_container ul li p {
    line-height: 1.8;
}

.green_back_ex {
    background-color: #323ba6;
}

.left_img {
    width: 150px;
}

.left_img img {
    width: 100%;
}

.right_contents {
    width: 310px;
    color: #fff;
}

.business_child_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 560px;
    margin: 0 auto;
    padding: 40px;
}

.clinic_btn {
    padding: 60px 0px 0px 0px;
    text-align: center;
}

.clinic_btn a {
    font: 400 14px 'Noto Sans JP';
    color: #fff;
    background-color: #171C61;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px 10px;
    display: inline-block;
    margin: 0 auto;
}

.clinic_btn a:hover {
    opacity: 0.8;
    transition: 0.4s;
}

/* business */
/* works */
.works_container {
    width: 485px;
    margin: 0 auto;
}

.work_mb {
    padding-bottom: 60px;
}

.works_container ul li {
    margin-bottom: 120px;
}

.work_name {
    display: block;
    font: 500 18px 'Noto Sans JP';
    color: rgba(0, 0, 0, 0.6);
    padding: 10px 0px;
    margin-bottom: 10px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}

.works_info {
    font: 400 14px 'Noto Sans JP';
    display: flex;
    color: #333;
}

.works_info p:nth-child(2) {
    margin-left: 40px;
}

.works_date {
    position: absolute;
    right: 0;
    bottom: -5px;
    font: 400 14px 'Noto Sans JP';
    padding: 5px 15px;
    background-color: #cccccc;
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.6);
    letter-spacing: 0.05em;
}

.green_font {
    color: #171C61;  /* 紺に変更。クラス名、そのまま */
}

/* works */
/* recruit */
.recruit_img {
    margin-top: 60px;
}

.recruit_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 15px;
}

.recruit_flex_child {
    width: 28%;
}

.recruit_img_box {
    background-color: #171C61;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recruit_flex_child p {
    text-align: left;
}

p.recruit_flex_title {
    margin: 30px 0px 20px 0px;
    font: 500 16px 'Noto Sans JP';
    text-align: center;
}


/* recruit */
/* before_footer */
.before_footer_img {
    background-image: url(images/index_footer_img.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.before_footer_btn {
    padding: 170px 0px 55px 0px;
    text-align: center;
}

.before_footer_btn a {
    font: 400 14px 'Noto Sans JP';
    color: #fff;
    background-color: #171C61;
    border-radius: 5px;
    text-decoration: none;
    padding: 10px 80px;
    display: inline-block;
    margin: 0 auto;
}

.before_footer_btn a:hover {
    opacity: 0.8;

}

/* before_footer */
/* contact */
.contact_container {
    width: 400px;
    margin: 0 auto;
}

.contact_container>p {
    text-align: left;
    margin-bottom: 20px;
}

.contact_box {
    text-align: left;
    padding-bottom: 25px;
}
.checkbox{
    display: flex;
    flex-direction: column;
}
.consent_box{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.contact_box label {
    font: 500 14px 'Noto Sans JP';
    display: block;
    margin-bottom: 12px;
}

.contact_flex_child {
    width: 48%;
    text-align: left;
    font: 500 14px 'Noto Sans JP';
}

.contact_flex_child label {
    font: 500 14px 'Noto Sans JP';
    display: block;
    margin-bottom: 12px;
}

.contact_flex {
    display: flex;
    justify-content: space-between;
    padding-bottom: 25px;
}

input[type="text"] {
    background-color: rgb(239, 239, 239);
    border-radius: 10px;
    width: 100%;
    padding: 15px 10px 15px 22px;
}



input[type="submit"] {
    background-color: #171C61;
    border-radius: 5px;
    padding: 10px 50px 10px 50px;
    color: #fff;
    font: 500 14px 'Noto Sans JP';
    display: block;
    margin: 0 auto;
}

#formWrap input[type="submit"] {
    background-color: #171C61;
    border-radius: 5px;
    padding: 10px 50px 10px 50px;
    color: #fff;
    font: 500 14px 'Noto Sans JP';
    display: block;
    margin: 20px auto 20px auto;
}

.kakunin_box>input[type="submit"] {
    background-color: #ccc;
    border-radius: 5px;
    padding: 10px 50px 10px 50px;
    color: #fff;
}

.before_back {
    background-color: #ccc;
    border-radius: 5px;
    padding: 10px 50px 10px 50px;
    color: #fff;
    font: 500 14px 'Noto Sans JP';
    display: block;
    margin: 20px auto 20px auto;
}

.contact_active {
    background-color: #171C61 !important;
    border-radius: 5px;
    padding: 10px 50px 10px 50px;
    color: #fff;
    transition: .4s;
}

#formWrap h4 {
    font: 500 16px 'Noto Sans JP';
    padding-bottom: 30px;
    color: #333;
}
#formWrap p {
    font: 400 14px 'Noto Sans JP';
    color: #333;
}
.submit {
    text-align: center;
}

textarea {
    background-color: rgb(239, 239, 239);
    border-radius: 10px;
    width: 100%;
    padding: 15px 10px 15px 22px;
}

.checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 10px;
}

.checkbox a {
    color: #0044CC;
    text-decoration: none;
}

.checkbox a:hover {
    opacity: 0.8;
    transition: .4s;
}

input[type=checkbox] {
    width: 15px;
    height: 15px;
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    position: relative;
    top: 0px;
    margin-left: 10px;
    transition: .5s;
}

#formWrap p {
    margin-bottom: 20px;
}

table {
    width: 100%;
}

tr {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-bottom: 25px;
}

th {
    width: 100%;
    display: block;
    text-align: left;
    font: 500 14px 'Noto Sans JP';
    margin-bottom: 12px;
    color: #333;
}

td {
    background-color: rgb(239, 239, 239);
    border-radius: 10px;
    width: 100%;
    padding: 15px 10px 15px 22px;
    color: #333;
}

/* contact */
/* footer */
footer {
    background-color: #171C61;
    padding-top: 60px;
    padding-bottom: 60px;
}

.footer_container {
    margin: 0 auto;
    text-align: center;
    font: 400 12px 'Noto Sans JP';
    color: #fff;
}

.footer_company_name {
    font: 500 18px 'Noto Sans JP';
    color: #fff;
    letter-spacing: 0.05em;
    line-height: 30px;
}

.footer_logo {
    display: block;
    margin: 0px 0px 30px 0px;
}

/* footer */

/* 共通パーツ */
.under_border {
    position: relative;
}

.under_border::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 47%;
    top: 45px;
}

.green_under_border {
    position: relative;
}

.green_under_border::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: #171C61;
    position: absolute;
    left: 47%;
    top: 45px;
}



.gray_under_border {
    position: relative;
}

.gray_under_border::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 47%;
    top: 45px;
}

.relative {
    position: relative;
}

li {
    list-style: none;
}

.active {
    color: rgba(0, 0, 0, 0.3) !important;
}

.gray_back {
    background-color: #FAFAFA;
}

.black_font {
    color: #333;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

/*アニメーション要素のスタイル*/
.animation {
    opacity: 0;
    visibility: hidden;
    transition: 1s;
    transform: translateY(30px);
}

/*アニメーション要素までスクロールした時のスタイル*/
.active-animation {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 共通パーツ */

/* レスポンシブ */
@media screen and (max-width: 768px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .header_nav_inner {
        display: none;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        width: 100%;
        margin: 0 auto;
    }

    .header_nav_inner a {
        width: 78px;
    }

    .top_img {
        width: 100%;
        height: auto;
        position: relative;
        background-image: url(images/sp_top_img.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .top_img_box img {
        height: 100%;
        max-width: 100%;
        object-fit: unset;
    }

    .top_text_box {
        width: 100%;
        padding-top: 12%;
    }

    .top_text_box p {
        font: italic bold 34px 'lulo-clean-w01-one-bold', 'sans-serif';
        line-height: 42px;
        color: #fff;
        letter-spacing: -0.14em;
        text-shadow: rgb(10 189 240 / 30%) 3px 3px 0px, rgb(254 1 1 / 30%) -3px -3px 0px;
        text-align: center;
    }

    .top_text_box aside {
        font: Italic 700 16px 'Noto Sans JP';
        line-height: 29px;
        color: #fff;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 40px;
    }

    .green_back_text {
        font: 400 14px 'Noto Sans JP';
        line-height: 1.8;
        color: #fff;
        text-align: left;
        width: 87%;
        padding-top: 50px;
        padding-bottom: 50px;
        margin: 0 auto;
    }

    .green_back_text h2 {
        font: bold 21px 'Noto Sans JP';
        margin-bottom: 10px;
        text-align: center;
    }

    .before_footer_img_sp img {
        width: 100%;
    }

    .before_footer_btn {
        padding: 18px 0px 35px 0px;
        text-align: center;
    }

    .before_footer_btn a {
        font: 400 14px 'Noto Sans JP';
        color: #fff;
        background-color: #171C61;
        border-radius: 5px;
        text-decoration: none;
        padding: 10px 52px;
        display: inline-block;
        margin: 0 auto;
    }

    footer {
        background-color: #171C61;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .footer_container {
        margin: 0 auto;
        text-align: center;
        font: 400 12px 'Noto Sans JP';
        color: #fff;
        width: 87%;
    }

    .footer_container p {
        text-align: left;
    }

    .footer_logo {
        display: block;
        margin: 0px 0px 10px 0px;
    }

    .child_top_img {
        background-image: url(images/about_top.webp);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        min-width: 0px;
        width: 100%;
        height: 100px;
    }

    .child_green_back_text {
        font: 400 14px 'Noto Sans JP';
        color: #fff;
        text-align: left;
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        margin: 0 auto;
        letter-spacing: 0.02em;
        width: 87%;
    }

    .under_border::after {
        content: "";
        display: block;
        width: 50px;
        height: 2px;
        background-color: #fff;
        position: absolute;
        left: 21%;
        top: 45px;
    }

    .child_white_back_text {
        font: 400 14px 'Noto Sans JP';
        color: #fff;
        text-align: left;
        width: 87%;
        padding-top: 50px;
        padding-bottom: 80px;
        margin: 0 auto;
        letter-spacing: 0.02em;
        color: #333;
    }



    .child_green_back_title {
        font: 500 25px 'Noto Sans JP';
        text-align: center;
        width: fit-content;
        width: -ms-fit-content;
        width: -moz-fit-content;
        width: -webkit-fit-content;
        width: -o-fit-content;
        margin: 0 auto 45px auto;
    }

    .child_white_back_title {
        font: 500 25px 'Noto Sans JP';
        text-align: center;
        width: fit-content;
        width: -ms-fit-content;
        width: -moz-fit-content;
        width: -webkit-fit-content;
        width: -o-fit-content;
        margin: 0 auto 45px auto;
        color: rgba(0, 0, 0, 0.6);
    }

    .green_under_border::after {
        content: "";
        display: block;
        width: 50px;
        height: 2px;
        background-color: #171C61;
        position: absolute;
        left: 28%;
        top: 45px;
    }

    .policy_border:after {
        content: "";
        display: block;
        width: 50px;
        height: 2px;
        background-color: #171C61;
        position: absolute;
        left: 39%;
        top: 45px;
    }

    .contact_title::after {
        content: "";
        display: block;
        width: 50px;
        height: 2px;
        background-color: #171C61;
        position: absolute;
        left: 38%;
        top: 45px;
    }

    .company_info_list {
        width: 87%;
        margin: 0 auto;
    }

    .company_info_list li {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font: 400 14px 'Noto Sans JP';
        border-bottom: 1px solid #333;
        padding: 10px 0px;
    }

    .company_title {
        width: 100%;
        padding-left: 0px;
        padding-bottom: 5px;
        font: 500 14px 'Noto Sans JP';
    }

    .company_info {
        width: 100%;
    }

    .business_flex_container {
        min-width: 0px;
        width: 100%;
    }

    .business_flex_container ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .business_flex_container ul li {
        list-style: none;
        width: 100%;
        min-width: 0px;
        font: 400 14px 'Noto Sans JP';
    }

    .business_flex_container ul li:nth-child(2) {
        background-color: #428D5B;
    }

    .business_flex_container ul li:nth-child(4) {
        background-color: #428D5B;
    }

    .business_child_flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 87%;
        margin: 0 auto;
        padding: 20px 0px 40px 0px;
    }

    .business_child_flex h3 {
        font: 500 18px 'Noto Sans JP';
        margin-bottom: 15px;
        text-align: center;
    }

    .left_img {
        width: 150px;
        margin: 0 auto;
    }

    .right_contents {
        width: 100%;
        color: #fff;
    }

    .green_back_ex {
        background-color: #171C61;
    }

    .business_flex_container ul li p {
        font: 400 14px 'Noto Sans JP';
        line-height: 1.8;
    }

    .clinic_btn {
        padding: 30px 0px 0px 0px;
        text-align: center;
    }

    .child_white_back_text .company_info_list {
        width: 100%;
    }

    .recruit_img {
        margin-top: 30px;
        width: 100%;
    }

    .recruit_white_back_text {
        font: 400 14px 'Noto Sans JP';
        color: #fff;
        text-align: left;
        width: 87%;
        padding-top: 0px;
        padding-bottom: 80px;
        margin: 0 auto;
        letter-spacing: 0.02em;
        color: #333;
    }

    .recruit_flex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 30px;
    }

    .recruit_flex_child {
        width: 100%;
        margin-bottom: 40px;
    }

    p.recruit_flex_title {
        margin: 30px 0px 20px 0px;
        font: 500 16px 'Noto Sans JP';
        text-align: center;
        color: rgba(0, 0, 0, 0.6);
    }

    .recruit_white_back_title {
        font: 500 18px 'Noto Sans JP';
        text-align: center;
        margin-bottom: 40px;
        color: #171C61;
        width: fit-content;
        width: -ms-fit-content;
        width: -moz-fit-content;
        width: -webkit-fit-content;
        width: -o-fit-content;
        margin: 0 auto 40px auto;
    }

    .gray_under_border::after {
        content: "";
        display: block;
        width: 50px;
        height: 2px;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        left: 26%;
        top: 45px;
    }

    .gray_under_primary::after {
        left: 38%;
    }

    .gray_under_secondary::after {
        left: 29%;
    }

    .gray_under_third::after {
        left: 19%;
    }

    .green_under_secondary::after {
        left: 40%;
    }

    .work_mb {
        padding-bottom: 50px;
    }

    .works_container {
        width: 87%;
        margin: 0 auto;
    }

    .works_container li img {
        width: 100%;
    }

    .works_info {
        font: 400 14px 'Noto Sans JP';
        display: flex;
        flex-direction: column;
    }

    .works_info p:nth-child(2) {
        margin-left: 0px;
        padding-top: 10px;
    }

    .works_info p:first-child {
        padding-top: 5px;
    }

    .works_date {
        position: absolute;
        right: auto;
        left: 0;
        bottom: -40px;
        font: 400 14px 'Noto Sans JP';
        padding: 5px 15px;
        background-color: #cccccc;
        border-radius: 5px;
        color: rgba(0, 0, 0, 0.6);
        letter-spacing: 0.05em;
    }

    .index_side_layout {
        padding-bottom: 40px;
    }

    .side_layout_content {
        width: 87%;
        position: relative;
        right: 0;
        font: 400 14px 'Noto Sans JP';
        text-align: center;
        line-height: 1.8;
        color: rgba(0, 0, 0, 0.7);
    }

    .side_layout_content h3 {
        font: 500 22px 'Noto Sans JP';
        padding-bottom: 10px;
        padding-top: 30px;
    }

    .side_flex_right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-left: auto;
        margin-top: 0px;
    }

    .side_layout_img {
        width: 100%;
        margin-left: auto;
        height: 110px;
        background-image: url(images/index_side_img1.webp);
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .side_flex_left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-right: auto;
        margin-top: 0px;
    }

    .side_flex_left .side_layout_img {
        width: 100%;
        margin-right: auto;
        margin-left: 0;
        height: 110px;
        background-position: left;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .side_flex_left .side_layout_content {
        width: 87%;
        position: relative;
        left: 0;
        font: 400 14px 'Noto Sans JP';
        text-align: center;
        line-height: 1.8;
        color: rgba(0, 0, 0, 0.7);
    }

    .layout_second {
        background-image: url(images/index_side_img2.webp);
    }

    .layout_third {
        background-image: url(images/index_side_img3.webp);
    }

    .layout_fourth {
        background-image: url(images/index_side_img4.webp);
    }

    .read_btn {
        padding: 20px 0px 55px 0px;
        text-align: center;
    }

    .read_btn a {
        font: 400 16px 'Noto Sans JP';
        color: #fff;
        background-color: #171C61;
        border-radius: 5px;
        text-decoration: none;
        padding: 10px 40px;
        display: inline-block;
        margin: 0 auto;
    }

    /* ヘッダーメニュー */
    .wrapper {
        height: 100%;
        overflow-x: hidden;
        position: relative;
        padding-top: 65px;
    }

    .overlay {
        content: "";
        display: block;
        width: 0;
        height: 0;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        opacity: 0;
        transition: opacity .5s;
    }

    .overlay.open {
        width: 100%;
        height: 100vh;
        opacity: 1;
    }

    .menu-trigger {
        display: inline-block;
        width: 22px;
        height: 20px;
        vertical-align: middle;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 30px;
        z-index: 100000;
        transform: translateX(0);
        transition: transform .5s;
    }

    /* .menu-trigger.active {
        transform: translateX(-250px);
    } */

    .menu-trigger span {
        display: inline-block;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #000;
        transition: all .25s ease-in-out;
    }

    .menu-trigger.active span {
        background-color: #000;
    }

    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }

    .menu-trigger.active span:nth-of-type(1) {
        transform: translateY(9px) rotate(-45deg);
    }

    .menu-trigger span:nth-of-type(2) {
        top: 8.3px;
        transition: all .25s ease-in-out;
    }

    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }

    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }

    .menu-trigger.active span:nth-of-type(3) {
        transform: translateY(-9px) rotate(45deg);
    }

    nav {
        width: 150px;
        height: 100%;
        padding-top: 70px;
        background-color: #fff;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10;
        transform: translate(250px);
        transition: all .5s;
    }

    nav.open {
        transform: translateZ(0);
    }

    nav li {
        color: rgba(0, 0, 0, 0.8);
        text-align: center;
        padding: 10px 0;
        font: 400 14px 'Noto Sans JP';
        width: 90%;
        margin: 0 auto;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }

    nav li a {
        color: rgba(0, 0, 0, 0.8);
        text-align: center;
        padding: 10px 0;
        font: 400 14px 'Noto Sans JP';
        text-decoration: none;
    }

    * {
        box-sizing: border-box;
    }

    ul {
        list-style: none;
    }

    .sp_hed {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .sp_header {
        height: 65px;
        border-bottom: 5px solid #171C61;
        position: fixed;
    }

    .active {
        color: #000;
    }

    .sp_logo {
        width: 60px;
        margin: 0 auto;
        display: block;
        position: relative;
        top: 7px;
    }

    .sp_logo img {
        width: 100%;
    }

    .border_up::before {
        display: none;
        content: '';
        position: absolute;
        top: -25px;
        left: 0;
        right: 0;
        width: 1px;
        height: 50px;
        margin: auto;
        background-color: #fff;
    }

    .border_up::after {
        display: none;
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -25px;
        width: 1px;
        height: 50px;
        margin: auto;
        background-color: #000;
    }

    .contact_container {
        width: 87%;
        margin: 0 auto;
    }

    .works_container ul li {
        margin-bottom: 100px;
    }

    .sp_mb {
        padding-bottom: 50px;
    }

    .business_flex_container ul li h3 {
        font: 500 18px 'Noto Sans JP';
        margin-bottom: 15px;
    }

    .sp_active {
        color: #171C61;
    }
}

/* レスポンシブ */




/*body要素に.fadeoutセレクタがある場合には、レイヤーが表示されるようにopacityを１に設定します。*/



@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0.5;
    }

    40% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

.barba-container {
    display: none;
}

.mt10 {
    margin-top: 10px;
}

dt {
    margin-top: 1.5rem;
    font-weight: 500;
}

.inner05 {
    text-align: left;

}

.inner05 p {
    font: 400 14px 'Noto Sans JP';
    color: #333;
}

.inner05 dd {
    font: 400 14px 'Noto Sans JP';
    color: #333;
}

.inner05 dt {
    font: 500 14px 'Noto Sans JP';
    color: #333;
}

.pb_thanks{
    padding-bottom: 120px;
}