/* Footer: Zensical version badge, aligned to the right of the copyright */
.md-footer__version {
  margin-left: auto;
  padding: 0.4rem 0;
  font-size: 0.64rem;
  opacity: 0.7;
}

.md-footer__version code {
  padding: 0.1em 0.4em;
  border-radius: 0.2rem;
  background-color: rgba(0, 0, 0, 0.26);
}

/* コンテンツ表示幅をできるだけ広くする */
:root {
  --md-grid-max-width: 96%;
}

.md-grid {
  max-width: 96%;
}

.md-header {
    background-color: #000000;
    color: white;
}

.md-tabs {
    background-color: #4C4C4C;
    color: white;
}

.md-search {
    border-radius: 20px;
    background-color: white;
}

.md-search__button {
    color: black;
}

.color-red {
    color: red;
    font-weight: bold;
}

/*
.highlight {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px dashed #333333;
    border-radius: 15px;
}
*/

pre {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    border: 1px dashed #aaaaaa;
    border-radius: 5px;
}

/* テーブルのヘッダー部分 */
thead {
    background-color: #68cfc3;
}

/* テーブルのボディー部分 */
tbody {
    background-color: #f9fdfc;
}

/* 「==」で囲まれた部分 */
.md-typeset mark {
    background-color: transparent;
    color: #ff0000;
    font-weight: bold;
}

/* https://fontawesome.com/v6/icons?ic=free */

.md-typeset h1 {
    border-bottom: thick double #000000;
    color: #000;
    font-weight: bold;
    padding-bottom: 5px;
}

.md-typeset h2::before {
    content: "\f2b4" !important;
    display: inline-block !important;
    font-family: "Font Awesome 7 Free";
    margin-right: 0.3em;
}

.md-typeset h2 {
    border-bottom: 2px solid #888;
    color: #000;
    font-weight: bold;
}

.md-typeset h3::before {
    content: "\f4ad" !important;
    display: inline-block !important;
    font-family: "Font Awesome 7 Free";
    margin-right: 0.3em;
}

.md-typeset h3 {
    border-bottom: 2px dotted #888;
    color: #000;
    font-weight: bold;
}

.md-typeset h4 {
    border-bottom: 1px dashed #888;
    color: #000;
    font-weight: bold;
}

.md-typeset h5 {
    border-bottom: 0.5px dashed #888;
    font-weight: bold;
    text-transform: none;
}

.md-nav__link--active {
    background-color: #ffffbc;
    font-weight: bold;
}

@keyframes heart {
    0%,
    40%,
    80%,
    100% {
        transform: scale(1);
    }
    20%,
    60% {
        transform: scale(1.15);
    }
}
.heart {
    animation: heart 1000ms infinite;
}

/* インラインの幅制御 */

.md-typeset .admonition.inline.w31 {
    /* 3段組みの場合、31が限界値 */
    width: 31%;
}

.md-typeset .admonition.inline.w48 {
    /* 2段組みの場合、48が限界値 */
    width: 48%;
}

/* 水平線 */
.md-nav__link:has(hr) {
    pointer-events: none;
    cursor: default;
    height: 1px;
    padding: 0;
    border-top: 1px solid var(--md-default-fg-color--lighter);
    /*
    border-top: 1px solid var(--md-default-fg-color--lightest);
    border-top: 1px solid var(--md-default-fg-color--lighter);
    border-top: 1px solid var(--md-default-fg-color--light);
    border-top: 1px solid var(--md-default-fg-color);
    */
}

/* IOS目次 グリッド表示用 */
dl.index-grid-container {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    margin: 2em 0;
    padding: 0;
}

.md-typeset .index-grid-item {
    align-items: center;
    border: 1px solid #e0e0e0;
    background-color: #f0f8ff;
    border-radius: 16px;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.12);
    color: inherit !important;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-weight: bold;
    justify-content: flex-start;
    padding: 12px 10px;
    text-decoration: none !important;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.md-typeset .index-grid-item:hover {
    background-color: #87cefa;
    box-shadow: 8px 12px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.md-typeset .index-grid-item dt {
    color: var(--md-typeset-color);
    font-family:
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Yu Gothic",
        sans-serif;
    font-weight: 700;
    text-align: center;
    word-break: break-word;
}

/* Failure Admotionの背景色透過を止める
   他のAdmotionは多段にする可能性がある為、背景色透過のままにする */
.md-typeset .admonition.failure,
.md-typeset .admonition-block.failure {
    background-color: #fbeeed !important;
    opacity: 1 !important;
}