@charset "utf-8";

/*======================
*
header
*
=======================*/
header {
    position: fixed;
    z-index: 9999;
    translate: -50% 0;
    top: 0;
    left: 50%;
    width: 100%;
    --color: var(--black);
    transition: 0.3s ease;
    padding: calc((15 / 1366) * 100%) 0;
}

header:not(.scroll_add) {
    background-color: var(--white);
}

header:not(.scroll_add)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc((1302 / 1366) * 100%);
    border-bottom: solid 1px var(--gray);
}

header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(calc((1240 / 1366) *100%), 1920px);
    margin: auto;
}

/*logo*/
header .logo {
    display: block;
    width: calc((246 / 1240) * 100%);
}

header .logo .white {
    display: none;
}

/*end*/

header nav ul.menu {
    display: flex;
    align-items: center;
    gap: calc((20 / 15) * 1.0em);
    font-size: var(--fs15);
    font-weight: 700;
    color: var(--color);
}

header nav ul.menu li {
    line-height: 1.0;
}

header nav ul.menu li:not(:last-of-type) {
    padding-right: calc((20 / 15) * 1.0em);
    border-right: solid 1px var(--color);
}

/*ham_btn*/
header .ham_btn {
    display: none;
}

/*end*/

/*scroll_add header*/
header.scroll_add {
    translate: -50% 30px;
}

header.scroll_add.is-hiding {
    translate: -50% -100%;
    opacity: 0;
}

header.scroll_add.active {
    translate: -50% 0;
    --color: var(--black);
    background-color: var(--white);
}

header.scroll_add .logo :not(.white) {
    display: none;
}

header.scroll_add .logo .white {
    display: block;
}

header.scroll_add.active .logo .white {
    display: none;
}

header.scroll_add.active .logo :not(.white) {
    display: block;
}

@media (min-width:600px) {
    header.scroll_add {
        --color: #FFF;
    }
}

/*end*/

/*sp_bg*/
.sp_bg {
    display: none;
}

/*end*/
/*======================
*
TOP
*
=======================*/
/*======================
mv
=======================*/
.top .mv_area {
    position: sticky;
    top: 0;
    padding: min(calc((118 / 1366) * 100%), 118px) 0 min(calc((370 / 1366) * 100%), 370px);
    background: url(img/top/top_mv.webp) no-repeat left top / cover;
}

/*slider*/
.top .mv_area .mv_slider__area {
    position: relative;
    z-index: 1;
    display: flex;
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.top .mv_area .mv_slider__area.active {
    opacity: 1.0;
}

.top .mv_area .mv_slider__area ul {
    display: flex;
    min-width: calc((1414 / 1366) * 100%);
    animation: loop-x 25s linear -0.5s infinite;
}

.top .mv_area .mv_slider__area ul li {
    padding-right: 8px;
}

.top .mv_area .mv_slider__area ul img {
    border-radius: 6px;
}

/*end*/

/*mv hd*/
.top .mv_area h1 {
    position: absolute;
    transform: translateX(-50%);
    top: calc((442 / 768) * 100%);
    left: 50%;
    z-index: 6;
    width: calc((1337 / 1366) * 100%);
    filter: drop-shadow(0px 0px 24px #4EA5EB);
}

.top .mv_area h1 .inner {
    display: flex;
    justify-content: space-between;
}

.top .mv_area h1 .hd {
    opacity: 0;
    transition: 0.5s ease-in-out;
}

.top .mv_area h1.active .hd {
    opacity: 1.0;
    translate: 0 0;
}

.top .mv_area h1 .hd01 {
    translate: -10px 0;
    width: calc((562 / 1337) * 100%);
}

.top .mv_area h1 .hd02 {
    translate: 10px 0;
    width: calc((619 / 1337) * 100%);
}

/*end*/

/*mv deco*/
.top .mv_area .mv_deco {
    position: absolute;
    z-index: 5;
    transform: translateX(-50%);
    left: 50%;
    bottom: 0;
    width: min(calc((284 / 1366) * 100%), 284px);
}

/*end*/

/*======================
*top message
*=======================*/
.top .top_message {
    position: relative;
    z-index: 4;
    padding-top: 320px;
    background-image: linear-gradient(to bottom, transparent 0%, #F5F6FA 14.38%, #F5F6FA 100%);
}

.top .top_message .cont_area {
    position: relative;
    width: calc((1318 / 1366) * 100%);
    margin: auto;
    border-radius: 6px 6px 0 0;
    background: url(img/top/top_message__bg.webp) no-repeat left top / cover;
    padding: calc((191 / 1366) * 100%) 0 calc((330 / 1366) * 100%);
}

.top .top_message .cont_area .cont_text {
    position: relative;
    z-index: 15;
    font-size: var(--fs15);
    font-weight: 700;
    text-align: center;
    line-height: calc(40 / 15);
}

.top .top_message .cont_area .message_deco {
    position: absolute;
    z-index: 10;
    border-radius: 6px;
    overflow: hidden;
}

.top .top_message .cont_area .message_deco01 {
    top: calc((24 / 800) * -100%);
    left: calc((228 / 1318) * 100%);
    width: calc((160 / 1318) * 100%);
}

.top .top_message .cont_area .message_deco02 {
    top: calc((48 / 800) * 100%);
    right: calc((171 / 1318) * 100%);
    width: calc((150 / 1318) * 100%);
}

.top .top_message .cont_area .message_deco03 {
    top: calc((159 / 800) * 100%);
    left: calc((59 / 1318) * 100%);
    width: calc((240 / 1318) * 100%);
}

.top .top_message .cont_area .message_deco04 {
    top: calc((284 / 800) * 100%);
    right: calc((67 / 1318) * 100%);
    width: calc((300 / 1318) * 100%);
}

.top .top_message .cont_area .message_deco05 {
    top: calc((562 / 800) * 100%);
    right: calc((325 / 1318) * 100%);
    width: calc((120 / 1318) * 100%);
}

.top .top_message .cont_area .message_deco_bg {
    z-index: 11;
    bottom: 0;
    left: calc((12 / 1318) * 100%);
    width: calc((786 / 1318) * 100%);
}

/*======================
*top company_link
*=======================*/
.top .company_link {
    position: relative;
    z-index: 5;
    background-color: var(--white);
    padding-bottom: 100px;
}

.top .company_link .cont_area {
    display: flex;
    align-items: center;
    gap: calc((64 / 1120) * 100%);
}

.top .company_link .cont_area .text_area {
    flex: 1;
}

.top .company_link .cont_area .text_area p {
    line-height: 2.0;
    margin: calc((21 / 15) * 1.0em) 0 calc((29 / 15) * 1.0em);
}

.top .company_link .cont_area .img_area {
    width: calc((744 / 1120) * 100%);
    margin-top: calc((65 / 744) * -100%);
    border-radius: 6px;
    overflow: hidden;
}

.top .company_link .bg_deco {
    position: absolute;
    z-index: -1;
}

.top .company_link .bg_deco01 {
    top: calc((104 / 468) * 100%);
    right: calc((130 / 1366) * -100%);
    width: calc((300 / 1366) * 100%);
    filter: blur(24px);
}

.top .company_link .bg_deco02 {
    left: calc((190 / 1366) * -100%);
    top: calc((271 / 468) * 100%);
    width: calc((750 / 1366) * 100%);
    filter: blur(48px);
}

/*======================
*top service_recruit_link
*=======================*/
.top .service_recruit_link {
    position: relative;
    z-index: 5;
    background-color: var(--white);
    overflow: hidden;
}

.top .service_recruit_link .bg_deco {
    position: absolute;
    z-index: -1;
    filter: blur(48px);
}

.top .service_recruit_link .bg_deco01 {
    top: calc((78 / 1721) * -100%);
    right: calc((137 / 1366) * -100%);
    width: calc((450 / 1366) * 100%);
}

.top .service_recruit_link .bg_deco02 {
    top: calc((74 / 1721) * 100%);
    left: calc((404 / 1366) * 100%);
    width: calc((120 / 1366) * 100%);
}

.top .service_recruit_link .bg_deco03 {
    top: calc((552 / 1721) * 100%);
    left: calc((314 / 1366) * 100%);
    width: calc((300 / 1366) * 100%);
}

.top .service_recruit_link .bg_deco04 {
    top: calc((907 / 1721) * 100%);
    left: calc((87 / 1366) * -100%);
    width: calc((300 / 1366) * 100%);
}

/*======================
*top service_link
*=======================*/
.top .service_link {
    position: relative;
    z-index: 5;
    padding: 100px 0;

}

.top .service_link .hd_area {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc((175 / 1240) * 100%);
    width: 100%;
    margin-bottom: 70px;
}

.top .service_link .hd_area .hd01 {
    min-width: fit-content;
}

@media (min-width:1025px) {
    .top .service_link .hd_area .btn01{
        position: relative;
        bottom: calc((6 / 15) * 1.0em);
    }
}

.top .service_link .hd_area .text_area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

.top .service_link .hd_area p.text {
    margin-right: calc((32 / 15) * 1.0em);
    line-height: 2.0;
}

.top .service_link .cont_area ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.top .service_link .cont_area ul li {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

/* .top .service_link .cont_area ul li .num {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(calc((64 / 611) * 100%), 64px);
    aspect-ratio: 1/ 1;
    font-family: var(--Arvo);
    font-size: var(--fs20);
    font-weight: 700;
    font-style: italic;
    color: var(--main-color);
    border-bottom-right-radius: 6px;
    background-color: #FFF;
}

.top .service_link .cont_area ul li .num:before,
.top .service_link .cont_area ul li .num:after {
    content: "";
    position: absolute;
    width: calc((6 / 64) * 100%);
    aspect-ratio: 1 / 1;
    background: url(img/top/top_service__deco.webp) no-repeat left top / cover;
}

.top .service_link .cont_area ul li .num:before {
    top: 0;
    left: 100%;
}

.top .service_link .cont_area ul li .num:after {
    top: 100%;
    left: 0;
} */

.top .service_link .cont_area ul li .link_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 16px;
    width: calc((580 / 611) * 100%);
    font-size: var(--fs24);
    padding: calc((19 / 24) * 1.0em) calc((24 / 24) * 1.0em);
    background-color: #FFF;
    border-radius: 4px;
}

.top .service_link .cont_area ul li .link_btn .text {
    display: flex;
    align-items: center;
    gap: calc((16 / 24) * 1.0em);
    font-weight: 900;
}

.top .service_link .cont_area ul li .link_btn>span {
    display: block;
    width: calc((24 / 580) * 100%);
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    background: url(img/common/arrow_white.webp) no-repeat var(--main-color) center / calc((11 / 24) * 100%);
    transition: 0.3s ease-in-out;
}

.top .service_link .cont_area ul li .link_btn .text .en {
    font-family: var(--Arvo);
    font-size: 0.5em;
    font-weight: 700;
    font-style: italic;
    line-height: 1.0;
    color: var(--main-color);
}

@media (any-hover:hover) {
    .top .service_link .cont_area ul li:hover .link_btn>span {
        translate: 5px 0;
    }
}

/*======================
*top recruit_link
*=======================*/
.top .recruit_link {
    position: relative;
    z-index: 5;
}

.top .recruit_link .cont_area {
    width: calc((1302 / 1366) * 100%);
    margin-left: auto;
    border-radius: 6px 0 0 6px;
    overflow: hidden;
    background: url(img/top/top_recruit__bg.webp) no-repeat left top / cover;
}

.top .recruit_link .cont_area .inner {
    display: flex;
    align-items: center;
    gap: calc((190 / 1110) * 100%);
    width: calc((1240 / 1302) * 100%);
    padding-left: calc((130 / 1302) * 100%);
}

.top .recruit_link .cont_area .text_area {
    flex: 1;
}

.top .recruit_link .cont_area .text_area p {
    color: #FFF;
    line-height: 2.0;
    margin: calc((21 / 15) * 1.0em) 0 calc((29 / 15) * 1.0em);
}

.top .recruit_link .cont_area .slider_area {
    display: flex;
    gap: 6px;
    width: calc((616 / 1110) * 100%);
    max-height: 560px;
    overflow: hidden;
}

.top .recruit_link .cont_area .slider_area .slider {
    flex: 1 1;
    min-height: max-content !important;
    max-height: unset !important;
}

.top .recruit_link .cont_area .slider_area ul {
    display: flex;
    flex-direction: column;
}

.top .recruit_link .cont_area .slider_area .slider:nth-of-type(1) ul {
    animation: loop-y 18.0s linear infinite;
}

.top .recruit_link .cont_area .slider_area .slider:nth-of-type(2) ul {
    flex-direction: column-reverse;
    animation: loop-y_reverse 18.0s linear -0.5s infinite;
}

.top .recruit_link .cont_area .slider_area ul li {
    padding-bottom: 6px;
    overflow: hidden;
}

.top .recruit_link .cont_area .slider_area ul li img {
    border-radius: 6px;
}

/*======================
*
under
*
=======================*/
/*======================
page
=======================*/
.under .head_area01 {
    position: relative;
    padding: 100px 0 0;
    margin: 65px auto 0;
}

.under .head_area01 .hd_area {
    width: min(calc((1240 / 1366) *100%), 1920px);
    margin: auto;
}

.under .head_area01 .hd_area h1 {
    font-size: var(--fs46);
    font-weight: 900;
    text-align: center;
    padding-bottom: 40px;
}

.under .head_area01 .hd_area h1 span.en {
    display: block;
    font-family: var(--Arvo);
    font-weight: 700;
    font-style: italic;
    font-size: calc((13 / 46) * 1.0em);
    color: var(--main-color);
    margin: calc((8 / 13) * 1.0em) auto 0;
}

/*btn__bg*/
.under .head_area01 .btn__bg {
    position: relative;
}

.under .head_area01 .btn__bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1366 / 240;
    background-image: linear-gradient(to bottom, #F5F6FA, transparent);
}

.under .head_area01 .btn__bg .btn_area {
    position: absolute;
    z-index: 5;
    transform: translateX(-50%);
    top: 0;
    left: 50%;
}

.under .head_area01 .btn__bg .btn_area ul {
    display: flex;
    gap: calc((32 / 15) * 1.0em);
    font-size: var(--fs15);
    font-weight: 700;
    padding: calc((14 / 15) * 1.0em)calc((32 / 15) * 1.0em);
    border: solid 1px var(--gray);
    border-radius: 50px;
    background-color: var(--white);
}

.under .head_area01 .btn__bg .btn_area ul li {
    display: flex;
    gap: calc((7.5 / 15) * 1.0em);
    align-items: center;
    position: relative;
    text-decoration: underline;
    white-space: nowrap;
}

.under .head_area01 .btn__bg .btn_area ul li::before {
    content: "";
    width: calc((9 / 15) * 1.0em);
    aspect-ratio: 9 / 11;
    background: url(img/common/arrow_black.webp) no-repeat left top / 100%;
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    .under .head_area01 .btn__bg .btn_area ul li:hover::before {
        translate: 0 3px;
    }
}

/*end*/

/*breadcrumbs*/
.under :is(.head_area01, .head_area02, .head_recruit) .breadcrumbs {
    transform: translateX(-50%);
    top: 24px;
    left: 50%;
    width: min(calc((1240 / 1366) *100%), 1920px);
    margin: auto;
}


/*end*/

/*======================
*
compnay
*
=======================*/
/*======================
message
=======================*/
.under.company .message_sec {
    padding: 160px 0;
    background: url(img/under/company/compnay_message__bg.webp) no-repeat left top / cover;
}

.under.company .message_sec .hd_area {
    margin-bottom: 80px;
}

.under.company .message_sec .flex_cont {
    display: flex;
    gap: calc((67 / 1120) * 100%);
    color: #FFF;
}

.under.company .message_sec .flex_cont h3 {
    font-size: var(--fs46);
    font-weight: 900;
    line-height: calc(66 / 46);
    width: fit-content;
}

.under.company .message_sec .flex_cont p {
    flex: 1;
    line-height: 2.0;
}

/*======================
profile history
=======================*/
.under.company :is(.profile_sec, .history_sec) .cont_area {
    display: flex;
    align-items: flex-start;
    gap: calc((170 / 1120) * 100%);
}

.under.company :is(.profile_sec, .history_sec) .cont_area .table_cont {
    display: grid;
    grid-template-columns: auto 1fr;
    flex: 1;
    font-size: var(--fs15);
}

.under.company :is(.profile_sec, .history_sec) .cont_area .table_cont :is(.th, .td) {
    padding: calc((20 / 15) * 1.0em) 0;
    line-height: 2.0;
    border-top: solid 1px var(--gray);
}

.under.company :is(.profile_sec, .history_sec) .cont_area .table_cont :is(.th, .td):nth-last-of-type(2) {
    border-bottom: solid 1px var(--gray);
}

.under.company :is(.profile_sec, .history_sec) .cont_area .table_cont :is(.th, .td):last-of-type {
    border-bottom: solid 1px var(--gray);
}

.under.company :is(.profile_sec, .history_sec) .cont_area .table_cont .th {
    font-weight: 700;
    padding-right: calc((106 / 15) * 1.0em);
}


/*======================
profile
=======================*/
.under.company .profile_sec {
    padding: 160px 0;
}

/*======================
certified_professional
=======================*/
.under.company .certified_professional__sec .head_area.sticky {
    top: calc(var(--header, 80px) - 12px);
}

.under.company .certified_professional__sec .cont_area {
    position: relative;
    z-index: 5;
    padding-top: 80px;
    padding-bottom: 200px;
    background-color: var(--white);
}

.under.company .certified_professional__sec .cont_area .hd_area {
    margin-bottom: 80px;
}

.under.company .certified_professional__sec .cont_area ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1.0em;
}

.under.company .certified_professional__sec .cont_area ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    font-size: var(--fs15);
}

.under.company .certified_professional__sec .cont_area ul li::before {
    content: "";
    position: relative;
    top: calc((8 / 15) * 1.0em);
    min-width: 8px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--main-color);
}

/*======================
philosophy
=======================*/
.under.company .philosophy_sec {
    background-color: var(--white2);
}

.under.company .philosophy_sec .cont_area {
    display: flex;
    align-items: stretch;
    gap: calc((120 / 1240) * 100%);
    width: calc((1240 / 1366) * 100%);
    margin-left: auto;
}

.under.company .philosophy_sec .cont_area .text_area {
    flex: 1;
    font-size: var(--fs15);
    position: sticky;
    top: 0;
    height: fit-content;
    padding: calc((80 / 15) * 1.0em) 0;
}

.under.company .philosophy_sec .cont_area .text_area h3 {
    font-size: 2.0em;
    font-weight: 900;
    margin: calc((80 / 30) * 1.0em) 0 calc((21 / 30) * 1.0em);
}

.under.company .philosophy_sec .cont_area .text_area p {
    line-height: 2.0;
}

.under.company .philosophy_sec .cont_area .img_area {
    width: calc((683 / 1240) * 100%);
}

.under.company .philosophy_sec .cont_area .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*======================
history
=======================*/
.under.company .history_sec {
    padding: 160px 0 0;
}

.under.company .history_sec .cont_area .table_cont .th {
    padding-right: calc((16 / 15) * 1.0em);
}

.under.company .history_sec .cont_area .table_cont .td .inner {
    display: flex;
    gap: calc((95 / 15) * 1.0em);
}

.under.company .history_sec .cont_area .table_cont .td .inner+.inner {
    margin-top: calc((21 / 15) * 1.0em);
    padding-top: calc((21 / 15) * 1.0em);
    border-top: solid 1px var(--gray);
}

.under.company .history_sec .cont_area .table_cont .td .inner span {
    font-weight: 700;
    min-width: calc((28 / 15) * 1.0em);
}

/*======================
*
service
*
=======================*/
.under.service .head_area .head_cont {
    display: flex;
    align-items: stretch;
}

.under.service .head_area .head_cont .bg {
    position: relative;
    display: block;
    width: calc((342/ 1366) * 100%);
    height: auto;
    background: no-repeat left top / cover;
}

.under.service .head_area .head_cont .bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 342 / 240;
    background-image: linear-gradient(to bottom, #F5F6FA, transparent);
}

.under.service .head_area .head_cont .bg01 {
    background-image: url(img/under/service/head_service_01.webp);
}

.under.service .head_area .head_cont .bg02 {
    background-image: url(img/under/service/head_service_02.webp);
}

.under.service .head_area .head_cont .text_area {
    flex: 1;
    font-size: var(--fs24);
    padding: 0 calc((123 / 24) * 1.0em) calc((144 / 24) * 1.0em);
}

.under.service .head_area .head_cont .text_area h2 {
    font-size: 1.0em;
    font-weight: 900;
    text-align: center;
}

.under.service .head_area .head_cont .text_area p {
    line-height: 2.0em;
    margin-top: calc((29 / 15) * 1.0em);
}

/*======================
service link
=======================*/
.under.service .service_link__sec .link_sec {
    width: calc((1302 / 1366) * 100%);
}

.under.service .service_link__sec .link_sec+.link_sec {
    margin-top: 64px;
}

.under.service .service_link__sec .link_sec:nth-of-type(even) {
    margin-left: auto;
}

.under.service .service_link__sec .link_sec .cont_area {
    display: flex;
    align-items: center;
    gap: calc((64 / 1302) * 100%);
}

.under.service .service_link__sec .link_sec:nth-of-type(even) .cont_area {
    flex-direction: row-reverse;
}

.under.service .service_link__sec .link_sec .cont_area .img_area {
    width: calc((788 / 1302) * 100%);
    border-radius: 0 6px 6px 0;
    overflow: hidden;
}

.under.service .service_link__sec .link_sec:nth-of-type(even) .cont_area .img_area {
    border-radius: 6px 0 0 6px;
}

.under.service .service_link__sec .link_sec .cont_area .text_area {
    flex: 1;
}

.under.service .service_link__sec .link_sec .cont_area .text_area .hd {
    display: flex;
    align-items: center;
    font-size: var(--fs24);
}

.under.service .service_link__sec .link_sec .cont_area .text_area .hd .num {
    font-family: var(--Arvo);
    font-size: calc((45 / 24) * 1.0em);
    font-weight: 700;
    font-style: italic;
    line-height: 1.0;
    color: var(--main-color);
    padding-right: calc((24 / 45) * 1.0em);
    margin-right: calc((16 / 45) * 1.0em);
    border-right: solid 1px var(--gray);
}

.under.service .service_link__sec .link_sec .cont_area .text_area .hd h3 {
    font-size: 1.0em;
    font-weight: 900;
}

.under.service .service_link__sec .link_sec .cont_area .text_area .hd h3 span.en {
    display: block;
    font-family: var(--Arvo);
    font-size: calc((15 / 24) * 1.0em);
    font-weight: 700;
    font-style: italic;
    line-height: 1.0;
    color: var(--main-color);
    margin-top: 5px;
}

.under.service .service_link__sec .link_sec .cont_area .text_area .cont_text h4 {
    font-size: var(--fs30);
    font-weight: 900;
    margin-top: calc((48 / 30) * 1.0em);
    margin-bottom: calc((13 / 30) * 1.0em);
}

.under.service .service_link__sec .link_sec .cont_area .text_area .cont_text p.text {
    line-height: 2.0;
    margin-bottom: calc((25 / 15) * 1.0em);
}

.under.service .service_link__sec .link_sec .cont_area .text_area a+a {
    margin-top: calc((12 / 15) * 1.0em);
}

/*======================
service case
=======================*/
.under.service .case_sec {
    padding: 100px 0;
    margin-top: 100px;
    background: url(img/under/service/service_case__bg.webp) no-repeat left top / cover;
}

.under.service .case_sec .cont_area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 48px;
}

.under.service .case_sec .cont_area .cont {
    display: flex;
    align-items: center;
    gap: calc((28 / 20) * 1.0em);
    font-size: var(--fs20);
    padding: calc((32 / 20) * 1.0em) calc((32 / 20) * 1.0em) calc((32 / 20) * 1.0em) calc((28 / 20) * 1.0em);
    border-radius: 6px;
    background-color: #FFF;
}

.under.service .case_sec .cont_area .cont .icn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((80 / 308) * 100%);
}

.under.service .case_sec .cont_area .cont .icn img {
    object-fit: contain;
}

.under.service .case_sec .cont_area .cont01 .icn img {
    width: calc((72 / 80) * 100%);
}

.under.service .case_sec .cont_area .cont02 .icn img {
    width: 100%;
}

.under.service .case_sec .cont_area .cont03 .icn img {
    width: calc((60 / 80) * 100%);
}

.under.service .case_sec .cont_area .cont .text_area {
    flex: 1;
}

.under.service .case_sec .cont_area .cont .text_area p {
    font-weight: 700;
    line-height: calc(30 / 20);
}

.under.service .case_sec .cont_area .cont .text_area span {
    display: block;
    font-size: calc(((12 / 20) * 1.0em));
    margin-top: calc((8 / 12) * 1.0em);
}

/*======================
*
service child
*
=======================*/
/*head*/
.under.service_child .head_area {
    padding-top: 60px;
}

.under.service_child .head_area .cont_area {
    position: relative;
    padding-top: calc((222 / 1366) * 100%);
    padding-bottom: calc((153 / 1366) * 100%);
    background: no-repeat left top / cover;
}

/*見出し*/
.under.service_child .head_area h1 {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: var(--fs46);
    font-weight: 900;
    color: #FFF;
    padding: calc((32 / 46) * 1.0em) calc((80 / 1366) * 100%) 0 calc((64 / 1366) * 100%);
    border-radius: 0 calc((6 / 46) * 1.0em) 0 0;
    background-color: #48BADD;
}

.under.service_child .head_area h1 .en {
    font-family: var(--Arvo);
    font-size: calc((13 / 46) * 1.0em);
    font-weight: 700;
    font-style: italic;
    line-height: 1.0;
}

/*end*/


/*キャッチ*/
.under.service_child .head_area .cont_area .catch_text {
    display: flex;
    flex-direction: column;
    gap: calc((4 / 24) * 1.0em);
    width: calc((1240 / 1366) * 100%);
    font-size: var(--fs24);
    font-weight: 900;
    color: #FFF;
    margin: auto;
}

.under.service_child .head_area .cont_area .catch_text span {
    width: fit-content;
    padding: calc((2 / 24) * 1.0em) calc((8 / 24) * 1.0em);
    border-radius: 2px;
    background-color: var(--main-color);
}

.under.service_child .head_area .cont_area .catch_text {
    width: calc((1240 / 1366) * 100%);
    margin: auto;
}

/*end*/

/*message*/
.under.service_child .message_sec {
    position: relative;
    z-index: 4;
    padding: 120px 0 180px;
    background-image: var(--grade01);
}

.under.service_child .message_sec .cont_area.flex {
    display: flex;
    align-items: stretch;
    gap: calc((45 / 1120) * 100%);
}

.under.service_child .message_sec .cont_area .text_area {
    flex: 1;
    color: #FFF;
}

.under.service_child .message_sec .cont_area .text_area h2 {
    font-size: var(--fs30);
    font-weight: 900;
    margin-bottom: calc((15 / 30) * 1.0em);
}

.under.service_child .message_sec .cont_area .text_area p {
    line-height: 2.0;
}

.under.service_child .message_sec .cont_area .img_area {
    width: calc((536 / 1120) * 100%);
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
}

.under.service_child .message_sec .cont_area+.cont_area {
    padding-top: 48px;
    margin-top: 48px;
    border-top: solid 1px #FFF;
}

.under.service_child .message_sec .cont_area+.cont_area .text_area h3 {
    font-size: var(--fs24);
    font-weight: 900;
    margin-bottom: calc((13 / 24) * 1.0em);
}

.under.service_child .message_sec .cont_area+.cont_area .grid_cont {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: calc((712 / 1120) * 100%);
}

.under.service_child .message_sec .cont_area+.cont_area .grid_cont .cont {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc((18 / 15) * 1.0em);
    font-size: var(--fs15);
    border-radius: 6px;
    background-color: #FFF;
}

.under.service_child .message_sec .cont_area+.cont_area .grid_cont .cont .icn {
    width: calc((120 / 15) * 1.0em);
}

.under.service_child .message_sec .cont_area+.cont_area .grid_cont .cont h4 {
    font-size: 1.0em;
    margin-bottom: calc((9 / 15) * 1.0em);
}

.under.service_child .message_sec .cont_area+.cont_area .grid_cont .cont p.text {
    line-height: 2.0em;
}

/*end*/

/*service_child__cont*/
.under.service_child .service_child__cont {
    position: relative;
    z-index: 5;
    margin-top: -100px;
    padding: 80px 0;
    border-radius: 6px;
    background-color: #FFF;
}

.under.service_child .service_child__cont .cont_sec+.cont_sec {
    padding-top: 80px;
    margin-top: 80px;
    border-top: solid 1px var(--gray);
}


/*コンテンツ内 見出し*/
.under.service_child .service_child__cont .service_child__hd {
    position: relative;
    z-index: 5;
    width: calc((960 / 1120) * 100%);
    font-size: var(--fs30);
    margin: auto;
}

.under.service_child .service_child__cont .service_child__hd:has(~ .img_area) {
    margin-bottom: calc((36 / 30) * -1.0em);
}

.under.service_child .service_child__cont .service_child__hd h2 {
    display: flex;
    flex-direction: column;
    gap: calc((4 / 30) * 1.0em);
    font-size: 1.0em;
}

.under.service_child .service_child__cont .service_child__hd h2 span {
    width: fit-content;
    font-weight: 900;
    color: #FFF;
    padding: calc((2 / 30) * 1.0em) calc((8 / 30) * 1.0em);
    border-radius: 2px;
    background-image: var(--grade02);
}

.under.service_child .service_child__cont .service_child__hd .en {
    position: absolute;
    z-index: -1;
    top: -0.05em;
    right: 0;
    font-family: var(--Arvo);
    font-size: calc((64 / 30) * 1.0em);
    font-weight: 700;
    font-style: italic;
    line-height: 1.0;
    color: var(--main-color);
    white-space: nowrap;
}

.under.service_child .service_child__cont .service_child__hd p.text {
    margin-top: 23px;
}

.under.service_child .service_child__cont .service_child__hd+.img_area {
    padding: 0 calc((80 / 1120) * 100%);
}

@media (min-width:1025px) and (max-height:766px) {
    .under.service_child .service_child__cont .service_child__hd+.img_area img {
        max-height: calc(81dvh - var(--header));
        margin: auto;
    }
}

/*end*/

/*annotation*/
.under.service_child .service_child__cont .cont_area p.annotation {
    display: flex;
    font-size: var(--fs12);
    letter-spacing: -0.02em;
    margin-top: calc((13 / 12) * 1.0em);
}

/*end*/
/*======================
*
renewal
*
=======================*/
.under.service_child.renewal .head_area .cont_area {
    background-image: url(img/under/renewal/head_renewal.webp);
}

/*cont_area*/
.under.service_child.renewal .cont_area .cont {
    display: flex;
    align-items: center;
    gap: calc((48 / 960) * 100%);
    padding: 48px calc((80 / 1120) * 100%);
}

.under.service_child.renewal .cont_area .cont+.cont {
    border-top: solid 1px var(--gray);
}

.under.service_child.renewal .cont_area .cont .img_area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc((212 / 960) * 100%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.under.service_child.renewal .cont_area .cont .img_area::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--grade02);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.1;
}

.under.service_child.renewal .cont_area .cont .img_area .num {
    font-family: var(--Arvo);
    font-size: var(--fs15);
    font-weight: 700;
    font-style: italic;
    color: var(--main-color);
    margin-bottom: calc((18 / 15) * 1.0em);
}

.under.service_child.renewal .cont_area .cont .img_area .icn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((80 / 212) * 100%);
}

.under.service_child.renewal .cont_area .cont .img_area .icn img {
    max-height: 80px;
    object-fit: contain;
}

.under.service_child.renewal .cont_area .cont .text_area {
    flex: 1;
}

.under.service_child.renewal .cont_area .cont .text_area h3 {
    font-size: var(--fs24);
    font-weight: 900;
    margin-bottom: calc((13 / 24) * 1.0em);
}

.under.service_child.renewal .cont_area .cont .text_area h3 span {
    color: var(--main-color);
}

.under.service_child.renewal .cont_area .cont .text_area p {
    line-height: 2.0;
}

/*end*/

/*======================
*
directwater
*
=======================*/
.under.service_child.directwater .head_area .cont_area {
    background-image: url(img/under/directwater/head_directwater.webp);
}

/*merit cont_area*/
.under.service_child.directwater .cont_area.merit {
    width: calc((960 / 1120) * 100%);
    margin: 50px auto 0;
}

.under.service_child.directwater .cont_area.merit:has(.grid_cont)+.cont_area.merit:has(.grid_cont) {
    padding-top: 30px;
    margin-top: 30px;
    border-top: solid 1px var(--gray);
}

.under.service_child.directwater .cont_area.merit+.cont_area.merit {
    margin-top: 30px;
    padding-top: 30px;
    border-top: solid 1px var(--gray);
}

.under.service_child.directwater .cont_area.merit .grid_cont {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc((60 / 960) * 100%);
    position: relative;
}

.under.service_child.directwater .cont_area.merit .grid_cont::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    border-left: solid 1px var(--gray);
}

/*見出し*/
.under.service_child.directwater .cont_area.merit .cont .cont_hd {
    display: flex;
    align-items: center;
    gap: calc((16 / 24) * 1.0em);
    font-size: var(--fs24);
    margin-bottom: calc((13 / 24) * 1.0em);
}

.under.service_child.directwater .cont_area.merit .cont .cont_hd .icn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((48 / 24) * 1.0em);
    aspect-ratio: 1 / 1;
}

.under.service_child.directwater .cont_area.merit .cont .cont_hd .icn img {
    max-height: 48px;
    object-fit: contain;
}

.under.service_child.directwater .cont_area.merit .cont .cont_hd .hd h3 {
    display: flex;
    flex-direction: column;
    font-size: 1.0em;
    font-weight: 900;
}

.under.service_child.directwater .cont_area.merit .cont .cont_hd .hd h3 span.num {
    font-family: var(--Arvo);
    font-size: calc((12 / 24) * 1.0em);
    font-weight: 700;
    font-style: italic;
    color: var(--main-color);
    line-height: 1.0;
}

/*text*/
.under.service_child.directwater .cont_area.merit .cont .text {
    line-height: 2.0;
}

/*end*/


/*attention cont_area*/
.under.service_child.directwater .cont_area.attention {
    width: calc((960 / 1120) * 100%);
    margin: 50px auto 0;
    padding: calc((32 / 960) * 100%) 32px;
    border-radius: 6px;
    background-color: #F5F6FA;
}

.under.service_child.directwater .cont_area.attention .hd_area {
    display: flex;
    align-items: center;
    gap: calc((24 / 20) * 1.0em);
    font-size: var(--fs20);
    margin-bottom: calc((16 / 24)* 1.0em);
}

.under.service_child.directwater .cont_area.attention .hd_area h3 {
    font-size: 1.0em;
    min-width: fit-content;
}

.under.service_child.directwater .cont_area.attention .hd_area p {
    font-size: calc((13 /20) * 1.0em);
    letter-spacing: -0.02em;
}

.under.service_child.directwater .cont_area.attention .grid_cont {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.under.service_child.directwater .cont_area.attention .grid_cont .cont {
    font-size: var(--fs15);
    padding: calc((32 / 15) * 1.0em);
    border-radius: 6px;
    background-color: #FFF;
}

.under.service_child.directwater .cont_area.attention .grid_cont .cont .hd {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: calc((7 / 15) * 1.0em);
}

.under.service_child.directwater .cont_area.attention .grid_cont .cont .hd img {
    width: calc((20 / 15) * 1.0em);
}

.under.service_child.directwater .cont_area.attention .grid_cont .cont .hd h4 {
    font-weight: 900;
    color: #E33A68;
}

.under.service_child.directwater .cont_area.attention .grid_cont .cont>p {
    line-height: 2.0;
}

/*end*/

/*type cont_area*/
.under.service_child.directwater .cont_area.type .grid_cont {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc((60 / 960) * 100%);
    position: relative;
    width: calc((960 / 1120) * 100%);
    margin: 48px auto 0;
}

.under.service_child.directwater .cont_area.type .grid_cont::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    border-left: solid 1px var(--gray);
}

.under.service_child.directwater .cont_area.type .grid_cont .hd {
    font-size: var(--fs24);
    margin-bottom: calc((13 / 24) * 1.0em);
}

.under.service_child.directwater .cont_area.type .grid_cont .hd .num {
    display: block;
    font-family: var(--Arvo);
    font-size: calc((12 / 24) * 1.0em);
    font-weight: 700;
    font-style: italic;
    color: var(--color);
    line-height: 1.0;
    margin-bottom: 5px;
}

.under.service_child.directwater .cont_area.type .grid_cont .hd h3 {
    font-size: 1.0em;
}

.under.service_child.directwater .cont_area.type .grid_cont .hd h3 span {
    font-weight: 900;
    color: var(--color);
}

.under.service_child.directwater .cont_area.type .grid_cont p.text {
    line-height: 2.0;
}

/*end*/

/*======================
*
maintenance
*
=======================*/
.under.service_child.maintenance .head_area .cont_area {
    background-image: url(img/under/maintenance/head_maintenance.webp);
}

/*cont_area*/
.under.service_child.maintenance .cont_sec .hd_area {
    margin-bottom: 48px;
}

/*flow cont_area*/
.under.service_child.maintenance .cont_area.flow {
    width: calc((960 / 1120) * 100%);
    margin: calc((32 / 24) * -1.0em) auto;
    font-size: var(--fs24);
}

.under.service_child.maintenance .cont_area.flow .flow_cont {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc((32 / 1120) * 100%);
}

.under.service_child.maintenance .cont_area.flow .flow_cont .icn_wrapper {
    width: min(calc((64 / 960) * 100%), 64px);
}

.under.service_child.maintenance .cont_area.flow .flow_cont .flow_icn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-image: var(--grade03);
}

.under.service_child.maintenance .cont_area.flow .flow_cont .flow_icn .icn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: calc((32 / 64) * 100%);
    aspect-ratio: 1 / 1;
}

.under.service_child.maintenance .cont_area.flow .flow_cont .flow_icn .line {
    position: absolute;
    top: calc((32 / 64) * 100%);
    left: 50%;
    transform: translate(-50%, 0);
    width: 4px;
    height: var(--to-next-center);
}

.under.service_child.maintenance .cont_area.flow .flow_cont .flow_icn .line::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: max(var(--height), 30px);
    background: radial-gradient(circle, var(--main-color) 2px, transparent 2px) repeat-y left top / 4px 10px;
}

.under.service_child.maintenance .cont_area.flow .flow_cont .flow_icn .icn img {
    max-height: 32px;
    object-fit: contain;
}

.under.service_child.maintenance .cont_area.flow .flow_cont .text_area {
    display: flex;
    align-items: center;
    gap: calc((48 / 864) * 100%);
    flex: 1;
    padding: calc((32 / 24) * 1.0em) 0;
}

.under.service_child.maintenance .cont_area.flow .flow_cont+.flow_cont .text_area {
    border-top: solid 1px var(--gray);
}

.under.service_child.maintenance .cont_area.flow .flow_cont .hd {
    flex: 1;
}

.under.service_child.maintenance .cont_area.flow .flow_cont .hd .num {
    display: block;
    font-family: var(--Arvo);
    font-size: calc((12 / 24) * 1.0em);
    font-weight: 700;
    font-style: italic;
    color: var(--main-color);
    line-height: 1.0;
    margin-bottom: 5px;
}

.under.service_child.maintenance .cont_area.flow .flow_cont .hd h3 {
    font-size: 1.0em;
    font-weight: 900;
}

.under.service_child.maintenance .cont_area.flow .flow_cont .text_area p.text {
    width: calc((576 / 864) * 100%);
    line-height: 2.0;
}

/*end*/

/*lineup cont_area*/
.under.service_child.maintenance .cont_area.lineup {
    width: calc((960 / 1120) * 100%);
    margin: auto;
}

.under.service_child.maintenance .cont_area.lineup .grid_cont+.grid_cont {
    padding-top: 30px;
    margin-top: 30px;
    border-top: solid 1px var(--gray);
}

.under.service_child.maintenance .cont_area.lineup .grid_cont .inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc((60 / 960) * 100%);
}

.under.service_child.maintenance .cont_area.lineup .grid_cont .inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    border-left: solid 1px var(--gray);
}

.under.service_child.maintenance .cont_area.lineup .grid_cont .cont {
    display: flex;
    gap: calc((24 / 480) * 100%);
}

.under.service_child.maintenance .cont_area.lineup .grid_cont .cont .img_area {
    width: calc((160 / 480) * 100%);
    border-radius: 6px;
    overflow: hidden;
}

.under.service_child.maintenance .cont_area.lineup .grid_cont .cont .text_area {
    flex: 1;
    font-size: var(--fs24);
}

.under.service_child.maintenance .cont_area.lineup .grid_cont .cont .text_area h3 {
    font-size: 1.0em;
    font-weight: 900;
}

.under.service_child.maintenance .cont_area.lineup .grid_cont .cont .text_area p {
    line-height: 2.0;
    margin-top: calc((13 / 15) * 1.0em);
}

/*end*/

/*======================
*
security
*
=======================*/
.under.security .security_sec {
    margin-top: 24px;
    padding: 80px calc((80 / 1120) * 100%);
    border-radius: 6px;
    background-color: #FFF;
}

.under.security .security_sec .text {
    line-height: 2.0;
}

.under.security .security_sec .cont_area {
    margin-top: 45px;
}

.under.security .security_sec .cont_area .cont {
    font-size: var(--fs20);
    padding: calc((45 / 20) * 1.0em) 0;
    border-top: solid 1px var(--gray);
}

.under.security .security_sec .cont_area .cont h3 {
    font-weight: 900;
    color: var(--main-color);
    margin-bottom: calc((13 / 20) * 1.0em);
}

.under.security .security_sec .cont_area .day__name {
    text-align: end;
}

/*======================
*
recruit
*
=======================*/
main[class*="recruit"] {
    color: var(--navy);
}

main.recruit .head_area {
    position: relative;
    padding: calc((144 / 1366) * 100%) 0 calc((340 / 1366) * 100%);
    margin-top: 60px;
}

main.recruit .head_area .hd_area {
    position: relative;
    z-index: 5;
    width: calc((816 / 1366) * 100%);
    margin: auto;
}

main.recruit .head_area .hd_area h1 {
    position: relative;
    z-index: 2;
    margin: auto;
}

main.recruit .head_area .hd_area .deco {
    position: absolute;
    z-index: 3;
    transform: rotate(-10deg);
    right: calc((19 / 816) * -100%);
    bottom: calc((10 / 223) * -100%);
    width: calc((119 / 816) * 100%);
    filter: drop-shadow(0px 0px 12px rgba(0, 6, 136, 0.3));
}

main.recruit .head_area .card_area {
    position: absolute;
    transform: translateX(-50%);
    top: calc((358 / 768) * 100%);
    left: 50%;
    width: calc((1808 / 1366) * 100%);
    aspect-ratio: 1808 / 440;
}

main.recruit .head_area .card_area .recruit_card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc((330 / 1808) * 100%);
    border-radius: 6px;
}

main.recruit .head_area .card_area .recruit_card01 {
    z-index: 5;
}

main.recruit .head_area .card_area .recruit_card02 {
    z-index: 4;
}

main.recruit .head_area .card_area.active .recruit_card02 {
    animation: card_move01 cubic-bezier(0.583, 0.33, 0.508, 1.004) 2.0s 0.5s forwards;
}

@keyframes card_move01 {
    to {
        transform: rotate(-10deg);
        top: calc((30 / 440) * 100%);
        left: calc((365 / 1808) * 100%);
    }
}

main.recruit .head_area .card_area .recruit_card03 {
    z-index: 4;
}

main.recruit .head_area .card_area.active .recruit_card03 {
    animation: card_move02 cubic-bezier(0.583, 0.33, 0.508, 1.004) 2.0s 0.5s forwards;
}

@keyframes card_move02 {
    to {
        transform: rotate(10deg);
        top: calc((30 / 440) * 100%);
        left: calc((1115 / 1808) * 100%);
    }
}

main.recruit .head_area .card_area .recruit_card04 {
    z-index: 3;
    opacity: 0;
}

main.recruit .head_area .card_area.active .recruit_card04 {
    animation: card_move03 cubic-bezier(0.583, 0.33, 0.508, 1.004) 2.0s 0.3s forwards;
}

@keyframes card_move03 {
    to {
        transform: rotate(-20deg);
        top: calc((138 / 440) * 100%);
        left: 0;
        opacity: 1.0;
    }
}

main.recruit .head_area .card_area .recruit_card05 {
    z-index: 3;
    opacity: 0;
}

main.recruit .head_area .card_area.active .recruit_card05 {
    animation: card_move04 cubic-bezier(0.583, 0.33, 0.508, 1.004) 2.0s 0.3s forwards;
}

@keyframes card_move04 {
    to {
        transform: rotate(20deg);
        top: calc((138 / 440) * 100%);
        left: calc((1478 / 1808) * 100%);
        opacity: 1.0;
    }
}

/*fixed bg*/
main[class*="recruit"] .fixed_bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: url(img/recruit/recruit_bg__fixed.webp) no-repeat left top / cover;
}

/*end*/

/*recruit foot btn*/
main[class*="recruit"] .recruit_foot__btn {
    display: flex;
    gap: calc((30 / 1240) * 100%);
    margin-top: 100px;
}

main[class*="recruit"] .recruit_foot__btn [class$="_btn"] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    transition: 0.3s ease-in-out;
}

main[class*="recruit"] .recruit_foot__btn .requirement_btn {
    font-size: var(--fs20);
    width: calc((393 / 1240) * 100%);
    color: #FFF;
    padding: calc((71 / 20) * 1.0em) 10px;
    background-color: var(--navy);
}

main[class*="recruit"] .recruit_foot__btn .entry_btn {
    font-size: var(--fs24);
    flex: 1;
    padding: calc((53 / 24) * 1.0em) 10px;
    border: solid 4px var(--navy);
}

main[class*="recruit"] .recruit_foot__btn [class$="_btn"] p {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 900;
}

main[class*="recruit"] .recruit_foot__btn [class$="_btn"] p .en {
    font-family: var(--Arvo);
    font-style: italic;
    font-weight: 700;
    line-height: 1.0;
}

main[class*="recruit"] .recruit_foot__btn .requirement_btn .en {
    font-size: calc((24 / 20) * 1.0em);
    margin-bottom: calc((5 / 24) * 1.0em);
}

main[class*="recruit"] .recruit_foot__btn .entry_btn .en {
    font-size: calc((80 / 24) * 1.0em);
}

main[class*="recruit"] .recruit_foot__btn [class$="_btn"] .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transition: 0.3s ease-in-out;
}

main[class*="recruit"] .recruit_foot__btn .requirement_btn .arrow {
    right: calc((32 / 20) * 1.0em);
    width: calc((28 / 20) * 1.0em);
    background: url(img/common/arrow_navy.webp) no-repeat #FFF 50% / calc((10 / 20) * 1.0em);
}

main[class*="recruit"] .recruit_foot__btn .entry_btn .arrow {
    right: calc((55 / 24) * 1.0em);
    width: calc((56 / 24) * 1.0em);
    background: url(img/common/arrow_white.webp) no-repeat var(--navy) 50% / calc((20 / 24) * 1.0em);
}

@media (any-hover:hover) {
    main[class*="recruit"] .recruit_foot__btn [class$="_btn"]:hover {
        opacity: 0.75;
    }

    main[class*="recruit"] .recruit_foot__btn [class$="_btn"]:hover .arrow {
        translate: 5px 0;
    }
}

/*======================
recruit top message
=======================*/
main.recruit section.recruit_message_sec {
    padding-top: calc((100 / 1366) * 100%);
}

main.recruit section.recruit_message_sec {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
}

main.recruit section.recruit_message_sec img {
    width: calc((640 / 1366) * 100%);
    margin: auto;
}

main.recruit section.recruit_message_sec .text_area {
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
    font-size: var(--fs24);
    font-weight: 700;
    letter-spacing: 0.01em;
    clip-path: inset(0 0 100% 0);
}

main.recruit section.recruit_message_sec p {
    font-size: max(calc((18 / 24) * 1.0em), 15px);
    line-height: calc(42 / 18);
    margin-top: calc((38 / 18) * 1.0em);
    margin-bottom: calc((27 / 18) * 1.0em);
}

main.recruit section.recruit_message_sec h2 {
    font-size: 1.0em;
    line-height: 2.0em;
}

/*======================
recruit top link btn
=======================*/
main.recruit .link_btn__area {
    padding: 48px 0;
    margin: 75px 0 120px;
    border-top: solid 1px #FFF;
    border-bottom: solid 1px #FFF;
}

main.recruit .link_btn__area .grid_cont {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px calc((7 / 1240) * 100%);
}

main.recruit .link_btn__area .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs15);
    font-weight: 900;
    padding: calc((24 / 15) * 1.0em);
    background-color: #FFF;
    border-radius: 50px;
    transition: 0.3s ease-in-out;
}

main.recruit .link_btn__area .btn span.arrow {
    display: block;
    width: calc((28 / 15) * 1.0em);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: url(img/common/arrow_white.webp) var(--navy) no-repeat 50% / calc((11 / 15) * 1.0em);
}

main.recruit .link_btn__area .btn.anker_btn span.arrow {
    rotate: 90deg;
}

@media (any-hover:hover) {
    main.recruit .link_btn__area .btn:hover {
        opacity: 0.75;
    }
}

/*======================
recruit top recruit_cont_sec
=======================*/
main.recruit .recruit_cont_sec {
    position: relative;
    z-index: 5;
    padding: 64px 0;
    overflow: hidden;
}

main.recruit .recruit_cont_sec+.recruit_cont_sec {
    margin-top: 80px;
}

main.recruit .recruit_cont_sec::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: calc((1240 / 1366) * 100%);
    height: 100%;
    border: solid 4px #FFF;
    border-radius: 16px;
}

/*deco*/
main.recruit .recruit_cont_sec span.deco {
    position: absolute;
    top: -0.08em;
    left: 50%;
    transform: translateX(-50%);
    width: calc((1240 / 1366) * 100%);
    font-family: var(--Arvo);
    font-size: var(--fs80);
    font-style: italic;
    font-weight: 700;
    line-height: 1.0;
    color: #FFF;
}

/*end*/

/*recruit_cont_sec 上部*/
/*text img*/
main.recruit .recruit_cont_sec .text__img {
    display: flex;
    gap: calc((80 / 1243) * 100%);
    padding-left: calc((123 / 1366) * 100%);
}

main.recruit .recruit_cont_sec .text__img .text_area {
    flex: 1;
    font-size: var(--fs24);
}

main.recruit .recruit_cont_sec h2 {
    width: fit-content;
    font-size: var(--fs24);
    font-weight: 900;
    padding-bottom: calc((8 / 24) * 1.0em);
    border-bottom: solid calc((4 / 24) * 1.0em) var(--navy);
}

main.recruit .recruit_cont_sec .text__img .text_area h2 {
    padding-top: calc((32 / 24) * 1.0em);
}

main.recruit .recruit_cont_sec .text__img .text_area h3 {
    font-family: var(--ZenOld);
    font-weight: 400;
    font-size: calc((34 / 24) * 1.0em);
    letter-spacing: -0.06em;
    margin: calc((60 / 34) * 1.0em) 0 calc((21 / 34) * 1.0em);
}

main.recruit .recruit_cont_sec .text__img .text_area p {
    line-height: 2.0;
}

main.recruit .recruit_cont_sec .text__img .img_area {
    width: calc((683 / 1243) * 100%);
    border-radius: 6px 0 0 6px;
    overflow: hidden;
}

/*end*/

/*hd_area*/
main.recruit .recruit_cont_sec .cont_area>.hd_area {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs24);
    padding: 0 calc((123 / 1366) * 100%);
    margin-top: calc((32 /24) * 1.0em);
}

main.recruit .recruit_cont_sec .cont_area>.hd_area p.text {
    line-height: 2.0;
}

/*end*/

/*point*/
main.recruit .recruit_cont_sec .point_cont {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 calc((48 / 1120) * 100%);
    padding: 0 calc((123 / 1366) * 100%);
    margin-top: 48px;
}

main.recruit .recruit_cont_sec .point_cont .hd {
    font-size: var(--fs20);
}

main.recruit .recruit_cont_sec .point_cont .hd .num {
    font-family: var(--Arvo);
    font-size: calc((16 / 20) * 1.0em);
    font-style: italic;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.0;
}

main.recruit .recruit_cont_sec .point_cont .hd h3 {
    font-size: 1.0em;
    font-weight: 900;
    margin-top: calc((8 / 20) * 1.0em);
    margin-bottom: calc((13 / 20) * 1.0em);
}

main.recruit .recruit_cont_sec .point_cont p.text {
    line-height: 2.0;
}

/*end*/

/*step*/
main.recruit .recruit_cont_sec .step_cont {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 calc((8 / 1120) * 100%);
    font-size: var(--fs15);
    padding: 0 calc((123 / 1366) * 100%);
    margin-top: calc((97 / 15) * -1.0em);
}

main.recruit .recruit_cont_sec .step_cont .cont {
    position: relative;
    color: #FFF;
    padding: calc((50 / 15) * 1.0em) calc((48 / 15) * 1.0em);
    border-radius: 8px;
    background-color: var(--color);
}

/*見出し*/
main.recruit .recruit_cont_sec .step_cont .cont .hd__icn {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc((24 / 15) * 1.0em);
}

main.recruit .recruit_cont_sec .step_cont .cont .hd__icn .hd {
    display: flex;
    gap: calc((25 / 15) * 1.0em);
    flex: 1;
}

main.recruit .recruit_cont_sec .step_cont .cont .hd__icn .hd .num {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--Arvo);
    font-weight: 700;
    font-style: italic;
    font-size: calc((24 / 15) * 1.0em);
    line-height: 1.0;
}

main.recruit .recruit_cont_sec .step_cont .cont .hd__icn .hd .num span {
    display: block;
    font-size: 0.5em;

}

main.recruit .recruit_cont_sec .step_cont .cont .hd__icn .hd h3 {
    font-size: 1.0em;
    line-height: calc(26 / 15);
}

main.recruit .recruit_cont_sec .step_cont .cont .hd__icn .icn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((48 / 272) * 100%);
    aspect-ratio: 1/ 1;
}

main.recruit .recruit_cont_sec .step_cont .cont .hd__icn .icn img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/*end*/

/*テキスト*/
main.recruit .recruit_cont_sec .step_cont .cont p {
    line-height: 2.0;
}

/*end*/

/*arrow*/
main.recruit .recruit_cont_sec .step_cont .cont .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc((3 / 15) * 1.0em);
    position: absolute;
    top: 50%;
    right: calc((32 / 15) * -1.0em);
    transform: translateY(-50%);
    width: calc((56 / 15) * 1.0em);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #FFF;
}

main.recruit .recruit_cont_sec .step_cont .cont .arrow span {
    width: calc((6 / 15) * 1.0em);
    aspect-ratio: 6 / 12;
    background-color: var(--color);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/*end*/

/*feature*/
main.recruit .recruit_cont_sec .feature_cont {
    padding: 0 calc((123 / 1366) * 100%);
    margin-top: 48px;
}

main.recruit .recruit_cont_sec .feature_cont .cont {
    display: flex;
    align-items: center;
    gap: 0 calc((48 / 1120)* 100%);
}

main.recruit .recruit_cont_sec .feature_cont .cont+.cont {
    margin-top: 32px;
    padding-top: 32px;
    border-top: solid 1px #FFF;
}

main.recruit .recruit_cont_sec .feature_cont .hd {
    display: flex;
    align-items: center;
    flex: 1;
    gap: calc((24 / 20) * 1.0em);
    font-size: var(--fs20);
}

main.recruit .recruit_cont_sec .feature_cont .hd .icn {
    width: calc((96 / 20) * 1.0em);
}

main.recruit .recruit_cont_sec .feature_cont .hd h3 {
    font-size: 1.0em;
    font-weight: 900;
    line-height: calc(36 / 20);
}

main.recruit .recruit_cont_sec .feature_cont p.text {
    width: calc((720 / 1120) * 100%);
    line-height: 2.0;
}

/*end*/

/*interview*/
main.recruit .recruit_cont_sec .interview_cont {
    width: calc((1240 / 1366) * 100%);
    margin: 80px auto 0;
    padding: 64px calc((60 / 1366) * 100%) 0;
    border-top: solid 1px #FFF;
}

main.recruit .recruit_cont_sec .interview_head {
    display: flex;
    font-size: var(--fs34);
    gap: calc((32 / 1120) * 100%);
}

main.recruit .recruit_cont_sec .interview_head .num {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: calc((8 / 40) * 1.0em);
    font-family: var(--Arvo);
    font-size: calc((40 / 34) * 1.0em);
    font-weight: 700;
    font-style: italic;
    line-height: 1.0;
    margin-top: calc((16 / 1120) * 100%);
    padding: calc((84 / 40 * 1.0em)) calc((30 / 40 * 1.0em));
    border-radius: 6px;
    background-color: #FFF;
}

main.recruit .recruit_cont_sec .interview_head .num span {
    display: block;
    font-size: calc((12 / 40) * 1.0em);
}

main.recruit .recruit_cont_sec .interview_head .interview_text__img {
    display: flex;
    gap: calc((48 / 948) * 100%);
}

main.recruit .recruit_cont_sec .interview_head .interview_text__img .cont_text {
    flex: 1;
}

main.recruit .recruit_cont_sec .interview_head .interview_text__img .cont_text h3 {
    display: inline;
    font-family: var(--ZenOld);
    font-size: 1.0em;
    font-weight: 400;
    line-height: 2.0;
    letter-spacing: -0.06em;
    padding-bottom: calc((8 / 34) * 1.0em);
    background: radial-gradient(circle, var(--navy) 1px, transparent 1px) repeat-x left bottom / 8px 2px;
}

main.recruit .recruit_cont_sec .interview_head .interview_text__img .cont_text .profile .name {
    font-size: calc((15 / 34) * 1.0em);
    font-weight: 700;
    margin-top: calc((23 / 15) * 1.0em);
    margin-bottom: calc((5 / 15) * 1.0em);
}

main.recruit .recruit_cont_sec .interview_head .interview_text__img .cont_text .profile .name+p {
    font-size: calc((12 / 34) * 1.0em);
    line-height: 2.0;
}

main.recruit .recruit_cont_sec .interview_head .img_area {
    position: relative;
    width: min(calc((300 / 948) * 100%), 300px);
}

main.recruit .recruit_cont_sec .interview_head .img_area::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc((240 / 256) * 100%);
    border-radius: 6px;
    background: url(img/recruit/recruit_interviewImg__bg.webp) no-repeat left bottom / cover;
}

main.recruit .recruit_cont_sec .interview_cont .interview_text {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc((48 / 1120) * 100%);
    margin-top: 48px;
    padding-top: 48px;
    border-top: solid 1px #FFF;
}

main.recruit .recruit_cont_sec .interview_cont .interview_text .cont h4 {
    font-size: var(--fs20);
    font-weight: 900;
}

main.recruit .recruit_cont_sec .interview_cont .interview_text .cont p {
    line-height: 2.0;
    margin-top: calc((13 / 15) * 1.0em);
}

/*end*/

/*======================
*
recruit under
*
=======================*/
main[class^="recruit_"].under .hd_area h1 {
    font-size: var(--fs24);
    padding-bottom: 64px;
}

main[class^="recruit_"].under .hd_area h1 .en {
    font-family: var(--Arvo);
    font-size: calc((80 / 24) * 1.0em);
    font-style: italic;
    color: #FFF;
    line-height: 1.0;
    margin: 0;
}

/*recruit_under__cont*/
main[class^="recruit_"].under .recruit_under__cont {
    padding: 64px calc((60 / 1366) * 100%);
    border-radius: 16px;
    background-color: #FFF;
}

/*======================
*
requirement
*
=======================*/
main.recruit_requirement .recruit_under__cont .requirement_cont_area {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1px;
}

main.recruit_requirement .recruit_under__cont .requirement_cont_area :is(.hd, .cont) {
    line-height: 2.0;
    border-radius: 4px;
}

main.recruit_requirement .recruit_under__cont .requirement_cont_area .hd {
    font-size: var(--fs15);
    padding: calc((24 / 15) * 1.0em);
    padding-right: calc((138 / 15) * 1.0em);
    background-color: var(--light_navy);
}

main.recruit_requirement .recruit_under__cont .requirement_cont_area .cont {
    font-size: var(--fs18);
    padding: calc((24 / 18) * 1.0em);
    background-color: #F7F7F7;
}

main.recruit_requirement .recruit_under__cont .requirement_cont_area .cont p:has(.annotation) {
    display: flex;
}

main.recruit_requirement .recruit_under__cont .requirement_cont_area .cont ul li {
    display: flex;
}

main.recruit_requirement .recruit_under__cont .requirement_cont_area .cont ul li::before {
    content: "・";
    min-width: fit-content;
}

/*======================
*
footer
*
=======================*/
footer {
    padding: 100px calc((64 / 1366) * 100%);
    background-color: var(--white);
}


main[class*="recruit"]+footer {
    background-color: transparent;
}

main:not(:is(.top, .service))+footer {
    margin-top: 100px;
    border-top: solid 1px var(--gray);
}

/*footer 上部*/
footer .foot_top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 calc((45 / 1366) * 100%);
    padding-bottom: 48px;
    border-bottom: solid 1px var(--gray);
}

footer .foot_top .logo__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

footer .foot_top .logo__info .logo {
    max-width: 196px;
}

footer .foot_top .logo__info .info p {
    font-size: var(--fs12);
    font-weight: 400;
    line-height: 2.0;
    margin-bottom: calc((13 / 12) * 1.0em);
}

footer .foot_top .logo__info .info a {
    display: flex;
    align-items: center;
    font-family: var(--Arvo);
    font-size: var(--fs24);
    line-height: 1.0;
}

footer .foot_top .logo__info .info a span {
    display: block;
    font-size: 0.5em;
    padding-right: calc((10 /12) * 1.0em);
    margin-right: calc((10 / 12) * 1.0em);
    border-right: solid 1px var(--black);
}

footer .foot_top nav ul.menu {
    display: flex;
    align-items: stretch;
    font-size: var(--fs15);
    line-height: 3.0
}

footer .foot_top nav ul.menu>li {
    font-weight: 900;
    padding-right: calc((48 / 15) * 1.0em);
}

footer .foot_top nav ul.menu>li+li {
    padding-left: calc((48 / 15) * 1.0em);
    border-left: solid 1px var(--gray);
}

footer .foot_top nav ul.menu li ul.sub_menu {
    margin-top: 20px;
}

footer .foot_top nav ul.menu li ul.sub_menu li {
    font-weight: 400;
    text-decoration: underline;
    margin-top: 11px;
}

/*end*/

/*footer 下部*/
footer .foot_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 calc((45 / 1366) * 100%);
    padding-top: 48px;
}

footer .foot_bottom a {
    font-size: var(--fs12);
    font-weight: 400;
    text-decoration: underline;
}

footer .foot_bottom .copyright__btn {
    display: flex;
    align-items: center;
    font-size: var(--fs12);
    gap: calc((45 / 12) * 1.0em);
}

footer .foot_bottom .copyright__btn .copyright p {
    font-weight: 400;
}

footer .foot_bottom .copyright__btn #top-btn {
    display: flex;
    align-items: center;
    font-family: var(--Arvo);
    gap: calc((7 / 12) * 1.0em);
    cursor: pointer;
}

footer .foot_bottom .copyright__btn #top-btn span {
    display: block;
    rotate: -90deg;
    width: calc((24 / 12) * 1.0em);
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    background: url(img/common/arrow_white.webp) no-repeat var(--main-color) center / calc((11 / 12) * 1.0em);
    transition: 0.3s ease-in-out;
}

@media (any-hover:hover) {
    footer .foot_bottom .copyright__btn #top-btn:hover span {
        translate: 0 -5px;
    }
}

/*end*/
/*===============
*
breadcrumbs
*
===============*/
.breadcrumbs {
    position: absolute;
    top: 24px;
    left: 0;
}

.breadcrumbs ul {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs12);
}

.breadcrumbs ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    color: var(--black);
}

.breadcrumbs.white ul li {
    color: #FFF;
}

.breadcrumbs ul li a {
    color: var(--main-color);
    text-decoration: underline;
}

.breadcrumbs.white ul li a {
    color: #FFF;
}

.breadcrumbs ul li:has(a)::after {
    content: "";
    display: block;
    width: 10px;
    border-bottom: solid 1px var(--black);
}

.breadcrumbs.white ul li:has(a)::after {
    border-color: #FFF;
}