@charset "UTF-8";
/* ============================================================================
Honey music Associates
1. Reset
2. Tokens
3. Typography ← font 宣言はこのブロックにだけ書く
4. Layout
5. Motion
6. Loader
7. Header / Global nav
8. Hero
9. Section parts
10. Footer
11. Breakpoints
ルール
- font-family / font-size / font-weight / letter-spacing / line-height /
writing-mode は 3 にだけ書く。各セクションはレイアウトと色だけを持つ。
- サイズの実数は 2 の --fs-* トークンに置き、3 はトークンを参照するだけ。
SP のサイズ差もトークンの上書きで吸収する（11 には型指定を書かない）。
- 色は 2 の --c-* を使う。リテラルを直接書かない。
- 位置は原則フローで決める。absolute はヒーローだけ。
- 1rem = 16px 固定（ブラウザ標準）。数値は 1440 幅のデザインから起こしている。
========================================================================== */
/* ============================================================================
1. Reset
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button {
padding: 0;
border: none;
background: none;
color: inherit;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
img, svg { display: block; width: 100%; height: auto; }
canvas { display: block; }
html {
font-size: 100%; /* ブラウザ標準（通常16px）。px で固定するとユーザーの文字サイズ設定が効かない */
overflow-x: clip;
/* 慣性スクロールで端を越えたときに出る面。body の地（明るいグレー）のままだと
上下端が暗いこのサイトでは、footer の下などに灰色の帯が見える */
background: var(--c-dark-bg);
}
body {
min-height: 100vh;
background: var(--c-bg);
color: var(--c-fg);
overflow-x: clip;
}
body.is-loading,
body.is-nav-open { overflow: hidden; }
/* ============================================================================
2. Tokens
========================================================================== */
:root {
/* --- color ------------------------------------------------------------ */
--c-bg: #ececec; /* 地（2セクション目以降） */
--c-surface: #ffffff;
--c-panel: #e4e4e4; /* 参照元 rgb(228,228,228) */
--c-fg: #272727;
--c-dim: #8a8580;
--c-line: rgba(39, 39, 39, 0.16);
--c-dark-bg: #1a100d; /* ヒーロー・フッターなど暗い面 */
--c-dark-fg: #dedbd7;
--c-dark-dim: #8f8781;
--c-dark-line: rgba(222, 219, 215, 0.24);
--c-veil-hero: rgba(0, 0, 0, 0.6);
/* ロゴから拾った色 */
--c-honey: #fec201;
--c-amber: #fd9301;
--c-burnt: #f66704;
--c-brown: #402a15;
/* 画像が入る枠 */
--c-ph-bg: #dcd8d4;
--c-ph-line: #a8a29c;
--c-ph-txt: #6f6a65;
/* 暗い面での画像枠 */
--c-ph-bg-d: #2c211d;
--c-ph-line-d: #5c4f49;
--c-ph-txt-d: #9c928c;
/* --- layout ----------------------------------------------------------- */
/* 伸縮するものは clamp(下限, 768〜1440を結ぶ直線, 上限)。
真ん中を素の vw にすると原点を通る直線になり、1024 あたりでもう下限に張り付く。
切片を rem で持たせているのでブラウザの文字サイズ設定にも追従する。
下限は SP のデザイン値なので、11 に SP 用の上書きを書かなくてよい。 */
--gutter: clamp(1.5625rem, 1.0625rem + 1.0417vw, 2rem); /* 25 → 32px */
--inner: 81.5rem; /* 参照元 1304px。コンテナの上限なので固定 */
--header-h: 4.375rem; /* 70px。ヘッダーの高さは変えない */
--header-pad-l: clamp(1.25rem, 0.0357rem + 2.5298vw, 2.3125rem); /* 20 → 37px */
--header-pad-r: clamp(1.25rem, 0.0357rem + 2.5298vw, 2.3125rem);
--sec-top: calc(var(--header-h) + clamp(1.875rem, 0.4464rem + 2.9762vw, 3.125rem)); /* 固定ヘッダーぶん＋30〜50px */
--sec-bottom: clamp(4.375rem, 0.0893rem + 8.9286vw, 8.125rem); /* 70 → 130px */
--msg-gap: clamp(2rem, 0.8571rem + 2.381vw, 3rem); /* 見出しと本文のあき。32 → 48px */
--msg-measure: 51.25rem; /* 本文の行長。全幅にすると1行が長くなりすぎる */
/* --- motion ----------------------------------------------------------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur: 0.9s;
--dur-fade: 1s; /* 画像と本文のフェード */
/* --- font family ------------------------------------------------------ */
/* 見出しはロゴの丸ゴシックに揃える。ロゴが参照している A-OTF UD新丸ゴ（モリサワ）は
Web 利用に別契約が要るため、形の近い Zen Maru Gothic（SIL OFL・商用可）を使う。 */
--ff-en: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
--ff-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
--ff-ui: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
/* --- font weight ------------------------------------------------------ */
--fw-display: 700;
--fw-jp: 500;
/* --- font size (PC) ---------------------------------------------------- */
/* --fs-hero は上限を3つ並べて一番小さいものを採る。
12.5vw … 「MUSIC IS BORN.」を1行に収めるための幅の上限。
Zen Maru Gothic 700 は 7.39em ぶんの幅なので 94.4vw ÷ 7.39 ≒ 12.8vw。
書体を変えたら必ず測り直すこと（字幅は書体ごとに全く違う）。
30vh … 横長の画面で2行が縦に入りきらないのを防ぐ上限。 */
--fs-hero: min(16.25rem, 12.2vw, 30vh);
--lh-hero: 0.8; /* PC は2行。0.5 だと字の上下が重なる */
/* ローダーの「WHERE MUSIC IS BORN.」を1行で画面幅いっぱいに。
この文字列は Zen Maru Gothic 700 で 10.4em ぶんの幅がある。
使える幅を 90vw とすると 90 ÷ 10.4 ≒ 8.6vw。文字列か書体を変えたら測り直すこと。 */
--fs-loader: min(8.6vw, 8rem);
/* 大きい字だけ伸縮させる。本文と小さいラベルは固定（画面幅で読みやすさは変わらない） */
--fs-lead-l: clamp(1.5rem, 0.6964rem + 1.1905vw, 1.875rem); /* 22 → 30px */
--fs-name-s: clamp(1.375rem, 0.5714rem + 1.1905vw, 1.75rem); /* 20 → 28px */
--fs-dd: clamp(1.125rem, 0.7857rem + 0.4464vw, 1.25rem); /* 17 → 20px */
--fs-lead: clamp(1rem, 0.7857rem + 0.4464vw, 1.1875rem); /* 16 → 19px */
--fs-body: 1rem;
--fs-sub: 0.9375rem;
--fs-nav: 0.875rem;
--fs-label: 0.75rem;
}
@media (max-width: 767px) {
/* clamp で下限まで面倒を見ているものはここに書かない。
残しているのは SP で別の値にしたいものだけ。 */
:root {
--msg-measure: none;
--fs-hero: min(21.5vw, 26vh);
/* SP は3行。.rise__line の padding-block 0.25em が行送りに乗るので、
見た目の行送りは この値 + 0.25 になる。0.55 で実測 0.8 相当。 */
--lh-hero: 0.55;
--fs-body: 1rem; /* 16px。本文の標準 */
--fs-sub: 0.875rem; /* 14px */
--fs-nav: 1.5rem; /* 24px。ハンバーガー内は大きくする */
--fs-label: 0.75rem; /* 12px */
}
}
/* ============================================================================
3. Typography
HTML 側はここに並ぶクラスを当てるだけ。セクション側では font を宣言しない。
========================================================================== */
body {
font-family: var(--ff-ui);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.5;
}
/* --- 丸ゴシック（ロゴ由来） -------------------------------------------------
タイトルだけに使う。ほかは下の Noto Sans にまとめる。 */
.t-hero {
font-family: var(--ff-en);
font-weight: var(--fw-display);
font-style: normal;
}
.t-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: -0.02em; }
/* ローダー。ヒーローと同じ丸ゴシックで、幅に合わせて1行に収める */
.t-loader {
font-family: var(--ff-en);
font-weight: var(--fw-display);
font-size: var(--fs-loader);
line-height: 1;
letter-spacing: -0.01em;
}
/* --- Noto Sans（太らせない） ------------------------------------------------ */
.t-name-s,
.t-dd,
.t-lead,
.t-lead-l,
.t-body,
.t-sub,
.t-nav,
.t-label {
font-family: var(--ff-ui);
font-weight: 400;
}
/* 見出しに当たるものは 500。Noto Sans JP は 400/500 しか読み込んでいないので
700 を指定すると合成ボールドになる。増やすときは のほうも直すこと。 */
.t-name-s { font-size: var(--fs-name-s); line-height: 1.3; letter-spacing: 0.02em; font-weight: var(--fw-jp); }
.t-dd { font-size: var(--fs-dd); line-height: 1.4; letter-spacing: 0.02em; font-weight: var(--fw-jp); }
.t-lead { font-size: var(--fs-lead); line-height: 1.6; letter-spacing: 0.08em; font-weight: var(--fw-jp); }
.t-lead-l { font-size: var(--fs-lead-l); line-height: 1.2; letter-spacing: normal; font-weight: var(--fw-jp); }
.t-body { font-size: var(--fs-body); line-height: 2; letter-spacing: 0.04em; }
.t-sub { font-size: var(--fs-sub); line-height: 1.6; letter-spacing: 0.1em; }
.t-nav { font-size: var(--fs-nav); line-height: 1; letter-spacing: 0.08em; }
.t-label { font-size: var(--fs-label); line-height: 1.4; letter-spacing: 0.14em; }
/* ============================================================================
4. Layout
========================================================================== */
.main { position: relative; z-index: 2; }
.inner {
width: 100%;
max-width: var(--inner);
margin-inline: auto;
padding-inline: var(--gutter);
}
.sec { padding-block: var(--sec-top) var(--sec-bottom); }
/* 画面ぶんの高さを取り、中身を天地中央に置く。
svh を使うのはモバイルでアドレスバーの伸縮ぶんはみ出させないため */
.sec--full {
position: relative;
display: grid;
align-content: center;
min-height: 100svh;
}
.sec--full > .inner { position: relative; z-index: 1; }
/* ロゴのオレンジ面。文字はロゴの焦げ茶。白だとコントラスト 2.3:1 で読めない
（#402a15 なら 7.4:1）。ためし用なので、要らなければこのブロックごと消す */
.sec--accent {
--c-fg: var(--c-brown);
--c-dim: rgba(64, 42, 21, 0.66);
--c-line: rgba(64, 42, 21, 0.24);
--c-ph-bg: rgba(64, 42, 21, 0.10);
--c-ph-line: rgba(64, 42, 21, 0.30);
--c-ph-txt: rgba(64, 42, 21, 0.70);
background: var(--c-amber);
color: var(--c-fg);
}
/* 暗い面。色トークンをここで差し替えるので、中の .ph やカードは何も書かなくても追従する。
ヘッダーのロゴも入れ替わるため、増やしたら js の DARK_SECTIONS にも足すこと */
.sec--dark {
--c-fg: var(--c-dark-fg);
--c-dim: var(--c-dark-dim);
--c-line: var(--c-dark-line);
--c-ph-bg: var(--c-ph-bg-d);
--c-ph-line: var(--c-ph-line-d);
--c-ph-txt: var(--c-ph-txt-d);
background: var(--c-dark-bg);
color: var(--c-fg);
}
/* 見た目には出さないが、文書構造として残す見出し。
MENU / ARTIST / RELEASE … 各セクションの がこれ。
#about だけは本文の見出し（.msg__lead）が を兼ねるので付いていない。
見えるセクション見出しを立てることになったら .sec__heading 側で描く */
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* 参照元の実測: セクション高 727px / ロゴ幅は画面幅の 15.7% */
.sec__ttl { margin-bottom: 3.75rem; }
/* 画像が入る枠。実画像に差し替えるときは .ph ごと ![]()
に置き換える */
.ph {
position: relative;
display: grid;
place-items: center;
width: 100%;
height: 100%;
background-color: var(--c-ph-bg);
border: 1px solid var(--c-ph-line);
}
.ph::before,
.ph::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top right,
transparent calc(50% - 0.5px),
var(--c-ph-line) calc(50% - 0.5px),
var(--c-ph-line) calc(50% + 0.5px),
transparent calc(50% + 0.5px)
);
}
.ph::after { transform: scaleX(-1); }
.ph > span {
position: relative;
z-index: 1;
padding: 0.5em 0.9em;
background: var(--c-ph-bg);
color: var(--c-ph-txt);
}
/* 全面のフィルムグレイン */
.grain {
position: fixed;
inset: 0;
z-index: 9000;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.025;
}
.lenis.lenis-stopped { overflow: hidden; }
/* ============================================================================
5. Motion
行は HTML 側に .rise__line として書く。JS は .is-in を足すだけ。
========================================================================== */
/* 既定は「見える」状態。JS が動くと が付き、そこで初めて隠す。
こうしないと JS が転んだときに文字が全部消える。 */
.rise__line { display: block; }
.rise__line > span { display: block; }
/* 和文は line-height が詰まっていると字の上下が枠に当たって切れる。
箱に余白を持たせ、その分だけ負のマージンで相殺する。 */
.js-anim .rise__line {
overflow: hidden;
padding-block: 0.25em;
margin-block: -0.25em;
}
.js-anim .rise__line > span {
transform: translateY(110%);
transition: transform var(--dur) var(--ease-out);
}
.js-anim .rise.is-in .rise__line > span { transform: translateY(0); }
.js-anim .rise .rise__line:nth-child(2) > span { transition-delay: 0.08s; }
.js-anim .rise .rise__line:nth-child(3) > span { transition-delay: 0.16s; }
.js-anim .rise .rise__line:nth-child(4) > span { transition-delay: 0.24s; }
.js-anim .rise .rise__line:nth-child(5) > span { transition-delay: 0.32s; }
/* --- フェードイン（画像・本文） --------------------------------------------
.rise と同じで、既定は「見える」。js-anim が付いて初めて隠す。
不透明度だけだと動きが読み取れないので、少しだけ持ち上げる。 */
.js-anim .fade {
opacity: 0;
transform: translateY(1.5rem); /* 24px */
transition: opacity var(--dur-fade) var(--ease-out),
transform var(--dur-fade) var(--ease-out);
}
.js-anim .fade.is-in {
opacity: 1;
transform: translateY(0);
}
/* 横に並ぶカードは左から順に。一律の遅延を足すと出切る前に画面外へ流れるので、
全体を遅らせるのではなく、隣どうしをずらす。.rise の 0.08s と同じ刻み。 */
.js-anim .cards > .card:nth-child(2) .fade { transition-delay: 0.08s; }
.js-anim .cards > .card:nth-child(3) .fade { transition-delay: 0.16s; }
.js-anim .cards > .card:nth-child(4) .fade { transition-delay: 0.24s; }
.js-anim .cards > .card:nth-child(5) .fade { transition-delay: 0.32s; }
/* 縦に積む行も同じ考え方で */
.js-anim .news__item:nth-child(2) { transition-delay: 0.06s; }
.js-anim .news__item:nth-child(3) { transition-delay: 0.12s; }
.js-anim .news__item:nth-child(4) { transition-delay: 0.18s; }
.js-anim .news__item:nth-child(5) { transition-delay: 0.24s; }
.js-anim .news__item:nth-child(6) { transition-delay: 0.30s; }
.js-anim .media__item:nth-child(2) { transition-delay: 0.08s; }
.js-anim .info__row:nth-child(2) { transition-delay: 0.06s; }
.js-anim .info__row:nth-child(3) { transition-delay: 0.12s; }
/* --- スクランブル（h2 / h3） ------------------------------------------------
JS が [data-scramble] の中身を1文字ずつ に割り、
ランダムな字を回してから本来の字に落とす。
確定前も枠は同じ幅を占めるので、行送りは動かない。 */
.scr__line { display: block; }
.js-anim .scr:not(.is-in) [data-scramble] { visibility: hidden; }
.scr__ch {
display: inline-block;
opacity: 0;
transition: opacity 0.3s linear;
}
.scr__ch.is-on { opacity: 1; }
.scr__ch--space { width: 0.35em; }
/* --- パララックス（ヒーロー以外の画像） --------------------------------------
JS は --p（-1〜1）を入れるだけで、動かし方はここが決める。
移動は枠の高さに対する % なので、大小どのカードでも同じ見え方になる。
scale は移動ぶん（上下 6% ずつ）を覆う値。下げると端に隙間が出る。 */
.js-anim .card__img > img {
transform: translateY(calc(var(--p, 0) * 6%)) scale(1.13);
will-change: transform;
}
/* --- 下線が引ける ----------------------------------------------------------- */
.navline { position: relative; display: inline-block; }
.navline__line {
position: absolute;
bottom: -0.25rem;
left: 0;
width: 100%;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s var(--ease-out);
}
.navline:hover .navline__line { transform: scaleX(1); }
/* ============================================================================
6. Loader
========================================================================== */
@property --hole {
syntax: "";
inherits: false;
initial-value: 0%;
}
.loader {
position: fixed;
inset: 0;
z-index: 9500;
display: grid;
place-items: center;
background: var(--c-dark-bg);
color: var(--c-dark-fg);
--hole: 0%;
-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 0.5%));
mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 0.5%));
}
.loader.is-out {
--hole: 130%;
transition: --hole 1.6s cubic-bezier(0.7, 0, 0.25, 1);
}
.loader.is-done {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s linear, visibility 0.4s linear;
}
.loader__body {
display: grid;
gap: 1.5rem;
justify-items: center;
width: 100%;
text-align: center;
transition: opacity 0.5s linear;
}
.loader.is-out .loader__body { opacity: 0; }
/* 文字の中だけヒーロー画像を覗かせる（切り抜き）。
画像は .hero__media と同じファイルで、 済み。追加の読み込みは無い。
background-attachment: fixed で位置をビューポート基準にしているので、
幕が開いたあとのヒーローと絵がぴったり重なる。 */
/* 画面いっぱいに置くので、地に沈ませず本文色で出す */
.loader__en { color: var(--c-dark-fg); }
.loader__jp { color: var(--c-dark-dim); }
/* ============================================================================
7. Header / Global nav
========================================================================== */
/* 参照元の実測（画面幅1006px時）:
白地・高さ83px・ロゴ幅54px・左paddin g25.9px/右59.4px・ナビ9.8px
ハンバーガーは右端に貼り付く縦長の色帯 35×91px */
.site-header {
position: fixed;
top: calc(var(--header-h) * -1);
left: 0;
z-index: 8000;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: var(--header-h);
padding-inline: var(--header-pad-l) var(--header-pad-r);
color: var(--c-dark-fg);
opacity: 0;
transition: top var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.site-header.is-ready { top: 0; opacity: 1; }
/* ヒーローを抜けて白地に乗ったら文字とロゴを反転する */
.site-header.is-solid { background: var(--c-bg); color: var(--c-fg); }
.site-header.is-solid .site-header__logo-img--light { display: none; }
.site-header.is-solid .site-header__logo-img--dark { display: block; }
.site-header__logo { width: 11.25rem; }
.site-header__logo-img--dark { display: none; }
.gnav__list { display: flex; align-items: center; gap: 2rem; }
/* ハンバーガーは SP でだけ出す */
.gnav-toggle {
display: none;
position: relative;
z-index: 8100;
width: 2rem;
height: 1.5rem;
}
.gnav-toggle__bar {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: currentColor;
}
.gnav-toggle__bar:nth-child(1) { top: 0; }
.gnav-toggle__bar:nth-child(2) { top: 50%; }
.gnav-toggle__bar:nth-child(3) { top: 100%; }
/* ============================================================================
8. Hero
========================================================================== */
.hero {
position: relative;
display: flex;
align-items: flex-end;
height: 100vh;
height: 100svh;
/* セクション側の --gutter / --header-h を変えてもヒーローが動かないよう独立させる */
padding: 5.625rem 3.75rem 5rem;
background: var(--c-dark-bg);
color: var(--c-dark-fg);
}
.hero__media {
position: absolute;
inset: 0;
background-color: var(--c-dark-bg);
background-image: url(../images/hero.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--c-veil-hero);
}
/* SP は WHERE / MUSIC / IS BORN. の3行。
768px 以上では「MUSIC」と「IS BORN.」を横に繋いで2行に戻す（下の 11 を参照）。 */
.hero__ttl { position: relative; z-index: 2; }
.hero__jp { display: block; margin-bottom: 1.5rem; }
.hero__main { display: block; }
/* ============================================================================
9. Section parts
========================================================================== */
/* --- メッセージ -------------------------------------------------------------
参照元は見出し左・本文右の2カラムだったが、見出しの下に本文を積む1カラムにした。
セクションは画面ぶんの高さを取る（.sec--full） */
.msg { display: grid; gap: var(--msg-gap); }
.msg__body {
display: grid;
gap: 2rem;
max-width: var(--msg-measure);
}
.sec__txt { max-width: 47.5rem; margin-bottom: 3.75rem; }
/* --- カード ------------------------------------------------------------------ */
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem 1.875rem;
}
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--5 { grid-template-columns: repeat(5, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card { display: grid; gap: 0.75rem; align-content: start; }
/* 角丸は全カード共通。中の ![]()
を切るので overflow も要る */
.card__img {
margin-bottom: 0.75rem;
overflow: hidden;
border-radius: 1rem; /* 16px */
}
.card__img--sq { aspect-ratio: 1 / 1; }
.card__img > img { width: 100%; height: 100%; object-fit: cover; }
/* ロゴは切らずに原寸比で置く。ファイルごとに縦横比が違うので高さは指定しない */
.card__logo { width: 100%; max-width: 15rem; }
.card__logo > img { width: 100%; height: auto; }
.card__meta { color: var(--c-dim); }
.card__sub { color: var(--c-dim); }
.card__txt { color: var(--c-fg); }
/* アーティストの外部リンク。下線は .navline が引く */
.card__links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 0.5rem; }
/* --- ビジュアル -------------------------------------------------------------- */
/* --- 体制・設備 -------------------------------------------------------------- */
/* --- メディア ---------------------------------------------------------------- */
.media { display: grid; gap: 3.75rem; }
.media__head { display: grid; gap: 1.25rem; justify-items: start; max-width: 47.5rem; }
.media__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.875rem; }
.media__item { display: grid; }
.media__link {
display: grid;
gap: 0.5rem;
align-content: start;
padding: 1.5rem;
border: 1px solid var(--c-line);
border-radius: 1rem; /* カード画像と同じ16px */
transition: opacity 0.3s linear;
}
.media__link:hover { opacity: 0.55; }
/* ハチミツ色(#fec201)はオレンジ地(#fd9301)とほぼ同じ明度で沈むため、
オレンジ面では本文色に落とす */
.media__service { color: var(--c-honey); }
.sec--accent .media__service { color: var(--c-fg); }
.media__url { color: var(--c-dim); overflow-wrap: anywhere; }
/* --- プロジェクト ------------------------------------------------------------ */
/* --- 拠点 -------------------------------------------------------------------- */
/* --- お知らせ --------------------------------------------------------------- */
.news { border-top: 1px solid var(--c-line); }
.news__item { border-bottom: 1px solid var(--c-line); }
/* いまは飛び先が無いので