/* 全体のリセット: 余計な余白を消します */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ヘッダー全体の設定 */
.site-header {
    /* 【重要1】画面の上部に固定する設定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* 横幅いっぱいに広げる */
    
    /* 背景色（デザインに合わせて白を設定） */
    background-color: white; 
    
    /* 影をつけて、下にコンテンツがあることを表現 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    
    /* 要素を左右に配置するための設定 */
    display: flex;
    justify-content: space-between; /* 要素を左右の端に配置 */
    align-items: center; /* 要素を垂直方向（上下）の中央に揃える */
    
    padding: 10px 30px; /* 上下の余白10px、左右の余白30px */
    z-index: 1000; /* 他のコンテンツの上に表示されるようにする */
}


/* ロゴの装飾 */
.header-logo {
    font-size: 1.5rem; /* サイズ調整 */
    color: #333; /* 文字色 */
}

/* ナビゲーション（アイコンとボタン）の配置 */
.header-nav {
    display: flex;
    align-items: center;
    gap: 15px; /* 要素間の隙間を15pxにする */
}

/* 犬のアイコンのサイズ調整 */
.nav-icon {
    font-size: 1.5rem; 
}

/* 連絡するボタンの装飾 */
.contact-button {
    /* Figmaのデザインに合わせてピンクの背景色と角丸 */
    background-color: #FEEBF2; 
    color: #333; 
    border: none; /* 枠線を消す */
    border-radius: 20px; /* 角を丸くする */
    padding: 8px 20px; 
    cursor: pointer; /* マウスを乗せたときにポインターにする */
    font-weight: bold;
}

/* 【重要】固定ヘッダーの下にコンテンツを配置するための調整 */
body {
    padding-top: 60px; /* ヘッダーの高さ（約50px）より少し大きめに設定 */
}


/* ヒーローセクション全体のスタイル */
.hero-section {
    /* 背景画像の設定 */
    background-image: url('HPtop.webp'); /* !!! 画像のパスを修正してください !!! */
    background-size: cover; /* 領域に合わせて画像を拡大・縮小 */
    background-position: center; /* 画像を中央に配置 */
    
    /* セクションの高さを設定 */
    height: 70vh; /* 画面の高さの70%を使う (vh = viewport height) */
    
    /* テキストを中央に配置するための設定 */
    display: flex;
    justify-content: center; /* 水平方向（左右）の中央 */
    align-items: center; /* 垂直方向（上下）の中央 */
}

/* テキストコンテナの装飾 */
.hero-text-container {
    text-align: center;
}

/* テキストのスタイル（デザインに合わせて白、ドット調のフォントなど） */
.hero-greeting, .hero-page-name {
    color: white; /* 白文字に */
    /* * 💡 フォントがドット調の場合は、デザインに指定されているWebフォントを読み込む必要があります。
     * ここでは一般的なスタイルのみを記述します。
     */
    font-family: monospace; /* ドット調に近いフォントの例 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 影をつけて読みやすくする */
}

.hero-greeting {
    font-size: 2.5rem;
    margin-bottom: 5px; /* 下の行との隙間 */
}

.hero-page-name {
    font-size: 3.5rem;
    font-weight: bold;
}