/* 1. 全画面表示のためのリセットと設定 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* スクロールバー非表示 (フルスクリーン) */
    overflow: hidden; 
}

/* 2. 親コンテナ: 画面全体を占め、中央配置のためのflexbox設定 */
.top-page-fullscreen-container {
    position: relative; 
    width: 100vw;       
    height: 100vh;      
    background-color: #f7f3ed; /* 余白の色 */
    
    /* 内側の要素 (画像) を中央に配置するための設定 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. 画像とリンクの基準となる内側コンテナ（ズレ防止の核となる部分） */
.image-area {
    position: relative;
    /* 画像のアスペクト比 (1000px:755px ≈ 1.325:1) を維持するための設定 */
    /* width: 100%; は初期設定として、比率維持のために最大値を設定します */
    max-width: 100vw;
    max-height: 100vh;
    
    /* 1.325:1 の比率を維持するためのハック */
    /* 高さ755を基準にした場合: 755 / 1000 = 0.755 (75.5%) */
    /* 幅が画面に収まるように max-width を設定 */
    
    width: min(100vw, calc(100vh / 0.755));
    height: min(100vh, calc(100vw * 0.755));

    /* 背景画像の設定 */
    background-image: url('/images/mokurentop.PNG');
    background-size: contain; /* 画像全体を表示 */
    background-repeat: no-repeat;
    background-position: center center; 
}

/* 4. すべての透明なリンクの基本設定 */
.menu-link {
    position: absolute; /* 親要素 .image-area を基準に絶対配置 */
    background-color: transparent; /* 通常時は透明 */
    z-index: 10; 
    cursor: pointer; /* 通常時は指マーク */
    transition: background-color 0.2s ease-in-out;
}

/* 5. ホバーエフェクト (修正後) */
/* ***** ここを修正: セレクタからスペースを削除 ***** */
.menu-link:hover { 
    background-color: rgba(255, 100, 100, 0.8); 
    /* ***** ここを修正: ホバー時に画像カーソルを適用 ***** */
    /* cursor: url('/images/worker.PNG'), auto;  */
}

/* 6. 各リンクの位置とサイズ設定 (パーセンテージは維持) */
/* 基準が .image-area になったため、ブラウザサイズ変更時のズレは解消されます。 */

/* 会社概要 / company profile */
.profile-link {
    top: 35%; 
    right: 35%; 
    width: 20%; 
    height: 9%; 
}

/* もくれん製作所の家 / about us */
.about-link {
    top: 43%;
    right: 7%;
    width: 16%;
    height: 10%;
}

/* 施工例 / works */
.works-link {
    top: 51%;
    right: 37%;
    width: 13%;
    height: 9%;
}

/* BLOG */
.blog-link {
    top: 60%;
    right: 14%;
    width: 11%;
    height: 10%;
}

/* お問い合わせ */
.contact-link {
    top: 68%;
    right: 38%;
    width: 11%;
    height: 9%;
}

/* お客様の声 */
.voice-link {
    top: 77%;
    right: 13%;
    width: 9%;
    height: 9%;
}