/* ==========================================================================
kimonogatari — base.css
全ページ共通のリセット・カラー設計・基礎タイポグラフィ
（コンポーネント個別のCSSは別ファイルでこの変数を参照してください）
Googleフォントは以前ここで @import していましたが、@import は
「base.cssを読み込む → その中でfontのCSSを読み込む」という直列読み込みに
なり表示が遅くなるため廃止しました。
各HTMLので + を
直接指定し、他のリソースと並行して読み込むようにしています。
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens（カラー / タイポ / スペーシング）
-------------------------------------------------------------------------- */ :root {
/* --- Brand color --- */
--color-primary: #a02c3a; /* ヘッダー・CTAボタンの深い赤 */
--color-primary-dark: #7f2230; /* hover / active */
--color-primary-light: #c85a66; /* 淡い赤（見出し装飾など） */
/* --- Background --- */
--color-bg: #ffffff;
--color-bg-cream: #f5ece1; /* リード文・promiseセクション等の生成り背景 */
--color-bg-beige: #ede3d3; /* セクション区切りの淡いベージュ */
/* --- Text --- */
--color-text: #3a2e2a; /* 基本文字色（濃いブラウン系黒） */
--color-text-muted: #6b5f58;
--color-text-inverse: #ffffff; /* 赤背景上の文字 */
/* --- Border / line --- */
--color-border: #e0d5c8;
/* --- Typography --- */
--font-base: "Onest", sans-serif;
--font-heading: "Cormorant Garamond", serif;
--font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
--fs-base: 16px;
--fs-sm: 0.875rem;
--fs-lg: 1.25rem;
--fs-xl: 1.75rem;
--fs-2xl: 2.5rem;
--fs-3xl: 3.5rem;
--lh-base: 1.9;
--lh-heading: 1.4;
/* --- Spacing scale --- */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
/* --- Layout --- */
--container-width: 1080px;
--container-padding: 5vw;
/* --- Misc --- */
--radius-sm: 4px;
--radius-pill: 999px;
--transition-base: 0.2s ease;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
/* --- z-index scale --- */
--z-header: 100;
--z-overlay: 200;
}
/* --------------------------------------------------------------------------
2. Reset
-------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure {
margin: 0;
}
ul, ol {
padding: 0;
list-style: none;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button, input, select, textarea {
font: inherit;
color: inherit;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* --------------------------------------------------------------------------
3. Base element styles
-------------------------------------------------------------------------- */
body {
font-family: var(--font-base);
font-size: var(--fs-base);
line-height: var(--lh-base);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
line-height: var(--lh-heading);
font-weight: 500;
color: var(--color-text);
}
h1 {
font-size: var(--fs-3xl);
}
h2 {
font-size: var(--fs-2xl);
}
.h2 {
color: var(--color-primary);
margin-bottom: var(--space-sm);
line-height: 1.1;
}
h3 {
font-size: var(--fs-xl);
}
p {
color: var(--color-text);
}
a {
transition: opacity var(--transition-base);
}
a:hover {
opacity: 0.7;
}
::selection {
background-color: var(--color-primary-light);
color: var(--color-text-inverse);
}
/* --------------------------------------------------------------------------
4. Layout helper
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
5. Shared component base（ボタンなど全ページで使い回すもの）
-------------------------------------------------------------------------- */
.btn {
display: inline-block;
padding: var(--space-sm) var(--space-lg);
font-size: var(--fs-lg);
border-radius: var(--radius-pill);
text-align: center;
transition: background-color var(--transition-base), opacity var(--transition-base);
}
.btn--primary {
background-color: var(--color-primary);
color: var(--color-text-inverse);
}
.btn--primary:hover {
background-color: var(--color-primary-dark);
opacity: 1;
}
/* ページタイトル見出し（下層ページ共通）*/
.page-title {
text-align: center;
padding-block: var(--space-lg);
}
.page-title__heading {
color: var(--color-primary);
}
@media (max-width: 767px) {
.br-pc {
display: none;
}
}
/* ==========================================================================
kimonogatari — wave-divider.css
見出し下に繰り返し使うウェーブ／かもめモチーフ（wave.svg）
base.css のトークンを前提とします。
使い方: 見出しの直後に空のspanを置くだけ
Mission
サイズを変えたい箇所は modifier を追加
========================================================================== */
.wave-divider {
display: block;
width: 140px;
aspect-ratio: 143.67 / 19.61; /* wave.svg の実寸比 */
margin: -10px auto var(--space-xs);
background-image: url("../img/common/wave.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.wave-divider--lg {
width: 200px;
}
/* --------------------------------------------------------------------------
6. Scroll reveal（スクロールでふわっと現れるアニメーション）
使い方: アニメーションさせたい要素に class="reveal" を付けるだけ。
JS（js/kimonogatari_reveal.js）が対応ブラウザ・JS有効時のみ
html要素に .reveal-ready を付与し、それを起点に非表示状態を作る。
→ JSが無効/未対応の場合や実行前でもコンテンツは常に表示された状態になる
（SEO・アクセシビリティへの配慮）。
ずらして表示したい場合は reveal--d1〜d4 を追加する。
-------------------------------------------------------------------------- */
.reveal-ready .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.8s ease, transform 0.8s ease;
transition-delay: var(--reveal-delay, 0s);
will-change: opacity, transform;
}
.reveal-ready .reveal.is-visible {
opacity: 1;
transform: none;
}
.reveal--d1 {
--reveal-delay: 0.12s;
}
.reveal--d2 {
--reveal-delay: 0.24s;
}
.reveal--d3 {
--reveal-delay: 0.36s;
}
.reveal--d4 {
--reveal-delay: 0.48s;
}
/* アニメーション低減設定の場合は最初から表示 */
@media (prefers-reduced-motion: reduce) {
.reveal-ready .reveal {
opacity: 1;
transform: none;
transition: none;
}
}