/* 全体の基本スタイル */
html, body {
    height: 100%; /* ページ全体の高さを確保 */
    margin: 0; /* 余白をなくす */
    font-family: 'Noto Sans JP', sans-serif; /* 日本語フォント */
    text-align: center; /* テキストを中央揃え */
    background-image: url('/picture/star_body.jpg'); /* 水色系のグラデーション背景 */
    color: #333; /* 文字の基本色 */
}

/* フレックスボックスでコンテンツを画面いっぱいに広げる */
body {
    display: flex;
    flex-direction: column; /* 縦並び */
}


/* メインコンテンツ（中央揃え） */
main {
    flex: 1; /* 残りの空間をすべて埋める */
    display: flex;
    flex-direction: column; /* 縦並び */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 20px; /* 上下左右の余白 */
}

main a {
    color: #333;
    text-decoration: none;
}

.icon {
    width: 500px; /* 幅100px */
    height: 500px; /* 高さ100px */
    object-fit: cover; /* 画像を適切にトリミング */
    margin-top: 100px; 
    justify-content: center; /* 水平方向の中央揃え */
    
}

/* プロフィールカードのデザイン */
.place {
    background: white; /* 背景色を白に */
    padding: 40px; /* 内側の余白 */
    width: 80%; /* 横幅を80%に */
    max-width: 400px; /* 最大幅を400pxに */
    border-radius: 50px; /* 角を丸く */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 影をつけて立体感を出す */
    text-align: center; /* テキストを左揃え */
    margin-bottom: 50px; 
}


/* セクションタイトル */
h2 {
    color: #8baee9; 
    font-size: 20px; /* 文字サイズ */
    margin-top: 15px; /* 上の余白 */
}

/* フッター（ページ最下部に固定） */
footer {
    background: rgba(0, 0, 0, 0.4); /* 半透明の黒背景 */
    color: white; /* 文字色を白に */
    padding: 10px; /* 内側の余白 */
    text-align: center; /* 中央揃え */
}