/* ======== タワレコ風 プロフィールセクション (グラデーションなし) ======== */
.profile-section {
    /* 背景のグラデーションを削除し、シンプルな白っぽい単色に */
    background: #FFFDE7; /* わずかに黄色がかった白 */
    padding: 60px 20px;
    text-align: center;
    /* ボーダーをタワレコカラーの赤と黄色に変更 */
    border-top: 8px solid var(--tawareco-red); /* 赤 */
    border-bottom: 8px solid var(--tawareco-yellow); /* 黄色/金 */
    position: relative;
    overflow: hidden;
}


.profile-title {
    font-size: 4em;
    font-family: 'Luckiest Guy', 'Arial Black', 'Impact', sans-serif;
    font-weight: 900;
    color: var(--tawareco-red); /* 赤 */
    letter-spacing: 4px; /* より強調 */
    text-transform: uppercase;
    /* タワレコ風のツートンカラーの影 */
    text-shadow: 
        4px 4px 0px var(--tawareco-yellow), /* 黄色/金 */
        8px 8px 0px var(--tawareco-black); /* 黒 */
    padding-bottom: 10px;
    margin-top: 40px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
    letter-spacing: 0.15em;
}

.profile-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px; /* ギャップを少し狭く */
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 1000px;
    padding: 0 20px;
    box-sizing: border-box;
}

.profile-card {
    font-family: 'Arial Black', 'Impact', sans-serif;
    /* 背景グラデーションを削除し、シンプルな白の単色に */
    background: var(--tawareco-white);
    /* 太いアウトライン（黒）を維持 */
    border: 5px solid var(--tawareco-black);
    border-radius: 8px;
    padding: 30px 20px;
    height: 80vh;
    width: calc(50% - 20px); /* ギャップに合わせて調整 */
    box-sizing: border-box;
    /* タワレコ風のツートンカラーの影を強調 */
    box-shadow: 
        8px 8px 0px var(--tawareco-yellow), /* 黄色/金 */
        12px 12px 0px var(--tawareco-red), /* 赤 */
        0 12px 32px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-out; /* アニメーションをシンプルに */
    position: relative;
    overflow: hidden;
}

/* 糸の縫い目を表現 */
.profile-card {
    position: relative;
}

.profile-card::before {
    content: '';
    position: absolute;
    top: 10px; /* 枠線から少し内側 */
    left: 10px; /* 枠線から少し内側 */
    right: 10px; /* 枠線から少し内側 */
    bottom: 10px; /* 枠線から少し内側 */
    border: 2px dashed #666; /* ダッシュのボーダーで縫い目を表現 */
    pointer-events: none; /* クリックイベントをブロックしないように */
    z-index: 2; /* コンテンツの上に表示 */
}

.profile-card:hover {
    /* シンプルなホバーエフェクト */
    transform: translate(-4px, -4px); 
    box-shadow: 
        8px 8px 0px var(--tawareco-yellow),
        12px 12px 0px var(--tawareco-red),
        0 16px 40px rgba(0, 0, 0, 0.2);
}

.profile-img {
    width: 250px; /* サイズを調整 */
    height: 250px;
    object-fit: cover;
    border-radius: 4px;
    border: 4px solid var(--tawareco-black);
    margin-bottom: 15px;
    /* 黄色いシンプルな影 */
    box-shadow: 4px 4px 0px var(--tawareco-yellow);
    border-radius: 50%;
}

.profile-name {
    font-family: "Oooh Baby", cursive;
    font-size: 3.6em; /* 少し大きく */
    font-weight: 900; /* さらに太く（可能な限り） */
    color: var(--tawareco-red); /* 赤 */
    margin-bottom: 10px;
    letter-spacing: 1.5px;

    /* 疑似的に太く見せる効果 */
    -webkit-text-stroke: 1px var(--tawareco-red); /* 外枠を同色で太らせる */
    text-shadow:
        0.8px 0.8px 0 var(--tawareco-red),
        -0.8px 0.8px 0 var(--tawareco-red),
        0.8px -0.8px 0 var(--tawareco-red),
        -0.8px -0.8px 0 var(--tawareco-red); /* 影を重ねて太字風に */
}

.profile-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
}

@media (max-width: 600px) {
    .profile-section {
        padding: 40px 15px;
        /* width: 93%; は不要 */
    }

    .profile-title {
        font-size: 3rem;
        margin: 15px 15px 30px 15px;
    }

    .profile-container {
        gap: 20px;
    }

    .profile-card {
        width: 100%;
        min-height: auto;
        padding: 20px 15px;
        margin: 0 auto;
    }

    .profile-img {
        width: 180px;
        height: 180px;
        border-width: 3px;
        margin-bottom: 12px;
    }

    .profile-name {
        font-size: 3rem;
    }
    
    .profile-text {
        font-size: 0.95rem;
    }
}