@charset "utf-8";



p {
    font-size: 14px;
}
/* ◆◆◆◆◆◆◆◆◆◆◆◆
   コンテンツページ/ ヒーロファーストビュー共通　
   concept/newgraduate/midcareer/recruit一覧
   ◆◆◆◆◆◆◆◆◆◆◆◆ */

/* --- 2. レイアウト設定 --- */
.sub-hero-section {
    width: 100%;
    
    /* 高さの設定：画面いっぱい */
    height: 100vh;
    height: 100svh;
    
    /* レイアウト設定 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* 余白設定 */
    padding-top: 110px;
    padding-bottom: 0; /* ここで下余白は確保しています */
    
    overflow: hidden;
    position: relative;
    
    /* ▼▼ 修正1：背景は bg-decoration に任せるので、ここは透明のみにする ▼▼ */
    /* background: transparent; 
    background: url(../img/index/sp/bg-mobile.jpg) no-repeat center top;
    background-size: cover; */
}

.sub-hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
    
    /* 念のため高さ100%を指定し、親のflex配下に入れる */
    height: 100%; 
}


/* --- 3. 画像エリア (SP版アニメーション) --- */
.sub-hero-visual {
    width: 100%;
    
    /* ★重要：残りの高さを全部埋める設定 */
    flex: 1;       
    min-height: 0; 
    
    /* 配置調整 */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 0; /* 右端ピッタリにするなら0でOK */
}

.sub-hero-visual__inner {
    /* ▼▼ 修正2：高さ基準のロジックに戻す ▼▼ */
    /* width: 75%;  ← これだと高さ連動しなくなるので削除 */
    
    height: 60vh;   /* フォールバック */
    height: 60svh;  /* ★画面高さの45%にする（55%から縮小） */
    width: auto;     /* 高さに合わせて幅を自動計算させる */
    
    /* ただし、横に広がりすぎないための保険としてmax-widthを入れる */
    max-width: 75%;

    /* 縦長の枠比率 */
    aspect-ratio: 3 / 4.5; 
    
    overflow: hidden;
    background: #f0f0f0;
    box-shadow: -15px 15px 25px rgba(0,0,0,0.05);
}

/* 左右にゆっくり動くアニメーション */
.pan-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: 0% 50%;
    animation: pan-slowly 20s ease-in-out infinite alternate;
}

@keyframes pan-slowly {
    0% { object-position: 0% 50%; }   
    100% { object-position: 100% 50%; } 
}


/* --- 4. テキストエリア (SP版) --- */
.sub-hero-text {
    /* ▼▼ 修正3：下の余白を調整（親要素のpaddingと合わせて調整） ▼▼ */
    padding: 50px 30px 20px; /* 下70pxは多すぎるので20pxくらいに */
    
    position: relative;
    z-index: 2;
    /* 縮まないように指定 */
    flex-shrink: 0;
}

.main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    line-height: 1.1;
    color: #444;
    font-weight: 400;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    transform: scaleY(0.8);
}

.amp {
    font-family: 'Noto Serif JP', serif;
    font-style: italic;
    font-size: 1.2em;
    position: absolute;
    right: -50px;
    bottom: 10px;
    color: #333;
}

.sub-title {
    font-size: 14px;
    color: #666;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-family: 'Noto Serif JP', serif;
}


/* =========================================
   PC版スタイル (min-width: 1024px)
   ========================================= */
@media (min-width: 1024px) {

    /* --- 1. 背景の調整（重要！） --- */
    .bg-decoration.is-concept {
        /* 幅は画面いっぱい */
        width: 103%; 
        
        /* ★ご希望通り、上から50svh（画面半分）でストップ */
        height: 50svh; 
        
        /* 角丸を解除して直角に */
        border-radius: 0;
        
        /* 背景画像の設定 */
        background-image: url('../img/index/bg-pc.jpg'); /* PC用の画像があればそちらに変更 */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top; /* 下基準で合わせると波紋がきれいに見えることが多いです */
    }

    /* --- 2. 大枠のレイアウト --- */
    .sub-hero-section {
        /* 画面いっぱいの高さを確保 */
        /* min-height: 100svh; */
        height: 100vh;
        
        /* 上下中央揃えにする（これでテキストが50%ラインに来ます） */
        display: flex;
        align-items: center; 
        justify-content: center;
        
        /* モバイル用の余白をリセット */
        padding-top: 0; 
        padding-bottom: 0;
        
        background: transparent;
        
    }

    .sub-hero-container {
        width: 100%;
        max-width: 100%;
        padding: 0 50px;
        padding-right: 0;
        /* 横並びにする */
        flex-direction: row; 
        align-items: center;
        justify-content: space-between;
        
        /* 高さはなりゆき */
        height: auto; 
    }

    /* --- 3. テキストエリア（左側） --- */
    .sub-hero-text {
        width: 35%;
        order: 1; /* 左に配置 */
        
        /* テキストを右揃え（画像の方へ寄せる） */
        text-align: right; 
        
        /* 余白リセットと調整 */
        padding: 0;
        padding-right: 60px; /* 画像との距離 */
        
        /* 背景より手前に表示 */
        position: relative;
        z-index: 10;
        /* ▼▼▼ ここを追加して微調整します ▼▼▼ */
    /* マイナスだと「上」へ、プラスだと「下」へ動きます */
    /* "数ピクセル上に上げる" と、境界線が綺麗にテキストの中央に来ることが多いです */
    transform: translateY(16px); 
    }

    .main-title {
        font-size: 62px; /* PC用に大きく */
        margin-bottom: 20px;
        transform: scaleY(0.8);
        font-weight: 400;
        line-height: 1.5;
    }

    .amp {
        right: -60px; /* 位置微調整 */
        font-size: 1.2em;
    }
    
    .sub-title {
        font-size: 16px;
    }

    /* --- 4. 画像エリア（右側） --- */
    .sub-hero-visual {
        width: 60%;
        order: 2; /* 右に配置 */
        
        /* モバイル用のflex設定を解除 */
        flex: none; 
        min-height: auto;
        padding: 0;
        
    /* コンテナ内で画像をどう置くか */
        display: flex;
        justify-content: flex-end; /* 右詰め */
    }

    .sub-hero-visual__inner {
        width: 100%;
        max-width: none; /* PCでの最大幅 */
        
        /* PC版は固定高さ、または比率指定 */
        /* height: 650px;  */
        height: fit-content;
        /* モバイルの比率指定を解除 */
            aspect-ratio: auto;
        
        box-shadow: none;
        border-radius: 0; /* 必要に応じて */
    }

    /* 画像本体 */
    .pan-image {
        /* PCではアニメーションを止めて、いい位置で固定する */
        animation: none; 
        object-fit: cover;
        object-position: center center;
    }
}

/* =========================================
   Philosophy Section (Pyramid Design)
   ========================================= */

.philosophy-section {
    width: 100%;
    padding: 80px 0;
    position: relative;
    /* ▼▼▼ 修正箇所：ここにあった背景画像の設定を削除 ▼▼▼ */
    background-color: #fff; /* 背景を白に設定 */
}

.philosophy-container {
    max-width: 800px;
    margin: 0 auto;
}

/* タイトル周り */
.philosophy-header {
    margin-bottom: 40px!important;
    /* line-height: 1;
    display: inline-block;
    padding-left: 20px;
    width: 100%; */
}

.section-title {
    font-size: 30px;
    letter-spacing: 0.1em;
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.1;
    color: #444;
    display: inline-block;
    transform: scaleY(0.8);
}

.ja-title {
    font-size: 16px;
    font-family: serif;
    font-weight: normal;
    border-bottom: 1px solid #333;
    display: inline-block;
    width: 10em;
    text-align: end;
}


/* --- ビジュアルエリア（重要） --- */
.philosophy-visual {
    position: relative; /* 重なり順の基準 */
    width: 100%;
    margin: 0 auto 20px; /* 中央寄せ & 下余白 */
    
    /* 内部の配置調整 */
    display: block;
    line-height: 2em;
    justify-content: center;
    align-items: center;
    padding: 40px 20px; /* 上下の余白（グレーボックスをはみ出させるため） */

    /* ▼▼▼ 修正箇所：ここに背景画像の設定を追加 ▼▼▼ */
    /* 薄いウェーブなどの背景画像を指定してください */
    background-image: url('../img/index/sp/bg-mobile.jpg');
    background-repeat: no-repeat;
    /* 画像のサイズは、デザインに合わせて調整してください */
    /* 例: cover, contain, または具体的なpxや%指定など */
    background-size: cover;
    /* 画像の位置を調整 */
    background-position: center;
}


.visu-title{
    width: 70%;
    max-width: 800px;
    text-align: center;
    margin: 0 auto 40px;
    font-weight: 500;

}

/* .gray-bg-box {
    position: absolute;
    z-index: 1;
    width: 60%;  
    height: 127%; 
    top: 20%;
    left: 7%;
    background-color: #f4f4f4; 
    opacity: 0.9;
} */

/* ② ピラミッド画像 */
.pyramid-img {
    position: relative;
    z-index: 2; /* グレーボックスより手前 */
    width: 95%; /* 親枠の95％（グレーより広い） */
    max-width: 700px;
    margin: 0;
}

.pyramid-img img {
    width: 100%;
    height: auto;
    display: block;
    /* ドロップシャドウを入れると浮いて見えて綺麗です */
    filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.1));
}

/* --- 下部のテキスト --- */
.philosophy-body p {
    padding: 20px;
    margin-bottom: 2em;
    line-height: 2;
    font-size: 14px;
    text-align: justify;
    z-index: 100;
    position: relative;
}
/* =========================================
   PC版スタイル (min-width: 1024px)
   ========================================= */
@media (min-width: 1024px) {

    .philosophy-container {
        max-width: 100%;
        margin: 0 auto;
    }
    .visu-title{
        font-size: 18px;
    }
    .visu-text{
        width: 70%;
        max-width: 800px;
        text-align: center;
        margin: 0 auto 40px;
    }
    .section-title {
        font-size: min(4vw, 50px);
        letter-spacing: 0.1em;
        font-weight: 300;
        font-family: 'Montserrat', sans-serif;
        line-height: 1.1;
        color: #444;
        display: inline-block;
        transform: scaleY(0.8);
    }
}
/*◆◆◆◆◆ 理念テキスト◆◆◆◆◆ */
/* 共通コンポーネント：インフォメーションリスト */
.c-info-list{
    margin-top: 60px;
    width: 100%;
    padding: 0;
    position: relative;
}

/* 各項目のまとまり */
.c-info-item {
    margin-bottom: 40px;
    position: relative;
    z-index: 1; /* 背景より手前 */
}

/* タイトル部分 */
.c-info-title {
    font-size: 16px;
    color: #444;
    font-weight: 500;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
}
/* タイトルの左の四角 */
.c-info-title::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-color: #c7d6e0;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    /* タイトルの左の四角 */
    .c-info-title::before {
        content: "";
        display: block;
        width: 25px;
        height: 25px;
        background-color: #c7d6e0;
        flex-shrink: 0;
    }
}
/* 本文 */
.c-info-text {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
}
.mid-c-info{
    margin-top: 100px;
    position: relative;
}
/* 背景のグレーボックス（リスト用） */
.c-info-bg {
    position: absolute;
    z-index: 1; /* 画像より後ろ */
    
    /* デザインに合わせてサイズ調整 */
    width: 60%;  /* 画像より細く */
    height: 72%; /* 親要素いっぱいの高さ */
    top: 17%;
    right: 0;
    /* transform: translateX(-50%);  */
    
    background-color: #f4f4f4; /* 薄いグレー */
    /* 必要なら少し透明度を入れる */
    opacity: 0.9;
}

/*◆◆◆◆◆ 画像＋テキスト◆◆◆◆◆ */

.photo-bg{
    position: relative; /* 重なり順の基準 */
    width: 100%;
    margin: 0 auto 20px; /* 中央寄せ & 下余白 */
    
    /* 内部の配置調整 */
    display: block;
    line-height: 2em;
    justify-content: center;
    align-items: center;
    padding: 40px 20px; /* 上下の余白（グレーボックスをはみ出させるため） */

    /* ▼▼▼ 修正箇所：ここに背景画像の設定を追加 ▼▼▼ */
    /* 薄いウェーブなどの背景画像を指定してください */
    background-image: url('../img/index/sp/bg-mobile.jpg');
    background-repeat: no-repeat;
    /* 画像のサイズは、デザインに合わせて調整してください */
    /* 例: cover, contain, または具体的なpxや%指定など */
    background-size: cover;
    /* 画像の位置を調整 */
    background-position: center;
}


/* ① 背面のグレーボックス */
.gray-bg-box {
    position: absolute;
    z-index: -1; /* 画像より後ろ */
    
    /* デザインに合わせてサイズ調整 */
    width: 80%;  /* 画像より細く */
    height: 100%; /* 親要素いっぱいの高さ */
    top: 30%;
    left: -20px;
    /* transform: translateX(-50%);  */
    
    background-color: #f4f4f4; /* 薄いグレー */
    /* 必要なら少し透明度を入れる */
    opacity: 0.9;
}
/* interview背面のグレーボックス */
/* .gray-bg-interviewbox{
    position: absolute;
    z-index: -1;
    width: 70%;
    height: 44%;
    top: -3%;
    left: 31px;
    background-color: #f4f4f4;
    opacity: 0.9;
} */


/* =========================================
   PC版スタイル (min-width: 1024px)
   ========================================= */
@media (min-width: 1024px) {
    .mid-c-info{
        margin-top: 100px;
        position: relative;
        width: 60%;
        max-width: 800px;
        margin: auto;
    }
    .gray-bg-box:nth-child(1) {
        right: 80px;
    }
    .gray-bg-box:nth-child(2) {
        left: -80px;
    }

}








/* =========================================
   SP版 (Mobile First)
   ========================================= */
.c-info-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
}

/* ★ここがポイント！
   SPでは「テキストエリアの枠」を無視させる（皮を剥ぐイメージ）。
   これで h3 と p が、img と同じ階層にいるかのように振る舞います。
*/
.c-info-body {
    display: contents; 
}

/* 並び順を order で指定する */
.c-info-title {
    order: 1; /* タイトルが一番上 */
    margin-bottom: 20px;
}

.c-info-visual {
    order: 2; /* 画像が真ん中 */
    position: relative;
    margin-bottom: 20px;
    /* 必要なサイズ調整など */
}

.c-info-text {
    order: 3; /* 本文が一番下 */
    margin-bottom: 0;
}

/* =========================================
   PC版 (min-width: 1024px)
   ========================================= */
@media (min-width: 1024px) {

    .c-info-item {
        display: flex;
        flex-direction: row;
        align-items: center; /* 画像とテキストを上下中央揃え */
        justify-content: space-between;
        margin-bottom: 100px;
        gap: 150px; /* 画像とテキストの間隔 */
    }
    .others-item{
        align-items: center
        
        ;
        margin-top: 2em;
    }
    /* 偶数番目のアイテムだけ左右反転させる（これがテレコの正体） */
    .c-info-item:nth-child(odd) {
        flex-direction: row-reverse;
    }

    /* --- エリアごとの設定 --- */

    /* 画像エリア (幅50%くらい) */
    .c-info-visual {
        width: 48%;
        order: initial; /* SPのorderをリセット */
        margin-bottom: 0;
    }

    /* テキストエリア (幅45%くらい) */
    .c-info-body {
        display: block; /* SPの contents を解除して箱として復活させる */
        width: 50%;
    }

    /* 中身のorderもリセット */
    .c-info-title,
    .c-info-text {
        order: initial;
    }
    
    .c-info-title {
        margin-bottom: 30px;
        font-size: 21px;
        margin-top: 3em;
        align-items: end;
        line-height: 1.2;
    }
}

/* pictureタグでPC画像とSP画像の切替え */
/* pictureタグが画像のサイズ制限の邪魔をしないようにするおまじない */
.c-info-visual picture {
    display: block;
    width: 100%;
}


/* =========================================
   Mid-Career 重ねレイアウト用スタイル
   ========================================= */

/* --- 1. 共通設定（インナー幅の制限） --- */
.inner-width {
    width: 100%;
    margin: 0 auto;
    /* スマホでは画面端に少し余白を持たせる */
    padding: 0 20px; 
}

/* --- 2. 親セクション（背景画像を設定） --- */
.mid-career-overlap {
    position: relative;
    width: 100%;
    /* 上下の余白（背景が見える範囲） */
    padding: 80px 0 0;
    z-index: 1; /* 背景より手前にコンテンツを表示 */ 
}
/* 3番目以降のエリア */
.mid-career-others {
    padding-bottom: 0;
    position: relative;
}
/* 擬似要素で作る「自由自在な背景」 */
@media (min-width: 1024px) {
    .mid-career-overlap::before {
        content: ""; /* おまじない */
        position: absolute; /* 自由に配置する指定 */
        
        /* ▼▼ 背景のサイズと位置の調整エリア ▼▼ */
        top: 25%;      /* 上から20%の位置に配置（数値をいじると上下します） */
        height: 50%;   /* 高さは全体の60%だけ（数値をいじると太さが変わります） */
        width: 100%;   /* 横幅はいっぱい */
        /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

        left: 0;
        background-image: url('../img/mid-career/bg-pc-01.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        
        z-index: -1; /* コンテンツの下に潜り込ませる */
    }

    .mid-career-others::before {
        content: ""; /* おまじない */
        position: absolute; /* 自由に配置する指定 */
        
        /* ▼▼ 背景のサイズと位置の調整エリア ▼▼ */
        top: 15%;      /* 上から20%の位置に配置（数値をいじると上下します） */
        height: 50%;   /* 高さは全体の60%だけ（数値をいじると太さが変わります） */
        width: 100%;   /* 横幅はいっぱい */
        /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

        left: 0;
        background-image: url('../img/mid-career/bg-pc-02.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        
        z-index: 1; /* コンテンツの下に潜り込ませる */
    }
    .others-pc-bg{
        position: absolute;
        z-index: -1;
        width: 184%;
        height: 63%;
        top: 40%;
        left: -160% !important;
        right: auto;
        /* transform: translateX(-50%); */
        background-color: #f4f4f4;
        opacity: 0.9;

    }


}



/* --- 3. PC版のレイアウト調整 (1024px以上) --- */
@media (min-width: 1024px) {

    /* インナーの最大幅を設定（ここはお好みで！） */
    .inner-width {
        max-width: 1000px; /* 例: 1000px 〜 1200px */
        padding: 0;        /* PCでは左右余白リセット */
    }

    /* ▼▼▼ 重ね合わせの設定 ▼▼▼ */

    /* 1番目のアイテム */
    .mid-career-overlap .c-info-item:nth-child(1) {
        align-items: start;
        position: relative;
        z-index: 2; /* 手前に表示 */
        margin-bottom: 0; /* 下の余白をリセットして、重なり具合を調整 */
    }

    /* 2番目のアイテム（上にガバッと重ねる） */
    .mid-career-overlap .c-info-item:nth-child(2) {
        position: relative;
        z-index: 1; /* 1番目より後ろに */
        
        /* ★重要：マイナスマージンで上に引っ張り上げる */
        /* デザインに合わせて数値をいじってください（-100px 〜 -200pxくらい） */
        margin-top: -100px; 
    }

    /* =========================================
    グレー背景の位置調整 (Zig-zag)
    ========================================= */

    /* ① 奇数番目 (1, 3, 5...) のアイテムの場合 */
    /* 　→ デザイン通り「右」にはみ出させる */
    .c-info-item:nth-child(odd) .gray-bg-box {
        right: -50px; 
        left: auto;  
    }

    /* ② 偶数番目 (2, 4, 6...) のアイテムの場合 */
    /* 　→ デザイン通り「左」にはみ出させる */
    .c-info-item:nth-child(even) .gray-bg-box {
        left: -50px;  /* 左へずらす量（数値は調整してください） */
        right: auto;  /* 右の指定を打ち消す */
    }

}