/* style.css */

/* 基本的なリセットとフォント設定 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif; /* または好きなフォントを指定 */
    color: #e0f2f7; /* 明るい青系の文字色 (背景に合わせる) */
    line-height: 1.6;
    display: flex; /* コンテンツを中央寄せするためのFlexbox */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* ビューポートの高さいっぱいにする */
    /* ★★ 氷モチーフの背景 ★★ */
    background:#222346;

    /* ★★ フェード効果を追加 ★★ */
    /* 背景色の変化を0.5秒かけて滑らかに行う */
    transition: background-color 0.5s ease; /* もしbackground-imageもフェードさせたいなら background-image 0.5s ease も追加 */
    /* もしくは background プロパティ全体をトランジションさせる */
    /* transition: background 0.5s ease; */

    /* もしくは背景画像を使う場合 (コメントアウト解除して使用) */
    /* background-image: url('ice-texture.jpg'); */
    /* background-size: cover; */
    /* background-attachment: fixed; */
}

/* コンテナスタイル */
.container {
    width: 90%; /* 幅 */
    max-width: 600px; /* 最大幅 */
    margin: 20px auto; /* 上下の余白と左右中央寄せ */
    padding: 30px 20px;
    background-color: rgba(255, 255, 255, 0.2); /* 半透明の白 (氷の透明感) */
    backdrop-filter: blur(10px); /* 背景をぼかす (すりガラス効果) */
    border-radius: 15px; /* 角を丸く */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 薄い枠線 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* 影 */
    text-align: center; /* コンテンツを中央寄せ */
}

/* プロフィールセクション */
.profile-section {
    margin-bottom: 30px;
}

.profile-img {
    width: 120px; /* 画像サイズ */
    height: 120px;
    border-radius: 50%; /* 丸い形に */
    object-fit: cover; /* 画像の比率を維持 */

    box-shadow: 0 0 10px rgba(179, 229, 252, 0.5); /* うっすらとした影/光彩 */
    margin-bottom: 15px;
}

.profile-section h1 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #e1f5fe; /* 明るい青系 */
    font-size: 1.8em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* 影 */
}

.profile-section p {
    margin-top: 0;
    color: #b3e5fc; /* やや薄い青系 */
    font-size: 1em;
}

/* リンクセクション */
.links-section h2 {
    color: #b3e5fc; /* リンクの見出し色 */
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.link-list {
    list-style: none; /* リストの点を消す */
    padding: 0;
    margin: 0;
}

.link-item {
    margin-bottom: 15px; /* リンクボタン間のスペース */
}

/* ★★ リンクボタンのスタイル (氷モチーフ) ★★ */
.link-button {
    display: block; /* ボタン全体をリンクにする */
    background-color: rgba(255, 255, 255, 0.3); /* 半透明の背景 */
    color: #01579b; /* 濃い青色の文字 */
    padding: 15px 20px;
    border-radius: 8px; /* 少し丸みのある角 */
    text-decoration: none; /* 下線を消す */
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease; /* ホバー時のアニメーション */
    border: 1px solid rgba(255, 255, 255, 0.4); /* 枠線 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影 */
    backdrop-filter: blur(5px); /* ボタン自身にも軽いぼかし */
}

/* リンクボタンのホバーエフェクト (氷モチーフの輝き) */
.link-button:hover {
    background-color: rgba(255, 255, 255, 0.5); /* ホバーで少し明るく */
    transform: translateY(-3px); /* 少し上に移動 */
    box-shadow: 0 5px 15px rgba(179, 229, 252, 0.6); /* 輝くような影 */
    color: #0277bd; /* ホバーで少し明るい青に */
}

/* 各SNS固有のスタイル例 (背景色やアイコンなど) */
/* .link-button.twitter { background-color: #1DA1F2; color: white; } */
/* .link-button.instagram { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: white; } */
/* 上記は元のSNSカラーですが、氷モチーフに合わせるなら色を変えるか、アイコンだけ使うのが良いでしょう */
/* 例：Twitterボタンを氷モチーフに合わせた青にする */
/* .link-button.twitter { background-color: rgba(66, 165, 245, 0.4); color: #e3f2fd; border-color: rgba(144, 202, 249, 0.5); } */
/* .link-button.twitter:hover { background-color: rgba(66, 165, 245, 0.6); box-shadow: 0 5px 15px rgba(66, 165, 245, 0.6); } */


/* フッター */
footer {
    margin-top: 30px;
    font-size: 0.9em;
    color: #b3e5fc; /* 薄い青系 */
}

/* レスポンシブ対応 (画面幅が狭い場合の調整) */
@media (max-width: 768px) {
    .container {
        padding: 20px 15px; /* 内側の余白を少し減らす */
    }

    .profile-img {
        width: 100px;
        height: 100px;
    }

    .profile-section h1 {
        font-size: 1.5em;
    }

    .links-section h2 {
        font-size: 1.3em;
    }

    .link-button {
        padding: 12px 15px; /* ボタンのパディングを減らす */
        font-size: 1em;
    }
}

/* style.css */

/* ... 既存のCSSコード ... */

/* ★★ PCレイアウト（左寄せ） ★★ */
@media (min-width: 992px) {
    body {
        justify-content: flex-start;
        padding-left: 50px;
        padding-right: 50px;
        /* PCレイアウトでの背景変更もフェードします */
    }

    .container {
        margin-left: 0;
        margin-right: auto;
    }
    /* ... PCレイアウトでの他のスタイル ... */
}

/* レスポンシブ対応 (画面幅が狭い場合の調整) */
@media (max-width: 768px) {
    /* ... 既存のスマホ向けスタイル ... */
}

/* style.css */

/* ... 既存の body, .container, .profile-section, .links-section, footer のスタイル ... */

/* ★★ キャラクター紹介セクションのスタイル ★★ */
.character-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* SNSリンクとの区切り線 */
}

.character-section h2 {
    color: #b3e5fc; /* 見出し色 */
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.character-list {
    display: flex; /* Flexboxで子要素（キャラクターリンク）を横に並べる */
    justify-content: space-around; /* 子要素間に均等なスペースを空ける */
    flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
    gap: 15px; /* 子要素間の隙間 */
    padding: 0;
    list-style: none; /* リストとして使う場合 */
}

.character-link {
    display: block; /* リンク全体をブロック要素に */
    text-decoration: none; /* 下線消去 */
    color: inherit; /* 文字色を親要素から継承 */
    width: 80px; /* キャラクター画像の幅に合わせて調整 */
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* ホバー時のアニメーション */
}

.character-link:hover {
    transform: translateY(-5px); /* ホバーで少し上に移動 */
    /* box-shadow: 0 8px 15px rgba(179, 229, 252, 0.5); /* 氷っぽい輝き */
}

.character-img {
    width: 80px; /* 画像サイズ */
    height: 80px;
    object-fit: cover; /* 画像の比率を維持 */
    border-radius: 50%; /* 丸い形に */
    border: 3px solid rgba(255, 255, 255, 0.5); /* 枠線 */
    transition: border-color 0.2s ease, filter 0.2s ease; /* ホバー時のアニメーション */
    /* initial filter if desired */
    /* filter: grayscale(50%); /* 最初は少しモノクロにする */
}

.character-link:hover .character-img {
    border-color: rgba(179, 229, 252, 0.8); /* ホバーで枠線を明るく */
    /* filter: none; /* ホバーでモノクロを解除 */
}

.character-link p {
    margin-top: 8px;
    font-size: 0.9em;
    color: #e0f2f7; /* 文字色 */
}

/* ★★ PCレイアウト（左寄せ）でのキャラクターセクション調整 ★★ */
@media (min-width: 992px) {
    body {
        justify-content: flex-start;
        padding-left: 50px;
        padding-right: 50px;
    }

    .container {
        margin-left: 0;
        margin-right: auto;
        /* max-width: 500px; /* コンテナの幅を調整した場合 */
    }

    /* PC表示時、キャラクターリストを横一列に */
    .character-list {
         /* justify-content はそのまま space-around でOK */
         /* flex-wrap: wrap; は狭い幅での折り返しなのでPCでは不要だが残しておいても良い */
    }

    .character-link {
        /* PCでのサイズ調整が必要なら */
        width: 100px; /* 例: PCでは少し大きく */
    }
    .character-img {
         width: 100px; /* 例: PCでは少し大きく */
         height: 100px;
    }
}

/* レスポンシブ対応 (画面幅が狭い場合のキャラクターリスト調整) */
@media (max-width: 768px) {
    .character-list {
        /* スマホなど狭い画面での配置調整が必要なら */
        gap: 10px; /* 隙間を少し小さく */
        justify-content: center; /* 中央寄せにする場合 */
    }
     .character-link {
        width: 70px; /* スマホでのサイズ調整 */
    }
    .character-img {
         width: 70px; /* スマホでのサイズ調整 */
         height: 70px;
    }
}

/* 既存のモバイル用メディアクエリはそのまま残しておきます */
/* @media (max-width: 768px) { ... } */