/* - スクロールバー */
body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
}

body::-webkit-scrollbar-thumb {
    background: #7ac0f0;
    border-radius: 6px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #7ac0f0;
    border-radius: 6px;
}

body::-webkit-scrollbar-thumb:active {
    background: #7ac0f0;
    border-radius: 6px;
}
/* - スクロールバー End */

/* - マウスカーソル */
* {
    cursor: url(../cursors/mafuyu-normal.webp) 0 0, url(../cursors/mafuyu-normal.gif) 0 0, auto;
}

p,
span,
label,
input,
textarea,
button,
select,
code,
pre {
    cursor: url(../cursors/mafuyu-text.webp) 0 0, url(../cursors/mafuyu-text.gif) 0 0, text;
}

a,
a:visited,
a:active,
button:hover,
a:hover,
input:hover,
select:hover,
textarea:hover {
    background-color: transparent;
    cursor: url(../cursors/mafuyu-link.webp) 0 0, url(../cursors/mafuyu-link.gif) 0 0, pointer;
}

*[title],
[aria-label],
.help,
.question {
    cursor: url(../cursors/mafuyu-help.webp) 0 0, url(../cursors/mafuyu-help.gif) 0 0, help;
}
/* - マウスカーソル End */

/* - Markdown 画像の自動適応 */
.content-page img,
.markdown-content img {
    max-width: 100%;
    height: auto;
}
/* - Markdown 画像の自動適応 End */

/* テキスト選択 */
::selection {
    text-decoration: underline;
    text-decoration-color: #2a92d8;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* - 区切り線 */
hr {
    position: relative;
    overflow: visible;
    width: calc(100% - 4px);
    height: 0;
    margin: 32px auto;
    box-sizing: content-box;
    border: 2px dashed #a4d8fa;
}

hr:before {
    content: "\f0c4";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    top: -10px;
    left: 5%;
    z-index: 1;
    color: #49b1f5;
    transition: all 1s ease-in-out;
}
/* - 区切り線 End */

/* - 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin: 16px 0 12px 0;
    font-weight: 700;
    color: #344c67;
}
/* - 見出し End */

/* - ハイパーリンク */
a {
    position: relative;
    color: #2a92d8;
    text-decoration: none;

    background: linear-gradient(to right, #2a92d8, #2a92d8) no-repeat right bottom;
    background-size: 0 2px;
    transition: background-size 0.8s;
}

.right-area a:hover {
    color: #2a92d8;
    background-position: left bottom;
    background-size: 100% 2px;
}

.right-area a[target="_blank"] {
    padding-right: 12px;
}

.right-area a[target="_blank"]::after {
    content: "\f35d";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    transform: translate(0%, -20%);
    pointer-events: none;
}
/* - ハイパーリンク End */