/* ===============================================
   Base / Reset
   =============================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
    font-size: 62.5%; /* 1rem = 10px */
}
:root {
    --color-primary-blue: #07569F;
    --color-page-bg: #F7F7F7;
    --color-black: #333333;
    --color-gray: #D9D9D9;
}
body{
    font-family: 'Zen Kaku Gothic New', sans-serif;
    line-height: 1.8; /* 行間180% */
    color: var(--color-black);
    background-color: var(--color-page-bg);
    font-size: 1.6rem; /* 基本文字サイズ 16px */
    font-weight: 400; /* ミディアム */

}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: inherit;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
/* ===============================================
   Layout Logic
   =============================================== */
.site-wrapper {
    position: relative;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    line-height: 1.8;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--color-black);
    min-width: 124rem;
    overflow-x: clip;
}
.container_wrap {
    position: relative;
    z-index: 0;
}
.container_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(50% - 62rem); 
    background-color: #fff;
    z-index: -1;
    transition: background-color 0.3s ease;
}
.container_wrap:has(a:hover)::before {
    background-color: #333; /* 変化後カラー：黒 */
}
.container {
    width: 124rem;
    margin-left: 10rem;
    padding: 8rem;
    border-left: 1px solid #909090;
    margin-inline: auto;
}
.sp{
    display: none;
}
.pc{
    display: inline-block;
}
/* 共通ボタンスタイル（幅は各コンポーネント側で制御） */
.btn {
    display: inline-block;
    height: 6.4rem; /* 64px */
    line-height: 6.4rem;
    padding: 0 2.4rem; /* 横パディングで幅を自動調整 */
    background-color: var(--color-black); /* 基本色（必要なら変数化） */
    color: #fff;
    text-align: center;
    border-radius: 3.2rem; /* 32px */
    font-weight: 500;
    font-size: 2rem;
    border: 1px solid var(--color-black);
    transition: all 0.3s ease;
}

.btn::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    background-image: url('img/blank_off.svg');
    background-size: contain;
    vertical-align: baseline;
}

/* ホバー / フォーカスの視認性向上 */
.btn:hover {
    border:1px solid var(--color-primary-blue);
    color: var(--color-primary-blue);
    background-color: #fff;}
.btn:hover::after {
    background-image: url('img/blank_on.svg');
}

.btn_area{
    text-align: center;
    }
.btn_area a{
    width: 35rem;
}
/* ===============================================
   Header & Navigation
   =============================================== */
.header {
    width: 100%;
    background-color: var(--color-page-bg);
    position: fixed;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #909090;
    padding: 0 2rem;
    margin-top: 29px;
}

.header__inner {
    width: 100%;
    max-width: 124rem;
    padding: 1.3rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-inline: auto;
}

.logo {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    padding-bottom: 1.8rem;
    flex: 0 0 auto; /* keep logo size fixed so nav can become scrollable */
}
.logo img{
    width: 55%;
    max-width: 245px;
    display: block;
}

/* PC用メニュー */
.global-nav ul {
    display: flex;
    gap: 3rem;
}

.global-nav li {
    display: flex; /* ボタンを中央揃えにするため */
    align-items: center; /* ボタンを中央揃えにするため */
}

/* 共通のボタン基本スタイル */
.global-nav .nav-button-outline,
.global-nav .nav-button-filled {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16.3rem; /* 163px */
    height: 6.3rem;  /* 63px */
    font-weight: 500;
    font-size: 2rem;
    border-radius: 3.15rem; /* 高さの半分 */
    transition: all 0.3s ease;
}

/* 募集要項ボタンのデザイン */
.global-nav .nav-button-outline {
    background-color: #fff;
    color: var(--color-primary-blue);
    border: 1px solid var(--color-primary-blue);
}

.global-nav .nav-button-outline:hover {
    background-color: var(--color-primary-blue);
    color: #fff;
}

/* エントリーボタンのデザイン */
.global-nav .nav-button-filled {
    background-color: var(--color-primary-blue);
    color: #fff;
    border: 1px solid var(--color-primary-blue); /* hover時に利用するため定義 */
}

.global-nav .nav-button-filled:hover {
    background-color: #fff;
    color: var(--color-primary-blue);
}

/* SP用募集要項ボタン */
.sp-job-button {
    display: none; /* PCでは非表示 */
    background-color: var(--color-primary-blue);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.4rem;
    text-align: center;
    transition: opacity 0.3s ease;
}

.sp-job-button:hover {
    opacity: 0.8;
}

/* ===============================================
   Main Content
   =============================================== */
#hero .container{
    border-left: none;
    position: relative;
    width: 122rem;
   }
#hero .container .fv{
    width: 44%;
    max-width: 55.7rem;
    position: absolute;
    top: 10rem;
    right: 2rem;
   }
.main-content {
    padding-top: calc(5rem + 29px);
}

.hero {
    position: relative;
    border-bottom: none !important;
}

.hero h2 {
    font-size: 7rem;
    font-weight: 500;
    letter-spacing: 1rem;
    line-height: 1.5;
    margin-top: 2rem;
}
.hero h2 span{
    color: var(--color-primary-blue);
}
/* ===============================================
   common
   =============================================== */
.section {
    border-bottom: 1px solid #909090;
    padding-left: 2rem;
    width: fit-content;
    min-width: 100%;
}
/* h3共通のフォント設定 */
h3 {
    font-family: 'Zen Kaku Gothic New', sans-serif; /* h3にもZen Kaku Gothic Newを適用 */
}
.section h3 {
    margin-bottom: 4rem;
    font-size: 2.4rem;
    text-align: left;
}
/* ===============================================
   hero anime
   =============================================== */
.circle-deco-txt {
  display: block;
  animation: spin-deco 20s linear infinite;
  transform-origin: center;
  z-index: 10;
  pointer-events: none;
  margin-top: 1rem;
}

/* テキストの基本設定 */
.circle-deco-txt text {
  fill: var(--color-black);
  font-size: 1.35rem; 
  letter-spacing: 2px;
}

/* ▼ 追加：赤色にする部分の指定 */
.circle-deco-txt .txt-cor {
  fill: var(--color-primary-blue); 
}

/* 回転アニメーションの定義 */
@keyframes spin-deco {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===============================================
   Main text
   =============================================== */

    #mainCopy h3 {
        font-size: 6rem;
        font-weight: 500;
        letter-spacing: 0.2em;
        color: var(--color-gray);
        line-height: 1.2;
    }
   #mainCopy p{
    font-size: 2.4rem;
   }
/* ===============================================
   scroll-down
   =============================================== */
.scroll-down-simple {
    position: absolute;
    bottom: 3rem;
    left: -3rem;
}

.scroll-down-simple .line {
  position: relative;
  width: 1px;
  height: 10rem;
  background: #909090;
  margin-left: 3rem;
  margin-bottom: 3rem;
}

/* 動く矢印 */
.scroll-down-simple .line::after {
  content: "";
  position: absolute;
  top: 0; 
  left: 50%;
  width: 6px;
  height: 6px;
  
  /* 矢印の形を作る */
  border-left: 1px solid #909090;
  border-bottom: 1px solid #909090;

  /* 回転させて下向き矢印にする */
  transform: translateX(-50%) rotate(-45deg);
  
  /* ▼アニメーション適用（1.5秒でループ） */
  animation: arrow-scroll 1.5s infinite;
}

/* テキスト */
.scroll-down-simple .text {
  color: #909090;
  font-size: 1.2rem;
  text-transform: uppercase;
  transform: rotate(90deg);
  margin-left: 1rem;
}

/* ▼アニメーションの定義 */
@keyframes arrow-scroll {
  0% {
    top: -5px; /* 線の少し上から開始 */
    opacity: 0;
  }
  30% {
    opacity: 1; /* 途中で表示 */
  }
  100% {
    top: 100%; /* 線の下まで移動 */
    opacity: 0; /* 消える */
  }
}
/* ===============================================
   h3タイトル装飾
   =============================================== */
/* 「提供するサービス」と「OUR SERVICE」のスタイル */
.h3-group-decorative {
    position: relative;
    text-align: left; /* 左寄せに変更 */
    margin-bottom: 6rem; /* 必要に応じて調整 */
}

.h3-group-decorative h3 {
    font-size: 2rem; /* 20px */
    text-align: left; /* 左寄せに変更 */
    margin-bottom: 0.5rem; /* 次の行との間隔 */
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: .1rem;
}

.h3-decorative-text {
    display: block; /* 2行になるように */
    font-size: 5rem; /* 50px */
    line-height: 1;
    letter-spacing: .5rem;
    white-space: nowrap;
    margin-top: 0; /* h3-group-decorative h3 の margin-bottom と合わせて調整 */
}

.h3-decorative-text .our-part {
    color: var(--color-black);
}

.h3-decorative-text .service-part {
    color: var(--color-primary-blue);
}


/* ===============================================
   Swiper Custom Styles
   =============================================== */

/* Swiperコンテナの余白調整 */
.swiper {
    width: 100%;
    padding-bottom: 5rem; /* ページネーションと矢印のための下部余白 */
}

/* スライドの中身（共通レイアウト） */
.slide-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 6rem;
}

.slide-content {
    width: 31%;
}

.slide-content h3 {
    width: 90%;
    margin-inline: auto;
}

.slide-content p {
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
    margin-top: 2.7rem;
}

/* スライド内では幅を100%に（横幅はスライドのレイアウトに従う） */
.slide-content .btn,
.swiper-slide .btn {
    display: block; /* ブロックにして横幅100% を適用しやすくする */
    width: 100%;
    max-width: 40rem;
    padding-left: 0; /* スライドの左右の余白は親で調整したい場合に */
    padding-right: 0;
    margin-inline: auto;
}

.slide-img {
    width: 50%;
}

.slide-img img {
    width: 100%;
    height: auto;
}

/* --- Swiperパーツの上書き --- */

/* 矢印の色変更 */
.swiper-button-prev,
.swiper-button-next {
    color: #909090;
    width: 1.5rem;
    height: 3rem;
    top: auto;
    bottom: 0;
}

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

/* ページネーション（ドット）の色 */
.swiper-pagination-bullet-active {
    background-color: #333333;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 2rem;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 0;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev{
    right: var(--swiper-navigation-sides-offset, 33%);
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 33%);
}
/* ===============================================
   FAQ Section (Accordion)
   =============================================== */

.faq-list {
    border-top: 1px solid #909090;
}

.faq-item {
    border-bottom: 1px solid #909090;
}

/* --- 質問エリア (トリガー) --- */
.faq-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 4rem;
    cursor: pointer;
    position: relative;
    font-weight: 500;
    font-size: 2rem;
    transition: color 0.3s;
}

.faq-title {
    padding-right: 2rem; /* アイコンとの余白 */
    line-height: 1.4;
}

/* --- プラス・マイナスアイコン --- */
.faq-icon {
    display: block;
    width: 3.2rem; /* 32px */
    height: 3.2rem; /* 32px */
    position: relative;
    flex-shrink: 0; /* 幅が潰れないように */
}

/* 横棒と縦棒の共通設定 */
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: var(--color-black); /* アイコンの色を黒に */
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 横棒 (常に表示) */
.faq-icon::before {
    width: 100%;
    height: 1px;
}

/* 縦棒 (開いた時に消える or 回転する) */
.faq-icon::after {
    width: 1px;
    height: 100%;
}

/* --- 開いた状態(.is-open)のデザイン --- */

/* 縦棒を90度回転させて横棒に重ねる（マイナスになる） */
/* あるいは scaleY(0) で消す方法もありますが、回転の方が自然です */
.faq-item.is-open .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after {
    background-color: var(--color-black); /* アイコンの色を黒に */
}


/* --- 回答エリア (開閉アニメーション) --- */
.faq-body {
    display: grid;
    grid-template-rows: 0fr; /* 閉じた状態は高さ係数0 */
    transition: grid-template-rows 0.3s ease-out;
    
    /* ▼▼▼ 重要: これを追加してください ▼▼▼ */
    overflow: hidden; /* 高さが0になった時にはみ出した中身を隠す */
    
    /* visibility: hidden; は削除してください（アニメーションの邪魔になるため） */
}

/* グリッドの中身（高さ計算用） */
.faq-content {
    min-height: 0;
}

/* 中身のスタイリング */
.faq-content p {
    padding: 0 4rem 2.5rem 7rem;
    line-height: 1.6;
}

/* 開いた状態 */
.faq-item.is-open .faq-body {
    grid-template-rows: 1fr; /* 開いた状態は高さ係数1（中身の高さ） */
    
    /* visibility: visible; も削除 */
}
/* ===============================================
   選考プロセス
   =============================================== */
/* 全体のコンテナ */
.flow-container {
  display: flex;
  align-items: center;     /* 垂直方向も中央 */
  gap: 13rem;               /* 矢印が入るよう少し広げました */
  margin-bottom: 6rem;
  width: 100%;
}

/* 個々のアイテム */
.flow-item {
  position: relative;
  width: 24rem;
}

/* 円のデザイン */
.flow-circle {
    width: 300px;
    height: 300px;
    border: 1px solid #909090;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}
.flow-circle.end{
    border: none;
    background-color: var(--color-primary-blue);
    color: #fff;
}
.flow-circle.end h3{
    color: #fff;
}
/* --- 矢印のデザイン変更 --- */
/* 最後の要素以外に表示 */
.flow-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10rem;
    width: 5rem;
    height: 5rem;
    border-left: 2px solid #555555;
    border-bottom: 2px solid #555555;
    transform: translateY(-50%) rotate(-135deg);
}

/* 円の中のコンテンツ */
.circle-content {
  text-align: center;
  width: 100%;
}

/* タイトル */
.circle-title {
  line-height: 1.3;
  text-align: center;
    font-size: 3rem;
    font-weight: 500;
    margin-bottom: 1.8rem;
}

/* 詳細テキスト */
.circle-text {
    margin: 0 3rem;
    line-height: 2;
    text-align: left;
}


/* ===============================================
   社長からのメッセージ
   =============================================== */
   #president .container{
    background: #fff;
    position: relative;
   }
   #president .comment{
    display: flex;
    gap: 4rem;
    align-items: flex-start;
   }
   #president .comment dt{
    font-size: 2rem;
    font-weight: 700;
    padding-bottom: .8rem;
   }
   #president .comment dd{
    font-weight: 400;;
   }
   #president img{
    border-radius: 8px;
    width: 41.6rem;
   }
   /* 「みなさまへ」と「社長からのメッセージ」のスタイル */
.h3-two-lines {
    text-align: left; /* 左寄せに変更 */
    margin-bottom: 2rem;
}

.h3-two-lines .h3-main-line {
    display: block;
    font-size: 2rem; /* 20px */
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem; /* 上の行との間隔 */
}

.h3-two-lines .h3-sub-line {
    display: block;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .5rem;
    color: var(--color-primary-blue);
}

/* ===============================================
   クロージング
   =============================================== */
   #closing {
    background-color: var(--color-primary-blue);
   }
   #closing .container{
    background-color: var(--color-primary-blue);
    color: #fff;
    display: flex;
    align-items: center;
    border-left: none;
   }
   #closing .container:first-child{padding-bottom: 0;}
   #closing .container:last-child{padding-top: 6rem;}
   #closing .closing_txt{
    font-size: 6rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 1rem;
    white-space: nowrap;
   }
   #closing p{
    font-size: 2rem;
    line-height: 2;
   }
   #closing .btn{
    background: #fff;
    color: var(--color-primary-blue);
    border: none;
   }
   #closing .btn::after{
    content: none;
   }
    #closing .btn:hover{
    background: var(--color-black);
    color: #fff;
    }
    #closing .btn:hover::after {
        content: none;
    }
/* ===============================================
   Card List Section (PC: 3 Columns)
   =============================================== */
.card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card-item {
    position: relative;
    width: calc((100% - 6rem) / 3);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    aspect-ratio: 350 / 513;
    display: flex;
    flex-direction: column;
}

/* ホバー時に全体を少し浮かせる */
.card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

.card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* ホバー時に画像をズームさせる演出 */
.card-item:hover .card-img img {
    transform: scale(1.05);
}

.card-body {
    position: absolute;
    z-index: 2;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    background-color: #fff; /* 背景を白に */
    padding: .9rem;        /* 内側の余白 */
    border-radius: 10px;     /* 角丸 */
    color: #333;
    text-align: center;
    line-height: 1.4;
    font-weight: 400;
}

.card-body h4 {
    font-weight: 500;
}
.card-body h4 span {
    color: var(--color-primary-blue);
}
/* ===============================================
   noteLink
   =============================================== */
   .container.noteLink{
    padding: 0;
   }
   .container.noteLink section{
    padding: 0;
   }
   .noteLink a{
    background: #fff;
    font-size: 3rem;
    padding: 5rem 8rem;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
   }
   .noteLink a::after{
    content: '';
    display: inline-block;
    width: 98px;
    height: 84px;
    background-image: url(img/icon_note.png);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    right: 8rem;
    top: 0;
    bottom: 0;
    margin: auto;
   }
   .noteLink a:hover{
    background: #333;
    color: #fff;
}
   .noteLink a:hover::after{
    background-image: url(img/icon_note_hover.png);
   }
   
/* ===============================================
   デザイン部が大切にする価値観
   =============================================== */
#designvalues .container{
    padding-right: 0;
}
#designvalues .h3-group-decorative + p{ 
    font-size: 2.4rem;
    }
/* ===============================================
   働く環境と待遇
   =============================================== */
   #welfare .welfare-list{
    display: flex;
    flex-flow: column;
    gap: 4rem;
    padding-bottom: 6rem;
   }
   #welfare .welfare-list dd{
    font-weight: 400;
   }
   #welfare .welfare-img{
    display: flex;
    gap: 2.4rem;
    justify-content: space-between;
   }
   #welfare .welfare-img dl{
    margin-bottom: 2rem;
    width: calc(100% / 3);
   }
   #welfare .welfare-img dd{
    font-size: 1.8rem;
   }
    #welfare dt{
        font-size: 2rem;
        font-weight: 700;
        padding-bottom: .3rem;
    }
    #welfare img{
        width: 100%;
        border-radius: 10px;
        margin-bottom: 1rem;
    }
/* ===============================================
   Modal Dialog (Soft Animation)
   =============================================== */

/* --- モーダル背景（オーバーレイ） --- */
.modal-overlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; を一括指定 */
    background-color: rgba(0, 0, 0, 0.4); /* 半透明の黒（透過0.8） */
    z-index: 2000; /* 最前面へ（モーダル本体の下） */
    
    /* 初期状態: 非表示 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* クリックを透過させる */
    
    /* 柔らかいフェードアニメーション */
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* 表示状態 */
.modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- モーダル本体 --- */
.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    /* 画面中央配置、かつ初期位置は少し下にずらしておく（フワッと上がる演出用） */
    transform: translate(-50%, -45%); 
    
    width: 90%;
    max-width: 104rem; /* PCでの最大幅（104rem = 1040px） */
    height: 90vh; /* 画面からはみ出さないように */
    background-color: #fff;
    border-radius: 20px;
    z-index: 2001; /* オーバーレイより上 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);

    /* 初期状態: 非表示 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* 柔らかいフェード＋スライドアップアニメーション */
    transition: opacity 0.4s ease, transform 0.4s ease-out, visibility 0.4s;
}
.modal-content .modal-body{
    display: flex;
    gap: 4rem;
    overflow: auto;
    max-height: 75vh;
}
.modal-content .detail{
    width: 40%;
    max-width: 36rem;
}
.modal-content .detail h3{
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.4;
}
.modal-content .detail h3 strong{
    font-weight: 500;
}
.modal-content .detail h3 span{
    color: var(--color-primary-blue);
}
.modal-content .comment{
    width: 60%;
}
.modal-content .comment dt{
    font-size: 1.6rem;
    font-weight: 700;
    border-bottom: 1px solid #CBCBCB;
    margin-top: 3rem;
    padding-bottom: 1rem;
}
.modal-content .comment dt:first-of-type{
    margin-top: 0;
}
.modal-content .comment dd{
    margin-top: 1rem;
    font-size: 1.4rem;
}
/* 表示状態 */
.modal-content.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%); /* 本来の中央位置へ移動 */
}

/* モーダル内部 */
.modal-inner {
    position: relative;
    padding: 6rem;
}

/* 閉じるボタン */
.modal-close-btn {
  /* 内側スタイル */
  position: absolute;
  width: 40px;          /* サイズ40px */
  height: 40px;         /* サイズ40px */
  background-color: #909090; /* 内部色909090 */
  border-radius: 50%;   /* 正円にする */
  
  /* ボタンのデフォルトスタイル消去 */
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  
  /* 中の×印を中央に配置するための設定 */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* ホバー時の演出（任意） */
  transition: opacity 0.3s;
  right: 2rem;
  top: 2rem;
}

.modal-close-btn:hover {
  opacity: 0.8;
}

/* ×印の共通設定（2本の線） */
.modal-close-btn::before,
.modal-close-btn::after {
  content: "";
  position: absolute;
  width: 20px;          /* ×のサイズ20px */
  height: 2px;          /* 線の太さ（お好みで調整してください） */
  background-color: #FFFFFF; /* ×の色：FFFFFF */
  border-radius: 2px;
}

/* 1本目の線（45度回転） */
.modal-close-btn::before {
  transform: rotate(45deg);
}

/* 2本目の線（マイナス45度回転） */
.modal-close-btn::after {
  transform: rotate(-45deg);
}

.modal-body img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.6rem;
    border-radius: 2rem;
}

/* ===============================================
   About Us Section (with iframe)
   =============================================== */
.doc_slide_inner{
    text-align: center;
}
.speakerdeck-iframe {
    border: 0px !important;
    background: padding-box padding-box rgba(0, 0, 0, 0.1) !important;
    padding: 0px !important;
    border-radius: 6px !important;
    width: 100%;
    max-width: 88.7rem; /* keep desktop sizing but allow mobile shrink */
    height: auto !important;
    aspect-ratio: 560 / 315;
    margin: 0 !important;
}


/* ===============================================
   共通SNSフッター
   =============================================== */
.share-block {
    display: flex;
    align-items: center;
    justify-content: center; /* 配置に合わせて調整 */
    gap: 16px;
    padding: 20px 0;
    background-color: #f5f5f5;
}
.share-block .share-label {
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }
.share-block .share-list {
      display: flex;
      gap: 12px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
.share-block .share-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px; /* ボタンの大きさ */
      height: 44px;
      border-radius: 50%;
      transition: opacity 0.3s;
      text-decoration: none;
      cursor: pointer;
      border: none;
      padding: 0;
      overflow: hidden; 
    }
    
.share-block .share-btn img {
      width: 40px; 
      height: auto;
      display: block;
    }
.share-block .share-btn:hover {
      opacity: 0.8;
    }
.share-block .btn-x {
      background-color: #000000;
    }
.share-block .btn-fb {
      background-color: #1877F2;
    }
.share-block .btn-line {
      background-color: #06C755;
    }
.share-block .btn-copy {
      background-color: #ffffff;
      border: 1px solid #ddd;
    }

.gmoGroupSecurity{
    background-color: #fff;
}



/* ===============================================
   Animation Additions (デザイン変更なし)
   =============================================== */

/* --- 1. H2タイトルのリビール演出（クレバーな包み） --- */

/* H2自体のスタイルは既存のもの引き続き前提で、
   アニメーション用のクラスで微調整 */
.hero-title-anime {
    /* 既存の h2 と同じスタイルが適用される想定ですが
       念のため構造変更によるズレを防ぐ設定 */
    display: block;
}

/* マスク（見えない枠）の定義 */
.mask-wrap {
    display: block;
    overflow: hidden; /* ここから下から出てくる動きを隠す */
    /* <br>の代わりに改行の役割を持たせる */
}

/* 動くテキスト本体 */
.reveal-text {
    display: block;
    transform: translateY(105%); /* 最初は下に隠しておく */
    opacity: 0; /* チラつき防止 */
    /* 知的なキレのある動き (cubic-bezier) */
    animation: textSlideUp 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* 2行目の遅延実行 */
.reveal-text.delay-1 {
    animation-delay: 0.2s;
}

@keyframes textSlideUp {
    from {
        transform: translateY(105%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/* --- 2. メイン画像の微細な浮遊感（未来感・デジタル感） --- */

/* 既存の .fv クラスに追加適用されます */
.hero .fv {
    /* 登場時にふわっとしたフェードイン */
    animation: fvAppear 1.2s ease-out forwards, fvFloating 5s ease-in-out 1.2s infinite;
    opacity: 0; /* 最初は隠す */
}

/* 登場アニメーション */
@keyframes fvAppear {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 継続する浮遊アニメーション */
@keyframes fvFloating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* わずかに上下させる */
    }
}

/* --- 3. その他の要素の時間差表示（ワクワク感） --- */

/* 回転するSVG文字 */
.circle-deco-txt {
    opacity: 0;
    /* 回転アニメーション(spin-deco)は維持しつつ、登場フェードを追加 */
    animation: spin-deco 20s linear infinite, fadeInSimple 1s ease-out 0.8s forwards;
}

/* SCROLLダウン */
.scroll-down-simple {
    opacity: 0;
    animation: fadeInSimple 1s ease-out 1.2s forwards;
}

/* 単純なフェードイン用 */
@keyframes fadeInSimple {
    to { opacity: 1; }
}

/* ===============================================
   Scroll Trigger Animations
   =============================================== */

/* --- 基本のフェードアップ動作 --- */
.js-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* 画面に入った時の状態（JSで付与） */
.js-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}


/* --- リスト要素の連番表示（Stagger） --- */
/* .card-list, .flow-container などの親要素が .in-view になったら、
   その中の子要素を順番に表示させる「クレバー」な演出 */

/* カードリスト（3カラム） */
.card-list .card-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* 親が見えたら、子が動く */
.card-list.in-view .card-item {
    opacity: 1;
    transform: translateY(0);
}

/* 順番に遅延させる（左から右へ流れるように） */
.card-list.in-view .card-item:nth-child(1) { transition-delay: 0.1s; }
.card-list.in-view .card-item:nth-child(2) { transition-delay: 0.2s; }
.card-list.in-view .card-item:nth-child(3) { transition-delay: 0.3s; }
.card-list.in-view .card-item:nth-child(4) { transition-delay: 0.4s; }
.card-list.in-view .card-item:nth-child(5) { transition-delay: 0.5s; }
.card-list.in-view .card-item:nth-child(6) { transition-delay: 0.6s; }


/* 選考フロー（横） */
.flow-container .flow-item {
    opacity: 0;
    transform: translateX(-20px); /* フローは横並びなので、少し左から入ると自然 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.flow-container.in-view .flow-item {
    opacity: 1;
    transform: translateX(0);
}

.flow-container.in-view .flow-item:nth-child(1) { transition-delay: 0.1s; }
.flow-container.in-view .flow-item:nth-child(2) { transition-delay: 0.3s; }
.flow-container.in-view .flow-item:nth-child(3) { transition-delay: 0.5s; }
.flow-container.in-view .flow-item:nth-child(4) { transition-delay: 0.7s; }


/* 福利厚生リスト */
.welfare-list dt, 
.welfare-list dd {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.welfare-list.in-view dt,
.welfare-list.in-view dd {
    opacity: 1;
    transform: translateY(0);
}

/* 少しランダム感を出すための遅延ループ */
.welfare-list.in-view dt:nth-of-type(1) { transition-delay: 0.1s; }
.welfare-list.in-view dd:nth-of-type(1) { transition-delay: 0.15s; }
.welfare-list.in-view dt:nth-of-type(2) { transition-delay: 0.2s; }
.welfare-list.in-view dd:nth-of-type(2) { transition-delay: 0.25s; }
.welfare-list.in-view dt:nth-of-type(3) { transition-delay: 0.3s; }
.welfare-list.in-view dd:nth-of-type(3) { transition-delay: 0.35s; }