:root {
    --main-color: #D22730;
    --color-theme: #D4AF37;
    --color-gray: #F9F6F1;
    /* --main-color: #b97777;
    --color-theme: #b97777;
    --color-gray: #ddd; */
    --box-shadow: .8rem .8rem 1.2rem rgba(0, 0, 0, .05), -.8rem -.8rem 1.2rem #fff;
    --box-shadow-hover: 1rem 1rem 1.5rem rgba(0, 0, 0, .08), -1rem -1rem 1.5rem #fff;
    --box-shadow-inset: inset .8rem .8rem 1.2rem rgba(0, 0, 0, .05), inset -.8rem -.8rem 1.2rem #fff;
    --box-shadow-dark: .8rem .8rem 1.2rem rgba(0, 0, 0, .1), -.8rem -.8rem 1.2rem rgba(#fff, .2);
    --transition: .8s var(--easing);
}

/* container 内のあれこれ ---------------------------*/
.container {
    max-width: 1024px !important;
}

@media screen and (max-width: 1024px) {
    .container {
        padding-left: .6875rem;
        padding-right: .6875rem;
    }
}

body {
    background-color: var(--color-gray);
    color: #333;
}

/* リンクカラー ---------------------------*/
.text_link {
    color: var(--color-theme);
}

/* footer前 CTAエリア -----------------------------*/
#cta_sign-up {
    /* background: linear-gradient(45deg, #26478C, #617fba, #26478C); */
    background: linear-gradient(45deg, #D22730, #de5454, #D22730);
    /*グラデーションを定義*/
    background-size: 200% 200%;
    /*サイズを大きくひきのばす*/
    animation: bggradient 20s ease infinite;
}

#cta_sign-up a:hover {
    background: #e94646;
    color: white;
}

#cta_sign-up a:hover img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(250deg) brightness(101%) contrast(104%);
}


@keyframes bggradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* hero-area メインビジュアル */


/* 共通タイトル -------------------------------------*/
.container .common_title {
    border-bottom: 1px solid #7c7b7b;
    font-size: 2rem;
    margin-bottom: 1.375rem;
    padding-bottom: .5rem;
    padding-top: .5rem;
}

.container #lead_area h2,.container #greeting_area h2 {
    font-weight: bold;
    font-size: clamp(2rem, 3vw, 2.7rem);
    margin-bottom: .6875rem;
}

.container #greeting_area h3 {
    font-weight: bold;
    /* font-size: 1.5rem; */
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    margin-bottom: .6875rem;
    margin-top: 2rem;
}


/* ページ遷移時の位置調整 -------------------------------------*/
[id]:target {
  scroll-margin-top: 104px; /* 例：headerが64px + 余白40px */
}


/***************************************************
メインビジュアル
***************************************************/

#main_view,
#main_view_right {
    position: relative;
    height: 500px;
    overflow: hidden;
    width: 100%;
}

/* メインビジュアル */
.mv_bg {
    position: absolute;
    top: 0%;
    /* top: 30%; */
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

.mv_bg::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

/* メインタイトルエリア */
.mv_title_inner {
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    justify-content: flex-end; /* 右揃え */
    overflow: hidden;
    /* border-radius: 50%; */
}

.mv_title_overlay {
    position: relative;
    width: 50%; /* 黒い枠を画面の半分に */
    background: rgba(0, 0, 0, 0.6); /* 黒いオーバーレイを重ねる */
    background-image: url('../images/mv_hand.png'); /* 背景画像を追加 */
    background-size: cover; /* 背景画像を全体に広げる */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    background-position: -100px center; /* 画像を左に20px移動 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
}

.mv_title_inner_right {
    position: relative;
    max-width: 100vw; 
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    justify-content: flex-end; /* 右揃え */
    overflow: hidden;
    /* border-radius: 50%; */
}

.mv_title_overlay_right {
    position: relative;
    width: 38%; /* 黒い枠を画面の半分に */
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 黒いオーバーレイを重ねる */
    background-image: url('../images/mv_hand.png'); /* 背景画像を追加 */
    background-size: cover; /* 背景画像を全体に広げる */
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    background-position: -100px center; /* 画像を左に20px移動 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
}

.mv_title_overlay::before,
.mv_title_overlay_right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* 黒いオーバーレイを重ねる */
    z-index: 1; /* オーバーレイを前面に表示 */
}

.mv_title_text,
.mv_title_text_right {
    position: relative; /* テキストをオーバーレイの上に表示 */
    color: white;
    padding: 1.5rem;
    text-align: center;
    z-index: 2; /* テキストを最前面に表示 */
}

.mv_title_text_right img {
    width: 80px; 
    margin-bottom: 0.5rem;
    margin-right: auto; 
    margin-left: auto;
}

.mv_title_text h1,
.mv_title_text_right h1 {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 2rem;
}

.main_view_pc img,
.main_view_sp img {
    width: 100vw;
    height: auto; /* アスペクト比を維持 */
    object-fit: cover; /* 必要に応じて追加: 画像が切れても全体を埋めたい場合 */
}

@media only screen and (min-width:1333px) and (max-width : 1650px) {
#main_view,
#main_view_right {
    position: relative;
    height: 400px;
    overflow: hidden;
    width: 100%;
}
}

@media only screen and (min-width: 768px) and (max-width: 1333px) {
    #main_view,
    #main_view_right {
        height: 230px; 
    }

    .mv_bg {
        top: 0%;
    }

    .mv_title_overlay_right {
        height: 100%;
        width: 40%;
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center; 
    }

    .mv_title_text_right {
        padding: 0.25rem; 
    }

    .mv_title_text_right img {
        width: 36px; 
        margin-bottom: 0.5rem; 
    }

    .mv_title_text_right h1 {
        font-size: 1.25rem;
        font-weight: bold;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .mv_title_text_right p {
        font-size: 0.875rem;
        line-height: 1.2;
        margin-bottom: 0.25rem;
    }

    .mv_title_text_right p:last-child {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 767px) ,print {
    #main_view_right {
        display: flex;
        flex-direction: column; /* 画像とボックスを縦並びに */
        align-items: stretch; /* 幅を親要素に合わせる */
        width: 100%; /* 全幅表示 */
        height: auto; /* 高さは自動調整 */
    }

    .mv_bg {
        position: relative; /* 重なりを防止 */
        width: 100%; /* 幅いっぱいに広げる */
        height: auto; /* 高さを自動調整 */
        z-index: 0; /* 背景が前に来ないように設定 */
    }

    .mv_bg img {
        width: 100%; /* 幅いっぱいに表示 */
        height: auto; /* アスペクト比を維持 */
        object-fit: cover; /* 必要に応じて画像を調整 */
    }

    .mv_title_inner_right {
        position: relative; /* 画像との重なりを防ぐ */
        width: 100%; /* 幅いっぱいに広げる */
        margin: 0; /* 余白をリセット */
        background-color: rgba(0, 0, 0, 0.8); /* 背景を黒に設定 */
        color: white; /* テキスト色を白に設定 */
        text-align: center; /* 中央揃え */
        z-index: 1; /* 画像の上に表示 */
        box-sizing: border-box; /* パディングを含めた幅を調整 */
    }

    .mv_title_overlay_right {
        display: flex;
        flex-direction: column; /* 縦並び */
        justify-content: center;
        align-items: center;
        width: 100%; /* 全幅表示 */
        height: auto; /* 高さを自動調整 */
        padding: 1rem; /* ボックスの余白 */
        z-index: 2; /* 黒いボックスが画像の上にくるよう調整 */
    }

    .mv_title_text_right {
        padding: 10px 0;
    }

    /* 画像とh1を横並びにする */
    .mv_title_text_right .text_title {
        display: flex; /* 横並び */
        justify-content: center; /* 左揃え */
        align-items: center; /* 縦方向で中央揃え */
        margin-bottom: 1rem; /* 下部余白を削除 */
        text-align: left; /* テキストを左揃え */
    }

    .mv_title_text_right img {
        margin-right: 1rem; /* 画像とテキストの間に余白 */
        margin-left: 0;
        margin-bottom: 0;
        width: 30px; /* 画像のサイズ調整 */
        height: auto; /* 高さは自動調整 */
    }

    .mv_title_text_right h1 {
        font-size: 1.75rem; /* 見出しのサイズ */
        margin-bottom: 0; /* 下部余白を削除 */
    }

    .mv_title_text_right p {
        font-size: 1rem; /* 本文のサイズ */
        line-height: 1.5; /* 行間を広げる */
    }

}







/* register_area -------------参加登録ボタン-------------*/
.register_btn {
    display: block;
    width: 60%;
    margin: 1.5rem auto 0 auto;
    background-color: var(--main-color);
    color: white;
    font-size: 1.5rem;
    padding: 1rem 4rem;
}
.register_btn_2 {
    display: block;
    width: 60%;
    margin: 1.5rem auto 0 auto;
    background-color: white;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    font-size: 1rem;
    padding: 0.5rem 4rem;
}

.register_btn:hover {
    background-color: #f3555d;
    transition-duration: 300ms;
}
.register_btn_2:hover {
    background-color: #ccc;
    transition-duration: 300ms;
}

@media only screen and (min-width:1333px) and (max-width : 1650px) {
    #main_view,
    #main_view_right {
        position: relative;
        height: 400px;
        overflow: hidden;
        width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1333px) {
    .register_btn, .register_btn_2 {
        width: 90%;
        font-size: 1.25rem;
        padding: 0.5rem 4rem;
        margin-top: 1rem;
        margin-right: auto;
        margin-left: auto;
    }
}

@media only screen and (max-width: 767px) {
    .register_btn, .register_btn_2 {
        width: 100%;
        margin: 1rem 0;
    }
}



/***************************************************
				header
***************************************************/

/* header-------------全体設定-------------*/
body>header {
    background-color: var(--main-color);
}


/* header -- sp nav ------------------ */
@media screen and (max-width: 1023px), print {

header>nav {
    height: 100%;
}

#navigation {
    /* margin-top: 5px; */
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-top: 1rem;
}

/* logo + btn */
#header__logo {
    height: 100%;
}

#header__logo .custom-logo-link {
    display: block;
    height: auto;
    margin-left: 8px;
    margin-top: 6px;
    width: 38px;
}

#header__logo .custom-logo-link:hover {
    opacity: .8;
}

#header__logo .logo_pc img {
    display: none;
}

#header__logo .logo_sp img {
    display: inline-block;
    width: 65px;
    height: autox;
    margin-left: 4px;
    margin-top: 10px;
    /* width: auto;
    height: 100%; */
}

/* header > button */
#header__logo>button {
    border-left: 1px solid var(--main-color);
    cursor: pointer;
    display: block;
    height: 65px;
    margin-left: auto;
    position: fixed;
    top: 0px;
    z-index: 40 !important;
    width: 65px;
}

/* hamburger button */
.hamburger {
    background-color: var(--main-color);
    right: 0px;
}

.hamburger.-active .hamburger__line {
    background-color: white;
}

.hamburger.-active .hamburger__line::before {
    top: 0;
    transform: rotate(45deg);
}

.hamburger.-active .hamburger__line::after {
    top: 0;
    transform: rotate(-45deg);
}

.hamburger.-active .hamburger__text::before {
    content: 'CLOSE';
}

.hamburger__line {
    display: block;
    height: 2px;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    background-color: white;
    transition: 0.4s;
}

.hamburger__line:before,
.hamburger__line:after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: white;
    transition: inherit;
}

.hamburger__line:before {
    top: -6px;
}

.hamburger__line:after {
    top: 6px;
}

.hamburger__text {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.hamburger__text::before {
    content: "MENU";
    text-align: center;
    color: white;
    font-size: 10px;
    font-weight: 900;
}

/* 共通スタイル */
.square_login,
.square_register {
    position: absolute;
}

.login__icon,
.register__icon {
    display: block;
    height: 21px;
    width: 21px;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.4s;
}

.login__icon::before,
.login__icon::after,
.register__icon::before,
.register__icon::after {
    font-family: "Font Awesome 5 Free";
    font-size: 18px;
    font-weight: 900;
    color: var(--white);
    display: block;
    position: absolute;
    text-align: center;
    transition: inherit;
    width: 100%;
}

/* 各ボタンの個別スタイル */
.square_login {
    right: 49px;
}

.square_register {
    right: 97px;
}

.login__icon::before {
    content: "\f007";
    opacity: 1;
}

.login__icon:hover::before, .login__icon:active::before {
    opacity: 0;
}

.login__icon::after {
    content: "\f26c";
    opacity: 0;
}

.login__icon:hover::after, .login__icon:active::after {
    opacity: 1;
}

.register__icon::before {
    content: "\f2f6";
    opacity: 1;
}

.register__icon:hover::before, .register__icon:active::before {
    opacity: 0;
}

.register__icon::after {
    content: "\e552";
    opacity: 0;
}

.register__icon:hover::after, .register__icon:active::after {
    opacity: 1;
}

.login__text, .register__text {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.login__text::before {
    content: "ログイン";
    color: var(--white);
    text-align: center;
    font-size: 10px;
    font-weight: 900;
}

.register__text::before {
    content: "登録する";
    color: var(--white);
    text-align: center;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

/* logo + btn */
/* 初期状態: ナビゲーションは非表示 */
.header__nav-area {
    background-color: white;
    opacity: 0;
    position: fixed;
    top: -100%;
    transition: all 0.4s ease-in-out;
    z-index: 10;
    visibility: hidden;
    width: 100%;
}

/* 表示時: ボタンがアクティブでナビゲーション表示 */
.header__nav-area.-active {
    opacity: 1;
    top: 65px; /* ナビゲーション表示位置 */
    visibility: visible;
}

/* ハンバーガーボタンのアクティブ時のスタイル */
.hamburger.-active .hamburger__line {
    background-color: white;
}

.hamburger.-active .hamburger__line:before {
    top: 0;
    transform: rotate(45deg);
}

.hamburger.-active .hamburger__line:after {
    top: 0;
    transform: rotate(-45deg);
}


/* navigation */
.header__nav-area .global-navigation {
    padding: 5px 12px;
}

.global-navigation__list a {
    color: var(--white);
    display: block;
    padding-bottom: 3px;
    padding-top: 3px;
}

.global-navigation__list a:hover {
    color: var(--room_d);
}

.global-navigation__list .box_btn a,
.global-navigation__list.circle_btn a {
    color: var(--main_color);
    background-color: var(--white);
}

.global-navigation__list .box_btn,
.global-navigation__list .circle_btn {
    display: inline-block;
    line-height: 2.5rem;
    margin-top: 2rem;
    height: 2.5rem;
    vertical-align: bottom;
}

.global-navigation__list .box_btn a {
    border-radius: 3px;
    display: inline;
    padding: 6px 1rem;
}

.global-navigation__list .circle_btn a {
    background-color: var(--white);
    border-radius: 50%;
    color: var(--main_color);
    display: inline-block;
    font-weight: bold;
    font-size: 32px;
    height: 2.0rem;
    line-height: 2.0rem;
    margin-left: 0.3rem;
    text-align: center;
    vertical-align: middle;
    width: 2.0rem;
}



}

/* header -- pc nav ------------------ */
@media screen and (min-width: 1024px) {
header>nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    /* max-width: 1024px; */
    max-width: 100%;
    padding: 0 40px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    align-items: center;
}

#navigation {
    align-self: center;
    height: 100%;
    width: calc(100% - 60px);
}

/* logo + btn */
#header__logo .custom-logo-link {
    display: block;
    height: auto;
    /* margin-left: 10px; */
    margin-top: 6px;
    width: 38px;
}

#header__logo .logo_pc img {
    display: inline-block;
    /* width: 360px; */
    width: 70px;
    height: auto;
    /* width: auto;
    height: 100%; */
}

#header__logo .logo_sp img {
    display: none;
}
/* navigation */
.global-navigation__list {
    display: flex;
    /* justify-content: center; */
    justify-content: flex-end;
    position: relative;
    height: 100%;
    align-items: center;
}

.global-navigation__list li {
    margin-left: 2rem;
}

.mr--pc {
    margin-right: 3.5em;
}

.global-navigation__list li a {
    display: block;
    height: 100%;
    color: var(--white);
}

.global-navigation__list li a:hover {
    color: var(--main-color);
}

/* .global-navigation__list li:last-child {
    position: absolute;
    right: 6px;
    height: 1.6rem;
    width: 1.6rem;
    background-color: var(--white);
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
} */

/* .global-navigation__list li:last-child:hover {
    background-color: #BA9325;
} */

/* .global-navigation__list li:last-child a {
    color: var(--main_color);
    font-weight: bold;
    font-size: 28px;
    vertical-align: middle;
    line-height: 1.6rem;
} */
}


/***************************************************
			配信画面
***************************************************/

/*アイコンと文字の位置調整*/
.nav-icon {
    vertical-align: -1px;
}

/*動画のサイズ調整*/
.embed_video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.embed_video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*チャットのサイズ調整*/
.video_comment {
    position: relative;
    width: 100%;
    height: 24rem;
}

.video_comment iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    overflow-y: scroll;
}

@media (min-width: 1024px) {
    .video_comment {
        position: relative;
        width: 100%;
        height: 100%;
        /*height: 86%; チャット欄上にコメントを載せる場合はこちらの数値にする*/
    }
}




/***************************************************
			以下、現時点で使用しないパーツ
***************************************************/


/***************************************************
				ご挨拶の日本語ver
***************************************************/

.section_body {
    border: 1px solid var(--main-color);
    border-radius: 4px;
    margin-top: 2rem;
    width: auto;
    cursor: pointer;
}

.section_body .jp_message_section {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    transition: .3s all;
    visibility: hidden;
    height: 0;
    min-height: 0;
    opacity: 0;
    padding: 0;
    cursor: pointer;
}

.section_body .jp_message_section .jp_message_content {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.section_body .jp_message_section p {
    line-height: 1.75;
    margin-bottom: 1rem;
    margin-top: 1rem;
    width: 100%;
}


/* 詳しくみるの開閉 */
.section_body .casesToggle {
    display: none;
}

.section_body .btn {
    color: var(--main-color);
    cursor: pointer;
    display: block;
    position: relative;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.25rem;
}

.section_body .btn::after {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--main-color);
    border-right: 3px solid var(--main-color);
    -webkit-transform: rotate(135deg);
    position: absolute;
    top: 50%;
    top: calc(50% - 10px);
    right: 24px;
    transform: rotate(135deg);
    transition: .3s;
}

.section_body .casesToggle:checked+.btn+.jp_message_section {
    height: auto;
    min-height: 200px;
    opacity: 1;
    padding: 0;
    transition: .3s all;
    visibility: visible;
}

.section_body .casesToggle:checked+.btn::after {
    transform: rotate(-45deg);
}

#case-pdf a:hover {
    color: var(--main-color);
}
@media screen and (max-width: 956px) {
    .section_body .jp_message_section {
        max-width: 90%;
    }

    .section_body .jp_message_section .jp_message_content {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .section_body .btn {
        text-align: left;
        padding-left: 1.25rem;
    }
}


/***************************************************
				swiper
***************************************************/
/* swiper slides -----------------------------------*/
.l-inner {
    position: relative;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    max-width: 1024px;
    margin: 0 auto;
}

[class*=swiper]:focus {
    outline: none;
}

.swiper-button-prev,
.swiper-button-next {
    display: grid;
    place-content: center;
    width: 2.4rem;
    height: 2.4rem;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
}

.swiper-button-prev::before,
.swiper-button-next::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    border-radius: 50%;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
}

.swiper-button-prev::after,
.swiper-button-next::after {
    width: 0.8rem;
    height: 0.8rem;
    content: "";
    border: solid var(--color-gray);
    border-width: 3px 3px 0 0;
}

.swiper-button-prev::after {
    margin-left: 0.3rem;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.swiper-button-next::after {
    margin-right: 0.3rem;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.swiper-button-disabled {
    pointer-events: none;
    opacity: 0;
}

.operators {
    overflow: hidden;
}

.operators .swiper {
    overflow: hidden;
}

.operators .swiper-controller {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 1.6rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 1.2rem;
}

.operators .swiper-pagination {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.2rem 0.8rem;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 0 auto 0 0;
    text-align: center;
}

.operators .swiper-pagination-bullet {
    width: 1.6rem;
    height: 3px;
    cursor: pointer;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    vertical-align: top;
    background-color: var(--color-gray);
}

.operators .swiper-pagination-bullet-active {
    width: 4rem;
    background-color: var(--color-theme);
}

.operators .swiper-button-prev,
.operators .swiper-button-next {
    position: relative;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0;
}

.operators .swiper-button-prev::before,
.operators .swiper-button-next::before {
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: var(--box-shadow-dark);
    box-shadow: var(--box-shadow-dark);
}

.operators .swiper-button-prev::after,
.operators .swiper-button-next::after {
    border-color: #fff;
}


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

    .operators .swiper-controller {
        padding-left: .6875rem;
        padding-right: .6875rem;
    }

    /* .operators .swiper-button-prev {
        right: calc(100% - 5.2rem);
    }

    .operators .swiper-button-next {
        left: calc(100% - 5.2rem);
    } */
}