@charset "UTF-8";
/* =============================================================================
theme-ramlabel ── assets/css/nerion.css
Nerion 紹介ページ専用スタイル
=============================================================================
【読み込み方】
nerion.html の で style.css の「後」に読み込みます。
先に読むと、同じ強さの指定が style.css に上書きされます。
【命名】
既存クラスと衝突しないよう、すべて .nerion- で始めています。
style.css 側は一切書き換えていません。このファイルを消せば元に戻ります。
============================================================================= */
/* -----------------------------------------------------------------------------
ヒーロー（全幅・16:9／SPは4:3）
-----------------------------------------------------------------------------
★ position: relative が重要です。
中の canvas を position:absolute で貼るときの基準になります。
もとの nerion-hero.html は canvas を position:fixed（画面に固定）で
置き、body に overflow:hidden をかけていました。
ページの一部として使う以上どちらも使えないため、
「セクションを基準にした absolute」へ置き換えています。
★ overflow: hidden は残します。
canvas 自体ははみ出しませんが、将来の装飾に対する保険です。
★高さは aspect-ratio で決めています。height を書かないのは、
読み込み中に下の文章が押し下げられないようにするためです
（既存の .hero と同じ考え方）。
★背景色は必ず指定してください。
WebGLが使えない環境やJSが失敗した場合、canvas は透明のままです。
下の radial-gradient が、その場合の受け皿になります。
これが無いと、白背景に白文字で何も読めなくなります。
----------------------------------------------------------------------------- */
.nerion-hero {
--n-ink: #EDF2F7;
--n-dim: rgba(237,242,247,.62);
--n-accent: #7FB6C9;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
/* WebGLが動かなかったときに見える下地 */
background-color: #04060D;
background-image: radial-gradient(120% 90% at 50% 45%, #0B1424 0%, #04060D 70%);
color: var(--n-ink);
display: flex;
align-items: center;
padding: 0 clamp(28px, 8vw, 140px);
/* style.css は body に letter-spacing:1px / line-height:2 を効かせています。
ヒーローは別の組みなので、ここで一度戻します。 */
letter-spacing: normal;
line-height: 1.5;
}
/* --- スマホ ---
16:9 のままだと帯のように細くなり、ロゴとリード文が収まりません。
既存の記事ヒーローと同じ 4:3 に切り替えます。 */
@media (max-width: 700px) {
.nerion-hero {
aspect-ratio: 4 / 3;
padding: 0 24px;
}
}
/* -----------------------------------------------------------------------------
背景キャンバス
-----------------------------------------------------------------------------
★ CSSの width/height は「表示上の大きさ」です。
描画解像度は nerion-hero.js の renderer.setSize が決めます。
両方が必要で、片方だけだとぼやけるか、位置がずれます。
★ display: block が無いと canvas は inline 扱いになり、
下に数pxの隙間ができてそこだけ地の色が覗きます。
★ pointer-events: none で、背景の上でも文字を選択できるようにします。
----------------------------------------------------------------------------- */
.nerion-hero__canvas {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
/* --- 白ページとの境目 ---
下端をわずかに締めます。真っ黒と真っ白が直接ぶつかると、
境界が「引いた線」のように見えるためです。 */
.nerion-hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 12%;
background: linear-gradient(to bottom, rgba(4,6,13,0), rgba(4,6,13,.9));
z-index: 1;
pointer-events: none;
}
/* -----------------------------------------------------------------------------
ヒーローの文字まわり
-----------------------------------------------------------------------------
★PCで一段大きく組んでいます（2026-09-14 変更）。
ロゴ 最大 420px → 560px
和文 最大 1rem → 1.75rem
リード文 最大 .92rem → 1.2rem
折り返し幅 24rem → 34rem
上限（clamp の3番目）を上げているだけなので、
スマホ側の見え方は変わりません。
----------------------------------------------------------------------------- */
.nerion-hero__lede {
position: relative;
z-index: 2;
max-width: 40rem;
padding-left: clamp(20px, 3vw, 34px);
}
/* 左の縦罫。上下が消えていく細い線です。 */
.nerion-hero__lede::before {
content: "";
position: absolute;
left: 0; top: .35em; bottom: .35em;
width: 1px;
background: linear-gradient(to bottom, transparent, var(--n-accent), transparent);
opacity: .6;
}
.nerion-hero__logo {
display: block;
margin: 0;
color: var(--n-ink);
line-height: 0; /* SVGの下に出る隙間を消す */
filter: drop-shadow(0 0 22px rgba(127,182,201,.28));
}
.nerion-hero__logo svg {
display: block;
width: clamp(220px, 34vw, 560px);
height: auto;
}
.nerion-hero__ja {
display: block;
font-family: "Shippori Mincho", "Yu Mincho", serif;
font-size: clamp(.85rem, 2.1vw, 1.75rem);
font-weight: 400;
letter-spacing: .22em;
line-height: 1;
color: var(--n-dim);
margin-top: clamp(1.2rem, 2.4vw, 2.2rem);
}
.nerion-hero__text {
margin: clamp(1.4rem, 3vw, 2.6rem) 0 0;
font-family: "Shippori Mincho", "Yu Mincho", serif;
font-size: clamp(.8rem, 1.3vw, 1.2rem);
line-height: 2;
color: var(--n-dim);
max-width: 34rem;
}
/* スマホでは4:3の枠に収める必要があるため、リード文を1段小さくします。 */
@media (max-width: 700px) {
.nerion-hero__lede { max-width: none; }
.nerion-hero__text { font-size: .72rem; line-height: 1.9; }
}
/* -----------------------------------------------------------------------------
コンセプト（白地）
-----------------------------------------------------------------------------
既存の .wrap--narrow（780px）より少し広い 860px にしています。
記事本文ではなく、見せるための文章だからです。
----------------------------------------------------------------------------- */
.nerion-concept {
max-width: 860px;
margin: 0 auto;
padding: clamp(56px, 9vw, 120px) var(--wrap-pad) clamp(40px, 7vw, 88px);
text-align: center;
}
.nerion-concept__label {
display: block;
font-size: 11px;
letter-spacing: .3em;
color: var(--sub);
margin-bottom: clamp(20px, 3vw, 32px);
}
.nerion-concept__title {
margin: 0 0 clamp(24px, 4vw, 40px);
font-size: clamp(19px, 2.6vw, 30px);
font-weight: 300;
line-height: 1.9;
letter-spacing: .08em;
}
.nerion-concept__body {
margin: 0 auto;
max-width: 42em;
text-align: left;
color: #444;
}
.nerion-concept__body p { margin: 0 0 1.6em; }
.nerion-concept__body p:last-child { margin-bottom: 0; }
/* -----------------------------------------------------------------------------
製品カード（3枚・横並び）
-----------------------------------------------------------------------------
★ repeat(3, 1fr) ではなく auto-fit を使っています。
4枚目を足しても、CSSを触らずに折り返します。
★カード内を flex にして、「詳しく見る」を下端へ押し下げています。
説明文の行数が違っても、リンクの位置が3枚で揃います。
----------------------------------------------------------------------------- */
.nerion-products {
padding-bottom: clamp(64px, 10vw, 140px);
}
.nerion-products__head {
text-align: center;
margin-bottom: clamp(32px, 5vw, 56px);
}
.nerion-products__label {
display: block;
font-size: 11px;
letter-spacing: .3em;
color: var(--sub);
}
.nerion-products__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(20px, 2.4vw, 36px);
max-width: 1200px;
margin: 0 auto;
}
/* --- カード1枚 ---
★枠の色（2026-09-14 指定）
通常 #425366 … style.css の --accent と同じ色
ホバー #2aaadb … このページ専用の明るい青
ホバー色はここでしか使わないため、:root ではなく
カード側に --n-hover として置いています。
全体で使うことになったら、style.css の :root へ移してください。 */
.nerion-card {
--n-hover: #2aaadb;
display: flex;
flex-direction: column;
border: 1px solid var(--accent); /* #425366 */
background: var(--paper);
padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 32px);
transition: border-color .4s ease, transform .4s ease;
}
/* ★カード全体はリンクにしていません。
中に「詳しく見る」があるため、二重のリンクにすると
読み上げ環境で同じ行き先が2回読まれます。 */
.nerion-card:hover {
border-color: var(--n-hover);
transform: translateY(-3px);
}
/* キーボードで中のリンクに到達したときも、同じように枠を光らせます。
:focus-within は「子孫にフォーカスがある」状態を指します。 */
.nerion-card:focus-within {
border-color: var(--n-hover);
}
.nerion-card__name {
margin: 0;
font-size: clamp(17px, 1.6vw, 21px);
font-weight: 400;
letter-spacing: .06em;
line-height: 1.5;
}
.nerion-card__sub {
display: block;
margin-top: 8px;
font-size: 10px;
letter-spacing: .26em;
color: var(--accent);
}
.nerion-card__catch {
margin: clamp(18px, 2vw, 26px) 0 0;
font-size: clamp(14px, 1.3vw, 16px);
line-height: 1.9;
letter-spacing: .04em;
}
.nerion-card__desc {
margin: 14px 0 0;
font-size: 13px;
line-height: 2;
color: #555;
}
/* --- 特徴3点 ---
「・」を文字で書かず、::before の短い線で示しています。
読み上げ環境で記号がそのまま読まれるのを避けるためです。 */
.nerion-card__points {
list-style: none;
margin: clamp(20px, 2.4vw, 28px) 0 0;
padding: 20px 0 0;
border-top: 1px solid var(--line);
}
.nerion-card__points li {
position: relative;
padding-left: 18px;
font-size: 12.5px;
line-height: 1.9;
color: #555;
}
.nerion-card__points li + li { margin-top: 10px; }
.nerion-card__points li::before {
content: "";
position: absolute;
left: 0;
top: .95em;
width: 9px;
height: 1px;
background: var(--accent);
}
/* --- 詳しく見る ---
★色は既存のまま（--accent）です。枠だけが青に変わります。
margin-top:auto でカード下端へ押し下げ、3枚の位置を揃えます。 */
.nerion-card__more {
margin-top: auto;
padding-top: clamp(22px, 2.6vw, 30px);
}
.nerion-card__link {
display: inline-block;
font-size: 12px;
letter-spacing: .18em;
padding-bottom: 6px;
border-bottom: 1px solid var(--line);
transition: border-color .3s ease, color .3s ease;
}
.nerion-card__link:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
/* 矢印はCSSで付けます。
HTMLに書くと、読み上げ環境で「右向き矢印」と読まれます。 */
.nerion-card__link::after {
content: "";
display: inline-block;
width: 18px;
height: 1px;
background: currentColor;
vertical-align: middle;
margin-left: 10px;
transition: width .3s ease;
}
.nerion-card__link:hover::after { width: 26px; }
/* -----------------------------------------------------------------------------
その他の製品（ZEN / core / counter）
-----------------------------------------------------------------------------
今回は名前だけです。紹介先が決まらないまま公開するなら、
nerion.html の該当 ごと削除してください。
押せない名前が並んでいるだけだと、探した人が迷います。
----------------------------------------------------------------------------- */
.nerion-others {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--wrap-pad) clamp(64px, 10vw, 120px);
text-align: center;
}
.nerion-others__label {
display: block;
font-size: 11px;
letter-spacing: .3em;
color: var(--sub);
margin-bottom: 18px;
}
.nerion-others__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 28px;
font-size: 13px;
color: #666;
letter-spacing: .08em;
}