@charset "utf-8";
/* ------------------------------------------------------------------
 * nak-restore.css
 *
 * NAK建築事務所サイトを Internet Archive から復元して
 * https://www.lusic.co.jp/nak/ に設置するにあたって足したもの。
 * BiNDup が生成した元CSS（index.css / _dress/* / _module/*）は
 * 1バイトも書き換えず、上書きはすべてこのファイルに集約する。
 * ------------------------------------------------------------------ */

/* === 1. FONTPLUS のフォールバック =================================
 *
 * bind.js は data-fontplus="1" のとき module.bindsite.jp の許可ドメイン一覧
 * （type-fonts/allowed/domain.json）を引き、そこに自分のホスト名が載っている
 * ときだけ webfont を読む。2026-09-02 に実物を取得して確認したところ、
 * 載っているのは *.bindcloud.jp / *.myshopify.com / bizmw-hp.jp / localhost で、
 * **nak-ao.com は入っていない**。つまり FONTPLUS は元の本番サイトでも
 * 動いていない。移設によって失われるものは無い。
 *
 * 一方 _dress の CSS は font-family:"FOT-セザンヌ Pro DB" をフォールバック無しで
 * 指定しているため、見出しだけ閲覧者ごとの既定フォント（環境によっては明朝）に
 * 落ちて本文とちぐはぐになる。ここで本文（bind.css の body）と同じ和文ゴシックの
 * スタックを足して揃える。FONTPLUS が有効な環境では従来どおりセザンヌが優先される。
 *
 * ⚠️ localhost は許可ドメインに入っているので、ローカルで見るとセザンヌが当たる。
 *    ローカルで見た字面を本番の期待値にしないこと。
 * ================================================================== */
body,
body .c-title,
body .c-large_headline,
body .c-small_headline,
body .c-page_title,
body .c-lead,
body .c-body,
body .c-enclosure {
  font-family: "FOT-セザンヌ Pro DB", "FOT-セザンヌ Pro M", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic",
    Meiryo, sans-serif;
}

/* === 2. アイコンフォントの代替 ====================================
 *
 * bind.css は [class^=icon-] に font-family:digitalstage を当て、
 * .icon-close:before などで私用領域のコードポイント（U+E663 等）を出す。
 * その digitalstage フォント（_module/font/digitalstage.*）は
 * Internet Archive に残っていない。
 *
 * 静的HTMLには icon-* クラスが1つも無いので当初は「未使用」と判断したが、
 * **bind.js が実行時に生成するSPドロワーメニューが icon-close を使う**。
 * SP幅で実機確認したところ digitalstage.woff / .ttf を実際に要求していた。
 * このままだと閉じるボタンが豆腐（□）か空白になって押す場所が分からない。
 *
 * フォント自体は復元できないので、実際に使われる3種だけ通常の文字に置き換える。
 * font-family を上書きすることで @font-face が参照されなくなり、
 * 404 も同時に消える（フォントを空ファイルで置くより安全）。
 * ================================================================== */
[class^="icon-"],
[class*=" icon-"] {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic", Meiryo, sans-serif;
}

.icon-close:before {
  content: "\00D7"; /* × */
}

.icon-right_arrow:before {
  content: "\203A"; /* › */
}

.icon-left_arrow:before {
  content: "\2039"; /* ‹ */
}

/* === 3. スライドショー ============================================
 *
 * BiNDup 本来のエンジン（_plugins/slide/<名前>/engine.js）はアーカイブに
 * 1件も残っていない。bind.css の
 *
 * ⚠️ このコメント内に「アスタリスク＋スラッシュ」を書かないこと。
 *    パス例を _plugins/slide/(アスタリスク)/engine.js と書いた結果、
 *    そこでコメントが閉じてしまい、以下のルールが丸ごと無効になった。
 *     .js-slide { visibility:hidden }
 *     .js-slide > span { display:none }
 * をここで打ち消し、nak-restore.js が回す。
 *
 * 打ち消しは **.nak-slide が付いたときだけ** 効くようにしてある。
 * このクラスは nak-restore.js が付ける。JSが動かない環境では
 * 何も変わらず、原本と同じ「スライドは非表示」の状態に留まる
 * （中途半端に全枚数が縦積みで出てしまうのを防ぐため）。
 * ================================================================== */
.js-slide.nak-slide {
  visibility: visible;
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  /* 高さは padding-top（data-width / data-height から算出）で作る。
     元の s-slide-aspect_N クラスはこのページの17件には付いていない。 */
}

/* data-apply-area="1"（ビルボードのヒーロー1件）はエリア全面の背景として敷く。
   nak-restore.js がエリア直下の先頭へ移動させたうえでこのクラスを付ける。 */
.nak-slide-area-host {
  position: relative;
}

.nak-slide-area-host > *:not(.nak-slide-area) {
  position: relative;
  z-index: 1;
}

.js-slide.nak-slide.nak-slide-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-top: 0;
  z-index: 0;
}

.js-slide.nak-slide > .s-slide-img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity var(--nak-slide-duration, 1000ms) ease-in-out;
  pointer-events: none;
}

.js-slide.nak-slide > .s-slide-img.is-active {
  opacity: 1;
  pointer-events: auto;
}

.js-slide.nak-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.js-slide.nak-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 写真キャプション。原本は data-disp-comment="always"（17件すべて）で、
   実際に 42 枚に「外観東面」「風除室」などの文言が入っている。 */
.js-slide.nak-slide > .s-slide-img > .slide-title:not(:empty) {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.5em 1em;
  background-color: rgba(30, 44, 34, 0.72);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.js-slide.nak-slide > .s-slide-img > .slide-body:not(:empty) {
  position: absolute;
  left: 0;
  bottom: 2.6em;
  padding: 0.4em 1em;
  background-color: rgba(30, 44, 34, 0.72);
  color: #fff;
  font-size: 0.8rem;
}

/* 前後ボタン。原本は data-dir-type="mouseover"（17件すべて）なので
   ホバーしたときだけ出す。data-nav-type は全件 "none" ＝ドットナビは作らない。 */
.js-slide.nak-slide .nak-slide-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.js-slide.nak-slide .nak-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(30, 44, 34, 0.45);
  color: #fff;
  font-size: 26px;
  line-height: 44px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.25s ease;
  pointer-events: auto;
}

.js-slide.nak-slide .nak-slide-arrow.-prev {
  left: 12px;
}
.js-slide.nak-slide .nak-slide-arrow.-next {
  right: 12px;
}

.js-slide.nak-slide:hover .nak-slide-arrow,
.js-slide.nak-slide .nak-slide-arrow:focus-visible {
  opacity: 1;
}

.js-slide.nak-slide .nak-slide-arrow:hover {
  background-color: rgba(4, 140, 77, 0.85);
}

/* 指が使えるだけの端末では常時出す（ホバーが無いため） */
@media (hover: none) {
  .js-slide.nak-slide .nak-slide-arrow {
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-slide.nak-slide > .s-slide-img {
    transition: none;
  }
}