/*--color--*/
:root {
    --primary-color: #0F2540;
    --secondary-color: white;
    --accent-color: #ffc408;
    /* 前景色(文字・アイコン等)と背景色。ライト/ダークで入れ替わる */
    --fg-color: var(--primary-color);
    --bg-color: var(--secondary-color);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fg-color: var(--secondary-color);
        --bg-color: var(--primary-color);
    }
}

/* data-theme属性はJSによる手動切り替え用。OS設定より優先する */
:root[data-theme="light"] {
    --fg-color: var(--primary-color);
    --bg-color: var(--secondary-color);
}

:root[data-theme="dark"] {
    --fg-color: var(--secondary-color);
    --bg-color: var(--primary-color);
}

/*--color--*/

/*--view-transition--*/
/* 対応ブラウザ(Chrome/Edge)ではページ遷移時にクロスフェードする。未対応ブラウザは通常の遷移のまま */
@view-transition {
    navigation: auto;
}

/*--view-transition--*/

/*--typography--*/
:root {
    --font-size-heading: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
    --font-size-body: clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem);
    --font-size-nav: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
    --font-size-small: clamp(1rem, calc(0.85rem + 0.4vw), 1.3rem);
}

/*--typography--*/

/*--spacing--*/
:root {
    /* セクション余白の基準値。デスクトップは--space-sectionへ切り替わる(min-width: 767.98px) */
    --space-section-mobile: 2.5%;
    --space-section: 25px;
    --space-xs-mobile: 0.5%;
    --space-xs: 5px;
}

/*--spacing--*/

/*--init--*/
html {
    cursor: default;
    line-height: 1.5;
    word-break: break-word;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    width: 100%;
}

html {
    min-height: 100vh;
    /* モバイルのアドレスバー等を除いた実際の表示領域に合わせる(未対応ブラウザは上のvhにフォールバック) */
    min-height: 100dvh;
}

html {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--fg-color);
    background-color: var(--bg-color);
    font-size: 62.5%;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/*--init--*/

/*--default--*/
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    font-size: var(--font-size-heading);
    margin: 0;
    text-align: left;
    color: var(--fg-color);
}

p {
    font-weight: 400;
    font-size: var(--font-size-body);
    margin: 0;
    text-align: left;
    color: var(--fg-color);
}

ol,
ul,
dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul,
nav ol,
nav ul,
nav ol li,
nav ul li {
    font-size: var(--font-size-nav);
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

a {
    text-decoration: none;
    transition: color 0.3s;
    cursor: pointer;
    text-align: left;
}

a:link,
a:visited {
    color: var(--fg-color);
}

a:active,
a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

img {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    user-select: none;
}

/*--default--*/

/*--loading-bar--*/
#loading-bar-container {
    width: 100%;
    height: 5px;
    background-color: var(--bg-color);
    position: fixed;
    z-index: 9999;
}

#loading-bar-contents {
    width: 0;
    height: 100%;
    background-color: var(--fg-color);
    transition: width 0.3s ease;
}

/*--loading-bar--*/

/*--offline-banner--*/
#offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 1em;
    background-color: var(--accent-color);
    color: var(--primary-color);
    text-align: center;
    font-size: var(--font-size-small);
    z-index: 10000;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

#offline-banner.is-visible {
    transform: translateY(0);
}

/*--offline-banner--*/

/*--menu--*/
#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(15, 37, 64, 0.8), rgba(15, 37, 64, 1));
    z-index: 9997;
    display: none;
}

#menu-list {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    text-align: center;
    display: none;
    z-index: 9998;
}

#menu-list li {
    text-align: center;
}

#menu-list a {
    color: var(--secondary-color);
}

#menu-list a:hover {
    color: var(--accent-color);
}

#theme-toggle-menu-item {
    margin-bottom: 1.2em;
    opacity: 0.6;
    transition: opacity 0.3s;
}

#theme-toggle-menu-item:hover {
    opacity: 1;
}

#theme-toggle-button {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
}

#theme-toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 3em;
    height: 1.6em;
    padding: 0 0.35em;
    box-sizing: border-box;
    border: 1px solid var(--secondary-color);
    border-radius: 999px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

#theme-toggle-button:hover #theme-toggle-switch {
    opacity: 1;
}

#theme-toggle-switch svg {
    position: relative;
    z-index: 1;
    fill: var(--secondary-color);
}

#theme-toggle-switch-thumb {
    position: absolute;
    top: 50%;
    left: 0.15em;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background: var(--accent-color);
    transform: translate(0, -50%);
    transition: transform 0.3s ease;
}

#theme-toggle-switch.is-dark #theme-toggle-switch-thumb {
    transform: translate(1.4em, -50%);
}

/*--menu--*/

/*--header--*/
header {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: calc(var(--space-section-mobile) * 2) var(--space-section-mobile);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    fill: var(--fg-color);
    color: var(--fg-color);
    background-color: var(--bg-color);
    transition: transform 0.3s ease;
}

/* 下スクロール中は隠し、上スクロールで流れてくるように表示する */
header.header-hidden {
    transform: translateY(-100%);
}

@media (min-width: 767.98px) {
    header {
        padding: var(--space-section);
        max-width: 1100px;
    }
}

header h1 {
    padding-left: 3%;
}

@media (min-width: 767.98px) {
    header h1 {
        padding-left: 10px;
    }
}

#header-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

#menu-button {
    margin: 0;
    padding-right: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 767.98px) {
    #menu-button {
        padding-right: 10px;
    }
}

#menu-button svg {
    fill: var(--fg-color);
    transition: color 0.3s;
    cursor: pointer;
}

#menu-button svg:hover {
    fill: var(--accent-color);
}

#theme-toggle-icon-button {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#theme-toggle-icon-button svg {
    fill: var(--fg-color);
    transition: color 0.3s;
}

#theme-toggle-icon-button:hover svg {
    fill: var(--accent-color);
}

/*--header--*/

/*--footer--*/
footer {
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    padding: calc(var(--space-section-mobile) * 1) 0% calc(var(--space-section-mobile) * 1) 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    fill: var(--fg-color);
    color: var(--fg-color);
    background-color: var(--bg-color);
}

@media (min-width: 767.98px) {
    footer {
        padding: calc(var(--space-section) * 1) 0px calc(var(--space-section) * 1) 0px;
    }
}

#social-icons {
    display: flex;
    justify-content: space-between;
    fill: var(--fg-color);
    background-color: transparent;
}

#social-icons a {
    margin: 1rem;
}

#social-icons a:hover {
    fill: var(--accent-color);
}

footer hr {
    margin: var(--space-xs-mobile) auto;
    width: 98%;
    border: none;
    height: 1px;
    background: var(--accent-color);
}

@media (min-width: 767.98px) {
    footer hr {
        margin: var(--space-xs) auto;
    }
}

footer p {
    opacity: 0.75;
    color: var(--fg-color);
}

/*--footer--*/

/*--main-common--*/
main {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--space-section-mobile);
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    justify-content: flex-start;
    color: var(--fg-color);
    background-color: transparent;
}

@media (min-width: 767.98px) {
    main {
        padding: var(--space-section);
        max-width: 1000px;
    }
}

.container {
    position: relative;
    padding: var(--space-section-mobile);
    margin: 0 auto;
    align-items: center;
    text-align: center;
    max-height: 100%;
}

@media (min-width: 767.98px) {
    .container {
        padding: var(--space-section) 10px;
    }
}

/*--main-common--*/

/*--img-interactive--*/
/* 画像のインタラクションを許可する場合にこのクラスを付与する */
img.img-interactive {
    pointer-events: initial;
    -webkit-touch-callout: initial;
    -webkit-user-select: initial;
    -moz-touch-callout: initial;
    -moz-user-select: initial;
    user-select: initial;
}

/*--img-interactive--*/

/*--breadcrumb--*/
.breadcrumb {
    width: 100%;
    text-align: left;
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumb li {
    display: flex;
    align-items: center;
    font-size: var(--font-size-small);
    opacity: 0.75;
}

.breadcrumb li:not(:last-child)::after {
    content: "›";
    margin: 0 0.5em;
}

.breadcrumb li[aria-current="page"] {
    opacity: 1;
}

/*--breadcrumb--*/

/*--article-nav--*/
.article-nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1em;
    text-align: left;
}

.article-nav .prev,
.article-nav .next {
    display: flex;
    flex-direction: column;
    max-width: 48%;
}

.article-nav .next {
    text-align: right;
    margin-left: auto;
}

.article-nav .direction-label {
    font-size: var(--font-size-small);
    opacity: 0.6;
}

/*--article-nav--*/

/*--favorite-button--*/
.favorite-button {
    align-self: flex-start;
    margin: 1.5em 0;
    padding: 0.4em 0.9em;
    border: 1px solid var(--fg-color);
    border-radius: 999px;
    background: transparent;
    color: var(--fg-color);
    font-size: var(--font-size-small);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.favorite-button:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.favorite-button.is-active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--primary-color);
}

.favorite-icon-button {
    position: relative;
    margin: 0;
    padding: 0.2em;
    border: none;
    background: transparent;
    font-size: 1.8em;
    line-height: 1;
    color: var(--fg-color);
    opacity: 0.4;
    cursor: pointer;
    transition: color 0.3s, opacity 0.3s;
}

.favorite-sparkle {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translate(-50%, 0) scale(0.6);
    font-size: 7px;
    color: var(--accent-color);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

.is-sparkling .favorite-sparkle {
    animation: favorite-sparkle-pop 0.5s ease-out;
}

@keyframes favorite-sparkle-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, 0.2em) scale(0.5);
    }

    45% {
        opacity: 1;
        transform: translate(-50%, -0.5em) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -0.8em) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .is-sparkling .favorite-sparkle {
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .favorite-icon-button {
        font-size: 1.1em;
    }

    .favorite-sparkle {
        font-size: 14px;
        font-weight: bold;
    }
}

.favorite-icon-button:hover {
    color: var(--accent-color);
    opacity: 0.8;
}

.favorite-icon-button.is-active {
    color: var(--accent-color);
    opacity: 1;
}

/*--favorite-button--*/

/*--scroll-reveal--*/
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/*--scroll-reveal--*/