/*
MIT License

Copyright (c) 2026 Naoki OKAMURA a.k.a nyarla / kalaclista <me@nyarla.jp>
Copyright (c) 2025 デジタル庁

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/
:root {
    --color-blue-primary: #3460fb;
    --color-blue-secondary: #4979f5;
    --color-blue-tertiary: #0017c1;

    --color-lightblue-primary: #39abff;
    --color-lightblue-secondary: #97d3ff;
    --color-lightblue-tertiary: #0066be;

    --color-lime-primary: #ade830;
    --color-lime-secondary: #d0f5a2;
    --color-lime-tertiary: #6fa104;

    --color-yellow-primary: #ffd43d;
    --color-yellow-secondary: #ffe380;
    --color-yellow-tertiary: #a58000;

    --color-orange-primary: #ff8d44;
    --color-orange-secondary: #ffa66d;
    --color-orange-tertiary: #8b3200;

    --color-red-primary: #ff5454;
    --color-red-secondary: #ff9696;
    --color-red-tertiary: #850000;

    --color-magenta-primary: #C000C0;
    --color-magenta-secondary: #FF8EFF;
    --color-magenta-tertiary: #8B008B;

    --color-purple-primary: #a565f8;
    --color-purple-secondary: #cda6ff;
    --color-purple-tertiary: #5109ad;

    --color-lightgray-primary: #cccccc;
    --color-lightgray-secondary: #f2f2f2;
    --color-lightgray-tertiary: #949494;

    --color-darkgray-primary: #666666;
    --color-darkgray-secondary: #999999;
    --color-darkgray-tertiary: #4d4d4d;

    --color-monochrome-light: #fff;
    --color-monochrome-dark: #000;
}

/*- Global -*/
/* color */
body {
    background-color: var(--color-lightgray-secondary);
    color: var(--color-monochrome-dark);
}

/* typography */

#container, #footer, #box2 {
    /* Std-18B-160 */
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content h4,
    .entry-content h5,
    .entry-content h6,
    .entry-content .table-of-contents::before,
    .entry-content blockquote:has(ul > li:only-child > a:only-child) a,
    #content .entry .entry-header .entry-title,
    #content .archive-entry .archive-entry-header .entry-title,
    #box2 .hatena-module .hatena-module-title,
    .breadcrumb-inner > .breadcrumb-child,
    .archive-heading {
        font-weight: 700;
        font-size: 18px;
        line-height: 160%;
        letter-spacing: 0.02em;
    }

    /* Std-16B-170 */
    #title,
    .page-archive span.highlight {
        font-weight: 700;
        font-size: 16px;
        line-height: 170%;
        letter-spacing: 0.02em
    }

    /* Std-16N-170 */
    p, li, dt, dd,
    .search-form input,
    .search-result-form input {
        font-weight: 400;
        font-size: 16px;
        line-height: 170%;
        letter-spacing: 0.02em;
    }

    /* Std-14N-150 */
    #content .entry .entry-header .date,
    #content .entry .entry-header-menu,
    #content .archive-entry .archive-entry-header .archive-date,
    #content .entry-content :not(pre) code,
    #content .entry-content .table-of-contents li a,
    #content .entry-content blockquote:has(ul > li:only-child > a:only-child) a::after,
    #blog-title #blog-description,
    #box2 .hatena-module .hatena-module-body .profile-about {
        font-weight: 400;
        font-size: 14px;
        line-height: 150%;
        letter-spacing: 0.02em;
    }
}

.entry-content > p:last-child,
#main-inner:has(.search-result + p:last-child)::after {
    font-weight: 400;
    font-size: 16px;
    line-height: 170%;
    letter-spacing: 0.02em;
}

/* link */
#container a:not(.heading-anchor-link):not(.hatena-follow-button):not(.entry-share-button) {
    & {
        text-decoration: underline;
    }

    &:link {
        color: var(--color-blue-primary);
    }

    &:visited {
        color: var(--color-purple-tertiary);
    }

    &:hover, &:active {
        color: var(--color-monochrome-dark);
        background-color: var(--color-yellow-primary);
        outline: 2px solid var(--color-monochrome-dark);
        border-radius: 3px;
    }
}

#container .date a,
#container .entry-header .entry-title a,
#container .entry-header-menu a,
#content .archive-entry .archive-entry-header .entry-title a,
#box2 .hatena-module .hatena-module-title a,
#box2 .hatena-module .hatena-module-body .recent-entries-see-more a,
#box2 .hatena-module .hatena-module-body .profile-about a,
#footer a {
    &:link, &:visited {
        color: var(--color-darkgray-tertiary);
    }

    &:hover, &:active {
        color: var(--color-monochrome-dark);
    }
}

#container #title a,
#container .entry-header .entry-title a,
#container .entry-content blockquote:has(ul > li > a:only-child) a {
    &:link, &:visited {
        color: var(--color-mohochrome-dark);
    }

    &:hover, &:active {
        color: var(--color-monochrome-dark);
    }
}

/* prefix border */
.entry-content blockquote {
    & {
        position: relative;
        margin-left: 0;
        padding-left: 1em;
    }

    &::before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3px;
        border-radius: 3px;
    }
}

/*- Layout -*/
#container {
    max-width: calc(16px * 45);
    margin: 0 auto;
}

/*- Header -*/
#container #blog-title {
    text-align: center;
    margin-top: 96px;
    margin-bottom: 96px;
}

/*- Index -*/
.breadcrumb .breadcrumb-inner > :not(.breadcrumb-child) {
    display: none;
}

.archive-heading,
.breadcrumb-inner > .breadcrumb-child,
.entry-content > h1:first-child {
    display: block;
    border-width: 1px 0px;
    border-style: solid;
    border-image: linear-gradient(to left, transparent, var(--color-darkgray-tertiary) 50%, transparent) 1;
    padding: 48px 0;
    margin: 48px 32px;
    text-align: center;
}

.page-archive span.highlight {
    background: unset;
    padding: unset;
    margin: unset;
    color: unset;
    border: unset;
    border-radius: unset;

    text-decoration: underline solid var(--color-yellow-primary) 4px;
}

.search-result + p:last-child,
.entry-content > h1 + p:last-child {
    display: none;
}

.entry-content:has(h1 + p:last-child)::after,
#main-inner:has(.search-result + p:last-child)::after {
    display: block;
    white-space: pre;

    margin: 256px 0 288px 0;
    text-align: center;
}


#main-inner:has(.search-result + p:last-child)::after {
    content: '404 Not Found\A\A該当する記事は見つかりませんでした。\A検索ワードを変えてお試しください。';
}

.entry-content:has(h1 + p:last-child)::after {
    content: '404 Not Found\A\A該当する記事、もしくはページは見つかりませんでした。\AURLが間違っているか、そもそもページがないのかもしれません。';
}

.entry-footer-section > span {
    display: inline-block;
}

/*- Entries -*/
#content .entry .entry-header {
    position: relative;
}

#content .entry .entry-header .date,
#content .archive-entry .archive-entry-header .archive-date {
    & .hyphen {
        display: none;
    }

    & .date-year::after,
    & .date-month::after,
    & .date-day::after {
        display: inline;
    }

    & .date-year::after {
        content: '年';
    }

    & .date-month::after {
        content: '月';
    }

    & .date-day::after {
        content: '日';
    }
}

#content .entry .entry-header .entry-header-menu {
    position: absolute;
    right: 0;
    top: 0;
}

#content .entry .entry-header .entry-title,
#content .archive-entry .archive-entry-header .entry-title {
    margin: 48px 0;
    text-align: center;
}

#content .archive-entry {
    margin-bottom: 256px;
}

#content .archive-entry:last-child {
    margin-bottom: 0;
}

#content .archive-entry .entry-thumb-link {
    display: none;
}

#content .entry,
#content .archive-entry {
    & .categories {
        text-align: center;
        margin: 48px 0;
    }

    & .categories a {
        margin: 0 .125em;
    }
}

#content .archive-entry .archive-entry-body .entry-description {
    margin: 48px 0;
}

#content .entry .entry-tags .entry-tag-link,
#content .archive-entry .archive-entry-body .archive-entry-tags .archive-entry-tag-link {
    & {
        margin: unset;
        padding: unset;
        line-height: unset;
        font-size: unset;
        background-color: unset;
        border: unset;

        border-radius: 3px;
    }

    &:link, &:visited {
        color: var(--color-darkgray-tertiary);
    }

    &:hover, &:active {
        background-color: var(--color-yellow-primary);
        color: var(--color-monochrome-dark);
    }
}

#content .entry .entry-footer .entry-tags .entry-tag,
#content .archive-entry .archive-entry-body .archive-entry-tags .archive-entry-tag {
    & a {
        display: inline;
    }

    & a span {
        margin: 0;
    }
}

#content .entry-footer .entry-footer-section {
    & {
        margin: 32px 0;
    }

    & .user-name-paren,
    & .user-name-hatena-id {
        display: none;
    }

    & > span {
        margin: 0 .25em 0 0;
    }
}

#content .entry-footer .hatena-star-container {
    margin: 32px 0;
}

#content .pager {
    & {
        margin: 128px 0;
        display: flex;
    }

    & .pager-next {
        width: 50%;
        text-align: right;
        margin: 0 0 0 auto;
    }

    & .pager-prev {
        width: 50%;
        text-align: left;
        margin: 0 auto 0 0;
    }
}

.entry-content {
    h1, h2, h3, h4, h5, h6 {
        & {
            margin: 48px 0;
        }
    }

    h2, h3, h4, h5, h6 {
        &::before {
            display: inline-block;
            content: '❱';
            margin-right: calc(1em / 4);
            font-size: calc(1em / 2);
            vertical-align: top;
        }
    }

    h2::before {
        color: var(--color-lightblue-tertiary);
    }

    h3::before {
        color: var(--color-lime-tertiary);
    }

    h4::before {
        color: var(--color-yellow-tertiary);
    }

    h5::before {
        color: var(--color-orange-tertiary);
    }

    h6::before {
        color: var(--color-purple-tertiary);
    }

    p {
        margin-top: 32px;
        margin-bottom: 32px;
    }

    hr {
        margin: 128px 0;
        height: 1px;
        border: none;
        background: linear-gradient(to left, transparent, var(--color-darkgray-tertiary) 50%, transparent);
    }

    blockquote {
        & {
            margin-top: 36px;
            margin-bottom: 36px;
            padding-top: 1px;
            padding-bottom: 1px;
        }

        &::before {
            background-color: var(--color-purple-secondary);
        }

        & > :first-child {
            margin-top: .25em;
        }

        & > :last-child,
        & > :nth-last-child(2) {
            margin-bottom: .25em;
        }
    }

    & > ul,
    & > ol {
        margin-top: 36px;
        margin-bottom: 36px;
    }

    ul, ol {
        margin-left: 1em;
        padding-left: 0;
    }

    .table-of-contents {
        & {
            border-width: 1px 0px;
            border-style: solid;
            border-image: linear-gradient(to left, transparent, var(--color-darkgray-tertiary) 50%, transparent) 1;
            padding: 48px 0;
            margin: 48px 32px;
        }

        &::before {
            display: block;
            content: '目次';
            text-align: center;
            margin-bottom: 48px;
        }

        li {
            list-style-type: decimal;
            list-style-position: inside;
        }
    }

    p, li, dt, dd {
        strong {
            font-weight: bold;
            text-decoration: underline solid var(--color-red-primary) 1px;
        }

        em {
            font-weight: bold;
            font-style: normal;
            text-decoration: underline solid var(--color-yellow-primary) 2px;
        }

        b {
            font-weight: bold;
        }

        i {
            font-style: normal;
            text-decoration: underline solid var(--color-lightblue-primary) 1px;
        }

        dfn {
            font-style: normal;
            text-decoration: underline dotted var(--color-lime-primary) 3px;
        }

        ins {
            text-decoration: underline;
        }

        del {
            text-decoration: line-through solid var(--color-darkgray-tertiary) 1px;
            color: var(--color-darkgray-tertiary);
        }

        s {
            text-decoration: line-through;
            text-decoration-thickness: 2px;
        }

        q {
            text-decoration: underline solid var(--color-purple-primary) 1px;
        }
    }

    :not(pre) code {
        margin: 0 .125em;
        padding: .125em .25em;
        border: 1px solid var(--color-lightgray-primary);
        background-color: var(--color-monochrome-light);
        border-radius: 3.5px;
        font-family: monospace;
    }
    
    pre {
        border: 3px solid var(--color-lightgray-primary);
        background-color: var(--color-monochrome-light);
        border-radius: 8px;
        padding: 8px;
        margin: 64px 0;
    }
    
    .embed-webcard {
        max-width: 100%;
        min-width: 100%;
    }
    
    p img {
        display: block;
        margin:64px auto;
    }
    
    blockquote:has(ul > li > a:only-child) {
        & {
            margin: 0;
            padding: 0;
        }

        &::before {
            display: none;
        }

        & ul,
        & li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        & .requote-button {
            display: none !important;
        }

        & a {
            & {
                display: block;
                padding: 24px;
                margin: 32px 0;
                border: 4px solid var(--color-lightgray-primary);
                background-color: var(--color-monochrome-light);
                
                text-decoration: none !important;
            }
            
            &:link, &:visited, &:hover, &:active {
                border-radius: 12px  !important;
            }
            
            &:hover::before, &:active::before {
                background-color: var(--color-yellow-primary);
            }
            
            &::after {
                display: block;
                content: attr(href);
                margin-top: 10px;
                margin-left: 18px;
                color: var(--color-lime-tertiary);
                text-decoration: none ;
                position: relative;
            }
            
            &::before {
                position: absolute;
                content: '';
                display: block;
                background-color: var(--color-monochrome-light) ;
                width: 18px;
                height: 14px;
                bottom: 32px;
                left: 28px;
                z-index: 1;
            }
            
            &[href^="#http"] {
                & {
                    pointer-events: none;
                    opacity: .5;
                }
                
                &::after {
                    margin-left: 11px ;
                }
            }
        }
    }
}

.search-result-form {
    & {
        border: unset;
        border-radius: unset;
        background: unset;
        max-width: unset;
        box-sizing: unset;
        position: unset;
    }

    & .search-result-input {
        box-sizing: unset;
        color: unset;
        background: unset;
        outline: unset;
        height: unset;
    }

    & .search-result-button {
        position: unset;
        height: unset;
        background: unset;
        outline: unset;
        text-indent: unset;
        opacity: unset;
    }
}

.search-form, .search-result-form {
    & {
        display: flex;
    }

    input {
        & {
            border-radius: 6px;
        }

        &[type="text"] {
            & {
                width: 100%;
                margin-right: .25em;
                padding: 8px;
                border: 2px solid var(--color-lightgray-primary);
                background-color: var(--color-monochrome-light);
            }

            &:hover, &:focus {
                border-color: var(--color-yellow-primary);
                outline: 2px solid var(--color-monochrome-dark);
            }
        }

        &[type="submit"] {
            & {
                width: 4em;
                padding: 8px;
                border: 2px solid var(--color-blue-primary);

                background-color: var(--color-blue-primary);
                color: var(--color-monochrome-light);
            }

            &:hover {
                border-color: var(--color-blue-secondary);
                background-color: var(--color-blue-secondary);
                color: var(--color-monochrome-light);
                text-decoration: underline;
            }

            &:focus {
                border-color: var(--color-yellow-primary);
                outline: 2px solid var(--color-monochrome-dark);
            }
        }
    }
}

/*- Secondary content -*/
#box2 .hatena-module {
    .hatena-module-title {
        margin: 48px 0;
    }

    .hatena-module-title::before {
        display: inline-block;
        content: '❱';
        margin-right: calc(1em / 4);
        font-size: calc(1em / 2);
        vertical-align: top;

        color: var(--color-lightblue-tertiary);
    }

    .hatena-module-body ul {
        margin-left: 1em;
        padding-left: 0;
    }

    &.hatena-module-profile .hatena-module-body {
        .profile-icon {
            display: block;
            border: 3px solid var(--color-lightgray-primary);
            border-radius: 8px;
            margin: 0 auto;
        }

        .profile-icon-link,
        .profile-activities,
        .hatena-follow-button-box,
        .profile-about {
            display: block;
            width: calc(16px * 9);
            text-align: center;
        }

        .profile-icon-link {
            padding: calc(((16px * 7) - 70px) / 2) 0;
        }

        .profile-activities {
            font-style: normal;
        }

        .profile-description {
            margin-left: calc(16px * 9);
            margin-top: calc(((16px * 8) - 3px) * -1);
            margin-bottom: calc(((16px * 4.5) - 3px));
            padding-left: 1em;
        }

        .hatena-follow-button-box {
            padding-left: 18px;
        }

        .profile-about {
            margin-top: 10px;
        }
    }
}

/*- Footer -*/
#footer {
    text-align: center;
    margin: 96px 0;
}

/*- Mobile View -*/
@media screen and (max-width: 744px) {
    #container {
        padding: 0 24px;
    }
}

@media screen and (max-width: 372px) {
    #content .archive-entry {
        margin-bottom: 128px;
    }
    
    #box2 .hatena-module .hatena-module-body {
        .profile-icon-link,
        .profile-activities,
        .hatena-follow-button-box,
        .profile-about {
            margin-left: auto;
            margin-right: auto;
        }
        
        .profile-description {
            margin: 32px 0 !important;
        }
    }
}

/*- faviconator -*/
.entry-content blockquote:has(ul > li > a:only-child) a {
    &::before {
        background-image: url("https://icons.duckduckgo.com/ip3/");
        background-repeat: no-repeat;
        background-size: 14px 14px; 
    }
    
    &[href^="https://www.amazon.co.jp/"]::before { background-image: url("https://icons.duckduckgo.com/ip3/amazon.co.jp.ico"); }
}