/* ベーススタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    font-family: "Noto Sans JP", sans-serif;
    font-weight:500;
    font-style: normal;
    padding-top: 120px;
}

/* header -----------------------*/

header.site-header{
    background-color: #fff;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
    height: 120px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 1); /* ← 初期は不透明 */
    transition: background 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.8); /* ← 半透明に */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 視認性UP用 */
}

.header-contents{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.header-contents h1{display: block; width: 30%;}
.header-contents h1 img{width: 100%; height: auto; margin: 0 auto;}
div.header-menu{ position: relative; width: 70%;}

header nav ul {list-style: none;padding: 0;display: flex;gap: 1.5em;}
header nav ul li{font-size: 18px;}

header nav#sub-menu ul {position: absolute; top: -30%; right: 0; width:100%; justify-content: flex-end;}
header nav#main-menu ul {position: absolute; top: 80%; right: 0; width:100%; justify-content: flex-end;}

header nav#sub-menu ul li{ display: block; width: 15%; text-align: center; padding:5px; color: #fff; -webkit-transition: all .5s; transition: all .5s;}
header nav#sub-menu ul li a {color: #fff;}

header nav#sub-menu ul li:hover {opacity: 0.6;}

.nav-recruit {background-color: #0071ff;}
.nav-contact {background-color: #00a5a0;}

header nav#main-menu ul li{}
header nav#main-menu ul li a {color: #333;}

nav a {
    text-decoration: none;
}


/* bottom-contact -----------------------*/

main #bottom-contact {background: #fff;width: 100%;}
main #bottom-contact .bottom-contact-container{width: 90%;margin: 0 auto; padding-top: 10em; padding-bottom: 5em;}
main #bottom-contact .bottom-contact-title{width: 100%; text-align: center;}
main #bottom-contact .bottom-contact-title h2 {font-size: 90px; display: block;}
main #bottom-contact .bottom-contact-contents{width: 100%;margin: 0 auto;padding-top: 2em;  display: flex; justify-content: space-between;}

main #bottom-contact .bottom-contact-tel {width: 48%;}
main #bottom-contact .bottom-contact-mail {width: 48%;}

/* bottom-recruit -----------------------*/

main #bottom-recruit {color: #fff;width: 100%;position: relative;background-image: url(../images/common/bottom-recruit-img.jpg);    background-repeat: no-repeat;background-size: cover;background-position: center;}

main #bottom-recruit .bottom-recruit-container{width: 90%;margin: 0 auto; display: flex; justify-content: space-between;
    padding-top: 10em; padding-bottom: 10em;}
main #bottom-recruit .bottom-recruit-contents{width: 80%;margin: 0 auto; display: flex; justify-content: space-between;}
main #bottom-recruit .bottom-recruit-title {width: 42%;}
main #bottom-recruit .bottom-recruit-title h2{ font-size: 24px;}
main #bottom-recruit .bottom-recruit-title h2 span {font-size: 4.6vw; display: block;}

main #bottom-recruit .bottom-recruit-comment {width: 58%; display: flex; flex-direction: column; justify-content: center;align-items: center;}
main #bottom-recruit .bottom-recruit-comment p{ font-size: 24px; margin: auto; width: -moz-fit-content; width: fit-content;}
main #bottom-recruit .bottom-recruit-btn{width: 20%; display: flex; flex-direction: column; justify-content: center;align-items: center;}

/* footer -----------------------*/

footer {background-color: #fff;color: #333;}
footer #footer-container { background-color: #ffe600; padding-top:2.5em; padding-bottom:2.5em;}
footer #copyright-container{padding-bottom:1em;}
footer .footer-contents {width: 90%;margin: 2em auto;display: flex; justify-content: space-between;}
footer .footer-logo-contents {width: 50%;}
footer .footer-menu-contents {width: 50%;}

footer nav ul {list-style: none;padding: 0;display: flex;gap: 1.5em; flex-wrap: wrap;}
footer nav ul li{width: 31.3333%; font-size: 24px; font-weight:700;}
footer nav ul li a {text-decoration: none;}
footer nav ul li span.other{display: block; padding-bottom: 5px;}


footer nav ul.submenu {gap: 0em;}
footer nav ul.submenu li{width: 100%; font-size: 16px; margin-top: 0.5em;}

footer nav ul#footer-menu li a {color: #333;}

footer .footer-logo{width: 25%; margin-left: 0px;}
footer .footer-logo img{width: 100%; height: auto; margin: 0 auto;}
footer .footer-copy{font-size: 1.6vw; font-weight: bold;}
footer .footer-info{width: 100%; margin-bottom: 1em; font-size: 16px; display: flex; flex-flow: column;}
footer .footer-info p{width: 100%; }
footer .footer-other{width: 20%; margin-top: 1em; display: flex; justify-content: space-between;}
footer .footer-other div{width: 48%;}
footer .footer-other div img{width: 100%; height: auto; margin: 0 auto;}

footer .copyright{width: 100%; color: #ccc;}

.back-to-top {
    position: fixed;bottom: 50px;right: 20px;background-color: #333;color: #fff;width: 50px;height: 50px;border-radius: 50%;display: flex;
    justify-content: center;align-items: center;font-size: 24px;text-decoration: none;z-index: 1000; opacity: 0; visibility: hidden;  transition: opacity 0.5s ease, visibility 0.5s ease; }
.back-to-top:hover {
    background-color: #555;
}
.back-to-top.show { opacity: 1; visibility: visible;}



/*link animation-----------------------*/

.rotate-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.rotate-text span {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: translateY(0);
}

.rotate-text::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    display: inline-block;
    transition: transform 0.3s ease;
    padding-bottom: 5px;
}

.rotate-text:hover span {
    transform: translateY(-100%);
}

.rotate-text:hover::before {
    transform: translateY(-100%);
}




.link-line {
    padding-bottom: 3px;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 1px;
    transition: background-size 0.3s;
}

.link-line:hover {
    background-position: bottom left;
    background-size: 100% 1px;
}


/*.fade-in-section-----------------------*/

.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*.bottom-contact-mail .btn-----------------------*/

.bottom-contact-mail .btn {color: #fff;letter-spacing: .1em;text-align: center;width: 380px;height: 120px;background: #00a5a0;
    margin:0 auto 0 0; display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 120px;text-decoration: none;font-size: 1.1rem;gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;}
.bottom-contact-mail .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1);    transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;}
.bottom-contact-mail .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;}
.bottom-contact-mail .btn:hover::after {transform: scale(1, 1);}
.bottom-contact-mail .btn .circle {position: relative;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: #fff;display: flex;align-items: center; justify-content: center;flex-shrink: 0;}
.bottom-contact-mail .btn .circle .icon {transition: all 0.2s cubic-bezier(0.65, 0, 0.076, 1);font-size: 1rem;color: #00a5a0;position: relative;}
.bottom-contact-mail .btn:hover .circle .icon {transform: translateX(5px);}

/*.bottom-contact-tel .btn-----------------------*/

.bottom-contact-tel .btn {color: #333;letter-spacing: .1em;text-align: center;width: 380px;height: 120px;background: #ffe600;
    margin:0 0 0 auto; display: flex; flex-flow: column; align-items: center;justify-content: center;transition: 0.5s;border-radius: 120px;text-decoration: none;font-size: 1.1rem;gap: 0.2rem; overflow: hidden;position: relative;z-index: 1;}
.bottom-contact-tel .btn a{text-decoration: none; font-size: 28px; font-weight: 600; color: #333;}



/*#bottom-recruit .btn-----------------------*/

#bottom-recruit .btn {color: #0071ff;letter-spacing: .1em;text-align: center;width: 280px;height: 100px;background: #fff;
    margin: auto;display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 100px;text-decoration: none;
    font-size: 1.1rem;gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;}
#bottom-recruit .btn::after {background: #0071ff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1); transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;}
#bottom-recruit .btn:hover {color: #fff; border: 2px solid #fff;}
#bottom-recruit .btn:hover::after {transform: scale(1, 1);}
#bottom-recruit .btn .circle {position: relative;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: #0071ff;display: flex;align-items: center; justify-content: center;flex-shrink: 0;}
#bottom-recruit .btn .circle .icon {transition: all 0.2s cubic-bezier(0.65, 0, 0.076, 1);font-size: 1rem;color: #fff;position: relative;}
#bottom-recruit .btn:hover .circle .icon {transform: translateX(5px);}



/*icon-----------------------*/

.icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*h1 link-----------------------*/

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*hamburger menu-----------------------*/

.hamburger {
    display : block;
    position: fixed;
    z-index : 3;
    right : 20px;
    top   : 20px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
}
.hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : #BBBBBB;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
    top: 10px;
}
.hamburger span:nth-child(2) {
    top: 20px;
}
.hamburger span:nth-child(3) {
    top: 30px;
}

.hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background :#fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
}
nav#globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    left: auto;
    color: #fff;
    background: rgba(0, 165, 160, 0.8);
    text-align: center;
    width: 20vw;
    height: 100vh;
    transform: translateX(100%);
    transition: all 0.6s;
}

nav#globalMenuSp.active {
    opacity: 1;
    display: block;
    transform: translateX(0%);
}

nav#globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    flex-flow: column;
    padding-top: 4.5em;
    gap: 0em;
}

nav#globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
    border-bottom: 1px solid #ffffff4d;
}

nav#globalMenuSp ul li:first-child {
    border-top: 1px solid #ffffff4d;
}

nav#globalMenuSp ul li:last-child {
    padding-bottom: 0;
}

nav#globalMenuSp ul li > a {
    display: block;
    color: #fff;
    padding: 1em 0;
    text-decoration: none;
}

nav#globalMenuSp ul li > a:hover {
    background-color: #71bfa2;
}

/* サブメニュー */
nav#globalMenuSp ul li .submenu-sp {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background-color: #008b85; /* ← 背景消す */
    padding: 0;
    margin: 0;
}

nav#globalMenuSp ul li .submenu-sp.open {
    max-height: 800px;
    padding: 0; /* 必要なら padding: 0.5em など調整 */
}

nav#globalMenuSp ul li .submenu-sp li {
    border-bottom: 1px solid #ffffff4d;
}

nav#globalMenuSp ul li .submenu-sp li a {
    padding: 1em;
    display: block;
    color: #fff;
    text-decoration: none;
}

nav#globalMenuSp ul li .submenu-sp li a:hover {
    background-color: #00b5ad;
}
.pc_lp {
    display: block;
}

.sp_lp {
    display: none;
}


/* iPad　横向き */
@media (min-width: 1024px) and (max-width: 1366px) {
    /* iPad全体（横向き）のスタイル */
    body{width: 100vw;height: 100vh; padding-top: 120px;}
    /* header -----------------------*/
    header.site-header{height: 120px; padding-top: 1em;padding-bottom: 1em;}
    header nav#sub-menu ul {position: absolute; top: 10%; right: 30px; width:100%; justify-content: flex-end;}
    header nav#main-menu ul {position: absolute; top: 75%; right: 30px; width:100%; justify-content: flex-end;}
    nav#globalMenuSp {;width: 40vw;}
    .header-contents h1{display: block; width: 45%; padding-top: 30px;}
    .header-contents h1 img{width: 100%; height: auto; margin: 0 auto;}
    
    main #bottom-contact .bottom-contact-container{width: 90%;margin: 0 auto; padding-top: 5em; padding-bottom: 8em;}
    
    footer nav ul {flex;gap: 1em;}
    footer .footer-logo{width: 80%; margin-left: 0px;}
    footer .footer-logo img{width: 100%; height: auto; margin: 0 auto;}
    footer .footer-left {display: flex; flex-direction: column; width: 40%;}

    footer .footer-info{width: 100%; margin-bottom: 1em; font-size: 16px; display: flex; justify-content: flex-start; flex-flow:wrap;}
    footer .footer-info p{width: 30%; }
    footer .footer-other{width: 20%; margin-top: 0em; display: flex; justify-content: space-between;}
    footer .footer-other div{width: 48%;}
    footer .footer-other div img{width: 100%; height: auto; margin: 0 auto;}
    
    
    footer .copyright{font-size:1vw;}
    footer .footer-copy{font-size: 2.4vw; font-weight: bold;}
    .pc_lp {
        display: none;
    }

    .sp_lp {
        display: block;
    }
}

/* iPad　縦向き */
@media (min-width: 660px) and (max-width: 1024px) {
    /* iPad全体（縦向き）のスタイル */
    body{width: 100vw;height: 100vh; padding-top: 100px;}
    /* header -----------------------*/
    header.site-header{height: 100px; padding-top: 1em;padding-bottom: 1em;}
    .header-contents h1{display: block; width: 45%;}
    .header-contents h1 img{width: 100%; height: auto; margin: 0 auto;}
    div.header-menu{ position: relative; width: 55%;}
    header nav ul {list-style: none;padding: 0;display: flex;gap: 1.5em;}
    header nav ul li{font-size: 1.8vw;}
    header nav#sub-menu ul {position: absolute; top: 10%; right: 40px; width:100%; justify-content: flex-end;}
    header nav#main-menu ul {position: absolute; top: 100%; right: 40px; width:100%; justify-content: flex-end;}
    header nav#sub-menu ul li{ display: block; width: 30%; text-align: center; padding:5px; color: #fff; -webkit-transition: all .5s; transition: all .5s;}
        
    .hamburger {right : 15px; top: 15px;}
    nav#globalMenuSp {;width: 40vw;}


    /* bottom-contact -----------------------*/

    main #bottom-contact .bottom-contact-container{width: 90%;margin: 0 auto; padding-top: 2em; padding-bottom: 5em;}
    main #bottom-contact .bottom-contact-title{width: 100%; text-align: center;}
    main #bottom-contact .bottom-contact-title h2 {font-size:90px; display: block;}
    main #bottom-contact .bottom-contact-contents{width: 100%;margin: 0 auto;padding-top: 2em;  display: flex; justify-content: space-between;}

    main #bottom-contact .bottom-contact-tel {width: 48%;}
    main #bottom-contact .bottom-contact-mail {width: 48%;}
    
    /*.bottom-contact-mail .btn-----------------------*/

    .bottom-contact-mail .btn {color: #fff;letter-spacing: .1em;text-align: center;width: 300px;height: 120px;background: #00a5a0;
        margin:0 auto 0 0; display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 100px;text-decoration: none;font-size: 1.1rem;gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;}
    .bottom-contact-mail .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1);    transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;}
    .bottom-contact-mail .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;}
    .bottom-contact-mail .btn:hover::after {transform: scale(1, 1);}
    .bottom-contact-mail .btn .circle {position: relative;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: #fff;display: flex;align-items: center; justify-content: center;flex-shrink: 0;}
    .bottom-contact-mail .btn .circle .icon {transition: all 0.2s cubic-bezier(0.65, 0, 0.076, 1);font-size: 1rem;color: #00a5a0;position: relative;}
    .bottom-contact-mail .btn:hover .circle .icon {transform: translateX(5px);}

    /*.bottom-contact-tel .btn-----------------------*/

    .bottom-contact-tel .btn {color: #333;letter-spacing: .1em;text-align: center;width: 300px;height: 120px;background: #ffe600;
        margin:0 0 0 auto; display: flex; flex-flow: column; align-items: center;justify-content: center;transition: 0.5s;border-radius: 100px;text-decoration: none;font-size: 1.1rem;gap: 0.1rem; overflow: hidden;position: relative;z-index: 1;}
    .bottom-contact-tel .btn a{text-decoration: none; font-size: 20px; font-weight: 600; color: #333;}

    /* bottom-recruit -----------------------*/

    main #bottom-recruit .bottom-recruit-container{width: 90%;margin: 0 auto; display: flex; justify-content: space-between;
        padding-top: 5em; padding-bottom: 5em;}
    main #bottom-recruit .bottom-recruit-contents{width: 48%;margin: 0 auto; display: flex; justify-content:center; flex-flow: column;}
    main #bottom-recruit .bottom-recruit-title {width: 100%;}
    main #bottom-recruit .bottom-recruit-title h2{ font-size: 24px;}
    main #bottom-recruit .bottom-recruit-title h2 span {font-size: 6.2vw; display: block;}

    main #bottom-recruit .bottom-recruit-comment {width: 100%; display: flex; flex-direction: column; justify-content: center;align-items: center;}
    main #bottom-recruit .bottom-recruit-comment p{ font-size: 24px; margin:20px auto 0px 0px; width: -moz-fit-content; width: fit-content;}
    main #bottom-recruit .bottom-recruit-btn{width: 48%; display: flex; flex-direction: column; justify-content: center;align-items: center;}


    
    /* footer -----------------------*/

    footer #footer-container { background-color: #ffe600; padding-top:1.5em; padding-bottom:1.5em}
    footer .footer-contents {width: 90%;margin: 1em auto;display: flex; justify-content: center; flex-flow: column-reverse; }
    footer .footer-logo-contents {width: 100%; margin-top: 2em; border-top: 1px solid #fff069; display: flex;align-items: center;}
    footer .footer-left {display: flex; flex-direction: column; width: 40%; margin-top: 1.5em;}
    footer .footer-menu-contents {width: 100%;}
    footer nav ul {list-style: none;padding: 0;display: flex;gap: 1em; flex-wrap: wrap;}
    footer nav ul li{font-size: 2.8vw; font-weight:700;}
    ul.submenu li{width: 100%; font-size: 2.8vw; margin-top: 0.5em;}
    footer .footer-logo{width: 80%; margin-left: 0px;}
    footer .footer-copy{font-size: 3.8vw; font-weight: bold;}
    footer .footer-info{width: 100%; margin-bottom: 1em; font-size: 16px; display: flex; justify-content: flex-start; flex-flow:wrap;}
    footer .footer-info p{width: 50%; }
    footer .footer-other{width: 30%; margin-top: 0em; display: flex; justify-content: space-between;}
    footer .footer-other div{width: 48%;}
    footer .footer-other div img{width: 100%; height: auto; margin: 0 auto;}
    
    footer .copyright{font-size:1.8vw;}

    .pc_lp {
        display: none;
    }

    .sp_lp {
        display: block;
    }
    
}


/*width: 1024px-----------------------*/
/* iPad mini 横向き */
@media screen and (width: 1024px) { 
    header nav#main-menu ul {position: absolute; top: 75%;}
    header.site-header{height: 120px;}
    footer .footer-info p{width: 38%; }
    footer .footer-left {display: flex; flex-direction: column; width: 30%;}
}

/*max-width: 600px-----------------------*/
/* スマホ　縦向き */
@media screen and (max-width: 600px) {

        body {padding-top: 80px;}

        /* header -----------------------*/
        header.site-header{height: 80px; padding-top: 1em;padding-bottom: 1em;}
        .header-contents h1{display: block; width: 80%;}
        .header-contents h1 img{width: 100%; height: auto; margin: 0 auto;}
        header nav#sub-menu ul {display: none;}
        header nav#main-menu ul {display: none;}
        div.header-menu{ position: relative; width: 20%;}
        

        /*hamburger menu-----------------------*/

        nav#globalMenuSp {position: fixed;z-index : 2;top  : 0;left : 0;color: #fff;background: rgba(0, 165, 160, 0.8);text-align: center;width: 100%;transform: translateX(100%);transition: all 0.6s;}
        

        /* bottom-contact -----------------------*/

        main #bottom-contact .bottom-contact-container{width: 90%;margin: 0 auto; padding-top: 2em; padding-bottom: 5em;}
        main #bottom-contact .bottom-contact-title{width: 100%; text-align: center;}
        main #bottom-contact .bottom-contact-title h2 {font-size:18vw; display: block;}
        main #bottom-contact .bottom-contact-contents{width: 100%;margin: 0 auto;padding-top: 2em;  display: flex; flex-flow: column; justify-content: center;}

        main #bottom-contact .bottom-contact-tel {width: 100%;}
        main #bottom-contact .bottom-contact-mail {width: 100%;}

        /*.bottom-contact-mail .btn-----------------------*/

        .bottom-contact-mail .btn {color: #fff;letter-spacing: .1em;text-align: center; width: 100%;height: 100px;background: #00a5a0;
            margin:20px auto 0 auto; display: flex;align-items: center;justify-content: center;transition: all 0.5s;border-radius: 120px;text-decoration: none;font-size: 1.1rem;gap: 1rem;overflow: hidden;position: relative;z-index: 1; border: 2px solid transparent;}
        
        .bottom-contact-mail .btn::after {display: none; content: none;}
        
        /*
        .bottom-contact-mail .btn::after {background: #fff;position: absolute;top: 0;left: 0;content: '';width: 100%;height: 100%;transform: scale(0, 1);    transform-origin: left top;transition: .2s cubic-bezier(0.45, 0, 0.55, 1);z-index: -1;}
        .bottom-contact-mail .btn:hover {color: #00a5a0; border: 2px solid #00a5a0;}
        */
        
        .bottom-contact-mail .btn:hover {color: #fff; border: 2px solid #00a5a0;}
        .bottom-contact-mail .btn:hover::after {transform: scale(1, 1);}
        .bottom-contact-mail .btn .circle {position: relative;width: 2.5rem;height: 2.5rem;border-radius: 50%;background: #fff;display: flex;align-items: center; justify-content: center;flex-shrink: 0;}
        .bottom-contact-mail .btn .circle .icon {transition: all 0.2s cubic-bezier(0.65, 0, 0.076, 1);font-size: 1rem;color: #00a5a0;position: relative;}
        .bottom-contact-mail .btn:hover .circle .icon {transform: translateX(5px);}

        /*.bottom-contact-tel .btn-----------------------*/

        .bottom-contact-tel .btn {color: #333;letter-spacing: .1em;text-align: center; width: 100%;height: 100px;background: #ffe600;
            margin:0 auto; display: flex; flex-flow: column; align-items: center;justify-content: center;transition: 0.5s;border-radius: 120px;text-decoration: none;font-size: 1.1rem;gap: 0.1rem; overflow: hidden;position: relative;z-index: 1;}
        .bottom-contact-tel .btn a{text-decoration: none; font-size: 20px; font-weight: 600; color: #333;}
        
        /* bottom-recruit -----------------------*/

        main #bottom-recruit .bottom-recruit-container{width: 100%;margin: 0 auto; display: flex; justify-content:center; flex-flow: column;
            padding-top: 5em; padding-bottom: 5em;}
        main #bottom-recruit .bottom-recruit-contents{width: 100%;margin: 0 auto; display: flex; justify-content:center; flex-flow: column;}
        main #bottom-recruit .bottom-recruit-title { width: 90%; margin: 0 auto; text-align: center;}
        main #bottom-recruit .bottom-recruit-title h2{ font-size: 4.8vw;}
        main #bottom-recruit .bottom-recruit-title h2 span {font-size: 13vw; display: block;}

        main #bottom-recruit .bottom-recruit-comment {width: 90%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center;align-items: center;}
        main #bottom-recruit .bottom-recruit-comment p{ font-size: 4.8vw; margin:20px auto; width: -moz-fit-content; width: fit-content;}
        main #bottom-recruit .bottom-recruit-btn{margin-top: 20px; width: 100%; display: flex; flex-direction: column; justify-content: center;align-items: center;}

        /* footer -----------------------*/

        footer #footer-container { background-color: #ffe600; padding-top:1.5em; padding-bottom:1.5em}
        footer #copyright-container{}
        footer .footer-contents {width: 90%;margin: 1em auto;display: flex; justify-content: center; flex-flow: column-reverse; }
        footer .footer-logo-contents {width: 100%; margin-top: 2em; border-top: 1px solid #fff069;}
        footer .footer-logo-contents .footer-left{margin-top: 1.5em;}
        footer .footer-menu-contents {width: 100%;}
        footer nav ul {list-style: none;padding: 0;display: flex;gap: 0.5em; flex-wrap: wrap;}
        footer nav ul li{font-size: 4.8vw; font-weight:700;}
        footer nav ul.submenu li{width: 100%; font-size: 2.8vw; margin-top: 0.5em;}
        footer .footer-logo{width: 40%; margin-left: 0px;}
        footer .footer-logo img{width: 100%; height: auto; margin: 0 auto;}
        footer .footer-copy{font-size: 6.2vw; font-weight: bold;}
        footer .footer-info{width: 100%; margin-bottom: 1em; font-size:3.2vw;}
        footer .footer-other{width: 60%;}
        footer .copyright{font-size:2.8vw;}
        
        
        
        .nav {
            flex-direction: column;
            align-items: center;
        }
        .nav li {
            margin: 0.5em 0;
        }

        .back-to-top {
            width: 40px;
            height: 40px;
            font-size: 16px;
            bottom: 15px;
            right: 15px;
        }
        .pc_lp {
            display: none;
        }

        .sp_lp {
            display: block;
        }
    }