/* 全体にフォントを設定 */
body {
    font-family: 'Noto Sans', sans-serif;/* サンセリフはmobile対応フォント */
}

a {
    text-decoration: none;
}

/*テキストについて===============================================
 ===============================================================*/

/* テキスト白 */
.txt-white {
    text-align: left;
    color: #ffffff;
}

/* テキスト黒 */
.txt-black {
    text-align: left;
    color: #242424;
}
	
/* テキストグレー01 */
.txt-gre01 {
    text-align: left;
    color: #666666;
}

/* テキストグレー02 */
.txt-gre02 {
    text-align: left;
    color: #949494;
}

/* テキストグラデ */
.txt-grad {
    text-align: left;
    font-weight: bold;
    background-image: linear-gradient(135deg, #08CDF9 0%, #D23BF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 3px;/* 文字間調整 */
}

/* テキスト白 外枠グラデ */
.txt-wh-grd {
    font-size: 24px;
    font-weight: bold;
    margin-left: 5%;
    margin-right: 5%;
    color: #FFFFFF;
    -webkit-text-stroke: 5px transparent; /* テキストの縁取りを透明にする */
    text-stroke: 5px transparent; /* テキストの縁取りを透明にする */
    background-image: linear-gradient(to right, #08CDF9, #B922D1); /* 枠線になるグラデーション */
    -webkit-background-clip: text; /* テキストに対してグラデーションをクリップ */
    background-clip: text; /* テキストに対してグラデーションをクリップ */
    letter-spacing: 15px; /* 文字間調整 */
}

/* テキスト黒 外枠グラデ */
.txt-br-grd {
    font-size: 24px;
    font-weight: bold;
    margin-left: 5%;
    margin-right: 5%;
    color: #000000;
    -webkit-text-stroke: 5px transparent; /* テキストの縁取りを透明にする */
    text-stroke: 5px transparent; /* テキストの縁取りを透明にする */
    background-image: linear-gradient(to right, #08CDF9, #B922D1); /* 枠線になるグラデーション */
    -webkit-background-clip: text; /* テキストに対してグラデーションをクリップ */
    background-clip: text; /* テキストに対してグラデーションをクリップ */
    letter-spacing: 15px; /* 文字間調整 */
}

/*ヘッダー========================================================*/
/* =============================================================== */

/* ロゴ */
.header-logo {
    position: absolute;
    margin-left: 50px;
    top: 10px;
    z-index: 100;
}

/* ロゴ画像 */
.header-logo img {
    width: 60%;
}

@media (max-width: 768px) {

    /* ロゴ */
    .header-logo {
        margin-left: 10px;
        top: 15px;
    }

    /* ロゴ画像 */
    .header-logo img {
        width: 40%;
    }

}

/* サイバーネットコミュニケーションズ株式会社　エンジニア採用 */
.header-txt {
    position: relative;
    font-size: 18px;
    text-align: center;
    top: 35px;
}

@media (max-width: 768px) {

    .header-txt {
        visibility: hidden;
    }

}

/* ハンバーガーメニュー */
.header-hamburger {
    position: fixed;
    width: 40px;
    height: 30px;
    top: 30px;
    right: 0;
    margin-right: 5%;
    z-index: 2000;
}

/* 三本線 */
.header-hamburger span{
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #FFFFFF;
    transition: .5s;
}

@media (max-width: 768px) {

    /* ハンバーガーメニュー */
    .header-hamburger {
        width: 40px;
        height: 25px;
        top: 25px;
        right: 0;
        margin-right: 5%;
    }

    /* 三本線 */
    .header-hamburger span{
        height: 3px;
    }

}

/* 非アクティブ時================================================== */
/* =============================================================== */

/* ハンバーガーメニューの1番目の線 */
.header-hamburger span:first-of-type {
    top: 0;
}

/* ハンバーガーメニューの2番目の線 */
.header-hamburger span:nth-of-type(2) {
    top: 50%;
}

/* ハンバーガーメニューの3番目の線 */
.header-hamburger span:last-of-type {
    top: 100%;
}

/* アクティブ時==================================================== */
/* =============================================================== */

/* ハンバーガーメニューの1番目の線 */
.header-hamburger.active span:first-of-type {
    top: 50%;
    transform: rotate(45deg);
}

/* ハンバーガーメニューの2番目の線 */
.header-hamburger.active span:nth-of-type(2) {
    opacity: 0;/* 透明にする */
}

/* ハンバーガーメニューの3番目の線 */
.header-hamburger.active span:last-of-type {
    top: 50%;
    transform: rotate(-45deg);
}

/* 画面外のメニューをもとに戻す */
.slide-menu.active {
    transform: translateX(0); 
}

/* スライドメニュー================================================ */
/* =============================================================== */

/* スライドメニュー */
.slide-menu {
    background-color: #0aa1ab;
    position: fixed;
    width: 100%;
    height: 2000px;
    left: 0;
    transform: translateX(100%);
    transition: 0.5s;
    top: -100px;
    z-index: 1000;
}

/* =============================================================== */

/* スライドメニューグループ 左右 */
.slide-menu-group {
    position: relative;
    display: flex; /* フレックスコンテナー */
    width: 70%;
    max-width: 1080px; /* 最大幅を1080pxに設定 */
    margin: 0 auto; /* 左右に自動マージンを設定し、中央寄せにする */
    top: 50px;
    margin-left: 20%;
    margin-right: 10%;
}
@media (max-width: 768px) {
    /* スライドメニューグループ 左右 */
    .slide-menu-group {
        max-width: 327px;
        margin-left: 5%;
        margin-right: 25%;
    }
}
/* =============================================================== */

/* 左列のメニューグループ */
.left-menu {
    position: relative;
    display: flex; /* グループ化 */
    flex-direction: column; /* 縦軸中央揃え */
    line-height: 0.7;
}

/* 右列のメニューグループ */
.right-menu {
    position: relative;
    display: flex; /* グループ化 */
    flex-direction: column;/* 縦軸中央揃え */
    margin-top: 141px;
}
@media (max-width: 768px) {
    /* 左列のメニューグループ */
    .left-menu {
        margin-left: 5%;
    }
    /* 右列のメニューグループ */
    .right-menu {
        margin-top: 135px;
        margin-left: -5px;
    }
}
/* =============================================================== */

/* ボタンの色と形設定 */
.menu-btn {
    border-radius: 10px; /* 角丸 */
    border: none; /* 枠線なし */
    background-color: transparent; /* 背景色を透明に */
}

/* 左列============================================================= */

/* ENTRY */
.menu-txt-01 {
    font-size: 32px;
    font-weight: bold; /* 太字 */
    margin-top: 80px;
    margin-bottom: 40px;
}
@media (max-width: 768px) {
    .menu-txt-01 {
        font-size: 22px;
    }
}

/* 左ボタン */
.menu-btn-01 {
    width: 200px;
    height: 55px; 
    margin-left: -10px;
    margin-bottom: 40px;
}

/* 左ボタン 画像 */
.menu-btn-01 img {
    width: 190px;
    height: auto;
    margin-left: -1px;
}
@media (max-width: 768px) {
    /* 左ボタン */
    .menu-btn-01 {
        width: 120px;
        height: 35px; 
        margin-bottom: 40px;
    }

    /* 左ボタン 画像 */
    .menu-btn-01 img {
        width: 110px;
        height: auto;
    }
}

/* TOP */
.menu-txt-02 {
    font-size: 32px;
    font-weight: bold; /* 太字 */
    margin-bottom: 40px;
    display: block;
    padding: 0 0 5px;
}
/* マウスオーバーアンダーライン */
.menu-txt-02::after {
    border-bottom: solid 2px rgb(255, 255, 255);
    bottom: 0;
    content: "";
    display: block;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0;
}
.menu-txt-02:hover::after {
    width: 20%;
}
@media (max-width: 768px) {
    /* TOP */
    .menu-txt-02 {
        font-size: 22px;
    }
    .menu-txt-02:hover::after {
        width: 25%;
    }
}

/* COMPANY */
.menu-txt-03 {
    font-size: 32px;
    font-weight: bold; /* 太字 */
    margin-bottom: 70px;
}

/* /会社紹介 */
.menu-txt-03 span {
    font-size: 18px;
}
@media (max-width: 768px) {
    /* COMPANY */
    .menu-txt-03 {
        font-size: 22px;
    }

    /* /会社紹介 */
    .menu-txt-03 span {
        font-size: 12px;
    }
}

/* MEMBERS */
.menu-txt-04 {
    font-size: 32px;
    font-weight: bold; /* 太字 */
    margin-bottom: 40px;
}

/* /社員紹介 */
.menu-txt-04 span {
    font-size: 18px;
}
@media (max-width: 768px) {
    /* MEMBERS */
    .menu-txt-04 {
        font-size: 22px;
    }

    /* /社員紹介 */
    .menu-txt-04 span {
        font-size: 12px;
    }
}

/* RECRUIT */
.menu-txt-05 {
    font-size: 32px;
    font-weight: bold; /* 太字 */
    margin-bottom: 40px;
}

/* /採用 */
.menu-txt-05 span {
    font-size: 18px;
}
@media (max-width: 768px) {
    /* RECRUIT */
    .menu-txt-05 {
        font-size: 22px;
    }

    /* /採用 */
    .menu-txt-05 span {
        font-size: 12px;
    }
}

/* CONTACT */
.menu-txt-06 {
    font-size: 32px;
    font-weight: bold; /* 太字 */
    margin-bottom: 100px;
}
/* /問い合わせ */
.menu-txt-06 span {
    font-size: 18px;
}
@media (max-width: 768px) {
    /* CONTACT */
    .menu-txt-06 {
        font-size: 22px;
        margin-bottom: 40px;
    }
    /* /問い合わせ */
    .menu-txt-06 span {
        font-size: 12px;
    }
}

/* 一番下ボタン */
.menu-btn-03 {
    width: 340px;
    height: 55px; 
    margin-left: 25%;
    margin-bottom: 40px;
}

/* 一番下ボタン 画像 */
.menu-btn-03 img {
    width: 342px;
    height: auto;
}
@media (max-width: 768px) {
    /* 一番下ボタン */
    .menu-btn-03 {
        width: 200px;
        height: 40px;
        margin-left: 25%;
        margin-bottom: 40px;
    }

    /* 一番下ボタン 画像 */
    .menu-btn-03 img {
        width: 190px;
        height: auto;
    }
}
/* 右列============================================================= */

/* 右ボタン */
.menu-btn-02 {
    width: 200px;
    height: 55px; 
    margin-left: -20px;
    margin-bottom: 112px;
}

/* 右ボタン 画像 */
.menu-btn-02 img {
    width: 190px;
    height: auto;
}
@media (max-width: 768px) {
    /* 右ボタン */
    .menu-btn-02 {
        width: 120px;
        height: 35px; 
        margin-bottom: 105px;
    }

    /* 右ボタン 画像 */
    .menu-btn-02 img {
        width: 110px;
        height: auto;
    }
}

/* 私たちについて */
.menu-link-01 {
    font-size: 18px;
    margin-bottom: 10px;
    display: block;
    padding: 0 0 5px;
}
/* マウスオーバーアンダーライン */
.menu-link-01::after {
    border-bottom: solid 2px rgb(255, 255, 255);
    bottom: 0;
    content: "";
    display: block;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0;
}
.menu-link-01:hover::after {
    width: 70%;
}

/* 数字で見る働き方 */
.menu-link-02 {
    font-size: 18px;
    margin-bottom: 32px;
    display: block;
    padding: 0 0 5px;
}
/* マウスオーバーアンダーライン */
.menu-link-02::after {
    border-bottom: solid 2px rgb(255, 255, 255);
    bottom: 0;
    content: "";
    display: block;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0;
}
.menu-link-02:hover::after {
    width: 80%;
}

@media (max-width: 768px) {
    /* 私たちについて */
    .menu-link-01 {
        font-size: 12px;
    }
    .menu-link-01:hover::after {
        width: 90%;
    }

    /* 数字で見る働き方 */
    .menu-link-02 {
        font-size: 12px;
        margin-bottom: 38px;
    }
    .menu-link-02:hover::after {
        width: 100%;
    }
}

/* インタビュー */
.menu-link-03 {
    font-size: 18px;
    margin-bottom: 50px;
    display: block;
    padding: 0 0 5px;
}
/* マウスオーバーアンダーライン */
.menu-link-03::after {
    border-bottom: solid 2px rgb(255, 255, 255);
    bottom: 0;
    content: "";
    display: block;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0;
}
.menu-link-03:hover::after {
    width: 60%;
}
@media (max-width: 768px) {
    /* インタビュー */
    .menu-link-03 {
        font-size: 12px;
        margin-bottom: 42px;
    }
    .menu-link-03:hover::after {
        width: 80%;
    }
}

/* 募集一覧 */
.menu-link-04 {
    font-size: 18px;
    margin-bottom: 50px;
    display: block;
    padding: 0 0 5px;
}
/* マウスオーバーアンダーライン */
.menu-link-04::after {
    border-bottom: solid 2px rgb(255, 255, 255);
    bottom: 0;
    content: "";
    display: block;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0;
}
.menu-link-04:hover::after {
    width: 40%;
}
@media (max-width: 768px) {
    /* 募集一覧 */
    .menu-link-04 {
        font-size: 12px;
        margin-bottom: 45px;
    }
    .menu-link-04:hover::after {
        width: 50%;
    }
}

/* お問い合わせ */
.menu-link-05 {
    font-size: 18px;
    display: block;
    padding: 0 0 5px;
}
/* マウスオーバーアンダーライン */
.menu-link-05::after {
    border-bottom: solid 2px rgb(255, 255, 255);
    bottom: 0;
    content: "";
    display: block;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    width: 0;
}
.menu-link-05:hover::after {
    width: 50%;
}
@media (max-width: 768px) {
    /* お問い合わせ */
    .menu-link-05 {
        font-size: 12px;
    }
    .menu-link-05:hover::after {
        width: 60%;
    }
}

/* フッター======================================================== */
/* =============================================================== */

.footer {
    background-color: #242424;

}
  
  .entry-bar {
    background-color: #000;
    padding: 10px 0;
    overflow: hidden;
  }
  
  .entry-content {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .entry-text {
    color: #00FFFF;
    font-size: 24px;
    font-weight: bold;
    margin-left: 5%;
    margin-right: 5%;
  }
  
  .entry-text.highlight {
    color: #FFF;
    text-shadow: 0 0 10px #00FFFF;
  }
  
  .entry-options {
    max-width: 1080px;
    margin: 40px auto;
    display: flex;
    justify-content: center;
    gap: 50px;
  }
  
  .option {
    display: flex;
    flex-direction: column;
    align-items: left;
  }
  
  .option-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-left: 3%;
    box-shadow: #FF00E5;
  }
  
  .option-explain{
    font-weight: 20;
    margin: 5%;
  }

  .option-explain > h3 {
    font-weight: bold;
    font-size: 1.5rem;
  }

   .option-explain > p2 {
    font-weight: normal;
    font-size: 1rem;
  }

  .option-text {
    color: #FFF;
    font-size: 18px;
    text-align: center;
    padding: 10px 20px;
    border-radius: 25px;
    border: 2px solid #FFFFFF;
    border-color: #fff;
    margin-left: 10%;
    margin-right: 10%;
    cursor: pointer;    
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .option-text::after {
    background: linear-gradient(to right, #04F0FF, #FF00E5);
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .1s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
  }
  .option-text:hover {
    color: #242424;
    font-weight: bold;
  }
  .option-text:hover::after {
    transform: scale(1, 1);
  }
  .footer-main {
    padding: 50px 0;

  }
  .shadow-green {
    box-shadow: #07D133;
  }
  .shadow-perple {
    box-shadow: #FF00E5;
  }
  
  .footer-gradient {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: auto;
    height: auto;
    background-image: url('../img/top_page/top_footer.svg');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 50px 0; /* 上下のパディングを追加 */
}
  
  .footer-content {
    max-width: 1080px;
    margin: 0 auto;
    border-radius: 18px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .footer-logo {
    margin-bottom: px;
  }
  
  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    max-height: 2000px;
 
  }
  
  .nav-column {
    flex: 1;
    min-width: 400px;
    margin-left: 2%;

  }

  .nav-column-company {
    text-align: right;
  }
  
  .nav-column h4 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 15px;

  }
  
  .nav-column ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  .nav-column ul li {
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 2.5px;
    font-family: "inter";
  }
  
  @media (max-width: 768px) {
    .entry-options {
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }
  
    .footer-content {
      padding: 20px;
    }
    
    .footer-nav {
      flex-direction: column;
      gap: 20px;
    }
    
    .nav-column {
      min-width: 100%;
    }
    .option-explain > p2 {
      font-size: 0.8rem;
  }
  }
    .option-explain > h3 {
    font-size: 1.3rem;
  }