/* WCAG 2.2 A/AA + enhanced contrast, keyboard and motion support. */
:root { --bs-link-color: #00396f; --bs-link-hover-color: #00294f; }
body { color: #222; background: #fff; line-height: 1.6; }
a { color: #00396f; text-underline-offset: .2em; }
main a:not(.btn) { text-decoration: underline; }
main a:hover, main a:focus-visible { color: #00274d; }
.text-muted, .text-secondary, .card-text, .news_list .news_date, .game-details ul li { color: #474747 !important; }
.text-primary, .service-icon, .price-text .h3 { color: #00396f !important; }
.bg-primary, .badge.bg-primary { background-color: #00396f !important; color: #fff !important; }
.bg-secondary { background-color: #444 !important; color: #fff !important; }
.btn-primary { --bs-btn-bg: #00396f; --bs-btn-border-color: #00396f; background-color: #00396f; border-color: #00396f; color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background-color: #00274d; border-color: #00274d; color: #fff; }
.btn-outline-primary { --bs-btn-color: #00396f; --bs-btn-border-color: #00396f; --bs-btn-hover-bg: #00396f; --bs-btn-active-bg: #00396f; --bs-btn-active-border-color: #00396f; color: #00396f; border-color: #00396f; }
.btn-outline-primary.active, .btn-outline-primary:hover, .btn-outline-primary:focus-visible { color: #fff; background: #00396f; border-color: #00396f; }
.btn-outline-secondary { color: #383838; border-color: #555; }
.btn, button, summary, .site-header .nav-link, .site-footer a { min-height: 44px; }
button, .btn, summary { touch-action: manipulation; }
.btn, .site-footer a { display: inline-flex; align-items: center; justify-content: center; }
.site-footer a { display: flex; justify-content: flex-start; }
.site-header .navbar-toggler { min-width: 44px; height: 44px; margin: 0; }
.site-header .navbar-collapse { max-width: 100%; }
.site-header .nav-link { display: flex; align-items: center; }
.site-header .nav-link[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible { outline: 3px solid #000 !important; outline-offset: 3px; box-shadow: 0 0 0 6px #fff !important; }
.site-header :focus-visible, .site-footer :focus-visible, .header-caption :focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 6px #000 !important; }
:target, :focus { scroll-margin-top: calc(var(--site-header-height) + 20px); scroll-margin-bottom: 24px; }
.skip-link { position: fixed; left: 12px; top: 8px; z-index: 2000; transform: translateY(-200%); padding: 10px 16px; background: #fff; color: #00274d; font-weight: bold; }
.skip-link:focus { transform: translateY(0); }
#main-content:focus { outline: none; }
#main-content { min-width: 0; }
main img { max-width: 100%; height: auto; }
main p, main li, main dd, main a, main h1, main h2, main h3 { overflow-wrap: anywhere; }
main pre { max-width: 100%; overflow-x: auto; }
.blog-post-header { padding: 25px 0; display: flex; align-items: center; min-height: 300px; }
.blog-post-header > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-post-header .header-caption { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin: 0 auto; }
.blog-post-header::after { background: rgba(0,0,0,.82); }
.header-quote-original { opacity: 1; }
.header-quote figcaption a { display: inline-flex; min-height: 44px; align-items: center; padding: 4px 8px; }
.header-caption a, .header-caption a:hover { color: #fff; }
.news_list > ul > li { align-items: start; min-height: 44px; line-height: 1.5; }
.news_list .news_date { line-height: 1.6; padding-top: 10px; }
.news-content > a { display: inline-flex; min-height: 44px; align-items: center; }
.news_list > ul > li { padding-top: 0; padding-bottom: 0; }
.news-content > a + a { margin-left: 8px; }
.news-content { align-self: center; }
.accessible-table { overflow-x: auto; margin-bottom: 1.5rem; max-width: 100%; }
.accessible-table table { min-width: 32rem; }
.accessible-table caption { color: #333; caption-side: top; font-weight: 600; }
.table > :not(caption) > * > * { color: #222; }
.unavailable-link { display: inline-block; color: #444; padding: 8px 0; }
.display-options { margin: 1rem 0; }
.display-options summary { cursor: pointer; padding: 8px 0; }
.display-options-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; }
.display-options button { padding: 8px 12px; color: #fff; background: #161616; border: 2px solid #aaa; border-radius: 4px; }
.display-options button[aria-pressed=true] { color: #000; background: #fff; border-color: #fff; }
.readable-mode { font-size: 125%; }
.readable-mode main :is(p,li,dd) { line-height: 1.8 !important; letter-spacing: .035em; }
.readable-mode main p { max-width: 40em; }
.game-skip { display: block; min-height: 44px; padding-top: 10px; }
.game-page-title { padding-top: 24px; }
.card:hover, .btn:hover, .fade-in { transform: none !important; animation: none !important; }
@media (max-width: 991.98px) {
    .site-header .navbar-collapse { max-height: calc(100dvh - 44px); }
}
@media (max-width: 575.98px) {
    .news_list > ul > li { grid-template-columns: 5.5rem minmax(0,1fr); }
    .news-content > a + a { margin-left: 0; }
    .blog-post-title, h1 { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    a { color: LinkText !important; }
    :focus-visible { outline: 3px solid Highlight !important; }
    .btn,button { border: 2px solid ButtonText; }
    .blog-post-header::after { background: Canvas; }
}

.portfolio-item dd { color: #474747; }
.portfolio-item .card-body > div.row > a, .portfolio-item .card-body > dl a { display: flex; align-items: center; min-height: 44px; }
.news_list > :is(h2,h3) { margin: 0 0 .5rem; font-size: 1.2rem; font-weight: 600; }
main p { max-width: 40em; }
.header-caption p { margin-left: auto; margin-right: auto; }
.display-options select { min-height: 44px; padding: 6px 10px; border: 2px solid #aaa; color: #111; background: #fff; }
.display-options label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html[data-color-theme=paper] body, html[data-color-theme=paper] main .card { background-color: #fff5d6; color: #222; }
html[data-color-theme=dark] body, html[data-color-theme=dark] main .card { background-color: #111; color: #f5f5f5; }
html[data-color-theme=dark] main :is(h1,h2,h3,h4,h5,p,li,dd,dt,th,td,caption), html[data-color-theme=dark] .text-muted, html[data-color-theme=dark] .card-text, html[data-color-theme=dark] .news_date { color: #f5f5f5 !important; }
html[data-color-theme=dark] main a:not(.btn), html[data-color-theme=dark] .text-primary { color: #c6e0ff !important; }
html[data-color-theme=dark] main :is(a,p,li,tr,h1,h2,h3,h4,.card):has(a:hover), html[data-color-theme=dark] main a:hover, html[data-color-theme=dark] main :is(li,.card):has(a:focus-visible) { background-color: #223b58; }
html[data-color-theme=dark] .btn-outline-primary { color: #c6e0ff; border-color: #c6e0ff; }
html[data-color-theme=dark] .table { --bs-table-bg: #111; --bs-table-striped-bg: #222; --bs-table-color: #f5f5f5; --bs-table-striped-color: #f5f5f5; }
.readable-mode main p { margin-bottom: 2em; }

.game-showcase > .container > .row { --bs-gutter-x: 1.5rem; }
.portfolio-item .card-body > div.row > a + br { display: none; }

.site-header { min-height: 44px; }
.news_list .news_date { color: #333 !important; }

.site-glossary { max-width: 40em; }
.site-glossary dt { margin-top: .75rem; }

html[data-color-theme=dark] .unavailable-link { color: #f5f5f5; }

html[data-color-theme=dark] main strong { color: #f5f5f5; }

/* 名言のないページでは写真そのものの明るさを保つ。 */
.blog-post-header:not(.home-hero)::after { background: transparent; }
.blog-post-header:not(.home-hero) .header-caption { width: auto; max-width: 90%; padding: 12px 20px; background-color: rgba(0, 0, 0, .85); border-radius: 4px; }
.blog-post-header:not(.home-hero) .header-caption > :is(h1,h2,p) { margin: 0 !important; }

/* ヘッダー内の文字を従来の約2/3に調整。 */
.header-caption h1 { font-size: calc(1.375rem * 2 / 3 + 1.5vw * 2 / 3); }
.header-caption .blog-post-title { font-size: 1.6667rem; }
.header-caption .header-quote [data-quote-text] { font-size: clamp(.7333rem, 1.5333vw, 1.2rem); }
.header-caption .header-quote-original, .header-caption .header-quote figcaption { font-size: .5667rem; }
@media (min-width: 1200px) { .header-caption h1 { font-size: 1.6667rem; } }
@media (max-width: 992px) { .header-caption .blog-post-title { font-size: 1.3333rem; } }

/* h5相当のカード見出しを本文と同程度の読みやすいサイズに。 */
.card-title.h5, h5.card-title { font-size: 1rem; line-height: 1.5; }

/* カード本文の文字サイズを従来の約2/3に。 */
.card-text { font-size: .6667rem; }

/* ブログのヘッダー写真を切り替える操作。 */
.header-photo-controls { position: absolute; z-index: 2; right: 16px; bottom: 16px; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; max-width: calc(100% - 32px); padding: 8px 12px; background: rgba(0,0,0,.88); color: #fff; border-radius: 4px; }
.header-photo-controls[hidden] { display: none !important; }
.header-photo-hint { font-size: .8rem; line-height: 1.5; }
.header-photo-button { min-height: 44px; padding: 8px 12px; font-size: .875rem; color: #fff; background: #00396f; border: 2px solid #fff; border-radius: 4px; }
.header-photo-button:hover { background: #00274d; }
.header-photo-button:focus-visible { outline: 3px solid #fff !important; box-shadow: 0 0 0 6px #000 !important; }
.header-photo-button:disabled { cursor: wait; }
@media (max-width: 575.98px) {
    .header-photo-controls { right: 12px; bottom: 12px; max-width: calc(100% - 24px); }
}

/* 写真切り替えはアイコンのみを表示。 */
.header-photo-controls { padding: 0; background: transparent; }
.header-photo-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 1.5rem; line-height: 1; }

/* 写真切り替え：黒い約29pxの見た目と44pxの操作領域。 */
.header-photo-button { position: relative; isolation: isolate; width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; font-size: 1rem; }
.header-photo-button::before { content: ""; position: absolute; z-index: -1; width: 29px; height: 29px; border: 1px solid #fff; border-radius: 3px; background: #000; }
.header-photo-button:hover, .header-photo-button:focus-visible { background: transparent; }
.header-photo-button:hover::before { background: #202020; }

.quote-controls { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; color: #fff; }
.quote-controls small { font-size: .75rem; line-height: 1.5; }
.quote-reload-button[hidden] { display: none !important; }

/* 名言の案内と切り替え操作は写真の右下へ。 */
.home-hero { padding-bottom: 72px; }
.home-hero .quote-controls { position: absolute; z-index: 2; right: 16px; bottom: 8px; max-width: calc(100% - 32px); justify-content: flex-end; margin: 0; gap: 4px; text-align: right; }
.home-hero .quote-controls small { font-size: .7rem; line-height: 1.5; }
@media (max-width: 575.98px) {
    .home-hero .quote-controls { right: 12px; bottom: 8px; max-width: calc(100% - 24px); }
}

/* サービス一覧：カード内と列間の余白を抑える。 */
.services .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.services .service-card { padding: 1rem; }
.services .service-card .card-body { padding: 1rem !important; }
.services .service-icon { margin-bottom: 1rem !important; }
.services .service-card ul { margin-top: 1rem !important; font-size: .6667rem; line-height: 1.6; }
.services .service-card li { margin-bottom: .25rem; }

/* サービスのお問い合わせ欄の文字を従来の3/4に。 */
.services .service-contact h2 { font-size: calc((1.3rem + .6vw) * .75); }
.services .service-contact p { font-size: .75rem; }
.services .service-contact .btn { font-size: .9375rem; }
@media (min-width: 1200px) { .services .service-contact h2 { font-size: 1.3125rem; } }

/* お問い合わせ欄は文章の幅を保ったまま枠ごと中央へ。 */
.services .service-contact p { margin-left: auto; margin-right: auto; text-align: center; }