/* ========== Base ========== */
:root {
  --bg: #f7f7f7;
  --fg: #545454;
  --muted: #9a9a9a;

  /* ヒーロー＆プレビュー（PCデフォルト） */
  --preview-x: 50px;
  --preview-y: 50%;
  --preview-offset-y: 105px;
  --preview-width: 960px;
  --preview-height: 540px;

  /* 共通ヘッダー */
  --gutter-x: 30px;
  --header-h: 72px;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "AXIS Std", "Noto Sans JP", sans-serif;


  font-weight: 200;
  font-size: 16px;
  line-height: 1.6;
}

main {
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}

/* ========== 共通ヘッダー（全ページ共通） ========== */

header {
  position: fixed;
  top: 0;

  width: 100%;
  height: var(--header-h);

  /* ★ 左右どちらも同じ gutter にする */
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);

  display: flex;
  align-items: center;
  box-sizing: border-box;
  z-index: 1000;
}

.header-container {
  display: flex;
  align-items: center;
  gap: 0px;
  width: 100%;
}

.header-title {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.35em;
  font-size: 0.7rem;
}

.header-title__link {
  text-decoration: none;
  color: inherit;
}

header nav {
  margin-left: auto;
}

/* TOP / ALL 横並びナビ */
header nav ul {
  display: flex;
  align-items: center;
  gap: 60px; /* TOP と ALL の間隔 */
  list-style: none;
  margin: 0;
  padding: 0;
}

header nav a {
  text-decoration: none;
  color: #545454;
  font-family: "AXIS Std", "Noto Sans JP", sans-serif;


  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  /* transition: opacity 0.3s ease; */
}

header nav a:hover {
  opacity: 0.6;
}

/* main がヘッダーに隠れないように */
body.page-top main,
body.page-all main,
body.page-profile main {
  padding-top: calc(var(--header-h) + 0px);
}

/* スマホ時のヘッダー調整 */
@media (max-width: 768px) {
  :root {
    --gutter-x: 16px;
    --header-h: 56px;
  }

  header {
    padding-left: 0;
    padding-right: var(--gutter-x); /* ← 右だけ余白 */
  }

  .header-title {
    font-size: 0.65rem;
  }

  .header-icon {
    width: 15px;
    height: 15px;
  }

  header nav ul {
    gap: 36px;
  }

  header nav a {
    font-size: 0.65rem;
  }

  body.page-top main,
  body.page-all main,
  body.page-profile main {
    padding-top: calc(var(--header-h) + 12px);
  }
}

/* さらに小さい端末 */
@media (max-width: 480px) {
  :root {
    --header-h: 52px;
  }

  .header-title {
    font-size: 0.9rem;
  }
}

/* ========== フッター共通 ========== */

footer {
  font-size: clamp(0.6rem, 0.8vw + 0.4rem, 0.65rem);
  line-height: 1.0;
  padding: clamp(0.8em, 2vw, 1.2em) clamp(2em, 5vw, 3em);
}

footer p,
footer a {
  font-size: clamp(0.6rem, 0.8vw + 0.4rem, 0.65rem);
  font-weight: 200;
}

@media (max-width: 768px) {
  footer {
    padding: 0.8em 1.5em;
    text-align: center;
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  footer {
    font-size: 0.65rem;
    line-height: 1.3;
    padding: 0.6em 1em;
  }
}

/* ========== トップページ：中央固定タイトル & コピーライト ========== */

.site-title-fixed {
  position: fixed;
  top: 50%;
  left: var(--gutter-x);
  transform: translateY(-50%);
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.0rem, 0.5rem + 3vw, 1.0rem);
  letter-spacing: 0.35em;
  color: #000000;
  text-align: left;
  z-index: 800;
  pointer-events: none;

  /* ニョキニョキ出てくるアニメーション */
  opacity: 0;
  animation: nyokiTitle 0.8s cubic-bezier(.22, .82, .25, 1) 0s forwards;
}

.site-copy-fixed {
  position: fixed;
  top: 50%;
  left: var(--gutter-x);
  transform: translateY(-50%);
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.0rem, 0.5rem + 3vw, 1.0rem);
  letter-spacing: 0.35em;
  color: #000000;
  text-align: left;
  z-index: 800;
  pointer-events: none;

  /* ニョキニョキ出てくるアニメーション */
  opacity: 0;
  animation: nyokiTitle 0.8s cubic-bezier(.22, .82, .25, 1) 0s forwards;
}

/* にょきにょき出てくる感じのアニメーション */
@keyframes nyokiTitle {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateY(20px) scaleY(0.7);
  }
  60% {
    opacity: 1;
    transform: translateY(-50%) translateY(-4px) scaleY(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateY(0) scaleY(1);
  }
}

/* ==== 一文字ずつ出てくるアニメ ==== */

/* 全体に「子要素を1文字ずつ扱う」指定 */
.site-title-fixed,
.site-copy-fixed {
  display: inline-block;
}

/* 文字を1文字ずつの擬似要素に分割 */
.site-title-fixed span,
.site-copy-fixed span {
  opacity: 0;
  display: inline-block;
  animation: fadeChar 0.5s ease forwards;
}

/* 文字のアニメーション */
@keyframes fadeChar {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スクロール後に消える（JS で body.scrolled を付与） */
body.scrolled .site-title-fixed,
body.scrolled .site-copy-fixed {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* スマホ時：重なり調整 */
@media (max-width: 768px) {
  .site-title-fixed {
    left: 20px;
    top: 45%;
    transform: translateY(-50%);
    font-size: 0.65rem !important;
    line-height: 1.2;
  }

  .site-copy-fixed {
    right: 20px;
    top: 55%;
    transform: translateY(-50%);
    font-size: clamp(0.9rem, 0.7rem + 1.8vw, 0.65rem);
    opacity: 0.9;
  }
}

@media (max-width: 480px) {
  .site-title-fixed {
    font-size: clamp(0.9rem, 0.8rem + 2vw, 0.65rem);
  }
  .site-copy-fixed {
    font-size: clamp(0.8rem, 0.7rem + 1.5vw, 0.65rem);
  }
}

/* ============================
   トップ画面プレビューを全画面表示
   ============================ */

.hero-slideshow {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh; /* ← 画面の高さいっぱい */

  margin: 0;
  padding: 0;

  overflow: hidden;
  background: #000; /* 調整：黒背景（なくてもよい） */

  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 900;
}

/* 全画面スライドを黒っぽく落とす */
.hero-slideshow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 5;
}

.hero-slideshow img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ヒーロー画像（自動スライド） */
.hero-slideshow img,
.hover-preview-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* スクロール後にヒーロー表示 */
body.scrolled .hero-slideshow {
  opacity: 1;
  pointer-events: auto;
}

/* 作品番号ホバー時の左プレビュー表示 */
.hover-preview-left.show {
  opacity: 1;
  pointer-events: auto;
}

/* プレビューをヒーローとぴったり同じ位置に揃える */
.hover-preview-left {
  left: var(--preview-x);
  top: var(--preview-y);
  transform: translateY(calc(-50% + var(--preview-offset-y)));
  width: var(--preview-width);
  height: var(--preview-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========== Works List（右側 作品番号リスト） ========== */

/* 初期は非表示。スクロール後にフェードイン */
.works-list {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

body.scrolled .works-list {
  opacity: 1;
  pointer-events: auto;
}

/* PC：右側縦並び */
@media (min-width: 769px) {
  .works-list {
    position: fixed;
    right: 30px; /* 右端からの距離（お好みで） */

    top: auto;
    bottom: 5vh; /* ★ 画面下から10%の高さに配置 */

    transform: none;
    text-align: right;
    z-index: 950;
  }

  .works-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .works-list li + li {
    margin-top: 8px;
  }

  .works-list a {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 12px;
    text-decoration: none;
    color: #000000;
    font-weight: 400;
  }

  .works-list .idx {
    min-width: 1.0rem;
    text-align: left;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    font-size: 1.0rem;
    line-height: 1.4;
  }

  .works-list .label {
    text-align: left;
    font-size: 1.0rem;
    line-height: 1.4;
    opacity: 0.85;
  }
}

/* スマホ：画面下に横スクロールバー */
@media (max-width: 768px) {
  .works-list {
    position: fixed;
    bottom: 12px;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent !important;
    padding: 0.6em 0 env(safe-area-inset-bottom);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    display: block;
    scrollbar-width: none;
    z-index: 1000;
  }

  .works-list::-webkit-scrollbar {
    display: none;
  }

  .works-list ul {
    display: inline-flex;
    gap: 12px;
    padding: 0 16px;
    margin: 0;
    list-style: none;
    white-space: nowrap;
  }

  .works-list li {
    scroll-snap-align: center;
  }

  .works-list a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.5rem;
    color: #ffffff;
    text-decoration: none;
  }

  .works-list .label {
    display: none; /* スマホは番号だけ */
  }
}

/* ========== Profile page（page-profile） ========== */

.page-profile .profile {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end; /* ← 下揃え */
  padding: 0 var(--gutter-x) 2vh var(--gutter-x);
}

/* ===============================
   Profileページ：
   PC/SP 共通で 1画面固定（ヘッダー+本文+フッター）
   スクロール完全禁止 / Safari対応
   =============================== */

/* フッター高さを固定（必要なら数値調整） */
body.page-profile footer {
  height: var(--profile-footer-h, 72px);
  box-sizing: border-box;
}

/* スマホだけフッターを少し低くしたい場合（任意） */
@media (max-width: 768px) {
  body.page-profile {
    --profile-footer-h: 64px; /* ← 好みで 56px など */
  }
}

.page-profile .profile-content {
  max-width: clamp(560px, 80vw, 920px);
  color: #000000;
  font-family: "AXIS Std", "Noto Sans JP", sans-serif;
  font-weight: 200;
  line-height: 1.8;
}

.page-profile .profile-content h2 {
  margin: 0 0 1em 0;
  color: #000000;
  font-weight: 300;
  letter-spacing: 0.1em;
  font-size: clamp(8px, 1.2vw + 10px, 0.4px);
  line-height: 1.6;
}

.page-profile .profile-text {
  margin: 0 0 1em 0;
  color: #000000;
  font-weight: 300;
  font-size: clamp(8px, 0.9vw + 4px, 0.4px);
  line-height: 1.9;
  letter-spacing: 0.1em;
}

.page-profile .profile-content a {
  color: #545454;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.page-profile .profile-content a:hover {
  opacity: 0.75;
}

.page-profile footer {
  display: block;
  text-align: right;
  padding: clamp(10px, 2vw, 16px) clamp(20px, 4vw, 48px);
  font-size: clamp(11px, 0.9vw + 8px, 14px);
  line-height: 1.5;
}

/* Profile responsive */
/* ===============================
   📄 Profile ページの左端をヘッダーと揃える
   =============================== */
@media (min-width: 769px) {
  .page-profile .profile {
    padding-left: var(--gutter-x) !important;
    padding-right: var(--gutter-x) !important;
  }

  .page-profile .profile-content {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  .page-profile .profile {
    min-height: calc(100vh - var(--header-h));
    padding: 0 20px 2vh 20px;
    align-items: flex-end;
  }
  .page-profile .profile-content {
    max-width: 100%;
  }
  .page-profile .profile-content h2 {
    font-size: clamp(8px, 2.2vw + 9px, 0.45px);
  }
  .page-profile .profile-text {
    font-size: clamp(8px, 2vw + 8px, 0.45px);
    line-height: 1.85;
  }
  .page-profile footer {
    text-align: center;
    padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  .page-profile .profile {
    padding: 0 16px clamp(68px, 12vh, 96px) 16px;
  }
  .page-profile .profile-content h2 {
    letter-spacing: 0.06em;
    line-height: 1.55;
  }
  .page-profile .profile-text {
    line-height: 1.8;
  }
}

@supports (padding: max(0px)) {
  .page-profile .profile {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(68px, env(safe-area-inset-bottom));
  }
  .page-profile footer {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }
}

/* ========== 各作品ページ（page-work） ========== */

.page-work main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 100vh;
  padding: 2em; /* 下余白なし */
  box-sizing: border-box;
  background: #f7f7f7;
  gap: 4vw;
}

/* 左側テキストエリア */
.page-work .work-text {
  width: 35vw;
  color: #000000;
  font-family: "AXIS Std", "Noto Sans JP", sans-serif;
  font-weight: 300;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 2em;
}

/* タイトル */
.page-work .work-text h2 {
  font-size: clamp(0.1rem, 1.2vw + 0.5rem, 0.5rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 4.0;
  margin: 0 0 2em 0;
  color: #000000;
}

/* 本文 */
.page-work .work-text p {
  font-size: clamp(0.2rem, 0.9vw + 0.4rem, 0.5rem);
  line-height: 2.0;
  letter-spacing: 0.15em;
  margin: 0 0 0.5em 0;
  color: #000000;
}

/* 制作期間など */
.page-work .work-meta {
  font-size: clamp(0.1rem, 0.6vw + 0.3rem, 0.5rem);
  opacity: 0.7;
  margin-top: 0.4em;
  letter-spacing: 0.15em;
}

/* 右側画像エリア */
.page-work .work-images {
  width: 60vw;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}

/* 画像と動画を “まとめて” 同じレイアウトにする */
.page-work .work-images > * {
  width: 100%;
  display: block;
  align-self: flex-end;
  margin: 0;
  padding: 0;
}

/* 間の余白（画像同士でも、画像⇔動画でも共通） */
.page-work .work-images > * + * {
  margin-top: 1vh;
}

/* 1つめだけ上に余白（ヘッダーと被らないように） */
.page-work .work-images > *:first-child {
  margin-top: 5vh;
}

/* 画像専用のフィット設定 */
.page-work .work-images img {
  height: auto;
  object-fit: contain;
}

/* Vimeo 動画専用（16:9でトリミングして表示） */
.page-work .work-images iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover; /* 画面に気持ちよくトリミング */
  border: none;
}

/* 動画も画像と同じレイアウトにする */
.page-work .work-video {
  width: 100%;
  align-self: flex-end;
  margin-top: 2vh;
}

/* Vimeo iframe を画像と同じフィット方法に */
.page-work .work-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: contain;
  border: none;
}

/* 1つ目の要素が動画の場合に 8vh を付ける */
.page-work .work-video:first-child {
  margin-top: 5vh;
}

/* PC：作品情報を左下に固定（スクロールしても動かない） */
@media (min-width: 769px) {
  .page-work {
    /* ✅ 左の基準をヘッダーと同じにする */
    --left-gutter: var(--gutter-x);
    --bottom-pad: 0.1vh;
    --text-width: 35vw;
    --gap: 1vw;
  }

  /* 左下のテキスト：ヘッダータイトルと左端を揃える */
  .page-work .work-text {
    position: fixed;
    left: var(--gutter-x);
    bottom: var(--bottom-pad);
    width: var(--text-width);
    z-index: 5;
  }

  /* 右側エリア（画像）が ALL の右端と揃うように */
  .page-work main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    min-height: 100vh;

    padding-left: calc(var(--left-gutter) + var(--text-width) + var(--gap));
    padding-right: var(--gutter-x);
    box-sizing: border-box;
    gap: 4vw;
  }

  .page-work .work-images {
    width: 60vw;
    margin-left: auto;
  }
}

/* スマホ：画像フル幅 & テキストは固定せず流す */
@media (max-width: 768px) {
  .page-work {
    --sp-media-gap: 2vh;
  }

  .page-work main {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 80px 20px 0 20px;
  }

  .page-work .work-text {
    position: static;
    width: 100%;
    margin-bottom: 2em;
  }

  .page-work .work-images {
    width: 100vw;
    max-width: 100%;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .page-work .work-images img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100vh;
    object-fit: contain;
    margin: 0 auto;
  }

  .page-work .work-images img:first-child {
    margin-top: 6vh;
  }

  .page-work .work-images img + img {
    margin-top: 4vh;
  }
}

/* ===============================
   トップページだけ：スクロール前はヘッダー非表示
   =============================== */

/* page-top かつ .scrolled がまだ付いていないとき → ヘッダー隠す */
body.page-top:not(.scrolled) header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* page-top でスクロールして .scrolled が付いたら → ヘッダー表示 */
body.page-top.scrolled header {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ほかのページ（ALL / PROFILE / WORK）は常に表示（保険） */
body.page-all header,
body.page-profile header,
body.page-work header {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* ===== TOPページ作品番号：PC用決定版 ===== */
@media (min-width: 769px) {
  .works-list .idx,
  .works-list .label {
    font-size: 0.4rem !important;
    font-weight: 400 !important;
    color: #ffffff !important;
  }

  .works-list a {
    font-size: 0.65rem !important;
    font-weight: 400 !important;
    color: #ffffff !important;
  }
}

/* ===============================
   トップページだけ：ヘッダー文字色変更
   =============================== */
body.page-top header,
body.page-top header a,
body.page-top header .header-title,
body.page-top header nav a {
  color: #ffffff !important;
}

@media (min-width: 769px) {
  /* PC：番号と日付のレイアウト安定版 */
  .works-list a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 180px;
    text-decoration: none;
  }

  .works-list .idx {
    flex: 0 0 auto;
    min-width: 3ch;
    text-align: left;
  }

  .works-list .label {
    margin-left: auto;
    width: 130px;
    text-align: right;
    white-space: nowrap;
    letter-spacing: 0.08em;
  }
}

/* ==============================
   TOPページ PC用：
   番号は左、日付は右でガチ固定
   ============================== */
@media (min-width: 769px) {
  .page-top .works-list a {
    display: flex !important;
    align-items: baseline;
    justify-content: flex-start !important;
    text-decoration: none;
    width: 230px;
    gap: 8px;
  }

  .page-top .works-list .idx {
    flex: 0 0 auto;
    min-width: 3ch;
    text-align: left;
  }

  .page-top .works-list .label {
    flex: 0 0 auto;
    margin-left: auto !important;
    width: 150px !important;
    text-align: right !important;
    white-space: nowrap !important;
    letter-spacing: 0.08em;
  }
}

/* ============================================
   📱 スマホ時：スライド／プレビューを画面いっぱいに
   ============================================ */
@media (max-width: 768px) {
  .hero-slideshow,
  .hover-preview-left {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    margin: 0;
    padding: 0;
    transform: none;

    max-width: 100vw;
    z-index: 900;
  }

  .hover-preview-left {
    z-index: 950;
  }

  .hero-slideshow img,
  .hover-preview-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* =================================
   ALLページ専用：ヘッダーを共通位置に固定
   ================================= */

/* 念のため、ALLページでは header-container の余白もゼロに揃える */
body.page-all .header-container {
  padding: 0 !important;
  margin: 0;
}

/* ============================
   ALLページ：番号と日付のフォント調整
   ============================ */
body.page-all .meta .idx {
  font-size: 0.65rem !important;
  font-weight: 300 !important;
  color: #000000 !important;
}

body.page-all .meta .label {
  font-size: 0.65rem !important;
  font-weight: 300 !important;
  color: #545454 !important;
}

@media (max-width: 768px) {
  body.page-all .meta .idx {
    font-size: 0.4rem !important;
  }
  body.page-all .meta .label {
    font-size: 0.4rem !important;
  }
}

@media (max-width: 768px) {
  body.page-all .meta,
  body.page-all .meta .label,
  body.page-all .meta .meta-alt span {
    font-size: 0.4rem !important;
  }
}

/* ============================
   ALLページ：画像の左右をヘッダーと揃える
   ============================ */
body.page-all main {
  padding-left: var(--gutter-x) !important;
  padding-right: var(--gutter-x) !important;
  box-sizing: border-box;
}

body.page-all .grid {
  width: 100%;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

/* ================================
   ヘッダー文字ホバーアニメーション
   ================================ */
.js-hover-anim {
  display: inline-block;
  white-space: nowrap;
  position: relative;
}

/* 各文字の基本状態 */
.js-hover-anim span {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  will-change: opacity, transform;
}

/* ホバー時：沈んで消えて → 一文字ずつ出現 */
.js-hover-anim:hover span {
  opacity: 0;
  transform: translateY(0.45em);
  animation: charPopIn 0.55s forwards ease-out;
  animation-delay: calc(0.25s + var(--i) * 0.05s);
}

/* スペースはそのまま */
.js-hover-anim .space {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ニョキニョキ出現アニメーション */
@keyframes charPopIn {
  0% {
    opacity: 0;
    transform: translateY(0.6em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== TOPページ作品番号＆日付：ホバー時の一文字ずつアニメーション ===== */
.works-list .idx span,
.works-list .label span {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
}

.works-list a:hover .idx span,
.works-list a:hover .label span {
  animation: worksHoverType 1.0s forwards;
  animation-delay: calc(var(--i) * 0.03s);
}

@keyframes worksHoverType {
  0% {
    opacity: 0;
    transform: translateY(0.4em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== ALLページ：ホバー時に番号＆日付 → 任意テキストに切り替え ========== */
.meta {
  position: relative;
  overflow: hidden;
}

.meta .idx,
.meta .label {
  transition: transform .45s ease, opacity .45s ease;
}

.card:hover .meta .idx,
.card:hover .meta .label {
  transform: translateY(50%);
  opacity: 0;
}

.meta .meta-alt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.25em;
  pointer-events: none;
  white-space: nowrap;
}

.meta .meta-alt span {
  opacity: 0;
  display: inline-block;
  transform: translateY(8px) scaleY(0.2);
}

.card:hover .meta .meta-alt span {
  animation: nyoki 0.45s ease-out forwards;
  animation-delay: calc(var(--i) * 0.05s);
}

/* ================================
   ALLページ：番号・日付・タイトルのフォント統一
   ================================ */
.grid .meta,
.grid .meta .idx,
.grid .meta .label,
.grid .meta-alt,
.grid .meta-alt span {
  font-size: 0.5rem !important;
  font-weight: 300 !important;
  color: #000000 !important;
  letter-spacing: 0.05em !important;
}

@keyframes nyoki {
  0% {
    opacity: 0;
    transform: translateY(8px) scaleY(0.2);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scaleY(1.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

/* ✅ ヘッダーの左端を .site-title-fixed と必ず揃える */
body header {
  padding-left: var(--gutter-x) !important;
}

/* ==========================
   ALLページ・スマホ用
   番号+日付が沈んだ直後にタイトル出現
   ========================== */
@media (max-width: 768px) {
  .page-all .meta {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    overflow: hidden;
  }

  .page-all .meta .idx,
  .page-all .meta .label,
  .page-all .meta .meta-alt span {
    display: inline-block;
  }

  .page-all .meta .meta-alt {
    white-space: nowrap;
  }

  .page-all .meta .meta-alt span {
    opacity: 0;
    transform: translateY(0.6em);
  }

  @keyframes meta-sink-out {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0.6em); }
  }

  @keyframes meta-nyoki-in {
    0% { opacity: 0; transform: translateY(0.6em) scaleY(0.4); }
    60% { opacity: 1; transform: translateY(-0.1em) scaleY(1.1); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
  }

  .page-all .meta.state-base .idx,
  .page-all .meta.state-base .label {
    opacity: 1;
    transform: translateY(0);
    animation: none;
  }

  .page-all .meta.state-base .meta-alt span {
    opacity: 0;
    transform: translateY(0.6em);
    animation: none;
  }

  .page-all .meta.state-alt .idx,
  .page-all .meta.state-alt .label {
    animation: meta-sink-out 0.45s forwards;
  }

  .page-all .meta.state-alt .meta-alt span {
    animation: meta-nyoki-in 0.55s forwards;
    animation-delay: calc(var(--i) * 0.05s);
  }

  .page-all .meta.state-base.from-alt .idx,
  .page-all .meta.state-base.from-alt .label {
    animation: meta-nyoki-in 0.45s forwards;
  }

  .page-all .meta.state-base.from-alt .meta-alt span {
    animation: meta-sink-out 0.35s forwards;
  }
}

/* ==========================
   TOPページ（PC用）
   番号＋日付：沈んでから一文字ずつニョキニョキ
   ========================== */
@media (min-width: 769px) {
  .page-top .works-list .idx span,
  .page-top .works-list .label span {
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    animation: none;
  }

  .page-top .works-list a:hover .idx span,
  .page-top .works-list a:hover .label span {
    animation-name: topSinkOut, topNyokiIn;
    animation-duration: 0.18s, 0.45s;
    animation-timing-function: ease-out, ease-out;
    animation-fill-mode: forwards, forwards;
    animation-delay: 0s, calc(0.18s + var(--i) * 0.04s);
  }

  @keyframes topSinkOut {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0.5em); }
  }

  @keyframes topNyokiIn {
    0% { opacity: 0; transform: translateY(0.5em) scaleY(0.6); }
    60% { opacity: 1; transform: translateY(-0.1em) scaleY(1.05); }
    100% { opacity: 1; transform: translateY(0) scaleY(1); }
  }
}

/* ==========================
   ALLページ & 作品ページ限定
   ヘッダー背景色を付ける
   ========================== */
.page-all header,
.page-work header {
  background: #f7f7f7;
}

/* ==========================
   ALLページ：スクロール時のふわっとアニメ（ゆっくり版）
   ========================== */
.page-all .card {
  opacity: 0;
  transform: translateY(65px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.page-all .card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================
   TOPページ：作品番号＆日付のカーニング調整
   ========================== */
@media (min-width: 769px) {
  .page-top .works-list .idx {
    letter-spacing: 0.15em !important;
  }

  .page-top .works-list .label {
    letter-spacing: 0.15em !important;
  }
}

/* オープニング白背景 */
.site-title-video {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 999;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.5s ease;
  display: block;
}

/* ▼ 動画の位置・サイズ（PC + スマホ両方対応） ▼ */
.site-title-video video {
  position: absolute;
  top: 60%;
  left: 70%;
  transform: translate(-50%, -50%) rotate(-12deg);

  width: 30vw;
  max-width: 80vw;
  max-height: 80vh;
  height: auto;

  object-fit: contain;
}

/* スマホでは少し大きめに（はみ出さない範囲） */
@media (max-width: 768px) {
  .site-title-video video {
    width: 50vw;
    max-width: 90vw;
    max-height: 80vh;
  }
}

/* フェードアウト用 */
.site-title-video.hide {
  opacity: 0;
  pointer-events: none;
}

/* ==========================
   作品ページ：横並び画像は余白なし
   ========================== */
.page-work .work-images .img-row {
  width: 100%;
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.page-work .work-images .img-row > img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* workページで動画がクリックできるように最前面へ（見た目は変えない） */
.page-work .work-images iframe {
  position: relative;
  z-index: 10;
}

/* ==========================
   📱 作品ページ（スマホ）
   すべての画像・動画の余白を完全統一
   ========================== */
@media (max-width: 768px) {
  .page-work {
    --sp-media-gap: 5px;
  }

  .page-work .work-images > * {
    margin: 0 !important;
  }

  .page-work .work-images > * + * {
    margin-top: var(--sp-media-gap) !important;
  }

  .page-work .work-images .img-row {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-media-gap);
  }

  .page-work .work-images .img-row > img {
    width: 100% !important;
    margin: 0 !important;
    flex: none !important;
  }

  .page-work .work-images img + img,
  .page-work .work-images img:first-child,
  .page-work .work-images > *:first-child {
    margin-top: 0 !important;
  }
}

/* ==========================
   📱 スマホ時：ヘッダー文字サイズ統一
   RYUJI MARUYAMA / TOP / ALL
   ========================== */
@media (max-width: 768px) {
  header .header-title,
  header .header-title__link,
  header nav a {
    font-size: 0.65rem !important;
    letter-spacing: 0.35em;
  }
}

/* =========================================
   📱 スマホ時：RYUJI MARUYAMA を TOP/ALL と同じサイズに固定
   ========================================= */
@media (max-width: 768px) {
  body header {
    --header-font: 0.65rem;
  }

  body header h1.header-title,
  body header h1.header-title a.header-title__link {
    font-size: var(--header-font) !important;
    font-weight: 400 !important;
    letter-spacing: 0.35em !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body header nav a {
    font-size: var(--header-font) !important;
    font-weight: 400 !important;
    letter-spacing: 0.35em !important;
    line-height: 1 !important;
  }
}

@media (max-width: 480px) {
  body header h1.header-title,
  body header h1.header-title a.header-title__link {
    font-size: 0.65rem !important;
  }
}

/* =========================================
   ✅ ALLページ：3列レイアウト
   ========================================= */
body.page-all #grid.grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  column-gap: 1px !important;
  row-gap: 10px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-all #grid.grid .card {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-all #grid.grid .thumb {
  margin: 0 !important;
  padding: 0 !important;
}

body.page-all #grid.grid .thumb img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

body.page-all #grid.grid .meta {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;

  margin-top: 8px;
  padding: 0;
}

/* =========================================
   ✅ ALLページ：画像を中央基準でトリミング表示
   ========================================= */
body.page-all #grid.grid .thumb {
  position: relative;
  overflow: hidden;
}

body.page-all #grid.grid .thumb img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center;
}

/* =========================================
   📱 スマホ表示：ALLページ1列
   ========================================= */
@media (max-width: 768px) {
  body.page-all #grid.grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  body.page-all #grid.grid .card {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* =========================================
   📱 作品ページ（page-work）
   スマホ時：画像/動画の間隔が0になる問題を強制的に防ぐ
   ========================================= */
@media (max-width: 768px) {
  .page-work {
    --sp-media-gap: 5px;
  }

  .page-work .work-images {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-media-gap) !important;
    align-items: center !important;
  }

  .page-work .work-images > * {
    margin: 0 !important;
  }

  .page-work .work-images img,
  .page-work .work-images iframe {
    width: 100% !important;
    display: block !important;
  }
}

/* =================================
   オープニング動画：ふわっとフェードアウト
   ================================= */
.site-title-video {
  transition:
    opacity 1.8s cubic-bezier(.22, .61, .36, 1),
    transform 1.8s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

/* =========================================
   HEROスライド：なめらかクロスフェード
   ========================================= */
.hero-slideshow {
  overflow: hidden;
}

.hero-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity;
}

.hero-slideshow img.is-active {
  opacity: 1;
}

/* ALLページ：作品番号を消す */
.idx {
  display: none !important;
}

/* ============================
   ALLページ（スマホ）：
   初回表示で「画面上3割」を余白にする
   Safari対応版
   ============================ */
@media (max-width: 768px) {
  body.page-all main {
    /* Safari / Chrome 新仕様 */
    padding-top: calc(30svh + var(--header-h));

    /* 新しいブラウザ用（将来安定） */
    padding-top: calc(30dvh + var(--header-h));

    /* フォールバック（古いSafari用） */
    padding-top: calc(30vh + var(--header-h));

    box-sizing: border-box;
  }
}


/* ==========================
   共通：スクロールでふわっと表示（チカつき無し）
   ========================== */
html.js .reveal-img {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

html.js .reveal-img.is-inview {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal-img {
    transition: none;
    transform: none;
    opacity: 1;
  }
}
/* ==========================
   Safari対策：aspect-ratio fallback
   ========================== */
@supports not (aspect-ratio: 16 / 9) {

  .page-work .work-images iframe {
    width: 100%;
    height: auto;
  }

  .page-work .work-images iframe::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
}
/* ============================
   ALLページ：
   初回表示で「画面上3割」を余白にする
   PC / SP / Safari 対応 完全版
   ============================ */
body.page-all main {
  /* Safari・モバイル対応（後勝ちが効く順） */
  padding-top: calc(30svh + var(--header-h));
  padding-top: calc(30dvh + var(--header-h));
  padding-top: calc(30vh  + var(--header-h));

  box-sizing: border-box;
}
/* =========================================
   Profileページ：ヘッダーと同じ高さのフッター
   ＋ 画面最下部に固定（スクロールなし）
   ========================================= */

body.page-profile{
  /* 1画面固定（Safari対応） */
  height: auto !important;
  overflow: auto !important; /* または visible */
  display: block !important; /* flex固定してた場合の解除 */
  /* header / main / footer を縦に積む */
  display: flex;
  flex-direction: column;
}

/* header は既に fixed なので、表示上の高さぶんだけ body 側でスペース確保 */
body.page-profile > header{
  flex: 0 0 auto;
}

/* main（本文）は header と footer の間の“残り”を使う */
body.page-profile > main.profile{
  flex: 1 1 auto;
  overflow: hidden;       /* 本文もスクロールさせない */
  padding-top: var(--header-h); /* fixed header に隠れないように */
  box-sizing: border-box;
}

/* footer：高さ＝ヘッダーと同じ、画面最下部 */
body.page-profile > footer{
  flex: 0 0 var(--header-h);
  height: var(--header-h);
  box-sizing: border-box;

  /* 中身の配置（好みで） */
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* 右寄せ。center にすると中央寄せ */
  gap: 16px;
  padding: 0 var(--gutter-x);

  /* 背景が必要なら */
  background: var(--bg);
}
/* ===============================
   Profileページ：
   フッター内リンクをテキストと同色にする
   =============================== */
body.page-profile footer,
body.page-profile footer a {
  color: #545454; /* ← ©︎RYUJI MARUYAMA 2025 と同じ色 */
}
/* ===============================
   Profileページ：
   フッター内リンクの下線を消す
   =============================== */
body.page-profile footer a {
  text-decoration: none;
}
/* =========================================
   Profileページ：フッターレイアウト
   左 / 中央 / 右（2行）
   ========================================= */

body.page-profile footer.profile-footer {
  height: var(--header-h);
  padding: 0 var(--gutter-x);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  color: var(--fg);
}

/* 左：Instagram */
body.page-profile .footer-left {
  justify-self: start;
  white-space: nowrap;
}

/* 中央：コピーライト */
body.page-profile .footer-center {
  justify-self: center;
  white-space: nowrap;
}

/* 右：電話 + メール（縦2行） */
body.page-profile .footer-right {
  justify-self: end;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}

/* リンク共通（色・下線なし） */
body.page-profile footer a,
body.page-profile footer a:hover,
body.page-profile footer a:visited,
body.page-profile footer a:active {
  color: var(--fg);
  text-decoration: none;
}
/* ===============================
   Profileページ：フッター文字サイズを完全統一
   =============================== */
body.page-profile footer {
  font-size: 0.5rem;
  letter-spacing: 0.05em;
}

body.page-profile footer a {
  font-size: 0.5rem;
  letter-spacing: 0.05em;
}
/* =========================================
   Profile（iOS Safari）：下の検索/ツールバーと
   フッターが被らないように safe-area 対応
   ========================================= */

/* フッターを “見える領域” の上に持ち上げる */
body.page-profile footer {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--header-h) + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* 1画面固定（スクロールなし）運用の場合：
   main の高さ計算から safe-area（上＋下）を引く */
body.page-profile .profile {
  height: calc(
    100svh
    - (var(--header-h) * 2)
    - env(safe-area-inset-top)
    - env(safe-area-inset-bottom)
  );
  height: calc(
    100dvh
    - (var(--header-h) * 2)
    - env(safe-area-inset-top)
    - env(safe-area-inset-bottom)
  );
  height: calc(
    100vh
    - (var(--header-h) * 2)
    - env(safe-area-inset-top)
    - env(safe-area-inset-bottom)
  );
}

/* =========================================
   Profileページ（PC）：
   表示画面の最下部にフッターを配置
   ========================================= */
@media (min-width: 769px) {

  /* 画面高さを基準にする */
  body.page-profile {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ヘッダーは上 */
  body.page-profile header {
    flex: 0 0 auto;
  }

  /* メインを伸ばして余白を吸収 */
  body.page-profile main.profile {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end; /* 今までの下寄せデザインを維持 */
  }

  /* フッターを表示画面の最下部へ */
  body.page-profile footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-bottom: 0;
  }
}
/* =========================================
   Profile（PC）：
   スクロールなしで 1画面に収めて
   フッターを必ず表示（画面最下部）
   ========================================= */
@media (min-width: 769px) {

  /* 1画面固定 */
  body.page-profile{
    height: 100vh !important;
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    /* fixed header 分を確保 */
    padding-top: var(--header-h) !important;
  }

  /* 本文は「残り高さ」だけ使う（スクロールしない） */
  body.page-profile main.profile{
    flex: 1 1 auto !important;
    min-height: 0 !important;

    /* 既存指定があるとズレるので無効化 */
    padding-top: 0 !important;

    overflow: hidden !important; /* 本文もスクロールさせない */
  }

  /* フッター：ヘッダーと同じ高さ＆画面下に固定（見た目は維持） */
  body.page-profile footer{
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;

    margin-top: auto !important;
  }
}
/* =========================================
   Profile（PC）：
   スクロールなし・1画面固定
   フッターは必ず画面内（最下部）
   ========================================= */
@media (min-width: 769px) {

  /* ページ全体を1画面の器にする */
  body.page-profile {
    height: 100vh !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    /* fixed header 分の逃げ */
    padding-top: var(--header-h) !important;

    overflow: hidden !important; /* スクロール完全禁止 */
  }

  /* メインは「残り高さ」を使うだけ */
  body.page-profile main.profile {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    /* 以前の指定が原因で崩れるので無効化 */
    padding-top: 0 !important;
    height: auto !important;

    overflow: hidden !important;
  }

  /* フッター：見た目そのまま、画面内の最下部へ */
  body.page-profile footer.profile-footer {
    flex: 0 0 auto !important;
    margin-top: auto !important;

    /* サイズは今まで通り（既存指定を尊重） */
  }
}
/* ==========================
   Profile（PC）：フッターを必ず表示（画面最下部に固定）
   ========================== */
@media (min-width: 769px) {

  body.page-profile {
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* fixed header 分だけ上を空ける */
  body.page-profile main.profile {
    padding-top: var(--header-h) !important;
    padding-bottom: var(--header-h) !important; /* ← fixed footer 分 */
    height: 100vh !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* PCはスクロールなし */
  }

  /* フッターを画面の最下部に固定 */
  body.page-profile footer.profile-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: var(--header-h) !important;
    box-sizing: border-box !important;

    /* 既存のレイアウトを壊さない（あなたのgrid指定があればそれが生きる） */
    z-index: 1001 !important;
    background: var(--bg) !important;
  }
}
/* ==========================
   Profile（PC）：テキストを少し上へ
   ========================== */
@media (min-width: 769px) {

  body.page-profile .profile-content {
    margin-bottom: 10vh; /* ← 数値を調整（4vh〜10vhくらい） */
  }
}
/* =========================================
   ALLページ：プロフィールと同じフッターを表示
   ========================================= */

body.page-profile footer.profile-footer,
body.page-all footer.profile-footer {
  height: var(--header-h);
  padding: 0 var(--gutter-x);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  color: var(--fg);

  font-size: 0.5rem;
  letter-spacing: 0.05em;
}

/* リンクの見た目を統一 */
body.page-all footer.profile-footer a {
  color: inherit;
  text-decoration: none;
}
/* ===============================
   フッター：メールアドレスを画面右端揃え
   （レイアウト構造は変更しない）
   =============================== */
.footer-right a {
  text-align: right;
  align-self: flex-end;
}
/* ALLページ：メール行を画面右端にピタッと揃える */
body.page-all footer.profile-footer .footer-right {
  justify-self: end;
  text-align: right;
}

body.page-all footer.profile-footer .footer-right .footer-mail {
  text-align: right;
  margin-left: auto;
}

body.page-all footer.profile-footer .footer-right .footer-mail a {
  display: inline;
  text-align: right;
}
/* BMギャラリー：行の縦余白（好みで数値調整） */
.page-work #bm-gallery .img-row {
  margin-top: 5px; /* ← 余白量。例：8px / 16px / 24px など */
}

/* 最初の行だけ上余白なし */
.page-work #bm-gallery .img-row:first-child {
  margin-top: 0;
}
/* ===============================
   ALLページ（スマホ）：
   フッターをProfileと同じサイズ＆レイアウトにする
   =============================== */
@media (max-width: 768px) {

  body.page-all footer.profile-footer{
    /* Profileと同じ：3カラム */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;

    /* 高さ＝ヘッダーと同じ */
    height: var(--header-h) !important;

    /* 余白も共通に */
    padding: 0 var(--gutter-x) !important;
    box-sizing: border-box !important;

    /* 文字サイズ（Profileと同じ） */
    font-size: 0.5rem !important;
    letter-spacing: 0.05em !important;

    /* スマホの下バー対策（必要なら） */
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: calc(var(--header-h) + env(safe-area-inset-bottom)) !important;
  }

  /* 左：Instagram */
  body.page-all footer.profile-footer .footer-left{
    justify-self: start !important;
    white-space: nowrap !important;
  }

  /* 中央：© */
  body.page-all footer.profile-footer .footer-center{
    justify-self: center !important;
    white-space: nowrap !important;
  }

  /* 右：メール（右端揃え） */
  body.page-all footer.profile-footer .footer-right{
    justify-self: end !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* リンクも同じサイズ＆下線なし＆同色 */
  body.page-all footer.profile-footer a{
    font-size: inherit !important;
    color: var(--fg) !important;
    text-decoration: none !important;
  }
}