@charset "utf-8";

:root {
    --main-font-family: "Inter", sans-serif;
    --sub-font-family: "Anton", sans-serif;
    --ask-font-family: "Alumni Sans", sans-serif;
}

html {
    width: 100%;
    height: auto;
}

body {
    cursor: none !important;
    font-family: var(--main-font-family);
}

a {
    cursor: none !important;
}

button {
    cursor: none !important;
}

.br_480 {
    display: none;
}

.pc_content {
    display: block;
}

.comp_content_mess_textarea_pc_img {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.sp_content {
    display: none;
}

.comp_content_mess_textarea_medium_img {
    display: none;
}

#cursor {
    position: fixed;
    background: rgba(163, 161, 161, 0.9);
    border-radius: 50px;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
    display: flex;
    /* 追加: ホバー時のコンテンツを中央に配置するため */
    justify-content: center;
    /* 追加 */
    align-items: center;
    /* 追加 */
    font-size: 1rem;
    /* 追加: テキスト表示用 */
    color: #fff;
    /* 追加: テキスト色 */
    overflow: hidden;
    /* 追加: 画像がはみ出さないように */
}

#cursor.is-active {
    background: rgba(163, 161, 161, 0);
    border: 1px solid rgb(163, 161, 161);
    border-radius: 100%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    opacity: 1;
    /* ホバー時に完全に表示 */
}

/* 1. footer_map_trigger ホバー時のスタイル */
#cursor.is-map-active {
    width: 400px;
    height: 400px;
    margin: -200px 0 0 -200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(https://oikawa-ce.com/assets/img/footer_map_img.webp);
    border: none;
    /* 必要であればボーダーを削除 */
    color: transparent;
    /* テキストを非表示にする */
}

/* 2. footer_content ホバー時のスタイル */
#cursor.is-next-active,
#cursor.is-about-active,
#cursor.is-about-panel-active {
    /* background: rgba(0, 0, 0, 0.6); */
    /* 例: 背景色を変更 */
    color: #fff;
    /* テキスト色を白に */
    font-weight: bold;
    font-size: 1.5rem;
    /* テキストを大きく */
}

#cursor.is-next-active::before {
    content: 'Next →';
    /* テキストを表示 */
}

#cursor.is-about-active::before {
    content: 'Click';
    /* テキストを表示 */
}

#cursor.is-about-panel-active::before {
    content: 'Scroll';
    /* テキストを表示 */
}

#cursor.is-comp-next-active,
#cursor.is-comp-prev-active {
    border: none;
}

#cursor.is-comp-next-active::before {
    content: '＞';
    font-size: 100px;
    /* テキストを表示 */
}

#cursor.is-comp-prev-active::before {
    content: '＜';
    font-size: 100px;
    /* テキストを表示 */
}


header {
    margin: 0px 0 0;
    height: 90px;
    padding: 0px 0px 0 0px;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: stretch;
    /* z-index: 50; */
    z-index: 1000;
}

.lower_kv header {
    width: 100%;
    position: fixed;
}

.menu-open header {
    background-color: rgba(0, 0, 0, 0);
}

.main_title {
    padding: 0 0 0 50px;
    width: auto;
    height: 90px;
    font-size: 24px;
    line-height: 1;
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* オーバーレイ時にタイトル黒文字 */
.overlay.active~header .main_title {
    color: #000;
}

.hamburger_area {
    width: 90px;
    height: 90px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger {
    margin: 0 auto;
    position: relative;
    width: 30px;
    height: 20px;
}

.hamburger_open,
.hamburger_close {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 20px;
    transition: opacity 0.3s ease;
}

/* ハンバーガーのバー共通 */
.hamburger_open .bar-1,
.hamburger_open .bar-2,
.hamburger_close .bar-1,
.hamburger_close .bar-2 {
    position: absolute;
    width: 30px;
    height: 4px;
    transition: all 0.3s ease;
    border-radius: 2px;
    background-color: #fff;
}

/* オーバーレイ時にバーを黒に */
.overlay.active~header .hamburger_open .bar-1,
.overlay.active~header .hamburger_open .bar-2,
.overlay.active~header .hamburger_close .bar-1,
.overlay.active~header .hamburger_close .bar-2 {
    background-color: #000;
}

/* オープン状態の2本線 */
.hamburger_open .bar-1 {
    top: 2px;
}

.hamburger_open .bar-2 {
    top: 12px;
}

/* クローズ（×）状態：最初は非表示 */
.hamburger_close {
    opacity: 0;
    pointer-events: none;
}

.hamburger_close .bar-1 {
    top: 8px;
    transform: rotate(45deg);
}

.hamburger_close .bar-2 {
    top: 8px;
    transform: rotate(-45deg);
}

/* アクティブ時：表示切り替え */
.hamburger.active .hamburger_open {
    opacity: 0;
    pointer-events: none;
}

.hamburger.active .hamburger_close {
    opacity: 1;
    pointer-events: auto;
}

/* メニュー */
.menu {
    width: auto;
    margin: 0 0 0 auto;
    display: none;
    /* background: #f9f9f9; */
    padding: 90px 120px 0px 0;
    z-index: 950;
}

.menu.active {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 50px;
}

.menu_link_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 100px;
    line-height: 1;
}

.menu_main_ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 20px;
}

.menu_link_area h2 {
    width: fit-content;
    font-size: 4rem;
    font-weight: bold;
}

.menu_link_area h3 {
    font-size: 1.5rem;
    font-weight: bold;
}

.menu_sub_ul {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
}

.menu_sub_ul h4 {
    font-size: 1.25rem;
}

.menu_sub_ul h4.bold {
    font-weight: bold;
}

.menu small {
    text-align: right;
}

/* オーバーレイ（幕） */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* オーバーレイ表示時 */
.overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* その他 z-index 調整（必要に応じて） */
header,
.menu {
    /* z-index: 100; */
    position: relative;
}

.top_kv {
    height: 100dvh;
    width: 100%;
    background-color: #000;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    overflow: hidden;
}

.video {
    position: absolute;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    /* background-color: rgba(0, 0, 0, 0.5); */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.video video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.top_content {
    margin: 0 auto;
    width: 1200px;
    height: 680px;
    display: flex;
    z-index: 5;
}

.top_content.center {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.top_content.up {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.top_content.down {
    align-items: flex-end;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

.top_content.left {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
}

.top_content.right {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}

.top_content #text-area {
    color: #fff;
    font-weight: bold;
    font-size: 200px;
}

.top_cc {
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    color: #fff;
    font-weight: bold;
    font-size: 50px;
    z-index: 5;
}



footer {
    color: #fff;
    margin: 0px 0 0;
    height: 70px;
    padding: 0px 20px 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 50;
}

.sns_area {
    display: flex;
}

.sns_area ul {
    display: flex;
    gap: 50px;
}

.tel_area {
    display: flex;
}

.tel_area ul {
    display: flex;
    gap: 50px;
}

.link_text {
    font-size: 1.25rem;
    padding: 20px;
}

/* 下層ページ共通 */

.lower_kv {
    /* height: 100dvh; */
    width: 100%;
    background-color: #000;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    /* overflow: hidden; */
}

.lower_kv .menu {
    margin-top: 90px;
}

.lower_kv .menu.active {
    top: 0;
    right: 0;
    position: fixed;
}


.lower_content {
    margin: 300px 0 0 0;
    /* padding: 0 50px; */
    /* height: 100dvh; */
    width: 100%;
    background-color: #000;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    /* overflow: hidden; */
}

.lower_content_title_area {
    padding: 0 0 300px 0;
    margin: 0 50px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 70px;
}

.lower_content_title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

.lower_content_title {
    color: #fff;
    font-size: 100px;
    font-weight: bold;
}

.lower_content_t_text {
    max-width: 860px;
    width: 100%;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.lower_kv footer {
    height: auto;
    background-color: #000;
    /* background-image: url(../img/logo_footer.webp); */
    background-repeat: no-repeat;

    color: #fff;
    margin: 0px 0 0;
    padding: 0px 20px 0 20px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    z-index: 0;
    flex-direction: column;
    flex-wrap: wrap;
}

.footer_ask_btn {
    margin: 0 auto;
    width: fit-content;
    position: relative;
    font-size: 15rem;
    font-family: var(--ask-font-family);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer_ask_btn_ico {
    position: absolute;
    top: 60%;
    right: -180px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* ホバー時に画像だけ動かす */
.footer_ask_btn:hover .footer_ask_btn_ico {
    transform: translate(25px, -80px);
    /* 右斜め上に10pxずつ移動 */
}

.footer_content {
    width: 100%;
    height: 900px;
    position: relative;
    background: url(https://oikawa-ce.com/assets/img/logo_footer.webp) no-repeat center/contain;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.footer_map_trigger {
    font-size: 2.25rem;
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 20;
}


/* .footer_content address {
    padding: 0 0 200px 0;
}

.footer_content address h3 {
    font-size: 1.5rem;
    line-height: 4.5rem;
    font-weight: bold;
}

.footer_content address p {
    font-size: 1.25rem;
    line-height: 2.0rem;
} */

.footer_menu_area {
    width: 360px;
    padding: 0 0 200px 0;
}

.footer_menu_area_ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    font-size: 24px;
    line-height: 75px;
}

.footer_menu_area_ul_li {
    border-top: 1px solid #fff;
    position: relative;
}

.footer_menu_area_ul_li.second_menu ::before {}

.float_ico {
    position: absolute;
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.plus {
    position: relative;
    width: 30px;
    height: 30px;
    /* margin: 0 5px; */
}

.plus:before,
.plus:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #fff;
    border-radius: 10px;
}

.plus:before {
    width: 3px;
    height: 15px;
}

.plus:after {
    width: 15px;
    height: 3px;
}

.footer_sns_area {
    margin: auto 0 0 0;
    padding: 0 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 20;
}

.footer_sns_area_ul {
    padding: 0 0 30px 0;
    display: flex;
    display: none;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;
}

/* 各ボックスの背景色と重なりの順番（z-index）を設定 */

.about .lower_content {
    overflow: hidden;
}

.about_content {
    position: relative;
}

.about_content_big01 {
    z-index: 1;
}

.about_content_big02 {
    z-index: 2;
}

.about_content_big03 {
    z-index: 3;
}

.about_content_big01,
.about_content_big02,
.about_content_big03 {
    width: calc(100vw + 1200px);
    display: flex;
    position: relative;
    transition: left 0.5s ease;
    left: 0;
}

.about_content_box01 {
    width: 100vw;
    height: 900px;
    background: url(https://oikawa-ce.com/assets/img/about_Surveying.webp) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    /* z-index: 5; */
    /* position: relative; */
    /* 一番下 */
}

.about_content_box02 {
    width: 100vw;
    height: 900px;
    background: url(https://oikawa-ce.com/assets/img/about_CivilEngeeniring.webp) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    /* position: relative; */
    /* 真ん中 */
}

.about_content_box03 {
    width: 100vw;
    height: 900px;
    background: url(https://oikawa-ce.com/assets/img/about_ICTSolution.webp) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    /* position: relative; */
    /* 一番上 */
}

.about_content h2 {
    padding: 0px 140px 0 0;
    font-size: 6.25rem;
    /* font-weight: 700; */
    color: #fff;
    font-family: var(--sub-font-family);
    /* opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease-out; */
}

.about_content_detail_panel01,
.about_content_detail_panel02,
.about_content_detail_panel03 {
    height: 900px;
    width: 1200px;
    padding: 100px 0px;
    overflow: auto;
    color: #fff;
    background-color: #1C1C1C;
}

.about_content_detail_panel_inner {
    width: 1000px;
    margin: 0 auto;
}

.about_content_detail_panel_title {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding-bottom: 40px;

}

.about_content_detail_panel_title h2 {
    font-size: 4.0rem;
}

.about_content_detail_panel_title h3 {
    font-size: 2.5rem;
}

.about_content_detail_panel_item {
    padding: 40px 0 80px;
    border-top: 1px solid #888888;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
}

.about_content_detail_panel_item.last {
    padding-bottom: 0;
}

.about_content_detail_panel_item h3 {
    font-size: 1.5rem;
}


/* joinus */
.lower_kv.joinus {
    background-color: #fff;
}

.lower_kv.joinus .main_title {
    /* color: #000; */
}

.lower_kv.joinus header {
    background-color: rgba(0, 0, 0, 0.5);
}

.lower_kv.joinus.menu-open header {
    background-color: rgba(0, 0, 0, 0);
}

.lower_kv.joinus .hamburger_open .bar-1,
.lower_kv.joinus .hamburger_open .bar-2,
.lower_kv.joinus .hamburger_close .bar-1,
.lower_kv.joinus .hamburger_close .bar-2 {
    background-color: #fff;
}

.lower_content_joinus_big_content h2,
.lower_content_joinus_philosophy_title,
.lower_content_joinus_interview_title,
.lower_content_joinus_joblist_area_title {
    color: #fff;
    font-weight: bold;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0px 2px 0 #000,
        0px -2px 0 #000,
        -2px 0px 0 #000,
        2px 0px 0 #000;
}

.lower_content_joinus {
    margin: 300px 0 0 0;
    /* padding: 0 50px; */
    /* height: 100dvh; */
    width: 100%;
    background-color: #fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    /* overflow: hidden; */
}

.lower_content_joinus_title_area {
    padding: 0 0 150px 0;
    margin: 0 50px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 70px;
}

.lower_content_joinus_title_box {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 80px;
}

.lower_content_joinus_title {
    color: #000;
    font-size: 100px;
    font-weight: bold;
}

.lower_content_joinus_detail {
    max-width: 1050px;
    width: 100%;
    margin: 0 auto;
    color: #000;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.lower_content_joinus_detail h3 {
    font-size: 3rem;
    font-weight: bold;
    color: #1FD07E;
}

.lower_content_joinus_detail p {
    font-size: 1.5rem;
    font-weight: normal;
}

.lower_content_joinus_big_area {
    background: #FFFFFF;
    background: linear-gradient(0deg, rgba(189, 255, 216, 1) 0%, rgba(69, 219, 172, 1) 50%, rgba(65, 183, 233, 1) 100%);
}

.lower_content_joinus_big_area .dammy {
    height: 1000px;
}

.lower_content_joinus_big_content {
    padding: 150px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

.lower_content_joinus_big_movie_area {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.lower_content_joinus_big_movie {
    max-width: 1080px;
    width: 100%;
    /* height: 610px; */
    background-color: #D9D9D9;
    border-radius: 24px;
}

.lower_content_joinus_big_content h2 {
    font-size: 6.25rem;
}

.lower_content_joinus_big_movie_cap {
    font-size: 1.5rem;
    line-height: 2.75rem;
    text-align: center;
}

.lower_content_joinus_big_content_img {
    width: 100%;
    height: 860px;
    background-image: url(https://oikawa-ce.com/assets/img/joinus_reel.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background: linear-gradient(to bottom, rgba(92, 226, 180, 0.8) -1%, rgba(255, 255, 255, 0)), url(https://oikawa-ce.com/assets/img/joinus_reel.webp) no-repeat center/cover; */
}


.lower_content_joinus_philosophy_area {
    padding: 200px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.lower_content_joinus_philosophy_box {
    max-width: 1000px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.lower_content_joinus_philosophy_box img {
    border-radius: 24px;
    position: absolute;
}

.lower_content_joinus_philosophy_box_item_img01 {
    top: -150px;
    left: -350px;
}

.lower_content_joinus_philosophy_box_item_img02 {
    right: -350px;
}

.lower_content_joinus_philosophy_box_item_img03 {
    left: -350px;
    bottom: -150px;
}

.lower_content_joinus_philosophy_title {
    font-size: 6.25rem;
}

.lower_content_joinus_philosophy_imgarea {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
}

.lower_content_joinus_philosophy_imgarea_itemg01,
.lower_content_joinus_philosophy_imgarea_itemg02,
.lower_content_joinus_philosophy_imgarea_itemg03 {
    max-width: 320px;
    width: 100%;
    height: auto;
    border-radius: 24px;
    background-color: #D9D9D9;
}

.lower_content_joinus_philosophy_box_item {
    padding: 35px 0;
    line-height: 1;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 125px;
}

.lower_content_joinus_philosophy_box_item.center {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.lower_content_joinus_philosophy_box_item h3 {
    width: fit-content;
    font-size: 6rem;
}

.lower_content_joinus_philosophy_box_item h4 {
    width: fit-content;
    font-size: 2rem;
}

.lower_content_joinus_interview_area {
    padding: 200px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.lower_content_joinus_interview_title {
    font-size: 6.25rem;
}

.lower_content_joinus_interview_box {
    width: 100%;
    height: auto;
}

.lower_content_joinus_interview_box_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.lower_content_joinus_interview_box_item img {
    border-radius: 24px;
}

.hover-reveal1,
.hover-reveal2,
.hover-reveal3 {
    width: 410px;
    position: relative;
    display: inline-block;
}

.hover-reveal1 img,
.hover-reveal2 img,
.hover-reveal3 img {
    display: block;
    width: 100%;
    height: auto;
}

/* ホバー時に表示される画像 */
.hover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

/* マウスホバーでフェードイン */
.hover-reveal1:hover .hover-image,
.hover-reveal2:hover .hover-image,
.hover-reveal3:hover .hover-image {
    opacity: 1;
}


/* ==================================== */
/* スライダーコンテナの親要素 */
/* ==================================== */
.lower_content_joinus_interview_box {
    width: 100%;
    max-width: 1250px;
    /* スライダー全体の最大幅を設定（コンテンツ3つ + 間隔 + 左右の余白を考慮） */
    margin: 80px auto;
    /* 上下の余白と中央寄せ */
    /* padding: 0 20px; */
    /* 左右の余白 */
    box-sizing: border-box;
    /* paddingを含めて幅を計算 */
}

/* ==================================== */
/* Swiperコンテナ（IDとクラスを両方指定） */
/* ==================================== */
#feed_interview.swiper-container {
    width: 100%;
    height: auto;
    /* コンテンツに合わせて高さを自動調整 */
    position: relative;
    /* ページネーションとナビゲーションボタンの位置決めの基準 */
    padding-bottom: 50px;
    /* ページネーションの高さとマージン分の余白を確保 */
    overflow: hidden;
    /* スライダー外にはみ出る部分を隠す */
    /* スライダーの左右の余白（もし必要なら） */
    /* padding: 0 10px; */
}

/* ==================================== */
/* Swiperスライド（各コンテンツアイテム） */
/* ==================================== */
.swiper-slide {
    /* スライドの幅と高さを指定 */
    /* PC表示でコンテンツが600pxなので、これに対応する */
    width: 600px;
    height: 600px;
    min-width: 280px;
    /* スマートフォンでの最小幅（デザインによって調整） */

    /* background-color: #D9D9D9; */
    /* スライドの背景色 */
    /* border: 1px solid #e0e0e0; */
    border-radius: 12px;
    /* 角を丸くする */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); */
    /* 影を追加 */

    display: flex;
    flex-direction: column;
    /* コンテンツを縦に並べる */
    align-items: center;
    /* 水平方向中央揃え */
    justify-content: center;
    /* 垂直方向中央揃え */
    text-align: center;
    /* padding: 20px; */
    box-sizing: border-box;
    /* paddingとborderを幅と高さに含める */

    /* デモコンテンツのスタイル */
    font-size: 1.2em;
    color: #555;
}

.swiper-slide img {
    max-width: 100%;
    height: auto;
    /* border-radius: 8px; */
    /* margin-bottom: 15px; */
}

.swiper-slide h3 {
    max-width: 415px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    color: #007bff;
    font-size: 1.7em;
    text-align: left;
}

.swiper-slide ul {
    padding: 0 0 0 15px;
    max-width: 415px;
    width: 100%;
    font-size: 0.75rem;
    font-weight: bold;
    color: #666;
    list-style: "ー";
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
}

/* ==================================== */
/* ページネーション（dotナビゲーション）のスタイル */
/* ==================================== */
.swiper-pagination {
    position: absolute;
    /* 親要素（#feed_interview）に対して絶対位置指定 */
    bottom: 0px;
    /* スライダーコンテナの最下部に配置 */
    left: 0;
    width: 100%;
    /* 幅を親要素いっぱいに広げる */
    text-align: center;
    /* ドットを中央揃え */
    z-index: 10;
    /* 他の要素より手前に表示 */
    padding-top: 20px;
    /* スライダーとドットの間の余白 */
    /* background-color: rgba(255, 0, 0, 0.1); /* デバッグ用 */
}

.swiper-pagination-bullet {
    background-color: #bbb;
    /* ドットの通常色 */
    opacity: 0.8;
    margin: 0 6px;
    /* ドット間の横方向の間隔 */
    width: 10px;
    /* ドットの幅 */
    height: 10px;
    /* ドットの高さ */
    border-radius: 50%;
    /* 円形にする */
    transition: background-color 0.3s, opacity 0.3s;
}

.swiper-pagination-bullet-active {
    background-color: #007bff;
    /* アクティブなドットの色 */
    opacity: 1;
}

/* ==================================== */
/* ナビゲーションボタン（矢印）のスタイル */
/* ==================================== */
.swiper-button-next,
.swiper-button-prev {
    color: #007bff;
    /* 矢印の色 */
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    /* 円形にする */
    width: 50px;
    /* ボタンの幅 */
    height: 50px;
    /* ボタンの高さ */
    top: 50%;
    /* 垂直方向中央 */
    transform: translateY(-50%);
    /* 中央揃えの微調整 */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    /* 影を追加 */
    transition: background-color 0.3s, box-shadow 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 22px;
    /* 矢印アイコンのサイズ */
    font-weight: bold;
}

/* 矢印が中央配置のスライドと重ならないようにZ-index調整 */
.swiper-button-prev {
    left: 10px;
    z-index: 20;
}

.swiper-button-next {
    right: 10px;
    z-index: 20;
}

/* ==================================== */
/* レスポンシブデザインの調整 */
/* ==================================== */

/* 1200px以上の場合（例: 3つ表示） */
@media (min-width: 1200px) {
    .swiper-slide {
        width: 380px;
        /* スライド間のスペースを考慮して幅を調整 */
        height: 380px;
    }
}

/* 1024px以下の場合（タブレット横向き、例: 3つ表示） */
@media (max-width: 1024px) {
    .swiper-slide {
        width: 300px;
        /* 幅を少し小さく */
        height: 300px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 40px;
        height: 40px;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 18px;
    }
}

/* 768px以下の場合（タブレット縦向き、例: 2つ表示） */
@media (max-width: 768px) {
    .lower_content_joinus_interview_box {
        padding: 0 15px;
        /* 左右の余白を少し減らす */
    }

    .swiper-slide {
        /* 2つ表示の場合、画面幅に対して調整 */
        width: calc(50vw - 40px);
        /* 画面幅の半分 - 調整マージン */
        height: calc(50vw - 40px);
        min-width: unset;
        /* 最小幅を解除して柔軟に */
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
        /* 小さい画面では矢印を非表示にすることも多い */
    }

    #feed_interview.swiper-container {
        padding-bottom: 40px;
        /* ページネーション分の余白を調整 */
    }

    .swiper-pagination {
        padding-top: 15px;
        /* 余白調整 */
    }
}

/* 480px以下の場合（スマートフォン、例: 1つ表示） */
@media (max-width: 480px) {
    .lower_content_joinus_interview_box {
        padding: 0 0px;
        margin: 0px auto;
    }

    .swiper-slide {
        width: calc(100vw - 40px);
        /* 画面幅いっぱいに近く表示 */
        height: calc(100vw - 40px);
    }

    #feed_interview.swiper-container {
        padding-bottom: 30px;
        /* ページネーション分の余白をさらに調整 */
    }

    .swiper-pagination {
        padding-top: 10px;
        bottom: 0px;
        /* さらに下に詰める */
    }

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0 4px;
    }
}


.lower_content_joinus_joblist_area {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 300px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.lower_content_joinus_joblist_area_title {
    font-size: 6.25rem;
}

.lower_content_joinus_joblist_area_big {
    display: flex;
    flex-direction: column;
    gap: 170px;
}

.lower_content_joinus_joblist_area_type_item {
    padding: 40px 0;
    max-width: 1400px;
    width: 100%;
    border-bottom: 1px solid #767575;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 50px;
}

.lower_content_joinus_joblist_area_type_item img {
    border-radius: 24px;
}

.lower_content_joinus_joblist_area_type_textarea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
}

.lower_content_joinus_joblist_area_type_textarea h4 {
    font-size: 1.25rem;
    font-weight: bold;
}

.lower_content_joinus_joblist_area_type_textarea_detailbox_item {
    /* padding: 40px 0; */
    max-width: 1400px;
    width: 100%;
    /* border-bottom: 1px solid ; */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 50px;
}

.lower_content_joinus_joblist_area_type_textarea_detailbox_item .main {
    width: 70px;
}

.lower_content_joinus_joblist_area_type_textarea_detailbox_item .sub {}

.lower_content_joinus_joblist_area_detail_list_item {
    border-bottom: 1px solid #767575;
    line-height: 2rem;
    padding: 25px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
}

.lower_content_joinus_joblist_area_detail_list_item.fast {
    border-top: 1px solid #767575;
}

.lower_content_joinus_joblist_area_detail_list_item_main {
    width: 280px;
    font-weight: bold;
}

/* joinus */

/* askme */

.askme .lower_content_title_area {
    padding: 0 0 50px 0;
}

.ask_content {
    padding-bottom: 150px;
    margin: 0 50px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

.ask_content_detailarea {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 70px;
}

.ask_content_detailarea_p {
    color: #fff;
    font-size: 1rem;
    line-height: 1.875rem;
}

.ask_content_detailarea address {
    line-height: 1;
    font-weight: bold;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}

.ask_content_detailarea address h3 {
    font-size: 2rem;
}

.ask_content_detailarea address p {
    font-size: 1.5rem;
    line-height: 2.25rem;
}

.ask_content_contactarea {
    max-width: 800px;
    width: 100%;
    display: flex;
}

/* contectform */
.contact_wrap {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.contact_form_block p {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.contact_label {
    padding-top: 15px;
    display: inline-block;
    width: 180px;
    color: #fff;
    font-size: 1.25rem;
}

.contact_input {
    width: 620px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
}

.contact_textarea {
    width: 620px;
    height: 260px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    word-wrap: break-word;
}

.contact_privacy {
    color: #fff;
    padding: 0 0 0 180px;
}

.contact_checkbox {
    display: none;
    cursor: pointer;
    display: inline-block;
    margin: 0 10px 0;
    position: relative;
    margin-right: 30px;
}

.contact_checkbox::before {
    -webkit-transform: translateY(-50%);
    background: #ffffff;
    border: 1px solid #101010;
    content: "";
    display: block;
    height: 20px;
    width: 20px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.contact_checkbox::after {
    -webkit-transform: translateY(-50%) rotate(-45deg);
    border-bottom: 3px solid #ffffff;
    border-left: 3px solid #ffffff;
    content: "";
    display: block;
    height: 10px;
    left: 10%;
    margin-top: -3px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 120%;
}

.contact__checkbox:checked::before {
    background-color: red;
    border: 1px solid red;
}

.contact__checkbox:checked::after {
    opacity: 1;
}

.contact_action {
    margin-top: 50px;
}

.contact_btn {
    max-width: 300px;
    width: 100%;
    height: 80px;
    margin: 0 auto 0 180px;
}

.contact_btn .contact_button {
    max-width: 300px;
    width: 100%;
    padding: 20px 100px 20px 100px;
    font-size: 1.25rem;
    border: 1px solid #fff;
    color: #fff;
}


.ask_content_cover {
    height: 900px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) -1%, rgba(102, 102, 102, 0.5) 50%, rgba(0, 0, 0, 0.5)) 100%, url(https://oikawa-ce.com/assets/img/askme_main.webp) no-repeat center/cover;
}

/* askme */

/* company */
.lower_kv.comp {
    overflow-x: hidden;
}

.comp_content_mess {
    padding: 0px 0 220px 0;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 90px;
}

.comp_content_mess_textarea {
    max-width: 780px;
    width: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 100px;
}

.comp_content_mess_textarea h2,
.comp_content_out_inner h2,
.comp_content_pro h2,
.comp_content_com h2 {
    font-size: 6em;
    line-height: 1;
}

.comp_content_mess_textarea p {
    font-size: 1em;
    line-height: 3rem;
}

.comp_content_out {
    width: 100%;
    background-color: #fff;
    padding: 190px 0 120px 0;
}

.comp_content_out_inner {
    margin: 0 auto;
    max-width: 1400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    gap: 70px;
}

/* .comp_content_out_inner h2 {
    font-size: 6em;
    line-height: 1;
} */

.comp_content_out_list_item {
    border-bottom: 1px solid #767575;
    line-height: 2rem;
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
}

.comp_content_out_list_item_main {
    width: 350px;
}

.comp_content_out_inner_map {
    max-width: 1400px;
    width: 100%;
    height: 500px;

    filter: grayscale(100%) brightness(90%) contrast(120%);
    /* 調整用：必要に応じて数値変更 */
    -webkit-filter: grayscale(100%) brightness(90%) contrast(120%);
}

.comp_content_slider {
    /* background-color: #aaa; */
    height: auto;
    width: 100vw;
    position: relative;
    overflow: hidden;
}

.comp_content_custom_area {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
}

.comp_content_slider #custom-next,
.comp_content_slider #custom-prev {
    width: 50%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    /* 黒い矢印にする例 */
}

.comp_content_pro {
    padding: 180px 0 0 0;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 100px;
}

/* .comp_content_pro h2 {
    font-size: 6em;
    line-height: 1;
} */

.comp_content_pro_listarea {
    display: flex;
}

.comp_content_pro_list {
    padding: 0 75px;
}

.comp_content_pro_list.item02 {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

.comp_content_pro_list ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.comp_content_pro_list ul li {
    width: 315px;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.comp_content_com {
    padding: 150px 0 280px 0;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 100px;
}

/* .comp_content_com h2 {
    font-size: 6em;
    line-height: 1;
} */

.comp_content_com_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 100px;
}

.comp_content_com_list_item {
    max-width: 400px;
    width: 100%;
    height: auto;
    background-color: #fff;
    color: #000;
}

.comp_content_com_list_item_cap {
    padding: 0 25px;
    margin: 20px 0 30px 0;
}

/* company */

/* diary */
.diary_content {
    width: 100%;
    padding: 0 50px 200px 50px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 150px;
}

.diary_content_sidebararea_archive {
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.diary_content_sidebararea_archive .big {
    font-size: 3rem;
}

.diary_content_sidebararea_category ul {
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 40px;

}

.diary_content_item_day {
    font-size: 1.5rem;
}

.diary_content_item_title {
    font-size: 2.25rem;
    line-height: 4rem;
}

.diary_content_item_category {
    font-size: 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: 5px 10px;
}

.diary_content_item_category p {
    width: fit-content;
}

.diary_content_sidebararea {
    padding-top: 60px;
    max-width: 250px;
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 80px;
}

.diary_content_mainarea {
    max-width: 1120px;
    width: 100%;
}

.diary_content_item {
    padding: 60px 0;
    border-bottom: 1px solid #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 60px;
}

.diary_content_item.fast_item {
    padding-top: 0;
}

.diary_content_item_detail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 20px;
}

.diary_content_pagenation {
    padding-top: 70px;
}

.diary_content_custom_pagenation {
    display: flex;
    gap: 15px;
}

.diary_content_custom_pagenation li {
    width: 35px;
    height: 35px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diary_content_custom_pagenation li a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diary_content_custom_pagenation li.current {
    background-color: #fff;
    color: #000;
    border-radius: 6px;
}

/* diary */

/* praivacy */
.praivacy_content {
    color: #fff;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 150px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 120px;
}

.privacy_title {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 100px;
    font-size: 30px;
}

.privacy_title span {
    font-size: 50px;
}

.privacy_lead {
    font-size: 1.5rem;
}

.privacy_number {
    font-size: 1.75rem;
}

.privacy_block {
    font-size: 1.25rem;
}

/* praivacy */

@media (max-width: 1800px) {

    .menu {
        padding: 50px 100px 0px 0;
    }

    .menu.active {
        gap: 20px;
    }

    .menu_link_area h2 {
        font-size: 3.5rem;
    }

    .comp_content_mess_textarea {
        max-width: 640px;
        gap: 80px;
    }

    .comp_content_out_inner {
        max-width: 1200px;
        gap: 80px;
    }

    .comp_content_pro {
        max-width: 1200px;
        gap: 80px;
    }

    .comp_content_com {
        max-width: 1200px;
        gap: 80px;
    }

    .comp_content_pro_list {
        padding: 0 40px;
    }

}

@media (max-width: 1400px) {

    .comp_content_mess_textarea_pc_img {
        display: none;
    }

    .comp_content_mess_textarea_medium_img {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #fff;
        width: 430px;
        height: auto;
        margin: 0 auto;
    }

    .comp_content_mess_textarea h2,
    .comp_content_out_inner h2,
    .comp_content_pro h2,
    .comp_content_com h2,
    .lower_content_joinus_big_content h2,
    .lower_content_joinus_philosophy_title,
    .lower_content_joinus_interview_title,
    .lower_content_joinus_joblist_area_title {
        font-size: 5em;
        line-height: 1;
    }

    .lower_content_joinus_interview_box {
        max-width: 1000px;
    }

    .lower_content_joinus_joblist_area {
        max-width: 1000px;
    }

    .hover-reveal1,
    .hover-reveal2,
    .hover-reveal3 {
        width: 325px;
    }

    .comp_content_mess {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 90px;
        justify-content: center;
    }

    .comp_content_mess_textarea {
        max-width: 1000px;
        gap: 60px;
    }

    .comp_content_out_inner {
        max-width: 1000px;
        gap: 60px;
    }

    .comp_content_pro {
        max-width: 1000px;
        gap: 60px;
    }

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

    .comp_content_pro_list {
        padding: 0 0px;
    }

    .comp_content_pro_list.item02 {
        border-right: none;
        border-left: none;
    }

    .comp_content_pro_list ul li {
        width: 700px;
    }


    .comp_content_com {
        max-width: 1000px;
        gap: 60px;
    }

}

@media (max-width: 1280px) {

    .top_content {
        width: 1000px;
    }

    .top_content #text-area {
        font-size: 150px;
    }

    .lower_content_title_area {
        padding: 0 0 150px 0;
    }

    .lower_content_joinus_big_content {
        padding: 150px 50px;
    }

    .lower_content_joinus_philosophy_area {
        max-width: 100%;
        width: 100%;
        padding: 200px 50px;
    }

    .lower_content_joinus_joblist_area {
        max-width: 100%;
        padding: 0px 50px 300px 50px;
    }

    .lower_content_joinus_philosophy_imgarea_itemg01,
    .lower_content_joinus_philosophy_imgarea_itemg02,
    .lower_content_joinus_philosophy_imgarea_itemg03 {
        max-width: 290px;
    }

    .lower_content_joinus_philosophy_box_item h3 {
        font-size: 4rem;
    }

    .lower_content_joinus_interview_area {
        padding: 200px 50px;
    }

    .lower_content_joinus_joblist_area_type_item {
        max-width: 100%;
    }

    .lower_content_joinus_joblist_area_type_textarea_detailbox .lower_content_joinus_joblist_area_type_textarea_detailbox_item:first-child {
        padding-bottom: 10px;
    }

    .lower_content_joinus_joblist_area_type_textarea_detailbox_item {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0px;
    }

    .lower_content_joinus_joblist_area_detail_list_item_main {
        width: 240px;
    }

    .hover-reveal1,
    .hover-reveal2,
    .hover-reveal3 {
        width: 290px;
    }


    .about_content_detail_panel01,
    .about_content_detail_panel02,
    .about_content_detail_panel03 {
        width: 750px;
    }

    .about_content_big01,
    .about_content_big02,
    .about_content_big03 {
        width: calc(100vw + 750px);
    }

    .about_content_detail_panel_inner {
        width: 650px;
        margin: 0 auto;
    }

    .comp_content_mess {
        width: 100%;
        padding: 0 50px 120px;
    }

    .comp_content_out_inner {
        max-width: 100%;
        width: 100%;
        padding: 0 50px;
        gap: 60px;
    }

    .comp_content_out_list_item_main {
        width: 250px;
    }

    .comp_content_pro {
        max-width: 100%;
        width: 100%;
        padding: 150px 50px 0 50px;
        gap: 60px;
    }

    .comp_content_com {
        max-width: 100%;
        width: 100%;
        padding: 150px 50px 0 50px;
        gap: 60px;
    }

    .comp_content_com_list {
        gap: 50px 50px;
    }

    .footer_ask_btn {
        font-size: 10rem;
    }

    .footer_ask_btn_ico {
        top: 55%;
        right: -120px;
    }

    .footer_ask_btn:hover .footer_ask_btn_ico {
        transform: translate(15px, -60px);
    }

    .praivacy_content {
        max-width: 100%;
        width: 100%;
        padding: 0 50px 100px;
        gap: 80px;
    }
}

@media (max-width: 1024px) {

    .pc_content {
        display: none;
    }

    .sp_content {
        display: block;
    }

    .top_content {
        width: 750px;
    }

    #cursor {
        display: none;
    }

    .menu {
        padding: 50px 60px 0px 0;
    }

    .menu_link_area {
        gap: 50px;
    }

    .lower_content,
    .lower_content_joinus {
        margin: 200px 0 0 0;
    }

    .lower_content_title_area {
        padding: 0 0 100px 0;
        gap: 60px;
    }

    .lower_content_joinus_big_content {
        padding: 100px 50px;
        gap: 60px;
    }

    .lower_content_joinus_big_content_img {
        height: 440px;
    }

    .lower_content_joinus_title_box {
        gap: 60px;
    }

    .lower_content_joinus_philosophy_area {
        padding: 100px 50px;
    }

    .lower_content_joinus_philosophy_imgarea_itemg01,
    .lower_content_joinus_philosophy_imgarea_itemg02,
    .lower_content_joinus_philosophy_imgarea_itemg03 {
        max-width: 200px;
    }

    .lower_content_joinus_philosophy_box_item h3 {
        font-size: 3rem;
    }

    .lower_content_joinus_philosophy_box_item h4 {
        font-size: 1.5rem;
    }

    .hover-reveal1,
    .hover-reveal2,
    .hover-reveal3 {
        width: 200px;
        position: relative;
        display: inline-block;
    }

    .lower_content_joinus_interview_area {
        padding: 0px 50px 100px;
    }

    .lower_content_joinus_interview_box_area {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 25px;
    }

    .lower_content_joinus_joblist_area {
        max-width: 100%;
        padding: 0px 50px 100px 50px;
    }

    .lower_content_joinus_joblist_area_type_item {
        padding: 40px 0;
        max-width: 1400px;
        width: 100%;
        border-bottom: 1px solid #767575;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 50px;
    }

    .lower_content_joinus_joblist_area_type_textarea {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .lower_content_joinus_joblist_area_detail_list_item {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .about_content h2 {
        padding: 0px 50px 0 0;
    }

    .about_content_box01,
    .about_content_box02,
    .about_content_box03 {
        height: 600px;
    }

    .about_content_detail_panel01,
    .about_content_detail_panel02,
    .about_content_detail_panel03 {
        height: 600px;
    }

    .comp_content_mess_textarea h2,
    .comp_content_out_inner h2,
    .comp_content_pro h2,
    .comp_content_com h2 {
        font-size: 3.5rem;
        line-height: 1;
    }

    .comp_content_out_list_item {
        padding: 30px 0;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .comp_content_pro_list ul li {
        width: 600px;
    }

    .footer_ask_btn {
        font-size: 7rem;
    }

    .footer_ask_btn_ico {
        width: 60px;
        right: -100px;
    }

    .footer_ask_btn:hover .footer_ask_btn_ico {
        transform: translate(10px, -50px);
    }
}

@media (max-width: 768px) {


    header {
        height: 70px;
    }

    .main_title {
        height: 70px;
        padding: 0 0 0 20px;
    }

    .hamburger_area {
        width: 70px;
        height: 70px;
    }

    .top_content {
        width: 470px;
    }

    .top_content #text-area {
        font-size: 85px;
    }

    .menu {
        padding: 20px 10px 0px 0;
    }

    .menu_link_area {
        gap: 25px;
    }

    .menu.active {
        gap: 25px;
    }

    .lower_kv footer {
        padding: 50px 20px 0 20px;
    }

    .lower_content {
        margin: 150px 0 0 0;
    }

    .comp_content_mess_textarea h2,
    .comp_content_out_inner h2,
    .comp_content_pro h2,
    .comp_content_com h2,
    .lower_content_joinus_big_content h2,
    .lower_content_joinus_philosophy_title,
    .lower_content_joinus_interview_title,
    .lower_content_joinus_joblist_area_title {
        font-size: 4em;
        line-height: 1;
    }

    .lower_content_title,
    .lower_content_joinus_title {
        font-size: 80px;
    }

    .lower_content_title_area,
    .lower_content_joinus_title_area {
        margin: 0 25px;
        gap: 70px;
    }

    .lower_content_t_text,
    .lower_content_joinus_detail p {
        font-size: 16px;
    }

    .lower_content_joinus_detail h3 {
        font-size: 2.5rem;
    }

    .lower_content_joinus_big_content {
        padding: 150px 25px;
    }

    .lower_content_joinus_philosophy_imgarea_itemg01,
    .lower_content_joinus_philosophy_imgarea_itemg02,
    .lower_content_joinus_philosophy_imgarea_itemg03 {
        max-width: 125px;
    }

    .lower_content_joinus_philosophy_area {
        max-width: 100%;
        width: 100%;
        padding: 100px 25px;
    }

    .lower_content_joinus_philosophy_box_item {
        padding: 25px 0;
        gap: 70px;
    }

    .lower_content_joinus_philosophy_box_item h3 {
        font-size: 2rem;
    }

    .lower_content_joinus_philosophy_box_item h4 {
        font-size: 1.25rem;
    }


    .lower_content_joinus_interview_area {
        padding: 200px 25px;
    }

    .lower_content_joinus_interview_box_area {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 25px;
    }

    .hover-reveal1,
    .hover-reveal2,
    .hover-reveal3 {
        width: 100%;
    }

    .lower_content_joinus_joblist_area {
        padding: 0px 25px 300px 25px;
    }

    .footer_content {
        height: 650px;
    }

    .about_content h2 {
        padding: 0px 20px 0 0;
        font-size: 5rem;
        letter-spacing: 5px;
        font-weight: 500;
        line-height: 1;
        color: #fff;
    }

    .about_content_detail_panel01,
    .about_content_detail_panel02,
    .about_content_detail_panel03 {
        width: 100vw;
    }

    .about_content_big01,
    .about_content_big02,
    .about_content_big03 {
        width: calc(100vw + 100vw);
    }

    .about_content_detail_panel_inner {
        width: 100%;
        margin: 0 0px;
        padding: 0 20px;
    }


    .comp_content_mess {
        padding: 0 25px 120px;
    }

    .comp_content_out_inner {
        padding: 0 25px;
    }

    .comp_content_pro {
        padding: 150px 25px 0 25px;
    }

    .comp_content_pro_list ul li {
        width: 100%;
    }

    .comp_content_com {
        padding: 150px 25px 0 25px;
    }

    .footer_ask_btn {
        /* font-size: 4rem; */
    }

    .footer_ask_btn_ico {
        width: 40px;
        right: -80px;
        top: 60%;
    }

    .footer_ask_btn:hover .footer_ask_btn_ico {
        transform: translate(10px, -30px);
    }

    .praivacy_content {
        padding: 0 25px 100px;
    }
}

@media (max-width: 480px) {

    .br_480 {
        display: block;
    }

    .top_content {
        width: 360px;
    }

    .top_content #text-area {
        font-size: 65px;
    }

    .main_title {
        padding: 0 0 0 10px;
    }

    .menu {
        margin: 0 0 0 10px;
    }

    .menu_main_ul {
        gap: 10px;
    }

    .menu_link_area h3 {
        font-size: 1.0rem;
    }

    .menu_link_area h2 {
        font-size: 3rem;
    }

    .menu.active {
        gap: 20px;
    }

    .footer_content {
        height: 550px;
    }

    .comp_content_mess_textarea h2,
    .comp_content_out_inner h2,
    .comp_content_pro h2,
    .comp_content_com h2,
    .lower_content_joinus_big_content h2,
    .lower_content_joinus_philosophy_title,
    .lower_content_joinus_interview_title,
    .lower_content_joinus_joblist_area_title {
        font-size: 3.5em;
        line-height: 1;
    }

    .lower_content {
        margin: 150px 0 0 0;
    }

    .lower_content_joinus {
        margin: 150px 0 0 0;
    }

    .lower_content_joinus_title_box {
        gap: 60px;
    }

    .lower_content_title,
    .lower_content_joinus_title {
        font-size: 45px;
    }

    .lower_content_title_area,
    .lower_content_joinus_title_area {
        margin: 0 10px;
        padding: 0 0 80px 0;
        gap: 50px;
    }

    .lower_content_joinus_detail {
        gap: 40px;
    }

    .lower_content_joinus_big_content {
        padding: 80px 10px;
        gap: 40px;
    }

    .lower_content_joinus_big_content_img {
        height: 235px;
    }

    .lower_content_joinus_big_movie {
        height: auto;
        border-radius: 12px;
    }

    .lower_content_joinus_philosophy_imgarea_itemg01,
    .lower_content_joinus_philosophy_imgarea_itemg02,
    .lower_content_joinus_philosophy_imgarea_itemg03 {
        max-width: 100px;
        border-radius: 12px;
    }

    .lower_content_joinus_philosophy_area {
        padding: 80px 10px;
        gap: 40px;
    }

    .lower_content_joinus_interview_area {
        padding: 0px 10px 80px;
    }

    .lower_content_joinus_joblist_area {
        padding: 0px 10px 80px 10px;
        gap: 0px;
    }

    .lower_content_joinus_big_movie_cap {
        font-size: 1rem;
        line-height: 2rem;
    }

    .hover-reveal1,
    .hover-reveal2,
    .hover-reveal3 {
        width: 100%;
    }

    .lower_content_joinus_interview_box_item img {
        border-radius: 12px;
    }

    .lower_content_joinus_joblist_area_type_item {
        gap: 20px;
    }

    .lower_content_joinus_joblist_area_big {
        gap: 80px;
    }

    .lower_content_joinus_joblist_area_detail_list_item {
        padding: 15px 0;
        line-height: 1.5rem;
    }

    .lower_kv footer {
        padding: 50px 5px 0 5px;
    }

    .about_content h2 {
        font-size: 3rem;
    }

    .about_content_detail_panel_title h3 {
        font-size: 2rem;
    }

    .about_content_box01,
    .about_content_box02,
    .about_content_box03 {
        height: 600px;
    }

    .about_content_detail_panel01,
    .about_content_detail_panel02,
    .about_content_detail_panel03 {
        height: 600px;
    }

    .comp_content_mess_textarea h2,
    .comp_content_out_inner h2,
    .comp_content_pro h2,
    .comp_content_com h2 {
        font-size: 2.75rem;
    }

    .comp_content_mess {
        padding: 0 10px 80px;
    }

    .comp_content_mess_textarea {
        gap: 40px;
    }

    .comp_content_mess_textarea p {
        line-height: 2rem;
    }

    .comp_content_mess_textarea_medium_img {
        width: auto;
    }

    .comp_content_out {
        padding: 80px 0 80px 0;
    }

    .comp_content_out_inner {
        padding: 0 10px;
        gap: 40px;
    }

    .comp_content_out_list_item {
        padding: 15px 0;
    }

    .comp_content_pro {
        padding: 80px 10px 0 10px;
        gap: 40px;
    }

    .comp_content_pro_list ul li {
        padding: 10px 0;
    }

    .comp_content_com {
        padding: 80px 10px 0 10px;
        gap: 40px;
    }

    .comp_content_com_list {
        gap: 20px;
    }


    .footer_ask_btn_ico {
        width: 40px;
        right: -50px;
    }

    .footer_sns_area p {
        font-size: 12px;
    }

    .menu small {
        font-size: 12px;
        text-align: right;
    }

    .praivacy_content {
        padding: 0 10px 100px;
    }
}