:root {
    --base-gray: #E6E1EC;/*#efefef;*/
    --container-gray: #ededed;
    --profile-section-gray: #eeeeee;
    --light-shadow: #f6f6f6;
    --dark-shadow: #BBB5D0;/*rgba(200, 195, 187, 0.6);*/
    --text-dark: #7c7781;
    --text-hover: #666;
    --text-light: #fff;
    --accent: #DED2E7;/*#e2dcff;*/
    --accent_trans: rgb(247, 246, 254);
}

body {
    /*font-family: 'M PLUS 1p', 'Parisienne', sans-serif;*/
    font-family:'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
    background-color: var(--base-gray);
    color: var(--text-dark);
    font-size: 12px;
    margin: 0;
    padding: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes scaleUp {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

@keyframes slideBackground {
    0%, 100% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0; /* 画像を100%分横に動かす */
    }
}

.center-wrapper {
    margin: 10px auto;
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    height: 100vh; /* ビューポートの高さに合わせる */
    padding: 0 20px;
    
}


.profile-container {
    overflow: hidden; /* オーバーフローを隠す */
    display: flex; /* 子要素をフレックスボックスとして並べる */
    flex-direction: column; /* 縦に並べる */
    /*transition: border 0.3s;  シャドウのトランジション効果 */
    /*border: 2px solid var(--accent);  この行で内側の線を追加 */
    max-height: 100%;
    z-index: 0;
}





.music-container {
    box-shadow: -4px -4px 8px #F3F0E8, 4px 4px 8px rgba(200, 195, 187, 0.6); /* 影の効果 */
    border-radius: 40px; /* 角を丸く */
    
    background-color: var(--container-gray); /* 背景色 */
    /* max-height: 100%; 最大幅の設定。必要に応じて調整 */
    
    overflow: hidden; /* 追加: overflow hidden */
}

.music-container iframe {
    height: calc(100vh - 40px);
}


.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--container-gray);
    padding: 20px;
    margin: 20px auto;
    /* box-shadow: -4px -4px 8px var(--light-shadow), 4px 4px 8px var(--dark-shadow); */
    border-radius: 15px;
}



.profile-icon {
    margin: 10px auto;
    height: 50vh; /* 画像の最大サイズに合わせる */
    max-height:200px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.profile-icon .profile-image {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 200px;
    max-width: 50vh; /* アイコンの最大サイズ */
    max-height: 50vh; /* アイコンの最大サイズ */
    height: 200px;
}

.profile-icon img {
    border-radius: 30%; /* 画像を円形にする */
    width: 100%; /* コンテナのサイズに合わせて画像を拡大/縮小 */
    max-width: 200px;
    transition: border 1s; /* シャドウのトランジション効果 */
    
   border: 2px solid var(--accent);  /* この行で内側の線を追加 */
    box-shadow: -4px -4px 8px var(--light-shadow), 4px 4px 8px var(--dark-shadow);
}

.profile-icon .profile-image img {
    width: 100%;
    border-radius: 20%; /* 画像を円形にする */
    box-shadow: -4px -4px 8px var(--light-shadow), 4px 4px 8px var(--dark-shadow);
    transition: opacity 0.5s; /* スムーズな切り替え */
    position: absolute; /* ここで追加 */
}

.profile-name {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px; /* 余白を減らす */
    margin-top: 10px;
}

.profile-name img {
    margin-top: 0; /* 余白を減らす */
    height: 15vh; /* コンテナのサイズに合わせて画像を拡大/縮小 */
    max-width: 122px;
    max-height: 25px;/*107px;*/
    align-items: center;
    justify-content: center;
}

.profile-icon .normal-image {
    opacity: 1; /* 通常時は完全に不透明 */
}

.profile-icon .hover-image {
    opacity: 0; /* 通常時は完全に透明 */
    transition: opacity 0.3s ease; /* 透明度変更のアニメーション */
}

.profile-icon:hover .normal-image {
    opacity: 0; /* ホバー時は透明に */
}

.profile-icon:hover .hover-image {
    opacity: 1; /* ホバー時は不透明に */
}



.profile-section {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center;
    padding: 0px 20px;
    gap: 10px; /* 各要素間のギャップ */
    vertical-align: middle;
    justify-content: center;
    
}


.profile-icon, h1 {
    width: 100%; /* 全幅 */
    text-align: center;
}

h1 {
    
    padding-bottom: 10px; /* 下のマージンを追加 */
}


.profile-description {
    width: 100%;
    text-align: center;
   /* background-color: var(--container-gray);*/
   /* border-radius: 30px; /* 角を丸くする */
    padding: 0px; /* 内部の余白 */
    padding-bottom: 10px;
 /*   box-shadow: -4px -4px 8px var(--light-shadow), 4px 4px 8px var(--dark-shadow);
    transition: border 0.3s; /* シャドウのトランジション効果 */
   /* border: 2px solid var(--accent); /* この行で内側の線を追加 */
}

.profile-description:hover {
    border-width: 4px; /* ホバー時の境界線の太さ */
}


.profile-description p {
    line-height: 0.5; /* 行間の高さを調整。値が小さいほど狭くなります。 */
}


.links-section {
    margin: auto auto auto auto; 
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.social-link {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* 各リンク間にスペースを追加 */
}

.social-link a {
    display: flex;
    align-items: center;
    position: relative; /* ツールチップの位置調整用 */
}

.social-link a img {
    height: 30px; /* アイコンのサイズ */
    transition: opacity 0.3s;
    border-radius: 20%;
    box-shadow: -4px -4px 8px var(--light-shadow), 4px 4px 8px var(--dark-shadow);
    margin-right: 20px; /* アイコンと説明テキストの間 */
}

.social-link a:hover img {
    opacity: 0.7; /* ホバー時の透明度 */
}

.links-wrapper {
    display: flex;
    flex-direction: row; /* 横並び */
    justify-content: flex-start; /* 左側から始める */
    align-items: flex-start; /* 上端揃え */
}



/* メディアクエリで大きな画面と小さな画面を区別 */
@media (min-width: 768px) {
    /* 768px以上の画面に適用するスタイル */
    .profile-container {
        flex-direction: row; /* 大きい画面では横並び */
        justify-content: center; /* 横方向の中央揃え */
        align-items: center;
    }
    .links-section {
        margin: 20px 20px; 
    }
    
  }
  
@media (max-width: 767px) {
    .center-wrapper {
        padding: 5px; /* 低い画面高さでは余白を小さくする */
    }

    .profile-container {
        max-height: 100%; /* コンテナの最大高さをビューポートの高さに合わせる */
    }


    .links-wrapper {
        flex-direction: column; /* 縦並び */
    }

    .links-section {
        align-items: flex-start;
        width: 100%; /* 縦並びにするために幅を100%に設定 */
        padding: 0 10px;
    }
}