@charset "UTF-8";

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  background-color: #F9F9F9;
  line-height: 2;
}

p > a.text-link {
    text-decoration: underline;
    color: #2F3DE1;
}

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

iframe {
    max-width: 100%;
}

/* ユーティリティ */
.wh {
    color: #fff;
}

.primary-color {
    color: #BF1A20;
}

.primary-bg {
    background-color: #BF1A20;
}

.ff-serif {
    font-family: "Noto Serif JP", serif;
}

.fwb {
    font-weight: bold;
}

.tdu {
    text-decoration: underline !important;
}

.center {
    text-align: center;
}

.p0 {
    padding: 0 !important;
}

.pb0 {
    padding-bottom: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

.mt16 {
    margin-top: 16px;
}

.mt30 {
    margin-top: 30px;
}

@media screen and (max-width: 1439px) {
    .sp-mt16 {
        margin-top: 16px;
    }
}

.fsz16 {
    font-size: 16px !important;
}
.fsz20 {
    font-size: 20px !important;
}
.fsz32 {
    font-size: clamp(20px, 2.23vw, 32px);
}
.fsz40 {
    font-size: clamp(20px, 2.78vw, 40px);
}

img.reverse {
    transform: scaleX(-1);
}

@media screen and (max-width: 1439px) {
    .is-pc {
        display: none;
    }
}
@media screen and (min-width: 1440px) {
    .is-sp {
        display: none;
    }
}
/* ユーティリティ */

/* レイアウト */
section {
    padding: 100px 10px;
}

.section__inner {
    max-width: 1200px;
    margin: 0 auto;
}

@media screen and (max-width: 1439px) {
    section {
        padding: 50px 10px;
    }
}
/* レイアウト */


/* セクションタイトル */
.section__title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 60px;
    text-align: left;
}

.section____title--problem {
    display: inline-flex;
    background-color: #F9F9F9;
}

.section__title-en {
    font-size: clamp(30px, 4.16vw, 60px);
    font-family: "Noto Serif JP", serif;
    line-height: 1.43;
}

.section__title-en--white {
    color: #FFF;
}

.section__title-en--black {
    color: #333;
}

.section__title-en span {
    color: #BF1A20;
}

.section__title-ja {
    font-size: clamp(20px, 1.67vw, 24px);
    line-height: 1.2;
    color: #333;
}

.section__title-ja--white {
    color: #FFF;
}
/* セクションタイトル */

/* ボタン */
.c-btn {
    border-radius: 999px;
    padding: 16px 20px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
    height: fit-content;
    /* min-width: 194px; */
    transition: all ease-in .2s;
    box-sizing: border-box;
}

.c-btn--contact {
    background-color: #BF1A20;
    color: #fff;
    border: 1px solid #BF1A20;
}
.c-btn--contact:hover {
    background-color: #fff;
    color: #BF1A20;
}
.c-btn--contact svg {
    fill: #FFF;
    transition: all ease-in .2s;
}
.c-btn--contact:hover svg {
    fill: #BF1A20;
}

.c-btn--download {
    background-color: #fff;
    color: #BF1A20;
    border: 1px solid #BF1A20;
    text-align: center;
}
.c-btn--download:hover {
    background-color: #BF1A20;
    color: #fff;
}
.c-btn--download svg {
    fill: #fff;
    stroke: #BF1A20;
    transition: all ease-in .2s;
}
.c-btn--download:hover svg {
    fill: #BF1A20;
    stroke: #fff;
}

.c-btn a {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

/* ボタン */

/* リスト */
.c-lists {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c-list-item {
    position: relative;
    padding-left: 18px;
}

.c-list-item::after {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: #BF1A20;
    left: 0;
    top: 11px;
    border-radius: 999px;
}

/* リスト */

/* カード要素 */
.c-cards {
    width: 100%;
    display: flex;
    gap: 24px;
}

.c-card {
    width: calc((100% - 48px) / 3);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
    transition: all .2s ease-in;
    overflow: hidden;
}

.c-card__link {
    width: 100%;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

.c-card__foot {
        display: flex;
        flex-direction: column;
        gap: 8px;
        
}

.c-card__categories {
    display: flex;
    gap: 8px;
    color: #929292;
}

.c-card__tags {
    display: flex;
    gap: 8px;
    color: #929292;
}

.c-card__btn {
        display: inline-flex;
        padding: 10px 10px 10px 20px;
        background: #FFFFFF;
        box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.1);
        border-radius: 30px 0px 8px;
        margin-left: auto;
        gap: 10px;
        font-weight: bold;
        transition: all .2s ease-in;
}

@media screen and (max-width: 768px) {
    .c-cards {
        flex-direction: column;
    }

    .c-card {
        width: 100%;
    }
}

    /* ホバー時 */
        .c-card:hover {
            box-shadow: none;
            transform: translateY(-10px);
        }   
        .c-card:hover .c-card__btn {
            color: #BF1A20;
        }
    /* ホバー時 */

    /* お悩み */
    .problem__card__head {
        height: 200px;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-position: center;
    }
    .problem__card__head::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(51, 51, 51, 0.7);
        z-index: 1;
    }


    h3.problem__card__title {
        color: #fff;
        font-weight: bold;
        font-size: clamp(18px, 1.67vw, 24px);
        text-align: center;
        position: relative;
        z-index: 2;
    }

    h3.problem__card__title span {
        display: inline-block;
        font-size: 1.34em;
        line-height: 1.5;
    }

    .problem__card__body {
        padding: 32px 24px;
    }



    /* お悩み */

    /* 導入実績 */
    .works__card__head {
        width: 100%;
    }
    .works__card__head img {
        width: 100%;
    }

    .works__card__body {
        display: flex;
        flex-direction: column;
    }

    .c-card__inner--works {
        padding: 32px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .works__card__company {
        font-weight: bold;
        font-size: 16px;
    }

    .works__card__results {
        font-size: clamp(24px, 2.23vw, 32px);
    }

    .works__card__info {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .works__card__info dl {
        display: flex;
        gap: 8px;
    }

    .works__card__info dl dt {
        color: #fff;
        display: inline-block;
        background-color: #929292;
        font-weight: bold;
        height: fit-content;
        padding: 0 8px;
        white-space: nowrap;
    }

    .works__card__info dl dd {
        color: #929292;
    }
    /* 導入実績 */

    /* コラム */
    .column__card__head {
        width: 100%;
    }
    .column__card__head img {
        width: 100%;
    }

    .column__card__body {
        display: flex;
        flex-direction: column;
    }

    .c-card__inner--column {
        display: flex;
        flex-direction: column;
        padding: 32px 24px;
        gap: 16px;
    }

    h3.column__card__title {
        font-size: clamp(24px, 2.23vw, 32px);
    }

    .column__card__desc {
        font-size: 14px;
    }

    .column__card__date {
        color: #929292;
    }
    /* コラム */

/* カード要素 */

/* リンク */
.link-area {
    padding: 100px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.c-link {
    display: flex;
    gap: 8px;
    font-size: 20px;
    font-weight: bold;
    transition: all .2s ease-in;
}
.c-link:hover {
    color: #BF1A20;
}
.c-link img {
    transition: all .2s ease-in;
}
.c-link:hover img {
    transform: translateX(-10px);
}

@media screen and (max-width: 1439px) {
    .link-area {
        padding: 50px 10px;
    }
}
/* リンク */

/* ニュース */
    .news__lists {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 30px;
    }

    .news__list-item {
        padding-bottom: 8px;
        border-bottom: #929292 1px solid;
    }

    .news__info {
        display: flex;
        gap: 16px;
        align-content: center;
    }

    .news__date {
        font-size: 20px;
    }

    .news__categories {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .news__category {
        padding: 0 8px;
        background-color: #BF1A20;
        color: #FFF;
        font-size: 14px;
    }

    .news__title {
        font-size: 20px;
    }
/* ニュース */

/* タブ切り替え */
.c-tab {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 62.5px;
  align-items: center;
}

.c-tab__btns {
    display: flex;
    gap: 25px;
    width: 100%;
    max-width: 910px;
}

.c-tab__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 26px;
    background: #F9F9F9;
    box-shadow: 4px 0px 4px #FFFFFF, 4px 4px 4px #FFFFFF, inset 4px 4px 4px rgba(51, 51, 51, 0.1);
    border-radius: 10px;
    border: none;
    flex: 1;
    font-weight: bold;
}

.c-tab__btn.active {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 26px;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(51, 51, 51, 0.1);
    border-radius: 10px;
}

.c-tab__list-item {
  display: none; 
  padding: 26px;
  animation: fade 0.5s ease;
  background: #FFFFFF;
  box-shadow: 4px 4px 4px rgba(51, 51, 51, 0.1);
  border-radius: 8px;
}

.c-tab__list-item__inner {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

.c-tab__list-item__inner img {
    max-width: 427px;
    min-height: 320px;
    object-fit: cover;
}

.c-tab__list-item__content {
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.c-tab__list-item__title {
    font-size: clamp(24px, 2.23vw, 32px);
}

.c-tab__list-item.active {
  display: block; 
}

/* アニメーションの設定 */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media screen and (max-width: 1439px) {
    .c-tab__list-item__inner {
        flex-direction: column;
    }

    .c-tab__head img {
        max-width: 100%;
    }
    .c-tab__btns {
        gap: 0;
    }

}
/* タブ切り替え */

/* ヘッダー */
header {
    background-color: #fff;
    padding: 40px 10px;
    width: 100%;
    z-index: 999;
    border-radius: 0 0 40px 40px;
}

.header__inner {
    max-width: 1367px;
    margin: 0 auto;
}

.header__nav {
    display: flex;
    align-items: center;
}

.header__logo {
    min-width: 120px;
    position: relative;
    z-index: 999;
}

.header__menu {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-grow: 1;
}

.header__nav {
    display: flex;
    gap: 80px;
}

.header__lists {
    display: flex;
}

.header__list-item {
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.2;
}

.header__list-item__en {
    font-size: 20px;
    font-weight: bold;
    font-family: "Noto Serif JP", serif;
}

.header__list-item__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.header__cta {
    display: flex;
    gap: 20px;
    align-items: center; 
}

/* ドロップダウンの親要素の基準位置を設定 */
.has-child {
    position: relative;
}

/* ドロップダウンメニューの基本スタイル（初期状態は非表示） */
.header__dropdown {
    display: none;
    position: absolute;
    top: 100%; /* 親要素の真下に配置 */
    left: 0;
    width: 300px;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    z-index: 100;
}

/* ドロップダウン内のリストアイテムのスタイル */
.header__dropdown li a {
    display: block;
    padding: 10px 20px;
    color: #333333;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s;
}

.header__dropdown li a:hover {
    background-color: #f5f5f5;
}

/* JavaScriptで付与するクラス（これをつけると表示される） */
.header__dropdown.is-open {
    display: block;
}

/* スクロールして付与されるクラス */
    header.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        /* スライドアニメーションの適用 */
        animation: slideDown 0.3s ease-out forwards;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 浮き出ているように見せる軽い影 */
    }

    /* 上からひょこっと降りてくるアニメーションキーフレーム */
    @keyframes slideDown {
        from {
            transform: translateY(-100%);
        }
        to {
            transform: translateY(0);
        }
    }

/* SP */
/* =========================================================
   ハンバーガーメニュー (SP用)
========================================================= */
@media screen and (max-width: 1439px) {
    header {
        padding: 20px 40px;
    }
    /* --- ハンバーガーボタン --- */
    .hamburger {
        display: block; /* SPで表示 */
        position: relative;
        width: 30px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 100; /* メニューより手前に配置 */
        margin-left: auto; /* ロゴの右側に寄せる */
    }

    /* 3本線の設定 */
    .hamburger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #333; /* 線の色 */
        transition: all 0.3s ease-in-out;
    }
    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .hamburger span:nth-child(3) { bottom: 0; }

    /* メニュー展開時（×ボタンに変形） */
    .hamburger.is-active span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    .hamburger.is-active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.is-active span:nth-child(3) {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }

    /* --- スライドメニュー --- */
    .header__menu {
        position: fixed;
        top: 0;
        left: 0; /* 右からのスライドを解除し、左固定に変更 */
        width: 100%; /* メニューの横幅 */
        height: 100vh;
        background-color: #fff; /* メニューの背景色 */
        z-index: 90;
        /* フェードインのアニメーションに変更 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        padding: 100px 20px 40px; /* 上部はロゴ分余白を空ける（80pxから100pxに変更） */
        overflow-y: auto; /* メニューが長い場合はスクロール可能に */
        flex-direction: column;
        z-index: 2;
        justify-content: initial;
    }

    /* メニュー展開時（フェードイン） */
    .header__menu.is-active {
        opacity: 1;
        visibility: visible;
    }

    /* --- メニュー内のレイアウト調整（縦並びに） --- */
    .header__lists {
        display: flex;
        flex-direction: column;
        gap: 20px; /* リンクの余白 */
        align-items: flex-start;
    }
    
    .header__list-item {
        width: 100%;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
    }

    .header__list-item__link {
        flex-direction: row;
        justify-content: flex-start;
        

    }

    .header__dropdown {
        display: block;
    }
    
    .header__cta {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
    }

    .header__menu.is-active .c-btn {
        width: 80%;
    }

    /* ▼ SP時の事業紹介アコーディオン化 ▼ */
    .header__dropdown {
        position: static; /* 絶対配置を解除して下に押し下げる */
        width: 100%;
        box-shadow: none;
        padding: 10px 0 0 20px; /* 少し右にずらして階層をわかりやすく */
        background-color: transparent;
        display: none; /* 初期状態は非表示 */
    }
    
    .header__dropdown li a {
        padding: 12px 0; /* タップしやすいように上下の余白を調整 */
    }
    /* ▲ アコーディオン化ここまで ▲ */
    
    /* 背景固定用クラス（スクロール防止） */
    body.is-fixed {
        overflow: hidden;
    }

}

/* PCサイズではハンバーガーボタンを非表示にする */
@media screen and (min-width: 1440px) {
    .hamburger {
        display: none;
    }
}
/* SP */

/* カレント */
/* =========================================================
   PC用 マジックライン（追従するアンダーバー）
========================================================= */
@media screen and (min-width: 769px) {
    /* 基準点にするため relative を追加 */
    .header__lists {
        position: relative;
        display: flex; /* PC時の横並び想定 */
    }

    /* JavaScriptで生成する赤い線のデザイン */
    .header__magic-line {
        position: absolute;
        bottom: -20px; /* メニューテキストから少し下げる */
        left: 0;
        width: 0; /* 初期値は0（JSで上書きされます） */
        height: 3px; /* 線の太さ */
        background-color: #BF1A20; /* 線の色（赤） */
        border-radius: 999px;
        /* 滑らかに移動させるためのトランジション設定 */
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        pointer-events: none; /* 線自体がクリック判定の邪魔をしないようにする */
        z-index: 10;
    }
}

/* SPサイズでは線を非表示（縦並びメニューのため） */
@media screen and (max-width: 768px) {
    .header__magic-line {
        display: none;
    }
    
    /* SP版のシンプルなカレント表示（必要であれば） */
    .header__list-item.is-current .header__list-item__link {
        color: #BF1A20;
    }
}
/* カレント */
/* ヘッダー */

/* フッター */
footer {
    background-color: #333;
}
    /* CTA */
    .cta {
        display: flex;
        width: 100%;
    }

    .cta__contact {
        display: flex;
        justify-content: space-between;
        background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(/img/contact-bg.webp);
        background-size: cover;
        flex: 0 0 50%;
        padding: 100px 20px 100px 60px;
    }
    
    .cta__contact img[src="/img/arrow-link.svg"], .cta__download img[src="/img/arrow-link.svg"] {
        transition: all ease-in .2s;
    }

    .cta__contact:hover img[src="/img/arrow-link.svg"], .cta__download:hover img[src="/img/arrow-link.svg"] {
        margin-right: 10px;
    }

    .cta__download {
        display: flex;
        justify-content: space-between;
        background-image: url(/img/download1.png);
        background-size: cover;
        flex: 0 0 50%;
        padding: 100px 20px 100px 60px;
    }

    .cta__desc {
        color: #FFF;
        font-size: clamp(18px, 1.67vw, 24px);
        font-weight: bold;
        text-align: left;
    }
    
    .cta__desc--download {
        color: #333;
        font-size: clamp(18px, 1.67vw, 24px);
        font-weight: bold;
    }
    /* CTA */

    /* フッターナビ */
    footer {
        width: 100%;
    }
    .footer__inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 100px 10px 60px;
        color: #fff;
    }

    .footer__nav {
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    .footer__logo {
        min-width: 120px;
    }

    .footer__menu {
        display: flex;
        /* gap: 181px; */
        align-items: center;
        justify-content: space-between;
    }

    .footer__lists {
        display: flex;
        gap: 16px;
    }

    .footer__list-item {
        font-weight: bold;
    }


    .footer__terms__lists {
        display: flex;
        gap: 20px;
        justify-content: flex-end;
    }

    .footer__terms__list-item {
        font-size: 14px;
        font-weight: bold;
    }
    /* フッターナビ */

    @media screen and (max-width: 1439px) {
        .cta {
            flex-direction: column;
        }

        .cta__contact {
            padding: 50px 10px 50px 10px;
        }        

        .cta__download {
            padding: 50px 10px 50px 10px;
        }

        .footer__inner {
            padding: 50px 10px 20px;
        }
        
        .footer__menu {
            gap: initial;
            /* justify-content: space-between; */
            display: grid;
            grid-template-columns: 1fr 1.5fr;
        }

        .footer__lists {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .footer__terms__lists {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
    }
/* フッター */

/* スライダー */
.c-main-visual {
  width: 100%;
  height: 700px; /* 画面いっぱいに表示 */
  overflow: hidden;
  position: relative;
}

img.mv-left {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    height: 100%;
    width: auto;
}
img.mv-right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    height: 100%;
    width: auto;
}


.fv-cta {
    position: relative;
    top: -200px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.fv-slider__item {
  height: 700px;
  display: flex !important; /* slickの仕様上 !importantが必要な場合があります */
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  position: relative;
}

.fv-slider__item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(51, 51, 51, 0.7);
    z-index: 1;

}

/* 背景画像の設定（疑似要素を使わない透過手法を応用） */
.fv-slider__item--01 { background-image: url('/img/mv1.webp'); }
.fv-slider__item--02 { background-image: url('/img/mv2.webp'); }
.fv-slider__item--03 { background-image: url('/img/mv3.webp'); }
.fv-slider__item--04 { background-image: url('/img/mv4.webp'); }
.fv-slider__item--05 { background-image: url('/img/mv1.webp'); }

.fv-slider__content {
  color: #fff;
  text-align: left;
  position: relative;
  z-index: 2;
}
.fv-slider__content h1,
.fv-slider__content h2 {
    font-size: clamp(32px, 4.45vw, 64px);
    line-height: 1.5;
}

/* =========================================================
   FVスライダー 矢印（Slick）
========================================================= */
/* スライダー親要素を基準点にする */
.fv-slider {
    position: relative;
}

/* 矢印ボタンの共通設定 */
.fv-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 38px;
    height: 38px;
    background-color: transparent !important;
    background-image: url(/img/arrow.svg);
    background-repeat: no-repeat;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.fv-slider__arrow--next {
    transform: translateY(-50%) rotate(180deg);
}


/* ホバー時のアクション */
.fv-slider__arrow:hover {
    background-color: rgba(255, 255, 255, 1);
}

/* 左右の配置位置 */
.fv-slider__arrow--prev {
    left: 124px; /* 左からの余白 */
}
.fv-slider__arrow--next {
    right: 124px; /* 右からの余白 */
}

/* CSSで「くの字」の矢印アイコンを作る */
.fv-slider__arrow::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    /* border-top: 2px solid #333; 
    border-right: 2px solid #333; */
}

/* 左向きにする */
.fv-slider__arrow--prev::before {
    transform: rotate(-135deg);
    margin-left: 6px; /* 視覚的な中央調整 */
}

/* 右向きにする */
.fv-slider__arrow--next::before {
    transform: rotate(45deg);
    margin-right: 6px; /* 視覚的な中央調整 */
}

/* --- SPサイズの調整（矢印を少し小さくする等） --- */
@media screen and (max-width: 768px) {
    .c-main-visual {
        height: 400px;
    }

    .fv-slider__item {
        height: 400px;
    }

    .fv-slider__arrow {
        display: none !important;
        width: 40px;
        height: 40px;
    }
    .fv-slider__arrow--prev {
        left: 10px;
    }
    .fv-slider__arrow--next {
        right: 10px;
    }
    .fv-slider__arrow::before {
        width: 10px;
        height: 10px;
    }

    .mv-left, .mv-right {
        display: none;
    }

    .fv-slider__arrow {
        top: 65%;
    }

    .fv-cta {
        display: none;
    }
}

/* slickのドット（ナビゲーション）の調整 */
.slick-dots {
    bottom: 40px;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.82);
    display: flex;
    padding: 6px 20px;
    border-radius: 999px;
}

.slick-dots li {
    width: 12px;
    height: 12px;
}

.slick-dots li button {
    width: 12px;
    height: 12px;
}

.slick-dots li button:before {
    width: 12px;
    height: 12px;
    color: transparent;
    background: #fff;
    border-radius: 999px;
    opacity: initial;
    border: 1px solid #bf1a20;
}

.slick-dots li.slick-active button:before {
    color: transparent;
    background-color: #BF1A20;
}
/* スライダー */

/* 背景 */
.bg-right {
    position: relative;
}
.bg-right::before {
    position: absolute;
    content: "";
    width: 93.75%;
    height: 488px;
    background-color: #BF1A20;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.bg-left {
    position: relative;
}
.bg-left::before {
    position: absolute;
    content: "";
    width: 93.75%;
    height: 488px;
    background-color: #BF1A20;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.bg-solution {
    background-image: url(/img/solution-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-business {
    background-image: url(/img/business-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 1439px) {
    .bg-right::before {
        height: 90%;
    }

    .bg-left::before {
        height: 90%;
    }
}
/* 背景 */

/* 事業セクション */
.business__contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}

.business__desc {
    font-size: clamp(20px, 1.67vw, 24px);
}
/* 事業セクション */

/* ピックアップセクション */
.pickup__contents {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.pickup__bnr {
    transition: all ease-in .2s;
}
.pickup__bnr:hover {
    opacity: .7;
}
/* ピックアップセクション */

/* パンくずリスト */
/* 親要素（横並びにする） */
.c-breadcrumbs__list {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 20px;
}

/* リンクテキスト（管理画面で設定したクラス） */
.c-breadcrumbs__link {
    color: #333;
    text-decoration: none;
}

/* 区切り文字（<li>の自動クラスを利用） */
.c-breadcrumbs__list li::after {
    content: "＞";
    margin-left: 10px;
}

/* 最後の項目（現在のページ）は区切り文字を消す */
.c-breadcrumbs__list li:last-child::after {
    display: none;
}

/* 現在のページだけ文字色を変える（自動出力クラスを利用） */
.current-item {
    color: #999;
}
/* パンくずリスト */

/* アニメーション */
/* アニメーション前の初期状態（透明 ＆ 少し下に配置） */
.js-fade-up {
    opacity: 0;
    transform: translateY(40px); /* 40px下から移動。お好みで数値を調整してください */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 0.8秒かけてアニメーション */
}

/* 画面内に入ってアニメーションが発火した状態 */
.js-fade-up.is-active {
    opacity: 1;
    transform: translateY(0);
}
/* アニメーション */