@charset "UTF-8";
/* wp-blocks.css */
.screen-reader-text {
word-wrap: normal !important;
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-break: normal !important;
}
.screen-reader-text:focus {
background-color: #ddd;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
.wp-block-latest-posts.wp-block-latest-posts__list li {
clear: both;
overflow-wrap: break-word;
}
/* tokens.css */
:root {
--abyss:   #020810;
--deep:    #050D1A;
--ocean-1: #071A35;
--ocean-2: #0A2647;
--glow-blue: #4FC3F7;
--glow-teal: #26D0CE;
--glow-soft: #B3E5FC;
--glow-blue-a12: rgba(79, 195, 247, 0.12);
--glow-blue-a20: rgba(79, 195, 247, 0.20);
--glow-blue-a30: rgba(79, 195, 247, 0.30);
--glow-teal-a08: rgba(38, 208, 206, 0.08);
--glow-teal-a20: rgba(38, 208, 206, 0.20);
--text-strong: #F4FAFF;
--text-primary: #E8F4FF;
--text-body:  #CFE3F3;
--text-muted: #7EB5D6;
--text-dim:   #5A88A8;
--card-bg:           rgba(7, 26, 53, 0.60);
--card-border:       rgba(79, 195, 247, 0.14);
--card-hover-border: rgba(79, 195, 247, 0.35);
--header-bg:         rgba(5, 13, 26, 0.92);
--font-round: 'M PLUS Rounded 1c', sans-serif;
--font-body:  'Zen Kaku Gothic New', sans-serif;
--font-title: 'Zen Maru Gothic', sans-serif;
--font-serif: 'DM Serif Display', serif;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-pill: 999px;
--shadow-glow-sm: 0 0 20px rgba(79, 195, 247, 0.10);
--shadow-glow-md: 0 0 40px rgba(79, 195, 247, 0.15);
--shadow-card:    0 4px 24px rgba(2, 8, 16, 0.60);
--shadow-title:   0 0 40px rgba(79, 195, 247, 0.35);
--ease-float: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--dur-fast: 0.22s;
--dur-mid:  0.40s;
}
/* article.css */
.wa-article {
font-family: var(--font-body);
font-size: 17px;
line-height: 2;
color: var(--text-body);
overflow-wrap: anywhere;
}
.wa-article p {
margin: 0 0 1.8em;
letter-spacing: 0.03em;
text-wrap: pretty;
}
.wa-article h2 {
margin: 96px 0 40px;
padding: 0.65em 1em 0.65em 1.3em;
font-size: clamp(22px, 3vw, 29px);
font-weight: 800;
line-height: 1.42;
font-feature-settings: 'palt';
word-break: auto-phrase;
color: var(--text-strong);
background: var(--glow-blue-a12);
border: none;
border-left: 3px solid var(--glow-teal);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
box-shadow: inset 3px 0 0 var(--glow-teal);
}
.wa-article > h2:first-child { margin-top: 0; }
.wa-article h3 {
margin: 56px 0 24px;
padding: 0 0 10px;
font-size: clamp(18px, 3.4vw, 21px);
font-weight: 800;
line-height: 1.5;
color: var(--text-primary);
background: none;
border: none;
border-bottom: 1px solid var(--card-border);
}
.wa-article h3::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
margin: 0 12px 3px 2px;
border-radius: 50%;
background: var(--glow-teal);
box-shadow: 0 0 10px var(--glow-teal);
}
.wa-article strong { color: var(--text-primary); font-weight: 800; }
.wa-article a {
color: var(--glow-blue);
text-decoration: underline;
text-decoration-color: var(--glow-blue-a30);
text-underline-offset: 4px;
}
.wa-article a:hover { color: var(--glow-teal); text-decoration-color: var(--glow-teal); }
.wa-article ul,
.wa-article ol {
margin: 0 0 1.8em;
padding-left: 1.6em;
}
.wa-article li { margin-bottom: 0.5em; }
.wa-article li::marker { color: var(--glow-teal); font-weight: 700; }
.wa-article hr {
margin: 80px auto;
width: 60px;
height: 3px;
border: none;
background: linear-gradient(90deg, var(--glow-teal), transparent);
}
.wa-article blockquote {
margin: 48px 0;
padding: 24px 30px;
color: var(--text-muted);
background: var(--glow-teal-a08);
border: none;
border-left: 3px solid var(--glow-teal);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.wa-article blockquote p:last-child { margin-bottom: 0; }
.wa-article blockquote::before,
.wa-article blockquote::after { content: none; }
.wa-article .wa-table {
margin: 48px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-color: var(--glow-blue-a30) transparent;
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
background: var(--ocean-1);
}
.wa-article table {
width: max-content;
min-width: 100%;
margin: 0;
border-collapse: collapse;
font-size: 15px;
line-height: 1.7;
}
.wa-article th,
.wa-article td {
padding: 12px 18px;
text-align: left;
vertical-align: top;
white-space: nowrap;
border: none;
border-bottom: 1px solid var(--card-border);
}
.wa-article th {
color: var(--glow-blue);
font-weight: 800;
background: var(--glow-blue-a12);
}
.wa-article tr:last-child td { border-bottom: none; }
.wa-article tr:nth-child(even) td { background: rgba(10, 38, 71, 0.35); }
.wa-article code {
padding: 2px 6px;
font-size: 0.9em;
color: var(--glow-soft);
background: var(--glow-blue-a12);
border-radius: 4px;
}
.wa-article .wa-em {
color: var(--glow-blue);
font-weight: 800;
text-shadow: 0 0 10px rgba(79, 195, 247, 0.20);
}
.wa-article .wa-em-teal {
color: var(--glow-teal);
font-weight: 800;
}
.wa-article .wa-balloon {
position: relative;
display: flex;
gap: 16px;
align-items: flex-start;
margin: 48px 0;
padding: 22px 26px;
background: var(--glow-blue-a12);
border: 1px solid var(--glow-blue-a20);
border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
}
.wa-article .wa-balloon-icon {
flex-shrink: 0;
font-size: 28px;
line-height: 1.2;
}
.wa-article .wa-balloon-body {
color: var(--text-primary);
font-weight: 500;
}
.wa-article .wa-balloon-body p:last-child { margin-bottom: 0; }
.wa-article .wa-infobox {
display: flex;
gap: 16px;
align-items: flex-start;
margin: 48px 0;
padding: 22px 26px;
font-size: 15px;
line-height: 1.9;
color: var(--text-muted);
background: rgba(38, 208, 206, 0.06);
border: 1px solid var(--glow-teal-a20);
border-radius: var(--radius-md);
}
.wa-article .wa-infobox-icon { flex-shrink: 0; font-size: 22px; line-height: 1.4; }
.wa-article .wa-infobox-title {
display: block;
margin-bottom: 6px;
color: var(--glow-teal);
font-weight: 800;
}
.wa-article .wa-infobox-body p:last-child { margin-bottom: 0; }
.wa-article .wa-infobox-body strong { color: var(--glow-teal); }
.wa-article .wa-quote {
margin: 48px 0;
padding: 24px 30px;
background: var(--glow-teal-a08);
border-left: 3px solid var(--glow-teal);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.wa-article .wa-quote-text {
color: var(--text-primary);
font-size: 16px;
font-style: italic;
line-height: 1.9;
}
.wa-article .wa-quote-text p:last-child { margin-bottom: 0; }
.wa-article .wa-quote-attr {
margin: 12px 0 0;
font-size: 12px;
letter-spacing: 0.1em;
text-align: right;
color: var(--text-dim);
}
.wa-article .wa-stamps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin: 48px 0;
padding: 0;
list-style: none;
}
.wa-article .wa-stamps li {
display: flex;
gap: 14px;
align-items: center;
margin: 0;
padding: 18px 20px;
font-size: 14px;
font-weight: 800;
line-height: 1.5;
color: var(--glow-blue);
background: var(--ocean-1);
border: 1px solid var(--card-border);
border-radius: 20px;
transition: transform 0.3s var(--ease-float), background 0.3s var(--ease-float);
}
.wa-article .wa-stamps li::marker { content: none; }
.wa-article .wa-stamps li:hover { transform: translateY(-3px); background: var(--glow-blue-a12); }
.wa-article .wa-stamp-emoji { font-size: 22px; }
@media (max-width: 560px) {
.wa-article .wa-stamps { grid-template-columns: 1fr; }
}
.wa-article .wa-cta {
position: relative;
overflow: hidden;
margin: 96px 0 48px;
padding: 56px 24px;
text-align: center;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-xl);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.wa-article .wa-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--glow-teal), var(--glow-blue), transparent);
}
.wa-article .wa-cta-eyebrow {
display: block;
margin-bottom: 16px;
font-family: var(--font-serif);
font-size: 13px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--glow-teal);
}
.wa-article .wa-cta-title {
margin: 0 0 20px;
font-size: clamp(19px, 3.6vw, 24px);
font-weight: 800;
line-height: 1.6;
font-feature-settings: 'palt';
word-break: auto-phrase;
color: var(--text-strong);
}
.wa-article .wa-cta-body {
max-width: 560px;
margin: 0 auto 32px;
font-size: 15px;
color: var(--text-muted);
}
.wa-article .wa-cta-body p:last-child { margin-bottom: 0; }
.wa-article .wa-cta-btn {
display: inline-block;
padding: 15px 40px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--glow-blue);
text-decoration: none;
background: linear-gradient(135deg, var(--glow-blue-a12), var(--glow-teal-a08));
border: 1px solid var(--glow-blue-a30);
border-radius: 50px;
transition: transform 0.3s var(--ease-float), box-shadow 0.3s var(--ease-float);
}
.wa-article .wa-cta-btn:hover {
color: var(--glow-soft);
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(79, 195, 247, 0.22);
}
.wa-article .wa-cta-note {
margin: 20px 0 0;
font-size: 12px;
color: var(--text-dim);
}
.wa-article .wa-refs {
margin: 64px 0 0;
padding: 24px 0 0;
font-size: 13px;
line-height: 1.8;
color: var(--text-muted);
border-top: 1px solid var(--card-border);
}
.wa-article .wa-refs-title {
margin: 0 0 12px;
padding: 0;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.2em;
color: var(--text-dim);
background: none;
border: none;
}
.wa-article .wa-refs-title::before { content: none; }
.wa-article .wa-refs ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: wa-ref;
}
.wa-article .wa-refs li.wa-ref {
counter-increment: wa-ref;
position: relative;
margin: 0 0 14px;
padding: 16px 18px 14px 58px;
background: var(--glow-blue-a12);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
transition: border-color var(--dur-fast) var(--ease-float);
}
.wa-article .wa-refs li.wa-ref::before {
content: counter(wa-ref);
position: absolute;
left: 18px;
top: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
font-family: var(--font-serif), var(--font-round);
font-size: 13px;
line-height: 1;
color: var(--glow-blue);
border: 1px solid var(--glow-blue-a30);
border-radius: var(--radius-pill);
}
.wa-article .wa-refs li.wa-ref:target { border-color: var(--glow-blue-a30); box-shadow: var(--shadow-glow-sm); }
.wa-article .wa-ref-who,
.wa-cite-pop .wa-ref-who {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin: 2px 0 6px;
}
.wa-ref-tag {
padding: 2px 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
line-height: 1.6;
color: var(--glow-teal);
border: 1px solid currentColor;
border-radius: var(--radius-pill);
}
.wa-ref-name { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.wa-article .wa-ref-sum,
.wa-cite-pop .wa-ref-sum { margin: 0 0 8px; font-size: 14px; line-height: 1.85; color: var(--text-body); }
.wa-article .wa-ref-cite,
.wa-cite-pop .wa-ref-cite { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--text-dim); }
.wa-ref-cite a { color: var(--text-dim); }
.wa-ref-cite a:hover { color: var(--glow-blue); }
.wa-article .wa-cite {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6em;
height: 1.6em;
margin: 0 0.2em;
padding: 0 0.4em;
vertical-align: 0.45em;
font-family: var(--font-serif), var(--font-round);
font-size: 11px;
line-height: 1;
color: var(--glow-blue);
background: var(--glow-blue-a12);
border: 1px solid var(--glow-blue-a30);
border-radius: var(--radius-pill);
cursor: pointer;
transition: all var(--dur-fast) var(--ease-float);
}
.wa-article .wa-cite:hover,
.wa-article .wa-cite:focus-visible {
background: var(--glow-blue-a20);
color: var(--text-strong);
box-shadow: var(--shadow-glow-sm);
outline: none;
}
.wa-cite-pop {
inset: auto;
margin: 8px 0 0;
position-area: bottom span-right;
position-try-fallbacks: flip-block, flip-inline;
width: max-content;
max-width: min(360px, calc(100vw - 32px));
padding: 14px 16px 12px;
background: var(--ocean-1);
border: 1px solid var(--glow-blue-a30);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card), var(--shadow-glow-md);
color: var(--text-body);
font-family: var(--font-body);
font-size: 13px;
line-height: 1.7;
transition:
opacity var(--dur-fast) var(--ease-float),
scale   var(--dur-fast) var(--ease-float),
overlay var(--dur-fast) allow-discrete,
display var(--dur-fast) allow-discrete;
}
.wa-cite-pop:not(:popover-open) { opacity: 0; }
@starting-style {
.wa-cite-pop:popover-open { opacity: 0; scale: 0.97; }
}
.wa-cite-pop-no {
display: block;
margin-bottom: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--glow-teal);
}
.wa-cite-pop p { margin: 0 0 8px; }
.wa-cite-pop .wa-ref-sum { font-size: 13px; line-height: 1.75; }
.wa-cite-pop-link { font-size: 12px; color: var(--glow-blue); }
@supports not (position-area: bottom) {
.wa-cite-pop {
inset: auto 16px 16px 16px;
width: auto;
max-width: none;
margin: 0;
}
}
@media (max-width: 560px) {
.wa-article { font-size: 16px; }
.wa-article h2 { margin-top: 72px; }
.wa-article .wa-balloon,
.wa-article .wa-infobox { padding: 18px 20px; }
.wa-article .wa-cta { padding: 44px 18px; }
.wa-article .wa-refs li.wa-ref { padding: 14px 16px 12px; }
.wa-article .wa-refs li.wa-ref::before { left: 16px; top: 14px; }
.wa-article .wa-refs li.wa-ref > :first-child { min-height: 26px; padding-left: 36px; }
}
/* cocoon.css */
:root {
--text-main: var(--text-primary);
--bg4: var(--abyss);
--bg3: transparent;
--bg2: var(--card-bg);
--bg1: var(--ocean-1);
--bg1-on: var(--glow-blue-a12);
}
html {
overflow-x: hidden;
}
body {
font-family: var(--font-round);
color: var(--text-primary);
background:
linear-gradient(180deg, transparent 55%, var(--abyss) 100%),
linear-gradient(160deg, var(--deep) 0%, var(--ocean-1) 50%, var(--ocean-2) 100%);
background-repeat: no-repeat;
background-size: 100% 380px;
background-color: var(--abyss);
overflow-x: hidden;
}
a { color: var(--glow-blue); }
a:hover { color: var(--glow-teal); }
.header-container,
#header,
#navi,
.navi {
background: transparent;
box-shadow: none;
}
#header .header-in {
min-height: 0;
padding: 40px 16px 8px;
}
.tagline {
color: var(--text-muted);
font-size: 13px;
letter-spacing: 0.12em;
}
.logo-header {
margin: 0;
padding: 0;
}
.site-name-text {
font-family: var(--font-round);
font-size: clamp(26px, 5vw, 40px);
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.01em;
text-shadow: var(--shadow-title);
}
a.site-name-text-link:hover .site-name-text { color: var(--text-strong); }
#navi .navi-in > ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
padding: 12px 16px 8px;
}
#navi .navi-in > ul > li {
width: auto;
height: auto;
}
#navi .navi-in > ul.menu-mobile {
display: none;
}
@media screen and (max-width: 1023px) {
#navi .navi-in > ul.menu-pc {
display: none;
}
#navi .navi-in > ul.menu-mobile {
display: flex;
}
#navi .navi-in > ul.menu-mobile > li {
width: auto;
height: auto;
line-height: inherit;
}
#navi .navi-in > ul.menu-mobile > li > a {
font-size: 13px;
}
}
#navi .navi-in a {
height: auto;
padding: 8px 14px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1.6;
color: var(--text-muted);
transition: all var(--dur-fast) var(--ease-float);
}
#navi .navi-in a:hover {
color: var(--text-primary);
background: var(--glow-blue-a12);
border-color: var(--card-border);
}
#navi .navi-in .current-menu-item > a,
#navi .navi-in .current-menu-ancestor > a {
color: var(--glow-blue);
background: var(--glow-blue-a12);
border-color: var(--glow-blue-a30);
}
.navi-in .sub-menu {
background: var(--ocean-1);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
}
.header-container {
position: relative;
z-index: 0;
}
.header-container::before,
.header-container::after {
content: '';
position: absolute;
z-index: -1;
left: -15%;
right: -15%;
top: 0;
height: 420px;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
.header-container::before {
background:
repeating-linear-gradient(120deg,
transparent 0 15px,
color-mix(in srgb, var(--glow-soft) 10%, transparent) 15px 75px,
transparent 75px 90px),
repeating-linear-gradient(60deg,
transparent 0 15px,
color-mix(in srgb, var(--glow-blue) 8%, transparent) 15px 75px,
transparent 75px 90px);
clip-path: polygon(0.0% 0%, 100.0% 0%, 100.0% 0%, 100.0% 100%, 0.0% 100%, 0.0% 0%);
filter: url(#wa-caustics) blur(16px);
transform-origin: 50% 0;
animation: wa-rays 16s ease-in-out infinite alternate;
}
.header-container::after {
height: 220px;
background:
radial-gradient(ellipse 30% 40% at 25% 0%, color-mix(in srgb, var(--glow-soft) 10%, transparent), transparent 70%),
radial-gradient(ellipse 25% 35% at 70% 0%, color-mix(in srgb, var(--glow-teal) 8%, transparent), transparent 70%),
radial-gradient(ellipse 20% 30% at 50% 0%, color-mix(in srgb, var(--glow-blue) 9%, transparent), transparent 70%);
animation: wa-caustic 7s ease-in-out infinite alternate;
}
@keyframes wa-rays {
0%   { transform: skewX(-5deg) translateX(-3%); opacity: 0.6; }
100% { transform: skewX(5deg)  translateX(3%);  opacity: 1; }
}
@keyframes wa-caustic {
0%   { transform: translateX(-4%) scaleX(1);    opacity: 0.5; }
100% { transform: translateX(4%)  scaleX(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.header-container::before,
.header-container::after { animation: none; }
}
.fixed-header .header,
.fixed-header .navi {
background: var(--header-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.main,
.sidebar {
background: transparent;
border: none;
color: var(--text-primary);
}
.single .main,
.page .main {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.ect-entry-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.ect-entry-card > .pagination,
.ect-entry-card > :not(.entry-card-wrap) {
grid-column: 1 / -1;
}
.entry-card-wrap {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
overflow: hidden;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-primary);
box-shadow: none;
transition:
border-color var(--dur-mid) var(--ease-float),
transform    var(--dur-mid) var(--ease-float),
box-shadow   var(--dur-mid) var(--ease-float);
}
.entry-card-wrap:hover {
background: var(--card-bg);
border-color: var(--card-hover-border);
transform: translateY(-4px);
box-shadow: var(--shadow-glow-sm), var(--shadow-card);
}
.entry-card {
display: flex;
flex-direction: column;
height: 100%;
}
.entry-card-thumb {
float: none;
width: 100%;
margin: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.entry-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.entry-card-wrap:hover .entry-card-thumb img {
transform: scale(1.04);
}
.entry-card-content {
flex: 1;
margin: 0;
padding: 16px 16px 12px;
}
.entry-card-title {
margin: 0 0 8px;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
color: var(--text-primary);
}
.entry-card-wrap:hover .entry-card-title {
color: var(--glow-blue);
}
.entry-card-snippet {
font-size: 13px;
line-height: 1.7;
color: var(--text-muted);
}
.entry-card-meta {
position: static;
padding: 0 16px 14px;
color: var(--text-muted);
font-size: 12px;
}
.entry-card-meta .fa {
display: none;
}
.entry-card-thumb .cat-label {
display: none;
}
.entry-card-categorys .entry-category {
padding: 0;
background: none;
color: var(--glow-blue);
font-weight: 700;
}
.wa-list-head {
display: flex;
align-items: baseline;
gap: 12px;
height: 32px;
margin: 0 0 16px;
}
@media screen and (min-width: 1024px) {
.front-top-page .sidebar {
padding-top: calc(36px + 32px + 16px);
}
.category .archive-title {
line-height: 34px;
}
.category .sidebar {
padding-top: calc(36px + 16px + 34px + 16px);
}
}
.wa-list-head .en {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.28em;
color: var(--glow-teal);
}
.wa-list-head .ja {
font-size: 18px;
font-weight: 800;
color: var(--text-strong);
}
.wa-bento .ect-entry-card {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.wa-bento .ect-entry-card > .entry-card-wrap:first-child {
grid-column: 1 / -1;
aspect-ratio: 16 / 8.5;
}
.wa-bento .entry-card-wrap:first-child .entry-card {
position: relative;
}
.wa-bento .entry-card-wrap:first-child .entry-card-thumb {
position: absolute;
inset: 0;
height: 100%;
aspect-ratio: auto;
}
.wa-bento .entry-card-wrap:first-child .entry-card-content,
.wa-bento .entry-card-wrap:first-child .entry-card-meta {
position: relative;
z-index: 1;
}
.wa-bento .entry-card-wrap:first-child .entry-card-content {
flex: 0 0 auto;
margin-top: auto;
padding: 120px 24px 8px;
background: linear-gradient(180deg, transparent 0%, rgba(2, 8, 16, 0.85) 55%, rgba(2, 8, 16, 0.95) 100%);
}
.wa-bento .entry-card-wrap:first-child .entry-card-meta {
padding: 0 24px 20px;
background: rgba(2, 8, 16, 0.95);
}
.wa-bento .entry-card-wrap:first-child .entry-card-title {
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 800;
line-height: 1.45;
}
.wa-bento .entry-card-wrap:not(:first-child) .entry-card-snippet {
display: none;
}
.wa-bento .entry-card-wrap:not(:first-child) .entry-card-title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 14px;
}
.wa-bento .entry-card-wrap:not(:first-child) .entry-card-content {
padding: 12px 14px 6px;
}
.wa-bento .entry-card-wrap:not(:first-child) .entry-card-meta {
padding: 0 14px 12px;
}
@media screen and (max-width: 834px) {
.wa-bento .ect-entry-card {
grid-template-columns: 1fr;
gap: 12px;
}
.wa-bento .ect-entry-card > .entry-card-wrap:first-child {
aspect-ratio: auto;
min-height: 300px;
}
.wa-bento .entry-card-wrap:not(:first-child) .entry-card {
display: grid;
grid-template-columns: 112px 1fr;
grid-template-rows: 1fr auto;
}
.wa-bento .entry-card-wrap:not(:first-child) .entry-card-thumb {
grid-row: span 2;
height: 100%;
aspect-ratio: auto;
}
}
.article .entry-title,
.entry-title {
font-family: var(--font-round);
font-weight: 800;
color: var(--text-strong);
line-height: 1.45;
text-shadow: var(--shadow-title);
}
.article .entry-title {
margin-bottom: 20px;
font-family: var(--font-title);
font-weight: 700;
font-size: clamp(23px, 3vw, 32px);
line-height: 1.5;
letter-spacing: 0.02em;
font-feature-settings: 'palt';
word-break: auto-phrase;
}
.wa-kicker {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.28em;
line-height: 1.4;
color: var(--glow-teal);
}
.wa-kicker span {
font-weight: 500;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.wa-kicker::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--glow-blue-a30), transparent);
}
.eye-catch .cat-label {
display: none;
}
.date-tags,
.date-tags *,
.footer-meta,
.footer-meta a {
color: var(--text-dim);
}
.cat-link,
.tag-link {
padding: 3px 12px;
background: var(--glow-blue-a12);
border: 1px solid var(--glow-blue-a20);
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--glow-blue);
transition: all var(--dur-fast) var(--ease-float);
}
.cat-link:hover,
.tag-link:hover {
background: var(--glow-blue-a20);
border-color: var(--glow-blue-a30);
color: var(--glow-blue);
}
.cat-link .fa,
.tag-link .fa {
display: none;
}
.sns-share .share-button,
.sns-follow .follow-button,
.sns-buttons a {
background: var(--glow-blue-a12);
border: 1px solid var(--card-border);
border-radius: var(--radius-sm);
color: var(--text-muted);
}
.sns-share .share-button:hover,
.sns-follow .follow-button:hover,
.sns-buttons a:hover {
background: var(--glow-blue-a20);
color: var(--text-strong);
opacity: 1;
}
.sns-share-message,
.sns-follow-message {
color: var(--text-muted);
}
.related-entry-heading,
.under-entry-content .related-entry-heading,
.comment-title {
background: none;
border: none;
padding: 0;
color: var(--glow-blue);
font-size: 14px;
font-weight: 800;
letter-spacing: 0.08em;
}
.related-entry-heading::before,
.related-entry-heading::after {
content: none;
}
.related-entry-card-wrap,
.prev-post,
.next-post,
.pager-post-navi a {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
color: var(--text-primary);
}
.related-entry-card-wrap:hover,
.pager-post-navi a:hover {
background: var(--card-bg);
border-color: var(--card-hover-border);
}
.related-entry-card-title,
.prev-post-title,
.next-post-title {
transition: color 0.2s ease;
}
.related-entry-card-wrap:hover .related-entry-card-title,
.pager-post-navi a:hover .prev-post-title,
.pager-post-navi a:hover .next-post-title {
color: var(--glow-blue);
}
.related-entry-card-thumb .cat-label {
display: none;
}
.related-entries .related-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.related-entries .related-entry-card-wrap {
margin: 0;
padding: 0;
overflow: hidden;
}
.related-entries .related-entry-card {
display: flex;
flex-direction: column;
}
.related-entries .related-entry-card-thumb {
float: none;
width: 100%;
margin: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 0;
}
.related-entries .a-wrap.related-entry-card-wrap:not(.ec-big-card-first) .related-entry-card-thumb {
margin-bottom: 0;
}
.related-entries .related-entry-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-entries .related-entry-card-content {
margin: 0;
padding: 12px 14px 14px;
}
.related-entries .related-entry-card-title {
margin: 0;
font-size: 14px;
line-height: 1.6;
}
.related-entries .related-entry-card-snippet,
.related-entries .related-entry-card-meta {
display: none;
}
@media screen and (max-width: 834px) {
.related-entries .related-list {
display: flex;
flex-direction: row;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 4px;
}
.related-entries .related-list::-webkit-scrollbar {
display: none;
}
.related-entries .related-entry-card-wrap {
flex: 0 0 min(68%, 280px);
scroll-snap-align: start;
}
.related-entries .related-entry-card-content {
padding: 10px 12px 12px;
}
.related-entries .related-entry-card-title {
font-size: 13px;
}
}
.pager-post-navi.post-navi-default {
display: flex;
flex-direction: row;
gap: 16px;
align-items: stretch;
}
.pager-post-navi.post-navi-default::before,
.pager-post-navi.post-navi-default::after {
content: none;
}
.pager-post-navi.post-navi-default a.prev-post,
.pager-post-navi.post-navi-default a.next-post {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
.pager-post-navi.post-navi-default a.prev-post:only-child,
.pager-post-navi.post-navi-default a.next-post:only-child {
flex: 0 1 calc(50% - 8px);
}
.pager-post-navi.post-navi-default a.next-post:only-child {
margin-left: auto;
}
.pager-post-navi.post-navi-default a .prev-post-thumb,
.pager-post-navi.post-navi-default a .next-post-thumb {
float: none;
width: 100%;
min-width: 0;
max-width: none;
margin: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 0;
}
.pager-post-navi.post-navi-default .card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pager-post-navi.post-navi-default a.prev-post .prev-post-title,
.pager-post-navi.post-navi-default a.next-post .next-post-title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 12px 14px 14px;
padding: 0;
font-size: 14px;
line-height: 1.6;
}
.pager-post-navi.post-navi-default a .iconfont {
position: absolute;
padding: 0;
top: 10px;
z-index: 1;
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin: 0;
border-radius: 50%;
background: rgba(2, 10, 24, 0.6);
color: var(--text-strong);
font-size: 12px;
transform: none;
}
.pager-post-navi.post-navi-default .prev-post .iconfont {
left: 10px;
right: auto;
}
.pager-post-navi.post-navi-default .next-post .iconfont {
right: 10px;
left: auto;
}
@media screen and (max-width: 834px) {
.pager-post-navi.post-navi-default {
gap: 10px;
}
.pager-post-navi.post-navi-default a .prev-post-thumb,
.pager-post-navi.post-navi-default a .next-post-thumb {
min-width: 0;
max-width: none;
}
.pager-post-navi.post-navi-default a.prev-post .prev-post-title,
.pager-post-navi.post-navi-default a.next-post .next-post-title {
margin: 10px 12px 12px;
font-size: 13px;
}
}
.sidebar .widget {
margin-bottom: 16px;
padding: 20px;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--text-muted);
overflow: hidden;
}
.sidebar .widget-sidebar-title,
.sidebar .widget h2,
.sidebar .widget h3 {
margin: 0 0 14px;
padding: 0 0 10px;
background: none;
border: none;
border-bottom: 1px solid var(--card-border);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: var(--glow-blue);
}
.sidebar .widget-sidebar-title::before,
.sidebar .widget-sidebar-title::after,
.sidebar .widget h2::before,
.sidebar .widget h2::after,
.sidebar .widget h3::before,
.sidebar .widget h3::after {
content: none;
}
.sidebar .widget ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar .widget li,
.sidebar .widget li a,
.sidebar .wp-block-group ul li a {
padding: 4px 0;
background: transparent;
border: none;
box-shadow: none;
font-size: 14px;
line-height: 1.65;
color: var(--text-muted);
}
.sidebar .widget li a:hover,
.sidebar .wp-block-group ul li a:hover {
background: transparent;
color: var(--glow-blue);
}
.sidebar .widget_categories ul,
.sidebar .wp-block-categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sidebar .widget .widget_categories li a,
.sidebar .widget_categories.widget li a,
.sidebar .widget .wp-block-categories li a {
display: inline-block;
padding: 3px 10px;
background: var(--glow-blue-a12);
border: 1px solid var(--glow-blue-a20);
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--glow-blue);
}
.sidebar .widget .widget_categories li a:hover,
.sidebar .widget_categories.widget li a:hover,
.sidebar .widget .wp-block-categories li a:hover {
background: var(--glow-blue-a20);
border-color: var(--glow-blue-a30);
color: var(--glow-blue);
}
.sidebar .widget_categories .post-count {
display: none;
}
.sidebar .tagcloud {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sidebar .widget .tagcloud a {
display: inline-block;
flex: none;
margin: 0;
padding: 3px 10px;
background: var(--glow-blue-a12);
border: 1px solid var(--glow-blue-a20);
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--glow-blue);
}
.sidebar .widget .tagcloud a:hover {
background: var(--glow-blue-a20);
border-color: var(--glow-blue-a30);
color: var(--glow-blue);
}
.sidebar .tagcloud .tax-icon,
.sidebar .tagcloud .tag-link-count {
display: none;
}
.sidebar .wp-block-archives .post-count {
display: inline;
float: none;
margin: 0 0 0 4px;
padding: 0;
background: none;
border: none;
font-size: inherit;
color: var(--text-muted);
}
.sidebar .wp-block-archives .post-count::before {
content: "【";
}
.sidebar .wp-block-archives .post-count::after {
content: "】";
}
.author-box {
margin: 0;
padding: 8px 0 0;
background: none;
border: none;
text-align: center;
color: var(--text-muted);
}
.author-box .author-thumb,
.nwa .author-box .author-thumb {
float: none;
width: 150px;
margin: 0 auto 14px;
}
.author-box .author-thumb img {
border: 2px solid var(--glow-blue-a30);
border-radius: 50%;
box-shadow: var(--shadow-glow-md);
}
.nwa .author-box {
margin-bottom: 0;
}
.author-box .author-content,
.nwa .author-box .author-content {
padding: 0;
font-size: 12px;
line-height: 1.8;
}
.author-box .author-name {
margin-bottom: 10px;
}
.author-box .author-description,
.nwa .author-box .author-description {
margin: 0;
font-size: 13px;
line-height: 1.9;
text-align: center;
word-break: auto-phrase;
}
.author-box .author-description p {
margin: 0;
}
.author-box .author-description p + p {
margin-top: 0.9em;
}
.author-box .author-name a {
color: var(--text-primary);
font-weight: 700;
}
.author-box .author-follows {
display: none;
}
.search-edit,
.wp-block-search__input {
background: var(--abyss);
border: 1px solid var(--card-border);
border-radius: var(--radius-pill);
color: var(--text-primary);
}
.search-submit,
.wp-block-search__button {
background: var(--glow-blue-a20);
border: none;
border-radius: var(--radius-pill);
color: var(--text-strong);
}
#footer,
.footer {
margin-top: 48px;
background: transparent;
border-top: 1px solid var(--card-border);
}
.footer-bottom {
text-align: center;
}
.footer-bottom-logo {
display: none;
}
.footer-bottom-content {
float: none;
width: 100%;
text-align: center;
}
#footer,
#footer a,
.footer-bottom-content,
.copyright {
color: var(--text-dim);
font-size: 12px;
letter-spacing: 0.04em;
}
#footer a:hover {
color: var(--glow-blue);
}
.navi-footer {
margin-bottom: 12px;
}
.navi-footer .menu-footer {
justify-content: center;
flex-wrap: wrap;
row-gap: 8px;
}
.navi-footer .menu-footer li {
border-left: 1px solid var(--card-border);
}
.navi-footer .menu-footer li:first-child {
border-left: none;
}
.navi-footer .menu-footer li:last-child {
border-right: none;
}
.navi-footer .menu-footer a {
padding: 0 14px;
}
.pagination-next {
display: none;
}
.pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
margin: 40px 0 24px;
}
.pagination .page-numbers {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
overflow: visible;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-pill);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--text-muted);
font-family: var(--font-round);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition:
transform    var(--dur-mid)  var(--ease-float),
border-color var(--dur-mid)  var(--ease-float),
box-shadow   var(--dur-mid)  var(--ease-float),
color        var(--dur-fast) var(--ease-float);
}
.pagination .page-numbers.dots {
width: auto;
background: none;
border: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
color: var(--text-dim);
}
.pagination .page-numbers.current {
background: var(--glow-blue-a12);
border-color: var(--glow-blue-a30);
color: var(--glow-blue);
font-weight: 700;
animation: wa-sonar-glow 4s ease-in-out infinite;
}
.pagination .page-numbers.current::before,
.pagination .page-numbers.current::after {
content: '';
position: absolute;
inset: -1px;
border: 1px solid var(--glow-blue);
border-radius: inherit;
pointer-events: none;
opacity: 0;
animation: wa-sonar 3.2s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}
.pagination .page-numbers.current::after {
animation-delay: 1.1s;
}
@keyframes wa-sonar {
0%   { transform: scale(1);   opacity: 0.6; }
70%  { opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
@keyframes wa-sonar-glow {
0%, 100% { box-shadow: var(--shadow-glow-sm); }
50%      { box-shadow: var(--shadow-glow-md); }
}
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
transform: translateY(-2px);
border-color: var(--card-hover-border);
box-shadow: var(--shadow-glow-sm);
color: var(--text-strong);
outline: none;
}
.pagination a.page-numbers:active {
transform: scale(0.94);
transition-duration: 0.08s;
}
.pagination a.page-numbers::before {
content: '';
position: absolute;
left: 50%;
bottom: 6px;
width: 4px;
height: 4px;
margin-left: -2px;
border: 1px solid var(--glow-blue-a30);
border-radius: 50%;
pointer-events: none;
opacity: 0;
}
.pagination a.page-numbers:hover::before {
animation: wa-page-fizz 1.4s ease-in infinite;
}
@keyframes wa-page-fizz {
0%   { transform: translate(-3px, 0);     opacity: 0; }
25%  { opacity: 1; }
100% { transform: translate(3px, -30px); opacity: 0; }
}
.pagination .next .fa,
.pagination .prev .fa {
transition: transform var(--dur-mid) var(--ease-float);
}
.pagination .next:hover .fa { transform: translateX(2px); }
.pagination .prev:hover .fa { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) {
.pagination .page-numbers.current,
.pagination .page-numbers.current::before,
.pagination .page-numbers.current::after,
.pagination a.page-numbers:hover::before { animation: none; }
.pagination .page-numbers.current { box-shadow: var(--shadow-glow-sm); }
.pagination a.page-numbers:hover,
.pagination a.page-numbers:active,
.pagination .next:hover .fa,
.pagination .prev:hover .fa { transform: none; }
}
.breadcrumb,
.breadcrumb a {
color: var(--text-dim);
font-size: 12px;
}
@media screen and (max-width: 834px) {
.ect-entry-card {
grid-template-columns: 1fr;
}
}
.mobile-menu-buttons {
background: var(--header-bg);
border-top: 1px solid var(--card-border);
box-shadow: none;
}
.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons .menu-button-in {
background: transparent;
color: var(--text-muted);
}
.menu-content,
.search-menu-content,
.navi-menu-content {
background: var(--ocean-1);
color: var(--text-primary);
}
.grecaptcha-badge {
visibility: hidden;
}
/* motion.css */
.wa-glow-target {
position: relative;
isolation: isolate;
}
.wa-glow-edge {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity var(--dur-mid) var(--ease-float);
padding: 1.5px;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(179, 229, 252, 0.95), rgba(79, 195, 247, 0.55) 30%, rgba(38, 208, 206, 0.15) 55%, transparent 75%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.wa-glow-target:hover > .wa-glow-edge,
.wa-glow-target:focus-visible > .wa-glow-edge {
opacity: 1;
}
.wa-article p a,
.wa-article li a,
.wa-article .wa-refs a {
text-decoration: none;
padding-bottom: 3px;
background-image: linear-gradient(var(--glow-blue-a30), var(--glow-blue-a30));
background-size: 100% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: color var(--dur-fast) var(--ease-float);
}
.wa-article p a:hover,
.wa-article li a:hover,
.wa-article .wa-refs a:hover {
color: var(--glow-teal);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4' viewBox='0 0 16 4'%3E%3Cpath d='M0 2 Q4 0 8 2 T16 2' fill='none' stroke='%2326D0CE' stroke-width='1.2'/%3E%3C/svg%3E");
background-size: 16px 4px;
background-repeat: repeat-x;
animation: wa-wave 0.9s linear infinite;
}
@keyframes wa-wave {
from { background-position: 0 100%; }
to   { background-position: 16px 100%; }
}
html::after {
content: '';
position: fixed;
inset: 0;
z-index: 9990;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 160px 160px;
mix-blend-mode: soft-light;
opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
.wa-article p a:hover,
.wa-article li a:hover,
.wa-article .wa-refs a:hover { animation: none; }
}
@media (hover: none) {
.wa-glow-edge { display: none; }
}
/* surface.css */
.wa-surface {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9998;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
width: 60px;
height: 60px;
padding: 0;
overflow: hidden;
background: var(--header-bg);
border: 1px solid var(--card-border);
border-radius: 50%;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-card);
color: var(--glow-blue);
font-family: var(--font-round);
cursor: pointer;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition:
opacity      var(--dur-mid) var(--ease-float),
transform    var(--dur-mid) var(--ease-float),
border-color var(--dur-mid) var(--ease-float),
box-shadow   var(--dur-mid) var(--ease-float);
}
.wa-surface.is-visible {
opacity: 1;
transform: none;
pointer-events: auto;
}
.wa-surface:hover,
.wa-surface:focus-visible {
border-color: var(--glow-blue-a30);
box-shadow: var(--shadow-card), var(--shadow-glow-md);
color: var(--text-strong);
outline: none;
}
.wa-surface svg {
width: 18px;
height: 18px;
transition: transform var(--dur-mid) var(--ease-float);
}
.wa-surface:hover svg { transform: translateY(-3px); }
.wa-surface-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
}
.wa-surface::before,
.wa-surface::after {
content: '';
position: absolute;
bottom: -6px;
width: 5px;
height: 5px;
border: 1px solid var(--glow-blue-a30);
border-radius: 50%;
opacity: 0;
}
.wa-surface::before { left: 16px; }
.wa-surface::after  { right: 18px; width: 4px; height: 4px; }
.wa-surface:hover::before { animation: wa-surface-fizz 1.4s ease-in infinite; }
.wa-surface:hover::after  { animation: wa-surface-fizz 1.8s ease-in 0.5s infinite; }
@keyframes wa-surface-fizz {
0%   { transform: translateY(0);     opacity: 0; }
20%  { opacity: 1; }
100% { transform: translateY(-64px); opacity: 0; }
}
.wa-rise {
position: fixed;
z-index: 9997;
left: var(--x);
top: var(--y);
width: var(--s);
aspect-ratio: 1;
border: 1px solid var(--glow-blue-a30);
border-radius: 50%;
background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--glow-soft) 45%, transparent) 0%, transparent 55%);
pointer-events: none;
opacity: 0;
animation: wa-rise var(--d) cubic-bezier(0.3, 0.6, 0.4, 1) var(--delay) forwards;
}
@keyframes wa-rise {
0%   { transform: translate(0, 0) scale(0.5);                 opacity: 0; }
12%  { opacity: 0.9; }
100% { transform: translate(var(--sway), -110vh) scale(1.1); opacity: 0; }
}
@media screen and (max-width: 834px) {
.wa-surface { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.wa-surface:hover::before,
.wa-surface:hover::after { animation: none; }
.wa-rise { display: none; }
}
/* ambient.css */
.wa-ambient {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.wa-ambient-bubble {
position: absolute;
left: var(--x);
bottom: -40px;
width: var(--s);
aspect-ratio: 1;
border: 1px solid color-mix(in srgb, var(--glow-blue) 55%, transparent);
box-shadow: 0 0 6px color-mix(in srgb, var(--glow-blue) 25%, transparent);
border-radius: 50%;
background: radial-gradient(circle at 32% 30%, color-mix(in srgb, var(--glow-soft) 45%, transparent) 0%, transparent 55%);
opacity: 0;
animation: wa-ambient-rise var(--d) linear forwards;
}
@keyframes wa-ambient-rise {
0%   { transform: translate(0, 0) scale(0.6);                                   opacity: 0; }
10%  { opacity: var(--o); }
35%  { transform: translate(calc(var(--sway) * 1), -35vh) scale(0.8); }
65%  { transform: translate(calc(var(--sway) * -0.6), -70vh) scale(0.95); }
85%  { opacity: var(--o); }
100% { transform: translate(calc(var(--sway) * 0.4), -105vh) scale(1.05);      opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.wa-ambient { display: none; }
}
/* depth.css */
body.single,
body.page {
background: var(--abyss);
}
body.single::before,
body.single::after,
body.page::before,
body.page::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
body.single::before,
body.page::before {
background:
radial-gradient(ellipse 80% 55% at 50% 0%, var(--glow-blue-a12) 0%, transparent 70%),
linear-gradient(170deg, var(--ocean-2) 0%, var(--ocean-1) 45%, var(--deep) 100%);
opacity: calc(1 - var(--dive, 0) * 0.95);
}
body.single::after,
body.page::after {
background:
radial-gradient(circle 1.5px at 12% 22%, rgba(79, 195, 247, 0.55) 0%, transparent 100%),
radial-gradient(circle 2px   at 84% 18%, rgba(38, 208, 206, 0.45) 0%, transparent 100%),
radial-gradient(circle 1px   at 68% 64%, rgba(179, 229, 252, 0.60) 0%, transparent 100%),
radial-gradient(circle 2.5px at 26% 78%, rgba(79, 195, 247, 0.35) 0%, transparent 100%),
radial-gradient(circle 1.5px at 92% 86%, rgba(38, 208, 206, 0.40) 0%, transparent 100%),
radial-gradient(circle 1px   at 44% 38%, rgba(179, 229, 252, 0.45) 0%, transparent 100%),
radial-gradient(circle 2px   at 6%  58%, rgba(79, 195, 247, 0.30) 0%, transparent 100%);
opacity: clamp(0, (var(--dive, 0) - 0.55) * 2.2, 1);
animation: wa-depth-glow 5s ease-in-out infinite alternate;
}
@keyframes wa-depth-glow {
0%   { filter: brightness(0.7); }
100% { filter: brightness(1.3); }
}
body.single .wa-article h2[data-depth],
body.page .wa-article h2[data-depth] {
position: relative;
}
body.single .wa-article h2[data-depth]::after,
body.page .wa-article h2[data-depth]::after {
content: attr(data-depth) / "";
position: absolute;
right: 0;
bottom: calc(100% + 10px);
font-family: var(--font-serif), var(--font-round);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
font-feature-settings: normal;
text-shadow: none;
}
.wa-depth-line {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 2px;
transform: scaleX(var(--dive, 0));
transform-origin: left;
background: linear-gradient(90deg, var(--glow-teal), var(--glow-blue));
box-shadow: 0 0 8px var(--glow-blue-a30);
pointer-events: none;
}
.wa-depth {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 9998;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px 10px 12px;
background: rgba(5, 13, 26, 0.72);
border: 1px solid var(--card-border);
border-radius: var(--radius-md);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-card);
font-family: var(--font-round);
pointer-events: none;
transition: border-color var(--dur-mid) var(--ease-float), box-shadow var(--dur-mid) var(--ease-float);
transform: translateY(calc(-1 * var(--lift, 0px)));
}
.wa-depth-gauge {
position: relative;
width: 4px;
height: 40px;
border-radius: var(--radius-pill);
background: var(--glow-blue-a12);
overflow: hidden;
}
.wa-depth-gauge::after {
content: '';
position: absolute;
inset: 0;
transform: scaleY(var(--dive, 0));
transform-origin: top;
background: linear-gradient(180deg, var(--glow-teal), var(--glow-blue));
border-radius: inherit;
}
.wa-depth-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.wa-depth-kicker {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--text-dim);
}
.wa-depth-value {
font-family: var(--font-serif), var(--font-round);
font-size: 22px;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.wa-depth-value small {
margin-left: 2px;
font-family: var(--font-round);
font-size: 12px;
color: var(--text-muted);
}
.wa-depth-zone {
font-size: 11px;
font-weight: 700;
color: var(--glow-blue);
letter-spacing: 0.06em;
}
.wa-depth.is-arrived {
border-color: var(--glow-blue-a30);
box-shadow: var(--shadow-card), 0 0 24px var(--glow-blue-a20);
}
.wa-depth.is-arrived .wa-depth-zone {
color: var(--glow-teal);
}
@media screen and (max-width: 834px) {
.wa-depth {
left: 12px;
bottom: 68px;
gap: 10px;
padding: 8px 12px 8px 10px;
}
.wa-depth-gauge { height: 30px; }
.wa-depth-value { font-size: 18px; }
.wa-depth-kicker { display: none; }
}
@media (prefers-reduced-motion: reduce) {
body.single::after,
body.page::after { animation: none; }
}
/* whale.css */
.wa-whale {
--whale-w: 180px;
display: block;
width: var(--whale-w);
max-width: 100%;
margin: 24px auto;
}
.wa-whale--left  { margin-left: 0; }
.wa-whale--right { margin-right: 0; }
.wa-whale-swim {
position: relative;
aspect-ratio: 180 / 130;
animation: wa-whale-swim 4.5s var(--ease-float) infinite;
}
.wa-whale-swim svg {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
@keyframes wa-whale-swim {
0%, 100% { transform: translateY(0) rotate(-1.5deg); }
50%      { transform: translateY(calc(var(--whale-w) * -0.06)) rotate(1.5deg); }
}
.wa-whale-glow {
position: absolute;
inset: -13.3%;
border-radius: 50%;
background: radial-gradient(circle, var(--glow-blue-a20) 0%, transparent 68%);
animation: wa-whale-glow 3.5s ease-in-out infinite;
}
@keyframes wa-whale-glow {
0%, 100% { transform: scale(1);    opacity: 0.5; }
50%      { transform: scale(1.18); opacity: 1; }
}
.wa-whale-bubble {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--s);
aspect-ratio: 1;
border: 1px solid var(--glow-blue-a30);
border-radius: 50%;
animation: wa-whale-bubble var(--d, 2.5s) var(--delay, 0s) ease-in infinite;
}
@keyframes wa-whale-bubble {
0%   { transform: translateY(0); opacity: 0.7; }
100% { transform: translateY(calc(var(--whale-w) * -0.36)); opacity: 0; }
}
.wa-whale-eye {
transform: translate(var(--ex, 0px), var(--ey, 0px));
transition: transform 0.18s ease-out;
}
.wa-whale-eyeball {
transform-box: fill-box;
transform-origin: center;
animation: wa-whale-blink 5.5s ease-in-out infinite;
}
@keyframes wa-whale-blink {
0%, 94%, 100% { transform: scaleY(1); }
96%           { transform: scaleY(0.1); }
}
@media (prefers-reduced-motion: reduce) {
.wa-whale-swim,
.wa-whale-glow,
.wa-whale-bubble,
.wa-whale-eyeball {
animation: none;
}
.wa-whale-bubble {
display: none;
}
}
/* guide.css */
.wa-guide {
display: flex;
align-items: center;
gap: 8px;
margin: 72px 0 24px;
}
.wa-guide .wa-whale {
flex: 0 0 auto;
margin: 0;
}
.wa-guide .wa-whale-swim {
scale: -1 1;
}
.wa-guide-balloon {
position: relative;
flex: 1;
max-width: 420px;
padding: 16px 20px;
background: var(--card-bg);
border: 1px solid var(--glow-blue-a30);
border-radius: var(--radius-md);
box-shadow: var(--shadow-glow-sm);
}
.wa-guide-balloon::before {
content: '';
position: absolute;
top: 50%;
left: -8px;
width: 14px;
height: 14px;
background: inherit;
border-left: 1px solid var(--glow-blue-a30);
border-bottom: 1px solid var(--glow-blue-a30);
transform: translateY(-50%) rotate(45deg);
}
.wa-guide-balloon p {
margin: 0;
font-size: 15px;
line-height: 1.8;
color: var(--text-primary);
}
.wa-guide.is-ready .wa-whale {
opacity: 0;
transform: translateX(-120%);
transition:
opacity   0.6s var(--ease-float),
transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wa-guide.is-ready .wa-guide-balloon {
opacity: 0;
transform: translateY(8px) scale(0.96);
transform-origin: left center;
transition:
opacity   0.5s var(--ease-float) 0.9s,
transform 0.5s var(--ease-float) 0.9s;
}
.wa-guide.is-in .wa-whale,
.wa-guide.is-in .wa-guide-balloon {
opacity: 1;
transform: none;
}
@media screen and (max-width: 480px) {
.wa-guide { gap: 4px; }
.wa-guide-balloon { padding: 12px 14px; }
.wa-guide-balloon p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.wa-guide.is-ready .wa-whale,
.wa-guide.is-ready .wa-guide-balloon {
opacity: 1;
transform: none;
transition: none;
}
}
/* asker.css */
.wa-asker {
position: relative;
}
.wa-article > .wa-asker:first-child > h2 { margin-top: 0; }
.wa-asker > .wa-whale {
position: absolute;
right: 12px;
bottom: calc(var(--whale-w) * -0.38);
margin: 0;
rotate: 14deg;
pointer-events: none;
z-index: 1;
}
@media (max-width: 560px) {
.wa-asker > .wa-whale {
--whale-w: 76px !important;
right: 4px;
}
}