@charset "UTF-8";

/* =========================================================
   日興リカ 採用サイト TOP  -  style.css
   ========================================================= */

:root {
    --blue: #0078ee;
    /* メインブルー */
    --blue-deep: #0059bd;
    --blue-dark: #0040d9;
    --cyan: #009fe8;
    /* アクセントシアン */
    --orange: #f7931e;
    /* JOB アクセント */
    --light: #e9ebf5;
    /* 淡いラベンダーグレー背景 */
    --ink: #333333;
    /* 本文テキスト */
    --grad-blue: linear-gradient(180deg, #009fe8 0%, #0a82ff 50%, #0059bd 100%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.8;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

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

/* 共通コンテナ */
.container-rica {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
    position: relative;
}

/* スクロール時の固定ヘッダー分のオフセット */
section[id] {
    scroll-margin-top: 80px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: 80px;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.header-inner {
    height: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 32px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.header-logo img {
    max-height: 34px;
    width: auto;
}

.header-nav {
    margin-left: auto;
}

.nav-list {
    display: flex;
    gap: 28px;
}

.nav-list a {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    transition: color .2s;
    white-space: nowrap;
}

.nav-list a:hover {
    color: var(--cyan);
}

.header-entry {
    background: #fb7e00;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: 12px 28px;
    border-radius: 3px;
    transition: transform .2s;
    transition: .5s;
    white-space: nowrap;
}

.header-entry:hover {
    transform: translateY(-2px);
    color: #fff;
    opacity: .5;
}

/* ハンバーガー（モバイル用） */
.nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    margin-left: auto;
    position: relative;
    cursor: pointer;
}

.nav-toggle span {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--blue);
    transition: .3s;
}

.nav-toggle span:nth-child(1) {
    top: 13px;
}

.nav-toggle span:nth-child(2) {
    top: 19px;
}

.nav-toggle span:nth-child(3) {
    top: 25px;
}

.nav-toggle.is-open span:nth-child(1) {
    top: 19px;
    transform: rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    top: 19px;
    transform: rotate(-45deg);
}

/* =========================================================
   共通：セクション見出し
   ========================================================= */
.sec-head {
    text-align: left;
    margin-bottom: 48px;
}

.sec-head-left {
    text-align: left;
}

.sec-head-center {
    text-align: center;
}

.sec-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0;
    line-height: 1.3;
}

.sec-sub {
    font-family: "Figtree", sans-serif;
    font-weight: 500;
    letter-spacing: .2em;
    font-size: 16px;
    color: var(--cyan);
    margin: 6px 0 0;
}

.sec-head-light .sec-title {
    color: #fff;
}

.sec-head-light .sec-sub {
    color: rgba(255, 255, 255, .75);
}

/* 共通：More ボタン */
.btn-center {
    text-align: center;
    margin-top: 48px;
}

.btn-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 220px;
    width: 100%;
    max-width: 300px;
    padding: 18px 32px;
    background: var(--blue-dark);
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 18px;
    border-radius: 5px;
    transition: transform .2s, box-shadow .2s, background .2s;
    position: relative;
}

.btn-more:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 120, 238, .35);
}

.btn-more .arrow {
    width: 16px;
    height: auto;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translate(0, -50%);

}

.btn-more .arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: translateY(-50%);
}

.btn-more .arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}

.btn-more-orange {
    background: var(--orange);
}

.btn-more-orange:hover {
    box-shadow: 0 10px 24px rgba(247, 147, 30, .4);
}

/* 白背景＋青文字のMoreボタン（青背景セクション用） */
.btn-more--light {
    background: #fff;
    color: var(--blue-dark);
}

.btn-more--light:hover {
    color: var(--blue-dark);
    box-shadow: 0 10px 24px rgba(0, 30, 90, .25);
}

.btn-more--light .arrow::before {
    background: currentColor;
}

.btn-more--light .arrow::after {
    border-top-color: currentColor;
    border-right-color: currentColor;
}

/* 共通：青グラデーション背景セクション */
.section-blue {
    background: var(--grad-blue);
    color: #fff;
    position: relative;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
    background-color: var(--cyan);
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    padding-top: 80px;
    position: relative;
}

/* 背景はゆっくりズームさせて動きを出す（テキストはこの上に重ねる） */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:

        linear-gradient(to bottom, rgb(0 159 232/0)0%, rgb(0 159 232/0)70%, rgb(0 159 232/.5)90%, rgb(0 159 232/1)100%),
        url(../images/hero-bg.png) no-repeat center center/cover;
    animation: heroBgZoom 20s ease-in-out infinite alternate;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ヒーローが画面外に出たらループアニメーションを止め、スクロール中の合成負荷を減らす（LINE等アプリ内ブラウザでのカクつき対策） */
.hero.is-offscreen::before,
.hero.is-offscreen .hero-scroll-line::after {
    animation-play-state: paused;
}

.hero-title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
}

/* 白箱（.intro-headingと共通の型）＋時間差フェードイン */
.hero-line {
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: clamp(32px, 7vw, 86px);
    text-align: center;
    line-height: 1.1;
    padding: 0.5rem 1rem 1rem;
    box-shadow: 0 20px 50px rgba(0, 40, 110, .25);
    opacity: 0;
    transform: translateY(36px);
    animation: heroTitleIn .9s cubic-bezier(.16, 1, .3, 1) both;
}

.hero-line+.hero-line {
    margin-top: 2%;
}

/* 767px以下は「たどり着けない」「答えがある。」の2箱に分割（9+7+6文字の3分割）、768px以上は1箱にまとめる */
.hero-line-narrow {
    display: none;
}

@media (max-width: 767px) {
    .hero-line-wide {
        display: none;
    }

    .hero-line-narrow {
        display: inline-block;
    }
}

/* 中の文字は白箱が出た後に一文字ずつフェードインする（幅アニメーションではないので折り返しも自然） */
/* background-clip:textによるグラデーション文字は環境によって透明のまま描画されないことがあるため、単色で確実に表示する */
.hero-line-text {
    display: inline-block;
    color: var(--blue);
}

.hero-ch {
    opacity: 0;
    animation: heroChIn .4s ease-out forwards;
    animation-delay: var(--d, 0s);
}

@keyframes heroTitleIn {
    from {
        opacity: 0;
        transform: translateY(36px);
    }

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

@keyframes heroChIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes heroBgZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

/* スクロール誘導 */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #fff;
    z-index: 1;
    opacity: 0;
    animation: heroScrollIn .8s ease-out 1.8s both;
}

.hero-scroll span {
    font-family: "Figtree", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .25em;
}

.hero-scroll-line {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, .4);
    position: relative;
    overflow: hidden;
}

.hero-scroll-line::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: heroScrollLine 1.8s ease-in-out infinite;
}

@keyframes heroScrollIn {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@keyframes heroScrollLine {
    0% {
        top: -100%;
    }

    60% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero::before {
        animation: none;
    }

    .hero-line {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-ch {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-scroll {
        animation: none;
        opacity: 1;
    }

    .hero-scroll-line::after {
        animation: none;
    }
}

/* =========================================================
   INTRO
   ========================================================= */
.intro {
    background: var(--grad-blue);
    padding: 150px 0 110px;
    /* 上部はみ出し画像の余白を確保 */
    overflow-x: clip;
}

.intro-card {
    position: relative;
    background: url("../images/intro-bg.png") center top / cover no-repeat;
    border: 2px solid #2f97ff;
    border-radius: 18px;
    padding: 60px 70px;
    color: #fff;
    box-shadow: 0 24px 55px rgba(0, 35, 100, .3);
}

/* 化学式ドゥードルの装飾（カード内に薄く敷く） */
.intro-card-deco {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}

.intro-card-deco::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../images/intro-deco.png") center top / cover no-repeat;
    opacity: .28;
}

.intro-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 36px;
    line-height: 1;
    letter-spacing: .06em;
    position: relative;
    top: 0;
    left: -20%;
}

/* 各行を白いハイライトボックス＋青グラデ文字に */
.intro-heading span {
    display: inline-block;
    background: #fff;
    padding: 15px 26px;
    border-radius: 3px;
    font-size: 46px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 30, 90, .18);
    background-clip: padding-box;
    /* 青グラデーション文字 */
    color: var(--blue);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .intro-heading span {
        position: relative;
        color: transparent;
    }

    .intro-heading span::after {
        content: attr(data-text);
        position: absolute;
        inset: 15px 26px;
        background: linear-gradient(90deg, #2a9bff 0%, #0078ff 50%, #0059bd 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

/* 2行目は少し右にインデント（デザイン準拠） */
.intro-heading span:nth-child(2) {
    margin-left: 44px;
}

.intro-text {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 20px;
}

.intro-text:last-child {
    margin-bottom: 0;
}

/* フラスコ・分子模型（カード右上にはみ出して配置） */
.intro-images {
    position: absolute;
    inset: 0 0 auto 0;
    height: 0;
    z-index: 3;
    pointer-events: none;
}

.intro-images img {
    position: absolute;
    filter: drop-shadow(0 14px 24px rgba(0, 30, 90, .28));
}

.intro-flask {
    width: 425px;
    right: -125px;
    top: -135px;
    z-index: 2;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about {
    padding: 90px 0 110px;
    background: url("../images/about-bg.png")no-repeat top center/cover;
    background-color: var(--blue-deep);
}

.about::before {
    /* 六角形パターンの淡い装飾 */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .10) 2px, transparent 2px);
    background-size: 46px 46px;
    opacity: .5;
    pointer-events: none;
}

.about .container-rica {
    position: relative;
    z-index: 1;
}

/* 右上から覗く球体アイコン（上端・右端でカット） */
.about-icon {
    position: absolute;
    top: -55px;
    right: 40px;
    width: 200px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.about-card {
    background: #0077ee;
    border: 2px solid #008cff;
    border-radius: 10px;
    padding: 26px 26px 64px;
    height: 100%;
    position: relative;
    color: #fff;
    box-shadow: 0 16px 34px rgba(0, 30, 90, .22);
}

.about-card-img {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 21 / 20;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* カード1（わが社の信条の図）は切り抜かず全体表示 */
.about-card-img--contain img {
    object-fit: contain;
}

.about-card-title {
    font-size: 23px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    position: relative;
    z-index: 3;
    padding: .3rem .5rem;
}

.about-card-title::before {
    content: "";
    position: absolute;
    width: 110%;
    height: 100%;
    background: #0040d9;
    z-index: -1;
    top: 0%;
    left: -10%;
}

.about-card-text {
    font-size: 14px;
    color: #fff;
    margin: 0;
}

/* 白丸＋青い矢印ボタン */
.plus-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 3px;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}

.plus-btn::before {
    /* 矢印の軸 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    background: #0040d9;
    transform: translate(-55%, -50%);
}

.plus-btn::after {
    /* 矢印の先端 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #0040d9;
    border-right: 2px solid #0040d9;
    transform: translate(-10%, -50%) rotate(45deg);
}

.plus-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 20, 80, .3);
}

/* =========================================================
   NUMBERS
   ========================================================= */
.numbers {
    padding: 90px 0 110px;
    background: var(--light);
    position: relative;
    background: url("../images/number-bg.jpg")no-repeat top center/cover;
    overflow-x: clip;
}

.numbers-lead {
    font-size: 20px;
    margin: -20px 0 50px;
}

.numbers .sec-title {
    color: #1a2a44;
}

.numbers-flask {
    position: absolute;
    filter: drop-shadow(0 14px 24px rgba(0, 30, 90, .28));
    width: 425px;
    right: -125px;
    top: -110px;
    z-index: 2;
}

.number-box {
    background: url("../images/number-icon-bg.jpg")no-repeat bottom left/cover;
    border: 2px solid #00c8ff;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 10px;
    box-shadow: 0 14px 28px rgba(0, 130, 200, .25);
}

.number-label {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 4px;
    line-height: 1.45;
}

.number-pre {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    line-height: 1;
}

.number-value {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 90px;
    line-height: 1;
    margin: 0;
    letter-spacing: .02em;
}

.number-unit {
    font-size: 22px;
    font-weight: 500;
    margin: 2px 0 0;
}

/* =========================================================
   JOB
   ========================================================= */
.job {
    padding: 90px 0 110px;
    background: url("../images/job-bg.jpg")no-repeat top center/cover;
    position: relative;
    overflow-x: clip;
}

/* 装飾アイコン（左上：顕微鏡 / 右下：六角形分子） */
.job-icon {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.job-icon-01 {
    top: -250px;
    left: -40%;
    width: 495px;
}

.job-icon-02 {
    bottom: -10%;
    right: -40%;
    width: 696px;
}

.job .container-rica {
    position: relative;
    z-index: 1;
}

.job-card {
    display: flex;
    align-items: stretch;
    gap: 48px;
    border-radius: 25px;
    border: 2px solid transparent;
    padding: 17px 17px 17px 0;
    margin-bottom: 40px;
    color: #fff;
    box-shadow: 0 16px 36px rgba(0, 40, 110, .18);
    position: relative;
    z-index: 3;
}

.job-card:last-child {
    margin-bottom: 0;
}

/* カラーバリエーション */
.job-card--blue {
    background: #0077ee;
    border-color: #008cff;
}

.job-card--orange {
    background: #e48c00;
    border-color: #ff9523;
}

.job-card--green {
    background: #00b68b;
    border-color: #2dc3a0;
}

.job-card--blue .job-title {
    background: #0040d9;
}

.job-card--orange .job-title {
    background: #ea5c00;
}

.job-card--green .job-title {
    background: #007e59;
}

.job-card--blue .job-more {
    color: #0040d9;
    margin: auto;
}

.job-card--orange .job-more {
    color: #ea5c00;
    margin: auto;
}

.job-card--green .job-more {
    color: #007e59;
    margin: auto;
}

.job-card-img {
    flex: 0 0 44%;
    border-radius: 13px;
    overflow: hidden;
}

.job-card-img img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
}

.job-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

.job-num {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 170px;
    color: rgba(255, 255, 255, .22);
    line-height: .9;
    margin-bottom: 6px;
    text-align: center;
    position: relative;
    bottom: -20px;
    opacity: .5;
}

.job-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    border-radius: 4px;
    margin: 0 0 22px;
}

.job-text {
    font-size: 19px;
    color: #fff;
    padding: 0 2rem;
    margin: 0 0 28px;
}

/* 白いMoreボタン（文字色はカードごとに変化） */
.job-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    align-self: flex-start;
    margin-top: auto;
    min-width: 220px;
    padding: 15px 30px;
    background: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
    transition: transform .2s, box-shadow .2s;
}

.job-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 20, 60, .25);
}

.job-more .arrow {
    width: 18px;
    height: 8px;
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
}

.job-more .arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

.job-more .arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

/* =========================================================
   MEMBER
   ========================================================= */
.member {
    padding: 90px 0 100px;
    background: var(--light);
}

.member .sec-title {
    color: #1a2a44;
}

/* タイトル（左）＋ PREV/NEXT（右上） */
.member-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

.member-head .sec-head {
    margin-bottom: 0;
}

.member-nav {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
}

.member-arrow {
    position: relative;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: transform .2s, opacity .2s, background .2s;
}

.member-arrow:hover {
    transform: translateY(-2px);
}

.member-prev {
    background: #fff;
    border: 1px solid #cfd3da;
    color: #7c7c7c;
}

.member-next {
    background: var(--cyan);
    color: #fff;
}

/* 矢印（軸＋先端） */
.member-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.member-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.member-next::after {
    transform: translate(-20%, -50%) rotate(45deg);
}

.member-prev::after {
    transform: translate(-80%, -50%) rotate(-135deg);
}

/* カルーセル（右端まで伸ばす：左はコンテナ基準・右は画面端までブリード） */
.member-swiper {
    overflow: hidden;
    padding: 12px 0 22px;
    margin-top: -12px;
    margin-bottom: -22px;
    margin-right: calc(50% - 50vw);
}

.member-swiper .swiper-wrapper {
    align-items: flex-start;
}

.member-swiper .swiper-slide {
    width: 270px;
    height: auto;
}

/* 偶数カードはTOPに隙間を入れて下げる（千鳥配置） */
.member-slide--lower {
    margin-top: 44px;
}

.member-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(0, 40, 110, .12);
    transition: transform .25s, box-shadow .25s;
    height: 100%;
}

.member-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 36px rgba(0, 40, 110, .2);
}

.member-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.member-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-card-body {
    padding: 18px 20px 24px;
}

.member-name {
    font-size: 18px;
    font-weight: 700;
    color: #464646;
    margin: 0 0 6px;
}

.member-join {
    font-size: 13px;
    color: var(--cyan);
    font-weight: 500;
    margin: 0 0 2px;
}

.member-role {
    font-size: 14px;
    color: #464646;
    margin: 0;
}

/* =========================================================
   CAREER / ENVIRONMENT （左右分割）
   ========================================================= */
.career {
    /*padding: 100px 0;*/
    background: url("../images/career-bg.jpg")no-repeat top center/cover;
    position: relative;
    overflow-x: clip;
}

/* 左端のフラスコアイコン（CAREER） */
.career-icon {
    position: absolute;
    top: -80px;
    left: -300px;
    width: 300px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.career .container-rica {
    position: relative;
    z-index: 1;
}

.split-row {
    display: flex;
    align-items: stretch;
    gap: 64px;
}

/* CAREER は画像をセクション高さいっぱいまで伸ばす */
/*.career .split-row {
    min-height: 760px;
}*/

.split-row-reverse {
    flex-direction: row-reverse;
}

.split-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 0;
}

.split-desc {
    font-size: 16px;
    margin: 0 0 32px;
}

.split-images {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.split-images img {
    width: 100%;
    aspect-ratio: 16 / 9;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    box-shadow: 0 18px 40px rgba(0, 30, 90, .3);
    object-fit: cover;
}

.environment {
    /*padding: 100px 0 110px;*/
    background: url("../images/environment-bg.jpg")no-repeat top center/cover;
    position: relative;
    overflow-x: clip;
}

.env-icon {
    position: absolute;
    filter: drop-shadow(0 14px 24px rgba(0, 30, 90, .28));
    width: 300px;
    right: -325px;
    top: -110px;
    z-index: 2;
}

/* =========================================================
   RECRUIT
   ========================================================= */
.recruit {
    padding: 90px 0 110px;
    background: var(--light);
    overflow-x: clip;
}

.recruit-box {
    position: relative;
    background: linear-gradient(125deg, #2a9bff 0%, #0078ff 48%, #0059bd 100%);
    border: 4px solid #008cff;
    border-radius: 24px;
    padding: 64px 64px 72px;
    text-align: center;
    color: #fff;
    box-shadow: 0 24px 55px rgba(0, 40, 110, .25);
}

/* 左側にはみ出すフラスコ装飾 */
.recruit-flask {
    position: absolute;
    width: 210px;
    left: -95px;
    top: 20%;
    transform: translateY(-52%) rotate(-7deg);
    filter: drop-shadow(0 14px 24px rgba(0, 30, 90, .28));
    pointer-events: none;
    z-index: 2;
}

.recruit-text {
    font-size: 16px;
    margin: 0;
    color: #fff;
}

/* グラデーション背景に映える More ボタン */
.recruit .btn-more {
    background: #0040d9;
}

.recruit .btn-more:hover {
    box-shadow: 0 10px 24px rgba(0, 20, 70, .35);
}

/* =========================================================
   ENTRY
   ========================================================= */
.entry {
    padding: 96px 0 104px;
    background:
        url("../images/entry-bg.jpg")no-repeat top center/cover,
        var(--grad-blue);
    overflow-x: clip;
}

/* 左：キャッチコピー（白プレート）／右：風景ビジュアル */
.entry-inner {
    position: relative;
    margin-bottom: 44px;
    min-height: 300px;
}

.entry-icon {
    position: absolute;
    top: -160px;
    right: -450px;
    width: 400px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.entry-icon2 {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: -450px;
    width: 300px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.entry-visual {
    width: 90%;
    margin-left: auto;
}

.entry-visual img {
    width: 100%;
    border-radius: 16px;
    display: block;
}

.entry-catch {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}

.entry-catch-line {
    display: table;
    background: #fff;
    color: var(--blue);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    padding: 8px 22px;
    margin: 10px 0;
    border-radius: 4px;
}

/* 全幅オレンジ CTA ボタン */
.btn-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 28px 32px;
    background: var(--orange);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .12em;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0, 30, 90, .3);
    position: relative;
    transition: transform .2s, box-shadow .2s;
}

.btn-entry:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(0, 30, 90, .4);
}

.btn-entry .arrow {
    width: 18px;
    height: 2px;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.btn-entry .arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    transform: translateY(-50%);
}

.btn-entry .arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 9px;
    height: 9px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}

.btn-entry.last {
    background: url("../images/entry-btn-bg.png")no-repeat top center/cover;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    border-radius: 15px 15px 0 0;
    background: var(--light);
    padding: 60px 0 30px;
    position: relative;
    margin-top: -15px;
}

.footer-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.footer-logo img {
    height: 40px;
}

.footer-nav {
    display: flex;
    gap: 56px;
    padding-right: 50px;
}

.footer-nav .footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer-nav a {
    font-size: 15px;
    font-weight: 500;
    color: #4d4d4d;
    transition: color .2s;
}

.footer-nav a:hover {
    color: var(--cyan);
}

/* 就活ハラスメント相談窓口（ロゴ下に小さく） */
.footer-consult {
    margin-top: 24px;
    padding: 14px 20px;
    background: #fff;
    color: #4d4d4d;
}

.footer-consult__title {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.footer-consult__list {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}

.footer-consult__row {
    display: flex;
}

.footer-consult__row+.footer-consult__row {
    margin-top: 4px;
}

.footer-consult__row dt {
    flex: 0 0 6em;
    font-weight: 700;
}

.footer-consult__row dt::before {
    content: "■";
    color: var(--cyan);
    margin-right: .2em;
}

.footer-consult__row dd {
    margin: 0;
}

.footer-consult__row dd a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

.footer-consult__row dd a:hover {
    color: var(--cyan);
}

.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0;
    padding-inline: 24px;
    text-align: right;
}

.footer-bottom small {
    font-size: 13px;
    color: #555555;
}

/* ページトップ */
.page-top {
    position: absolute;
    right: 40px;
    bottom: 90px;
    width: 60px;
    height: 60px;
    background: var(--blue-dark);
    border: 1px solid var(--cyan);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, background .2s;
}

.page-top span {
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(-45deg);
    margin-top: 4px;
}

.page-top:hover {
    background: var(--cyan);
    transform: translateY(-4px);
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 991px) {
    .sec-title {
        font-size: 32px;
    }

    .intro-heading {
        font-size: 34px;
        left: -5%
    }

    /* グローバルナビをドロワー化 */
    .nav-toggle {
        display: block;
    }

    .header-entry {
        display: none;
    }

    .header-nav {
        position: fixed;
        inset: 80px 0 auto 0;
        background: #fff;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
        box-shadow: 0 12px 20px rgba(0, 0, 0, .08);
    }

    .header-nav.is-open {
        max-height: 70vh;
    }

    .nav-list {
        flex-direction: column;
        gap: 0;
        padding: 8px 0;
    }

    .nav-list li {
        border-bottom: 1px solid #eef1f6;
    }

    .nav-list a {
        display: block;
        padding: 16px 32px;
    }

    .job-card {
        flex-direction: column-reverse;
        gap: 28px;
        padding: 1.25rem;
    }

    .job-text {
        padding: 0;
    }

    .job-card-img {
        flex: none;
        aspect-ratio: 16 / 9;
    }

    .job-card-img img {
        min-height: 0;
    }

    .job-num {
        font-size: 60px;
    }

    .job-title {
        font-size: 24px;
    }

    .split-row,
    .split-row-reverse {
        flex-direction: column;
        gap: 40px;
    }

    .split-text {
        width: 100%;
        padding: 50px 0;
    }

    .split-images {
        width: 100%;
        flex: none;
        min-height: 0;
        flex-direction: row;
    }

    .split-img-1 {
        width: 100%;
    }

    .split-img-2 {
        position: relative;
        width: 70%;
    }

    .intro {
        padding-top: 80px;
    }

    .intro-card {
        padding: 1.25rem;
    }

    .recruit-box {
        padding: 56px 36px 60px;
    }

    /* ENTRY：タブレット以下は縦積み・中央寄せ */
    .entry-inner {
        min-height: 0;
        margin-bottom: 36px;
    }

    .entry-visual {
        width: 100%;
    }

    .entry-catch {
        transform: none;
        margin: 0 0 24px;
        text-align: center;
        right: 0;
        margin: auto;
        top: -10%;
    }

    .entry-catch-line {
        margin-inline: auto;
    }

    /** INTRO **/
    .intro-heading span {
        font-size: 1.6rem;
    }

    /** ICON **/
    .intro-flask {
        width: 225px;
        right: -35px;
        top: -70px;
    }

    .about-icon {
        width: 140px;
    }

    .job-icon-01 {
        top: -200px;
        left: -7%;
        width: 150px;
    }

    .job-icon-02 {
        bottom: -8%;
        right: -20%;
        width: 300px;
    }

    .career-icon {
        top: -100px;
        left: -3%;
        width: 100px;
    }

    .recruit-flask {
        width: 150px;
        left: -65px;
        top: 15%;
    }

    .entry-icon {
        top: -125px;
        right: -15%;
        width: 30%;
    }

}

@media (max-width: 767px) {

    .container-rica {
        padding-inline: 18px;
    }

    .about-icon {
        width: 110px;
        top: -28px;
        right: 14px;
    }

    .job-icon-01 {
        width: 90px;
        top: -130px;
        left: -30px;
    }

    .job-icon-02 {
        width: 110px;
        bottom: -120px;
        right: 0;
    }

    .sec-title {
        font-size: 26px;
    }

    .sec-sub {
        font-size: 14px;
    }

    .intro-heading {
        font-size: 28px;
    }

    .intro {
        padding: 60px 0 70px;
    }

    .about,
    .numbers,
    .job,
    .member,
    .career,
    .environment,
    .recruit {
        padding: 60px 0 70px;
    }

    .career,
    .environment {
        padding-bottom: 0;
    }

    .split-text {
        padding: 0;
    }


    .recruit-box {
        padding: 1.25rem;
    }

    .number-value {
        font-size: 48px;
    }

    .number-unit {
        font-size: 18px;
    }

    .entry-catch-line {
        font-size: 24px;
        padding: 5px 14px;
    }

    .btn-entry {
        font-size: 20px;
        padding: 18px 56px;
    }

    .btn-more {
        min-width: 180px;
        font-size: 16px;
        padding: 16px 24px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-nav {
        flex-direction: column;
        gap: 28px;
        padding-right: 0;
    }

    .footer-nav .footer-col {
        align-items: flex-start;
    }

    .footer-bottom {
        text-align: left;
    }

    .page-top {
        right: 18px;
        bottom: auto;
        top: -28px;
    }

    /** ICON **/
    .intro-flask {
        width: 35%;
        right: -10%;
        top: -50px;
    }

    .about-icon {
        width: 90px;
    }

    .numbers-flask {
        width: 50%;
        right: -19%;
        top: -60px;
    }

    .job-icon-01 {
        top: -150px;
        left: -10%;
        width: 100px;
    }

    .job-icon-02 {
        bottom: -5%;
        right: -15%;
        width: 40%;
    }

    .career-icon {
        top: -110px;
        left: -2%;
        width: 20%;
    }

    .recruit-flask {
        width: 30%;
        left: -30px;
        top: 5%;
    }

    .entry-icon {
        right: -7%;
    }
}

/* =========================================================
   グローバルナビ：ドロップダウン ／ フッター：サブリンク
   ========================================================= */
.nav-list .has-sub {
    position: relative;
}

/* リンクとメニューの隙間を埋めるホバーブリッジ */
.nav-list .has-sub::before {
    content: "";
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 34px;
}

.sub-menu {
    position: absolute;
    top: calc(100% + 26px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px;
    padding: 10px 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(0, 30, 90, .16);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 20;
}

.nav-list .has-sub:hover .sub-menu,
.nav-list .has-sub:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.sub-menu li+li {
    border-top: 1px solid #eef1f6;
}

.sub-menu a {
    display: block;
    padding: 12px 22px;
    font-size: 14px;
}

/* フッター：グループ配下のサブリンク */
.footer-sub {
    margin: 10px 0 4px;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-left: 2px solid #d4dae6;
}

.footer-sub a {
    font-size: 13px;
    color: #666;
}

/* モバイル：ドロップダウンはドロワー内に常時展開 */
@media (max-width: 991px) {
    .nav-list .has-sub::before {
        display: none;
    }

    .sub-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 0;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
        background: #f7f9fc;
    }

    .sub-menu li {
        border-top: 1px solid #eef1f6;
    }

    .sub-menu a {
        padding: 14px 32px 14px 48px;
        font-size: 14px;
    }
}

/* =========================================================
   スクロールで各ブロックをふわっと表示
   （.reveal は script.js が main section 配下へ自動付与）
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease-out, transform .7s ease-out;
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   写真のワイプ表示（青ベタ→右へ流れて画像が現れる）
   （.img-wipe / .img-wipe-plate は script.js が自動付与）
   ========================================================= */
.img-wipe-wrap {
    display: block;
    overflow: hidden;
}

.img-wipe-plate {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0078ff;
    border-radius: inherit;
    pointer-events: none;
    transform: scaleX(1);
    transform-origin: right center;
    transition: transform .9s cubic-bezier(.77, 0, .175, 1) .1s;
}

.img-wipe.is-wiped .img-wipe-plate {
    transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {

    .img-wipe-plate {
        display: none;
    }
}

/* ==========================================================
   座談会カード（assets/includes/discussion-card.php）
   採用情報TOP（/index.html）の .entry-card と同じデザイン
   ========================================================== */
.discussion-card-wrap {
    max-width: 800px;
    margin: 60px auto 0;
}

.discussion-card {
    position: relative;
    display: flex;
    min-height: 222px;
    /* 幅1080→800 に合わせて 300 × 800/1080 */
    background: #f4f6f9;
    border-right: 4px solid #009fe8;
    overflow: hidden;
    color: #222;
    text-decoration: none;
    font-feature-settings: "palt";
}

.discussion-card:hover {
    color: #222;
}

.discussion-card__img {
    position: relative;
    flex: 0 0 48%;
    overflow: hidden;
}

/* 写真の縦横比で高さが伸びないよう、カードの高さに合わせてトリミング */
.discussion-card__img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease-out;
}

.discussion-card__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 30px 72px 34px 30px;
    text-align: right;
    transition: background-color .3s ease-out;
}

/* 右下の三角 */
.discussion-card__body::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 38px 38px;
    border-color: transparent transparent #009fe8 transparent;
    transition: border-width .3s ease-out;
}

.discussion-card__en {
    margin: 0;
    font-family: "Lexend Deca", "Noto Sans JP", sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .06em;
    color: #009fe8;
    line-height: 1.4;
}

.discussion-card__title {
    margin: 6px 0 0;
    font-family: "Lexend Deca", "Noto Sans JP", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
}

.discussion-card:hover .discussion-card__img img {
    transform: scale(1.05);
}

.discussion-card:hover .discussion-card__body {
    background: #e6f5fd;
}

.discussion-card:hover .discussion-card__body::after {
    border-width: 0 0 50px 50px;
}

/* interview 一覧ではカードグリッドの下 */
.interview-grid-sec .discussion-card-wrap {
    margin-top: 100px;
}

/* interview 一覧は背景が #009fe8 で右線・三角が埋もれるため濃い青に */
.interview-grid-sec .discussion-card {
    border-right-color: #0040d9;
}

.interview-grid-sec .discussion-card__body::after {
    border-bottom-color: #0040d9;
}

@media (max-width: 767.98px) {
    .discussion-card-wrap,
    .interview-grid-sec .discussion-card-wrap {
        margin-top: 40px;
    }

    .discussion-card {
        min-height: 130px;
        border-right-width: 3px;
    }

    .discussion-card__img {
        flex-basis: 50%;
    }

    .discussion-card__body {
        padding: 16px 30px 18px 12px;
    }

    .discussion-card__body::after,
    .discussion-card:hover .discussion-card__body::after {
        border-width: 0 0 22px 22px;
    }

    .discussion-card__en {
        font-size: 10px;
        letter-spacing: .02em;
        white-space: nowrap;
    }

    .discussion-card__title {
        margin-top: 2px;
        font-size: 18px;
    }
}