/* ---------------------------------- */
/* ベーススタイル */
/* ---------------------------------- */
.page {
    /* 背景色を白に近いグレー (#F8F8F8など) に設定。Figmaの背景を再現。 */
    background-color: #f7f7f7; 
    font-family: sans-serif;
    background-image: url(image/background.png); 
    color: #333;
    min-height: 100vh;
    display: flex;
    justify-content: center; /* 中央揃え */
    align-items: flex-starts; /* 上部に寄せる (centerから変更) */
    padding: 0 15px; /* 左右の余白 */
    overflow-x: hidden;
    position: relative;
}

/* リンクとリストの共通設定 */
a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ---------------------------------- */
/* ブロック: profile (メインコンテンツ) */
/* ---------------------------------- */
.profile {
    max-width: 400px; /* プロトタイプに近い最大幅 */
    width: 100%;
    padding-top: 50px; 
    text-align: center;
    position: relative;
    z-index: 10;
    margin-top: auto; 
    margin-bottom: auto;
}

/* 要素: profile__avatar-wrapper (アイコンを中央に配置するためのコンテナ) */
.profile__avatar-wrapper {
    display: inline-block;
        overflow-x: hidden;
    /* アイコンの影や枠は画像自体に含まれていると仮定するか、CSSで再現 */
}

/* 要素: profile__avatar (アイコン画像) */
.profile__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

/* 要素: profile__name (名前) */
.profile__name {
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0 5px 0;
}

/* 要素: profile__description (説明文) */
.profile__description {
    font-size: 0.8em;
    color: #555;
    margin: 0 auto 10px auto;
    max-width: 300px;
    line-height: 1.5;
}

/* 要素: profile__email-link (メールアドレス) */
.profile__email-link {
    font-size: 0.8em;
    color: #333; /* 黒っぽいテキスト色を維持 */
    opacity: 0.6;
        justify-content: center; /* 中央揃え */
    display: inline-block;
}

/* ---------------------------------- */
/* ブロック: links (ボタン群) */
/* ---------------------------------- */
.links {
    padding: 0 10px; /* リンクブロック全体の左右パディング */
}

/* 修飾子: links__list--social (ソーシャルメディアボタン) */
.links__list--social {
    display: flex;
    justify-content: space-around; /* アイコン間に均等なスペース */
    max-width: 400px;
    margin: 0 auto 50px auto;
}

/* 要素: links__item--icon (ソーシャルアイコン) */
.links__item--icon {
    width: 60; /* アイコンのサイズ */
    height: 100px;
}

/* 要素: links__button--icon (アイコンボタン) */
.links__button--icon {
    display: block;
    height: 100%;
    /* 背景色がないため、paddingやbox-shadowは設定しない */
}

.links__button--icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 修飾子: links__list--commerce (販売サイトボタン) */
.links__list--commerce {
    display: flex;
    flex-direction: column;
    gap: 15px; /* ボタン間の間隔 */
}

/* 要素: links__button (縦並びボタンの共通スタイル) */
.links__button {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央揃え */
    padding:10px 10px;
    border-radius: 8px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    transition: opacity 0.2s;
}

.links__button:hover {
    opacity: 0.85;
}

/* 要素: links__logo (ロゴコンテナ) */
.links__logo {
    width: 25px; 
    height: 25px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.links__logo img {
    max-width: 100%;
    max-height: 100%;
    /* ロゴの色がボタン背景色と異なり、適切に見えるように調整が必要な場合がある */
}

/* 要素: links__text (テキスト部分) */
.links__text {
    font-size: 1em;
}

/* ボタンの色設定 */
.links__button--melonbooks {
    background-color: #63b844; /* 緑・#63b844 */
}

.links__button--dlsite {
    background-color: #3b74b8; /* 青・#3b74b8 */
}

.links__button--booth {
    background-color: #696969; /* 赤・#e54d6a */
}

.links__button--mashirokeshop {
    background-color: #696969; /* 濃緑・#4CA477 */
}

.links__button--skeb {
    background-color: #28837F; /* 濃緑・#28837F */
}

.links__button--odaibako {
    background-color: #333333; /* グレー・#333333 */
}

.links__button--bsky {
    background-color: #151D28; /* 紺・#151D28 */
}

.links__button--pommu {
    background-color: #1f91ad; /* 水色・#C6EBE6 */
}

/* ---------------------------------- */
/* ブロック: background-decorations (背景装飾) */
/* ---------------------------------- */
/* この部分はFigmaの複雑な背景パターン（星、点線、線）を再現するための抽象的なクラスです。
   詳細な再現には、SVGや複数のCSS擬似要素が必要になります。
   ここでは、白系のシンプルな背景としています。 */
.background-decorations {
    position: fixed; /* スクロールしても動かないように */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* コンテンツの下に配置 */
    /* 背景のパターン画像をここで設定:
    background-image: url('background-stars.svg'), url('background-lines.svg'); 
    background-repeat: repeat; */
    opacity: 0.8; 
}