/* =========================================================
アルマ株式会社 ホームページ — スタイルシート
newspaper / 縦組み新聞風レイアウト
========================================================= */
:root {
--ink: #38342f; /* 墨（やや薄めの黒）＝サイト内で最も濃い色 */
--ink-rgb: 56, 52, 47; /* --ink のRGB（影・テクスチャ等の半透明用） */
--paper: #ebe4d6; /* 紙面の地色（焼けた新聞紙クリーム。セピアが強い指摘を受け一段薄く） */
--page-bg: #bab4a6; /* ページ背景 */
--gray-d: #4c4639; /* 濃グレー（暖色・セピア寄り） */
--gray-m: #3a352c; /* 本文グレー（暖色・セピア寄り） */
--gray-l: #a39a86; /* 淡グレー（暖色・セピア寄り。装飾ラベル・区切り用） */
--gray-cap: #655d4b; /* 情報を担うラベル用グレー（紙地でAA 4.5:1以上・値より淡い） */
--rule: #cdc3aa; /* 罫線（暖色・クリーム寄り） */
--mincho: "Shippori Mincho", serif;
--serif: "Noto Serif JP", serif;
--playfair: "Playfair Display", serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
background: var(--page-bg);
}
a {
color: inherit;
text-decoration: none;
}
/* 縦組み・縦中横 */
.v {
writing-mode: vertical-rl;
text-orientation: mixed;
}
.up {
text-combine-upright: all;
}
/* ===== 紙面フレーム ===== */
.paper {
position: relative;
max-width: 1240px;
margin: 0 auto;
background: var(--paper);
color: var(--ink);
font-family: var(--serif);
box-shadow: 0 10px 50px rgba(var(--ink-rgb), 0.22);
}
/* ===== 紙のテクスチャ（グレイン）オーバーレイ ===== */
.grain,
.grain-lines,
.grain-vignette,
.grain-mottle {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 6;
}
/* 紙繊維のざらつき（高周波ノイズ）＝紙のトゥース。継ぎ目を目立たせないため大きめタイル */
.grain {
mix-blend-mode: multiply;
opacity: 0.7;
background-image: url("data:image/svg+xml;utf8,");
background-size: 512px 512px;
}
/* 紙のインク吸いムラ・濃淡（低周波の雲状ノイズ）。タイルを紙幅より大きく取り横方向は繰り返さない＝縦の継ぎ目を出さない */
.grain-mottle {
mix-blend-mode: multiply;
opacity: 1;
background-image: url("data:image/svg+xml;utf8,");
background-size: 1400px 1400px;
}
/* 印刷の刷り目（薄い横の線） */
.grain-lines {
opacity: 0.6;
background-image: repeating-linear-gradient(
0deg,
rgba(var(--ink-rgb), 0.04) 0 1px,
transparent 1px 3px
);
}
/* 周辺の沈み（紙の縁の陰影） */
.grain-vignette {
background: radial-gradient(
135% 115% at 50% 45%,
transparent 58%,
rgba(var(--ink-rgb), 0.14) 100%
);
}
/* ===== 共通パーツ ===== */
.btn-outline {
display: inline-block;
/* と