/* 基本的なリセットとフォント設定 */
body {
    font-family: 'Arial', sans-serif; /*フォントをArialに設定*/
    /*ブラウザ標準の余白をリセットし、全画面表示の基本とする*/
    margin: 0;
    padding: 0;
    /* bodyの背景色は不要（p5.jsが背景になるため） */
    color: #333; /*テキストの基本色を濃いグレー（#333）に設定*/
    text-align: center; /*コンテンツ内の要素を中央揃えにする*/
}

/* p5.jsキャンバスを背景として配置 */
#p5-background {
    position: fixed; /* 画面の特定の位置に固定し、スクロールしても動かなくする */
    /*画面の左上を基点とする*/
    top: 0;
    left: 0;
    z-index: -1; /* コンテンツの下に配置 */
    /* マウス操作を無効化（コンテンツ操作を優先） */
    pointer-events: none; 
}

/* コンテンツ全体をラップし、p5.jsの上に表示させる */
.content-wrapper {
    position: relative; /*z-indexを有効にするために設定*/
    z-index: 1; /* p5.jsより手前に配置 */
    min-height: 100vh; /* 画面の高さ全体をカバー */
}

/* ヘッダーのスタイル */
.page-header {
    background-color: #f7a070; /* 画像のヘッダーの色に合わせて調整 */
    color: #fff;
    padding: 20px 0; /*上下に20pxのパディング（余白）を設定*/
    margin-bottom: 40px; /*下部に40pxの大きなマージン（外側の余白）を設定*/
}

.page-header h1 {
    margin: 0; /*余白なし*/
    font-size: 24px; /*フォントサイズを24pxに設定*/
}

/* メインコンテンツのコンテナ */
.container {
    max-width: 1000px; /*メインコンテンツの最大幅を1000pxに制限*/
    margin: 0 auto; /*画面の中央に配置*/
    padding: 0 20px;
}

/* 所属と自己紹介のセクション（2カラムレイアウト） */
.info-section {
    display: flex; /*Flexboxを有効にし、子要素（.box）を横並びにする*/
    justify-content: space-between; /*ボックス間にスペースを空け、コンテナ幅いっぱいに広げる*/
    gap: 30px; /* ボックス間の隙間 */
    margin-bottom: 50px; /*ボックス下部の隙間*/
}

.box {
    border: 2px solid #333; /* ボックスの枠線 */
    padding: 20px; 
    flex: 1; /* 均等な幅に設定 */
}

/* 半透明の背景 */
/* p5.jsが背景になったため、この半透明の背景が3Dモデルの上に重なる */
.translucent-bg {
    background-color: rgba(255, 255, 255, 0.7); /* 白背景で透明度70% */
}

.box h2 {
    margin-top: 0; /*ボックス上部の隙間*/
    color: #555;
}

/* セパレーター（--- 制作物 ---）のスタイル */
.separator-line {
    margin: 50px 0;
    padding-top: 20px;
    color: #000;
    font-size: 30px;
}

/* 制作物ボタンのセクション（2カラムレイアウト） */
.button-section {
    display: flex; /*ボタンを横並びにして、セクションの中央に配置*/
    justify-content: center; /* 中央に配置 */
    gap: 50px; /* ボタン間の隙間 */
    padding-bottom: 50px; /* ページ下部に余白を追加 */
}

.work-button {
    text-decoration: none; /* リンクの下線を削除 */
    color: inherit; /* テキストの色を親要素から継承 */
    border: 2px solid #333;
    width: 250px; /* ボタンの幅を固定 */
    padding: 20px;
    display: block; /* aタグをブロック要素にする */
    background-color: #fff; /* ボタンの背景色 */
    transition: background-color 0.3s; /* ホバー時のアニメーション */
    /* 背景色、影、サイズの変更が0.3秒かけて滑らかに変化するように設定 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

/* マウスオーバー時のスタイル変更 */
.work-button:hover {
    background-color: #ffe0b2; /* 例: 少し薄いオレンジ色に変化 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*ボタンに影がつき、浮き上がっているような立体感を出す*/
    transform: scale(1.05); /*1.05倍にわずかに拡大*/
}

.work-button h3 {
    margin: 0 0 10px 0;
    color: #f7a070; /* ボタンのタイトルの色 */
}

.work-button p {
    font-size: 14px;
    color: #666; /*テキストの色*/
}