/* =========================================================
   Instagram風レイアウト
   色やモチーフは style.css のまま、UIの形だけをInstagramのプロフィール画面に寄せる
   ========================================================= */

/* 背景にリボンとパールをちりばめる */
body::after {
  opacity: 1;
  background-image:
    url("../img/scatter.svg"),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(23, 24, 28, 0.03) 39px 40px);
  background-size: 720px 720px, auto;
}

/* 中央のアプリ風カード。中のレイアウトはカード幅（container query）で切り替える */
.app {
  container-type: inline-size;
  container-name: app;
  position: relative;
  width: min(600px, calc(100% - 48px));
  margin: 40px auto;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.55), 0 30px 80px rgba(23, 24, 28, 0.14);
  overflow: clip;
}
@media (max-width: 640px) {
  .app {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.9);
  }
}

.app .container {
  max-width: none;
  padding: 0 20px;
}

/* ---- 上部バー ---- */
.ig-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.ig-bar .logo { align-items: center; }
/* 筆記体は字形が上に偏るため、見た目の中心がバーの中央に来るよう下げる */
.ig-bar .logo-script {
  font-size: 34px;
  line-height: 1;
  position: relative;
  top: 0.19em;
}
.ig-user {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ---- アイコン（ストーリーのリング風） ---- */
.avatar {
  flex-shrink: 0;
  display: block;
  position: relative;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 210deg, #17181c, #8a909c, #e9ebef, #8a909c, #17181c);
}
.avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--paper);
  background: url("../img/kv.jpg") 7% 4% / 175% auto no-repeat, var(--pearl);
}
.avatar.lg { width: clamp(108px, 28cqw, 140px); height: clamp(108px, 28cqw, 140px); padding: 4px; }
.avatar.sm { width: 46px; height: 46px; padding: 2px; }
.avatar.sm .avatar-img { border-width: 2px; }

/* ---- プロフィール欄 ---- */
.ig-profile { padding: 22px 0 4px; }
.ig-head {
  display: flex;
  align-items: center;
  gap: 24px;
}
.stats {
  flex: 1;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.stats b {
  display: block;
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.stats span {
  font-size: 12px;
  color: var(--text-dim);
}
.ig-bio {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.75;
}
.bio-name {
  font-family: var(--font-mincho);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.bio-cat {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.bio-tags {
  margin-top: 2px;
  color: var(--silver-dd);
  font-weight: 500;
}
.ig-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.ig-btn {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--pearl);
  text-align: center;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
  transition: background 0.3s;
}
.ig-btn:hover { background: #e1e4e9; }
.ig-btn.primary { background: var(--ink); color: #fff; }
.ig-btn.primary:hover { background: var(--ink-2); }

/* ---- ハイライト（ページ移動） ----
   トップでもサブページでも丸の大きさは同じ。並ぶ数に関わらず横幅いっぱいに均等配置する */
.highlights {
  --hl: clamp(58px, 15cqw, 76px);
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--line);
}
.highlights ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 0 12px;
}
.highlights a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.hl-ring {
  display: block;
  width: var(--hl);
  height: var(--hl);
  padding: 3px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform 0.3s;
}
.highlights a:hover .hl-ring { transform: scale(1.05); }
/* 今いるページはストーリーのリング */
.highlights a[aria-current="page"] .hl-ring {
  border-color: transparent;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    conic-gradient(from 210deg, #17181c, #8a909c, #e9ebef, #8a909c, #17181c) border-box;
  border-width: 2px;
  padding: 2px;
}
.hl-cover {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(23, 24, 28, 0.06);
}
/* 表紙：白 → 黒 → 銀 → 白 と色が交互になるよう並び順に合わせて配色 */
.c-face { background: url("../img/kv.jpg") 7% 4% / 175% auto no-repeat, var(--pearl); }
.c-profile {
  background:
    var(--ribbon) center 52% / 60% auto no-repeat,
    radial-gradient(circle at 35% 28%, #ffffff, #e4e7ec 70%, #cfd4dc);
}
.c-works {
  background:
    var(--pearl-swag) center 38% / 130% 26px no-repeat,
    var(--pearl-swag) center 72% / 90% 20px no-repeat,
    radial-gradient(circle at 35% 28%, #44464e, #16171b 70%);
}
.c-guideline {
  background:
    var(--ribbon) center 52% / 60% auto no-repeat,
    radial-gradient(circle at 35% 28%, #f4f5f7, #b9bfc9 75%, #9aa1ad);
}
.c-contact {
  background:
    var(--ribbon) center 30% / 46% auto no-repeat,
    var(--pearl-swag) center 70% / 120% 24px no-repeat,
    radial-gradient(circle at 35% 28%, #ffffff, #e4e7ec 70%, #cfd4dc);
}
.hl-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text);
}
.highlights a[aria-current="page"] .hl-label { color: var(--ink); font-weight: 600; }

/* ---- 投稿タブ ---- */
.ig-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}
.ig-tabs button {
  font: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.ig-tabs a,
.ig-tabs button {
  flex: 1;
  padding: 12px 0 11px;
  text-align: center;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-top: 1px solid transparent;
  margin-top: -1px;
  transition: color 0.3s;
}
.ig-tabs a:hover, .ig-tabs button:hover { color: var(--ink); }
.ig-tabs a.is-active, .ig-tabs button.is-active { color: var(--ink); border-top-color: var(--ink); }

/* ---- 3列の画像グリッド ---- */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px 0 0;
}
.ig-grid li {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(180deg, #f1f3f6, #d7dbe2);
}
.ig-grid a { display: block; width: 100%; height: 100%; }
.ig-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.ig-grid .stand img { object-position: 50% 4%; }
.ig-grid .white img { mix-blend-mode: multiply; }
.ig-grid a:hover img { transform: scale(1.05); }
.ig-grid .deco {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #33353c, #111215);
}
.ig-grid .deco.light {
  background:
    var(--pearl-swag) center 88% / 70% 22px no-repeat,
    radial-gradient(circle at 50% 40%, #ffffff, #e2e5ea 75%, #cdd2da);
}
/* リボンと文字をひとまとまりにして、タイルの中央に置く */
.deco-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.deco-bow {
  width: clamp(40px, 11cqw, 64px);
  aspect-ratio: 3 / 2;
  background: var(--ribbon) center / contain no-repeat;
}
.deco.light .deco-bow { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.18)); }
.deco-script {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(26px, 8cqw, 44px);
  line-height: 1;
  color: #fff;
  /* 筆記体は字形が上と右に偏るので、見た目の中心を合わせる */
  position: relative;
  top: var(--ink-y, 0.19em);
  left: var(--ink-x, 0);
}
.deco:not(.light) .deco-script { --ink-x: -0.12em; --ink-y: 0.225em; }
.deco.light .deco-script { --ink-y: -0.05em; font-size: clamp(20px, 6cqw, 36px); }
.deco.light .deco-script { color: var(--ink); }
.tile-cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 24, 28, 0.42);
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
}
.ig-grid a:hover .tile-cap,
.ig-grid a:focus-visible .tile-cap { opacity: 1; }
.ig-grid .deco .tile-cap { background: rgba(255, 255, 255, 0.18); }

/* ---- カード内の各セクションを詰める ---- */
.app .section { padding: 44px 0; }
.app .section + .section { padding-top: 0; }
.app .sec-head { margin-bottom: 24px; }
.app .sec-head h2 { font-size: 32px; }

/* サブページの見出しは投稿のヘッダー風 */
.app .page-head { padding: 18px 0 22px; }
.app .page-head .container { align-items: center; }
.ph-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app .page-head h1 { font-size: 26px; letter-spacing: 0.04em; }
.app .page-head .jp { margin-top: 2px; font-size: 12px; letter-spacing: 0.24em; }
.app .page-head .num { font-size: 13px; }
.app .page-head .num::before { width: 40px; height: 27px; }

.app .site-footer { margin-top: 24px; padding: 48px 0 28px; }
.app .site-footer .container { justify-content: center; text-align: center; }
.app .footer-nav ul { justify-content: center; gap: 6px 18px; }
.app .copy { text-align: center; }

/* 上部バーに隠れないよう、ページ内リンクの止まる位置をずらす */
.app [id] { scroll-margin-top: 70px; }

/* タブで切り替えるパネル（選んだものだけ表示） */
.ig-panel[hidden] { display: none; }
.app .ig-panel.section { padding: 32px 0 12px; }
.ig-panel.is-entering { animation: panelIn 0.5s cubic-bezier(.2,.7,.2,1); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================
   拡大・移動アニメーション後の「がくっ」と動くずれ対策
   アニメーションが終わった瞬間に描画方法が切り替わると、画像が0.5px前後ずれて見える。
   動く要素は最初から最後まで同じ描画レイヤーに載せたままにする。
   ========================================================= */
.ig-grid img,
.yt-thumb img,
.yt-play,
.hl-ring,
.slider-dots button,
.from-left {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
}
.ig-grid a:hover img,
.yt-thumb:hover img { transform: translateZ(0) scale(1.05); }
.highlights a:hover .hl-ring { transform: translateZ(0) scale(1.05); }
.yt-thumb:hover .yt-play { transform: translateZ(0) scale(1.08); }
.slider-dots button.is-active { transform: translateZ(0) scale(1.2); }
.from-left { transform: translate3d(-48px, 0, 0); }
.from-left.is-in { transform: translateZ(0); }
@media (prefers-reduced-motion: reduce) {
  .from-left, .from-left.is-in { transform: none; }
}