html {
    scroll-behavior: smooth;
}

svg {
    width: 1em;
    height: auto;
}

a {
    width: auto;
}

main {
    overflow: hidden;
}

#home {
    margin-top: 0px;
}

/* ヘッダー */
.header_menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5vw;
}

.header_menu.scrolled {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header_logo img {
    height: 40px;
    width: auto;
}

.header_nav {
    display: flex;
    gap: 20px;
}

.header_nav > li {
    position: relative;
}

.header_nav_item {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
    text-decoration: none;
    color: #063149;
}

.header_nav_item:hover {
    color: #009991;
}

.header_nav_item_last:hover {
    color: #fff;
}

.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: initial;
    color: #009991;
    padding: 10px 20px;
    border-radius: 30px;
    border: 2px solid #009991;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-btn:hover {
    color: #fff;
    background-color: #009991ca;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.header_nav_item .contact {
    fill: #009991;
}

.header_nav_item:hover .contact {
    fill: #fff;
}

.header_nav > li > ul {
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    top: 100%;
    left: 0;
    display: none;
    z-index: 1000;
    min-width: 200px;
    white-space: nowrap;
}

.header_nav > li > ul li a {
    padding: 10px 20px;
    display: block;
    color: #063149;
    transition: background 0.3s ease;
    text-decoration: none;
}

.header_nav > li > ul li a:hover {
    background: #f0f0f0;
}

.header_nav > li:hover > ul {
    display: block;
}

/* ハンバーガーメニューボタン */
.spMenuBtn {
    position: relative;
    cursor: pointer;
    z-index: 999;
}

.spMenuBtn span {
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 2px;
    background: #0070c0;
    transition: all 0.4s;
}

.spMenuBtn span:nth-of-type(1) {
    top: -7px;
}

.spMenuBtn span:nth-of-type(2) {
    top: 1px;
}

.spMenuBtn span:nth-of-type(3) {
    top: 9px;
}

.spMenuBtn.is-active span:nth-of-type(1) {
    top: 1px;
    transform: translateX(-50%) rotate(225deg);
}

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

.spMenuBtn.is-active span:nth-of-type(3) {
    top: -3px;
    transform: translateX(-50%) rotate(-225deg);
}

/* スマホメニュー */
.spMenu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 10;
    width: 210vw;
    height: 210vw;
    min-height: 114vh;
    min-width: 130vw;
    background: #fff;
    border-radius: 50%;
    font-weight: 700;
    transition: transform 0.6s ease, opacity 0.6s ease;
    pointer-events: none;
}

.spMenu.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.spMenu-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 30%;
}

.spMenu-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.spGnav_a nav {
    max-height: 0; /* 初期状態で閉じている */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.spGnav_a nav.open {
    max-height: 1000px; /* 開いた状態 */
}

.spGnav_a {
    margin: 20px 0;
}

.spGnav_a p {
    font-size: 1.8rem;
    margin-left: 20px;
}

.spGnav_a li{
    margin: 10px 0 0 45px;
}

.spMenu-nav li a {
    text-decoration: none;
    font-size: 1.8rem;
    color: #063149;
    transition: color 0.3s ease;
}

.spHeader_nav_item {
    gap: 10px;
}

.spHeader_nav_item .contact {
    fill: #063149;
}

.header_nav > li > ul {
    display: none;
    /* padding: 0 20px; */
}

.header_nav > li.is-open > ul {
    display: block;
}

@media (min-width: 1025px) {
    .spMenuBtn {
        display: none;
    }

    .spMenu {
        display: none;
    }

    .header_nav {
        display: flex;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .header_nav._pc {
        display: none;
    }

    .header_menu {
        top: -10px;
    }

    .header_nav {
        flex-direction: column;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .header_nav._pc {
        display: none;
    }

    .header_menu {
        top: -10px;
    }

    .header_nav {
        flex-direction: column;
    }
}

/* フッター */
.sec05 {
    position: relative;
    padding-top: 120px;
}

.sec05 .container {
    width: 80vw;
    margin: 0 auto;
    padding-top: 100px;
    padding-bottom: 100px;
}

.sec05 .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: -webkit-fill-available;
    background: url(../img/front/footermap.png);
    background-position: center;
    background-size: 120%;
    background-repeat: no-repeat;
}

.sec05 .logo {
    width: 150px;
    margin-bottom: 120px;
}

.sec05 .menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
}

.sec05 .menu-section {
    flex: 1 1 calc(25% - 20px);
    min-width: 220px;
    padding: 10px;
}

.sec05 .menu h3 {
    font-size: 1.8rem;
    font-family: "ta-kakugo-gf-03", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.sec05 .menu ul {
    padding: 0;
    margin: 5px 0 10px 10px;
}

.sec05 .menu ul li {
    font-size: 1.5rem;
    padding: 10px 0 10px 25px;
    background-size: 16px;
    transition: color 0.3s ease-in-out;
}

.sec05 .menu .wrap01 ul li {
    background: url(../img/front/green-clover.png) no-repeat left center;
}

.sec05 .menu .wrap02 ul li {
    background: url(../img/front/red-clover.png) no-repeat left center;
}

.sec05 .menu .wrap03 ul li {
    background: url(../img/front/blue-clover.png) no-repeat left center;
}

.sec05 .menu .wrap04 ul li {
    padding-left: 0;
}

.sec05 .menu .wrap01 ul li:hover {
    color: #009991;
}

.sec05 .menu .wrap02 ul li:hover {
    color: #c35159;
}

.sec05 .menu .wrap03 ul li:hover {
    color: #257ab4;
}

.sec05 .menu .wrap04 ul li:hover {
    color: #c9b09c;
}

.footer-bottom {
    padding: 20px;
    text-align: center;
    letter-spacing: 0.2rem;
}

@media (max-width: 768px) {
    .sec05 {
        padding-top: 0px;
    }

    .sec05 .container {
        width: 95vw;
        padding-top: 0;
        padding-bottom: 50px;
    }

    .sec05 .bg {
        width: 100vw;
        background-size: cover;
    }

    .sec05 .logo {
        display: block;
        width: 150px;
        margin: 0 auto 50px;
    }

    .sec05 .menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }
    .sec05 .menu ul {
        margin: 10px 0 30px 0;
    }
    .sec05 .wrap {
        width: 50%;
        box-sizing: border-box;
    }
    .sec05 .wrap03 {
        order: 1;
    }
    .sec05 .wrap02 {
        order: 2;
    }
    .sec05 .wrap01 {
        order: 3;
    }
    .sec05 .wrap04 {
        order: 4;
    }

    .sec05 .menu-section {
        flex: 1 1 auto;
        min-width: 100%;
        text-align: center;
    }

    .sec05 .menu h3 {
        font-size: 1.5rem;
    }

    .sec05 .menu ul li {
        font-size: 1.3rem;
        padding: 5px 0 10px 25px;
    }

    .footer-bottom {
        padding: 15px;
        font-size: 0.8rem;
    }
}

/* フロントページ */
#front .main-visual {
    position: relative;
    height: 130vh;
    height: 100vh;
    margin-bottom: -15vw;
}

#front .main-visual::before {
    content: '';
    background: url(../img/front/bg.png);
    display: block;
    width: 100%;
    height: 150%;
}

#front .phrase {
    text-align: center;
    color: #257ab4;
    -webkit-text-stroke: 1px #FFF;
    font-family: "ta-kakugo-gf-03", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 32%;
    left: 50%;
    width: 100%;
}

#front .decode-text {
    letter-spacing: -1.5rem;
}

#front .phrase h2 {
    padding-bottom: 10px;
}

#front .phrase h2 span {
    font-size: 4.7rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#front .phrase p span {
    font-size: 2.7rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#front .worldmap {
    position: absolute;
    width: 120%;
    transform: translate(-50%, -50%);
    top: 104%;
    left: 50%;
}

#front .mapbody {
    width: auto;
    height: auto;
}

#front .btn-wrap {
    display: flex;
    gap: 10%;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 90%;
    left: 50%;
    width: 100%;
}

#front .btn-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
}

#front .btn-text p {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}

#front .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 70px;
    border-radius: 40px;
    width: fit-content;
    position: relative;
    left: 25px;
    background-color: transparent;
    transition: all 0.3s ease;
    z-index: 1;
}

#front .recruit {
    border: 4px solid #009991;
}

#front .registration {
    border: 4px solid #c35159;
}

#front .con {
    border: 4px solid #257ab4;
}

#front .list {
    border: 4px solid #c9b09c;
    padding: 10px 30px;
    height: fit-content;
    margin-bottom: 30px;
}

#front .btn::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -17px;
    right: 6px;
    bottom: -15px;
    border-radius: 40px;
    background-color: #eaeaea;
    z-index: -1;
    transition: all 0.3s ease;
    mix-blend-mode: multiply;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

#front .btn::after {
    content: "";
    position: absolute;
    height: 4px;
    width: 60px;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}

#front .recruit:after {
    background-color: #009991;
}

#front .registration:after {
    background-color: #c35159;
}

#front .con:after {
    background-color: #257ab4;
}

#front .list:after {
    background-color: #c9b09c;
    width: 30px;
}

@media (min-width: 769px) {
    #front .btn:hover::before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    #front .btn:hover::after {
        transform: translateY(-50%);
        animation: front_border_anim_btn 0.5s linear forwards;
    }

    #front .list:hover::after {
        transform: translateY(-50%);
        animation: front_border_anim_list 0.5s linear forwards;
    }
}

@keyframes front_border_anim_btn {
	0%{
		width: 60px;
	}
	50%{
		width: 0px;
	}	
    100%{
		width: 60px;
	}
}

@keyframes front_border_anim_list {
	0%{
		width: 30px;
	}
	50%{
		width: 0px;
	}	
    100%{
		width: 30px;
	}
}

@media (max-width: 1025px){
    #front .main-visual {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }

    #front .main-visual::before {
        background: none;
    }

    #front .phrase {
        top: 25%;
    }

    #front .worldmap {
        left: 0;
        top: 88%;
        transform: scale(3.5);
    }

    #front .btn-wrap {
        flex-wrap: wrap;
        width: 93%;
        max-width: 600px;
        margin: 0 auto;
        top: 85%;
        left: 48%;
    }

    #front .btn {
        padding: 10px 20px;
        left: 0;
    }

    #front .btn-text p {
        font-weight: normal;
        font-size: 1.3rem;
    }

    #front .recruit, #front .registration {
        flex: 1;
        min-width: 25%;
        text-align: center;
    }

    #front .con {
        text-align: center;
        justify-content: center;
    }

    #front .btn::before {
        top: 10px;
        left: -10px;
        right: 10px;
        bottom: -10px;
    }

    #front .btn::after {
        width: 25px;
        height: 2px;
    }

    #front .recruit {
        border: 2px solid #009991;
    }
    
    #front .registration {
        border: 2px solid #c35159;
    }
    
    #front .con {
        border: 2px solid #257ab4;
        margin-top: 20px;
        min-width: 50%;
    }
}

@media (max-width: 767px) {
    #front .worldmap {
        top: 80%;
    }

    #front .phrase h2 span {
        font-size: 3rem;
    }

    #front .phrase p span {
        font-size: 1.8rem;
    }
}

/* sec共通 */
#front .title {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}

#front .title h1 {
    font-family: "ta-kakugo-gf-03", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14.8rem;
    color: #efefef4d;
    margin-bottom: 30px;
    position: relative;
}

#front .title h2 {
    font-family: "ta-kakugo-gf-03", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.4rem;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    white-space: nowrap;
}

#front .sec02,
#front .sec03 {
    width: 85vw;
    margin: 200px auto;
    padding: 60px 0 0 0;
}

.slick-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.slick-list {
    margin-left: 0;
    overflow: hidden;
}

.slick-track {
    display: flex;
    align-items: center;
}

.slick-dots {
    display: block !important;
    position: absolute;
    left: 60%;
    transform: translateX(-50%);
    list-style: none;
    margin-top: 15px;
}

.slick-dots li {
    display: inline-block;
    margin: 0 10px;
}

.slick-dots li button {
    font-size: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #efefef;
    border: none;
}

#front .sec .contents-wraper .content {
    text-align: center;
    background: #efefef;
    border-radius: 15px;
    position: relative;
    height: auto;
    max-height: 600px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

#front .sec .contents-wraper .content h3 {
    font-size: 2rem;
    font-family: "ta-kakugo-gf-03", sans-serif;
    font-weight: 400;
    margin-bottom: 3px;
    padding-top: 50px;
    position: relative;
    z-index: 1;
}

#front .sec .contents-wraper .content .color {
    font-size: 1.4rem;
    font-family: "蘋果儷中黑";
    font-weight: bold;
    position: relative;
    z-index: 1;
}

#front .sec .contents-wraper .content .color::after {
    content: "";
    background-color: #848484;
    height: 2px;
    width: 30px;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}

#front .sec .contents-wraper .content img {
    display: block; 
    width: 30%;
    height: auto;
    margin: 10% auto 0;
    position: relative;
    z-index: 1;
}

#front .sec .contents-wraper .content .curve-a {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(55% at 50% 100%);
    border-radius: 15px;
    transition: clip-path 0.5s ease-in-out;
}

#front .sec .contents-wraper .content:hover .curve-a {
    clip-path: circle(130% at 50% 100%);
}

#front .sec .contents-wraper .content .jpn {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-top: 30%;
    position: relative;
}

#front .sec .contents-wraper .content .eng {
    font-size: 1rem;
    line-height: 1.5;
    color: #848484;
    margin-top: 10%;
    margin-bottom: 15%;
    position: relative;
}

/* @media (max-width: 1025px){
    #front .title {
        margin: 0 -15px;
    }

    #front .title h1, #front .title h2 {
        writing-mode: vertical-rl;
    }

    #front .title h1 {
        font-size: 6rem;
    }

    #front .title h2 {
        font-size: 2rem;
        top: 42% !important;
        left: 48% !important;
    }
} */

@media (max-width: 767px){
    #front .title {
        margin: 0 -15px;
    }

    #front .title h1, #front .title h2 {
        writing-mode: vertical-rl;
    }

    #front .title h1 {
        font-size: 6rem;
    }

    #front .title h2 {
        font-size: 2rem;
        top: 42% !important;
        left: 48% !important;
    }
}


/* sec01 */
#front .sec01 {
    width: 80vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
    margin-top: 450px;
    position: relative;
    margin-bottom: -50px;
}

#front .news-title h1,
#front .news-title h2 {
    writing-mode: vertical-rl;
}

#front .news-title h2 {
    writing-mode: vertical-rl;
    top: 37% !important;
    left: 48% !important;
    letter-spacing: 0.5rem;
}

#front .news-list {
    width: 85%;
    background-color: #efefef4d;
    border-radius: 15px;
    padding: 55px 50px;
}

#front .news-list li {
    margin: 35px 0;
    display: flex;
    gap: 25px;
    align-items: center;
    position: relative;
    overflow: hidden; 
}

#front .news-list .meta-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

#front .news-list .meta-info .date {
    font-size: 1.5rem;
}

#front .news-list a {
    font-size: 1.5rem;
}


#front .news-list .categories {
    color: #fff;
    border-radius: 50px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    min-width: 145px;
}

#front .news-list .categories a {
    font-size: 1.4rem;
}

#front .news-list .cat-for-registrant .categories { background-color: #c35159; }
#front .news-list .cat-for-client .categories { background-color: #257ab4; }
#front .news-list .cat-for-staff .categories { background-color: #009991; }
#front .news-list .cat-common .categories { background-color: #c9b09c; }

#front .news-list li::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 0;
    top: 50%;
    left: 85%;
    transform: translateY(-50%);
    transition: width 0.3s ease;
}

#front .news-list li:hover::after {
    width: 100px;
    transform: translateY(-50%);
}

#front .news-list .cat-for-registrant::after { background-color: #c35159; }
#front .news-list .cat-for-client::after { background-color: #257ab4; }
#front .news-list .cat-for-staff::after { background-color: #009991; }
#front .news-list .cat-common::after { background-color: #c9b09c; }

@media (max-width: 1025px){
    #front .sec01 {
        width: 95vw;
        margin-top: 120px;
    }

    #front .news-title h2 {
        top: 17% !important;
        left: 46% !important;
    }

    #front .sec01 .btn {
        padding: 5px;
        width: 100%;
        left: 0px;
        transform: rotate(90deg);
        /* top: 50px; */
        top: 155px;
    }

    #news .title {
        margin: 0 -15px;
    }

    #news .title h1, #news .title h2 {
        writing-mode: vertical-rl;
    }

    #news .title h1 {
        font-size: 6rem;
    }

    #news .title h2 {
        font-size: 2rem;
        top: 42% !important;
        left: 48% !important;
    }


    #front .news-list {
        width: 95%;
        padding: 30px 20px;
        margin-left: 30px;
    }

    #front .news-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 30px 0;
    }

    #front .news-list .categories a {
        font-size: 1.2rem;
    }

    #front .news-list .categories {
        min-width: 105px;
        padding: 5px 10px;
    }

    #front .news-list li::after {
        display: none;
    }
}

@media (max-width: 768px) {
    #front .sec01 {
        width: 95vw;
        margin-top: 60px;
    }
}

/* sec02 */
#front .sec02 .contents-wraper .content-2 {
    margin-top: 80px;
}

#front .sec02 .contents-wraper .content .color {
    color: #009991;
}

#front .sec02 .contents-wraper .content .curve-a {
    background: #DCE6E6;
}

#front .sec02 .contents-wraper .content .curve-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: circle(65% at 50% 25%);
    background: #DCE6E6;
    border-radius: 15px;
    transition: clip-path 0.5s ease-in-out;
}

#front .sec .contents-wraper .content:hover .curve-b {
    clip-path: circle(130% at 50% 100%);
}

#job-seekers .slick-dots li.slick-active button {
    background: #009991;
}

@media (min-width: 767px) {
    .slick-slider, .slick-list, .slick-track, .slick-dots, .s-flex {
        display: flex !important;
        justify-content: center;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 50px;
        width: 85vw;
    }

    .slick-slider > div,
    .s-flex > div {
        flex: 1; 
        max-width: 32%;
    }

    .slick-slider a.content,
    .s-flex a.content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        background-color: #efefef;
        border-radius: 15px;
        padding: 20px;
        text-decoration: none;
        color: inherit;
        width: 100%;
        max-width: 350px;
        min-height: 500px;
        box-sizing: border-box;
    }

    .slick-slider a.content img,
    .s-flex a.content img {
        width: 60%;
        height: auto;
        margin: 10px auto;
    }

    .slick-slider a.content h3,
    .s-flexr a.content h3 {
        font-size: 1.6rem;
        margin-bottom: 5px;
        padding-top: 20px;
    }

    .slick-slider a.content .color,
    .s-flexr a.content .color {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .slick-slider a.content .jpn,
    .s-flexr a.content .jpn {
        font-size: 1.4rem;
        line-height: 1.5;
        margin-top: 10%;
    }

    .slick-slider a.content .eng,
    .s-flexr a.content .eng {
        font-size: 1rem;
        color: #848484;
        margin-bottom: 10%;
    }
}

@media (max-width: 1025px) {
    .slick-slider > div,
    .s-flexr > div {
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    #front .sec02,
    #front .sec03,
    #front .sec04 .containe {
        width: 95vw;
        margin: 50px auto;
        padding: 50px 0 0 0;
    }

    #front .sec .contents-wraper {
        padding-left: 0;
        margin-left: 10px;
    }

    #front .sec02,
    #front .sec03 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #front .sec02 .job-title {
        text-align: left;
    }

    #front .sec02 .contents-wraper,
    #front .sec03 .contents-wraper {
        width: 80%;
    }

    .slick-slider > div {
        max-width: 100%;
    }

    .contents-wraper .content {
        width: 100%;
        max-width: 350px;
        margin: auto;
    }

    #front .sec .contents-wraper .content h3 {
        font-size: 1.5rem;
        padding-top: 30px;
    }

    #front .sec .contents-wraper .content .color {
        font-size: 1.2rem;
    }

    #front .sec .contents-wraper .content .color::after {
        width: 25px;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    #front .sec .contents-wraper .content .jpn {
        font-size: 1.2rem;
    }

    #front .sec .contents-wraper .content .eng {
        font-size: 0.9rem;
    }

    #front .sec02 .contents-wraper .content:nth-child(even) {
        margin-top: 0;
    }

    #front .sec02 .contents-wraper .content .curve-a {
        height: 85%;
    }

    #front .sec02 .contents-wraper .content .curve-b {
        height: 105%;
    }
}

/* sec03 */
#front .sec03 .contents-wraper .content-2 h3 {
    padding-top: 40px;
}

#front .sec03 .contents-wraper .content h3 span {
    font-size: 3rem;
}

#front .sec03 .contents-wraper .content .color {
    color: #c35159;
}

#front .sec03 .contents-wraper .content .curve-a {
    background : #EBDFE0;
}

#registered-users .slick-dots li.slick-active button {
    background: #c35159;
}

@media (max-width: 768px) {
    #front .sec03 .contents-wraper .content h3 span {
        font-size: 2.2rem;
    }
}

/* sec04 */
#front .sec04 {
    background-color: #efefef;
    position: relative;
    width: 95vw;
    margin: 250px auto 0;
    padding: 100px 0 130px 0;
    border-radius: 15px;
}

#front .sec04 .bg {
    width: 100%;
    position: absolute;
    bottom: 0;
}

#front .sec04 .line {
    fill: #fff;
}

#front .sec04 .contents-wraper {
    display: flex;
    justify-content: center;
    gap: 50px;
    padding: 20px 50px 0;
}

#front .sec04 .contents-wraper .content {
    background: #fff;
    margin: 0;
}

#front .sec04 .contents-wraper .content:hover {
    opacity: 0.7 !important;
}

#front .sec04 .contents-wraper .content-a {
    width: 48vw;
    height: inherit;
    max-height: 600px;
    max-width: none;
    overflow: hidden;
}

#front .sec04 .contents-wraper .content .color {
    color: #0070c0;
}

#front .sec04 .contents-wraper .curve-a {
    background : #D2E2F2;
}

#front .sec04 .contents-wraper .content:hover .curve-a {
    clip-path: circle(55% at 50% 100%);
}

#front .sec04 .contents-wraper .content .service-wrap {
    display: flex;
    justify-content: center;
}

#front .sec04 .contents-wraper .content .service-wrap .flex-sp {
    display: flex;
}

#front .sec04 .contents-wraper .content .service-wrap p {
    position: relative;
    color: #0070c0;
    font-size: 1.4rem;
}

#front .sec04 .contents-wraper .content .service-wrap img {
    width: 59%;
    margin-top: 20%;
}

#front .sec04 .contents-wraper .content-a .jpn {
    margin-top: 17% !important;
}

#front .sec04 .contents-wraper .content-a .eng {
    margin-top: 5%;
    position: relative;
}

#front .sec04 .title h1 {
    color: #ffffff80;
}

#front .sec04 .contents-wraper .content .wave {
    width: 115%;
    height: auto;
    position: absolute;
    bottom: -11%;
    left: -12%;
    z-index: -1;
    border-radius: 0 0 15px 15px;
}

@media (max-width: 1025px) {
    #front .sec04 .contents-wraper .contact-b {
        max-width: 230px;
    }
}


@media (max-width: 767px) {
    #front .sec04 {
        width: 100%;
        padding: 115px 0;
        margin: 100px auto;
        border-radius: 0;
        overflow: hidden;
    }

    #front .sec04 .bg {
        width: 700%;
        position: absolute;
        bottom: 0;
        left: -100%;
    }

    #front .sec04 .container {
        display: flex;
        align-items: flex-start;
        width: 95vw;
    }

    #front .sec04 .container .title {
        margin: 40px 0 0;
    }

    #front .sec04 .contents-wraper {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 0;
    }

    #front .sec04 .contents-wraper .contact-b {
        max-width: none;
    }

    #front .sec04 .contents-wraper .content-a {
        width: 100%;
        padding: 0px;
        height: auto;
        max-height: 1000px;
        background-color: #D2E2F2;
    }

    #front .sec04 .contents-wraper .flex-sp {
        display: flex;
    }

    #front .sec04 .contents-wraper .content h3 {
        font-size: 1.5rem;
    }

    #front .sec04 .contents-wraper .content .color {
        font-size: 1.2rem;
    }

    #front .sec04 .contents-wraper .content img {
        width: 60%;
        margin-top: 1.5vh;
    }

    #front .sec04 .contents-wraper .content .service-wrap {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    #front .sec04 .contents-wraper .content .service-wrap img {
        width: 50%;
    }

    #front .sec04 .contents-wraper .content-a .service-wrap img {
        width: 70%;
    }

    #front .sec04 .contents-wraper .content .service-wrap p {
        font-size: 1rem;
    }

    #front .sec04 .contents-wraper .content .jpn {
        font-size: 1.2rem;
    }

    #front .sec04 .contents-wraper .content .eng {
        font-size: 0.9rem;
        margin-top: 5%;
    }

    #front .sec04 .contents-wraper .content .service-wrap .curve-c {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;    
        clip-path: circle(60% at 50% 30%);
        background: #fff;
        border-radius: 15px 15px 0 0;
    }

    #front .sec04 .contents-wraper .content .curve-d {
        display: none;
    }

    #front .sec04 .contents-wraper .curve-e {
        display: none;
    }

    #front .sec04 .contents-wraper .content .wave {
        display: none;
    }
}


























/* 下層ページ 共通*/
.sub-main .container {
    position: relative;
    width: 100%;
    height: auto; 
    overflow: visible;
}

.sub-main .sub-titlle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 47%;
    clip-path: ellipse(105% 100% at 8% 0%);
    background: #c9b09c;
    z-index: 2;
    padding-left: 3vw;
}

.sub-main .sub-titlle h1 {
    color: #fff;
    font-weight: bold;
    font-size: 4.8rem;
    padding-top: 6%;
}

.sub-main .sub-titlle p {
    color: #fff;
    font-size: 1.8rem;
}

.sub-main .adjust {
    display: block;
    height: 140px;
    margin-top: -140px;
    padding-top: 120px;
}

.sub-main .contents-titlle {
    position: relative;
    width: 100%;
    height: 530px;
    clip-path: ellipse(57% 100% at 50% 0%);
    background: #F9F7F5;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 12%;
    margin-top: -3%;
}

.sub-main .contents-titlle h2 {
    font-weight: bold;
    font-size: 3.6rem;
    margin-bottom: 5px;
}

.sub-main .contents-titlle p {
    font-size: 2rem;
}

.sub-main .contents-titlle p::after {
    content: "";
    position: absolute;
    left: 50%; 
    top: 85%;
    transform: translateX(-50%);
    width: 34px;
    border-bottom: 6px dotted #222;
}

.sub-main .background {
    position: relative;
    clip-path: ellipse(57% 100% at 50% 0%);
    background: #fff;
    z-index: 0;
}

.sub-main .text-wrap {
    width: 85vw;
    margin: 0 auto 80px;
}

.sub-main .text-img-wrap {
    padding: 120px 0 150px 0;
    width: 85vw;
    margin: 0 auto;
}

.sub-main .content h2 {
    position: relative;
    padding-left: 25px;
    font-size: 3rem;
    margin-bottom: 30px;
}

.sub-main .content h2:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    border-radius: 5px;
}

.sub-main .content .text-wrap p {
    padding-left: 25px;
    line-height: 1.5;
}

.sub-main .content .icon-svg {
    width: 60px;
    height: 60px;
}

.sub-main .content-1 ul {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 8%;
    width: 80vw;
    margin: 0 auto;
}

.sub-main .content-1 ul::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 55%;
    width: 80%;
    height: 100px;
    border-radius: 50px;
}

.sub-main .content-1 ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 50%; 
    width: 150px;
    height: 150px;
    justify-content: center;
    text-align: center;
    z-index: 1;
}

.sub-main .content-1 ul li p {
    margin-top: 15px;
    font-size: 1.3rem;
}

.sub-main .point {
    margin-top: -320px;
    padding-top: 400px;
    margin-bottom: 180px;
}

.sub-main .point ol {
    margin: 0 auto;
    width: 75vw;
    padding-bottom: 200px;
    display: flex;
    flex-direction: column;
    gap: 80px;
    align-items: flex-start;
}

.sub-main .point ol li {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.sub-main .point ol li .point-svg {
    width: 25%;
    max-width: 170px;
    height: auto;
}

.sub-main .point ol li .point-text-wrap h3 {
    margin-bottom: 20px;
    font-size: 3rem;
}

.sub-main .point ol li .point-text-wrap p {
    line-height: 1.5;
}

.sub-main .content-2 ol {
    width: 85vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 150px 100px;
    padding: 200px 50px;
    border-radius: 20px;
}

.sub-main .content-2 ol li {
    flex: 1 1 calc(33.33% - 50px);
    max-width: 350px;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    padding: 65px 30px;
    position: relative;
    justify-content: space-around;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.sub-main .content-2 ol li .img-wrap {
    width: 150px;
    height: 150px;
    background: #fff;
    padding: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -22%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sub-main .content-2 ol li h3 {
    text-align: center;
    font-size: 1.8rem;
    height: 150px;
    display: flex;
    align-items: center;
}

.sub-main .content-2 ol li p {
    font-size: 1.5rem;
    text-align: justify;
    line-height: normal;
}

/* 戻るボタン */
.back-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
}

.back-text p {
    font-size: 1.5rem;
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 80px;
    margin: 150px auto;
    border-radius: 40px;
    width: fit-content;
    border: 4px solid #009991;
    position: relative;
    background-color: transparent;
    transition: all 0.3s ease;
}

.back-btn::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: -15px;
    bottom: -15px;
    border-radius: 40px;
    background-color: #eaeaea;
    z-index: -1;
    transition: all 0.3s ease;
}

.back-btn::after {
    content: "";
    position: absolute;
    height: 4px;
    width: 50px;
    background-color: #009991;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
}

@media (min-width: 768px) {
    .back-btn:hover::before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    .back-btn:hover::after {
        transform: translateY(-50%);
        animation: border_anim 0.5s linear forwards;
    }
}

@keyframes border_anim {
	0%{
		width: 50px;
	}
    50%{
        width: 0;
    }
	100%{
		width: 50px;
	}
}

@media (max-width: 1025px){
    .sub-main .sub-titlle {
        height: 53%;
    }

    .sub-main .contents-titlle {
        height: 320px;
        clip-path: ellipse(60% 100% at 50% 0%);
    }
}

@media (max-width: 768px) {
    .sub-main .sub-titlle {
        height: 20vh;
        padding-left: 5%;
        clip-path: ellipse(105% 100% at 25% 0%);
    }

    .sub-main .sub-titlle h1 {
        font-size: 2.3rem;
        padding-top: 12%; 
    }

    .sub-main .sub-titlle p {
        font-size: 2rem;
    }

    .sub-main .contents-titlle {
        height: 40vh;
        padding-top: 25%;
        clip-path: ellipse(80% 100% at 50% 0%);
    }

    .sub-main .contents-titlle h2 {
        font-size: 2.8rem;
    }

    .sub-main .contents-titlle p {
        font-size: 1.6rem;
    }

    .sub-main .contents-titlle p::after {
        width: 30px;
        border-bottom: 4px dotted #222;
    }

    .sub-main .text-img-wrap {
        padding: 60px 0 80px 0;
        clip-path: ellipse(100% 100% at 50% 0%);
    }

    .sub-main .text-wrap {
        margin-bottom: 40px;
    }

    .sub-main .content h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }

    .sub-main .content h2:before {
        width: 6px;
    }

    .sub-main .content .text-wrap p {
        padding-left: 0px;
    }

    .sub-main .content .icon-svg {
        width: 40px;
        height: 40px;
    }

    .sub-main .content-1 ul {
        flex-direction: column;
        gap: 30px;
        width: 90vw;
        margin: 0 auto;
    }

    .sub-main .content-1 ul::after {
        width: 31%;
        height: 100%;
        top: 0;
    }

    .sub-main .content-1 ul li {
        width: 120px;
        height: 120px;
        padding: 10px;
    }

    .sub-main .background {
        clip-path: ellipse(130% 100% at 50% 0%);
    }

    .sub-main .point {
        margin-top: -300px;
        margin-bottom: 100px;
    }

    .sub-main .point ol {
        margin: 0 5vw;
        gap: 50px;
        padding-bottom: 50px;
    }

    .sub-main .point ol li {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-direction: column;
    }

    .sub-main .point ol li .point-svg {
        width: 10rem;
    }

    .sub-main .point ol li .point-text-wrap h3 {
        font-size: 2.4rem;
    }

    /* .sub-main .content-2 ol {
        padding: 100px 30px;
        gap: 80px;
    }

    .sub-main .content-2 ol li {
        width: 100%;
        padding: 30px;
        margin-bottom: 30px;
    }

    .sub-main .content-2 ol li .img-wrap {
        width: 120px;
        height: 120px;
        top: -30%;
    }

    .sub-main .content-2 ol li h3 {
        font-size: 1.6rem;
    }

    .sub-main .content-2 ol li p {
        font-size: 1.3rem;
    } */

    .sub-main .container-2 {
        width: 100%;
        margin-left: 0;
    }

    .back-btn {
        padding: 10px 40px 15px;
        font-size: 1rem;
    }

    .back-text p {
        font-size: 1.2rem;
    }

    .back-btn.clicked::before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .back-btn::after {
        content: "";
        position: absolute;
        height: 4px;
        width: 30px;
        background-color: #009991;
        top: 50%;
        left: -30px;
        transform: translateY(-50%);
    }

    .sub-main .content-1 ul li:nth-child(odd) {
        transform: translateX(-50px);
    }

    .sub-main .content-1 ul li:nth-child(even) {
        transform: translateX(50px);
    }
}


/* プライバシーポリシー */
#privacy .contents {
    width: fit-content;
    padding: 80px 0;
    margin: 0 auto;
}

#privacy .contents .text {
    margin-bottom: 10px;
}

#privacy .link-text {
    display: flex;
}

#privacy .back-btn {
    border: 4px solid #c9b09c;
}

#privacy .back-btn::after {
    background-color: #c9b09c; 
}

/* お知らせ */
#news-list .contents,
#news .contents {
    width: 85vw;
    margin: 0 auto;
}

.news-list-box {
    display: flex;
    gap: 5%;
    padding: 80px 0;
    justify-content: flex-start;
}

.menu-box {
    width: 100%;
    max-width: 300px;
    height: fit-content;
    background: #F9F7F5;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.menu-box .section-title {
    font-size: 3rem;
    margin-bottom: 20px;
}

.menu-box ul {
    margin: 0 0 35px 40px;
}

.menu-box ul li {
    margin-bottom: 10px;
    position: relative;
}

.cat-item::before {
    content: "●";
    position: absolute;
    left: -10%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem; 
}

.cat-item-2::before {
    color: #c9b09c; 
}

.cat-item-3::before {
    color: #5159c3;
}

.cat-item-4::before {
    color: #c35159; 
}

.cat-item-5::before {
    color: #009991;
}

.archive-item::before {
    content: "●";
    position: absolute;
    left: -10%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem; 
    color: #c9b09c;
}

.cat-item.current a {
    font-weight: bold;
    color: #fff;
    background-color: #c9b09c;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.cat-item:hover {
    transform: scale(1.05);
}

.archive-item.current a {
    font-weight: bold;
    color: #fff;
    background-color: #c9b09c;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.archive-item:hover {
    transform: scale(1.05);
}

.news-box {
    width: 100%;
    max-width: 70%;
    display: flex;
    flex-direction: column;
}

.news-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 3px;
    border-bottom: 1.5px solid #c9b09c;
    transition: all 0.3s ease;
}

.news-item:first-child {
    border-top: 1.5px solid #c9b09c;
}

#news-list .news-item:hover {
    background-color: #F9F7F5;
}

.news-item a {
    display: flex;
    justify-content: space-between;
}

.news-date-category {
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-category {
    padding: 5px 15px;
    color: #fff;
    border-radius: 5px;
    text-transform: capitalize;
    transition: background 0.3s ease;
    font-size: 1.5rem;
}

.common {
    background: #c9b09c;
}

.for-client {
    background: #5159c3;
}

.for-staff {
    background: #009991;
}

.for-registrant {
    background: #c35159;
}

#news .news-title {
    font-size: 2.4rem;
    font-weight: bold;
    margin-top: 10px;
    margin: 0 -15px;
}

.news-title {
    margin-top: 10px;
    font-size: 1.8rem;
}

.news-content {
    padding: 50px;
}

.news-arrow-icon {
    transform: scale(2.5);
    margin-right: 5%;
    transition: transform 0.3s ease;
}

.news-item:hover .news-arrow-icon {
    transform: scale(2.5) translateX(5px);
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 60px;
}

.pagination-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 15px;
}

.pagination .page-number-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination .page-numbers {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: 0 10px;
    border: 3px solid transparent;
    border-radius: 50%;
    font-weight: bold;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.pagination .page-numbers:hover {
    border: 3px solid #c9b09c;
    background-color: #fff;
    color: #c9b09c;
}

.pagination .current {
    background-color: #c9b09c;
    color: #fff;
    border: 3px solid #c9b09c;
    box-shadow: 0 4px 10px rgba(201, 176, 156, 0.4);
}

.pagination .prev-btn,
.pagination .next-btn {
    transform: scale(2.5);
    transition: all 0.3s ease;
}

.pagination .prev-link:hover,
.pagination .next-link:hover {
    color: #c9b09c;
}

.pagination .prev-link:hover a svg path,
.pagination .next-link:hover a svg path {
    stroke: #fff;
    fill: #fff;
}

.pagination .prev-link:hover a svg ellipse,
.pagination .next-link:hover a svg ellipse {
    fill: #c9b09c;
    stroke: #fff;
}

.pagination .prev-link a:hover,
.pagination .next-link a:hover {
    color: #c9b09c;
}

.pagination .prev-btn:hover path,
.pagination .next-btn:hover path {
    stroke: #fff;
    fill: #fff;
}

.pagination .prev-btn:hover ellipse,
.pagination .next-btn:hover ellipse {
    fill: #c9b09c;
    stroke: #fff;
}

.pagination .prev-link,
.pagination .next-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination .prev-link a,
.pagination .next-link a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.pagination .prev-link svg {
    margin-right: 20px;
}

.pagination .next-link svg {
    margin-left: 20px; 
}

.pagination .disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0;
}

#news-list .back-btn,
#news .back-btn {
    border: 4px solid #c9b09c;
}

#news-list .back-btn::after,
#news .back-btn::after {
    background-color: #c9b09c; 
}

@media (max-width: 768px) {
    .news-list-box {
        flex-direction: column-reverse;
        gap: 20px;
        padding: 40px 0;
    }

    .menu-box {
        max-width: 100%;
        margin-bottom: 20px;
        padding: 20px;
    }

    .menu-box .section-title {
        font-size: 2.4rem;
        margin-bottom: 15px;
    }

    .menu-box ul {
        margin: 0 0 20px 20px;
    }

    .menu-box ul li {
        font-size: 1.6rem;
        margin-bottom: 8px;
    }

    .news-box {
        max-width: 100%;
    }

    .news-item {
        padding: 20px;
        gap: 5px;
    }

    .news-date-category-title {
        flex-basis: 80%;
    }

    .news-date-category {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .news-date-category .news-date {
        font-size: 1.4rem;
    }

    .news-date-category .news-category {
        font-size: 1.4rem;
    }

    .news-title {
        font-size: 2rem;
        margin-top: 5px;
    }

    .news-arrow-icon {
        transform: scale(2);
        margin: 0;
    }

    .pagination {
        gap: 20px;
        margin-bottom: 60px;
    }

    .pagination-links {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pagination .page-number-wrapper {
        gap: 10px;
    }

    .pagination .page-numbers {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }

    .pagination .prev-link svg,
    .pagination .next-link svg {
        margin-left: 10px;
        transform: scale(2);
    }
}

/* お仕事をお探しの方へ 求職者向け */
#job-seekers .sub-titlle {
    background: #009991;
}

#job-seekers .contents-titlle {
    background: #EAF4F4;
}

#job-seekers .content h2:before {
    background: #009991;
}

#job-seekers .content-1 ul::after {
    background: #95CBC7;
}

#job-seekers .point {
    background: #EAF4F4;
}

#job-seekers .content-2 ol {
    background: #EAF4F4;
}

#job-seekers .content-2 ol li {
    background: #95CBC7;
}

/* お仕事をお探しの方へ 登録 */
/* お問い合わせ */
#contact .content h2:before {
    background: #c9b09c;
}

#contact .point,
#diagnosis .point {
    background: #F9F7F5;
    margin-top: 0;
    padding: 150px 0 100px 0;
    clip-path: inset(0);
}

#registration .point {
    background: #EAF4F4;
    margin-top: 0;
    padding-top: 150px;
    clip-path: inset(0);
}

#diagnosis .point {
    margin-bottom: 0px;
}

/* コンタクトフォーム (問い合わせ スタッフ登録 キャラクター診断) */
#contact .wpcf7-form,
#registration .wpcf7-form,
#diagnosis .wpcf7-form {
    margin: 0 auto;
    padding: 20px 0 100px;
}

#contact .wpcf7-form,
#registration .wpcf7-form {
    max-width: 800px;
}

#diagnosis .wpcf7-form {
    width: 80%;
}

#contact table.contactTable,
#registration table.contactTable,
#diagnosis table.contactTable {
    border-collapse: collapse;
    margin: 0 auto 80px;
    padding: 20px;
    max-width: 800px;
}

#contact table.contactTable th,
#registration table.contactTable th,
#diagnosis table.contactTable th {
    text-align: left;
    vertical-align: middle;
    width: 30%;
    padding: 10px;
    font-size: 1.8rem;
}

#contact table.contactTable .note,
#registration table.contactTable .note{
    vertical-align: baseline;
}

#contact table.contactTable td,
#registration table.contactTable td,
#diagnosis table.contactTable td {
    width: 70%;
    padding: 10px;
}

#contact table.contactTable input[type="text"],
#contact table.contactTable input[type="email"],
#contact table.contactTable input[type="tel"],
#contact table.contactTable input[type="date"],
#contact table.contactTable textarea,
#contact table.contactTable select,
#registration table.contactTable input[type="text"],
#registration table.contactTable input[type="email"],
#registration table.contactTable input[type="tel"],
#registration table.contactTable input[type="date"],
#registration table.contactTable textarea,
#registration table.contactTable select,
#diagnosis table.contactTable input[type="text"],
#diagnosis table.contactTable input[type="email"],
#diagnosis table.contactTable select {
    width: 100%;
    padding: 10px;
    font-size: 1.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    background: #fff;
}

#diagnosis .wpcf7-list-item-label::before, 
#diagnosis .wpcf7-list-item-label::after {
    display: none;
}


#registration table.contactTable input:focus,
#registration table.contactTable textarea:focus,
#registration table.contactTable select:focus {
    border-color: #009991; 
    outline: none;
}

#contact table.contactTable input:focus,
#contact table.contactTable textarea:focus,
#contact table.contactTable select:focus,
#diagnosis table.contactTable input:focus,
#diagnosis table.contactTable textarea:focus,
#diagnosis table.contactTable select:focus {
    border-color: #c9b09c;
    outline: none;
}

#contact .must, 
#registration .must,
#diagnosis .must {
    color: #bf0000;
    font-weight: bold;
    margin-left: 5px;
}

#contact .submit,
#registration .submit,
#diagnosis .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px auto;
    border-radius: 40px;
    border: 4px solid transparent;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    width: fit-content;
}

#contact .submit,
#diagnosis .submit {
    border: 4px solid #c9b09c;
}

#registration .submit {
    border: 4px solid #009991;
}

#contact .submit::before,
#registration .submit::before,
#diagnosis .submit::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -15px;
    right: 15px;
    bottom: -15px;
    border-radius: 40px;
    border: 4px solid transparent;
    background-color: #eaeaea;
    transition: all 0.3s ease;
    z-index: -1;
}

.submit.hide-before-after::before,
.submit.hide-before-after::after {
    display: none;
}

#diagnosis .edit::before {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: -15px;
        bottom: -15px;
        border-radius: 40px;
        background-color: #eaeaea;
        z-index: -1;
        transition: all 0.3s ease;
}

#diagnosis .edit::after {
    content: "";
    position: absolute;
    height: 4px;
    width: 0;
    background-color: #eaeaea;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}

#contact .submit::after,
#registration .submit::after,
#diagnosis .submit::after {
    content: "";
    position: absolute;
    height: 4px;
    width: 50px;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}

#contact .submit::after,
#diagnosis .submit::after {
    background-color: #c9b09c;
}

#registration .submit::after {
    background-color: #009991;
}

#contact .contact-btn,
#registration .contact-btn,
#diagnosis .contact-btn {
    font-size: 1.5rem;
    color: #063149;
    text-align: center;
    padding: 10px 80px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

#contact .contact-btn:disabled,
#registration .contact-btn:disabled {
    background: #ccc;
    border-radius: 40px;
    cursor: not-allowed;
}

#diagnosis .confirmation-btn:disabled {
    background: #ccc;
    border-radius: 40px;
    cursor: not-allowed;
}

#contact .submit-wrapper::after,
#registration .submit-wrapper::after,
#diagnosis .submit-wrapper::after {
    content: "SEND";
    display: block;
    font-size: 1.5rem;
    text-align: center;
    position: absolute;
    top: 65%;
    left: 40%;
    transform: translateY(-50%);
    
}

#diagnosis .confirmation-wrapper::after {
    content: "CONFIRMATION";
    display: block;
    font-size: 1.5rem;
    text-align: center;
    position: absolute;
    top: 65%;
    left: 30%;
    transform: translateY(-50%);
}

#contact .submit-wrapper.disabled::after,
#registration .submit-wrapper.disabled::after,
#diagnosis .confirmation-wrapper.disabled::after {
    cursor: not-allowed;
}

#diagnosis .edit-wrapper::after {
    content: "EDIT";
    display: block;
    font-size: 1.5rem;
    text-align: center;
    position: absolute;
    top: 65%;
    left: 40%;
    transform: translateY(-50%);
}

#contact .wpcf7-spinner,
#registration .wpcf7-spinner,
#diagnosis .wpcf7-spinner {
    display: none !important;
}

#handling {
    width: 45vw;
    margin: 0 auto;
}

#handling .frame_box {
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
    padding: 30px;
    overflow: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
}

#handling ol {
    list-style-type: decimal;
    padding: 0 20px;
    line-height: 1.5;
    margin: auto;
    padding-bottom: 0px;
    gap: 0px;
    width: 35vw;
}

#handling ol li {
    display: list-item;
}

#handling ol p {
    margin-bottom: 10px;
    font-size: 1.6rem;
}

#handling .form-check-label {
    font-size: 1.6rem;
}

#handling .square::before {
    content: "◆";
}

#handling .headling li {
    line-height: 1.5;
}

#handling .zipcode {
    display: inline-block;
    margin-left: 5rem;
}

#contact .form-group.form-check {
    display: flex;
    align-items: center;
}

.form-group.form-check {
    display: flex;
    align-items: center;
    justify-content: center;
}

#check {
    transform: scale(1.5);
}

.form-group .form-check-label {
    font-size: 1.6rem;
    margin-left: 15px;
}

@media (min-width: 769px) {
    #contact .submit:hover::before,
    #registration .submit:hover::before,
    #diagnosis .submit:hover::before {
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }
    
    #contact .submit:hover::after,
    #registration .submit:hover::after,
    #diagnosis .submit.submit:hover::after {
        animation: border_anim 0.5s linear forwards;
    }

    #diagnosis .submit.edit:hover::after {
        animation: border_anim 0.5s linear forwards;
    }
}


@media (max-width: 768px) {
    #contact .wpcf7-form,
    #registration .wpcf7-form,
    #diagnosis .wpcf7-form {
        width: 90%;
        margin: 0 auto;
        padding: 0 0 30px 0;
    }

    #contact table.contactTable,
    #registration table.contactTable,
    #diagnosis table.contactTable {
        margin: 0 auto 30px;
    }

    #contact table.contactTable th,
    #registration table.contactTable th,
    #diagnosis table.contactTable th {
        padding: 5px;
        font-size: 1.4rem;
    }

    #contact table.contactTable input[type="text"],
    #contact table.contactTable input[type="email"],
    #contact table.contactTable input[type="tel"],
    #contact table.contactTable input[type="date"],
    #contact table.contactTable textarea,
    #contact table.contactTable select,
    #registration table.contactTable input[type="text"],
    #registration table.contactTable input[type="email"],
    #registration table.contactTable input[type="tel"],
    #registration table.contactTable input[type="date"],
    #registration table.contactTable textarea,
    #registration table.contactTable select,
    #diagnosis table.contactTable input[type="text"],
    #diagnosis table.contactTable select {
        font-size: 1.4rem;
    }

    #contact .must, 
    #registration .must, 
    #diagnosis .must {
        font-size: 1.4rem;
    }

    #handling h1 {
        font-size: 2rem;
    }

    #handling ol li {
        font-size: 1.8rem;
    }

    #handling ol p {
        font-size: 1.4rem;
    }

    #handling ul li {
        font-size: 1.4rem;
    }

    .form-group .form-check-label {
        font-size: 1.4rem;
    }

    #contact .submit.clicked::before,
    #registration .submit.clicked::before,
    #diagnosis .submit.clicked::before {
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }
    
    #contact .submit::after,
    #registration .submit::after,
    #diagnosis .submit.submit::after {
        content: "";
        position: absolute;
        height: 4px;
        width: 30px;
        background-color: #c9b09c;
        top: 50%;
        right: -30px;
        transform: translateY(-50%);
    }

    #diagnosis .edit::after {
        content: "";
        position: absolute;
        height: 4px;
        width: 0;
        background-color: #eaeaea;
        top: 50%;
        left: -30px;
        transform: translateY(-50%);
    }

    #registration .submit::after {
        background-color: #009991;
    }

    #diagnosis .btn-wrapper {
        flex-direction: column;
    }
}

/* お仕事をお探しの方へ 求人 */
#recruit  .point {
    height: fit-content;
}

#recruit .recruit-cnt {
    display: flex;
    justify-content: center;
    gap: 50px;
    padding-bottom: 80px;
}

#recruit .recruit-cnt img {
    border-radius: 10px;
}

#recruit .icon-size {
    width: calc((85vw - 50em )/4);
}

#recruit .toggle {
    display: none;
}

#recruit .Label {
    display: block;
    margin-bottom: 10px;
}

#recruit .Label, #recruit .icon-size .content {
    transform: translateZ(0);
    text-align: center;
    transition: all .3s;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

#recruit .icon-size .content {
    height: 0;
    overflow: hidden;
}

#recruit .icon-size .content a {
    margin-bottom: 5px;
}

#recruit .recruit-cnt a:hover {
    opacity: .5;
}

#recruit .toggle:checked + .Label + .content {
    height: auto;
    transition: all .3s;
}

#recruit .toggle:checked + .Label::before {
    transform: rotate(-45deg) !important;
}


@media (max-width: 768px) {
    #recruit .point {
        height: auto; 
    }

    #recruit .recruit-cnt {
        display: block;
        justify-content: flex-start;
        gap: 20px;
    }

    #recruit .recruit-cnt img {
        width: 100%;
        border-radius: 8px;
    }

    #recruit .icon-size {
        width: 100%;
        padding: 0 10px; 
    }

    #recruit .toggle {
        display: none;
    }

    #recruit .Label {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    #recruit .Label img {
        max-width: 80%;
    }

    #recruit .icon-size .content {
        height: auto;
        padding: 0 35px;
        display: block;
    }

    #recruit .icon-size .content a {
        display: block;
    }

    .sub-title h1, .sub-title p, .contents-title h2, .contents-title p {
        font-size: 20px;
        line-height: 1.4;
        text-align: center;
        padding: 10px;
    }

    .sub-title h1 {
        font-size: 22px;
    }

    .recruit-link {
        width: 100%;
        display: block;
        margin: 10px 0;
    }
}


/* 企業の皆様へ 企業向け */
#client .sub-titlle {
    background: #5159c3;
}

#client .contents-titlle {
    background: #EDEEF9;
}

#client .content h2:before {
    background: #5159c3;
}

#client .content-1 ul::after {
    background: #A7ABE1;
}

#client .point {
    background: #EDEEF9;
    margin-bottom: 0;
}

#client .content-2 ol {
    background: #EDEEF9;
}

#client .content-2 ol li {
    background: #A7ABE1;
}

#client .text-img-wrap-2 {
    clip-path: none;
    padding: 120px 0 30px 0;
}

#client .content.content-2 {
    margin-top: 20vh;
}

#client .back-btn {
    border: 4px solid #5159c3;
}

#client .back-btn::after {
    background-color: #5159c3; 
}

@media (max-width: 768px) {
    #client .point {
        margin-bottom: 0;
    }
}

/* 登録者の方へ 登録者向け */
#registered .sub-titlle {
    background: #c35159;
}

#registered .contents-titlle {
    background: #F9EDEE;
}

#registered .content h2:before {
    background: #c35159;
}


#registered .point {
    background: #F9EDEE;
    margin-bottom: 0;
}

#registered .content-2 ol {
    background: #F9EDEE;
}


#registered .content.content-2 {
    margin-top: 20vh;
}

#registered .back-btn {
    border: 4px solid #c35159;
}

#registered .back-btn::after {
    background-color: #c35159; 
}

#registered .text {
    text-align: center;
    padding-bottom: 60px;
}

#registered .sub-main .container-2 {
    top: 45px;
}

@media (max-width: 768px) {
    #registered .point {
        margin-bottom: 0;
    }
}

/* キャラクター診断 */
#diagnosis {
    margin-top: 0;
}

#diagnosis .content h2:before {
    background: #c9b09c;
}

#diagnosis .choice-text h1 {
    margin-bottom: 10px;
}

#diagnosis .choice-text p:last-of-type {
    margin-bottom: 30px;
}

#diagnosis table.choiceTable {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
}

#diagnosis table.choiceTable th {
    padding: 10px;
    font-size: 1.8rem;
    border: 1px solid #222;
    vertical-align: middle;
    text-align: left;
}

#diagnosis table.choiceTable td {
    padding: 10px;
    border: 1px dotted #ddd;
    background-color: #fff;
    vertical-align: middle;
}

#diagnosis .choiceTable-1 thead tr td {
    font-weight: bold;
    background-color: #f4f4f4;
    text-align: center !important;
}

#diagnosis .choiceTable tr td:first-child {
    text-align: center !important;
    width: 5%;
}

#diagnosis .choiceTable tr td:last-child {
    width: 20%;
}

#diagnosis .choiceTable tr td:nth-child(2),
#diagnosis .choiceTable-1 tr td:nth-child(3) {
    text-align: left;
    padding-left: 10px;
}

#diagnosis .choiceTable tr:nth-child(5n) td {
    border-bottom: 2px solid #063149;
}

#diagnosis .radio-input input[type="radio"] {
    display: none;
    pointer-events: none;
}

#diagnosis .radio-input .wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px;
    border: 1.5px solid transparent;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

#diagnosis .radio-input input[type="radio"]:checked + .wpcf7-list-item-label {
    border-color: #063149;
}

@media (max-width: 768px) {
    #diagnosis .choiceTable thead {
        display: none;
    }

    #diagnosis .choiceTable tr {
        padding-bottom: 15px;
        display: block;
    }

    #diagnosis .choiceTable td {
        display: block;
        width: 100% !important;
        text-align: left;
        position: relative;
        font-size: 1.4rem;
        padding-left: 10% !important;
    }

    #diagnosis .choiceTable-2 td {
        padding-left: 5% !important;
    }


    #diagnosis .choiceTable tr td:last-child {
        text-align: center !important;
        padding-left: 0 !important;
    }
    
    #diagnosis .choiceTable tr:nth-child(5n) td {
        border: 1px dotted #ddd;
    }

    #diagnosis .choiceTable td::after {
        content: attr(data-label);
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        font-weight: bold;
        font-size: 1.4rem;
        color: #063149;
    }

    #diagnosis .choiceTable td[data-label="A"]::after,
    #diagnosis .choiceTable td[data-label="B"]::after {
        content: "" attr(data-label); 
        color: #063149;
    }

    #diagnosis .radio-input .wpcf7-list-item-label {
        font-size: 1.4rem;
    }
}
















#diagnosis-result {
    font-size: 16px;
    color: #333;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}




.choiceScroll {
    margin-bottom: 60px;
}

#diagnosis .btn-wrapper {
    display: flex;
}

.diagnosis-result {
    margin: 0 auto;
    width: 80vw;
    padding-bottom: 60px;
}

.diagnosis-result .results {
    text-align: center;
    margin-bottom:30px;
    font-size: 3rem;
}

.diagnosis-result .category {
    margin-bottom:10px;
}

.diagnosis-result p {
    margin-bottom: 5px;
    margin-left: 20px;
}

.diagnosis-result .recommend {
    margin-bottom: 30px;
}

.none {
    display: none;
}



@media (max-width: 768px) {
    .choiceScroll {
        height: 70vh;
        overflow: auto;
        margin-bottom: 60px;
    }
}









/* トップに戻る */
.pagetop {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 50px;
    bottom: 50px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 999;
    pointer-events: none;
}

.page-top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    position: relative;
    transform: rotate(180deg);
}

.page-top:hover .arrow {
    top: 50%;
}

.page-top:hover .arrow:before {
    transform: translate(-50%, -50%) rotate(-45deg); /* ホバー時に鋭角に */
}

.page-top:hover .arrow:after {
    transform: translate(-50%, -50%) rotate(45deg); /* ホバー時に鋭角に */
}

.arrow {
    position: absolute;
    left: 50%;
    transition: all 0.3s ease-in;
    width: 10px; /* 矢印の太さ */
    height: 20px; /* 矢印の長さ */
}

.arrow:before,
.arrow:after {
    position: absolute;
    content: '';
    display: block;
    width: 4px; /* 矢印の高さ */
    height: 25px; /* 矢印の横幅 */
    background: #009991;
    border-radius: 10px; /* 矢印の形状 */
    transform: translate(-50%, -50%) rotate(-60deg);
    transform-origin: bottom right;
    transition: all 0.3s ease-in;
}

.arrow:after {
    transform: translate(-50%, -50%) rotate(60deg);
    transform-origin: bottom left;
}

.arrow:nth-child(1) {
    top: 20%;
    opacity: 0.3;
}

.arrow:nth-child(2) {
    top: 40%;
    opacity: 0.6;
}

.arrow:nth-child(3) {
    top: 60%;
    opacity: 1;
}

@media (max-width: 768px) {
    .pagetop {
        right: 15px;
        bottom: 15px;
    }
}