/*****************/
/* 各コンテンツ用 */
/*****************/

/*** トップページ用 ***/
/* トップ画像 */
.top-image {
    width: 100%; /* コンテンツ幅いっぱいに広げる */
    height: auto;
    border-radius: 8px; /* イラストの角も少し丸くする */
    margin-bottom: 20px; /* イラストの下に少し余白を作る */
}

/*** プロフィールページ用 ***/
/* 写真を綺麗な「真ん丸」に切り抜く現代の魔法 */
.profile-photo img {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* 50%にすると完全な円になります */
    object-fit: cover; /* 画像が歪まないように自動でいい感じにトリミングする */
    /* 写真を中央寄せにして、白いフチと影をつける */
    margin: 0 auto 15px auto;
    display: block;
    border: 3px solid #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 名前と肩書きを中央寄せ */
.profile-name {
    text-align: center;
    margin: 0 0 5px 0;
    font-size: 20px;
}

.profile-title {
    text-align: center;
    font-size: 14px;
    color: #666; /* 少し文字を薄くしてメリハリをつける */
    margin-bottom: 25px;
}

/* X（旧Twitter）風の黒いボタン */
.btn-x {
    display: block;
    text-align: center;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    border-radius: 20px; /* 少し丸みを持たせる */
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
}

    /* ボタンにマウスが乗った時（少し浮く） */
    .btn-x:hover {
        background-color: #333;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

/***************/
/* サイドバー用 */
/***************/
/* 親の箱：中身を横並びにする */
.flex-wrapper {
    display: flex;
    gap: 30px; /* 左右の箱の間の隙間 */
    align-items: flex-start; /* 上端を揃える */
}

/* メイン記事（幅を広く取る） */
.base-main {
    flex: 1; /* 余ったスペースを全部使う */
    background-color: #f4f1ea; /* 前に決めたアイボリー */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* サイドバー（幅を固定する） */
.base-sidebar {
    order: -1;
    width: 250px;
    background-color: #d9d5cc;
    padding: 20px;
    border-radius: 12px;
}

    /* sidebar-bottom が一緒に付いている時だけ、右に配置する */
    .base-sidebar.sidebar-bottom {
        order: 1;
    }

/**********/
/* 全体用 */
/**********/
/* ベースの設定 */
body {
    margin: 0;
    padding-top: 60px;
    background-color: #383532;
    color: #333;
}

/* 三角ボタン無効 */
.hamburger {
    display: none;
}

/* ロゴ画像のサイズをCSSで制御する */
.logo img {
    height: 50px; /* ヘッダーが60pxなので、少し小さめにして上下に余白を持たせる */
    width: auto; /* 幅は比率を保ったまま自動調整 */
    vertical-align: middle; /* ズレ防止 */
}

/* =========================================
   ENTERボタンのスタイル
========================================= */
/* ボタンを囲むエリア（中央寄せ用） */
.button-area {
    text-align: center; /* 中身を中央に寄せる */
    margin-top: 30px; /* イラストとの隙間 */
    margin-bottom: 20px;
}

/* ボタン本体のデザイン */
.btn-enter {
    display: inline-block;
    background-color: #1e73be; /* 落ち着いたブルー */
    color: #ffffff; /* 文字は白 */
    font-size: 18px;
    font-weight: bold; /* 文字を太く */
    text-decoration: none; /* リンクの下線を消す */
    padding: 15px 50px; /* 上下15px、左右50pxの内側余白 */
    border-radius: 30px; /* 左右を完全な丸にする */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影をつける */
    /* ▼ ここが現代の魔法！変化を「0.3秒かけて滑らかに」行う指示 */
    transition: all 0.3s ease;
}

    /* マウスが乗った時（ホバー時）の変化 */
    .btn-enter:hover {
        background-color: #155a96; /* 色を少し濃くする */
        transform: translateY(-2px); /* 2pxだけ上にフワッと浮かす */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 影を濃く広げて浮遊感を出す */
    }

/* 上部固定メニュー */
.site-header {
    position: fixed; /* 画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #1a1a1a;
    color: #fff;
    z-index: 1000; /* 他の要素より手前に表示 */
}

/* メニューの中身を整える */
.header-inner {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

.global-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.global-nav a {
    color: #e0e0e0;
    text-decoration: none;
}

/* フッターナビの文字を小さくする */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    display: flex; /* 横並びにしたい場合 */
    justify-content: center;
    gap: 20px; /* リンク同士の隙間 */
}

.footer-nav a {
    font-size: 0.8rem; /* ここで文字を小さくしています */
    color: #666; /* 少し控えめな色にするなど */
    text-decoration: none;
}

/* コピーライト表記 */
.copyright {
    text-align: center; /* 文字を中央に寄せる */
    color: #999; /* 背景の暗さに合わせて、少し明るいグレーにする（白 #fff でもOKです） */
    font-size: 0.8rem; /* 文字の大きさを少し小さくする */
    margin-top: 20px; /* ナビゲーションリンクとの間に余白を作る */
    padding-bottom: 20px; /* 画面の一番下との間に余白を作る */
}

/* 中央の固定幅エリア */
.main-content {
    max-width: 800px; /* ここで固定幅を指定（お好みで調整） */
    margin: 0px auto; /* 左右のmarginをautoにすることで中央寄せになります */
    padding: 30px;
    min-height: 600px;
    background-color: #f4f1ea; /* 真っ白(#fff)をやめて温かみのある色に */
    box-shadow: 0 0 15px rgba(0,0,0,0.3); /* 背景が暗いので影を少し濃く */
    border-radius: 12px;
}

/*********************/
/* 全体用（モバイル） */
/*********************/
@media screen and (max-width: 768px) {

    /* 1. ハンバーガーボタンの見た目 */
    .hamburger {
        display: block; /* スマホで表示する */
        width: 30px;
        height: 24px;
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        z-index: 1001; /* メニューより手前（上）に配置 */
    }

        /* 三本線を作る */
        .hamburger span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: #fff;
            position: absolute;
            transition: 0.3s; /* アニメーションの速度 */
        }

            .hamburger span:nth-child(1) {
                top: 0;
            }

            .hamburger span:nth-child(2) {
                top: 11px;
            }

            .hamburger span:nth-child(3) {
                bottom: 0;
            }

        /* ★ボタンが押された時（is-activeクラスが付いた時）×印にする */
        .hamburger.is-active span:nth-child(1) {
            top: 11px;
            transform: rotate(45deg);
        }

        .hamburger.is-active span:nth-child(2) {
            opacity: 0; /* 真ん中の線を消す */
        }

        .hamburger.is-active span:nth-child(3) {
            top: 11px;
            transform: rotate(-45deg);
        }

    /* 2. メニューを画面の右外に隠しておく */
    .global-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 画面の右外に配置して見えなくする */
        width: 80%; /* メニューの幅 */
        height: 100vh; /* 画面いっぱいの高さ */
        background-color: #333;
        transition: 0.3s; /* スライドしてくる速度 */
        z-index: 1000;
        padding-top: 80px; /* 上部の余白 */
    }

        /* ★ボタンが押された時、メニューを画面内に入れる */
        .global-nav.is-active {
            right: 0;
        }

        /* メニューの文字を縦並びにして中央寄せ */
        .global-nav ul {
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }
}


/**************************/
/* サイドバー用（モバイル） */
/**************************/
@media screen and (max-width: 768px) {

    /* 横並びをやめて、縦並び（column）に変更する！ */
    .flex-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* スマホではサイドバーも横幅いっぱい（100%）にする */
    .base-sidebar {
        width: 100%;
        order: -1;
    }

        /* sidebar-bottom が一緒に付いている時だけ、下に配置する */
        .base-sidebar.sidebar-bottom {
            order: 1;
        }
}

/* --- 記事内の画像回り込み用 --- */
.img-right {
    float: right;
    margin: 0 0 15px 20px;
    width: 45%; /* パソコンでは画面の45%の幅にする */
    max-width: 350px;
    border-radius: 8px; /* 少し角を丸くして柔らかい印象に */
}

/* スマホ表示のときは回り込みを解除して大きく表示する */
@media screen and (max-width: 768px) {
    .img-right {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
    }
}

/* スマホ表示のときは回り込みを解除して大きく表示する */
@media screen and (max-width: 768px) {
    .img-right {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
    }
}
/* ←この閉じカッコを追加しました！ */


/* =========================================
   記事下のボタンエリア
========================================= */

/* ボタンを囲む枠（ここで中央寄せと回り込み解除を両方やる） */
.article-footer-actions {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
    clear: both;
}

/* ボタン本体 */
.btn-next-article {
    display: inline-block;
    padding: 12px 24px;
    background-color: #2c3e50;
    color: #fff !important;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    transition: 0.3s;
}

    .btn-next-article:hover {
        background-color: #1a252f;
        transform: translateY(-2px);
    }