/* modern_style.css */
body {
   font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
   margin: 0;
   padding: 40px;
   background: #181818; /* ダークな背景色 */
   color: #f8f8f2; /* 明るい文字色 */
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   box-sizing: border-box;
}

.container {
   background: #282a36; /* より濃いコンテナ背景色 */
   padding: 50px;
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   text-align: center;
   max-width: 500px;
   width: 100%;
}

.name {
   font-size: 2.5em;
   font-weight: bold;
   margin: 0 0 15px 0;
   color: #50fa7b; /* アクセントカラー */
}

.bio {
   font-size: 1.1em;
   color: #f8f8f2;
   margin-bottom: 40px;
   line-height: 1.7;
}

.links {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.link-button {
   color: #f8f8f2;
   text-decoration: none;
   padding: 18px 25px;
   border-radius: 8px;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
   background: #44475a; /* ボタンの基本色 */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.link-button:hover {
   background-color: #6272a4; /* ホバー時の色 */
   transform: translateY(-2px);
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.link-button i {
   margin-right: 15px;
   font-size: 1.3em;
}

/* 各SNSのボタン色 */
.instagram  { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.x-twitter  { background: #000000; }
.facebook   { background: #1877F2; }
.youtube    { background: #FF0000; }
.contact    { background: #64b5f6; } /* 連絡先ボタンの色 */

/* スマートフォン用の調整 */
@media (max-width: 600px) {
   body {
       padding: 20px;
   }
   .container {
       padding: 30px;
   }
   .name {
       font-size: 2em;
   }
   .bio {
       font-size: 1em;
       margin-bottom: 30px;
   }
   .links {
       gap: 15px;
   }
   .link-button {
       padding: 15px 20px;
       font-size: 0.9em;
   }
   .link-button i {
       margin-right: 10px;
       font-size: 1.1em;
   }
}

.dark-mode {
   background: #181818;
   color: #f8f8f2;
}