:root {
    --body: #242222;
    --red: #990001;
    --white-blue: #f1f9f9;
    --light-blue: #e1f2f2;
    --dark-blue: #1A8F8F;
    --blue: #30C1C1;
    --orange: #fcd3a0;
    --gray: #ddd;
    --dark-gray: #333;
}
/* reset */
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    color: var(--body);
}
body {
    margin: 0;
    font-size: 1.6rem;
    font-family: 'Roboto', 'Noto Sans JP Variable', sans-serif;
}
img {
    width: 100%;
    vertical-align: bottom;
    object-fit: cover; /* 画像のアスペクト比を保ちながら、指定された領域を埋める */
    object-position: center; /* 画像を中央に配置 */
    position: relative;
}
/* 画像が見つからない時のリンク切れを出さないようにする (参考: https://stackoverflow.com/a/37192970 ) */
img:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--light-blue);
    content: "";
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}
h1 {
    font-size: 3rem;
    padding-bottom: 10px;
}
h2 {
    font-size: 2.4rem;
    padding-bottom: 20px;
}
h3 {
    font-size: 1.8rem;
    padding-bottom: 20px;
}
ul {
    margin: 0;
}
li {
    padding-bottom: 5px;
}

/* common definition */
a {
    color: var(--blue);
    text-decoration: underline;
    transition: color 0.3s ease-in-out;
}
a:hover {
    color: var(--dark-blue);
}
h1.title {
    text-align: center;
    color: var(--dark-gray);
}
div.title-description {
    text-align: center;
    color: #555;
}
h2.title {
    text-decoration: underline;
    text-decoration-color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 10px;
}
a.button {
    color: white;
    background-color: var(--blue);
    padding: 8px 10px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease-in-out;
}
a.button__small {
    font-size: 1.4rem;
    padding: 2px 6px;
    font-weight: normal;
}
a.button:hover {
    background-color: var(--dark-blue);
}
div.spacing-80 {
    padding-bottom: 80px;
}
div.spacing-40 {
    padding-bottom: 40px;
}
div.spacing-20 {
    padding-bottom: 20px;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}