/* ========== 全体共有スタイルここから ========== */
h2 {
    margin: 0;
}

body {
    background-color: #eeeeee;
}
/* ========== 全体共有スタイルここまで ========== */



/* ==========headerここから========== */
.header {
    z-index: 1;
    position: fixed;
    top: 30px;
    left: 30px;
    right: 30px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.75);
    margin: 0; /* position: fixed のため margin は不要に */
    height: 90px;
    border-radius: 70px;
    padding: 0 20px; /* 左右のパディングを追加 */
    transition: background-color 0.3s ease-in-out;
    backdrop-filter: blur(5px);
}

.header-container {
    display: flex;
    flex-direction: row;
    /* justify-content: start; */
    justify-content: space-between;
    align-items: center; /* 垂直方向中央 */
    height: 100%;
}

.header-right {
    display: flex;
    flex-direction: row;
    align-items: center; /* 垂直方向中央 */
    gap: 20px; /* アイコンの間隔を調整 */
}

.header-right .share {
    color: #bbb;
}

.header-icon-link {
    color: #555;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.14);
    transition: transform 0.3s ease, box-shadow 0.3s ease 0.15s; /* 影の変化に0.15秒の遅延を追加 */
}

.header-icon-link:hover {
    /* background-color: rgba(0, 0, 0, 0.5);
    color: #fff; */
    transform: scale(1.1);

}

.nav-button {
    display: none;
    z-index: 3;      /* オーバーレイ(z-index: 2)より手前に表示 */
    top: 50px;       /* ヘッダーの上辺から(30px + (90px - 50px)/2) */
    right: 50px;     /* ヘッダーの右辺から(30px + 20px) */
    width: 50px;
    height: 50px;
    color: #555;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.15rem;
    position: fixed; /* 画面を基準に位置を固定 */
    display: none;
    align-items: center;
}@media (max-width: 447px) {
    .nav-button {
        display: flex; /* 狭いときのみ表示 */
    }
    .header-right {
        display: none;
    }
}

.header-overlay-nav {
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 画面全体の高さ */
    background: rgba(255, 255, 255, 1.0); /* 半透明の白い背景 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 水平中央揃え */
    align-items: center;    /* 垂直中央揃え */
    opacity: 0; /* 初期状態では透明で見えない */
    pointer-events: none; /* 初期状態ではクリックできない */
    transition: opacity 0.4s ease-in-out; /* スムーズな表示/非表示アニメーション */
    z-index: 2; /* 他の要素より手前に表示 */
}

.header-overlay-nav.active {
    opacity: 1; /* activeクラスが付いたら表示 */
    pointer-events: auto; /* クリックできるようにする */
}

.nav-list {
    display: flex;
    flex-direction: column; /* アイコンを縦に並べる */
    gap: 2rem; /* アイコン間の余白 */
}

.nav-list .share {
    color: #bbb;
}

.header-sentence{
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.7rem;
    color: #555;
}
/* ==========headerここまで========== */



/* ====================  sectionここから  ==================== */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section {
    width: 80vw;
    background-color: #fff;
    border-radius: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin: 30px 40px;
    padding: 30px;
} section[id] {
    /* ヘッダーの高さ(90px) + 上部の余白(30px) + α */
    scroll-margin-top: 150px;
}

.profile-section {
    /*
        なぜか天地30 横40のうち 天地だけ top150 bottom30 扱いになる
        おそらく二重に指定していると、marginは各箇所の最大値をとる
        親にも子にも指定するとどうなるかはわからん
    */
    margin-top: 150px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.section-title i {
    color: #555;
    font-size: 150%;
    padding-right: 1rem;
}

.section-title-left {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content:center;
}

.section-title-sentence {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 40px;
    color: #555;
}

.section-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 要素を右揃えにする */
}

.section-footer-right button{
    width: 50px;
    height: 50px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: #555;
    background-color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.14);
    transition: transform 0.3s ease;
}

.section-footer-right button:hover {
    cursor: pointer;
    /* background-color: rgba(0, 0, 0, 0.5);
    color: #fff; */
    transform: scale(1.1);
}


/* =====ProfileCardここから===== */
.profile-cards-container {
    max-width: 800px;
    margin: 0 auto;
}


/* =====ProfileCardここまで===== */

/* =====blog-sectionここから===== */
.post-cards-container {
    max-width: 800px;
    margin: 0 auto;
}
/* =====blog-sectionここまで===== */

/* ====================  sectionここまで  ==================== */



/* ==========footerここから========== */
.footer {
    background-color: none;
    margin: 30px 40px;
    padding: 20px 30px;
}

.footer-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; /* アイコン間の余白 */
    flex-wrap: wrap; /* アイコンを折り返して複数行にする */
    /* アイコン4つ分の幅をコンテナの最大幅として設定 */
    max-width: 700px;
    margin: 0 auto; /* コンテナ自体を中央に配置 */
}

.footer-icon-link {
    color: #555; /* アイコンの色を白に */
    background-color: #fff;
    text-decoration: none;
    display: inline-flex; /* アイコンを中央揃えにするために flex を使用 */
    align-items: center;
    justify-content: center;
    width: 80px; /* 幅 */
    height: 80px; /* 高さ */
    border-radius: 50%; /* 円形にする */
    transition: transform 0.3s ease;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(5px);
}.footer-icon-link:hover {
    /* color: #fff; */
    transform: scale(1.06);
}

.footer-icon-link img {
    transition: background-color 0.3s ease;
    width: 100%; /* こいつは親のfooter-icon-linkの幅、高さに合わせる */
    height: 100%;
    object-fit: cover; /* 画像の比率を保ったままコンテナを埋める */
    border-radius: 50%; /* 画像自体も円形にクリップする */
    filter: brightness(0) invert(1) brightness(33.3%);
}

.footer-icon-link i {
    /* アイコンのサイズを調整 */
    font-size: 240%;
}
/* ==========footerここまで========== */



/* ==========pagetopボタンここから==========*/
.page-top-btn {
    position: fixed;
    bottom: 30px;
    right: 40px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.35); /* 透明度を上げてすりガラス効果を強調 */
    color: #555;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.14);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease;
    backdrop-filter: blur(5px);
}

.page-top-btn:hover {
    /* background-color: rgba(0, 0, 0, 0.5);
    color: #fff; */
    transform: scale(1.1);
}

.page-top-btn.show {
    opacity: 1;
    visibility: visible;
}
/* ==========pagetopボタンここまで==========*/






/* ===========================================*/
/* ==========[slug].astro固有スタイル==========*/

.header .home-back-button {
    border-radius: 50%;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: #555;
    background-color: inherit;
    border: none;
    width: 50px;
    height: 50px;
}

.header .home-back-button:hover {
    cursor: pointer;
    /* background-color: rgba(0, 0, 0, 0.5);
    color: #fff; */
    transform: scale(1.06);
}

article img {
    width: 100%;
}

article .thumbnail {
    display: block;
    width: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 35px;
    mask-image: linear-gradient(to bottom, black -0%, transparent 90%);
}

.blog-section-container {
    margin: 150px 0;
    display: flex;
    flex-direction: row;

    gap: clamp(10px, 4vw, 25px);

}

.view-blog-left-box {
    width: 60vw;

    border-radius: 35px;
    padding: 25px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.view-blog-right-box {
    width: 20vw;

    border-radius: 35px;
    padding: 25px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 800px) {
    .blog-section-container {
        flex-direction: column;
        /* スマホ表示ではコンテナ自体の幅を調整 */
        width: 85vw;
        align-items:center;
    }
    .view-blog-left-box {
        width: 100%;
    }
    .view-blog-right-box {
        width: 100%;
    }
}

/* ========== 記事(.md)内の画像スタイル ========== */
article img:not(.thumbnail) {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 3rem auto;
    border-radius: 35px;
    /* -webkit-mask-image: radial-gradient(circle, black 70%, transparent 100%);
    mask-image: radial-gradient(circle, black 70%, transparent 100%); */
}

/* ==========[slug].astro固有スタイルここまで==========*/
/* ==================================================*/




/* ==================================================*/
/* ==========profile.astro固有スタイルここから==========*/
.profile-tabs-container * {
    box-sizing: border-box;
}

.profile-tabs-container {
    width: 90%; /* clampであとから調整 */
    max-width: 1000px;
    font-family: "M PLUS Rounded 1c", sans-serif;
    margin: 150px auto;
    /* カード全体にスタイルを適用 */
    background-color: #fff; /* 背景色を白に設定 */
    border-radius: 30px; /* 角を丸める */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 全体に影をつける */
}

.profile-tabs-list {
    margin: 0 20px;
    background-color: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* ボタンを左寄せにする */
    flex-wrap: wrap;
    gap: 10px;
}

.profile-tab-trigger {
    cursor: pointer;
    background-color: inherit;
    border: none;
    margin: 10px;
    font-family: inherit; /* 親要素のフォントを継承する */
    color: #62626a;
}

.profile-tab-trigger.header-icon-link {
    color: white; /* アイコンの色を白に */
    -webkit-text-stroke: 1.5px #888; /* 縁取り（Safariなど） */
    font-size: 140%;
}

.profile-tab-trigger.header-icon-link.active {
    color: white; /* アイコンの色を白に */
    -webkit-text-stroke: 1.5px #888; /* 縁取り（Safariなど） */
    box-shadow: none;
}
.profile-tab-trigger.active {
    background-color: #fff; /* 中身と同じ色 */
    color: #09090b;
    transition: box-shadow 0s;
    transition-delay: 0s; /* アクティブになる際は遅延なく即座に変化 */
    font-weight: 600;
}
.profile-tab-trigger.active:hover {
    transform: scale(1);
    cursor: default;
}


/* --- コンテンツ部分 --- */
.profile-tab-content {
    display: none; /* デフォルト非表示 */
    background-color: transparent; /* 親の背景色を継承 */

    padding: 24px;

    /* タブより下（z-index小）だが、相対位置で重なりを制御 */
    position: relative;
    margin-top: 0;
}

.profile-tab-content.active {
    display: block;
    /* あると分かれて表示されてしまう */
    /* animation: tabFadeIn 0.2s ease-out; */
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ==========profile.astro固有スタイルここまで==========*/
/* ==================================================*/