/* =========================================================
LINDO — テーマ本体スタイル（No4 Swiss Minimal 踏襲・拡張）
硬質グリッド × 特大 Archivo タイポ × ピンク1色アクセント。
注意: clamp()/calc() の +/- は前後に必ず半角スペース。
========================================================= */
:root {
/* 色はロゴのブランドガイドライン（LINDO_LOGOIDEAver.4）の指定値。
olive #424426 (CMYK 74.64.100.40) / pink #d98d93 (CMYK 0.56.27.0)
地色のサンドはガイドラインに規定が無いためサイト側の選択。 */
--bg: #fdfbf4;
--paper: #f3efe4;
--ink: #424426;
--olive: #424426;
--muted: #7c7a64;
--pink: #d98d93;
--pink-soft: #f0d5d7;
--line: #424426;
--hairline: rgba(66, 68, 38, 0.18);
/* 組版は2書体。ロゴ導入前の構成に戻してある。
見出しから小さいラベルまで欧文は Archivo、和文は Zen Kaku Gothic New。
一時期ロゴに合わせてディドン体（Bodoni Moda）と明朝（Zen Old Mincho）を
見出しに入れたが、ヒーローのゴシックと各見出しのセリフが同居して
ちぐはぐに見えたため撤去した。ロゴは SVG なので書体に依存しない。 */
--grot: "Archivo", system-ui, sans-serif;
--sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--dur-fast: 200ms;
--dur: 360ms;
--dur-slow: 720ms;
/* トリミング（object-fit:cover）時に残す位置。素材の約7割が縦長で、
中央基準(50% 50%)だと上下が均等に落ちて顔・頭が切れるため、やや上寄せ。
画像ごとに変えたい場合は、その ![]()
に style="--img-pos: 50% 10%" 等で上書きする。 */
--img-pos: 50% 30%;
/* イントロローダーの幕が引き上がるのに合わせてヒーローを出す */
--hero-delay: 1.7s;
--maxw: 1320px;
--header-h: 64px;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
html.is-locked {
overflow: hidden;
}
/* 固定ヘッダー分のオフセット（アンカー着地が隠れない） */
#main,
/* ナビから飛んだとき、固定ヘッダーの下に潜り込ませない。
ここに書き漏らすとそのセクションだけ見出しが隠れる（#talents で実際に起きた）。
※ #artists は 03 Works、#talents は 04 Artists。 */
#about,
#service,
#artists,
#talents,
#contact {
scroll-margin-top: calc(var(--header-h) + 10px);
}
html.is-loading {
overflow: hidden;
}
/* ============ intro loader（かっこいいイントロ）============
砂色のカーテン → マークがせり上がり → ピンクのバーが伸び →
~2.2s でカーテンが上へ引き上がってヒーローが現れる。
CSS駆動なので JS 無効でも必ず消える。reduced-motion では非表示。 */
.loader {
position: fixed;
inset: 0;
z-index: 1000;
background: var(--bg);
display: grid;
place-items: center;
will-change: transform;
animation: loaderOut 2.2s var(--ease) forwards;
}
.loader-inner {
text-align: center;
padding: 0 1.5rem;
}
.loader-mark {
display: block;
font-size: clamp(2.4rem, 1.2rem + 6vw, 5.4rem);
line-height: 1;
color: var(--pink);
opacity: 0;
transform: translateY(20px);
animation: loaderRise 0.9s var(--ease) 0.15s forwards;
}
.loader-mark .brand-logo {
margin-inline: auto;
}
.loader-sub {
display: block;
margin-top: 1.1rem;
font-family: var(--grot);
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--muted);
opacity: 0;
transform: translateY(12px);
animation: loaderRise 0.9s var(--ease) 0.32s forwards;
}
.loader-count {
position: absolute;
right: clamp(1.2rem, 0.6rem + 3vw, 2.6rem);
bottom: clamp(1.4rem, 0.8rem + 3vw, 2.8rem);
font-family: var(--grot);
font-weight: 700;
font-size: clamp(1rem, 0.8rem + 1vw, 1.4rem);
letter-spacing: 0.02em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.loader-count .pk {
color: var(--pink);
}
.loader-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--hairline);
}
.loader-bar > span {
display: block;
height: 100%;
background: var(--pink);
transform: scaleX(0);
transform-origin: left center;
animation: loaderFill 1.9s var(--ease) forwards;
}
@keyframes loaderRise {
to {
opacity: 1;
transform: none;
}
}
@keyframes loaderFill {
to {
transform: scaleX(1);
}
}
@keyframes loaderOut {
0%,
72% {
transform: translateY(0);
}
100% {
transform: translateY(-101%);
visibility: hidden;
}
}
@media (prefers-reduced-motion: reduce) {
.loader {
display: none !important;
}
}
body {
font-family: var(--sans);
background: var(--bg);
color: var(--ink);
line-height: 1.8;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
.wrap {
width: min(100% - 2.5rem, var(--maxw));
margin-inline: auto;
}
.grot {
font-family: var(--grot);
}
.skip {
position: absolute;
left: -999px;
}
.skip:focus {
left: 1rem;
top: 1rem;
z-index: 200;
background: var(--ink);
color: var(--bg);
padding: 0.7em 1.2em;
}
/* 見た目には出さず、読み上げと文書構造にだけ残す。
要素ごと消すと節から見出しが無くなり、構造が読めなくなるため。 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
:focus-visible {
outline: 2px solid var(--pink);
outline-offset: 3px;
}
/* ブランドの選択ハイライト */
::selection {
background: var(--pink);
color: var(--paper);
}
/* 見出し・本文の改行品質（対応外ブラウザは無視＝安全） */
h1,
h2,
.modal-info h3,
.rep-name {
text-wrap: balance;
}
.hero-row p,
.sec-body .sub,
.rep-bio,
.modal-info .bio,
.contact-lead .sub {
text-wrap: pretty;
}
/* スクロール進捗バー（最上部・CSSスクロール駆動／JS不要） */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 95;
background: var(--pink);
transform: scaleX(0);
transform-origin: left center;
pointer-events: none;
}
@supports (animation-timeline: scroll()) {
.scroll-progress {
animation: growProgress auto linear;
animation-timeline: scroll(root block);
}
}
@keyframes growProgress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* ============ header ============ */
/* 最上部は色を抜いて透過。スクロールで初めて薄い面＋ブラーが乗る。 */
.hd {
position: fixed;
inset: 0 0 auto 0;
z-index: 90;
background: transparent;
border-bottom: 1px solid transparent;
/* backdrop-filter はトランジションに含めない。
blur を毎フレーム補間するとSPの初回スクロールで一瞬かくつくため、
スクロール境界(24px)で一度だけ適用し、色/影のみ滑らかにフェードさせる。 */
transition: background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.hd.scrolled {
background: color-mix(in srgb, var(--bg) 72%, transparent);
backdrop-filter: saturate(1.1) blur(10px);
border-bottom-color: var(--hairline);
box-shadow: 0 10px 30px rgba(31, 30, 17, 0.05);
}
.hd-in {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
}
.logo {
display: inline-flex;
align-items: center;
}
/* ── ブランドロゴ（SVG）────────────────────────────────
支給された .ai からベクターのまま取り出したワードマーク。
定義は template-parts/site-logo-defs.php に1回だけ置き、