/*
 * 基本的なリセット (プロジェクト開始時に設定済みと仮定)
 * * { box-sizing: border-box; } など
 */

/* === サイト全体構造 === */

/* サイト全体を左右に分割するコンテナ */
.container {
    display: flex;
    height: 100vh; /* ビューポートの高さ全体を使用 */
}

/* 左側のスクロールエリア */
.left-content-wrapper {
    width: 300px;
    height: 100vh;
    overflow-y: scroll; 
    flex-shrink: 0;
    /* スクロールバーを非表示にする設定 */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.left-content-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* 右側の固定エリア */
.main-visual-fixed {
    flex-grow: 1; 
    position: relative; 
    overflow: hidden;
    height: 100vh;
}

/* === 全体スタイルと共通設定 === */

/* 🌷 全体のフォントと色の設定 */
body {
    font-family: 'Noto Sans JP', sans-serif; 
    color: #333; 
}

.content-section {
    width: 100%;
}

/* TOPセクションの背景色とレイアウト */
.top-section {
    background-color: #fcfbf9; /* 極めて薄いベージュ */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0; /* ヘッダーの配置調整のためセクション自体のパディングをリセット */
}

/* ABOUT, WORKSセクションの背景色とパディング */
.about-section, .works-section {
    background-color: #f8f7f5; /* 少し濃いベージュ */
    padding: 40px; 
}


/* === 🌷 page-header: ヘッダー要素のスタイル (可愛く修正) === */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    /* .top-sectionのパディングをここで再現 */
    padding: 40px 40px 50px 40px; 
    width: 100%;
}


/* === 🌷 main-nav: メインナビゲーション (可愛く修正) === */
.main-nav { 
    margin-top: 0; 
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px; 
    font-size: 14px;
    font-weight: 400;
}

.main-nav li {
    position: relative;
}

/* 🌷 区切り文字「・」を追加 */
.main-nav li:not(:last-child)::after {
    content: '・';
    color: #b7b4a9;
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
}

/* 🌷 ナビゲーションリンク */
.main-nav a {
    text-decoration: none;
    color: #5d5d5d;
    display: block;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
}

/* 🌷 ホバーエフェクト: アンダーラインと色変更 */
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: #ffb6c1; /* 薄いピンク色 */
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
}

.main-nav a:hover {
    color: #ff69b4; /* ホットピンクに色を変える */
}

.main-nav a:hover::after {
    width: 100%; /* アンダーラインを100%に広げる */
}

/* === 🌷 contact-icon: コンタクトアイコン (可愛く修正) === */
.contact-icon { 
    position: static; 
} 

.contact-icon a {
    /* ✉️ を可愛いアイコン風に */
    display: block;
    font-size: 20px;
    color: #ff69b4; 
    padding: 5px;
    border: 1px solid #ffb6c1; 
    border-radius: 50%; 
    width: 40px;
    height: 40px;
    line-height: 28px; 
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(255, 105, 180, 0.1);
}

.contact-icon a:hover {
    background-color: #ffb6c1;
    color: white;
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.2);
}


/* === TOPセクション - コンテンツのスタイル === */

.artist-signature {
    margin-top: 0;
    margin-bottom: 80px;
    padding-top: 40px;
    padding-left: 40px; 
}

.intro-text {
    margin-top: auto; /* 一番下に寄せる */
    padding-bottom: 40px; 
    padding-left: 40px; 
    
    font-size: 14px;
    line-height: 2.2;
    writing-mode: vertical-rl; 
    text-align: right;
    letter-spacing: 0.1em;
    font-family: serif; /* 縦書きはセリフ体でレトロな雰囲気に */
}


/* === 🌷 ABOUTセクション - レイアウトとスタイル (画像追加部分) === */

/* セクション全体のタイトル (WORKSセクションと共通) */
.section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #ff69b4; 
    border-left: 5px solid #ffb6c1; 
    padding-left: 15px;
    line-height: 1.2;
}

/* 画像とテキストを横並びにするFlexコンテナ */
.about-content-flex {
    display: flex;
    gap: 40px; 
    align-items: flex-start; 
    padding-top: 40px; 
}

/* 1. プロフィール画像エリア */
/* 1. プロフィール画像エリア (背景画像化) */
.about-image-area {
    flex-basis: 40%; 
    flex-shrink: 0;
    
    /* 💥 修正点1: 適切な高さを設定する */
    /* テキストエリアの高さに応じて変動させるのは複雑なため、
       ここではシンプルに固定値で高さを確保します。 */
    height: 300px; /* ここを任意の高さ（例: 300px）に設定してください */
    
    /* 🌷 背景画像の設定 (変更なし) */
    /* 【重要】 '' をご自身の画像ファイル名に修正が必要です */
    background-image: url('./image.png'); 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
    
    /* 🌷 可愛くするための装飾 (変更なし) */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.15);
    border: 3px solid #fcfbf9; 
    
    /* 💥 修正点2: padding-bottomによるアスペクト比調整は削除 */
    padding-bottom: 0; /* height: 300px を設定したのでこれは不要 */
    height: 300px; /* height を 300px に設定（修正箇所） */
}


/* 2. テキスト・詳細情報エリア */
.about-text-area {
    flex-basis: 60%; 
}

.about-intro-text {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 40px;
    color: #5d5d5d;
}

/* 詳細リスト (名前, スキルなど) */
.profile-details {
    display: grid;
    grid-template-columns: 80px 1fr; 
    gap: 10px 20px;
}

.profile-details dt {
    font-weight: 700;
    color: #ff69b4; 
    position: relative;
    padding-left: 15px;
}

.profile-details dt::before {
    content: '▶︎'; 
    font-size: 8px;
    position: absolute;
    left: 0;
    top: 5px;
    color: #ffb6c1;
}

.profile-details dd {
   /* 例: ナビゲーションメニューのクラスが 'side-nav' だと仮定 */
.side-nav {
    /* 外側の余白をゼロにする */
    margin-left: 0;
    margin-right: 0;
    /* 内側の余白をゼロにする（必要に応じて） */
    padding-left: 0;
    
    /* 要素が横幅いっぱいになるように設定 */
    width: 100%;
    /* または */
    box-sizing: border-box; 
}
    font-weight: 400;
    color: 
}

/* 🔽 WORKSセクションの画像サイズを小さくするスタイルを追加 🔽 */
.works-image-placeholder {
    /* 画像を中央に配置し、上下に余白を設定 */
    text-align: center;
    padding: 40px 0;
}

.works-image-placeholder img {
    /* 画像の最大幅を小さく設定（例: 250px） */
    max-width: 250px; 
    /* 親要素の幅を超えないようにする */
    width: 100%; 
    /* 高さは自動調整 */
    height: auto; 
    /* 🌷 可愛く装飾 */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* 🔼 WORKSセクションの画像サイズを小さくするスタイルを追加 🔼 */

/* === その他のセクションスタイル (右側イラストなど) === */

.illustration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out; 
}

.illustration.active-illustration {
    opacity: 1;
}

.illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ... (section-transition-nav, artist-signature h1/p のスタイルは前回CSSから継承) ... */
.works-image-placeholder img {
    /* 画像の最大幅を小さく設定（例: 250px） */
    height: auto;
}