/* =========================
   リセット
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================
   スムーズスクロール
   ========================= */
html {
    scroll-behavior: smooth;
}

/* =========================
   基本
   ========================= */
body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
                "Hiragino Sans", "Noto Sans JP",
                Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: #f5f5f5; /* 任意（中央コンテンツを浮かせる） */
}

/* =========================
   ヘッダー
   ========================= */
header {
    display: flex;
    justify-content: center;
}

.header-image {
    width: 100%;
    max-width: 1400px;
    height: auto;
    display: block;
}

/* =========================
   固定ボタン（基本＝スマホ）
   ========================= */
.fixed-buttons {
    position: fixed;
    bottom: 40px;
    transform: translateY(-50%);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 1000;
}

/* ボタン */
.btn {
    display: block;
}

/* 画像ボタン */
.btn img {
    width: 60px;
    height: auto;
    display: block;
}

/* ホバー */
.btn img:hover {
    opacity: 0.8;
}

/* =========================
   PC（1400px以上）
   コンテンツ右端に合わせる
   ========================= */
@media (min-width: 1400px) {
    .fixed-buttons {
        right: calc((100vw - 1400px) / 2);
    }
}

/* =========================
   メイン
   ========================= */
main {
    padding: 20px 0 40px 0;
}

/* =========================
   コンテナ（最大1400px）
   ========================= */
.container {
    width: 90%;
    max-width: 1100px;
    width: 90%; /* スマホで余白確保 */
    margin: 0 auto;
}

/* =========================
   メインボタン
   ========================= */
.main-buttons {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 12px;               /* ボタン間の余白 */
    margin-bottom: 30px;
}

/* ボタン */
.main-btn {
    width: 544px;
    height: 72px;
    background: #2591A2;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: 0.3s;
}

/* ホバー */
.main-btn:hover {
    opacity: 0.8;
}

/* =========================
   セクション全体
   ========================= */
.content-block {
    margin: 0 auto 60px;
    border-bottom: 1px solid #dadada;
}
/* h2 */
h2 {
    color: #2591A2;
    margin-bottom: 15px;
}



/* h3 */
h3 {
    padding: 10px 15px; /* 見やすく */
    margin-top: 40px;
    margin-bottom: 20px;
    background: #ebf5f7;
    color: #2591a2;
    font-size: 20px;
}

/* メイン画像 */
.main-image {
    width: 100%;
    max-width: 740px;
    display: block;
    margin: 20px auto;
}

/* 補足ボックス */
.note-box {
    max-width: 680px;
    background: #fcf3c7;
    border-radius: 10px;
    padding: 20px;
    margin: 0 auto; /* 中央配置 */
    font-size: 14px;
    color: #4d4d4d;
}

/* 監修テキスト */
.author {
    text-align: right;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* 区切り線 */
.divider {
    border: none;
    border-top: 1px solid #dadada;
    margin-top: 40px;
}

/* =========================
   リンクリスト
   ========================= */
.link-section {
    max-width: 1100px;
    margin: 0 auto;
}

.link-list {
    list-style: none;
    margin-top: 20px;
    padding: 0;
}

/* 各項目 */
.link-list li {
    margin-bottom: 40px;
}

/* テキスト（▪️部分） */
.link-list .label {
    color: #2591A2;
}

/* リンク */
.link-list a {
    word-break: break-all; /* URL折り返し対策 */
}

/* 作成日（リストの下・右寄せ） */
.link-section .date {
    text-align: right;
    font-size: 14px;
}

/* =========================
   フッター
   ========================= */
footer {
    background: #2591A2;
    color: #fff;
    border-top: 5px solid #bedee3;

    height: 75px; /* ライン込み */
    display: flex;
    align-items: center;     /* 縦中央 */
    justify-content: center; /* 横中央 */
}

.footer-inner {
    width: 90%;
    max-width: 1400px;
    text-align: center;
}
/* フッター内ナビ */
.footer-nav {
    display: flex;
    justify-content: center; /* 横中央 */
    align-items: center;     /* 縦中央 */
    gap: 30px;               /* リンク間の間隔 */
}

/* リンク */
.footer-nav a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}

/* ホバー：線だけ */
.footer-nav a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (max-width: 768px) {
    .main-buttons {
        flex-direction: column;
        align-items: center;
    }

    .main-btn {
        width: 90%;
        max-width: 544px;
    }
}