@charset "utf-8";

header {
    border: none;
}

/**********************************************
    * top共通
*********************************************/

.news-list-content {
    display: none;
}

.news-list-content.show {
    display: block;
}

.index_head {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}

.index_head:after {
    content: attr(data-en);
    display: block;
    margin-bottom: 5px;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 6.4rem;
    line-height: 1.3;
    color: #0077C0;
    text-transform: capitalize;
}

h2 {
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;
}

a {
    text-decoration: none;
}

/**********************************************
    * mv
*********************************************/
.mv {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 100px;
}

.mv-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity: .8;
}

.mv__content{
  position: relative;
  z-index: 1;
}

/* 共通：最初は見えない */
.mv-shape{
  position:absolute;
  width: clamp(160px, 22vw, 320px);
  height: auto;
  opacity: 0;
  filter: blur(0px);
  will-change: transform, opacity;
}

/* 左：左下→左上に並べる（座標は好みで微調整OK） */
.mv-shape.is-left[data-order="1"]{ left:  -4%;  bottom: -15%;}
.mv-shape.is-left[data-order="2"]{ left: -8%;  bottom:  -2%; }
.mv-shape.is-left[data-order="3"]{ left:   10%;  bottom: 55%; width: 8%; height: auto; }
.mv-shape.is-left[data-order="4"]{ left:  24%;  bottom: 72%; width: 4%; height: auto;  }

/* 右：右上→右下に並べる */
.mv-shape.is-right[data-order="5"]{ right: 24%;  bottom: 17%;  width: 4%; height: auto; }
.mv-shape.is-right[data-order="6"]{ right: 10%;  bottom: 24%; width: 8%; height: auto; }
.mv-shape.is-right[data-order="7"]{ right: -8%;  bottom: 42%; }
.mv-shape.is-right[data-order="8"]{ right: -4%;  bottom: 60%; }

/* 出現（左は左からスッ、右は右からスッ） */
.mv-shape.is-show.is-left{
	animation: mvInLeft 3600ms cubic-bezier(.2,.8,.2,1) forwards;
}
.mv-shape.is-show.is-right{
	animation: mvInRight 3600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes mvInLeft{
  from{ opacity:0; transform: translateX(-14px) translateY(10px) scale(.98); }
  to  { opacity:1; transform: translateX(0)     translateY(0)   scale(1); }
}
@keyframes mvInRight{
  from{ opacity:0; transform: translateX(14px) translateY(-10px) scale(.98); }
  to  { opacity:1; transform: translateX(0)    translateY(0)     scale(1); }
}

/* 動き苦手設定への配慮（揺れ停止） */
@media (prefers-reduced-motion: reduce){
  .mv-shape{ animation:none !important; opacity:1; transform:none !important; }
}

/*
.cta_btn {
    position: fixed;
    max-width: 420px;
    right: 100px;
    bottom: 100px;
    z-index: 5;
}*/

.company_curve_top,
.company_curve_bottom {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: auto;
}

.company_curve_bottom {
    top: auto;
    bottom: -1px;
}

/*
@media (max-width: 1024px) {
    .cta_btn {
        max-width: 350px;
        right: 60px;
        bottom: 60px;
    }
}

@media (max-width: 767px) {
    .cta_btn {
        left: 0;
        right: 0;
        bottom: 50px;
        margin: auto;
    }
}*/

@media (max-width: 767px) {
  .hero-slides .hero-slide:nth-child(1){ background-position: 50% center; }
  .hero-slides .hero-slide:nth-child(2){ background-position: 45% center; }
  .hero-slides .hero-slide:nth-child(3){ background-position: 60% center; }
  .hero-slides .hero-slide:nth-child(4){ background-position: 48% center; }
  .hero-slides .hero-slide:nth-child(5){ background-position: 50% center; }
  .hero-slides .hero-slide:nth-child(6){ background-position: 35% center; }
  .hero-slides .hero-slide:nth-child(7){ background-position: 48% center; }
  .hero-slides .hero-slide:nth-child(8){ background-position: 40% center; }
  .hero-slides .hero-slide:nth-child(9){ background-position: 35% center; }
  .hero-slides .hero-slide:nth-child(10){ background-position: 35% center; }
  .hero-slides .hero-slide:nth-child(11){ background-position: 50% center; }

	/* 左：左下→左上に並べる（座標は好みで微調整OK） */
	.mv-shape.is-left[data-order="1"]{ left:  -14%;  bottom: -5%;}
	.mv-shape.is-left[data-order="2"]{ left: -18%;  bottom:  8%; }
	.mv-shape.is-left[data-order="3"]{ left:   10%;  bottom: 40%; width: 12%; height: auto; }
	.mv-shape.is-left[data-order="4"]{ left:  24%;  bottom: 48%; width: 8%; height: auto;  }

	/* 右：右上→右下に並べる */
	.mv-shape.is-right[data-order="5"]{ right: 30%;  bottom: 60%;  width: 8%; height: auto; }
	.mv-shape.is-right[data-order="6"]{ right: 14%;  bottom: 63%; width: 12%; height: auto; }
	.mv-shape.is-right[data-order="7"]{ right: -18%;  bottom: 72%; }
	.mv-shape.is-right[data-order="8"]{ right: -14%;  bottom: 80%; }
}

@media (max-width: 1024px){
  .hero-slide--last {
    background-image: url("../images/slide_11_tablets.jpg")!important;
  }
}
@media (max-width: 768px){
  .hero-slide--last {
    background-image: url("../images/slide_11_tb2.jpg")!important;
  }
}
@media (max-width: 425px){
  .hero-slide--last {
    background-image: url("../images/slide_11_phone.jpg")!important;
  }
}

/**********************************************
    * message
*********************************************/
.message_wrap {
    position: relative;
    background: #fff;
    overflow: hidden;
    padding: 90px 20px 180px;
    isolation: isolate;
}

.message__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("../images/message_bg.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 25%;
    opacity: 1;
}

.message::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .15) 45%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: -1;
}

.message__inner {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.message__inner,
.message__copy {
    text-align: center;
}

.message__lead {
    font-size: clamp(26px, 2.4vw, 32px);
    color: #006FBC;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .02em;
    margin-bottom: 70px;
}

.message__copy {
    line-height: 1.8;
    letter-spacing: .08em;
    font-size: clamp(18px, 1.7vw, 20px);
    font-weight: 400;
}

.message__copy p+p {
    margin-top: 30px;
}

.message__tagline {
    position: relative;
    margin-top: 110px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .02em;
    font-size: clamp(3rem, 3.2vw, 4.8rem);
    color: #006FBC;
}

/* 共通設定 */
.message__tagline::before,
.message__tagline::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 376px;
    height: 314px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;
    opacity: 0;
    /* 最初は非表示 */
    transform: translate(-50%, -50%);
    /* 一旦基準だけ */
    transition:
        transform 6.0s cubic-bezier(0.15, 0.85, 0.25, 1),
        opacity 4.0s ease-out;
    will-change: transform, opacity;
}

/* 左側のブルーの背景：初期状態（左上の外側あたり） */
.message__tagline::before {
    background-image: url("../images/bg-blue.svg");
    transform: translate(-220%, -150%);
    opacity: .2;
}

/* 右側のピンクの背景：初期状態（右上の外側あたり） */
.message__tagline::after {
    background-image: url("../images/bg-pink.svg");
    transform: translate(120%, -150%);
    opacity: .2;
}

/* ===== ここが「最終位置」（今あなたが使っている位置） ===== */
/* スクロールで表示されたら .is-active を付ける想定 */

.message__tagline.is-active::before {
    /* 元の最終位置をここに移動 */
    transform: translate(-76%, -53%);
    opacity: .2;
}

.message__tagline.is-active::after {
    /* 元の最終位置をここに移動 */
    transform: translate(-40%, -35%);
    opacity: .2;
}

/* 到着後に付くクラス */
.message__tagline.is-floating::before {
    animation: float-random-1 10s ease-in-out infinite;
    transition: none;
    /* ←重要：ガタ防止 */
}

.message__tagline.is-floating::after {
    animation: float-random-2 12s ease-in-out infinite;
    transition: none;
}

@keyframes float-random-1 {

    0%,
    100% {
        transform: translate(-76%, -53%) rotate(0deg);
    }

    25% {
        transform: translate(-62%, -62%) rotate(20deg);
    }

    50% {
        transform: translate(-92%, -44%) rotate(-20deg);
    }

    75% {
        transform: translate(-66%, -47%) rotate(10.2deg);
    }
}

@keyframes float-random-2 {

    0%,
    100% {
        transform: translate(-40%, -35%) rotate(0deg);
    }

    25% {
        transform: translate(-55%, -22%) rotate(20deg);
    }

    50% {
        transform: translate(-28%, -48%) rotate(-20deg);
    }

    75% {
        transform: translate(-50%, -52%) rotate(10.2deg);
    }
}
/*
.word-line {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
}

.word-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 71px;
    height: 12px;
    background-image: url("../images/line.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 71px 12px;
    pointer-events: none;
}
*/

.word-line{
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

.word-line::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
  width:71px;
  height:12px;
  background: url("../images/line.svg") no-repeat center bottom / 71px 12px;
  pointer-events:none;

  /* ▼ 左から少しずつ見せるために全部隠す */
  clip-path: inset(0 100% 0 0); /* 右側を100%隠す */
  opacity: 0;

  transition:
    clip-path .9s cubic-bezier(.2,.8,.2,1),
    opacity .2s ease;
}

.is-active .word-line::after,
.is-inview .word-line::after{
  clip-path: inset(0 0 0 0); /* 全部見せる */
  opacity: 1;
}

.word-line::after{
  transition:
    opacity .2s ease 0s,
	clip-path 1.9s cubic-bezier(.2,.8,.2,1) .8s; 
}

.word-circle {
    position: relative;
    display: inline-block;
    padding: 0 8px !important;
    background: transparent !important;
}

.word-circle::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    /* テキスト中央に配置 */
    width: 61px;
    height: 50px;
    background-image: url("../images/word-circle.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 61px 50px;
    /* 固定サイズで描画 */
    pointer-events: none;
}

.ttl-line {
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.ttl-line::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: center bottom;
    pointer-events: none;
}

.company__eyebrow .ttl-line::after {
    width: 125px;
    height: 12px;
    background-image: url("../images/company-ttl-line.svg");
    background-size: 125px 12px;
}

.jobs__eyebrow .ttl-line::after {
    width: 85px;
    height: 14px;
    background-image: url("../images/jobs-ttl-line.svg");
    background-size: 85px 14px;
}


.interview__eyebrow .ttl-line::after {
    width: 109px;
    height: 14px;
    background-image: url("../images/interview-ttl-line.svg");
    background-size: 109px 14px;
}

.environment__eyebrow .ttl-line::after {
    width: 98px;
    height: 14px;
    background-image: url("../images/environment-ttl-line.svg");
    background-size: 98px 14px;
}

.pickup__eyebrow .ttl-line::after {
    width: 117px;
    height: 14px;
    background-image: url("../images/pickup-ttl-line.svg");
    background-size: 117px 14px;
}

.news__eyebrow .ttl-line::after {
    width: 87px;
    height: 14px;
    background-image: url("../images/news-ttl-line.svg");
    background-size: 87px 14px;
}

.recruit_eyebrow .ttl-line::after {
    width: 87px;
    height: 14px;
    background-image: url("../images/recruit-ttl-line.svg");
    background-size: 87px 14px;
}

/* 手書きマーカー形状 */
.intro-word {
    position: relative;
    display: inline-block;
}

.copy-large {
    /*margin-right: 10px;*/
}

.intro-marker {
    position: absolute;
    left: -8%;
    bottom: -20px;
    width: 111%;
    height: 0.9em;
    pointer-events: none;
    overflow: hidden;
}

.intro-marker-svg {
    width: 100%;
    height: 100%;
    display: block;
    clip-path: inset(0 100% 0 0);
}

.fadein.on .intro-marker-1 .intro-marker-svg {
    animation: markerReveal 0.7s ease-out forwards;
    animation-delay: 1s;
}

@keyframes markerReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@media (max-width: 767px) {
	.intro-marker {
		bottom: -5px;
	}

	.message__copy p+p {
        margin-top: 20px;
    }

    .word-line::after {
        width: 48px;
        height: 12px;
        background-size: 48px 12px;
        /* 固定サイズで描画 */
    }

    .company__eyebrow .ttl-line::after {
        width: 100%;
        height: 12px;
        background-image: url("../images/company-ttl-line.svg");
        background-size: 125px 12px;
    }

    .jobs__eyebrow .ttl-line::after {
        width: 100%;
        height: 14px;
        background-image: url("../images/jobs-ttl-line.svg");
        background-size: 85px 14px;
    }


    .interview__eyebrow .ttl-line::after {
        width: 100%;
        height: 14px;
        background-image: url("../images/interview-ttl-line.svg");
        background-size: 109px 14px;
    }

    .environment__eyebrow .ttl-line::after {
        width: 100%;
        height: 14px;
        background-image: url("../images/environment-ttl-line.svg");
        background-size: 98px 14px;
    }

    .pickup__eyebrow .ttl-line::after {
        width: 100%;
        height: 14px;
        background-image: url("../images/pickup-ttl-line.svg");
        background-size: 117px 14px;
    }

    .news__eyebrow .ttl-line::after {
        width: 100%;
        height: 14px;
        background-image: url("../images/news-ttl-line.svg");
        background-size: 87px 14px;
    }

    .recruit_eyebrow .ttl-line::after {
        width: 100%;
        height: 14px;
        background-image: url("../images/recruit-ttl-line.svg");
        background-size: 87px 14px;
    }

    .word-circle::after {
        content: "";
        bottom: -6px;
        width: 50px;
        height: 50px;
        background-size: 48px 37px;
    }

}

/**********************************************
    * company
*********************************************/
.company {
    position: relative;
    padding: 80px 0;
    overflow: visible;
}

.company__bg {
    position: absolute;
    z-index: 0;
    top: 235px;
    bottom: 0;
    left: 0;
    width: clamp(720px, 75vw, 2000px);
    background: linear-gradient(287deg, #7BE4EE 1.68%, #0084DD 95%);
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

/* 初期：横幅0（左端基準） */
.company__bg {
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0.9;
    /* 任意 */
    transition: transform 1.6s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

/* 表示されたら最終サイズへ */
.company.is-inview .company__bg {
    transform: scaleX(1);
}

.company__wrap {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px);
}

.company__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    flex-direction: row;
    background: transparent;
}

.company__body {
    flex: 1 1 560px;
    text-align: left;
    min-width: 0;
}

.company__eyebrow {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 1.8rem;
    padding: .4em 0;
    color: #222;
}

.company__title {
    font-size: 6.4rem;
    line-height: 1.1;
    letter-spacing: .04em;
    margin: 0 0 .4em 0;
    color: #0084DD;
}

.company__lead {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .02em;
    margin-bottom: 16px;
}

.company__desc {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: .02em;
    margin: 20px 0 50px;
    color: #fff;
}

.company__figure {
    flex: 0 1 570px;
    margin: 0;
    margin-top: -90px;
}

.company__figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 30px;
}

/* 2カラムレイアウト */
.company-banners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 70%;
    margin-top: 40px;
}

/* バナー本体 */
.company-banner {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: #0084dd !important;
}

/* 画像 */
.company-banner__img {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

.company-banner__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.company-banner:hover .company-banner__img img {
    transform: scale(1.05);
}

/* 下部の白グラデーション */
.company-banner::before {
    content: "";
    position: absolute;
    inset: 40% 0 0 0;
    /* 上から40%あたりから下が白くなる */
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.85) 75%,
            rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    z-index: 1;
}

/* タイトル＋矢印エリア */
.company-banner__overlay {
    position: absolute;
    inset: auto 16px 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
    /* グラデより前へ */
}

/* タイトルテキスト */
.company-banner__title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

/* 矢印ボタン（丸） */
.company-banner__btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0084DD;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.company-banner__btn-arrow {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    background: radial-gradient(circle at center, #fff 8px, #fff 8px);
    -webkit-mask: url("../images/arrow-right.svg") no-repeat center / 8px 8px;
    mask: url("../images/arrow-right.svg") no-repeat center / 8px 8px;
    background-color: #fff;
}

@media (max-width: 767px) {
    .company {
        padding: 50px 0;
    }

    .company__bg {
        width: 100%;
        top: 170px;
    }

    .company__card {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .company__eyebrow {
        font-size: 1.3rem;
        padding: .2em 0;
    }

    .company__title {
        font-size: 4.8rem;
        margin: 0 0 .2em 0;
    }

    .company__lead {
        font-size: 2.0rem;
        margin-bottom: 10px;
    }

    .company__desc {
        margin: 45px 0 25px;
    }

    .company__figure,
    .company__body {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 0;
    }

    .company__body {
        margin-top: 12px;
    }

    .company .link_btn {
        text-align: center;
        padding-top: 35px;
    }

    .company-banners {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 100%;
    }

    .company .link_btn.sp_size {
        text-align: center;
        padding-top: 40px;
    }
}

/**********************************************
    * jobs
*********************************************/
.jobs {
    background: #fff;
    padding: clamp(75px, 7vw, 96px) 0;
}

.jobs__wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 20px, 32px);
}

.jobs__row {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
    align-items: center;
}

.jobs__media {
    margin: 0;
}

.jobs__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 30px;
}

.jobs__body {
    text-align: left;
    position: relative;
    z-index: 1;
    /* 背景画像より前にテキストを出す */
}

/* 青い流体画像（PC用） */
.jobs__body::before {
    content: "";
    position: absolute;
    top: 30px;
    /* ここが最終位置の基準 */
    left: -120px;
    /* ここも最終位置の基準 */
    width: 376px;
    height: 314px;
    background-image: url("../images/bg-blue.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
	opacity: .2;
    z-index: -1;
    pointer-events: none;

    /* ▼ ここからアニメーション用の追加 ▼ */
    opacity: 0;
    /* 最初は透明 */
    transform: translate(-120px, -120px);
    /* 左上から入ってくるスタート位置 */
    transition:
        transform 1.8s cubic-bezier(0.15, 0.85, 0.25, 1),
        opacity 1.2s ease-out;
    will-change: transform, opacity;
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.jobs__body.is-active::before {
    opacity: .2;
    transform: translate(0, 0);
    /* top / left の位置まで戻す（＝今のデザイン位置） */
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.jobs__body.is-active::before {
    opacity: .2;
    transform: translate(0, 0);
}

/* 到着後、浮遊開始（transitionを切るのがポイント） */
.jobs__body.is-floating::before {
    transition: none;
    animation: jobsBlobWiggle 18s ease-in-out infinite;
}

/* うにょうにょ：最終位置(0,0)を基準に揺らす */
@keyframes jobsBlobWiggle {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(48px, -34px) rotate(10.2deg);
    }

    40% {
        transform: translate(-42px, 50px) rotate(-10.0deg);
    }

    60% {
        transform: translate(34px, 52px) rotate(10.8deg);
    }

    80% {
        transform: translate(-36px, -48px) rotate(-10.3deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes jobsBlobWiggle-2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    20% {
        transform: translate(-44px, 38px) rotate(12.2deg);
    }

    40% {
        transform: translate(35px, -50px) rotate(-12.0deg);
    }

    60% {
        transform: translate(-42px, -59px) rotate(12.8deg);
    }

    80% {
        transform: translate(45px, 44px) rotate(-12.3deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@media screen and (max-width: 768px) {
    .jobs__body::before {
        top: 20px;
        left: -40px;
        width: 320px;
        height: 220px;
    }
}


.jobs__eyebrow {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 1.8rem;
    padding: .4em 0;
}

.jobs__title {
    margin: 0 0 .4em 0;
    font-size: 6.4rem;
    line-height: 1.1;
    color: #0084DD;
    letter-spacing: .04em;
}

.jobs__lead {
    font-size: 2.6rem;
    font-weight: 700;
    color: #0084DD;
    line-height: 1.8;
    letter-spacing: .02em;
    margin: 20px 0 16px;
}

.jobs__desc {
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: .02em;
    margin: 35px 0px;
}

@media (max-width: 767px) {
    .jobs__eyebrow {
        font-size: 1.3rem;
        padding: .2em 0;
    }

    .jobs__title {
        margin: 0 0 .2em 0;
        font-size: 4.8rem;
    }

    .jobs__lead {
        font-size: 2.0rem;
        margin: 20px 0 16px;
        line-height: 1.67;
    }

    .jobs__row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .jobs__media img {
        width: 100%;
        height: auto;
        display: block;
    }

    .jobs .link_btn {
        text-align: center;
        padding-top: 30px;
    }
}

/**********************************************
    * environment
*********************************************/
.environment {
    position: relative;
    padding: 140px 0 100px;
    overflow: visible;
}

.environment__wrap {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 32px);
}

.environment__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    flex-direction: row-reverse;
    background: transparent;
}

.environment__body {
    flex: 1 1 560px;
    text-align: left;
    min-width: 0;
    position: relative;
    z-index: 1;
    /* 背景画像より前にテキストを出す */
}

/* 青い流体画像（PC用） */
.environment__body::before {
    content: "";
    position: absolute;
    top: 30px;
    /* ここが最終位置の基準 */
    left: -120px;
    /* ここも最終位置の基準 */
    width: 376px;
    height: 314px;
    background-image: url("../images/bg-pink2.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;
    pointer-events: none;

    /* ▼ ここからアニメーション用の追加 ▼ */
    opacity: 0;
    /* 最初は透明 */
    transform: translate(-120px, -120px);
    /* 左上から入ってくるスタート位置 */
    transition:
        transform 1.8s cubic-bezier(0.15, 0.85, 0.25, 1),
        opacity 1.2s ease-out;
    will-change: transform, opacity;
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.environment__body.is-active::before {
    opacity: .2;
    transform: translate(0, 0);
    /* top / left の位置まで戻す（＝今のデザイン位置） */
}

/* 到着後：浮遊開始 */
.environment__body.is-floating::before {
    transition: none;
    /* ←重要 */
    animation: jobsBlobWiggle 18s ease-in-out infinite;
}

/* スマホ時は少し小さく＆位置調整 */
@media screen and (max-width: 768px) {
    .environment__body::before {
        top: 20px;
        left: -70PX;
        width: 320px;
        height: 220px;
    }
}



.environment__eyebrow {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 1.8rem;
    padding: .4em 0;
}

.environment__title {
    font-size: 6.4rem;
    line-height: 1.1;
    letter-spacing: .04em;
    margin: 0 0 .4em 0;
    color: #0084DD;
}

.environment__lead {
    font-size: 2.6rem;
    font-weight: 700;
    color: #0084DD;
    line-height: 1.8;
    letter-spacing: .02em;
    margin-bottom: 20px;
}

.environment__desc {
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: .02em;
    margin: 20px 0 50px;
}

.environment__figure {
    flex: 0 1 570px;
    margin: 0;
}

.environment__figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 30px;
}

@media (max-width: 767px) {
    .environment {
        padding: 50px 0;
    }

    .environment__eyebrow {
        font-size: 1.3rem;
        padding: .2em 0;
    }

    .environment__title {
		font-size: 4.3rem;
        margin: 0 0 .2em 0;
    }

    .environment__lead {
        font-size: 2.0rem;
        margin-bottom: 16px;
    }

    .environment__card {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    /* 上がテキスト、下が画像にしたい場合は上の1行を↓に変更
  .environment__card{ flex-direction: column; align-items: stretch; }
  */

    .environment__figure,
    .environment__body {
        flex: 0 0 auto;
        width: 100%;
    }

    .environment__body {
        margin-top: 12px;
    }

    .environment .link_btn {
        text-align: center;
        padding-top: 30px;
    }

    .environment__desc {
        margin: 30px 0px;
    }
}

/**********************************************
    * interview
*********************************************/
.interview {
    position: relative;
    padding: 80px 0 150px;
    overflow: visible;
}

.interview__wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.interview__bg {
    position: absolute;
    inset: 265px 0 0 min(6vw, 64px);
    /* ←左だけ余白 */
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    background: linear-gradient(107deg, rgba(123, 228, 238, 0.90) 5%, rgba(0, 132, 221, 0.90) 98.32%);
    z-index: -1;
}

/* 初期：横幅0（右端基準） */
.interview__bg {
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform 1.8s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

/* 表示されたら最終サイズへ */
.interview.is-inview .interview__bg {
    transform: scaleX(1);
}

.interview .index_link_btn {
    margin-left: auto;
}

.interview__header {
    position: relative;
}

.interview__header>div {
    margin-bottom: 100px;
}

.interview__header .link_btn {
    text-align: right;
    margin: 100px 0 50px;
}

.interview__eyebrow {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 1.8rem;
    padding: .4em 0;
    color: #222;
    text-align: right;
}

.interview__title {
    font-size: 6.4rem;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #0084DD;
}

.interview__rail {
    position: relative;
    margin-top: 50px;
    padding-right: clamp(40px, 6vw, 120px);
}

.interview__slider {
    margin-top: clamp(10px, 2vw, 20px);
}

.interview__slider .slick-list {
    overflow: visible;
}

.interview__slider .slick-track {
    display: flex;
    gap: 20px;
}

.iv-card {
    position: relative;
    width: 480px;
    background: transparent;
    border-radius: 22px;
}

.iv-card__media {
    margin: 0;
    border-radius: 30px;
    overflow: hidden;
}

.iv-card__media img {
    display: block;
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.interview__slider .iv-card:hover img {
    transform: scale(1.05);
}

.iv-card__tag {
    position: absolute;
    left: 20px;
    top: 15px;
    background: #1E78D5;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 4px 8px;
    border-radius: 5px;
}

.iv-card__catch {
    position: absolute;
    left: 0;
    bottom: 64px;
    right: 16px;
    margin: 0;
    color: #0084DD;
    font-weight: 700;
    line-height: 2;
    font-size: 24px;
    font-family: 'KachoFugetsuB', 'Noto Sans JP', sans-serif !important;
}

.iv-card__catch span {
    background: #fff;
    border-radius: 0 5px 5px 0;
    padding: 9px 8px 8px;
}

.iv-card__meta {
    position: absolute;
    left: 0;
    bottom: 30px;
    font-size: 13px;
    color: #0066AA;
    font-weight: 700;
    background: #fff;
    border-radius: 0 5px 5px 0;
    padding: 4px 8px;
}

.iv-card__link {
    position: absolute;
    inset: 0;
}

.interview__nav {
    position: absolute;
    right: 20px;
    bottom: -80px;
    display: flex;
    gap: 12px;
}

.iv-nav {
    inline-size: 46px;
    block-size: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    border: 2px solid #fff;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    transition: opacity 0.3s ease;
}

.iv-nav::before {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    --size: 8px;
    background: url(../images/arrow-next.svg) no-repeat center;
    z-index: 1;
}

.iv-nav.iv-nav--prev::before {
    transform: translateY(-50%) rotate(180deg);
}

.iv-nav:hover {
    opacity: .8;
}

@media (max-width: 767px) {
    .interview {
        padding: 50px 0 40px;
    }

    .interview__bg {
        inset: 185px 0 0 0;
    }

    .interview__title {
        font-size: 4.8rem;
    }

    .interview__eyebrow {
        font-size: 1.3rem;
    }

    .interview__slider .slick-track {
        gap: 0;
    }

    .iv-card {
        margin: 0 20px 0 0;
    }

    .interview__rail {
        margin-right: 0;
        margin-top: 30px;
        padding-right: 20px;
    }

    .interview__slider .slick-list {
        overflow: visible;
    }


    .iv-card__media {
        border-radius: 20px;
    }

    .iv-card__media img {
        height: 240px;
    }

    .interview__nav {
        bottom: 90px;
        z-index: 1;
    }

    .iv-card__catch {
        bottom: 45px;
        right: 16px;
        line-height: 2.0;
        font-size: 15px;
    }

    .iv-card__meta {
        bottom: 15px;
        font-size: 1rem;
    }

    .iv-card__catch span {
        padding: 6px 8px;
    }

    .iv-nav {
        inline-size: 30px;
        block-size: 30px;
    }

    .iv-nav::before {
        right: 5px;
        width: 16px;
        height: 16px;
        background: url(../images/arrow-next.svg) no-repeat center / 14px;
    }

    .link_btn.sp_size {
        text-align: center;
        padding-top: 90px;
    }

    .iv-card__tag {
        font-size: 12px;
    }
}

/**********************************************
    * pickup
*********************************************/
.pickup {
    position: relative;
    padding: 60px 0 60px 0;
    background: #EFF6FF;
    background: linear-gradient(0deg, #E7F6FC 0%, #E7F6FC 100%), linear-gradient(0deg, #DAF1FA 0%, #DAF1FA 100%), linear-gradient(287deg, rgba(123, 228, 238, 0.20) 1.68%, rgba(0, 132, 221, 0.20) 95%);
}

.pickup__wrap {
    position: relative;
    margin: 0 auto;
    position: relative;
}

.pickup__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 60px 0;
}

.pickup__header>div {
    text-align: center;
}

.pickup__eyebrow {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 1.8rem;
    padding: .4em 0;
}

.pickup__title {
    font-size: 6.4rem;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #0084DD;
}

.pickup_list .pickup_item a {
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
}

.pickup_list .pickup_item a:hover img {
    transform: scale(1.05);
}

.pickup_list .pickup_item a {
    display: block;
}

.pickup_list .pickup_item img {
    transition: transform 0.3s ease;
}

.pickup_list .pickup_item h3 {
    margin-top: 10px;
    font-size: 22px;
    font-weight: 600;
    color: #0084DD;
}

.pickup_list {
    position: relative;
    padding-bottom: 40px;
}

.pickup_list .slick-controls {
    position: absolute;
    left: 50%;
    bottom: 17px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    z-index: 5;
}

.pickup_list .slick-controls .slick-dots {
    position: static !important;
    transform: none !important;
    bottom: auto !important;
    left: auto !important;
    width: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 10px;
}

.pickup_list .slick-dots {
    position: absolute;
    bottom: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    text-align: center;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pickup_list .pickup_item {
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 16px;
}

.pickup_list .pickup_item a:hover {}

.pickup_list .pickup_item a:hover img {
    transform: scale(1.05);
}

.pickup_list .pickup_item img {
    transition: transform 0.3s ease;
}

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

.pickup .slick-dots button {
    font-size: 0;
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff;
    display: flex;
}

.pickup .slick-dots .slick-active button {
    background: #1385DD;
}



.pickup .slick-prev {
    top: 6px;
    left: -45px;
}

.pickup .slick-next {
    top: 6px;
    right: -45px;
}

.pickup .slick-prev::before,
.pickup .slick-next::before {
    background-color: #ffffff;
    opacity: 0.2;
}

.pickup .slick-prev::after,
.pickup .slick-next::after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.pickup .slick-prev:hover::before,
.pickup .slick-next:hover::before {
    background-color: #fff;
    border: 2px solid #fff;
}

.pickup .slick-prev:hover::after,
.pickup .slick-next:hover::after {
    border: solid #1385DD;
    border-width: 0 2px 2px 0;
}

.pickup__nav {
    display: flex;
    gap: 12px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    justify-content: flex-end;
}

.pickup-nav {
    inline-size: 46px;
    block-size: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    border: 2px solid #0084DD;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    transition: opacity 0.3s ease;
}

.pickup-nav::before {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    --size: 14px;
    --arr: #0084DD;
    background: radial-gradient(circle at center, var(--arr) var(--size), var(--arr) var(--size));
    -webkit-mask: url(../images/arrow-next.svg) no-repeat center / var(--size) var(--size);
    mask: url(../images/arrow-next.svg) no-repeat center / var(--size) var(--size);
    background-color: var(--arr);
    z-index: 1;
}

.pickup-nav.pickup-nav--prev::before {
    transform: translateY(-50%) rotate(180deg);
}

.pickup-nav:hover {
    opacity: .8;
}

@media (max-width: 767px) {

    .pickup {
        padding: 30px 0px;
    }

    .pickup_list .pickup_item h3 {
        margin-top: 20px;
        font-size: 18px;
    }

    .pickup__header {
        justify-content: flex-start;
        margin: 0 0 40px 0;
        padding: 0 20px;
    }

    .pickup__header>div {
        text-align: left;
    }

    .pickup__eyebrow {
        font-size: 1.3rem;
        padding: .2em 0;
    }

    .pickup__title {
        font-size: 4.8rem;
    }

    .pickup__nav {
        position: absolute;
        right: 20px;
        bottom: 0;
        display: flex;
        gap: 12px;
    }

    .pickup-nav {
        inline-size: 30px;
        block-size: 30px;
    }

    .pickup-nav::before {
        right: 5px;
        width: 16px;
        height: 16px;
    }
}

/**********************************************
    * news
*********************************************/
.news {
    padding: 130px 0;
}

.news__wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.news__row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: clamp(16px, 3vw, 32px);
    align-items: start;
}

.news__eyebrow {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 1.8rem;
    padding: .4em 0;
}

.news__aside {
    position: relative;
    z-index: 1;
    /* 背景画像より前にテキストを出す */
}

/* 青い流体画像（PC用） */
.news__aside::before {
    content: "";
    position: absolute;
    top: 30px;
    /* ここが最終位置の基準 */
    left: -120px;
    /* ここも最終位置の基準 */
    width: 376px;
    height: 314px;
    background-image: url("../images/bg-blue.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;
    pointer-events: none;

    /* ▼ ここからアニメーション用の追加 ▼ */
    opacity: 0;
    /* 最初は透明 */
    transform: translate(-120px, -120px);
    /* 左上から入ってくるスタート位置 */
    transition:
        transform 1.8s cubic-bezier(0.15, 0.85, 0.25, 1),
        opacity 1.2s ease-out;
    will-change: transform, opacity;
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.news__aside.is-active::before {
    opacity: .2;
    transform: translate(0, 0);
    /* top / left の位置まで戻す（＝今のデザイン位置） */
}

.news__aside.is-floating::before {
    transition: none;
    animation: jobsBlobWiggle 24s ease-in-out infinite;
}

/* スマホ時は少し小さく＆位置調整 */
@media screen and (max-width: 768px) {
    .news__aside::before {
        top: 20px;
        left: -55px;
        width: 320px;
        height: 220px;
    }
}

.news__title {
    font-size: 6.4rem;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #0084DD;
    margin-bottom: 50px;
}

.news__list {
    list-style: none;
    margin: 20px 0 0;
}

.news__item {
    border-bottom: 1px solid #e5e8ee;
}

.news__link {
    display: grid;
    grid-template-columns: 1fr 36px;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    text-decoration: none;
    color: inherit;
    transition: background .15s ease;
}

.news__link:hover {
    background: rgba(14, 120, 201, .04);
}

.news__link>div {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: 20px;
}

.news__date {
    color: #0E78C9;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
}

.news__headline {
    color: #333;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.8;
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
}

.news__arrow {
    justify-self: end;
    inline-size: 24px;
    block-size: 24px;
    border: 1px solid #0084DD;
    border-radius: 50%;
    background: #fff;
    position: relative;
}

.news__arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    background-color: #0084DD;
    -webkit-mask: url("../images/arrow-right.svg") no-repeat center / contain;
    mask: url("../images/arrow-right.svg") no-repeat center / contain;
}

.news__link:hover .news__arrow {}

@media (max-width: 767px) {
    .news {
        padding: 25px 0 80px;
    }

    .news__list {
        margin: 0px;
    }

    .news__row {
        grid-template-columns: 1fr;
    }

    .news__eyebrow {
        font-size: 1.3rem;
        padding: .2em 0;
    }

    .news__title {
        margin-bottom: 0px;
    }

    .news__link>div {
        display: block;
    }

    .news__date {
        font-size: 1.3rem;
        display: block;
    }

    .news__arrow {
        display: block;
    }

    .news .link_btn.sp_size {
        text-align: center;
        padding-top: 40px;
    }
}


/* slick */

.slick-prev,
.slick-next {
    position: absolute;
    bottom: -21%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    color: transparent;
    text-shadow: none;
}

.slick-prev::before,
.slick-next::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background-color: #EBF2FA;
    border-radius: 50%;
    transition: all ease 0.3s;
}

.slick-prev::after,
.slick-next::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 18px;
    width: 3.8px;
    height: 6.62px;
    border: solid #1385DD;
    border-width: 0 1px 1px 0;
    padding: 3px;
    transform: translate(-50%, -50%) rotate(135deg);
    transition: all ease 0.3s;
}

.link_wrap .slick-prev,
.link_wrap .slick-next {
    top: 50%;
    bottom: auto;
}

.slick-next::after {
    transform: translate(-50%, -50%) rotate(-45deg);
    left: 15px;
}

.slick-prev {
    left: -45px;
}

.slick-next {
    right: -45px;
}

.slick-prev:hover::before,
.slick-next:hover::before {
    background-color: #1385DD;
}

.slick-prev:hover::after,
.slick-next:hover::after {
    border: solid #fff;
    border-width: 0 1px 1px 0;
}




@media screen and (max-width: 1425px) {

    .pickup_list.slick-slider {
        /*padding:0 40px;*/
    }

    .link_area {
        max-width: 1360px
    }

    .link_list.slick-slider {
        padding: 0 35px;
    }

    .slick-prev {
        left: 0;
    }

    .slick-next {
        right: 0;
    }

}


@media screen and (max-width: 1100px) {
    .news_tab .tab_item {
        min-width: 150px;
    }
}


@media screen and (max-width: 1024px) {
    .mv img {
        min-height: auto;
    }

    .mv_txt h1 {
        font-size: 3.2rem;
    }

    .pickup_list {
        padding-bottom: 70px;
        /* 下余白を少し縮める */
    }

    .pickup_list .slick-controls {
        gap: 20px;
        /*bottom: 20px;*/
        bottom: 3px;
    }

    .pickup_wrap .slick-prev,
    .pickup_wrap .slick-next {
        width: 40px;
        height: 40px;
    }

    .pickup_wrap .slick-prev {
        /*top: 15px;*/
        left: -45px;
    }

    .pickup_wrap .slick-next {
        /*top: 15px;*/
        right: -45px;
    }


    .news_top {

        padding-left: 30px;
    }

    .news_tab .tab_item {
        min-width: 120px;
    }
}



@media screen and (max-width: 767px) {

    .index_head {
        font-size: 1.5rem;
    }

    .index_head:before {
        font-size: 4.5rem;
        margin-bottom: 3px;
    }

    /**********************************************
        * mv
    *********************************************/
    .mv {
        margin-top: 60px;
    }

    .mv::before {
        height: 260px;
        background-position: 90%;
        bottom: 70px;
    }

    .mv_img_box {
        height: 65vh;
    }

    .mv img {
        width: 40%;
    }

    .mv_txt {
        align-items: center;
        padding: 0 20px 0 27px;
        margin-top: 10px;
        text-align: center;
    }

    .mv_txt span.mv_en {
        font-size: 1.0rem;
    }

    .mv_txt h1 {
        font-size: 2.2rem;
        text-align: center;
        margin: 0 auto 8px;
    }

    .link_btn.btn--cta {
        right: 0;
        bottom: 50px;
        left: 0;
        width: 280px;
        margin: auto;
    }

    .company_curve_top,
    .company_curve_bottom {
        top: 0;
        bottom: auto;
    }

    .company_curve_bottom {
        top: auto;
        bottom: -1px;
    }

    /**********************************************
        * message
    *********************************************/
    .message_wrap {
        padding: 30px 20px 80px;
    }

    .message__text {
        font-size: 1.4rem;
    }

    .message__lead {
        font-size: 1.8rem;
        margin-bottom: 40px;
    }

    .message__tagline {
        margin-top: 50px;
        font-size: 2.1rem;
    }

    .message__tagline::before,
    .message__tagline::after {
        width: 158px;
        height: 132px;
    }

}





/**********************************************
 * recruit
 **********************************************/

.recruit_wrap {
    position: relative;
    isolation: isolate;
    color: #fff;
    min-height: 560px;
    display: grid;
    place-items: center;
    padding: 64px 0px 96px;
    overflow: hidden;
}

.recruit_wrap_bg {
    position: absolute;
    inset: 0;
    background-image: url(../images/index_recruit_img_01.jpg);
    background-size: cover;
    background-position: center;
    z-index: -2;
}

.recruit_wrap_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /*     background: rgba(36, 118, 172, 0.72); */
    z-index: -1;
}

.recruit_area {
    width: min(1240px, 100%);
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
    margin-inline: auto;
    position: relative;
}

.recruit_header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.recruit_eyebrow {
    display: inline-block;
    font-weight: 700;
    letter-spacing: .08em;
    font-size: 1.8rem;
    padding: .4em 0;
    color: #fff;
}

.recruit_title {
    font-size: 6.4rem;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #fff;
}

.recruit_head .index_head::after {
    color: #fff;
}

.lead {
    font-size: 1.6rem;
    margin: 80px 0 60px;
    max-width: 980px;
}

/* ============================================
   リンクカード：上2 / 下3 レイアウト
   ============================================ */
.link-grid.v-2-3 {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 14px 18px;
    grid-template-columns: repeat(12, 1fr);
}

.link-grid.v-2-3>li {
    min-width: 0;
}

.link-grid.v-2-3>li.span-6 {
    grid-column: span 12;
}

.link-grid.v-2-3>li.span-4 {
    grid-column: span 12;
}

/* 幅に応じて段階的に列数を増やす */
@media (min-width: 600px) {
    .link-grid.v-2-3>li.span-6 {
        grid-column: span 6;
    }

    /* 上段：2列 */
    .link-grid.v-2-3>li.span-4 {
        grid-column: span 6;
    }

    /* 下段：一旦2列 */
}

@media (min-width: 960px) {
    .link-grid.v-2-3>li.span-6 {
        grid-column: span 6;
    }

    /* 上段：2枚 */
    .link-grid.v-2-3>li.span-4 {
        grid-column: span 4;
    }

    /* 下段：3枚 */
}

/* =========================
   カード見た目 + 配置
   ========================= */
.card-link {
    --brand: #0084DD;
    position: relative;
    display: block;
    text-align: center;
    background: #fff !important;
    color: var(--brand) !important;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 22px 56px !important;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.card-link:hover {
    opacity: 0.8;
}

.card-link:focus-visible {
    outline: 2px solid rgba(36, 118, 172, .45);
    outline-offset: 2px;
}

.link-grid.v-2-3 .card-link {
    padding-block: 22px;
}

/* 触り心地調整 */


.card-link .title {
    font-size: 2.4rem;
}

.card-link .note {
    font-size: 1.4rem;
    margin-left: .5em;
    white-space: nowrap;
}

.card-link svg {
    display: none !important;
}

/* ---- 外部リンクアイコン（Vector.svg を右端中央に固定） ---- */
.card-link.is-ext::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: url("../images/popup.svg") no-repeat center / contain;
    /* パス調整 */
    pointer-events: none;
}

.card-link.is-dot .dot-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--brand);
}

.card-link.is-dot .dot-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    /* SVGは # を %23 にエンコード */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M7 12h7'/><path d='M12 8l5 4-5 4'/>\
</svg>");
}


@media (max-width: 767px) {
    .recruit_wrap {
        padding: 60px 0px 70px;
    }

    .recruit_eyebrow {
        font-size: 1.3rem;
        padding: .2em 0;
    }

    .recruit_title {
        font-size: 4.8rem;
        margin-bottom: 0px;
    }

    .lead {
        margin: 35px 0;
    }

    .card-link .title {
        font-size: 1.8rem;
    }

    .link-grid.v-2-3 .card-link {
        padding-block: 18px;
    }

    .card-link.is-ext::after {
        width: 20px;
        height: 20px;

    }

    .recruit_wrap .link_btn a {
        display: block;
        width: 250px;
        box-sizing: border-box;
        text-align: center;
    }

    .recruit_wrap .link_btn.sp_size {
        padding-top: 40px;
    }

    .recruit_wrap_bg {
        background-position: -166px -94px;
	    background-image: url(../images/index_recruit_img_01_sp.jpg);
	    background-size: 163%;
    }

}

/* ================================
ローディング用オーバーレイ
================================= */
.intro-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(to bottom, #7BE4EE 0%, #0084DD 100%);
    z-index: 200;
    transition: opacity .8s ease;
}

.intro-overlay.is-fading-out {
    opacity: 0;
    pointer-events: none;
}

/* hero-inner と同じレイアウトに揃える */
.intro-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none;
    color: #fff;
    text-shadow: 0 4px 12px rgba(0, 0, 0, .4);
	margin-top: 198px;
	margin-bottom: 120px;
}

.intro-copy-line1,
.intro-copy-line2 {
    font-size: 5.8rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0;
    font-family: 'KachoFugetsuB';
}

.intro-copy-line2 {
    margin-top: .2em;
    padding-left: 8%;
}

.copy-large {
    font-size: 8rem;
    /*margin-right: 10px;*/
}

.intro-copy-line2 .copy-large {
    letter-spacing: -3px;
    margin-right: 8px;
}


.intro-copy-inner {
    display: inline-block;
}

@keyframes introFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* イントロ用テキストのアニメーション */
.intro-overlay.is-animated .intro-copy-line1 {
    animation: introFadeUp .8s ease-out forwards;
    animation-delay: .2s;
}

.intro-overlay.is-animated .intro-copy-line2 {
    animation: introFadeUp .8s ease-out forwards;
    animation-delay: .8s;
}

/* 手書きマーカー（SVG） */
.intro-word {
    position: relative;
    display: inline-block;
}
/*
.intro-marker {
    position: absolute;
    left: -8%;
    bottom: -12px;
    width: 120%;
    height: 0.9em;
    pointer-events: none;
    overflow: hidden;
}
*/
.intro-marker-2 {
    left: -4%;
}

.intro-marker-svg {
    width: 100%;
    height: 100%;
    display: block;
    clip-path: inset(0 100% 0 0);
}

.marker-path {
    fill: #FA6060;
}

/* ================================
ヒーロー用（固定）マーカー
================================= */
.hero-word {
    position: relative;
    display: inline-block;
}

.hero-marker {
    position: absolute;
    left: -8%;
    /*bottom: -0.35em;*/
    bottom: -20px;
    width: 111%;
    height: 0.9em;
    pointer-events: none;
    overflow: hidden;
}

/* 2行目だけ少し左位置を変えたい場合 */
.hero-marker-2 {
    left: -4%;
}

.hero-marker-svg {
    width: 100%;
    height: 100%;
    display: block;
    /* ★ 固定表示なので clip-path は使わない（＝全体が見える） */
}


@keyframes markerReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.intro-overlay.is-animated .intro-marker-1 .intro-marker-svg {
    animation: markerReveal 0.7s ease-out forwards;
    animation-delay: 1.2s;
}

.intro-overlay.is-animated .intro-marker-2 .intro-marker-svg {
    animation: markerReveal 0.7s ease-out forwards;
    animation-delay: 1.6s;
}

/* ヘッダー */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: #fff;
    position: relative;
    z-index: 10;
}

.logo {
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 18px;
    color: #005caf;
}

.global-nav a {
    margin-left: 24px;
    font-size: 16px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

/* ================================
ヒーロースライダー本体
================================= */
.hero-slider {
    position: relative;
    height: 100vh;
    width: 105vw;
    left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 1980 / 850;
    overflow: visible;
}

/* 追加：アーチで切り抜くのは中身だけ */
.hero-visual {
    position: relative;
    inset: 0;
    height: 100%;
    overflow: hidden;
/*
    clip-path: url(#hero-clip);
    -webkit-clip-path: url(#hero-clip);

    background: #fff;
    margin-top: -40px;
*/
}

.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0;
}

.hero-slides {
    z-index: 1;
}

/* 白フラッシュ用レイヤー */
/*
.hero-slides::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
  z-index: 999;
}
*/
/* 白フラッシュ用の重ねレイヤー */
.hero-slides::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;

  /* ★滑らかにする重要ポイント */
  will-change: opacity, transform;
  transform: translateZ(0) scale(1);
}

/* 発火 */
.hero-slides.is-whiteflash::after{
  animation: whiteFlash 2000ms ease-out both;
}

@keyframes whiteFlash{
  0%   { opacity: 0; transform: translateZ(0) scale(1.00); }
  20%  { opacity: .95; transform: translateZ(0) scale(1.00); }
  35%  { opacity: .95; transform: translateZ(0) scale(1.00); }
  100% { opacity: 0; transform: translateZ(0) scale(1.00); }
}


.hero-slide {
    background-size: cover;
    background-position: center;
    opacity: 0;
    /* transformにも1秒の遷移時間を設定することで、非アクティブ時に急に戻るのを防ぐ */
    transition: opacity 1s ease, transform 1.5s ease;
    transform: scale(1.0);
}

.hero-slide.is-prev-slide {
    /* is-active が持っていたアニメーションの最終状態の transform を上書きします */
    transform: scale(1.05);
    /* slideZoomIn の最終スケール値と同じに設定 */
    opacity: 0;
    /* is-active の transition が終わるまで非表示を維持 */
}

.hero-slide.is-active {
    opacity: 1;
    animation: slideZoomIn 2.9s linear forwards;
}

.hero-slide.is-active:last-child{
  opacity: 1;
  animation: none;
}

/* ズームインアニメーションの定義 */
@keyframes slideZoomIn {
    from {
        transform: scale(1.0);
    }

    to {
        transform: scale(1.1);
    }
}

.hero-inner {
    opacity: 1;
    /* 最初は非表示 → JSで 1 に */
    transition: opacity 0.8s ease;
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    text-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    pointer-events: none;
	margin-bottom: 120px;
}

.hero-copy-line1,
.hero-copy-line2 {
    font-size: 5.8rem;
    line-height: 1.5;
	margin-top: .2em;
    margin: 0;
    font-family: 'KachoFugetsuB';
}

.hero-copy-line2 {
    /*margin-bottom: 32px;*/
    padding-left: 8%;
    margin-top: .2em;
}

.hero-copy-line2 .copy-large {
    letter-spacing: -3px;
    margin-right: 8px;
}

.hero-cta {
    position: absolute;
    right: 8%;
    bottom: 10%;
    z-index: 40;
    pointer-events: auto;
}

.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px;
    border-radius: 999px;
    background: linear-gradient(90deg, #FF8B01, #FFC54C);
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ================================
メインビジュアル左右の装飾＋パララックス
================================= */
.hero-deco {
    position: absolute;
    z-index: 5;
    /* スライドより上、コピーより下 */
    pointer-events: none;
    max-width: 28vw;
    /* 画面幅に応じて縮小 */
    height: auto;
    will-change: transform;
    /* パララックス用 */
}

.hero-deco-left {
    left: 5%;
    top: 20%;
    width: 19.2vw;
	opacity: .4;
	
	/* ▼ ここからアニメーション用の追加 ▼ */
    opacity: 0;
    /* 最初は透明 */
    transform: translate(-120px, -120px);
    /* 左上から入ってくるスタート位置 */
    transition:
        transform 1.8s cubic-bezier(0.15, 0.85, 0.25, 1),
        opacity 1.2s ease-out;
    will-change: transform, opacity;
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.hero-deco-left.is-active {
    opacity: .4;
    transform: translate(0, 0);
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.hero-deco-left.is-active {
    opacity: .4;
    transform: translate(0, 0);
}

/* 到着後、浮遊開始（transitionを切るのがポイント） */
.hero-deco-left.is-floating {
    transition: none;
	animation: jobsBlobWiggle 18s ease-in-out infinite;
}

.hero-deco-right {
    right: 5%;
    top: 10%;
    width: 19.2vw;
	opacity: .4;
	
	/* ▼ ここからアニメーション用の追加 ▼ */
    opacity: 0;
    /* 最初は透明 */
    transform: translate(-120px, -120px);
    /* 左上から入ってくるスタート位置 */
    transition:
        transform 1.8s cubic-bezier(0.15, 0.85, 0.25, 1),
        opacity 1.2s ease-out;
    will-change: transform, opacity;
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.hero-deco-right.is-active {
    opacity: .4;
    transform: translate(0, 0);
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.hero-deco-right.is-active {
    opacity: .4;
    transform: translate(0, 0);
}

/* 到着後、浮遊開始（transitionを切るのがポイント） */
.hero-deco-right.is-floating {
    transition: none;
	animation: jobsBlobWiggle 18s ease-in-out infinite;
}

.hero-deco-small-left {
    left: 20%;
    bottom: 15%;
    width: 15vw;
	opacity: .4;
	/* ▼ ここからアニメーション用の追加 ▼ */
    opacity: 0;
    /* 最初は透明 */
    transform: translate(-120px, -120px);
    /* 左上から入ってくるスタート位置 */
    transition:
        transform 1.8s cubic-bezier(0.15, 0.85, 0.25, 1),
        opacity 1.2s ease-out;
    will-change: transform, opacity;
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.hero-deco-small-left.is-active {
    opacity: .4;
    transform: translate(0, 0);
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.hero-deco-small-left.is-active {
    opacity: .4;
    transform: translate(0, 0);
}

/* 到着後、浮遊開始（transitionを切るのがポイント） */
.hero-deco-small-left.is-floating {
    transition: none;
	animation: jobsBlobWiggle-2 18s ease-in-out infinite;
}

.hero-deco-small-right {
    right: 10%;
    bottom: 25%;
    width: 15vw;
	opacity: .4;
	/* ▼ ここからアニメーション用の追加 ▼ */
    opacity: 0;
    /* 最初は透明 */
    transform: translate(-120px, -120px);
    /* 左上から入ってくるスタート位置 */
    transition:
        transform 1.8s cubic-bezier(0.15, 0.85, 0.25, 1),
        opacity 1.2s ease-out;
    will-change: transform, opacity;
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.hero-deco-small-right.is-active {
    opacity: .4;
    transform: translate(0, 0);
}

/* スクロールで見えたら最終位置へ＆フェードイン */
.hero-deco-small-right.is-active {
    opacity: .4;
    transform: translate(0, 0);
}

/* 到着後、浮遊開始（transitionを切るのがポイント） */
.hero-deco-small-right.is-floating {
    transition: none;
	animation: jobsBlobWiggle-2 18s ease-in-out infinite;
}


/* ================================
下部メッセージセクション（#entry）
================================= */
#entry {
    background: #ffffff;
    padding: 80px 24px 120px;
}

.entry-inner {
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}

.entry-lead-ja {
    font-size: 2.2rem;
    line-height: 2;
    font-weight: 700;
    color: #004f9f;
    margin-bottom: 48px;
}

.entry-body {
    font-size: 1rem;
    line-height: 2.1;
    text-align: center;
    margin: 0 auto 56px;
    max-width: 760px;
}

.entry-body p {
    margin: 0 0 1.4em;
}

.entry-lead-en {
    font-size: 1.8rem;
    line-height: 1.8;
    font-weight: 700;
    color: #006fbc;
    margin-top: 16px;
}

@media (max-width: 1024px) {
	.intro-copy-line1, .intro-copy-line2 {
		font-size: 4.5rem;
	}
	.hero-copy-line1, .hero-copy-line2 {
    	font-size: 4.5rem;
	}
	.copy-large {
		font-size: 6.0rem;
	}
}

@media (max-width: 767px) {
	.hero-marker {
		bottom: -5px;
	}
	
	.hero-inner {
		margin-bottom: 0;
	}

	.hero-slider {
		height: 90vh;
	}
    .copy-large {
        font-size: 3.6rem;
    }

    .intro-copy {
		font-size: 2.4rem;
		line-height: 1.5;
    }

    .hero-copy-line1,
    .hero-copy-line2 {
        font-size: 2.4rem;
		line-height: 1.5;
		margin: 0;
    }
	.intro-copy-line2 {
		margin-top: 0;
	}

    .hero-cta-btn {
        padding: 18px 32px;
        font-size: 18px;
    }

    .hero-deco {
        max-width: 45vw;
    }

    .hero-deco-left {
        left: -15%;
        bottom: -8%;
    }

    .hero-deco-right {
        right: -15%;
        top: -10%;
    }
	.intro-inner {
		margin-top: 60px;
		height: 90vh;
		margin-bottom: 60px;
	}
}



/* =========================================
   circle / circle_m / circle_s /
   （文字幅に追従させつつ 120% で少し大きめ）
========================================= */

.word-line-circle,.word-line-circle_02,.word-line-circle_03,
.word-line-circle_m,
.word-line-circle_s,.word-line-circle_s_02,.word-line-circle_s_03,
.word-line-circle_w{
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    white-space: nowrap;
	background: none !important;
    /* ここで折り返し禁止 */
}

/* 大きい丸 */
.word-line-circle::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 47%;
    transform: translateX(-50%);
    width: 110%;
    /* テキストより少し広く */
    height: 150%;
    /* テキストより少し広く */
    background-image: url(../images/line-circle.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

/* 大きい丸 02 */
.word-line-circle_02::after {
    content: "";
    position: absolute;
    top: -30%;
    left: 47%;
    transform: translateX(-50%);
    width: 110%;
    /* テキストより少し広く */
    height: 150%;
    /* テキストより少し広く */
    background-image: url(../images/line-circle_02.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

/* 大きい丸 03 */
.word-line-circle_03::after {
    content: "";
    position: absolute;
    top: -17%;
    left: 47%;
    transform: translateX(-50%);
    width: 110%;
    /* テキストより少し広く */
    height: 150%;
    /* テキストより少し広く */
    background-image: url(../images/line-circle_03.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

/* 中サイズ丸 */
#staff_interview_wrap .word-line-circle_m::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 100%;
    background-image: url(../images/line-circle_m.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

/* 小さい丸 */
.word-line-circle_s::after {
    content: "";
    position: absolute;
    top: 2%;
    left: 47%;
    transform: translateX(-50%);
    width: 120%;
    height: 100%;
    background-image: url(../images/line-circle_s.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

/* 小さい丸02 */
.word-line-circle_s_02::after {
    content: "";
    position: absolute;
    top: -4%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 100%;
    background-image: url(../images/line-circle_s_02.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

/* 小さい丸03 */
.word-line-circle_s_03::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 100%;
    background-image: url(../images/line-circle_s_03.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

/* w 修正追加 */
.word-line-circle_w::after {
    content: "";
    position: absolute;
    top: -18%;
    left: 45%;
    transform: translateX(-50%);
    width: 110%;
    height: 150%;
    background-image: url(../images/line-circle_w.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 3;
}

/* =========================================
   word-line（01/02）
========================================= */

.word-line_01,
.word-line_02{
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}

.word-line_01::after,
.word-line_02::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
  width:71px;
  height:12px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 71px 12px;
  pointer-events:none;

  /* 左から少しずつ見せるために全部隠す */
  clip-path: inset(0 100% 0 0);
  opacity: 0;

  /* 最終指定（あなたのCSSの後勝ちのtransitionに合わせる） */
  transition:
    opacity .2s ease 0s,
    clip-path 1.9s cubic-bezier(.2,.8,.2,1) .8s;
}

.is-active .word-line_01::after,
.is-inview .word-line_01::after,
.is-active .word-line_02::after,
.is-inview .word-line_02::after{
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* 画像だけ差し替え */
.word-line_01::after{
  background-image: url("../images/line_01.svg");
}

.word-line_02::after{
  background-image: url("../images/line_02.svg");
}

/* SP */
@media (max-width: 767px) {
  .word-line_01::after,
  .word-line_02::after{
    width: 48px;
    height: 12px;
    background-size: 48px 12px;
  }
}