/* 共通の基本スタイル。素のタグ名のセレクタは、このファイルの基本スタイルだけに使う。 */
:root {
    --ksa-color-text: #2d3a40;
    --ksa-color-heading: #1f3f4d;
    --ksa-color-link: #1d5a73;
    --ksa-color-muted: #5b6b72;
    --ksa-color-line: #d9e0e3;
    --ksa-color-bg: #ffffff;
    --ksa-color-bg-soft: #f4f7f8;
    --ksa-width-wide: 72rem;
    --ksa-width-text: 55.2rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--ksa-color-bg);
    color: var(--ksa-color-text);
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 1rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
    -webkit-text-size-adjust: 100%;
}

a {
    color: var(--ksa-color-link);
}

a:hover,
a:focus {
    text-decoration: none;
}

h1,
h2,
h3 {
    margin: 0 0 0.75em;
    color: var(--ksa-color-heading);
    line-height: 1.4;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.0625rem;
}

p {
    margin: 0 0 1em;
}

img {
    max-width: 100%;
    height: auto;
}

/* 本文エリア：外枠（.ksa-main）は --ksa-width-wide。記事・ヘッダー・フッターは、同じ幅（--ksa-width-text）の中央のカラムに入れて、左端をそろえる。 */
.ksa-main {
    max-width: var(--ksa-width-wide);
    margin: 0 auto;
    padding: 1.5rem 1rem 0;
}

.ksa-main .ksa-entry {
    max-width: var(--ksa-width-text);
    margin: 0 auto;
}

/* ヘッダー・フッターの中身も、本文と同じカラム幅・同じ左右の余白（1rem）にする。style.css の指定を上書きする。 */
.ksa-site-header__inner,
.ksa-site-footer__inner {
    max-width: calc(var(--ksa-width-text) + 2rem);
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

.ksa-entry__title {
    margin-bottom: 1.25rem;
}

.ksa-entry__content {
    max-width: 100%;
}

.ksa-entry__content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.ksa-entry__summary {
    margin-bottom: 1.5rem;
}

@media (min-width: 48rem) {
    body {
        font-size: 1.0625rem;
    }

    h1 {
        font-size: 1.875rem;
    }

    h2 {
        font-size: 1.375rem;
    }

    .ksa-main {
        padding-top: 2.5rem;
    }
}
