@charset "utf-8";

/* ◆◆◆◆◆◆◆◆◆◆◆◆
   コンテンツページ/ ヒーロファーストビュー共通　
   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: 768px)
   ========================================= */
@media (min-width: 768px) {

    /* --- 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;
        min-width: 250px;
    }

    /* --- 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 0;
    position: relative;
    /* ▼▼▼ 修正箇所：ここにあった背景画像の設定を削除 ▼▼▼ */
    background-color: #fff; /* 背景を白に設定 */
}

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

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

.section-title {
    text-align: left;
}

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

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

    /* ▼▼▼ 修正箇所：ここに背景画像の設定を追加 ▼▼▼ */
    /* 薄いウェーブなどの背景画像を指定してください */
    background-image: url('../img/index/sp/bg-mobile.jpg');
    background-repeat: no-repeat;
    /* 画像のサイズは、デザインに合わせて調整してください */
    /* 例: cover, contain, または具体的なpxや%指定など */
    background-size: cover;
    /* 画像の位置を調整 */
    background-position: center;
}
.philosophy-body{
    width: 100%;
    max-width: 850px;
    margin: 80px auto;
}
/* ① 背面のグレーボックス */
.gray-bg-box {
    position: absolute;
    z-index: 1; /* 画像より後ろ */
    
    /* デザインに合わせてサイズ調整 */
    width: 60%;  /* 画像より細く */
    height: 127%; /* 親要素いっぱいの高さ */
    top: 20%;
    left: 7%;
    /* transform: translateX(-50%);  */
    
    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: 1;
    position: relative;
}

/*◆◆◆◆◆ 理念テキスト◆◆◆◆◆ */
/* 共通コンポーネント：インフォメーションリスト */
.c-info-list{
    margin: 80px auto 0;
    width: 100%;
    max-width: 850px;
    padding: 20px;
    position: relative;
}

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

/* タイトル部分 */
.c-info-title {
    font-size: 21px;
    color: #444;
    font-weight: 500;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Yu Mincho", "YuMincho", serif;
}
/* タイトルの左の四角 */
/* .c-info-title::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-color: #dceef6;
    flex-shrink: 0;
} */

/* 本文 */
.c-info-text {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
}

@media (min-width: 768px) {
        .c-info-list{
        margin: 80px auto;
        width: 80%;
        max-width: 850px;
        padding: 20px;
        position: relative;
    }
    .philosophy-body{
        width: 80%;
        max-width: 850px;
        margin: 80px auto;
    }
}

/* =========================================
   PC版スタイル (min-width: 768px)
   ========================================= */
@media (min-width: 768px) {
    /* ① 背面のグレーボックス */
    .gray-bg-box {
        position: absolute;
        z-index: 1; /* 画像より後ろ */
        width: 18%;
        height: 151%;
        top: 4%;
        left: 22%;
        background-color: #f4f4f4; /* 薄いグレー */
        /* 必要なら少し透明度を入れる */
        opacity: 0.9;
    }
}


/* =========================================
   Company Profile セクション
   ========================================= */

/* --- セクション全体（背景設定） --- */
.company-profile-section {
    width: 100%;
    /* 背景画像の指定 */
    background-image: url('../img/index/sp/bg-mobile.jpg'); 
    background-repeat: no-repeat;
    background-size: cover;   /* 画面いっぱいに広げる */
    background-position: center;
    margin-bottom: 220px;
    padding: 60px 0; /* 上下の余白 */
    position: relative;
}

/* ヘッダーの微調整（このセクション特有の調整が必要な場合） */
.company-profile-section .philosophy-header {
    margin-bottom: 40px;
    text-align: left; /* SPでは左寄せのデザインに見えます */
}
/* もしヘッダーも中央寄せなら text-align: center; にしてください */


/* --- 白い情報のボックス --- */
.company-info-box {
    width: 78%;
    box-sizing: border-box;
    margin: auto;
}
.inner-width{
    z-index: 100;
    position: relative;
}
/* --- 定義リスト (dl, dt, dd) --- */
.company-list {
    width: 100%;
    margin: 0;
}

/* 各行のレイアウト */
.list-row {
    display: flex;       /* 横並びにする */
    flex-wrap: wrap;     /* 画面が狭すぎる場合は折り返す */

    padding: 10px 0;     /* 行ごとの余白 */
}

.list-row:first-child {
    padding-top: 0;      /* 最初の行の上余白なし */
}
.list-row:last-child {
    border-bottom: none; /* 最後の線の削除 */
    padding-bottom: 0;
}

/* 見出し (左側) */
.list-row dt {
    width: 30%;       /* 幅30% */
    font-weight: normal;
    font-size: 14px;
    margin: 0;
    /* SPで文字数が多いと窮屈な場合があるので調整 */
    min-width: 80px;  
}

/* 内容 (右側) */
.list-row dd {
    width: 70%;       /* 幅70% */
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}


/* =========================================
   PC版レイアウト (768px以上)
   ========================================= */
@media (min-width: 768px) {

    .company-profile-section {
        width: 72%;
        padding: 100px 0;
        justify-items: flex-end;
        /* PC用背景画像があればここで上書き変更してください */
        /* background-image: url('../img/index/pc/bg-pc.jpg'); */
    }
    .inner-width{
        width: 65%;
    }
    /* ボックスの幅と配置 */
    .company-info-box {
        max-width: 800px; /* ボックスの最大幅制限 */
        margin: 0 auto;   /* 中央寄せ */
        padding: 60px 0; /* 内側の余白をたっぷり取る */
    }

    /* ヘッダーの中央寄せ */
    .company-profile-section .philosophy-header {
        text-align: center;
        margin-bottom: 60px;
    }

    /* リストの文字サイズ調整 */
    .list-row dt {
        font-size: 16px;
        width: 40%; /* PCなら左側は少し狭くてもOK */
        font-weight: normal;
    }
    .list-row dd {
        font-size: 16px;
        width: 60%;
    }
}

    .person-profile {
        margin: 0 auto 100px;
    }
@media (min-width: 1024px) {
    .person-profile {
        margin: 0 auto 15%;
    }
}