@charset "UTF-8";
/* CSS Document */
/*--------------------------------------------*/

section#newsITEM { padding-block-start: 0; }

/* =========== ITEM 個別のページ =========== */
/* COMMON HEADER ///////////////////////////////////*/

#COMMON { border-bottom: 1px solid var(--color__gray-50); }

.breadcrumb { padding: 10px 0; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; gap: 10px; align-items: center; display: flex; flex-wrap: wrap; }
.breadcrumb li { font-size: 14px; color: var(--color__gray-400); }
.breadcrumb li:not(:last-child)::after { content: ">"; margin-left: 10px; color: var(--color__gray-400); }
.breadcrumb a { color: var(--color__gray-400); text-decoration: none; transition: color 0.3s ease; }
.breadcrumb a:hover { color: var(--color__accent-yellow); }

.btn-back { display: inline-flex; align-items: center; gap: 8px; background-color: transparent; color: var(--color__gray-400); text-decoration: none; font-size: 14px; transition: all 0.3s ease; position: relative; margin-bottom: 20px; }
.btn-back::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background-color: var(--color__accent-yellow); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.btn-back:hover { color: var(--color__accent-yellow); }
.btn-back:hover::after { transform: scaleX(1); }
.btn-back .arrow { font-size: 1em; font-weight: bold; }

/* H2 CUSTOM ///////////////////////////////////*/
section h2 { font-size: 50px; line-height: 1em; position: relative; display: inline-block; letter-spacing: 0.05em; color: var(--color__gray-50); margin-bottom: 25px; }

/* H3 CUSTOM ///////////////////////////////////*/
section h3 { font-size: 1.5em; line-height: 1.4em; position: relative; display: inline-block; letter-spacing: inherit; color: var(--color__gray-50); margin: 40px 0 20px 0; padding-left: 10px; border-left: 4px solid var(--color__primary-red); }
section h3::before { content: ''; position: absolute; left: -4px; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, var(--color__primary-red), rgba(184, 28, 34, 0.3)); }
section h3::after { display: none; content: ""; }

.inner img { margin-top: 20px; margin-bottom: 50px; }
.inner h3  { margin-top: 10px; margin-bottom: 10px; text-wrap: auto; }
.inner p   { margin-top: 10px; margin-bottom: 10px; }

.btn a { display: inline-block; padding: 10px 20px; background-color: var(--color__accent-yellow); color: var(--color__black); text-decoration: none; border-radius: 5px; margin-top: 20px; margin-bottom: 20px; transition: all 0.3s ease; }
.btn a::after { display: inline-block; content: "→"; margin-left: 10px; }
.btn a:hover { background-color: var(--color__gray-50); }

/* =========== TABLE OF CONTENTS =========== */
.toc-container { background-color: rgba(34, 34, 34, 0.9); border: 1px solid var(--color__gray-400); padding: 20px; margin-bottom: 30px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); }
.toc-title { color: var(--color__gray-50); font-size: 18px; margin: 0 0 20px 0; text-align: left; font-weight: bold; padding-bottom: 12px; border-bottom: 2px solid var(--color__primary-red); }
.toc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.toc-list li { margin: 0; }
.toc-list a { color: var(--color__gray-50); text-decoration: none; font-size: 14px; line-height: 1.4; display: block; padding: 12px 16px; border: 1px solid var(--color__gray-500); transition: all 0.3s ease; background-color: rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; }
.toc-list a::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, var(--color__primary-red), rgba(184, 28, 34, 0.8)); transition: left 0.3s ease; z-index: -1; }
.toc-list a:hover { color: var(--color__white); border-color: var(--color__primary-red); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(184, 28, 34, 0.3); }
.toc-list a:hover::before { left: 0; }

@media screen and (max-width: 767px) {
  .toc-container { position: static; transform: none; max-width: 100%; max-height: none; margin-bottom: 20px; right: auto; }
}

/* =========== PROGRESS INDICATOR =========== */
/* TOP BAR ///////////////////////////////////*/
#progressBar { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background-color: var(--color__primary-red); transform: scaleX(0); transform-origin: left center; z-index: 9999; transition: transform 0.05s linear; pointer-events: none; }

/* BADGE ///////////////////////////////////*/
#progressBadge { position: fixed; bottom: 32px; right: 28px; z-index: 9998; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background-color: rgba(34, 34, 34, 0.85); border: 1px solid rgba(184, 28, 34, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--dot); font-size: 11px; color: var(--color__gray-50); letter-spacing: 0.08em; pointer-events: none; opacity: 1; transition: opacity 0.5s ease, transform 0.5s ease; }
#progressBadge::before { content: 'READ'; font-size: 9px; color: var(--color__primary-red); letter-spacing: 0.2em; opacity: 0.8; }
#progressBadgeFill { color: var(--color__primary-red); }
#progressBadgeLabel { color: var(--color__gray-50); min-width: 3ch; text-align: right; }
#progressBadge.is-complete { opacity: 0; transform: translateY(8px); }
@media screen and (max-width: 767px) { #progressBadge { bottom: 20px; right: 16px; font-size: 10px; padding: 6px 10px; } }

/* =========== SCROLL TO TOP BUTTON =========== */
#scrollToTop { position: fixed; bottom: 90px; right: 28px; z-index: 9997; width: 45px; height: 45px; background-color: rgba(34, 34, 34, 0.85); border: 1px solid rgba(184, 28, 34, 0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#scrollToTop.visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
#scrollToTop:hover { background-color: var(--color__primary-red); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(184, 28, 34, 0.3); }
#scrollToTop::before { content: '↑'; color: var(--color__gray-50); font-size: 18px; font-weight: bold; line-height: 1; }
@media screen and (max-width: 767px) { #scrollToTop { bottom: 55px; right: 16px; width: 40px; height: 40px; } #scrollToTop::before { font-size: 16px; } }