/* 基本設定：温かみのある色合いと読みやすいフォント */
:root {
    --bg-color: #fdfaf6; /* 温かみのあるオフホワイト */
    --text-color: #5c4e40; /* 柔らかいこげ茶色（黒よりも目に優しい） */
    --accent-color: #e68a73; /* 優しいテラコッタ色 */
    --card-bg: #ffffff;
    --border-radius: 12px;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    line-height: 1.8;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー・プロフィール */
/* --- ここから：ヘッダー・写真・プロフィールの新しいレイアウト --- */

/* コンテナの幅を少し広くして、写真とカードが並びやすく */
.container {
    max-width: 900px; /* 前回の800pxから変更 */
    margin: 0 auto;
    padding: 0 20px;
}

.hero {
    background-color: #f5eedf; /* 少し濃いベージュで温かみを強調 */
    padding: 60px 0; /* 下側の余白を少し広く */
    border-bottom: 4px solid var(--accent-color);
}

h1 {
    margin: 0;
    text-align: center; /* タイトルは中央に */
    font-size: 2.8em;
    color: #cc6a52;
    letter-spacing: 0.05em;
}

.subtitle {
    font-size: 1.1em;
    text-align: center; /* サブタイトルも中央に */
    color: #8c7b6c;
    margin-bottom: 50px; /* 写真/カードとの隙間を広げる */
}

/* 写真とプロフィールを並べるラッパー (PC用) */
.hero-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 上揃えで並べる */
    gap: 40px; /* 写真とカードの隙間 */
}

/* 写真エリア */
.hero-image-wrapper {
    flex: 1; /* 比率1 */
    max-width: 40%; /* 写真エリア全体が大きくなりすぎないように制限 */
    
    display: flex;
    flex-direction: column; /* 縦方向（上から下）に並べる */
    justify-content: flex-start; /* 上詰めで配置する */
    align-items: center; /* 横方向は中央揃え */
    gap: 20px; /* 写真と写真の間の隙間（お好みで広げたり狭めたりできます） */
}

/* 個別の写真の設定（既存のままですが確認用です） */
.hero-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

/* プロフィールカードエリア（既存のカードを2カラム用に調整） */
.profile-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    flex: 1.5; /* 比率1.5、写真よりも少し広く */
    margin: 0; /* margin: 0 auto; から変更 */
    max-width: none; /* max-width: 650px; から変更 */
    text-align: left;
    font-size: 1.05em;
}

/* スマホ用レイアウト (画面幅が768px以下のとき) */
@media (max-width: 768px) {
    .hero {
        padding: 40px 0;
    }
    
    .subtitle {
        margin-bottom: 30px;
    }

    /* 縦並びにする */
    .hero-content-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    /* 写真エリアを全幅にする */
    .hero-image-wrapper {
        max-width: 100%;
        margin-bottom: 0;
    }
    
    /* 自己紹介カードを全幅にする */
    .profile-card {
        width: 100%;
        max-width: 100%;
    }
}

/* メインコンテンツ：活動記録 */
.activity-section {
    padding: 60px 0;
}

h2 {
    text-align: center;
    color: var(--accent-color);
    border-bottom: 2px dashed #e0d4c8;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 1.8em;
}

.section-desc {
    text-align: center;
    margin-bottom: 40px;
    color: #8c7b6c;
}

.activity-item {
    background: var(--card-bg);
    padding: 25px;
    margin-bottom: 20px;
    border-radius: var(--border-radius);
    border-left: 6px solid var(--accent-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
}

.activity-item:hover {
    transform: translateY(-3px); /* マウスを乗せると少しふわっと浮くアニメーション */
}

.activity-date {
    font-size: 0.9em;
    color: #a89f91;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.activity-title {
    margin: 0 0 10px 0;
    font-size: 1.25em;
    color: #5c4e40;
}

.activity-desc {
    margin: 0;
    font-size: 1em;
}

/* フッター・連絡先 */
.contact-section {
    background-color: #ece4d4;
    padding: 50px 0 40px;
    text-align: center;
}

.contact-btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: white;
    padding: 15px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    margin: 25px 0;
    transition: background-color 0.3s ease;
    box-shadow: 0 3px 10px rgba(230, 138, 115, 0.3);
}

.contact-btn:hover {
    background-color: #cc6a52;
}

.copyright {
    font-size: 0.85em;
    color: #8c7b6c;
    margin-top: 30px;
}

/* --- ここから：コピーボタン用の追加スタイル --- */

/* アドレスとボタンを横に並べる */
.contact-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* ボタンとアドレスの隙間 */
    margin: 25px 0 10px;
}

/* 既存の contact-btn の margin を上書き（wrapperで管理するため） */
.contact-wrapper .contact-btn {
    margin: 0; 
}

/* コピーボタンのデザイン */
.copy-btn {
    background-color: #ffffff;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    padding: 13px 20px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* マウスを乗せた時 */
.copy-btn:hover {
    background-color: #fcf6f5;
    transform: translateY(-2px);
}

/* コピー完了メッセージ */
.copy-message {
    color: var(--accent-color);
    font-size: 0.9em;
    font-weight: bold;
    height: 20px; /* メッセージが出ても画面がガタガタしないように固定 */
    margin: 0 0 20px 0;
}

/* --- プロフィールカード内の「自己紹介」タイトルの調整 --- */
.profile-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em; /* 圧迫感が出ないように少しだけ小さめに設定 */
}

/* --- 興味のあることリストのデザイン --- */

/* 小見出し（興味のあること） */
.interests-title {
    color: var(--text-color);
    font-size: 1.15em;
    margin: 30px 0 10px;
    padding-left: 10px;
    border-left: 4px solid var(--accent-color); /* 左側にアクセントカラーの線 */
}

/* リスト全体 */
.interests-list {
    margin: 0;
    padding-left: 25px; /* リストの左側の余白 */
    color: var(--text-color);
}

/* リストの各項目 */
.interests-list li {
    margin-bottom: 10px; /* 項目同士の隙間を少しあけて読みやすく */
    line-height: 1.6;
}

/* 太字部分（項目のタイトル）の色を少し柔らかく */
.interests-list strong {
    color: #cc6a52; /* 少し濃いテラコッタ色 */
    font-weight: 600;
}