@charset "utf-8";

/* break point */
/* ---------------------
  (max-width) 1400, 991, 767, 575
  (min-width) 1401, 992, 768, 576
--------------------- */

/* CSSページ内検索 */
/* ---------------------
  - *background
  - *firstview
  - *common parts
  - *aboutus
  - *facility
  - *message
  - *service
  - *news
  - *recruit
  - *contact
  - *links
--------------------- */

/*========================================
  *background
========================================*/
body.home {
    background-image: url(images/dots.png);
    background-attachment: fixed;
    background-repeat: repeat;
}
.top_recruit, .top_contact, .top_links {
    background: #fff;
}

/*========================================
  *firstview
========================================*/
.top_fv {
    position: relative;
}
.top_fv .bx-wrapper {
    border: none;
    background: none;
    box-shadow: none;
    margin: 0;
}
.top_fv .bx-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.top_fv .bx-wrapper .bx-pager {
    left: 15px;
    bottom: 15px;
    width: auto;
}
.top_fv .bx-wrapper .bx-pager.bx-default-pager a {
    background: #fff;
    border: 1px solid transparent;
    box-shadow: 0 3px 15px rgb(0 0 0 / 50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
}
.top_fv .bx-wrapper .bx-pager.bx-default-pager a.active,
.top_fv .bx-wrapper .bx-pager.bx-default-pager a:focus,
.top_fv .bx-wrapper .bx-pager.bx-default-pager a:hover {
    border-color: #fff;
    background: #000;
}
/*ファーストビューがヨコ長の場合*/
.horizontal .top_fv_heroimgsp, .horizontal .bx-wrapper:has(.top_fv_heroimgsp) {
    display: none;
}
.bx-wrapper:has(.top_fv_heroimg), .bx-viewport:has(.top_fv_heroimg), .top_fv_heroimg {
    height: 100% !important;
}
/*ファーストビューがタテ長の場合*/
.vertical .top_fv_heroimg, .vertical .bx-wrapper:has(.top_fv_heroimg) {
    display: none;
}
.bx-viewport:has(.top_fv_heroimgsp) {
    height: auto !important;
}
.top_fv_heroimgsp {
    aspect-ratio: 1 / 1;
}
.top_fv_catchcopy {
	position: absolute;
    top: 50px;
    right: 8%;
    bottom: 0;
    max-height: 741px;
}
.top_fv_catchcopy img {
    width: auto;
    max-width: none;
    height: 100%;
    max-height: 100%;
}
@media screen and (max-width: 1400px) {
    .top_fv_catchcopy {
        max-height: 600px;
        right: 5%;
    }
}
@media screen and (max-width: 991px) {
    .top_fv_catchcopy {
        top: 5%;
    }
}
@media screen and (max-width: 575px) {
    .top_fv_catchcopy {
        max-height: 450px;
    }
}

/*========================================
  *common parts
========================================*/
.cm_top_title {
    font-size: 3.6rem;
    position: relative;
}
.cm_top_title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
@media screen and (max-width: 1400px) {
    .cm_top_title {
        font-size: 2.8rem;
    }
}
@media screen and (max-width: 575px) {
    .cm_top_title {
        font-size: 2.4rem;
    }
}

/*========================================
  *aboutus
========================================*/
.top_about {
    padding-top: 65px;
}
.top_about_inner {
    max-width: 1280px;
}
.top_about_head h2 {
    padding: 50px 1em 0 45px;
}
.top_about_head h2::before {
    background-image: url(images/en_about.png);
    height: 88px;
    aspect-ratio: 5 / 1;
}
.top_about_text {
    font-size: 105%;
    padding-top: 62px;
    max-width: 500px;
}
.top_about_img {
    position: relative;
    aspect-ratio: 1 / .35;
    margin-top: 20px;
}
.top_about_img .img01 {
    position: absolute;
    top: 0;
    left: 0;
    width: 42%;
}
.top_about_img .img02 {
    position: absolute;
    bottom: 0;
    left: 44.6%;
    width: 26.5%;
}
.top_about_img .img03 {
    position: absolute;
    top: 0;
    right: 0;
    width: 26.5%;
}
@media screen and (min-width: 992px) {
    .top_about_head {
        display: flex;
        justify-content: flex-start;
    }
    .top_about_head h2 {
        width: 53%;
    }
    .top_about_text {
        width: 47%;
    }
}
@media screen and (max-width: 1400px) and (min-width: 992px) {
    .top_about_head h2 {
        max-width: 15em;
    }
    .top_about_head h2 br {
        display: none;
    }
}
@media screen and (min-width: 1401px) {
    .top_about_head h2 {
        font-size: 3.8rem;
    }
}
@media screen and (max-width: 1400px) {
    .top_about_head h2 {
        padding-top: 30px;
        padding-left: 35px;
    }
    .top_about_head h2::before {
        height: 50px;
    }
    .top_about_text {
        padding-top: 38px;
    }
}
@media screen and (max-width: 991px) {
    .top_about {
        padding-top: 40px;
    }
    .top_about_inner {
        width: 95%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .top_about_head {
        width: 53%;
    }
    .top_about_head h2 {
        padding-left: 15px;
        padding-bottom: .8em;
    }
    .top_about_text {
        padding: 0 15px;
    }
    .top_about_img {
        width: 46%;
        aspect-ratio: 1 / 1;
        margin-top: 40px;
    }
    .top_about_img .img01 {
        width: 83%;
    }
    .top_about_img .img02 {
        width: 38%;
        left: auto;
        right: 0;
        bottom: 10%;
    }
    .top_about_img .img03 {
        width: 50%;
        top: auto;
        bottom: 0;
        right: 43%;
    }
}
@media screen and (max-width: 767px) {
    .top_about_inner {
        display: block;
    }
    .top_about_head {
        width: 100%;
    }
    .top_about_text {
        max-width: none;
    }
    .top_about_img {
        width: 100%;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/*========================================
  *facility
========================================*/
.top_facility {
    position: relative;
    overflow: hidden;
}
.top_facility::before {
    content: "";
    position: absolute;
    top: 125px;
    right: 0;
    width: 100%;
    height: calc(100% + 20px);
    background: linear-gradient(30deg, #bdf1e4 30%, #f7f8cb 70%);
    transform: skewY(-4deg);
    z-index: -2;
}
.top_facility::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(0deg, #fff 5%, transparent);
    width: 100%;
    height: 300px;
    z-index: -1;
}
.top_facility h2 {
    padding-top: 50px;
    padding-left: 215px;
    margin-bottom: 40px;
}
.top_facility h2::before {
    background-image: url(images/en_facility.png);
    height: 113px;
    aspect-ratio: 3.17 / 1;
}
.top_facility_illust {
    position: relative;
}
.top_facility_illust::before {
    content: "";
    background: url(images/facility_illust.png) no-repeat 0 0 / contain;
    width: 436px;
    aspect-ratio: 1 / 0.52;
    position: absolute;
    right: 0;
    top: 0;
}
.top_facility_inner {
    padding: 100px 0 100px;
}
.top_facility_flexbox {
    display: flex;
}
.top_facility .clm {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    filter: drop-shadow(10px 10px 10px rgb(38 50 56 / 5%));
    position: relative;
}
.top_facility .clm_thumb {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.top_facility .clm_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .2s;
}
.top_facility .clm_titlelabel {
    display: inline-block;
    background: var(--color-green);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    padding: .12em .7em .1em;
}
.top_facility .clm_title {
    color: var(--color-green);
    padding: .3em;
    font-size: 2.5rem;
}
.top_facility .subclm .clm_title {
    font-size: 2.3rem;
}
.top_facility .clm_overlay, .top_news_list .overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 10px;
    border: 10px solid #000;
    opacity: 0;
    visibility: hidden;
    transition: all .2s;
}
.top_news_list .overlay {
    border-width: 7px;
}
@media screen and (min-width: 992px) {
    .top_facility_flexbox {
        flex-wrap: wrap;
        gap: 30px;
    }
    .top_facility .mainclm {
        width: 100%;
    }
    .top_facility .subclm {
        flex: 1;
    }
    .top_facility .mainclm>a, .top_facility .subclm .clm_head {
        display: flex;
    }
    .top_facility .mainclm .clm_thumb, .top_facility .mainclm .clm_inner {
        flex: 1;
    }
    .top_facility .subclm .clm_thumb, .top_facility .subclm .clm_titlewrap {
        width: 50%;
    }
    .top_facility .mainclm .clm_titlewrap {
        padding: 30px 25px 0;
    }
    .top_facility .mainclm .clm_title {
        padding: .7em 5px;
    }
    .top_facility .mainclm .clm_desc {
        padding: 0 30px 30px;
    }
    .top_facility .subclm .clm_thumb {
        border-radius: 10px 0 0 0;
    }
    .top_facility .subclm .clm_titlewrap {
        background: #ecf5f1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 15px 3%;
    }
    .top_facility .subclm .clm_desc {
        padding: 15px 5% 20px;
    }
}
@media (hover: hover) and (min-width: 992px) {
    .top_facility a:hover .clm_overlay, .top_news_list a:hover .overlay {
        opacity: .2;
        visibility: visible;
    }
    .top_facility a:hover .clm_thumb img {
        transform: scale(1.1, 1.1);
    }
}
@media screen and (max-width: 1400px) and (min-width: 992px) {
    .top_facility_flexbox {
        row-gap: 20px;
        column-gap: 2%;
    }
    .top_facility .mainclm .clm_title {
        font-size: 2.1rem;
    }
    .top_facility .subclm .clm_title {
        font-size: 1.9rem;
    }
}
@media screen and (max-width: 1400px) {
    .top_facility::before {
        top: 100px;
    }
    .top_facility h2 {
        padding-left: 20px;
        padding-top: 45px;
        margin-bottom: 30px;
    }
    .top_facility h2::before {
        height: 60px;
    }
    .top_facility_illust::before {
        width: 350px;
    }
    .top_facility .clm_titlelabel {
        font-size: 1.3rem;
    }
}
@media screen and (max-width: 991px) {
    .top_facility::before {
        background: linear-gradient(30deg, #bdf1e4 60%, #f7f8cb 90%);
    }
    .top_facility .container {
        width: 100%;
    }
    .top_facility .bx-wrapper {
        box-shadow: none;
        border: none;
        background: none;
        max-width: none !important;
        margin-left: 30px;
        width: calc(100% - 30px);
    }
    .top_facility .bx-wrapper .bx-pager.bx-default-pager a {
        width: 45px;
        height: 10px;
        background: #fff;
        border: 1px solid rgb(0 0 0 / 20%);
        border-radius: 0;
    }
    .top_facility .bx-wrapper .bx-pager.bx-default-pager a.active,
    .top_facility .bx-wrapper .bx-pager.bx-default-pager a:focus,
    .top_facility .bx-wrapper .bx-pager.bx-default-pager a:hover {
        background: var(--color-green);
    }
    .top_facility_inner {
        padding-bottom: 60px;
    }
    .top_facility h2 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .top_facility .clm {
        overflow: hidden;
    }
    .top_facility .clm_title {
        font-size: 2.1rem;
    }
    .top_facility .clm_titlewrap {
        padding: 15px 10px 0;
    }
    .top_facility .clm_title {
        padding: .7em 5px;
    }
    .top_facility .clm_desc {
        font-size: 1.5rem;
        padding: 0 15px 2em;
    }
}
@media screen and (max-width: 767px) {
    .top_facility .bx-wrapper {
        margin-left: 15px;
        width: calc(100% - 15px);
    }
}
@media screen and (max-width: 575px) {
    .top_facility {
        margin-top: 30px;
    }
    .top_facility .bx-wrapper {
        margin-right: 15px;
        width: calc(100% - 30px);
    }
    .top_facility::before {
        top: 60px;
        background: linear-gradient(30deg, #bdf1e4 60%, #f7f8cb 90%);
    }
    .top_facility_illust::before {
        width: 200px;
    }
    .top_facility_inner {
        padding-top: 40px;
    }
}

/*========================================
  *message
========================================*/
.top_message {
    background: url(images/message_illust.png) no-repeat center bottom;
    padding-bottom: 180px;
}
.top_message p {
    color: #4f2427;
    font-weight: bold;
    font-size: 3.0rem;
    text-align: center;
}
@media screen and (max-width: 1400px) {
    .top_message p {
        font-size: 2.4rem;
    }
}
@media screen and (max-width: 991px) {
    .top_message {
        display: none;
    }
}

/*========================================
  *service
========================================*/
.top_service {
    margin-bottom: 100px;
}
.top_service_head {
    position: relative;
}
.top_service_title h2::before {
    content: none;
}
.top_service_title p {
    font-size: 1.9rem;
    font-weight: 500;
}
.top_service_title .en {
    background: url(images/en_service.png) no-repeat 0 0 / contain;
    height: 105px;
    aspect-ratio: 7.12 / 1;
}
.top_service_img {
    position: absolute;
    top: -8%;
    right: 0;
    width: 52%;
    z-index: -1;
}
.top_service_btnarea h3 {
    display: inline-block;
    font-size: 3.0rem;
    padding-left: 1em;
    margin-top: 1.2em;
    margin-bottom: .6em;
    position: relative;
}
.top_service_btnarea h3::before {
    content: "";
    width: 2.6em;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(#f3f0a8, transparent 80%);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: -1;
}
.top_service_btnarea ul {
    display: flex;
    gap: 20px;
}
.top_service_btnarea li {
    display: flex;
    flex-basis: 100%;
}
.top_service_btnarea li a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-blue);
    border: 2px solid var(--color-blue);
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 1.9rem;
    text-align: center;
    padding: 10px 5px 15px;
    box-shadow: 5px 5px 10px rgb(0 0 0 / 5%);
    min-height: 180px;
}
.top_service_btnarea li .small {
    font-size: 1.5rem;
}
.top_service_btnarea li [class^="icon"] {
    display: block;
    width: 80px;
    aspect-ratio: 1 / 1;
    background: no-repeat center center / contain;
}
.top_service_btnarea li .icon1 {
    background-image: url(images/service_icon01_white.png);
}
.top_service_btnarea li .icon2 {
    background-image: url(images/service_icon02_white.png);
}
.top_service_btnarea li .icon3 {
    background-image: url(images/service_icon03_white.png);
}
.top_service_btnarea li .icon4 {
    background-image: url(images/service_icon04_white.png);
}
.top_service_btnarea li .icon5 {
    background-image: url(images/service_icon05_white.png);
}
@media screen and (min-width: 992px) {
    .top_service_title {
        width: 50%;
        aspect-ratio: 2 / 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgb(74 164 186 / 80%);
        text-align: center;
        margin-bottom: 2%;
        overflow: hidden;
        padding: 40px 5px 45px;
    }
    .top_service_title h2 {
        color: #fff;
        text-shadow: 0 0 15px rgb(43 136 149 / 50%);
        margin-bottom: .5em;
    }
    .top_service_btnarea {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .top_service_btnarea .clm {
        width: calc((100% - 20px) / 2);
        text-align: center;
    }
    .top_service_btnarea .clm:nth-child(1) {
        width: 100%;
    }
}
@media (hover: hover) and (min-width: 992px) {
    .top_service_btnarea li a:hover {
        background-color: #fff;
        color: inherit;
    }
    .top_service_btnarea li a:hover .icon1 {
        background-image: url(images/service_icon01.png);
    }
    .top_service_btnarea li a:hover .icon2 {
        background-image: url(images/service_icon02.png);
    }
    .top_service_btnarea li a:hover .icon3 {
        background-image: url(images/service_icon03.png);
    }
    .top_service_btnarea li a:hover .icon4 {
        background-image: url(images/service_icon04.png);
    }
    .top_service_btnarea li a:hover .icon5 {
        background-image: url(images/service_icon05.png);
    }
}
@media screen and (max-width: 1400px) and (min-width: 992px) {
    .top_service_btnarea .clm {
        width: calc((100% - 10px) / 2);
    }
}
@media screen and (max-width: 1400px) {
    .top_service {
        margin-bottom: 50px;
    }
    .top_service_title {
        aspect-ratio: auto;
    }
    .top_service_title h2 {
        font-size: 2.4rem;
    }
    .top_service_title p {
        font-size: 1.7rem;
    }
    .top_service_title .en {
        height: 60px;
    }
    .top_service_img {
        height: 265px;
    }
    .top_service_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .top_service_btnarea h3 {
        font-size: 2.4rem;
    }
    .top_service_btnarea ul {
        gap: 10px;
    }
    .top_service_btnarea li a {
        font-size: 1.7rem;
    }
    .top_service_btnarea li a .small {
        font-size: 1.3rem;
    }
}
@media screen and (max-width: 991px) {
    .top_service {
        margin-bottom: 70px;
    }
    .top_service_title {
        width: 90%;
        margin: 0 auto 10px;
    }
    .top_service_title h2 {
        padding-left: 20px;
    }
    .top_service_title p, .top_service_img {
        display: none;
    }
    .top_service_title .en {
        background-image: url(images/en_service_sp.png);
        height: 45px;
        aspect-ratio: auto;
        position: relative;
    }
    .top_service_title .en::after {
        content: "";
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, #eca77d, #f2bb5c 30%, #e9d92d);
        opacity: .6;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .top_service_btnarea ul {
        flex-wrap: wrap;
        padding: 0 10px;
    }
    .top_service_btnarea .clm:nth-child(1) li, .top_service_btnarea .clm:nth-child(2) li {
        flex-basis: calc((100% - 10px) / 2);
    }
    .top_service_btnarea li a {
        min-height: auto;
    }
}
@media screen and (max-width: 575px) {
    .top_service_title h2 {
        padding-left: 0;
        text-align: center;
    }
    .top_service_btnarea h3 {
        font-size: 2.0rem;
    }
    .top_service_btnarea ul {
        gap: 5px;
    }
    .top_service_btnarea .clm:nth-child(1) li, .top_service_btnarea .clm:nth-child(2) li {
        flex-basis: calc((100% - 5px) / 2);
    }
    .top_service_btnarea li a {
        border-radius: 7px;
    }
}

/*========================================
  *news
========================================*/
.top_news {
    position: relative;
    padding: 75px 0 60px;
    overflow: hidden;
}
.top_news::after {
    content: "";
    position: absolute;
    top: 80px;
    right: 0;
    width: 100%;
    height: calc(100% + 20px);
    background: linear-gradient(0deg, #e1f4ea, #c2e5e1 90%);
    transform: skewY(-4deg);
    z-index: -2;
}
.top_news h2 {
    padding-top: 25px;
    padding-left: 160px;
    margin-bottom: 40px;
}
.top_news h2::before {
    background-image: url(images/en_news.png);
    height: 55px;
    aspect-ratio: 4.63 / 1;
    top: 0;
    left: 0;
}
.top_news_list .cat-pc {
    font-size: 1.3rem;
    font-feature-settings: "palt";
    padding: .2em .8em;
    position: absolute;
    top: 7px;
    left: 0;
    /*border-bottom-right-radius: 10px;*/
    white-space: nowrap;
    z-index: 2;
}
.top_news_list .thumb {
    overflow: hidden;
    aspect-ratio: 1 / 0.62;
    background: #f4f4f4;
    text-align: center;
}
.top_news_list .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .2s;
}
.top_news_list .thumb img.noimage {
    width: 45%;
    object-fit: contain;
}
.top_news_list .inner {
    padding: 10px 15px 20px;
}
.top_news_list .date {
    font-size: 1.4rem;
}
@media screen and (min-width: 992px) {
    .top_news_list {
        display: flex;
        column-gap: 4%;
    }
    .top_news_list li {
        flex-basis: 100%;
        display: flex;
    }
    .top_news_list a {
        display: block;
        background: #fff;
        box-shadow: 5px 5px 10px rgb(0 0 0 / 5%);
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
    .top_news_list .cat-sp {
        display: none;
    }
    .top_news_btn {
        justify-content: center;
        margin-top: 50px;
    }
}
@media (hover: hover) and (min-width: 992px) {
    .top_news_list a:hover .thumb img {
        transform: scale(1.1, 1.1);
    }
}
@media screen and (max-width: 1400px) {
    .top_news {
        padding-top: 85px;
    }
    .top_news h2 {
        padding-top: 30px;
        padding-left: 20px;
        margin-bottom: 30px;
    }
    .top_news h2::before {
        height: 35px;
    }
    .top_news_list .inner p {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 991px) {
    .top_news {
        padding: 40px 0 80px;
    }
    .top_news::after {
        top: 40px;
        height: calc(100% - 88px);
    }
    .top_news_list {
        background: #fff;
        border-radius: 10px;
        padding: 0 15px;
    }
    .top_news_list li {
        padding: 20px 0;
    }
    .top_news_list li+li {
        border-top: 1px dashed #ccc;
    }
    .top_news_list a {
        display: flex;
        align-items: center;
    }
    .top_news_list .thumb {
        max-width: 200px;
        width: 30%;
    }
    .top_news_list .inner {
        flex: 1;
        padding: 0 0 0 5%;
    }
    .top_news_list .inner-head {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 3px;
    }
    .top_news_list .date {
        font-weight: bold;
        font-size: 94%;
    }
    .top_news_list .cat-pc {
        display: none;
    }
    .top_news_list .cat-sp {
        display: inline-block;
        font-size: 1.3rem;
        font-feature-settings: "palt";
        border-radius: 5px;
        padding: 0 .5em;
    }
    .top_news_list .title {
        font-size: 94%;
        margin: .5em 0 .3em;
    }
    .top_news_btn {
        margin: 15px 15px 0;
    }
    .top_news_btn a {
        background: none;
        box-shadow: none;
        color: inherit;
        padding: 0;
        font-size: 1.6rem;
    }
    .top_news_btn a::after {
        background-image: url(images/btn_arrow_black.png);
        position: static;
        display: inline-block;
        margin-left: 10px;
        vertical-align: -3px;
    }
}

/*========================================
  *recruit
========================================*/
.top_recruit {
    padding: 100px 0;
}
.top_recruit_inner {
    position: relative;
    padding-top: 4%;
}
.top_recruit_img {
    width: 52%;
    aspect-ratio: 1 / 0.84;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.top_recruit_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.top_recruit_textbox h2 {
    margin-bottom: .8em;
}
@media screen and (min-width: 992px) {
    .top_recruit_textbox {
        width: 52%;
        margin-left: auto;
        background: rgb(5 115 104 / 80%);
        color: #fff;
        padding: 30px 4% 60px;
        position: relative;
        z-index: 2;
    }
    .top_recruit_textbox h2 {
        color: var(--color-yellow);
        text-align: center;
        font-size: 2.8rem;
        text-shadow: 0 0 8px rgb(0 0 0 / 20%);
        padding-top: 115px;
    }
    .top_recruit_textbox h2::before {
        background-image: url(images/en_recruit.png);
        height: 85px;
        aspect-ratio: 4.09 / 1;
        z-index: 1;
    }
    .top_recruit_btn {
        justify-content: center;
    }
    .top_recruit_btn a:not(:hover) {
        background-color: #fff;
        color: var(--color-green);
    }
}
@media screen and (max-width: 1400px) and (min-width: 992px) {
    .top_recruit_textbox h2 {
        padding-top: 65px;
    }
    .top_recruit_textbox h2::before {
        height: 50px;
    }
}
@media screen and (max-width: 1400px) {
    .top_recruit_textbox h2 {
        font-size: 2.2rem;
    }
    .top_recruit_textbox {
        width: 60%;
        padding-bottom: 40px;
    }
    .top_recruit_img {
        width: 43%;
    }
}
@media screen and (max-width: 991px) {
    .top_recruit {
        padding: 40px 0 80px;
    }
    .top_recruit_inner {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding-top: 0;
    }
    .top_recruit_img {
        position: static;
        width: 36%;
    }
    .top_recruit_textbox {
        width: 60%;
        padding-bottom: 0;
    }
    .top_recruit_textbox h2 {
        padding: 55px 15px 0;
        font-size: 2.0rem;
    }
    .top_recruit_textbox h2::before {
        background-image: url(images/en_recruit_sp.png);
        height: 45px;
        aspect-ratio: 4.07 / 1;
    }
    .top_recruit_textbox p {
        padding: 0 15px;
    }
}
@media screen and (max-width: 767px) {
    .top_recruit {
        padding: 0;
    }
    .top_recruit_inner {
        display: block;
        width: 100%;
    }
    .top_recruit_textbox {
        width: 90%;
        margin: 0 auto 40px;
    }
    .top_recruit_img {
        width: 100%;
        aspect-ratio: auto;
    }
    .top_recruit_btn a, .top_contact_btn a {
        width: 100%;
        text-align: center;
    }
}

/*========================================
  *contact
========================================*/
.top_contact_box {
    text-align: center;
    position: relative;
    z-index: 2;
}
@media screen and (min-width: 992px) {
    .top_contact_box {
        border: 10px solid rgb(177 219 214 / 50%);
        background: url(images/contact_illust.png) no-repeat center bottom / contain;
        padding: 30px 3% 100px;
    }
    .top_contact h2 {
        padding-top: 60px;
        margin-bottom: .5em;
    }
    .top_contact h2::before {
        background-image: url(images/en_contact.png);
        height: 118px;
        aspect-ratio: 5.83 / 1;
        left: 50%;
        transform: translateX(-50%);
    }
    .top_contact_btn {
        justify-content: center;
    }
    .top_contact_btn a {
        width: 15em;
    }
}
@media screen and (max-width: 1400px) {
    .top_contact h2 {
        padding-top: 35px;
    }
    .top_contact h2::before {
        height: 70px;
    }
}
@media screen and (max-width: 991px) {
    .top_contact h2 {
        display: none;
    }
    .top_contact_box {
        width: 100%;
        background: #c8ebe7;
        padding: 40px 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
@media screen and (max-width: 767px) {
    .top_contact_box {
        text-align: left;
    }
    .top_contact_btn {
        width: 100%;
    }
    .top_contact_btn a {
        width: 100%;
        text-align: center;
    }
}

/*========================================
  *links
========================================*/
.top_links {
    padding: 70px 0 140px;
    position: relative;
    z-index: 2;
}
.top_links_inner {
    max-width: 1100px;
    width: 80%;
}
.top_links h2 {
    text-align: center;
    font-size: 2.7rem;
    padding-bottom: .3em;
    margin-bottom: 1.5em;
    position: relative;
}
.top_links h2::after {
    content: "";
    background: var(--color-orange);
    width: 50px;
    height: 4px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (min-width: 992px) {
    .top_links_inner {
        position: relative;
    }
    .top_links_inner::after {
        content: "";
        background: url(images/links_illust.png) no-repeat center center / contain;
        width: 706px;
        aspect-ratio: 1 / .64;
        position: absolute;
        right: -90px;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
    }
    .top_links ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .top_links li a {
        display: block;
        border: 1px solid #cbcbcb;
        border-radius: 10px;
        padding: .7em 1.2em;
        box-shadow: 5px 8px 10px rgb(0 0 0 / 5%);
        background: #fff;
        transition: all .1s;
    }
}
@media (hover: hover) and (min-width: 992px) {
    .top_links li a:hover {
        background: #000;
        color: #fff;
    }
}
@media screen and (max-width: 1400px) and (min-width: 992px) {
    .top_links_inner::after {
        width: 550px;
        right: 0;
        transform: translateY(-40%);
    }
}
@media screen and (max-width: 991px) {
    .top_links {
        padding: 50px 0 80px;
    }
    .top_links_inner {
        max-width: 600px;
    }
    .top_links ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
    }
    .top_links li {
        width: calc((100% - 20px) / 2);
    }
    .top_links li a {
        display: inline-block;
        position: relative;
        padding-left: 30px;
    }
    .top_links li a::before {
        content: "";
        width: 20px;
        aspect-ratio: 1 / 1;
        background: url(images/arrow_orange.png) no-repeat 0 0 / contain;
        position: absolute;
        top: 5px;
        left: 0;
    }
}
@media screen and (max-width: 575px) {
    .top_links h2 {
        font-size: 2.4rem;
    }
    .top_links li {
        width: 100%;
    }
}