@charset "UTF-8";

/* ================================================
===================================================
===================================================
Base
===================================================
===================================================
================================================ */
body{-webkit-text-size-adjust: 100%;color: #292929;font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;padding: 0;height: auto;font-size: 16px;}
img {width: 100%;}
body * {
  box-sizing : border-box;
}
/*++++++++++++++++++++++++++
	Link : Img
++++++++++++++++++++++++++*/
/*  PC  */
@media screen and (min-width: 641px){a:hover img {filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}a:hover{filter: alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}
/* hover */.hover,a.hover{text-decoration:none ;-webkit-transition: background-color 0.4s linear;-moz-transition: background-color 0.4s linear;-o-transition: background-color 0.4s linear;transition: background-color 0.4s linear;filter: alpha(opacity=100);-moz-opacity:1;opacity:1;}}
dl,dt,dd,ul,ol,li{margin: 0px;padding: 0px;list-style:none;}
/*++++++++++++++++++++++++++
	汎用クラス
++++++++++++++++++++++++++*/
td {text-align: left;}
th {font-weight: normal;text-align: center;}
section {clear: both;margin: 0;padding: 0;}
/* ================================================
===================================================
===================================================
Base end
===================================================
===================================================
================================================ */

/* ================================================
===================================================
===================================================
reset
===================================================
===================================================
================================================ */
/*
	html5doctor.com Reset Stylesheet
	v1.6.1
	Last Updated: 2010-09-17
	Author: Richard Clark - http://richclarkdesign.com
	Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tfoot, thead,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;margin: 0;font-style: normal;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {display:block;}
nav ul {list-style:none;padding:0 ;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
.clear_both {clear: both;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
h1, h2, h3, h4, h5, h6 {font-size:100%;font-weight:normal;}
address{font-style:normal ;}
/* ================================================
===================================================
===================================================
reset end
===================================================
===================================================
================================================ */

/*++++++++++++++++++++++++++
	ボタン
++++++++++++++++++++++++++*/

a{text-decoration:none; color:#2C3E50;}
a:link{text-decoration:none; color:#2C3E50;}
a:visited{text-decoration:none; color:#2C3E50;}
a:hover{text-decoration:none; color:#2C3E50;}
a:active {text-decoration:none; color:#2C3E50;}

/*++++++++++++++++++++++++++
共通
++++++++++++++++++++++++++*/
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}
.wrapper {
    font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
    max-width: 1200px;
    width: 90%;
    margin: auto;
}
.wrapper-min {
    font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
    max-width: 1000px;
    width: 90%;
    margin: auto;
}
body{
    background-color: #fff;
    color: #2C3E50;
    font-size: clamp(15px, 1.7vw, 16px);
    font-weight:normal;
    line-height: 1.7em;
    position: relative;
    overflow-x: hidden;
}
img{
    vertical-align: bottom;
    width: 100%;
    height: 100%;
}
body a:hover{
    opacity: 1;
}
body a:hover img{
    opacity: 1;
}
.sp{
    display: none;
}
.pc{
    display:block;
}
/* 矢印が右に抜けて左から戻るキーフレーム定義 */
@keyframes arrowAnimation {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    40% {
        transform: translateX(8px);
        opacity: 0;
    }
    41% {
        transform: translateX(-8px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.common-btn{
    .btn-more {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 220px;
        height: 54px;
        background: #04A1EF;
        border-radius: 4px;
        text-decoration: none;
        box-sizing: border-box;
        transition: background-color 0.3s ease;
        &:hover {
            background-color: #038ecd;
            & .arrow-icon {
                animation: arrowAnimation 0.4s ease-in-out forwards;
            }
        }
        & .btn-text {
            flex-grow: 1;
            color: #fff;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 0.05em;
            padding-left: 14px;
        }
        & .btn-arrow {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 100%;
            overflow: hidden;
            &::before {
                content: "";
                position: absolute;
                left: 0;
                top: 12px;
                bottom: 12px;
                width: 1px;
                background-color: #fff;
            }
        }
        & .arrow-icon {
            position: relative;
            display: inline-block;
            width: 12px;
            height: 2px;
            background-color: #fff;
            transition: transform 0.3s ease;
            &::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 0;
                width: 6px;
                height: 6px;
                border-top: 2px solid #fff;
                border-right: 2px solid #fff;
                transform: translateY(-50%) rotate(45deg);
            }
        }
    }
}
@media only screen and (max-width: 780px) {
    .sp{
        display: block;
    }
    .pc{
        display: none;
    }
    .common-btn{
        .btn-more {
            margin: auto;
        }
    }
}


/*++++++++++++++++++++++++++
ヘッダー
++++++++++++++++++++++++++*/
.menu-conts {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    margin: auto;
    padding: 24px 0;
    transition: background-color .3s;
    &::before{
        content: '';
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 0;
        background-color: #fff;
        transition: all .3s;
    }
    &:hover::before{
        height: 85px;
    }
    & .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 1600px;
        width: 92%;
        margin: auto;
    }
    & .logo {
        width: 320px;
    }
    & .gnav > *{
        display: inline-block;
    }
    & .gnav ul {
        display: flex;
        align-items: center;
        gap: 40px;
        margin-right: 40px;
    }
    & .gnav ul li{
        position: relative;

    }
    & .gnav ul li::before{
        content: '';
        position: absolute;
        bottom: -6px;
        left: 0;
        right: 0;
        margin: auto;
        width: 0px;
        height: 0px;
        transition: all .3s;
    }
    & .gnav ul li:hover::before{
        bottom: -8px;
        width: 5px;
        height: 5px;
        background-color: #04A1EF;
        border-radius: 100px;
    }
    & .gnav ul li.current::before{
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        right: 0;
        margin: auto;
        width: 5px;
        height: 5px;
        background-color: #04A1EF;
        border-radius: 100px;
    }
    & .gnav a {
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
        transition: color .3s;
    }
    & .gnav ul li:hover a{
        color: #04A1EF;
    }
    & .gnav ul li.current:hover a{
        color: #2C3E50;
    }
    & .header-btn a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 38px;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
        border-radius: 100px;
        background: #04A1EF;
        border: solid 1px #04A1EF;
        transition: background-color .3s;
    }
    & .header-btn a:hover{
        color: #04A1EF;
        background: #fff;
    }
}
@media only screen and (max-width: 1200px) {
    .menu-conts{
        & .gnav ul {
            gap: 25px;
        }
        & .gnav a {
            font-size: 15px;
        }
        & .header-btn a {
            width: 140px;
            font-size: 15px;
        }
    }
}
@media only screen and (max-width: 1050px) {
    .menu-conts{
        &::before{
            content: none;
        }
        & .gnav{
            display: none;
        }
    }
}
@media only screen and (max-width: 780px) {
    .menu-conts{
        & .logo {
            width: 250px;
        }
    }
}
/* ==========================================
   スクロール連動フェードイン（共通設定）
========================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.fade-in-up.is-active {
    opacity: 1;
    transform: translateY(0);
}
/*++++++++++++++++++++++++++
メインビジュアル
++++++++++++++++++++++++++*/
#mainvisual {
    font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
    position: relative;
    overflow: hidden;
    background: #F0F1F3;
    background-image: url(../images/home/mv_back.png);
    background-position: center 150px;
    background-repeat: no-repeat;
    background-size: 1600px;
    & .mv-inner {
        position: relative;
        z-index: 2;
        height: 850px;
    }
    & .mv-copy {
        position: absolute;
        top: 360px;
        left: 50%;
        z-index: 7;
        width: 100%;
        text-align: center;
        transform: translateX(-50%);
    }
    & .mv-copy h2 {
        font-size: clamp(42px, 5.5vw, 52px);
        font-weight: 700;
        line-height: 1.5em;
        letter-spacing: 0.08em;
    }
    & .mv-copy p {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5em;
    }
    & .mv-illust {
        position: absolute;
        z-index: 5;
        width: auto;
        animation: float-y 5s ease-in-out infinite alternate;
    }
    & .illust01 {
        top: 155px;
        left: calc(50% - 810px);
        width: 270px;
        animation-duration: 6.2s;
        animation-delay: 0s;
    }
    & .illust02 {
        top: 40px;
        left: calc(50% - 450px);
        width: 210px;
        animation-duration: 5.4s;
        animation-delay: -1.5s;
    }
    & .illust03 {
        top: 110px;
        left: calc(50% - 200px);
        width: 220px;
        animation-duration: 5.8s;
        animation-delay: -3.2s;
    }
    & .illust04 {
        top: 70px;
        right: calc(50% - 480px);
        width: 340px;
        animation-duration: 6.5s;
        animation-delay: -0.8s;
    }
    & .illust05 {
        top: 220px;
        right: calc(50% - 700px);
        width: 150px;
        animation-duration: 4.8s;
        animation-delay: -2.5s;
    }
    & .illust06 {
        top: 380px;
        left: calc(50% - 670px);
        width: 130px;
        animation-duration: 5.0s;
        animation-delay: -4.1s;
    }
    & .illust07 {
        top: 510px;
        left: calc(50% - 470px);
        width: 200px;
        animation-duration: 5.6s;
        animation-delay: -1.9s;
    }
    & .illust08 {
        top: 570px;
        right: calc(50% - 120px);
        width: 210px;
        animation-duration: 6.0s;
        animation-delay: -3.7s;
    }
    & .illust09 {
        top: 520px;
        right: calc(50% - 420px);
        width: 145px;
        animation-duration: 5.2s;
        animation-delay: -0.5s;
    }
    & .illust10 {
        top: 440px;
        right: calc(50% - 680px);
        width: 125px;
        animation-duration: 5.5s;
        animation-delay: -2.8s;
    }
    & .message-box {
        padding: 0 0 clamp(40px, 12vw, 80px);
    }
    & .message-box {
        text-align: center;
        width: 90%;
        margin: auto;
    }
    & .message-box h2 {
        margin-bottom: clamp(25px, 6vw, 40px);
        font-size: clamp(28px, 4vw, 36px);
        font-weight: 700;
        line-height: 1.7em;
        letter-spacing: .08em;
    }
    & .message-box p {
        font-size: 18px;
        font-weight: 500;
        line-height: 2.2em;
        letter-spacing: .02em;
    }
    & .mv-flow {
        width: 100%;
        overflow: hidden;
        padding-bottom: 20px;
    }
    & .mv-flow figure {
        display: flex;
        width: max-content;
        margin-bottom: 10px;
    }
    & .mv-flow figure .txtimg {
        width: 4300px;
        max-width: none;
        margin-right: 30px;
    }
    & .mv-flow figure:first-child {
        animation: flow-left-right 74s linear infinite;
    }
    & .mv-flow figure:last-child {
        animation: flow-right-left 74s linear infinite;
    }
}
@keyframes float-y {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-12px);
    }
}
@keyframes flow-left-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes flow-right-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media only screen and (max-width: 780px) {
    #mainvisual {
        background-image: url(../images/home/mv_back-sp.png);
        background-position: center 10%;
        background-size: 720px;
        & .mv-inner {
            height: 950px;
        }
        & .mv-copy {
            top: 340px;
        }
        & .mv-copy h2 {
            margin-left: 4%;
        }
        & .illust01 {
            top: 250px;
            left: calc(50% - 270px);
            width: 150px;
        }
        & .illust02 {
            top: 40px;
            left: calc(50% - 160px);
            width: 110px;
        }
        & .illust03 {
            top: 190px;
            left: calc(50% - 50px);
            width: 100px;
        }
        & .illust04 {
            top: 60px;
            right: calc(50% - 210px);
            width: 140px;
        }
        & .illust05 {
            top: 240px;
            right: calc(50% - 240px);
            width: 75px;
        }
        & .illust06 {
            top: 600px;
            left: calc(50% - 220px);
            width: 80px;
        }
        & .illust07 {
            top: 740px;
            left: calc(50% - 150px);
            width: 130px;
        }
        & .illust08 {
            top: 600px;
            right: calc(50% - 90px);
            width: 120px;
        }
        & .illust09 {
            top: 780px;
            right: calc(50% - 230px);
            width: 90px;
        }
        & .illust10 {
            top: 610px;
            right: calc(50% - 220px);
            width: 70px;
        }
        & .message-box p {
            text-align: left;
        }
        & .mv-flow figure .txtimg {
            width: 1500px;
            max-width: none;
            margin-right: 15px;
        }
    }
}
/*++++++++++++++++++++++++++
service
++++++++++++++++++++++++++*/
#service{
    padding: clamp(80px, 12vw, 120px) 0;
    & .service-head {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 100px;
    }
    & .title {
        width: 36%;
    }
    & .title h2 {
        font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        color: #04A1EF;
        font-size: clamp(42px, 6.4vw, 64px);
        font-weight: 600;
        line-height: 1;
    }
    & .title p {
        position: relative;
        margin-top: 16px;
        padding-left: 18px;
        font-size: 15px;
        font-weight: 500;
        display: inline-block;
    }
    & .title p::before,
    & .catch::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        background: #04A1EF;
        clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
        transform: translateY(-50%);
    }
    & .lead {
        width: 58%;
        font-size: clamp(16px, 2vw, 20px);
        font-weight: 500;
        line-height: 2.2;
    }
    & .service-block {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    & .service-block + .service-block {
        margin-top: 105px;
    }
    & .txt-box {
        width: 60%;
    }
    & .en {
        margin-bottom: 8px;
        color: #04A1EF;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
    }
    & .link-btn a{
        display: inline-block;
    }
    & .link-btn h3 {
        display: flex;
        align-items: center;
        gap: 20px;
        font-size: clamp(28px, 3.6vw, 36px);
        font-weight: 600;
        line-height: 1.5em;
    }
    & .link-btn .circle-arrow {
        position: relative;
        display: block;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border-radius: 50%;
        background: #04A1EF;
        transition: background-color .3s ease;
        overflow: hidden;
    }
    & .link-btn a:hover .circle-arrow{
        background-color: #038ecd;
        &::before {
            animation: circleArrowHead 0.4s ease-in-out forwards;
        }
        &::after {
            animation: circleArrowLine 0.4s ease-in-out forwards;
        }
    }
    & .link-btn .circle-arrow::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 7px;
        height: 7px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: translate(-40%, -50%) rotate(45deg);
    }
    & .link-btn .circle-arrow::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 47%;
        width: 14px;
        height: 2px;
        background: #fff;
        transform: translate(-50%, -50%);
    }
    & .catch {
        position: relative;
        margin-top: 14px;
        padding-left: 18px;
        font-size: clamp(16px, 1.8vw, 18px);
        font-weight: 500;
    }
    & .txt {
        margin-top: 28px;
        font-size: 16px;
        line-height: 2em;
    }
    & .img-box {
        width: 28%;
        margin-top: 10px;
    }
    & .img-box figure{
        width: 100%;
        height: 100%;
    }
    & .service-card-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 70px;
    }
    & .service-card-list li {
        width: 25%;
        padding: 25px;
        text-align: center;
        background: #EAF8FD;
        border-right: .5px dotted #9399a5;
    }
    & .service-card-list li:first-child{
        border-radius: 10px 0 0 10px;
    }
    & .service-card-list li:last-child{
        border-right: none;
        border-radius: 0 10px 10px 0;
    }
    & .card-en {
        font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        color: #2C3E50;
        font-size: 13px;
        font-style: italic;
        font-weight: 600;
        line-height: 1.2em;
    }
    & .num {
        margin-top: 4px;
        font-size: clamp(24px, 3.4vw, 34px);
        font-style: italic;
        font-weight: 600;
        line-height: 1.2em;
    }
    & .service-card-list figure {
        width: 120px;
        margin: 10px auto;
    }
    & .service-card-list h4 {
        font-size: clamp(18px, 2vw, 20px);
        font-weight: 700;
        line-height: 1.5;
    }
    & .service-card-list li .txt {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.5em;
        text-align: left;
    }
}
@keyframes circleArrowHead {
    0% {
        transform: translate(-40%, -50%) rotate(45deg);
        opacity: 1;
    }
    40% {
        transform: translate(130%, -50%) rotate(45deg);
        opacity: 0;
    }
    41% {
        transform: translate(-250%, -50%) rotate(45deg);
        opacity: 0;
    }
    100% {
        transform: translate(-40%, -50%) rotate(45deg);
        opacity: 1;
    }
}
@keyframes circleArrowLine {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    40% {
        transform: translate(120%, -50%);
        opacity: 0;
    }
    41% {
        transform: translate(-250%, -50%);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}
@media only screen and (max-width: 780px) {
    #service{
        & .title {
            width: 100%;
            text-align: center;
            margin-bottom: 40px;
        }
        & .lead {
            width: 100%;
        }
        & .txt-box {
            width: 100%;
            text-align: center;
        }
        & .en {
            text-align: center;
        }
        & .txt {
            text-align: left;
        }
        & .catch {
            display: inline-block;
        }
        & .img-box {
            width: 70%;
            margin-left: auto;
            margin-right: auto;
        }
        & .service-card-list li {
            width: 100%;
            border-right: none;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        & .service-card-list li:first-child{
            border-radius: 10px;
        }
        & .service-card-list li:last-child{
            border-radius: 10px;
        }
        & .service-card-list li .inner{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        & .service-card-list li .inner .spblk-left{
            width: 47%;
        }
        & .service-card-list li .inner .spblk-right{
            width: 50%;
        }
        & .service-card-list figure {
            width: 70%;
            margin: 10px auto 0;
        }
        & .service-card-list li .inbl{
            display: inline-block;
        }
        & .service-card-list h4 {
            text-align: left;
        }
    }
}
/*++++++++++++++++++++++++++
company
++++++++++++++++++++++++++*/
#company{
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 12vw, 120px) 0 0;
    background: #F0F1F3;
    & .company-conts{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: end;
    }
    & .company-conts .left{
        width: calc(100% - 720px);
        padding-bottom: clamp(80px, 12vw, 120px);
    }
    & .company-conts .right{
        width: 550px;
        position: relative;
    }
    & .company-conts .title h2{
        font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        color: #04A1EF;
        font-size: clamp(42px, 6.4vw, 64px);
        font-weight: 600;
        line-height: 1;
    }
    & .company-conts .title p{
        position: relative;
        margin-top: 16px;
        padding-left: 18px;
        font-size: 15px;
        font-weight: 500;
        display: inline-block;
    }
    & .company-conts .title p::before{
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        background: #04A1EF;
        clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
        transform: translateY(-50%);
    }
    & .company-conts .lead{
        margin-top: clamp(35px, 5vw, 50px);
        font-size: 18px;
        line-height: 2em;
    }
    & .company-link-list{
        margin-top: clamp(40px, 8vw, 80px);
        max-width: 430px;
    }
    & .company-link-list li{
        border-bottom: 2px dotted #aab0bb;
    }
    & .company-link-list a{
        position: relative;
        display: block;
        padding: 22px 50px 22px 0;
        overflow: hidden;
    }
    & .company-link-list .en{
        display: block;
        margin-bottom: 6px;
        color: #04A1EF;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }
    & .company-link-list .jp{
        display: block;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.4em;
        transition:  color .3s ease;
    }
    & .company-link-list a:hover .jp{
        color: #04A1EF;
    }
    & .company-link-list .arrow{
        position: absolute;
        top: 50%;
        right: 5px;
        width: 18px;
        height: 2px;
        background: #04A1EF;
        transform: translateY(-50%);
    }
    & .company-link-list .arrow::before{
        content: "";
        position: absolute;
        top: 50%;
        right: 1px;
        width: 8px;
        height: 8px;
        border-top: 2px solid #04A1EF;
        border-right: 2px solid #04A1EF;
        transform: translateY(-50%) rotate(45deg);
    }
    & .company-link-list li a:hover {
        .arrow {
            animation: listArrowAnimation 0.4s ease-in-out forwards;
        }
    }
    & .hand{
        width: 920px;
    }
    & .hand img{
        width: 100%;
        max-width: none;
    }
    /* --- Swiper --- */
    & .company-swiper{
        position: absolute;
        bottom: 220px;
        right: 240px;
        z-index: 2;
        width: 440px;
        height: 440px;
        padding: 18px;
        border-radius: 50%;
        background: none;
        overflow: hidden;
        isolation: isolate;
        box-sizing: border-box;
    }
    & .company-swiper::before{
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: 50%;
        background: linear-gradient(135deg, #0988CB 0%, #3E69AA 100%);
    }
    & .company-swiper .swiper-wrapper{
        width: 100%;
        height: 100%;
    }
    & .company-swiper .swiper-slide{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        clip-path: circle(0% at 50% 50%);
        transition: clip-path 500ms cubic-bezier(0.66, 0, 0.01, 1);
    }
    & .company-swiper .swiper-slide-active{
        clip-path: circle(100% at 50% 50%);
    }
    & .company-swiper figure{
        width: 100%;
        height: 100%;
        margin: 0;
        transform: scale(1.15) rotate(-15deg);
        transition: transform 400ms cubic-bezier(0.66, 0, 0.01, 1);
    }
    & .company-swiper .swiper-slide-active figure{
        transform: scale(1) rotate(0deg);
    }
    & .company-swiper img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    & .company-pagination{
        position: absolute;
        left: 50%;
        bottom: 45px;
        z-index: 5;
        display: flex;
        justify-content: center;
        gap: 8px;
        transform: translateX(-50%);
    }
    & .company-pagination .swiper-pagination-bullet{
        width: 8px;
        height: 8px;
        margin: 0;
        background: #fff;
        opacity: 1;
    }
    & .company-pagination .swiper-pagination-bullet-active{
        background: #04A1EF;
    }
}
@keyframes listArrowAnimation {
    0% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
    40% {
        transform: translateY(-50%) translateX(15px);
        opacity: 0;
    }
    41% {
        transform: translateY(-50%) translateX(-15px);
        opacity: 0;
    }
    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}
@media only screen and (max-width: 1200px) {
    #company{
        & .company-conts .left{
            width: calc(100% - 550px);
        }
        & .company-conts .right{
            width: 400px;
        }
        & .company-swiper{
            right: 80px;
        }
    }
}
@media only screen and (max-width: 780px) {
    #company{
        & .company-conts .title{
            text-align: center;
        }
        & .company-conts .left{
            width: 100%;
        }
        & .company-conts .right{
            width: 100%;
        }
        & .company-link-list{
            max-width: 800px;
        }
        & .hand{
            margin-left: 30%;
        }
        & .company-swiper{
            right: 0;
            left: 0;
            margin: auto;
        }
    }
}
@media only screen and (max-width: 500px) {
    #company{
        & .hand{
            width: 700px;
            margin-left: 30%;
        }
        & .company-swiper{
            bottom: 160px;
            width: 350px;
            height: 350px;
            padding: 12px;
        }
    }
}
/*++++++++++++++++++++++++++
service
++++++++++++++++++++++++++*/
#other{
    padding: clamp(80px, 12vw, 120px) 0 0;
    background-image: url(../images/home/back_check.png);
    background-position: left top;
    background-repeat: repeat;
    background-size: 140px;
    & .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    & .flx-box:first-child{
        margin-bottom: clamp(60px, 18vw, 165px);
    }
    & .flx-box .imgblk{
        width: 58%;
    }
    & .flx-box .txtblk{
        width: 35%;
    }
    & .flx-box .imgblk img{
        border-radius: 1.2em;
    }
    & .flx-box .txtblk h5{
        font-size: clamp(28px, 3.2vw, 32px);
        line-height: 1.6em;
        font-weight: 500;
        margin-bottom: clamp(15px, 3.5vw, 35px);
    }
    & .flx-box .txtblk p{
        font-size: 16px;
        line-height: 1.8em;
        margin-bottom: clamp(15px, 3.5vw, 35px);
    }
}

@media only screen and (max-width: 780px) {
    #other{
        & .flx-box:nth-child(even){
            flex-direction: column-reverse;
        }
        & .flx-box .imgblk{
            width: 100%;
            margin-bottom: 18px;
        }
        & .flx-box .txtblk{
            width: 100%;
        }
        & .flx-box .txtblk h5{
            text-align: center;
        }
    }
}
/* スライダー全体のコンテナ */
.loop-slider {
    width: 100%;
    margin-top: clamp(80px, 18vw, 180px);
    overflow: hidden;
}
.loop-slider-track {
    display: flex;
    width: max-content;
    animation: infinite-scroll 70s linear infinite;
}
.slide-list {
    display: flex;
    gap: 4px;
    padding: 0;
    padding-right: 4px;
    margin: 0;
    list-style: none;
}
.slide-item {
    width: 380px;
    flex-shrink: 0;
}
.slide-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: .5em;
}
@keyframes infinite-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
@media (max-width: 780px) {
    .slide-item {
        width: 200px;
    }
}
/*++++++++++++++++++++++++++
news
++++++++++++++++++++++++++*/
#news{
    padding: clamp(80px, 12vw, 120px) 0 80px;
    background-image: url(../images/home/back_check.png);
    background-position: left top;
    background-repeat: repeat;
    background-size: 140px;
    & .new-conts{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-color: #fff;
        padding: clamp(50px, 10vw, 100px) 5%;
        position: relative;
    }
    & .new-conts .illust{
        /* position: absolute;
        bottom: -2%;
        left: 5%; */
        margin-top: 30px;
        width: 95%;
        max-width: 240px;
    }
    & .new-conts .left{
        width: 300px;
    }
    & .new-conts .right{
        width: calc(100% - 350px);
    }
    & .new-conts .title h2{
        font-family:
            "Plus Jakarta Sans",
            "Noto Sans JP",
            "Hiragino Kaku Gothic ProN",
            "ヒラギノ角ゴ ProN",
            "Yu Gothic",
            "游ゴシック",
            "Meiryo",
            sans-serif;
        color: #04A1EF;
        font-size: clamp(42px, 6.4vw, 64px);
        font-weight: 600;
        line-height: 1;
    }
    & .new-conts .title p{
        position: relative;
        margin-top: 16px;
        padding-left: 18px;
        font-size: 15px;
        font-weight: 500;
        display: inline-block;
    }
    & .new-conts .title p::before{
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        background: #04A1EF;
        clip-path: polygon(
            50% 0,
            62% 38%,
            100% 50%,
            62% 62%,
            50% 100%,
            38% 62%,
            0 50%,
            38% 38%
        );
        transform: translateY(-50%);
    }
    & .category-list {
        list-style: none;
        padding: 0;
        margin: clamp(40px, 8vw, 80px) 0 clamp(10px, 7vw, 70px);
        display: flex;
        flex-direction: column;
    }
    & .category-item {
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    & .category-link {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        line-height: 1.5em;
        color: #333;
        text-decoration: none;
        transition: color 0.3s ease;
        &::before {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            background-color: #fff;
            border: 1.5px solid #e8e8eb;
            border-radius: 50%;
            margin-right: 7px;

            box-sizing: border-box;
            flex-shrink: 0;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        &:hover {
            color: #04A1EF;
        }
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-weight: normal;
        text-align: left;
        appearance: none;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        cursor: pointer
    }
    & .category-item.is-active .category-link,
    .category-link.is-active {
        color: #04A1EF;
        &::before {
            background-color: #04A1EF;
            box-shadow: inset 0 0 0 2.5px #fff;
            border-color: #F0F1F3;
        }
    }
    & .news-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    & .news-item {
        border-bottom: 1px solid #F0F1F3;
    }
    & .news-link {
        display: flex;
        gap: 30px;
        padding: 30px 0;
    }
    & .news-img-wrap {
        width: 150px;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        flex-shrink: 0;
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    & .news-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }
    & .news-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 12px;
    }
    & .news-date {
        font-size: 14px;
        line-height: 1;
        flex-shrink: 0;
    }

    & .news-category {
        font-size: 11px;
        color: #04A1EF;
        background-color: #F0F1F3;
        padding: 4px 16px;
        border-radius: 100vh;
        line-height: 1;
        font-weight: 500;
        display: inline-block;
        white-space: nowrap;
    }
    & .news-title {
        margin: 0;
        font-size: clamp(14px, 1.6vw, 16px);
        line-height: 1.5em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        transition: color 0.3s;
    }
    & a:hover .news-title{
        color: #04A1EF;
    }

    & .category-item:last-child {
        margin-bottom: 0;
    }

    & .category-link::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 7px;
        box-sizing: border-box;
        flex-shrink: 0;
        background-color: #fff;
        border: 1.5px solid #e8e8eb;
        border-radius: 50%;
        transition:
            background-color 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
    }

    & .category-link:hover {
        color: #04A1EF;
    }

    & .category-link:focus-visible {
        color: #04A1EF;
        outline: 2px solid #04A1EF;
        outline-offset: 4px;
    }

    & .category-item.is-active .category-link {
        color: #04A1EF;
    }

    & .category-item.is-active .category-link::before {
        background-color: #04A1EF;
        border-color: #F0F1F3;
        box-shadow: inset 0 0 0 2.5px #fff;
    }

    & .news-result {
        position: relative;
    }

    & .news-panel[hidden] {
        display: none;
    }

    & .news-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    & .news-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    & .news-empty {
        padding: 60px 0;
        font-size: 15px;
        line-height: 1.7;
        text-align: center;
    }
}
@media only screen and (max-width: 1000px) {
    #news{
        & .new-conts .left{
            width: 250px;
        }
        & .new-conts .right{
            width: calc(100% - 260px);
        }
    }
}
@media only screen and (max-width: 780px) {
    #news{
        & .new-conts{
            padding: clamp(50px, 10vw, 100px) 3%;
        }
        & .new-conts .illust{
            display: none;
            /* bottom: inherit;
            top: -20px;
            left: -1%;
            width: 90px; */
        }
        & .new-conts .left{
            width: 100%;
        }
        & .new-conts .right{
            width: 100%;
        }
        & .new-conts .title{
            text-align: center;
        }
        & .category-list {
            justify-content: center;
            flex-direction: row;
            gap: 24px;
        }
        & .news-link {
            gap: 15px;
            padding: 24px 0;
        }
        & .news-img-wrap {
            width: 120px;
        }
    }
}
@media only screen and (max-width: 500px) {
    #news{
        & .category-list{
            flex-wrap: wrap;
        }
        & .category-list {
            gap: 10px;
        }
        & .category-list .category-item{
            width: 45%;
        }
    }
}

/*++++++++++++++++++++++++++
CTA
++++++++++++++++++++++++++*/
.top_haikei .cta-contents{
    background-image: url(../images/home/back_check.png);
    background-position: left top;
    background-repeat: repeat;
    background-size: 140px;
}
.cta-contents{
    font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
    padding: clamp(80px, 12vw, 120px) 0 clamp(80px, 12vw, 120px);
    & .cta-wrapper {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
    }
    & .cta-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    & .cta-box {
        width: 50%;
        padding: clamp(30px, 4.5vw, 45px) 20px;
        text-align: center;
        color: #fff;
        box-sizing: border-box;
        transition: background-color .3s;
    }
    & .cta-form {
        background-color: #12AFFE;
        &:has(a:hover){
            background-color: #027ab5;
        }
    }
    & .cta-tel {
        background-color: #04A1EF;
        &:has(a:hover){
            background-color: #027ab5;
        }
    }
    & .cta-title {
        margin: 0 0 25px;
        font-size: clamp(20px, 2.4vw, 24px);
        line-height: 1.4;
    }
    & .cta-icon {
        width: 70px;
        margin: auto auto 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        & img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    & .cta-lead {
        margin: 0 0 25px;
        font-size: 16px;
        line-height: 1.6em;
    }
    & .common-btn .btn-more{
        margin: auto;
        background: #fff;
        &:hover {
            background-color: #fff;
        }
        & .btn-text {
            color: #12AFFE;
            font-weight: 500;
            text-align: left;
        }
        & .btn-arrow {
            &::before {
                background-color: #12AFFE;
            }
        }
        & .arrow-icon {
            background-color: #12AFFE;
            &::after {
                border-top: 2px solid #12AFFE;
                border-right: 2px solid #12AFFE;
            }
        }
    }
    & .cta-tel-info {
        margin-bottom: 15px;
    }
    & .cta-tel-number {
        margin: 0 0 10px;
        font-size: clamp(16px, 2vw, 20px);
        line-height: 1.6em;
        color: #fff;
        &:last-child {
            margin-bottom: 0;
        }
    }
    & .cta-time {
        margin: 0;
        font-size: clamp(12px, 1.4vw, 14px);
        line-height: 1.2em;
    }
}
@media only screen and (max-width: 780px) {
    .cta-contents{
        padding-bottom: 0;
        & .cta-wrapper {
            width: 100%;
        }
        & .cta-box {
            width: 100%;
        }
    }
}
/*++++++++++++++++++++++++++
フッター
++++++++++++++++++++++++++*/
footer{
    padding: clamp(50px, 10vw, 100px) 0 clamp(30px, 6vw, 60px);
    background-color: #1D293B;
    color: #fff;
    & .box-top{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
    }
    & .box-top .left{
        width: 35%;
    }
    & .box-top .right{
        width: 60%;
    }
    & .box-top .logo{
        max-width: 350px;
        margin-bottom: clamp(20px, 3.5vw, 35px);
    }
    & .box-top p.info{
        font-size: 14px;
        font-weight: 300;
        line-height: 1.7em;
        & a{
            color: #fff;
        }
    }
    & .box-top nav{
        font-size: 0;
    }
    & .box-top nav ul{
        display: inline-block;
        margin-left: 15%;
    }
    & .box-top nav ul li{
        margin-bottom: 25px;
    }
    & .box-top nav ul li a{
        display: block;
        font-size: 16px;
        line-height: 1em;
        font-weight: 300;
        color: #fff;
        transition: color .3s;
        &:hover{
            color: #04A1EF;
        }
    }
    & .totop{
        position: absolute;
        top: 0;
        right: 0;
        & .btn-to-top {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background-color: #1D293B;
            border: 1px solid #fff;
            border-radius: 50%;
            box-sizing: border-box;
            transition: opacity 0.3s ease, transform 0.3s ease;
            &:hover {
                background-color: #27374D;
                transform: translateY(-3px);
            }
            & .arrow-up {
                position: relative;
                width: 14px;
                height: 14px;
                &::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 2px;
                    height: 12px;
                    background-color: #fff;
                }
                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 50%;
                    width: 6px;
                    height: 6px;
                    border-top: 2px solid #fff;
                    border-left: 2px solid #fff;
                    transform: translateX(-50%) rotate(45deg);
                }
            }
        }
    }
    & .box-btm{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 120px;
    }
    & .box-btm p.link a{
        font-size: clamp(12px, 1.6vw, 16px);
        font-weight: 300;
        line-height: 1.2em;
        color: #fff;
        display: block;
        transition: color .3s;
        &:hover{
            color: #04A1EF;
        }
    }
    & .box-btm p.copyright{
        font-size: clamp(11px, 1.4vw, 14px);
        font-weight: 300;
        line-height: 1.2em;
    }
}
@media only screen and (max-width: 780px) {
    footer{
        & .box-top{
            flex-direction: column-reverse;
        }
        & .box-top .left{
            width: 100%;
        }
        & .box-top .right{
            width: 100%;
            margin-bottom: 35px;
        }
        & .box-top nav ul{
            display: block;
            margin-left: 0;
        }
        & .box-top nav ul li{
            border-bottom: solid 1px #474D57;
            padding: 15px 0;
            margin-bottom: 0;
        }
        & .box-top nav ul:first-child li:first-child{
            border-top: solid 1px #474D57;
        }
        & .box-top nav ul li a{
            width: 100%;
        }
        & .totop{
            display: none;
        }
        & .box-btm{
            display: block;
            padding-top: 30px;
        }
        & .box-btm p.link{
            margin-bottom: 10px;
        }
        & .box-btm p.copyright{
            padding-top: 10px;
        }
    }
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++
下層ページ
++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++*/
#second-head{
    padding-top: clamp(90px, 18vw, 160px);
    & .title h2 {
        font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        color: #04A1EF;
        font-size: clamp(52px, 6.4vw, 64px);
        font-weight: 600;
        line-height: 1;
    }
    & .title p {
        position: relative;
        margin-bottom: 10px;
        padding-left: 18px;
        font-size: 15px;
        font-weight: 500;
        display: inline-block;
    }
    & .title p::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        background: #04A1EF;
        clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
        transform: translateY(-50%);
    }
    /*パンくず*/
    & .pankuzu{
        margin-top: clamp(40px, 5vw, 50px);
        margin-bottom: clamp(30px, 4vw, 40px);
    }
    & .pankuzu ul{
        font-size: 0;
    }
    & .pankuzu ul li{
        display: inline-block;
        vertical-align: middle;
        position: relative;
        margin-right: 25px;
    }
    & .pankuzu ul li:not(:last-child)::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: -15px;
        margin: auto;
        width: 5px;
        height: 5px;
        border-top: solid 1px #2C3E50;
        border-right: solid 1px #2C3E50;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    & .pankuzu ul li p{
        font-size: 11px;
        line-height: 1.2em;
    }
    & .pankuzu ul li:last-child p{
        color: #04A1EF;
    }
    & .separator{
        padding: 1px 0;
        border-bottom: solid 1px #F0F1F3;
    }
    /*セカンドヘッダーイメージ*/
    & .sc-mainimg{
        max-width: 1400px;
        width: 94%;
        margin: auto;
        padding: 250px 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 2em;
    }
    & .sc-mainimg.sc-company{
        background-image: url(../images/company/company_header.jpg);
    }
    & .sc-mainimg.sc-technology{
        background-image: url(../images/technology/technology_header.jpg);
    }
}
@media only screen and (max-width: 780px) {
    #second-head{
        & .sc-mainimg{
            width: 100%;
            padding: 120px 0;
            border-radius: 0;
        }
    }
}

#second-contents{
    padding-top: 100px;
    & .content-blk:not(:last-child){
        padding-bottom: clamp(100px, 20vw, 200px);
    }
    & .midashi{
        margin-bottom: clamp(30px, 8vw, 80px);
    }
    & .midashi h2 {
        font-size: clamp(36px, 4.2vw, 42px);
        font-weight: 600;
        line-height: 1.3em;
    }
    & .midashi p {
        font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        position: relative;
        margin-bottom: 5px;
        padding-left: 18px;
        font-size: 15px;
        font-weight: 500;
        display: inline-block;
    }
    & .midashi p::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        background: #04A1EF;
        clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
        transform: translateY(-50%);
    }
    & h6{
        font-size: clamp(18px, 2vw, 20px);
        line-height: 1.5em;
        font-weight: 500;
        color: #04A1EF;
        margin-bottom: 25px;
        padding-left: 18px;
        position: relative;
    }
    & h6::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        background: #04A1EF;
        clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
        transform: translateY(-50%);
    }
    & .mgn-b15{
        margin-bottom: 15px;
    }
    & .mgn-b20{
        margin-bottom: 20px;
    }
    & .mgn-b4060{
        margin-bottom: clamp(40px, 6vw, 60px);
    }
    & p.txt1{
        font-size: 16px;
        line-height: 1.7em;
    }
    & .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .flx-box .flx-inr35{
        width: 35%;
    }
    & .flx-box .flx-inr49{
        width: 49%;
    }
    & .flx-box .flx-inr60{
        width: 60%;
    }
    & .president figure{
        margin-bottom: 15px;
    }
    & .president .pre-txt{
        font-size: 14px;
        line-height: 1.6em;
        text-align: center;
    }
    & .basesimg img{
        border-radius: 1em;
    }
    & .map-btn{
        margin-top: 20px;
    }
    & .map-btn a{
        display: inline-block;
        border: solid 1px #F0F1F3;
        border-radius: 4px;
        transition: background-color .3s;
    }
    & .map-btn a:hover{
        background-color: #EEF8FE;
    }
    & .map-btn a p{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.2em;
        padding: 10px 20px;
    }
    & .map-btn a p::before{
        content: '';
        display: inline-block;
        background-image: url(../images/company/company_icon_map.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        width: 1.1em;
        height: 1.1em;
        margin-right: .5em;
    }
    & .timeline-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    & .timeline-item {
        position: relative;
        padding-left: 36px;
        padding-bottom: 48px;
        &:last-child {
            padding-bottom: 0;
        }
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid #04A1EF;
            background-color: #fff;
            box-sizing: border-box;
            z-index: 2;
        }
        &::after {
            content: "";
            position: absolute;
            left: 7px;
            top: 25px;
            bottom: -3px;
            width: 2px;
            background-color: #04A1EF;
            z-index: 1;
        }
    }
    & .timeline-year {
        margin: 0 0 12px;
        font-size: clamp(22px, 2.4vw, 24px);
        font-weight: 600;
        color: #04A1EF;
        line-height: 1.2em;
    }
    & .timeline-content {
        margin: 0;
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.7em;
    }
    & .vr-contents{
        margin-top: clamp(20px, 4vw, 40px);
    }
    & .vr-contents .factory-blk{
        position: relative;
    }
    & .vr-contents .vr-link{
        position: absolute;
        width: clamp(10px, 7.6vw, 100px);
    }
    & .vr-contents .link1{
        top: 40%;
        left: 11.5%;
    }
    & .vr-contents .link2{
        top: 68%;
        left: 22%;
    }
    & .vr-contents .link3{
        top: 22%;
        left: 32%;
    }
    & .vr-contents .link4{
        top: 58%;
        left: 38%;
    }
    & .vr-contents .link5{
        top: 50%;
        left: 52%;
    }
    & .vr-contents .link6{
        top: 61%;
        left: 66%;
    }
    & .vr-contents .link7{
        top: 34%;
        left: 77%;
    }
    & .vr-contents .link8{
        top: 7%;
        left: 88%;
    }
    & .vr-contents .link9{
        top: 50%;
        left: 88%;
    }
    .map-pin-css {
        position: relative;
        width: clamp(20px, 2.8vw, 40px);
        aspect-ratio: 1 / 1.5;
        filter: drop-shadow(0 0 4px #00000046);
        margin: auto;
        transition: all .3s;
    }
    & .vr-contents .vr-link a:hover .map-pin-css{
        scale: 1.08;
    }
    .map-pin-css::before {
        content: "";
        position: absolute;
        top: 4%;
        left: 4%;
        width: 92%;
        aspect-ratio: 1 / 1;
        background-color: #04A1EF;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        box-shadow: 0 0 0 2.5px #fff;
        transition: background-color .3s;
    }
    & .vr-contents .vr-link a:hover .map-pin-css::before{
        background-color: #FDD156;
    }
    .map-pin-css::after {
        content: "";
        position: absolute;
        top: 36%;
        left: 50%;
        width: 38%;
        aspect-ratio: 1 / 1;
        background-color: #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    & .vr-contents .vr-link .pc-box .icon{
        width: clamp(20px, 2.8vw, 40px);
        margin: auto auto 10px;
    }
    & .vr-contents .vr-link .pc-box .icon img{
        filter: drop-shadow(0 0 4px #0000002c);
    }
    & .vr-contents .vr-link .pc-box .txt p{
        font-size: clamp(4px, 1.05vw, 14px);
        text-align: center;
        font-weight: 400;
        background-color: #fff;
        border: solid 1px #878787;
        border-radius: 50px;
        padding: .4em .9em;
        line-height: 1.2em;
    }
    & .vr-contents .vr-link .sp-box,
    & .vr-contents .sp-linkmenu{
        display: none;
    }
    & .head-txt{
        font-size: clamp(18px, 2.4vw, 24px);
        text-align: center;
        line-height: 1.5em;
        margin-bottom: clamp(40px, 7vw, 70px);
    }
    & .head-txt2{
        font-size: clamp(16px, 2vw, 20px);
        text-align: center;
        line-height: 1.6em;
        margin-bottom: clamp(40px, 7vw, 70px);
    }
    & .tel-contact-block {
        width: 100%;
        max-width: 500px;
        margin: 0 auto 80px;
        text-align: center;
        box-sizing: border-box;
        & .tel-contact-title {
            color: #04A1EF;
            font-size: clamp(15px, 1.6vw, 16px);
            font-weight: 600;
            margin: 0 0 20px;
        }
        & .tel-contact-box {
            border: 2px solid #04A1EF;
            border-radius: 8px;
            background-color: #fff;
            padding: 40px 20px;
            box-sizing: border-box;
        }
        & .tel-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        & .tel-label {
            font-size: clamp(15px, 1.6vw, 16px);
            margin: 0 0 12px;
        }
        & .tel-number {
            font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 20px;
            font-weight: 600;
            color: #04A1EF;
            text-decoration: none;
            transition: opacity 0.2s ease;
            &:hover {
                opacity: 0.75;
            }
        }
        & .tel-icon {
            width: auto;
            height: 18px;
        }
        & .tel-divider {
            border: none;
            border-top: 1px solid #E2E2E2;
            width: 100%;
            margin: 25px auto;
        }
        & .tel-time {
            font-size: 14px;
            color: #2B3641;
            line-height: 1.6em;
            margin: 0;
        }
    }
    & .tech-box{
        & img{
            border-radius: 0.8em;
        }
    }
    & .tech-box .tech-img1{
        margin-bottom: clamp(30px, 4vw, 40px);
    }
    & .tech-box .komidashi{
        font-size: clamp(26px, 3.2vw, 32px);
        font-weight: 500;
        line-height: 1.6em;
        margin-bottom: clamp(10px, 1.5vw, 15px);
    }
    & .tech-box .point-blk ul li{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 45px;
    }
    & .tech-box .point-blk ul li .point{
        width: 50px;
    }
    & .tech-box .point-blk ul li .p-txt{
        width: calc(100% - 100px);
    }
    & .tech-box .point-blk ul li .point .number{
        font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        color: #04A1EF;
        line-height: 2em;
    }
    & .tech-box .point-blk ul li .point .number span{
        font-size: 2.6em;
        font-weight: 900;
        display: block;
    }
    & .tech-box .point-blk ul li .p-txt .komidashi2{
        font-size: clamp(20px, 2.4vw, 24px);
        line-height: 1.6em;
        margin-bottom: clamp(10px, 1.2vw, 12px);
    }
    & .komidashi3{
        font-size: clamp(26px, 3.2vw, 32px);
        font-weight: 500;
        line-height: 1.6em;
        color: #04A1EF;
        text-align: center;
        margin-bottom: clamp(40px, 7vw, 70px);
    }
    & .entry-container {
      width: 100%;
      box-sizing: border-box;
      padding: clamp(80px, 10vw, 100px) 0 clamp(100px, 20vw, 200px);
    }
    & .entry-container .entry-banner {
      position: relative;
      width: 100%;
      background-color: #04A1EF;
      border-radius: 16px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: clamp(25px, 5vw, 50px) clamp(30px, 6vw, 60px);
    }
    & .entry-container .entry-body {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    & .entry-container .entry-title {
      color: #ffffff;
      font-size: clamp(24px, 3.2vw, 32px);
      font-weight: bold;
      margin: 0 0 24px 0;
      text-align: center;
      line-height: 1.3;
    }
    & .entry-container .entry-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #ffffff;
      color: #04A1EF;
      font-size: clamp(14px, 2vw, 20px);
      font-weight: bold;
      text-decoration: none;
      border-radius: 50px;
      padding: 10px 12px 10px 40px;
      width: 100%;
      max-width: 460px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
    }
    & .entry-container .entry-button-text {
      flex: 1;
      text-align: center;
    }
    & .entry-button-icon {
        position: relative;
        display: block;
        width: 40px;
        height: 40px;
        background-color: #04A1EF;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
        transition: background-color 0.3s ease;
    }
    & .entry-button-icon::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 28%;
        width: 44%;
        height: 2px;
        background-color: #ffffff;
        transform: translateY(-50%);
    }
    & .entry-button-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 28%;
        width: 8px;
        height: 8px;
        border-top: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
        transform: translateY(-50%) rotate(45deg);
    }
    & .entry-container .entry-image-wrapper {
      position: absolute;
      right: 20px;
      bottom: 0;
      width: 230px;
    }
    & .policy-blk{
        padding-bottom: clamp(100px, 20vw, 200px);
    }
    & .policy-blk .pol-midashi{
        font-size: clamp(26px, 3.2vw, 32px);
        line-height: 1.6em;
        margin-bottom: clamp(20px, 3vw, 30px);
    }
    & .policy-blk .pol-list{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.7em;
        margin-bottom: 10px;
        margin-left: 1em;
        text-indent: -1em;
    }
    & .policy-blk .pol-list::before{
        content: '・';
    }
    & .policy-blk .pol-txt{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.7em;
    }
    /* --- 左追従メニュー --- */
    & .with-navi{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    & .with-navi .float-nav{
        width: 240px;
        position: sticky;
        top: 100px;
        height: auto;
        & nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        & nav li {
            margin-bottom: 15px;
            &:last-child {
                margin-bottom: 0;
            }
        }
        & nav a {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            text-decoration: none;
            font-size: 16px;
            font-weight: 700;
            transition: color 0.3s ease;
            & span {
                font-size: 14px;
                font-weight: 700;
                color: #E5E7EB;
                transition: color 0.3s ease;
            }
            &:hover,
            &.is-active {
                color: #04A1EF;
                & span {
                    color: #04A1EF;
                }
            }
        }
    }
    & .with-navi .right-contents{
        width: calc(100% - 280px);
    }
    & .spec-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        & th {
            width: 200px;
            padding: 24px 10px 24px 0;
            text-align: left;
            vertical-align: top;
            font-size: clamp(15px, 1.6vw, 16px);
            line-height: 1.7em;
            color: #04A1EF;
            font-weight: 500;
            border-bottom: 1px solid #04A1EF;
        }
        & td {
            padding: 24px 0 24px 20px;
            text-align: left;
            vertical-align: top;
            font-size: clamp(15px, 1.6vw, 16px);
            line-height: 1.7em;
            border-bottom: 1px solid #F0F1F3;
        }
    }
    /*+++++++送信完了+++++++*/
    & .complete-blk{
        margin-bottom: clamp(100px, 15vw, 150px);
    }
    & .complete-blk .comp-txt1{
        font-size: clamp(28px, 3.6vw, 36px);
        font-weight: 500;
        line-height: 1.6em;
        color: #04A1EF;
        text-align: center;
        margin-bottom: clamp(40px, 7vw, 70px);
    }
    & .complete-blk .comp-txt2{
        font-size: clamp(18px, 2.4vw, 24px);
        text-align: center;
        line-height: 1.6em;
        font-weight: 500;
        margin-bottom: 20px;
    }
    & .complete-blk .comp-txt3{
        font-size: clamp(16px, 2vw, 20px);
        text-align: center;
        line-height: 1.6em;
        margin-bottom: clamp(40px, 5vw, 50px);
    }
    & .complete-blk .common-btn .btn-more{
        margin: auto;
    }

}
@keyframes entryArrowLine {
    0% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
    40% {
        transform: translateY(-50%) translateX(10px);
        opacity: 0;
    }
    41% {
        transform: translateY(-50%) translateX(-15px);
        opacity: 0;
    }
    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}
@keyframes entryArrowHead {
    0% {
        transform: translateY(-50%) translateX(0) rotate(45deg);
        opacity: 1;
    }
    40% {
        transform: translateY(-50%) translateX(10px) rotate(45deg);
        opacity: 0;
    }
    41% {
        transform: translateY(-50%) translateX(-15px) rotate(45deg);
        opacity: 0;
    }
    100% {
        transform: translateY(-50%) translateX(0) rotate(45deg);
        opacity: 1;
    }
}
@media only screen and (max-width: 780px) {
    #second-contents {
        & .flx-box .flx-inr35{
            width: 100%;
        }
        & .flx-box .flx-inr49{
            width: 100%;
        }
        & .flx-box .flx-inr60{
            width: 100%;
        }
        & .flx-box .flx-spbtm{
            margin-bottom: 35px;
        }
        & .flx-box .flx-spbtm2{
            margin-bottom: 45px;
        }
        & .vr-contents .link1{
            top: 42%;
            left: 13%;
        }
        & .vr-contents .link2{
            top: 70%;
            left: 23%;
        }
        & .vr-contents .link3{
            top: 24%;
            left: 35%;
        }
        & .vr-contents .link4{
            top: 60%;
            left: 40%;
        }
        & .vr-contents .link5{
            top: 56%;
            left: 60%;
        }
        & .vr-contents .link6{
            top: 64%;
            left: 72%;
        }
        & .vr-contents .link7{
            top: 40%;
            left: 80%;
        }
        & .vr-contents .link8{
            top: 20%;
            left: 91%;
        }
        & .vr-contents .link9{
            top: 55%;
            left: 90%;
        }
        & .vr-contents .vr-link .pc-box{
            display: none;
        }
        & .vr-contents .vr-link .sp-box{
            display: block;
        }
        & .vr-contents .vr-link .sp-box .number{
            width: clamp(15px, 5.2vw, 50px);
            height: clamp(15px, 5.2vw, 50px);
            border-radius: 100px;
            background-color: #04A1EF;
            border: solid 2px #fff;
        }
        & .vr-contents .vr-link .sp-box .number p{
            font-size: clamp(4px, 2.9vw, 23px);
            text-align: center;
            line-height: clamp(14px, 4.4vw, 44px);
            color: #fff;
            font-weight: 600;
        }
        & .vr-contents .sp-linkmenu{
            display: block;
            margin-top: 10px;
        }
        & .vr-contents .sp-linkmenu ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        & .vr-contents .sp-linkmenu ul li{
            width: 48%;
            margin-top: 12px;
            background-color: #fff;
            border: solid 1px #878787;
            border-radius: 1000px;
            position: relative;
        }
        & .vr-contents .sp-linkmenu ul li span{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 10px;
            margin: auto;
            width: 20px;
            height: 20px;
            background-color: #04A1EF;
            border-radius: 100px;
            font-size: 12px;
            line-height: 20px;
            font-weight: 500;
            color: #fff;
            text-align: center;
        }
        & .vr-contents .sp-linkmenu ul li p{
            font-size: 15px;
            text-align: center;
            line-height: 1.3em;
            padding: 10px 15px;
        }
        & .tel-contact-block {
            margin-bottom: 40px;
        }
        & .tech-box .point-blk ul li .point .number{
            font-size: 11px;
        }
        & .tech-box .point-blk ul li .point{
            width: 45px;
        }
        & .tech-box .point-blk ul li .p-txt{
            width: calc(100% - 60px);
        }
        & .entry-button-icon {
            width: 28px;
            height: 28px;
        }
        & .entry-container .entry-image-wrapper {
            right: 10px;
            width: 150px;
        }
        /*左追従メニュー*/
        & .with-navi {
            flex-direction: column;
        }
        & .with-navi .float-nav {
            width: 100%;
            position: static;
            margin-bottom: 50px;
            & nav ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 40px 3%;
            }
            & nav li {
                width: 32%;
                margin-bottom: 0;
                text-align: center;
            }
            & nav a {
                flex-direction: column;
                gap: 2px;
                font-size: 12px;
                width: 100%;
                &.is-active{
                    color: #27374D;
                    &:hover{
                        color: #04A1EF;
                    }
                }
                & span {
                    color: #04A1EF;
                    font-size: 12px;
                }
                &::after {
                    content: "";
                    display: block;
                    width: 6px;
                    height: 6px;
                    border-bottom: 2px solid #04A1EF;
                    border-right: 2px solid #04A1EF;
                    transform: rotate(45deg);
                    margin: 4px auto 0;
                }
            }
        }
        & .with-navi .right-contents {
            width: 100%;
        }
        & .spec-table {
            & th {
                width: 100px;
            }
        }
    }
}

/*++++++++++++++++++++++++++
ニュース一覧
++++++++++++++++++++++++++*/
.news-exclusive{
    margin-bottom: clamp(120px, 20vw, 200px);
    & .category-list {
        list-style: none;
        padding: 0;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        margin: 30px 0 0;
    }
    & .category-item {
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    & .category-link {
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        line-height: 1.5em;
        color: #333;
        text-decoration: none;
        transition: color 0.3s ease;
        &::before {
            content: "";
            display: inline-block;
            width: 14px;
            height: 14px;
            background-color: #fff;
            border: 1.5px solid #e8e8eb;
            border-radius: 50%;
            margin-right: 7px;

            box-sizing: border-box;
            flex-shrink: 0;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }
        &:hover {
            color: #04A1EF;
        }
    }
    & .category-item.is-active .category-link,
    .category-link.is-active {
        color: #04A1EF;
        &::before {
            background-color: #04A1EF;
            box-shadow: inset 0 0 0 2.5px #fff;
            border-color: #F0F1F3;
        }
    }
    & .news-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    & .news-item {
        border-bottom: 1px solid #F0F1F3;
    }
    & .news-link {
        display: flex;
        gap: 30px;
        padding: 30px 0;
    }
    & .news-img-wrap {
        width: 150px;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        flex-shrink: 0;
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    & .news-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }
    & .news-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 12px;
    }
    & .news-date {
        font-size: 14px;
        line-height: 1;
        flex-shrink: 0;
    }
    & .news-category {
        font-size: 11px;
        color: #04A1EF;
        background-color: #F0F1F3;
        padding: 4px 16px;
        border-radius: 100vh;
        line-height: 1;
        font-weight: 500;
        display: inline-block;
        white-space: nowrap;
    }
    & .news-title {
        margin: 0;
        font-size: clamp(14px, 1.6vw, 16px);
        line-height: 1.5em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        transition: color 0.3s;
    }
    & a:hover .news-title{
        color: #04A1EF;
    }

    & .category-item:last-child {
        margin-bottom: 0;
    }

    & .category-link::before {
        content: "";
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 7px;
        box-sizing: border-box;
        flex-shrink: 0;
        background-color: #fff;
        border: 1.5px solid #e8e8eb;
        border-radius: 50%;
        transition:
            background-color 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
    }

    & .category-link:hover {
        color: #04A1EF;
    }

    & .category-item.is-active .category-link {
        color: #04A1EF;
    }

    & .category-item.is-active .category-link::before {
        background-color: #04A1EF;
        border-color: #F0F1F3;
        box-shadow: inset 0 0 0 2.5px #fff;
    }

    & .news-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    & .news-categories {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    & .news-empty {
        padding: 60px 0;
        font-size: 15px;
        line-height: 1.7em;
        text-align: center;
    }
}
@media only screen and (max-width: 780px) {
    .news-exclusive{
        & .new-conts .title{
            text-align: center;
        }
        & .category-list {
            justify-content: center;
            flex-direction: row;
            gap: 24px;
            margin-top: 0;
        }
        & .news-link {
            gap: 15px;
            padding: 24px 0;
        }
        & .news-img-wrap {
            width: 120px;
        }
    }
}
@media only screen and (max-width: 500px) {
    .news-exclusive{
        & .category-list{
            flex-wrap: wrap;
        }
        & .category-list {
            gap: 10px;
        }
        & .category-list .category-item{
            width: 45%;
        }
    }
}
/* --- WP-PageNavi（ページネーション）スタイル --- */
.wp-pagenavi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 60px auto 0;
    width: 100%;
    & a,
    & span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 500;
        color: #1A1A1A;
        text-decoration: none;
        box-sizing: border-box;
        line-height: 1;
        transition:
            color 0.2s ease,
            opacity 0.2s ease;
        border: none;
    }
    & a.page:hover {
        color: #04A1EF;
    }
    & span.current {
        cursor: default;
        color: #04A1EF;
    }
    & .nextpostslink {
        position: relative;
        width: 16px;
        height: 16px;
        transition: opacity 0.2s ease;
        &:hover {
            opacity: 0.75;
        }
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 15px;
            height: 2px;
            background-color: #04A1EF;
        }
        &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            width: 7px;
            height: 7px;
            border-top: 2px solid #04A1EF;
            border-right: 2px solid #04A1EF;
            transform: translateY(-50%) rotate(45deg);
        }
    }

    & a:hover {
        color: #04A1EF;
    }

    & .pages,
    & .extend {
        display: none;
    }

    & .previouspostslink,
    & .nextpostslink {
        position: relative;
        width: 16px;
        height: 16px;
        overflow: hidden;
        font-size: 0;
    }

    & .previouspostslink:hover,
    & .nextpostslink:hover {
        opacity: 0.75;
    }

    & .previouspostslink::before,
    & .nextpostslink::before {
        content: "";
        position: absolute;
        top: 50%;
        width: 15px;
        height: 2px;
        background-color: #04A1EF;
        transform: translateY(-50%);
    }

    & .previouspostslink::after,
    & .nextpostslink::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 7px;
        height: 7px;
        border-top: 2px solid #04A1EF;
        border-right: 2px solid #04A1EF;
    }

    & .nextpostslink::before {
        left: 0;
    }

    & .nextpostslink::after {
        right: 0;
        transform: translateY(-50%) rotate(45deg);
    }

    & .previouspostslink::before {
        right: 0;
    }

    & .previouspostslink::after {
        left: 0;
        transform: translateY(-50%) rotate(-135deg);
    }
}
@media only screen and (max-width: 500px) {
    .wp-pagenavi {
        gap: 24px;
        & a,
        & span {
            font-size: 16px;
        }
    }
}
/*++++++++++++++++++++++++++
ニュース詳細
++++++++++++++++++++++++++*/
#news-head{
    padding-top: clamp(90px, 18vw, 160px);
    & .title h2 {
        font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        color: #04A1EF;
        font-size: clamp(52px, 6.4vw, 64px);
        font-weight: 600;
        line-height: 1;
    }
    & .news-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    & .news-meta {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 12px;
    }

    & .news-date {
        font-size: 15px;
        line-height: 1;
    }
    & .news-category {
        font-size: 12px;
        color: #04A1EF;
        background-color: #F0F1F3;
        padding: 4px 16px;
        border-radius: 100vh;
        line-height: 1;
        font-weight: 500;
    }
    & .news-title {
        margin: 0;
        font-size: clamp(24px, 3.2vw, 32px);
        line-height: 1.5em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    /*パンくず*/
    & .pankuzu{
        margin-top: clamp(40px, 5vw, 50px);
        margin-bottom: clamp(30px, 4vw, 40px);
    }
    & .pankuzu ul{
        font-size: 0;
    }
    & .pankuzu ul li{
        display: inline-block;
        vertical-align: middle;
        position: relative;
        margin-right: 25px;
    }
    & .pankuzu ul li:not(:last-child)::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: -15px;
        margin: auto;
        width: 5px;
        height: 5px;
        border-top: solid 1px #2C3E50;
        border-right: solid 1px #2C3E50;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
    & .pankuzu ul li p{
        font-size: 11px;
        line-height: 1.2em;
    }
    & .pankuzu ul li:last-child p{
        color: #04A1EF;
    }
    & .separator{
        padding: 1px 0;
        border-bottom: solid 1px #F0F1F3;
    }
}
@media only screen and (max-width: 780px) {
    #second-head{
        & .sc-mainimg{
            width: 100%;
            padding: 120px 0;
            border-radius: 0;
        }
    }
}
#news-contents{
    padding-top: 100px;
    padding-bottom: clamp(120px, 20vw, 200px);
    & .news-wrapper {
        font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        max-width: 900px;
        width: 90%;
        margin: auto;
    }
    & .news-blk h1{
        color: #04A1EF;
        font-size: clamp(38px, 5.2vw, 52px);
        font-weight: 600;
        line-height: 1.6em;
        margin-bottom: clamp(20px, 4vw, 40px);
    }
    & .news-blk h2{
        font-size: clamp(26px, 3.2vw, 32px);
        font-weight: 500;
        line-height: 1.6em;
        margin-bottom: clamp(10px, 1.5vw, 15px);
    }
    & h3{
        font-size: clamp(18px, 2vw, 20px);
        line-height: 1.5em;
        font-weight: 500;
        color: #04A1EF;
        margin-bottom: 25px;
        padding-left: 18px;
        position: relative;
    }
    & h3::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        background: #04A1EF;
        clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
        transform: translateY(-50%);
    }
    & h4{
        font-size: clamp(18px, 2vw, 20px);
        line-height: 1.6em;
        font-weight: 600;
        margin-bottom: 15px;
    }
    & p{
        font-size: clamp(15px, 1.6vw, 16px);
        line-height: 1.7em;
    }
    & .space60{
        padding: 30px 0;
    }
    & .post-navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 80px auto 0;
        padding: 30px 0;
        box-sizing: border-box;
        & .nav-item {
            display: flex;
            align-items: center;
        }
        & a {
            display: inline-flex;
            align-items: center;
            font-size: 15px;
            font-weight: 500;
            color: #1A1A1A;
            text-decoration: none;
            transition: color 0.2s ease, opacity 0.2s ease;
            &:hover {
                color: #04A1EF;
            }
        }
        & .arrow-prev {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-top: 2px solid currentColor;
            border-left: 2px solid currentColor;
            transform: rotate(-45deg);
            margin-right: 8px;
        }
        & .arrow-next {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-top: 2px solid currentColor;
            border-right: 2px solid currentColor;
            transform: rotate(45deg);
            margin-left: 8px;
        }
        & .arrow-return {
            position: relative;
            display: inline-block;
            width: 12px;
            height: 8px;
            border-bottom: 2px solid currentColor;
            border-right: 2px solid currentColor;
            border-bottom-right-radius: 4px;
            margin-left: 8px;
            transform: translateY(-2px);
            &::after {
                content: "";
                position: absolute;
                left: -1px;
                bottom: -4px;
                width: 5px;
                height: 5px;
                border-top: 2px solid currentColor;
                border-left: 2px solid currentColor;
                transform: rotate(-45deg);
            }
        }
    }
}

@media only screen and (max-width: 540px) {
    .post-navigation {
        padding: 20px 0;

        & a {
            font-size: 13px;
        }
    }

    #news-head .news-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    #news-head .news-categories {
        gap: 5px;
    }

    #news-head .news-category {
        padding: 4px 10px;
    }

    #news-head .pankuzu ul li:last-child {
        display: none;
    }

    #news-contents {
        padding-top: 60px;
    }

    #news-contents .post-navigation {
        margin-top: 60px;
        padding: 20px 0;
    }

    #news-contents .post-navigation a {
        font-size: 13px;
    }

    #news-contents .post-navigation .nav-prev,
    #news-contents .post-navigation .nav-next {
        width: 50px;
    }

    #news-contents .post-navigation .nav-archive a {
        font-size: 12px;
    }

    .wpcf7 .form-input-wrap.tel-split {
        gap: 8px;
    }

    .wpcf7 .form-input-wrap.tel-split .hyphen {
        padding-top: 18px;
    }

    .wpcf7 .form-input-wrap.zip-split {
        gap: 8px;
    }

    .wpcf7 .form-input-wrap.zip-split .wpcf7-form-control-wrap {
        width: calc((100% - 54px) / 2);
    }

    .wpcf7 .form-input-wrap.zip-split .prefix-zip,
    .wpcf7 .form-input-wrap.zip-split .hyphen {
        padding-top: 18px;
    }
}
/* --- ポップアップ（モーダル）のスタイル --- */
.vr-modal {
    font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    &.is-active {
        opacity: 1;
        pointer-events: auto;
    }
    & .vr-modal-overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.6);
    }
    & .vr-modal-content {
        position: relative;
        width: 90%;
        max-width: 800px;
        background-color: #fff;
        padding: clamp(12px, 2vw, 20px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        overflow: hidden;
        z-index: 2;
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }
    &.is-active .vr-modal-content {
        transform: translateY(0);
    }
    & .vr-modal-media {
        position: relative;
        width: 100%;
    }
    & .vr-modal-img {
        width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        margin: 0;
        background-color: #f0f0f0;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    & .vr-modal-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 54px;
        height: 54px;
        background-color: #04A1EF;
        border: none;
        cursor: pointer;
        outline: none;
        transition: background-color 0.2s;
        &:hover {
            background-color: #038ecd;
        }
        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 24px;
            height: 2px;
            background-color: #fff;
        }
        &::before { transform: translate(-50%, -50%) rotate(45deg); }
        &::after { transform: translate(-50%, -50%) rotate(-45deg); }
    }
    & .vr-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
        & span {
            display: inline-block;
            width: 18px;
            height: 18px;
            border-top: 3px solid #fff;
            border-left: 3px solid #fff;
            filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));
            transition: transform 0.2s;
        }
        &:hover span {
            border-color: #04A1EF;
        }
        &.prev {
            left: 20px;
            & span {
                transform: rotate(-45deg);
            }
        }
        &.next {
            right: 20px;
            & span {
                transform: rotate(135deg);
            }
        }
    }
    & .vr-modal-body {
        padding: 15px 10px 5px;
        text-align: center;
    }
    & .vr-modal-title {
        font-size: clamp(20px, 2.4vw, 24px);
        font-weight: 700;
        color: #2B3641;
        margin: 0 0 12px;
    }
    & .vr-modal-desc {
        font-size: clamp(14px, 1.6vw, 16px);
        line-height: 1.7em;
        color: #555555;
        margin: 0;
    }
}
@media only screen and (max-width: 780px) {
    .vr-modal {
        & .vr-modal-close {
            width: 44px;
            height: 44px;
            &::before,
            &::after {
                width: 18px;
            }
        }
        & .vr-nav-btn {
            &.prev { left: 10px; }
            &.next { right: 10px; }
            & span {
                width: 14px;
                height: 14px;
            }
        }
        & .vr-modal-title {
            font-size: 16px;
            margin-bottom: 8px;
        }
        & .vr-modal-desc {
            font-size: 13px;
        }
    }
}


/* --- お問い合わせフォーム共通スタイル --- */
.wpcf7 {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: clamp(100px, 14vw, 140px);
    & .form-notice {
        font-size: 16px;
        color: #2B3641;
        margin-bottom: 48px;
        padding-bottom: 48px;
        border-bottom: 1px solid #F0F1F3;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    & .form-group {
        margin-bottom: 50px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    & .form-label,
    & .privacy-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
        font-size: 16px;
        color: #2B3641;
        font-weight: 500;
        cursor: default;
    }
    & .badge-required {
        font-size: 12px;
        color: #04A1EF;
        border: 1px solid #04A1EF;
        padding: 4px 6px;
        border-radius: 3px;
        line-height: 1;
        font-weight: 600;
    }
    & .form-input-wrap {
        position: relative;
        width: 100%;
    }
    & input[type="text"],
    & input[type="email"],
    & select,
    & textarea {
        width: 100%;
        padding: 20px 20px;
        background-color: #F9F9F9;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        color: #2B3641;
        font-family: inherit;
        box-sizing: border-box;
        outline: none;
        transition: background-color 0.2s;
        &:focus {
            background-color: #f1f1f1;
        }
        &::placeholder {
            color: #CCCCCC;
        }
    }
    & select {
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }
    & .form-input-wrap:has(select)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%) rotate(45deg);
        width: 8px;
        height: 8px;
        border-bottom: 2px solid #555;
        border-right: 2px solid #555;
        pointer-events: none;
    }
    & textarea {
        height: 240px;
        resize: vertical;
    }
    & .tel-split,
    & .zip-split {
        display: flex;
        align-items: center;
        gap: 15px;
        & .wpcf7-form-control-wrap {
            flex: 1;
        }

        & input {
            text-align: center;
        }
    }
    & .zip-split {
        & .prefix-zip {
            font-size: 16px;
            color: #2B3641;
            margin-right: 5px;
        }
        & .wpcf7-form-control-wrap {
            max-width: 150px;
        }
    }
    & .hyphen {
        color: #878787;
        font-size: 16px;
        user-select: none;
    }
    & .form-submit-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 60px;
        text-align: center;
    }
    & .privacy-label {
        margin-bottom: 20px;
    }
    & .privacy-checkbox {
        font-size: 16px;
        color: #2B3641;
        & .wpcf7-list-item {
            margin: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        & input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        & .privacy-link {
            color: #2B3641;
            text-decoration: underline;
            transition: color 0.2s;

            &:hover {
                color: #04A1EF;
            }
        }
    }
    & .form-subtext {
        font-size: 14px;
        color: #2B3641;
        margin-top: 24px;
        line-height: 1.4;
    }
    & .submit-btn-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 35px;
    }
    & .btn-submit {
        width: 100%;
        max-width: 340px;
        height: 54px;
        background-color: #04A1EF;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s, opacity 0.2s;
        &:hover {
            background-color: #038ecd;
        }
    }
    & .wpcf7-not-valid-tip {
        font-size: 12px;
        color: #f84848;
        margin-top: 5px;
        display: block;
    }
    & .wpcf7-response-output {
        margin: 20px 0 0 !important;
        padding: 15px !important;
        font-size: 14px;
        border-radius: 4px;
    }
    & .radio-group {
        display: flex;
        gap: 30px;
        padding: 5px 0;
        & .radio-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            color: #2B3641;
            cursor: pointer;
        }
        & input[type="radio"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
    }
    & .birth-split {
        display: flex;
        align-items: center;
        gap: 12px;
        & input {
            max-width: 120px;
            text-align: center;
        }
        & .unit {
            font-size: 16px;
            color: #2B3641;
            flex-shrink: 0;
        }
    }
    & .age-field {
        display: flex;
        align-items: center;
        gap: 12px;
        & input {
            max-width: 120px;
            text-align: center;
        }
        & .unit {
            font-size: 16px;
            color: #2B3641;
            flex-shrink: 0;
        }
    }
    & .file-wrap {
        padding: 5px 0;
        & input[type="file"] {
            font-size: 15px;
            color: #2B3641;
            background: none;
            padding: 0;
            border-radius: 0;
            cursor: pointer;
        }
    }
    & .wpcf7-spinner{
        display: none;
    }
}




/*++++++++++++++++++++保護者の方へ+++++++++++++++++*/
#parents-mv{
    padding: clamp(20px, 4vw, 40px) 0 clamp(200px, 47vw, 3000px);
    background-color: #fff;
    background-image: url(../images/parents/parents_mv_bg.png?02);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    & .title-box{
        & h2{
            font-size: clamp(32px, 4.2vw, 42px);
            font-weight: 700;
            line-height: 1.5em;
            text-align: center;
            color: #04A1EF;
            margin-bottom: 25px;
        }
        & p{
            font-size: clamp(17px, 2vw, 20px);
            font-weight: 500;
            line-height: 1.8em;
            text-align: center;
        }
    }
    & .prnt-plane{
        position: absolute;
        bottom: 37%;
        left: 0;
        max-width: 330px;
        width: 15%;
        z-index: 1;
    }
    & .prnt-parson{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 1500px;
        width: 55%;
        z-index: 2;
    }
}
.prnt-title{
    margin-bottom: clamp(60px, 8vw, 80px);
    text-align: center;
    & h3{
        font-size: clamp(32px, 4.2vw, 42px);
        font-weight: 600;
        line-height: 1.4em;
        margin-bottom: 10px;
    }
    & h4{
        font-size: clamp(20px, 2.4vw, 24px);
        font-weight: 700;
        line-height: 1.2em;
        color: #04A1EF;
        font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
    }
}
#parents-contents1{
    background-color: #EFFAFF;
    padding: clamp(60px, 12vw, 120px) 0;
    & .peace-conts .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    & .peace-conts .flx-box:not(:last-child){
        margin-bottom: clamp(70px, 10vw, 100px);
    }
    & .peace-conts .flx-box:nth-child(even){
        flex-direction: row-reverse;
    }
    & .peace-conts .flx-box .txt-blk{
        width: 52%;
    }
    & .peace-conts .flx-box .img-blk{
        width: 40%;
    }
    & .peace-conts .flx-box .txt-blk h5{
        font-size: clamp(28px, 3.6vw, 36px);
        font-weight: 600;
        line-height: 1.4em;
        margin-bottom: clamp(20px, 2.5vw, 25px);
        color: #04A1EF;
    }
    & .peace-conts .flx-box .txt-blk p{
        font-size: clamp(16px, 2vw, 20px);
        font-weight: 500;
        line-height: 2em;
    }
    & .peace-conts .flx-box .img-blk img{
        border: solid 3px #4781D1;
        border-radius: 20px;
    }
}
#parents-contents2{
    padding: clamp(60px, 12vw, 120px) 0;
    & .manage-list ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .manage-list ul li{
        width: calc(96% / 4);
        padding: 2% 1.5%;
        border: solid 2px #04A1EF;
        border-radius: 15px;
        margin-bottom: 1.5%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    & .manage-list ul li .txt-blk h6{
        font-size: clamp(26px, 3.2vw, 40px);
        text-align: center;
        line-height: 1.4em;
        font-weight: 300;
        color: #04A1EF;
        &.size1{
            font-size: clamp(32px, 4.2vw, 48px);
        }
        &.size2{
            font-size: clamp(16px, 2vw, 24px);
        }
        &.size3{
            font-size: clamp(20px, 2.8vw, 32px);
        }
    }
    & .manage-list .notes{
        font-size: clamp(13px, 1.3vw, 14px);
        text-align: right;
    }
    & .manage-list .mgn-b10{
        margin-bottom: clamp(5px, 1vw, 10px);
    }
}
#parents-contents3{
    padding: clamp(60px, 12vw, 120px) 0;
    background-color: #4781D1;
    & .prnt-title{
        & h3, h4{
            color: #fff;
        }
    }
    & .flx-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .flx-box .left{
        width: 55%;
    }
    & .flx-box .right{
        width: 40%;
    }
    & .flx-box p{
        font-size: clamp(16px, 2vw, 20px);
        font-weight: 500;
        line-height: 2em;
        color: #fff;
    }
    & .flx-box p:not(:last-child){
        margin-bottom: 25px;
    }
    & .flx-box figure img{
        border-radius: 20px;
    }
}
@media only screen and (max-width: 780px) {
    #parents-mv{
        & .title-box{
            & p{
                text-align: left;
            }
        }
        & .prnt-plane{
            bottom: 30%;
        }
    }
    #parents-contents1{
        & .peace-conts .flx-box, .peace-conts .flx-box:nth-child(even){
            flex-direction: column-reverse;
        }
        & .peace-conts .flx-box .txt-blk{
            width: 100%;
        }
        & .peace-conts .flx-box .img-blk{
            width: 100%;
            margin-bottom: 25px;
        }
        & .peace-conts .flx-box .img-blk img{
            border-radius: 15px;
        }
    }
    #parents-contents2{
        & .manage-list ul li{
            width: 49.25%;
        }
    }
    #parents-contents3{
        & .flx-box{
            flex-direction: column-reverse;
        }
        & .flx-box .left{
            width: 100%;
        }
        & .flx-box .right{
            width: 100%;
            margin-bottom: 25px;
        }
        & .flx-box figure img{
            border-radius: 15px;
        }
    }
}
@media only screen and (max-width: 500px) {
    #parents-mv{
        & .prnt-plane{
            bottom: 24%;
        }
    }
}
@media only screen and (min-width: 1600px) {
    #parents-mv{
        & .prnt-plane{
            bottom: 45%;
        }
    }
}

.js-flight {
    opacity: 0;
    transform: translate(-10vw, 50px);
}
.js-flight.is-active {
    animation: flyAcross 3s ease-in-out forwards;
}
@keyframes flyAcross {
    0% {
        opacity: 0;
        transform: translate(-10vw, 50px);
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(100vw, -100px);
    }
}
@media only screen and (min-width: 1200px) {
    @keyframes flyAcross {
    0% {
        opacity: 0;
        transform: translate(-10vw, 50px);
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(100vw, -170px);
    }
}
}
@media only screen and (min-width: 1600px) {
    @keyframes flyAcross {
    0% {
        opacity: 0;
        transform: translate(-10vw, 50px);
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(100vw, -250px);
    }
}
}
/*+++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++++
採用ページ
+++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++++++*/
#recruit-mv {
    font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
    max-width: 1200px;
    width: 90%;
    margin: auto;
    padding: 80px 0 20px;
    & .main-flx {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }
    & .main-txt {
        width: 32%;
        & .catchphrase {
            position: relative;
            & figure.txt1 {
                width: 110%;
            }
            & figure.txt2 {
                position: absolute;
                top: 35%;
                left: 1%;
                width: 35%;
            }
        }
    }
    & .main-map {
        width: 68%;
        position: relative;
        & .mapicon {
            position: absolute;
            max-width: 35px;
            width: 4.4%;
            cursor: pointer;
            z-index: 10;
            & img{
                transition: all .2s;
                filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.15));
                animation: pulse 2s ease-in-out infinite;
            }
            & img:hover{
                scale: 1.25 !important;
                animation-play-state: paused;
                filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
            }
            &.pin1 {
                top: 9.5%;
                left: 14%;
                z-index: 3;
            }
            &.pin2 {
                top: 11%;
                left: 73%;
                z-index: 6;
            }
            &.pin3 {
                top: 33%;
                left: 31%;
                z-index: 2;
            }
            &.pin4 {
                top: 49%;
                left: 19%;
                z-index: 5;
            }
            &.pin5 {
                top: 50%;
                left: 43%;
                z-index: 7;
            }
            &.pin6 {
                top: 59%;
                left: 65.5%;
                z-index: 8;
            }
            &.pin7 {
                top: 56.5%;
                left: 90%;
                z-index: 4;
            }
            &.pin8 {
                top: 80%;
                left: 36%;
                z-index: 9;
            }
            & .balloon {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%) translateY(10px);
                width: max-content;
                min-width: 120px;
                padding: 10px 14px;
                background-color: #FFFFFF;
                border: 1px solid #003670;
                border-radius: 4px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                text-align: center;
                font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
                pointer-events: none;
                & .balloon_title {
                    color: #003670;
                    font-size: 13px;
                    font-weight: 700;
                    margin-bottom: 4px;
                    line-height: 1.4;
                }
                & .balloon_text {
                    color: #003670;
                    font-size: 11px;
                    font-weight: 500;
                    line-height: 1.5;
                    white-space: nowrap;
                }
                &::before {
                    content: "";
                    position: absolute;
                    bottom: -8px;
                    left: 50%;
                    transform: translateX(-50%);
                    border-style: solid;
                    border-width: 8px 6px 0 6px;
                    border-color: #003670 transparent transparent transparent;
                }
                &::after {
                    content: "";
                    position: absolute;
                    bottom: -7px;
                    left: 50%;
                    transform: translateX(-50%);
                    border-style: solid;
                    border-width: 7px 5px 0 5px;
                    border-color: #FFFFFF transparent transparent transparent;
                }
            }
            &.is-active {
                & .balloon {
                    opacity: 1;
                    visibility: visible;
                    transform: translateX(-50%) translateY(0);
                    pointer-events: auto;
                }
            }
        }
    }
    & .moveimg{
        opacity: 0;
        transition: opacity .3s ease-in-out;
    }
    & .moveimg.active {
        opacity: 1;
    }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.moveimg.active #cursivemask{
    stroke-dasharray: 2000px;
      animation: handwriting 3.5s linear;
      /* animation-delay: 1.4s; */
}
@keyframes handwriting {
  0% {
    stroke-dashoffset: 2000px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@media only screen and (max-width: 780px) {
    #recruit-mv {
        width: 100%;
        padding: 80px 0 30px;
        & .main-flx {
            flex-wrap: wrap;
            flex-direction: column-reverse;
        }
        & .main-txt {
            width: 90%;
            margin: 15px auto 0;
            & .catchphrase {
                & figure.txt1 {
                    width: 100%;
                }
                & figure.txt2 {
                    position: absolute;
                    top: 36%;
                    left: 1%;
                    width: 30%;
                }
            }
        }
        & .main-map {
            width: 100%;
            & .mapicon {
                max-width: 100px;
                width: 8%;
                &.pin1 {
                    top: 15%;
                    left: 62%;
                }
                &.pin2 {
                    top: 45%;
                    left: 66%;
                }
                &.pin3 {
                    top: 3%;
                    left: 5%;
                }
                &.pin4 {
                    top: 67%;
                    left: 31.5%;
                }
                &.pin5 {
                    top: 76%;
                    left: 36.5%;
                }
                &.pin6 {
                    top: 34%;
                    left: 8%;
                }
                &.pin7 {
                    top: 33%;
                    left: 41%;
                }
                &.pin8 {
                    top: 80%;
                    left: 68%;
                }
            }
            & .balloon.right {
                bottom: auto;
                top: 0;
                left: calc(100% + 35px);
                right: 0;
                transform: translateY(0) translateX(-60%);
                &::before {
                    bottom: auto;
                    left: -8px;
                    top: 50%;
                    transform: translateY(-50%);
                    border-width: 6px 8px 6px 0;
                    border-color: transparent #003670 transparent transparent;
                }
                &::after {
                    bottom: auto;
                    left: -7px;
                    top: 50%;
                    transform: translateY(-50%);
                    border-width: 5px 7px 5px 0;
                    border-color: transparent #FFFFFF transparent transparent;
                }
            }
            &.is-active {
                & .balloon.right{
                    transform: translateY(0) translateX(0);
                }
            }
        }
    }
}
/*+++++++++++++++++++++++++++++++++++++
採用 フローティング
+++++++++++++++++++++++++++++++++++++*/
.float-link{
    font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN";
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 50;
    transform: translateY(-50%);
    & .flt-box{
        background-color: #003670;
        border-radius: 8px 0 0 8px;
        writing-mode: vertical-rl;
        min-height: 140px;
        &.clr1{
            background-color: #0177E6;
        }
        &.clr2{
            background-color: #00C2CB;
        }
    }
    & .flt-box:not(:last-child){
        margin-bottom: 2px;
    }
    & .flt-box .inr{
        padding: 30px 10px;
    }
    & .flt-box .inr p{
        font-size: clamp(13px, 1.4vw, 14px);
        color: #fff;
        line-height: 1.3em;
        text-align: center;
        letter-spacing: 0.1em;
    }
}
@media only screen and (max-width: 780px) {
    .float-link{
        display: none;
    }
}

/*+++++++++++++++++++++++++++++++++++++
採用 メッセージ
+++++++++++++++++++++++++++++++++++++*/
#recruit-contents1{
    background-image: url(../images/recruit/message_bg.jpg);
    background-position: top left;
    background-repeat: repeat;
    background-size: 200px;
    padding: clamp(60px, 15vw, 150px) 0 0;
    & .message{
        padding-bottom: clamp(60px, 15vw, 150px);
    }
    & .message .midashi-en{
        font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        font-size: clamp(32px, 3.6vw, 36px);
        font-weight: 700;
        text-align: center;
        margin-bottom: clamp(30px, 4.5vw, 45px);
        color: #04A1EF;
        line-height: 1.4em;
    }
    & .message h4{
        font-size: clamp(36px, 4.2vw, 42px);
        font-weight: 500;
        text-align: center;
        margin-bottom: clamp(25px, 4vw, 40px);
        line-height: 1.5em;
    }
    & .message p{
        font-size: 16px;
        line-height: 2.5em;
        text-align: center;
    }
    & .product h5{
        font-size: clamp(28px, 3.2vw, 32px);
        font-weight: 500;
        text-align: center;
        margin-bottom: clamp(15px, 2vw, 20px);
        line-height: 1.5em;
    }
    & .product p{
        font-size: 16px;
        line-height: 1.7em;
        text-align: center;
        margin-bottom: clamp(70px, 10vw, 100px);
    }
    & .productgroup {
        position: relative;
        height: 2000px;
        margin-bottom: -400px;

        & figure {
            max-width: 850px;
            width: 92%;
            margin: auto;
            position: sticky;
            top: 50%;
            transform: translateY(-50%);
            overflow: hidden;
            z-index: 5;

            & .clip-bg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #B2E4F9;
                z-index: 1;
                clip-path: circle(var(--clip-bg, 0%) at 50% 50%);
                pointer-events: none;
            }

            & img {
                width: 100%;
                height: auto;
                position: relative;
                z-index: 2;
                clip-path: circle(var(--clip-img, 0%) at 50% 50%);
            }
        }
    }
}
@media only screen and (max-width: 1000px) {
    #recruit-contents1 {
        & .productgroup {
            height: 1800px;
            margin-bottom: -340px;
        }
    }
    #news {
        & .new-conts .left {
            width: 250px;
        }

        & .new-conts .right {
            width: calc(100% - 260px);
        }
    }
}
@media only screen and (max-width: 780px) {
    #recruit-contents1 {
        & .message p {
            line-height: 2.2em;
            text-align: left;
        }

        & .productgroup {
            height: 2300px;
            margin-bottom: -550px;

            & figure {
                width: 100%;
            }
        }
    }
}
@media only screen and (max-width: 650px) {
    #recruit-contents1 {
        & .productgroup {
            height: 2200px;
            margin-bottom: -450px;
        }
    }
}
@media only screen and (max-width: 500px) {
    #recruit-contents1 {
        & .productgroup {
            height: 2100px;
            margin-bottom: -330px;
        }
    }
    #news {
        & .category-list {
            justify-content: flex-start;
            gap: 10px 0;
        }

        & .category-item {
            width: 50%;
        }

        & .news-link {
            align-items: flex-start;
        }

        & .news-img-wrap {
            width: 105px;
        }

        & .news-meta {
            flex-direction: column;
        }

        & .news-categories {
            gap: 5px;
        }

        & .news-category {
            padding: 4px 10px;
        }
    }
    .news-exclusive {
        & .category-list {
            justify-content: flex-start;
            gap: 10px 0;
        }

        & .category-item {
            width: 50%;
        }

        & .news-link {
            align-items: flex-start;
        }

        & .news-img-wrap {
            width: 105px;
        }

        & .news-meta {
            flex-direction: column;
        }

        & .news-categories {
            gap: 5px;
        }

        & .news-category {
            padding: 4px 10px;
        }
    }
    .wp-pagenavi {
        gap: 24px;

        & a,
        & span {
            font-size: 16px;
        }
    }
}

/*+++++++++++++++++++++++++++++++++++++
採用 冨士工業ってどんな会社？
+++++++++++++++++++++++++++++++++++++*/
#recruit-contents2 {
    background-image: url(../images/recruit/message_bg.jpg);
    background-position: top left;
    background-repeat: repeat;
    background-size: 200px;
    padding: 0 0 clamp(50px, 12vw, 120px);
    & .data-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: clamp(30px, 5vw, 50px);
        & .data-title {
            & .en {
                font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN";
                display: block;
                font-size: 20px;
                font-weight: 700;
                line-height: 1.3em;
                color: #4781D1;
                margin-bottom: 5px;
            }
            & h2 {
                font-size: clamp(36px, 4.8vw, 48px);
                font-weight: 600;
                line-height: 1.5em;
            }
        }
        & .date {
            font-size: 14px;
        }
    }
    & .data-box ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    & .data-box ul li{
        width: 49%;
        background-color: #fff;
        padding: clamp(20px, 4vw, 40px) clamp(15px, 3vw, 45px);
        margin-bottom: 2%;
    }
    & .data-box ul li.era{
        width: 100%;
    }
    & .data-box .dt-ttl{
        font-size: clamp(22px, 3vw, 32px);
        text-align: center;
        font-weight: 600;
        margin-bottom: 20px;
        line-height: 1.4em;
    }
    & .data-box .number1, .data-box .number2, .data-box .number3, .data-box .number4, .data-box .number5{
        font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN";
        font-size: clamp(58px, 7.4vw, 98px);
        text-align: center;
        font-weight: 700;
        line-height: 1.3em;
    }
    & .data-box .number1 small, .data-box .number2 small{
        font-size: .3em;
    }
    & .data-box .number3 small{
        font-size: .4em;
        line-height: 1.5em;
    }
    & .data-box .number3 strong{
        font-size: .28em;
        font-weight: 600;
        line-height: 1.5em;
        margin-right: 0.4em;
    }
    & .data-box .number4 small{
        font-size: .5em;
    }
    & .data-box .number5 small{
        font-size: .5em;
    }
    & .data-box .number2{
        font-size: clamp(52px, 6.4vw, 84px);
    }
    & .data-box .number3{
        font-size: clamp(70px, 8vw, 104px);
        line-height: 1em;
    }
    & .data-box .number4{
        font-size: clamp(28px, 3.2vw, 42px);
    }
    & .data-box .number5{
        font-size: clamp(18px, 2.2vw, 32px);
    }
    & .data-box .clr_a{
        color: #4FB7E6;
    }
    & .data-box .clr_b{
        color: #00C2CB;
    }
    & .data-box .clr_c{
        color: #77D0E8;
    }
    & .data-box .clr_d{
        color: #88C1E9;
    }
    & .data-box .ratio{
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 10%;
    }
    & .data-box .ratio .dots{
        width: clamp(5px, 1.2vw, 10px);
    }
    & .wariai .period{
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        max-width: 380px;
        width: 70%;
        margin: auto auto 15px;
        gap: 2%;
        & .per-left, .per-right{
            width: 40%;
            text-align: right;
        }
        & .per-center{
            width: 20%;
        }
        & .per-center figure{
            width: 70%;
            margin: auto;
        }
        & .number2{
            text-align: right;
        }
    }
    & .graph{
        position: relative;
        & .g-abs1{
            position: absolute;
            top: 50%;
            left: 60%;
        }
        & .g-abs2{
            position: absolute;
            top: 40%;
            left: 10%;
        }
        & .g-abs3{
            position: absolute;
            top: 5%;
            left: 45%;
        }
        & .g-txt{
            font-family: "Plus Jakarta Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN";
            font-size: clamp(32px, 5vw, 60px);
            text-align: center;
            font-weight: 700;
            line-height: 1.3em;
            color: #fff;
        }
        & .g-txt small{
            font-size: .45em;
        }
    }
    & .holiday .plus{
        max-width: 40px;
        width: 35%;
        margin: 10px auto;
    }
    & .holiday .txt-flx{
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: end;
    }
    & .continuous .bar1{
        width: 100%;
        max-height: 32px;
        height: 3.2vw;
        min-height: 16px;
        background-color: #4FB7E6;
    }
    & .continuous .bar2{
        width: 100%;
        max-height: 84px;
        height: 8.4vw;
        min-height: 42px;
        background-color: #77D0E8;
    }
    & .continuous .bar3{
        width: 100%;
        max-height: 88px;
        height: 8.8vw;
        min-height: 44px;
        background-color: #00C2CB;
    }
    & .continuous .bar4{
        width: 100%;
        max-height: 196px;
        height: 19.6vw;
        min-height: 98px;
        background-color: #88C1E9;
    }
    & .continuous .bar1, .continuous .bar2, .continuous .bar3, .continuous .bar4{
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
    }
    & .continuous .bar1.is-active, .continuous .bar2.is-active, .continuous .bar3.is-active, .continuous .bar4.is-active{
        transform: scaleY(1);
    }
    & .dt-flx1{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        & .clm-left{
            width: 21%;
        }
        & .clm-center{
            width: 47%;
        }
        & .clm-right{
            width: 26%;
        }
        & .clm-left figure, .clm-right figure{
            width: 80%;
            margin: auto;
        }
    }
    & .dt-flx2{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        & .clm-left{
            width: 54%;
        }
        & .clm-right{
            width: 40%;
        }
    }
    & .dt-flx3{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        & .clm-left{
            width: 54%;
        }
        & .clm-right{
            width: 40%;
        }
    }
    & .dt-flx4{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: end;
        & .clm{
            width: 24%;
        }
    }
}





@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.pie-chart {
  width: clamp(100px, 30vw, 420px);
  height: clamp(100px, 30vw, 420px);
  border-radius: 50%;
  background: conic-gradient(
    #41BBE5 0deg 25deg,
    #77D0E8 25deg 198deg,
    #A0E0EF 198deg 360deg
  );
  -webkit-mask: conic-gradient(#000 var(--angle), transparent var(--angle));
  mask: conic-gradient(#000 var(--angle), transparent var(--angle));
}
.pie-chart.is-active {
  animation: drawChart 1s ease-out forwards;
}
/* 角度を0度から360度まで変化させるアニメーション */
@keyframes drawChart {
  to {
    --angle: 360deg;
  }
}
@media only screen and (max-width: 780px) {
    .pie-chart {
        width: clamp(100px, 82vw, 700px);
        height: clamp(100px, 82vw, 700px);
    }
}


@media only screen and (max-width: 780px) {
    #recruit-contents2 {
        & .data-header {
            display: block;
            text-align: center;
            & .data-title {
                margin-bottom: 10px;
            }
        }
        & .data-box ul li{
            width: 100%;
        }
        & .data-box .number1, .data-box .number2, .data-box .number3, .data-box .number4, .data-box .number5{
            font-size: clamp(58px, 20vw, 98px);
        }
        & .data-box .number2{
            font-size: clamp(35px, 14.5vw, 84px);
        }
        & .data-box .number3{
            font-size: clamp(70px, 22vw, 104px);
            line-height: 1em;
        }
        & .data-box .number4{
            font-size: clamp(28px, 7vw, 42px);
        }
        & .data-box .number5{
            font-size: clamp(18px, 4.5vw, 32px);
        }
        & .data-box .ratio .dots{
            width: clamp(5px, 1.7vw, 10px);
        }
        & .age figure{
            max-width: 220px;
            width: 80%;
            margin: 5px auto auto;
        }
        & .wariai .period{
            max-width: 400px;
            width: 90%;
            gap: 1.5%;
        }
        & .graph{
            & .g-txt{
                font-size: clamp(32px, 10vw, 60px);
            }
        }
        & .dt-flx2{
            flex-wrap: wrap;
            & .clm-left{
                width: 100%;
            }
            & .clm-right{
                width: 100%;
            }
        }
        & .dt-flx3{
            flex-wrap: wrap;
            & .clm-left{
                width: 100%;
            }
            & .clm-right{
                width: 100%;
            }
        }
    }
}
/*+++++++++++++++++++++++++++++++++++++
採用 仕事を知る
+++++++++++++++++++++++++++++++++++++*/
#recruit-contents3 {
    background-color: #F4F8FD;
    background-image: url(../images/recruit/work_bg.png);
    background-position: left top;
    background-size: 111px;
    padding: clamp(60px, 18vw, 180px) 0;
    & .work-container {
        display: flex;
        gap: clamp(30px, 5vw, 60px);
        align-items: flex-start;
    }
    & .work-title {
        display: flex;
        gap: 5px;
        flex-shrink: 0;
        writing-mode: vertical-rl;
        & .en {
            font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
            font-size: clamp(20px, 2.4vw, 24px);
            font-weight: 700;
            color: #04A1EF;
        }
        & h2 {
            font-size: clamp(36px, 4.8vw, 48px);
            font-weight: 600;
            line-height: 1.5em;
        }
    }
    & .work-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(15px, 2vw, 25px);
        flex-grow: 1;
        & .work-card {
            background-color: #FFFFFF;
            border: 1px solid #12AFFE;
            border-radius: 8px;
            padding: clamp(20px, 3vw, 35px);
            display: flex;
            align-items: center;
            gap: clamp(15px, 2.5vw, 25px);
            box-sizing: border-box;
            & .card-img {
                margin: 0;
                width: clamp(100px, 12vw, 150px);
                flex-shrink: 0;
                & img {
                    width: 100%;
                    height: auto;
                    display: block;
                }
            }
            & .card-body {
                flex-grow: 1;
                & h3 {
                    font-size: clamp(22px, 2.4vw, 24px);
                    font-weight: 500;
                    color: #04A1EF;
                    margin-bottom: clamp(15px, 2.4vw, 24px);
                    line-height: 1.2em;
                }
                & p {
                    font-size: 16px;
                    line-height: 1.7em;
                }
            }
        }
    }
    & .interview-container {
        font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック", "Meiryo", sans-serif;
        margin-top: clamp(80px, 15vw, 150px);
        width: 100%;
        & .interview-header {
            max-width: 1200px;
                width: 92%;
                margin: auto auto clamp(40px, 8vw, 80px);
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 30px;
            & .interview-title {
                gap: 5px;
                & .en {
                    font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
                    font-size: clamp(20px, 2.4vw, 24px);
                    font-weight: 700;
                    color: #04A1EF;
                }
                & h2 {
                    font-size: clamp(36px, 4.8vw, 48px);
                    font-weight: 600;
                    line-height: 1.5em;
                }
            }
            & .lead {
                font-size: 18px;
                line-height: 1.8em;
                max-width: 450px;
                font-weight: 500;
            }
        }
        & .interview-carousel-area {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding-bottom: 20px;
            & .interview-swiper {
                width: 100%;
                overflow: visible;
                padding: 40px 0;
                & .swiper-slide {
                    width: 320px;
                    /* transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); */
                    will-change: transform;
                    &.swiper-slide-active {
                        z-index: 5;
                    }
                    & .slide-card {
                        position: relative;
                        width: 100%;
                        height: 420px;
                        border-radius: 6px;
                        overflow: hidden;
                        & .slide-img {
                            margin: 0;
                            width: 100%;
                            height: 100%;
                            & img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                display: block;
                            }
                        }

                        & .tag {
                            position: absolute;
                            top: 12px;
                            left: 12px;
                            background-color: #4781D1;
                            color: #FFFFFF;
                            font-size: 14px;
                            font-weight: 500;
                            padding: 6px 10px;
                            border-radius: 3px;
                            line-height: 1.2em;
                            z-index: 2;
                            &.clr1{
                                background-color: #00C2CB;
                            }
                            &.clr2{
                                background-color: #DFCB69;
                            }
                        }
                        & .profile-box {
                            position: absolute;
                            bottom: 12px;
                            left: 12px;
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            color: #FFFFFF;
                            z-index: 2;
                            & .name {
                                font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
                                font-size: 32px;
                                font-weight: 400;
                                letter-spacing: 0.01em;
                                line-height: 1em;
                            }
                            & .divider {
                                width: 1px;
                                height: 20px;
                                background-color: #FFFFFF;
                            }
                            & .year {
                                font-size: 14px;
                                font-weight: 500;
                                line-height: 1em;
                            }
                        }
                        & .btn-popup-open {
                            position: absolute;
                            bottom: 12px;
                            right: 12px;
                            width: 50px;
                            height: 30px;
                            border-radius: 50%;
                            background-color: #FFFFFF;
                            border: none;
                            cursor: pointer;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            z-index: 3;
                            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
                            transition: transform 0.3s;
                            &::before,
                            &::after {
                                content: "";
                                position: absolute;
                                background-color: #000000;
                            }
                            &::before {
                                width: 14px;
                                height: 2px;
                            }
                            &::after {
                                width: 2px;
                                height: 14px;
                            }
                            &:hover {
                                transform: scale(1.1);
                            }
                        }
                    }
                }
            }
            & .comment-balloon {
                position: relative;
                background-color: #FFFFFF;
                border: 1px solid #00C2CB;
                border-radius: 8px;
                padding: clamp(15px, 2.5vw, 25px);
                max-width: 450px;
                width: 90%;
                margin: 30px auto;
                box-sizing: border-box;
                &::before {
                    content: "";
                    position: absolute;
                    top: -10px;
                    left: 50%;
                    transform: translateX(-50%);
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid #00C2CB;
                }
                &::after {
                    content: "";
                    position: absolute;
                    top: -8px;
                    left: 50%;
                    transform: translateX(-50%);
                    border-left: 9px solid transparent;
                    border-right: 9px solid transparent;
                    border-bottom: 9px solid #FFFFFF;
                }
                & p {
                    font-size: 16px;
                    font-weight: 700;
                    color: #00C2CB;
                    text-align: center;
                    margin: 0;
                    line-height: 1.5em;
                }
            }
            & .carousel-navigation {
                display: flex;
                align-items: center;
                justify-content: center;
                max-width: 280px;
                width: 100%;
                margin: 20px auto auto;
                & .nav-btn {
                    width: 80px;
                    height: 35px;
                    background-color: #003670;
                    border-radius: 50%;
                    border: none;
                    cursor: pointer;
                    color: #FFFFFF;
                    position: relative;
                    transition: background-color 0.3s;
                    &:hover {
                        background-color: #04A1EF;
                    }
                    &::before {
                        content: "";
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 14px;
                        height: 2px;
                        background-color: currentColor;
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 0;
                        height: 0;
                    }
                    &.prev-btn {
                        &::before {
                            left: 20px;
                        }
                        &::after {
                            left: 17px;
                            border-top: 5px solid transparent;
                            border-bottom: 5px solid transparent;
                            border-right: 7px solid currentColor;
                        }
                    }
                    &.next-btn {
                        &::before {
                            right: 20px;
                        }
                        &::after {
                            right: 17px;
                            border-top: 5px solid transparent;
                            border-bottom: 5px solid transparent;
                            border-left: 7px solid currentColor;
                        }
                    }

                }
                & .swiper-dots {
                    gap: 8px;
                    text-align: center;
                    & .swiper-pagination-bullet {
                        width: 8px;
                        height: 8px;
                        background-color: #D9D9D9;
                        border-radius: 50%;
                        opacity: 1;
                        cursor: pointer;
                        transition: background-color 0.3s, width 0.3s, border-radius 0.3s;

                        &.swiper-pagination-bullet-active {
                            background-color: #00C2CB;
                            width: 24px;
                            border-radius: 4px;
                        }
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 780px) {
    #recruit-contents3 {
        & .work-container {
            display: block;
        }
        & .work-title {
            display: block;
            text-align: center;
            margin-bottom: 35px;
            writing-mode: horizontal-tb;
        }
        & .work-grid {
            grid-template-columns: 1fr;
            & .work-card {
                flex-direction: column;
                align-items: flex-start;
                text-align: left;
                padding: 30px 20px;
                & .card-img {
                    width: 120px;
                    margin: 0 auto 15px auto;
                }
            }
        }
        & .card-body {
            & h3 {
                text-align: center;
            }
        }
        & .interview-container {
            & .interview-header {
                display: block;
                gap: 15px;
                & .interview-title {
                    text-align: center;
                    margin-bottom: 25px;
                }
                & .lead {
                    max-width: 100%;
                }
            }
        }
    }
}

/*-----採用ポップアップ-----*/
.popup-interview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans JP", sans-serif;

    &.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    & .popup-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(43, 54, 65, 0.7);
    }

    & .popup-modal {
        position: relative;
        width: 92%;
        max-width: 1100px;
        height: 85vh;
        background-color: #FFFFFF;
        overflow: hidden;
        display: flex;
        z-index: 10;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);

        & .popup-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-color: #FFFFFF;
            border-radius: 50%;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2B3641;
            z-index: 12;
            transition: color 0.3s, background-color 0.3s, transform 0.3s;

            &::before,
            &::after {
                content: "";
                position: absolute;
                width: 16px;
                height: 2px;
                background-color: currentColor;
            }

            &::before {
                transform: rotate(45deg);
            }

            &::after {
                transform: rotate(-45deg);
            }

            &:hover {
                color: #FFFFFF;
                background-color: #04A1EF;
                transform: rotate(90deg);
            }
        }

        & .popup-left {
            position: relative;
            width: 30%;
            height: 100%;
            flex-shrink: 0;
            overflow: hidden;

            & .popup-slider {
                position: relative;
                width: 100%;
                height: 100%;

                & img {
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                    opacity: 0;
                    transition: opacity 1s ease;
                    pointer-events: none;

                    &.is-active {
                        opacity: 1;
                        z-index: 1;
                    }
                }
            }

            & .popup-dots {
                position: absolute;
                left: 50%;
                bottom: 20px;
                z-index: 10;
                display: flex;
                gap: 10px;
                transform: translateX(-50%);

                & button {
                    width: 10px;
                    height: 10px;
                    padding: 0;
                    border: 1px solid #fff;
                    border-radius: 50%;
                    background-color: #fff;
                    cursor: pointer;
                    transition:
                    background-color 0.3s ease,
                    transform 0.3s ease;

                    &.is-active {
                        background-color: #04A1EF;
                        transform: scale(1.2);
                    }
                }
            }
        }

        & .popup-right {
            width: 70%;
            height: 100%;
            padding: clamp(40px, 5vw, 60px) clamp(30px, 4vw, 50px);
            box-sizing: border-box;
            overflow-y: auto;
            position: relative;
            & .popup-meta {
                display: flex;
                align-items: center;
                gap: 15px;
                margin-bottom: 20px;
                & .popup-tag {
                    color: #FFFFFF;
                    font-size: 14px;
                    font-weight: 500;
                    padding: 6px 12px;
                    border-radius: 3px;
                    line-height: 1.2em;
                    background-color: #4781D1;
                }
                & .popup-year {
                    font-size: 14px;
                    font-weight: 500;
                }
            }
            &.clr1 .popup-tag {
                background-color: #00C2CB;
            }
            &.clr2 .popup-tag {
                background-color: #DFCB69;
            }
            & .popup-name {
                font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
                font-size: 32px;
                font-weight: 500;
                color: #4781D1;
                margin-bottom: 15px;
                line-height: 1.1em;
            }
            &.clr1 .popup-name{
                color: #00C2CB;
            }
            &.clr2 .popup-name{
                color: #DFCB69;
            }

            & .popup-copy {
                font-size: 24px;
                font-weight: 500;
                color: #4781D1;
                margin-bottom: 40px;
                line-height: 1.4em;
            }
            &.clr1 .popup-copy{
                color: #00C2CB;
            }
            &.clr2 .popup-copy{
                color: #DFCB69;
            }
            & .popup-section {
                & h4 {
                    font-size: 16px;
                    font-weight: 500;
                    color: #4781D1;
                    margin-bottom: 10px;
                    line-height: 1.4em;
                }
                & p {
                    font-size: 16px;
                    line-height: 1.8em;
                    font-weight: 500;
                    margin: 0;
                }
                & .popup-divider {
                    height: 1px;
                    background-color: #F0F1F3;
                    margin: 30px 0;
                }
                &:last-child {
                    & .popup-divider {
                        display: none;
                    }
                }
            }
            &.clr1 h4{
                color: #00C2CB;
            }
            &.clr2 h4{
                color: #DFCB69;
            }
        }
    }
}
@media only screen and (max-width: 780px) {
    .popup-interview-modal {
        & .popup-modal {
            flex-direction: column;
            height: auto;
            max-height: 90vh;
            overflow-y: auto;

            & .popup-close {
                position: fixed;
                top: calc(5vh + 15px);
                right: calc(4% + 25px);
                width: 35px;
                height: 35px;
                z-index: 2000;
            }

            & .popup-left {
                width: 100%;
                height: 75vh;
                flex-shrink: 0;
            }

            & .popup-right {
                width: 100%;
                height: auto;
                overflow-y: visible;
                padding: 30px 20px;
            }
        }
    }
}



.swipe-guide {
    position: absolute;
    top: 40%;
    left: 50%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
}
.swipe-guide.is-active {
    visibility: visible;
    animation: swipeGuideFade 3s ease forwards;
}
.swipe-guide-hand {
    width: 85px;
    height: 85px;
    color: #fff;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
    animation: swipeHandMove 1.5s ease-in-out infinite;
}
.swipe-guide-text {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
@keyframes swipeHandMove {
    0% {
        transform: translateX(20px);
    }
    50% {
        transform: translateX(-20px);
    }
    100% {
        transform: translateX(20px);
    }
}

@keyframes swipeGuideFade {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
/*+++++++++++++++++++++++++++++++++++++
採用 福利厚生
+++++++++++++++++++++++++++++++++++++*/
#recruit-contents4 {
    padding: clamp(60px, 12vw, 120px) 0;
    & .benefits-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 30px;
        margin-bottom: clamp(40px, 8vw, 80px);

        & .benefits-title {
            display: flex;
            flex-direction: column;
            gap: 5px;
            flex-shrink: 0;

            & .en {
                font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
                font-size: clamp(20px, 2.4vw, 24px);
                font-weight: 700;
                color: #04A1EF;
                line-height: 1em;
            }

            & h2 {
                font-size: clamp(36px, 4.8vw, 48px);
                font-weight: 600;
                line-height: 1.5em;
            }
        }

        & .lead {
            font-size: 18px;
            line-height: 1.8em;
            max-width: 450px;
            font-weight: 500;
        }
    }

    & .benefits-grid {
        display: flex;
        flex-wrap: wrap;
        gap: clamp(20px, 3vw, 30px) 24px;
        width: 100%;

        & .benefit-card {
            width: calc(33.333% - 16px);
            background-color: #FFFFFF;
            border: 1px solid #F0F1F3;
            border-radius: 15px;
            padding: clamp(20px, 2.8vw, 30px) clamp(15px, 2.5vw, 25px);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;

            & h3 {
                font-size: clamp(20px, 2.2vw, 24px);
                line-height: 1.5em;
                margin-bottom: 15px;
                text-align: center;
            }

            & .desc {
                font-size: clamp(14px, 1.6vw, 16px);
                line-height: 1.6em;
                margin: 0;
            }

            &.has-img {
                & .card-img {
                    margin: 0 0 20px 0;
                    width: 100%;
                    border-radius: 6px;
                    & img{
                        border-radius: 8px;
                    }
                }

                & .sub-txt {
                    font-size: 14px;
                    margin-bottom: 8px;
                    line-height: 1.2em;
                    text-align: center;
                }
            }

            &.has-icon {
                & .card-icon {
                    margin: 0 0 25px 0;
                    height: 80px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    & img {
                        height: 100%;
                        width: auto;
                        display: block;
                    }
                }
            }
        }
    }
    .other{
        padding: clamp(100px, 18vw, 180px) 0 clamp(20px, 6vw, 60px);
        & .flx-box{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        & .flx-box:first-child{
            margin-bottom: clamp(60px, 18vw, 165px);
        }
        & .flx-box .imgblk{
            width: 58%;
        }
        & .flx-box .txtblk{
            width: 35%;
        }
        & .flx-box .imgblk img{
            border-radius: 1.2em;
        }
        & .flx-box .txtblk h5{
            font-size: clamp(28px, 3.2vw, 32px);
            line-height: 1.6em;
            font-weight: 500;
            margin-bottom: clamp(15px, 3.5vw, 35px);
        }
        & .flx-box .txtblk p{
            font-size: 16px;
            line-height: 1.8em;
            margin-bottom: clamp(15px, 3.5vw, 35px);
        }
    }
}
@media only screen and (max-width: 780px) {
    #recruit-contents4 {
        & .benefits-header {
            display: block;
            & .benefits-title {
                text-align: center;
                margin-bottom: 25px;
            }
        }

        & .benefits-grid {
            & .benefit-card {
                width: 100%;
                padding: 30px 20px;
            }
        }
        .other{
            & .flx-box .imgblk{
                width: 100%;
                margin-bottom: 18px;
            }
            & .flx-box .txtblk{
                width: 100%;
            }
            & .flx-box .txtblk h5{
                text-align: center;
            }
        }
    }
}
/*+++++++++++++++++++++++++++++++++++++
採用 ステップアップ
+++++++++++++++++++++++++++++++++++++*/
#recruit-contents5{
    padding: 0 0 clamp(60px, 12vw, 120px);
    & .stepup-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 30px;
        margin-bottom: clamp(40px, 8vw, 80px);
        & .stepup-title {
            display: flex;
            flex-direction: column;
            gap: 5px;
            flex-shrink: 0;
            & .en {
                font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
                font-size: clamp(20px, 2.4vw, 24px);
                font-weight: 700;
                color: #04A1EF;
                line-height: 1em;
            }
            & h2 {
                font-size: clamp(36px, 4.8vw, 48px);
                font-weight: 600;
                line-height: 1.5em;
            }
        }
        & .lead {
            font-size: 18px;
            line-height: 1.8em;
            max-width: 450px;
            font-weight: 500;
        }
    }
    & .stepimg figure{
        width: 100%;
    }
}
@media only screen and (max-width: 780px) {
    #recruit-contents5{
        & .stepup-header {
           display: block;
            & .stepup-title{
                text-align: center;
                margin-bottom: 25px;
            }
        }
        & .stepimg .sp-scroll{
            overflow-x: scroll;
            padding-bottom: 5px;
        }
        & .stepimg figure{
            width: 1200px;
        }
    }
}
/*+++++++++++++++++++++++++++++++++++++
採用 よくある質問
+++++++++++++++++++++++++++++++++++++*/
#recruit-contents6 {
    background-color: #EFFAFF;
    padding: clamp(60px, 12vw, 120px) 0;
    & .wrapper {
        max-width: 1000px;
        width: 92%;
        margin: 0 auto;
    }
    & .faq-header {
        margin-bottom: clamp(40px, 6vw, 60px);
        & .faq-title {
            display: flex;
            flex-direction: column;
            gap: 5px;
            & .en {
                font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
                font-size: clamp(20px, 2.4vw, 24px);
                font-weight: 700;
                color: #04A1EF;
                line-height: 1em;
            }
            & h2 {
                font-size: clamp(36px, 4.8vw, 48px);
                font-weight: 600;
                line-height: 1.5em;
            }
        }
    }
    & .faq-list {
        display: flex;
        flex-direction: column;
        gap: clamp(15px, 2.5vw, 20px);
        & .faq-item {
            background-color: #FFFFFF;
            border-radius: 10px;
            overflow: hidden;
            transition: box-shadow 0.3s;
            &.is-active {
                & .faq-question {
                    & .faq-toggle-btn {
                        &::after {
                            transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
                        }
                    }
                }
            }
            & .faq-question {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 20px;
                padding: clamp(12px, 2vw, 20px) clamp(15px, 2.5vw, 25px);
                background: none;
                border: none;
                cursor: pointer;
                text-align: left;
                box-sizing: border-box;
                & .faq-q-icon {
                    width: 40px;
                    height: 40px;
                    background-color: #04A1EF;
                    color: #FFFFFF;
                    font-size: 20px;
                    font-weight: 700;
                    font-family: "Plus Jakarta Sans", sans-serif;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
                    line-height: 1em;
                }
                & .faq-q-text {
                    font-size: clamp(16px, 2vw, 20px);
                    font-weight: 500;
                    color: #2C3E50;
                    flex-grow: 1;
                    line-height: 1.4em;
                }
                & .faq-toggle-btn {
                    position: relative;
                    width: 40px;
                    height: 40px;
                    flex-shrink: 0;
                    &::before,
                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        background-color: #003670;
                        transition: transform 0.3s;
                    }
                    &::before {
                        width: 24px;
                        height: 2px;
                        transform: translate(-50%, -50%);
                    }
                    &::after {
                        width: 2px;
                        height: 24px;
                        transform: translate(-50%, -50%);
                    }
                }
            }
            & .faq-answer {
                height: 0;
                overflow: hidden;
                transition: height 0.3s ease;
                & .faq-answer-inner {
                    padding: 0 clamp(25px, 3.5vw, 40px) clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px);
                    box-sizing: border-box;
                    & p {
                        font-size: clamp(15px, 1.6vw, 16px);
                        line-height: 1.7em;
                        margin: 0;
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 780px) {
    #recruit-contents6 {
        & .faq-header {
            display: block;
            & .faq-title{
                text-align: center;
            }
        }
        & .faq-list {
            & .faq-item {
                & .faq-question {
                    gap: 12px;
                    & .faq-q-icon {
                        width: 32px;
                        height: 32px;
                        font-size: 16px;
                    }
                    & .faq-toggle-btn {
                        width: 32px;
                        height: 32px;
                        &::before {
                            width: 12px;
                        }
                        &::after {
                            height: 12px;
                        }
                    }
                }
            }
        }
    }
}
/*+++++++++++++++++++++++++++++++++++++
採用 CTA
+++++++++++++++++++++++++++++++++++++*/
.recruit-cta{
    & .cta-conts_a{
        padding: clamp(40px, 7vw, 70px) 0;
        background-color: #9DDDFF;
        & .box{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
        }
        & .box .left{
            width: 30%;
            background-image: url(../images/recruit/recruit_partner.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        & .box .right{
            width: 60%;
            margin-right: 5%;
        }
        & .box .txt-blk{
            padding: 5% 0;
        }
        & .box .txt-blk .cta-title{
            margin-bottom: 20px;
        }
        & .box .txt-blk .cta-title .en{
            font-family: "Plus Jakarta Sans", sans-serif;
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 5px;
            line-height: 1em;
            color: #04A1EF;
        }
        & .box .txt-blk .cta-title h2{
            font-size: 32px;
            line-height: 1.4em;
            font-weight: 600;
        }
        & .box .txt-blk p{
            font-size: 16px;
            line-height: 1.65em;
        }
    }
    & .cta-conts_b{
        padding: clamp(40px, 6vw, 60px) 0;
        background-image: url(../images/recruit/recruit-cta_bg.jpg);
        background-position: left top;
        background-repeat: repeat;
        background-size: 150px;
        & .box{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        & .box .left{
            width: 55%;
        }
        & .box .right{
            width: 40%;
        }
        & .box h6{
            font-size: clamp(24px, 3.2vw, 32px);
            line-height: 2em;
            font-weight: 500;
            color: #fff;
        }
        & .recruit-btn-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 100%;
            padding: 20px 0;
            box-sizing: border-box;
            & .recruit-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                max-width: 450px;
                height: clamp(70px, 8vw, 80px);
                border-radius: 100px;
                font-size: clamp(18px, 2.5vw, 22px);
                font-weight: 500;
                text-align: center;
                position: relative;
                overflow: hidden;
                &:hover {
                    &::before {
                        animation: recruitArrowLine 0.4s ease-in-out forwards;
                    }
                    &::after {
                        animation: recruitArrowHead 0.4s ease-in-out forwards;
                    }
                }
                & span {
                    line-height: 1.2em;
                }
                &::before {
                    content: "";
                    position: absolute;
                    right: calc(clamp(25px, 7vw, 35px) + 1px);
                    top: 50%;
                    width: 12px;
                    height: 2px;
                    background-color: currentColor;
                    transform: translateY(-50%);
                }
                &::after {
                    content: "";
                    position: absolute;
                    right: clamp(25px, 7vw, 35px);
                    top: 50%;
                    width: 8px;
                    height: 8px;
                    border-top: 2px solid currentColor;
                    border-right: 2px solid currentColor;
                    transform: translateY(-50%) rotate(45deg);
                }
                &.btn-graduate {
                    background: linear-gradient(to right, #04A1EF, #00C2CB);
                    color: #FFFFFF;
                    border: 2px solid #FFFFFF;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
                    transition: all .3s;
                    &:hover{
                        box-shadow:none;
                    }
                }
                &.btn-career {
                    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
                                linear-gradient(to right, #04A1EF, #00C2CB) border-box;
                    color: #2C3E50;
                    border: 2px solid transparent;
                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
                    transition: all .3s;
                    &:hover{
                        box-shadow:none;
                    }
                }
            }
        }
    }
}
@keyframes recruitArrowLine {
    0% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
    40% {
        transform: translateY(-50%) translateX(10px);
        opacity: 0;
    }
    41% {
        transform: translateY(-50%) translateX(-15px);
        opacity: 0;
    }
    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}
@keyframes recruitArrowHead {
    0% {
        transform: translateY(-50%) translateX(0) rotate(45deg);
        opacity: 1;
    }
    40% {
        transform: translateY(-50%) translateX(10px) rotate(45deg);
        opacity: 0;
    }
    41% {
        transform: translateY(-50%) translateX(-15px) rotate(45deg);
        opacity: 0;
    }
    100% {
        transform: translateY(-50%) translateX(0) rotate(45deg);
        opacity: 1;
    }
}
@media only screen and (max-width: 780px) {
    .recruit-cta{
        & .cta-conts_a{
            & .box .left{
                width: 100%;
                height: 250px;
            }
            & .box .right{
                width: 90%;
                margin: 0 auto;
            }
            & .box .txt-blk .cta-title{
                text-align: center;
            }
        }
        & .cta-conts_b{
            & .box .left{
                width: 100%;
            }
            & .box .right{
                width: 100%;
            }
            & .box h6{
                text-align: center;
            }
        }
    }
    #news {
        & .news-result {
            min-height: 0 !important;
        }

        & .new-conts {
            padding: clamp(50px, 10vw, 100px) 3%;
        }

        & .new-conts .illust {
            display: none;
        }

        & .new-conts .left {
            width: 100%;
        }

        & .new-conts .right {
            width: 100%;
        }

        & .new-conts .title {
            text-align: center;
        }

        & .category-list {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px 24px;
        }

        & .category-item {
            margin-bottom: 0;
        }

        & .news-link {
            gap: 15px;
            padding: 24px 0;
        }

        & .news-img-wrap {
            width: 120px;
        }

        & .news-meta {
            align-items: flex-start;
            gap: 10px;
        }
    }
    .news-exclusive {
        & .category-list {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px 24px;
            margin-top: 0;
        }

        & .category-item {
            margin-bottom: 0;
        }

        & .news-link {
            gap: 15px;
            padding: 24px 0;
        }

        & .news-img-wrap {
            width: 120px;
        }

        & .news-meta {
            align-items: flex-start;
            gap: 10px;
        }
    }
}
#news-head .news-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}
#news-head .news-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}
#news-head .news-date {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
}
#news-head .news-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#news-head .news-category {
    display: inline-block;
    padding: 4px 16px;
    color: #04A1EF;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    background-color: #F0F1F3;
    border-radius: 100vh;
    transition: background-color 0.3s ease;
}
#news-head .news-category:link,
#news-head .news-category:visited {
    color: #04A1EF;
}
#news-head .news-category:hover {
    color: #04A1EF;
    background-color: #e2e5e8;
}
#news-head .news-title {
    display: block;
    margin: 0;
    overflow: visible;
    color: #2C3E50;
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 500;
    line-height: 1.5em;
    -webkit-line-clamp: unset;
}
/* -------------------------
パンくず
------------------------- */
#news-head .pankuzu {
    margin-top: clamp(40px, 5vw, 50px);
    margin-bottom: clamp(30px, 4vw, 40px);
}
#news-head .pankuzu ul {
    font-size: 0;
}
#news-head .pankuzu ul li {
    position: relative;
    display: inline-block;
    margin-right: 25px;
    vertical-align: middle;
}
#news-head .pankuzu ul li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 0;
    right: -15px;
    bottom: 0;
    width: 5px;
    height: 5px;
    margin: auto;
    border-top: 1px solid #2C3E50;
    border-right: 1px solid #2C3E50;
    transform: rotate(45deg);
}
#news-head .pankuzu ul li p {
    font-size: 11px;
    line-height: 1.2em;
}
#news-head .pankuzu ul li:last-child p {
    color: #04A1EF;
}
#news-head .separator {
    padding: 1px 0;
    border-bottom: 1px solid #F0F1F3;
}
#news-contents .news-wrapper {
    width: 90%;
    max-width: 900px;
    margin: auto;
    font-family:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ ProN",
        "Yu Gothic",
        "游ゴシック",
        "Meiryo",
        sans-serif;
}
#news-contents .news-blk > *:first-child {
    margin-top: 0;
}
#news-contents .news-blk h1 {
    margin: 0 0 clamp(20px, 4vw, 40px);
    color: #04A1EF;
    font-size: clamp(38px, 5.2vw, 52px);
    font-weight: 600;
    line-height: 1.6em;
}
#news-contents .news-blk h2 {
    margin: 0 0 clamp(10px, 1.5vw, 15px);
    font-size: clamp(26px, 3.2vw, 32px);
    font-weight: 500;
    line-height: 1.6em;
}
#news-contents .news-blk h3 {
    position: relative;
    margin: 0 0 25px;
    padding-left: 18px;
    color: #04A1EF;
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 500;
    line-height: 1.5em;
}
#news-contents .news-blk h3::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    background: #04A1EF;
    clip-path: polygon(
        50% 0,
        62% 38%,
        100% 50%,
        62% 62%,
        50% 100%,
        38% 62%,
        0 50%,
        38% 38%
    );
    transform: translateY(-50%);
}
#news-contents .news-blk h4 {
    margin: 0 0 15px;
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 600;
    line-height: 1.6em;
}
#news-contents .news-blk p {
    margin-bottom: 1.7em;
    font-size: clamp(15px, 1.6vw, 16px);
    line-height: 1.7em;
}
#news-contents .news-blk p:last-child {
    margin-bottom: 0;
}
#news-contents .news-blk img {
    width: auto;
    max-width: 100%;
    height: auto;
}
#news-contents .news-blk figure {
    max-width: 100%;
    margin: 40px auto;
}
#news-contents .news-blk figure img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: auto;
}
#news-contents .news-blk ul,
#news-contents .news-blk ol {
    margin: 1.5em 0;
    padding-left: 1.5em;
}
#news-contents .news-blk ul li {
    list-style: disc;
}
#news-contents .news-blk ol li {
    list-style: decimal;
}
#news-contents .news-blk li {
    margin-bottom: 0.5em;
    font-size: clamp(15px, 1.6vw, 16px);
    line-height: 1.7em;
}
#news-contents .news-blk a {
    color: #04A1EF;
    text-decoration: underline;
    text-underline-offset: 3px;
}
#news-contents .news-blk a:hover {
    text-decoration: none;
}
/* -------------------------
前へ・一覧へ戻る・次へ
------------------------- */
#news-contents .post-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 80px auto 0;
    padding: 30px 0;
    box-sizing: border-box;
}
#news-contents .post-navigation .nav-item {
    display: flex;
    align-items: center;
}
#news-contents .post-navigation .nav-prev,
#news-contents .post-navigation .nav-next {
    width: 80px;
}
#news-contents .post-navigation .nav-prev {
    justify-content: flex-start;
}
#news-contents .post-navigation .nav-archive {
    justify-content: center;
}
#news-contents .post-navigation .nav-next {
    justify-content: flex-end;
}
#news-contents .post-navigation .nav-empty {
    display: block;
    width: 100%;
    height: 1px;
}
#news-contents .post-navigation a {
    display: inline-flex;
    align-items: center;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}
#news-contents .post-navigation a:link,
#news-contents .post-navigation a:visited {
    color: #1A1A1A;
}
#news-contents .post-navigation a:hover {
    color: #04A1EF;
}
#news-contents .post-navigation .arrow-prev {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg);
}
#news-contents .post-navigation .arrow-next {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}
#news-contents .post-navigation .arrow-return {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-bottom-right-radius: 4px;
    transform: translateY(-2px);
}
#news-contents .post-navigation .arrow-return::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -1px;
    width: 5px;
    height: 5px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg);
}
.wp-block-button__link {
    color: #fff;
    background-color: #04A1EF !important;
    border-radius: 9999px;
    box-shadow: none;
    text-decoration: none;
    padding: calc(.667em + 2px) calc(1.333em + 2px);
    font-size: 1.125em
}
a.wp-block-button__link {
    color: #fff !important;
    text-decoration: none !important;

}
.wp-block-file__button {
    background: #04A1EF;
    color: #fff;
    text-decoration: none
}
.wp-block-separator {
    border: none !important;
    border-top: 1px solid #818181 !important;

}
/*++++++++++++++++++++++++++
Contact Form 7
電話番号・郵便番号 追加調整
++++++++++++++++++++++++++*/
/* 電話番号をほかの入力欄と同じデザインにする */
.wpcf7 .form-input-wrap input[type="tel"] {
    width: 100%;
    padding: 20px;
    color: #2B3641;
    font-family: inherit;
    font-size: 16px;
    text-align: center;
    background-color: #F9F9F9;
    border: none;
    border-radius: 4px;
    box-sizing: border-box;
    outline: none;
    transition: background-color 0.2s;
}
.wpcf7 .form-input-wrap input[type="tel"]:focus {
    background-color: #f1f1f1;
}
/* -------------------------
電話番号
------------------------- */
.wpcf7 .form-input-wrap.tel-split {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
}
.wpcf7 .form-input-wrap.tel-split .wpcf7-form-control-wrap {
    display: block;
    flex: 1 1 0;
    min-width: 0;
}
.wpcf7 .form-input-wrap.tel-split .tel-short {
    display: block;
    width: 100%;
}
.wpcf7 .form-input-wrap.tel-split .hyphen {
    display: block;
    flex-shrink: 0;
    padding-top: 20px;
    color: #878787;
    font-size: 16px;
    line-height: 1;
}
/* -------------------------
郵便番号
------------------------- */
.wpcf7 .form-input-wrap.zip-split {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
}
.wpcf7 .form-input-wrap.zip-split .prefix-zip {
    display: block;
    flex-shrink: 0;
    padding-top: 20px;
    color: #2B3641;
    font-size: 16px;
    line-height: 1;
}
.wpcf7 .form-input-wrap.zip-split .wpcf7-form-control-wrap {
    display: block;
    flex: none;
    width: 150px;
    max-width: none;
}
.wpcf7 .form-input-wrap.zip-split .zip-short {
    display: block;
    width: 100%;
    text-align: center;
}
.wpcf7 .form-input-wrap.zip-split .hyphen {
    display: block;
    flex-shrink: 0;
    padding-top: 20px;
    color: #878787;
    font-size: 16px;
    line-height: 1;
}
/* -------------------------
入力エラー
------------------------- */
.wpcf7 .tel-split .wpcf7-not-valid-tip,
.wpcf7 .zip-split .wpcf7-not-valid-tip {
    display: block;
    margin-top: 5px;
    color: #f84848;
    font-size: 12px;
    line-height: 1.5;
}