/* =======================================================================
   KMV Home Minimal CSS — clean build
   - Blocks 2/3/4/5
   - MAP button, Pills, Profile (center)
   - Fixed decos (bottom-left/right) under hero
   - Banners: unscale images / unify container width
   -----------------------------------------------------------------------
   Knobs:
     --kmv-banner-max : 1050px   // バナー系の最大幅（原寸優先／縮小のみ）
     --kmv-block-width: 1337px   // プロフィールを中央寄せするときの枠幅
   ======================================================================= */

/* ==== Global knobs ===================================================== */
:root{
  --kmv-banner-max: 1050px;
  --kmv-block-width: 1200px;
}

/* ---- Global spacing --------------------------------------------------- */
#kmvMain   { margin-top: clamp(18px, 3.6vw, 60px); }
#kmvBlock-2{ margin-top: clamp(6px, 1.2vw, 16px); }

/* ---- Paper: 2/3/4/5 --------------------------------------------------- */
#kmvBlock-2.kmv-sec.paper,
#kmvBlock-3.kmv-sec.paper,
#kmvBlock-4.kmv-sec.paper,
#kmvBlock-5.kmv-sec.paper{
  position: relative;
  overflow: visible;
  background: none;
  padding-top: clamp(64px, 6.5vw, 128px);
  padding-bottom: clamp(20px, 3vw, 36px);
  border: none;
  --kmv-paper-fade:  clamp(22px, 2.4vw, 44px);
  --kmv-paper-extra: clamp(28px, 2.8vw, 54px);
}
#kmvBlock-2.kmv-sec.paper::before,
#kmvBlock-3.kmv-sec.paper::before,
#kmvBlock-4.kmv-sec.paper::before,
#kmvBlock-5.kmv-sec.paper::before{
  content:"";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width: max(clamp(1100px,118%,2200px), 100%);
  height: calc(100% + var(--kmv-paper-extra));
  background: url("/meta/img/paper_body.png?v=5") center top / 100% auto repeat-y;
  border-radius:16px;
  pointer-events:none; z-index:0;
  -webkit-mask-image:linear-gradient(#000,#000 calc(100% - var(--kmv-paper-fade)),transparent);
          mask-image:linear-gradient(#000,#000 calc(100% - var(--kmv-paper-fade)),transparent);
}
#kmvBlock-2.kmv-sec.paper::after,
#kmvBlock-3.kmv-sec.paper::after,
#kmvBlock-4.kmv-sec.paper::after,
#kmvBlock-5.kmv-sec.paper::after{
  content:"";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width: max(clamp(1100px,118%,2200px), 100%);
  height:40px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%);
  pointer-events:none; z-index:1;
}

/* ---- Section inner ---------------------------------------------------- */
.kmv-sec .kmv-inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--kmv-banner-max); margin-inline:auto;
  padding-inline: clamp(12px, 3.5vw, 24px);
}

/* ---- Common: banner (原寸優先・縮小のみ) ------------------------------ */
.kmv-sec .kmv-banner{
  position:relative;
  width:auto;
  max-width:none;
  margin-inline:auto;
  border-radius:12px; overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.kmv-sec .kmv-banner > img{
  display:block;
  width:auto; height:auto;
  max-width:100%;
}

/* ---- Headings --------------------------------------------------------- */
.kmv-sec h2{
  font-weight:700; font-size:clamp(18px, 2.4vw, 24px);
  letter-spacing:.04em; margin:0 0 clamp(10px, 1.8vw, 16px);
}
.kmv-sec h2 em{ font-style:normal; }

/* ================= Block 2（Pills） ==================================== */
#kmvBlock-2 .kmv-banner{ position:relative; overflow:hidden; }
#kmvBlock-2 .kmv-banner > .kmv-comic-pills{
  position:absolute;
  right: clamp(16px, 2.2vw, 28px);
  bottom: clamp(4px, 1.2vw, 10px);
  display:flex; flex-wrap:wrap; gap:clamp(6px, 1vw, 10px);
  align-items:center; justify-content:flex-end;
  z-index:3; margin:0; padding:0; list-style:none;
}
#kmvBlock-2 .kmv-banner > .kmv-comic-pills a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:9999px;
  font-weight:700; font-size:clamp(13px, 1.6vw, 15px); letter-spacing:.02em;
  color:#fff; background:rgba(0,0,0,.55); text-decoration:none; line-height:1;
  backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 2px 8px rgba(0,0,0,.18) inset, 0 4px 10px rgba(0,0,0,.06);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
@media (hover:hover) and (pointer:fine){
  #kmvBlock-2 .kmv-banner > .kmv-comic-pills a:hover{
    transform: translateY(-1px);
    background: rgba(0,0,0,.68);
    box-shadow: 0 2px 10px rgba(0,0,0,.22) inset, 0 6px 14px rgba(0,0,0,.10);
  }
}

/* ================= Block 3（世界MAP） ================================== */
/* 中央紙にぴったり合わせるため、左右パディングをゼロに */
#kmvBlock-3 .kmv-inner{
  max-width: var(--kmv-banner-max);
  padding-inline: 0;
}
#kmvBlock-3 .kmv-inner > .kmv-banner:last-of-type{
  position:relative; padding:0; overflow:visible; pointer-events:none;
}
#kmvBlock-3 .kmv-inner > .kmv-banner:last-of-type > .kmv-map-btn{
  position:absolute; right:0; bottom:0; transform:none; z-index:3;
  display:block; width:240px; height:100px;
  margin:0; padding:0; line-height:0; font-size:0;
  text-decoration:none; outline-offset:4px; pointer-events:auto;
}
#kmvBlock-3 .kmv-inner > .kmv-banner:last-of-type > .kmv-map-btn-img{
  display:block; width:100%; height:100%; max-width:none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  transition: transform .16s ease, filter .16s ease;
}
@media (hover:hover) and (pointer:fine){
  #kmvBlock-3 .kmv-inner > .kmv-banner:last-of-type > .kmv-map-btn:hover .kmv-map-btn-img,
  #kmvBlock-3 .kmv-inner > .kmv-banner:last-of-type > .kmv-map-btn:focus-visible .kmv-map-btn-img{
    transform: translateY(-1px) scale(1.02);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.32));
  }
}

/* ---- stacking guard --------------------------------------------------- */
#kmvBlock-2{ position:relative; z-index:5; }
#kmvBlock-3{ position:relative; z-index:4; }

/* ================= Block 5（プロフィール紹介用セクション） ============ */
#kmvBlock-5 .kmv-profile{
  display:grid; grid-template-columns: auto 1fr; align-items:start;
  gap: clamp(16px, 3vw, 32px);
}
#kmvBlock-5 .kmv-profile-photo{
  width: fit-content; max-width: 100%;
  border-radius:12px; overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  transform: translateY(-2px);
}
#kmvBlock-5 .kmv-profile-photo img{
  display:block; width:auto; height:auto; max-width:100%;
}
#kmvBlock-5 .kmv-profile-body{ align-self:center; }
#kmvBlock-5 .kmv-profile-body h2{
  margin:0 0 clamp(10px, 1.4vw, 14px);
  font-weight:700; font-size:clamp(20px, 2.4vw, 26px);
  letter-spacing:.02em; line-height:1.35;
}
#kmvBlock-5 .kmv-profile-body h2 .role{
  font-weight:700; font-size:.95em; margin-right:.5em; opacity:.85;
}
#kmvBlock-5 .kmv-profile-body p{
  margin:0; font-size:clamp(14px, 1.7vw, 16px); line-height:1.9;
}
@media (max-width:800px){
  #kmvBlock-5 .kmv-profile{ grid-template-columns: 1fr; }
  #kmvBlock-5 .kmv-profile-photo{ margin-inline:auto; transform: translateY(0); }
  #kmvBlock-5 .kmv-profile-body{ margin-top: clamp(10px, 3vw, 16px); }
}

/* ================= Fixed decos（常に左右下に追従） ===================== */
:root{
  --kmv-inner: 1600px;
  --kmv-gutter: clamp(12px, 3.5vw, 24px);
  --kmv-overlap-left:  6px;
  --kmv-overlap-right: 6px;
}
.kmv-deco-fixed{
  position: fixed; bottom: -6px; z-index: 8;
  pointer-events: none; user-select: none; height: auto;
}
.kmv-deco-fixed.left{
  left:  calc((100vw - (var(--kmv-inner) + 2 * var(--kmv-gutter))) / 2
              - var(--kmv-overlap-left));
  transform: translateX(-6px) rotate(-2deg);
}
.kmv-deco-fixed.right{
  right: calc((100vw - (var(--kmv-inner) + 2 * var(--kmv-gutter))) / 2
              - var(--kmv-overlap-right));
  transform: translateX( 6px) rotate( 2deg);
}
.kmv-deco-fixed img{ display:block; width:auto; height:auto; max-width:none; }
body:has(.kmv-deco-fixed) .kmv-sec .kmv-deco{ display:none !important; }

/* =======================================================================
   Banners — unify width & prevent upscaling
   ======================================================================= */

/* 1) すべてのバナー枠は最大 --kmv-banner-max に統一して中央寄せ */
.kmv-block .kmv-banner{
  max-width: var(--kmv-banner-max);
  margin: 0 auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* セクション共通のインナーも同値で統一 */
.kmv-sec .kmv-inner{
  max-width: var(--kmv-banner-max);
  margin-inline: auto;
}

/* 2) バナー画像は原寸優先。拡大せず、枠より大きい時だけ縮む */
.kmv-banner img,
.kmv-banner a > img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  margin-inline: auto;
}

/* 3) 728×90 の PR（クラス付け時）は原寸中央 */
.kmv-banner .kmv-inline-ad,
.kmv-banner img.kmv-inline-ad{
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  margin: 0 auto;
}

/* —— 第4ブロック PR（例） —— */
#kmvBlock-4 .kmv-banner .kmv-pr img{
  display:block;
  width: 728px;               /* 原寸 */
  height:auto;
  max-width:100%;
  margin: 0 auto;
}

/* 第4ブロックの他バナー（1050ベース）も統一 */
#kmvBlock-4 .kmv-banner > img{
  display:block;
  width:auto;
  height:auto;
  max-width: var(--kmv-banner-max);
  margin:0 auto;
}

/* =======================================================================
   Block 4（HEXA ボタン）
   3枚目のバナーの右下に 325×105 のボタンを固定配置
   ======================================================================= */
#kmvBlock-4 .kmv-inner > .kmv-banner:nth-of-type(3){
  position: relative;           /* ボタンの absolute 基準 */
  overflow: visible;            /* ボタンの外側はみ出し許可 */
}
#kmvBlock-4 .kmv-inner > .kmv-banner:nth-of-type(3) .kmv-hex-btn{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 325px;
  height: 105px;
  display: block;
  text-decoration: none;
  outline-offset: 4px;
  z-index: 5; /* セクション覆いリンクより前へ */
  background: url("/meta/img/button2.png") center/100% 100% no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  transition: transform .16s ease, filter .16s ease, background-image .16s ease;
}
@media (hover:hover) and (pointer:fine){
  #kmvBlock-4 .kmv-inner > .kmv-banner:nth-of-type(3) .kmv-hex-btn:hover,
  #kmvBlock-4 .kmv-inner > .kmv-banner:nth-of-type(3) .kmv-hex-btn:focus-visible{
    transform: translateY(-1px) scale(1.02);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.32));
    background-image: url("/meta/img/button2-1.png");
  }
}

/* =======================================================================
   Hero: プロフィールを紙ブロックと同じ幅で中央寄せ（JS不要）
   2系統用意：
     A) :has() で自動判定（モダンブラウザ）
     B) .kmv-profile-mode クラス（JSが付ける保険）
   ======================================================================= */

/* A) プロフDOMが #heroCol 内にある時だけ中央寄せ＆幅指定 */
section.hero:has(#heroCol #pfHudCard),
section.hero:has(#heroCol .pf-hud){
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
}
section.hero:has(#heroCol #pfHudCard) #heroCol,
section.hero:has(#heroCol .pf-hud) #heroCol{
  width:min(95vw, var(--kmv-block-width)) !important;
  max-width:var(--kmv-block-width) !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}
section.hero:has(#heroCol #pfHudCard) #heroCol .wrap,
section.hero:has(#heroCol .pf-hud) #heroCol .wrap{
  width:100% !important;
  max-width:var(--kmv-block-width) !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}
section.hero:has(#heroCol #pfHudCard) #heroCol .card,
section.hero:has(#heroCol .pf-hud) #heroCol .card{
  max-width:100%; box-sizing:border-box;
}

/* B) 保険：JSが .kmv-profile-mode を付加した場合 */
section.hero.kmv-profile-mode{
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
}
section.hero.kmv-profile-mode #heroCol{
  width:min(95vw, var(--kmv-block-width)) !important;
  max-width:var(--kmv-block-width) !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}
section.hero.kmv-profile-mode #heroCol .wrap{
  width:100% !important;
  max-width:var(--kmv-block-width) !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}
section.hero.kmv-profile-mode #heroCol .card{
  max-width:100%; box-sizing:border-box;
}

/* ==== Utilities ======================================================== */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ==== Profile height knobs (hero + inner) ==== */
:root{
  /* ヒーロー枠の最低高さ（全体を縦に拡げたい時） */
  --kmv-profile-min-h: 650px;      /* 例: 720, 820 など */
  /* プロフィール内カードの上下余白（見た目の高さを稼ぐ） */
  --kmv-profile-pad-y: 24px;       /* 上下パディング */
  /* VRMビューワの縦横比と最大高さ（アバタービューの背を伸ばす/詰める） */
  --kmv-vrm-aspect: 9 / 24;        /* 値を小さくすると“縦長”になる（例: 9/20, 9/18） */
  --kmv-vrm-maxh: 420px;           /* 例: 380〜520px で微調整 */
}

/* A) プロフ表示時のヒーロー全体の最小高さ */
section.hero:has(#heroCol #pfHudCard),
section.hero:has(#heroCol .pf-hud),
section.hero.kmv-profile-mode{
  min-height: var(--kmv-profile-min-h);
}

/* B) カードの上下余白で見た目高さを調整 */
section.hero:has(#heroCol #pfHudCard) #heroCol .card,
section.hero.kmv-profile-mode       #heroCol .card{
  padding-top:  var(--kmv-profile-pad-y);
  padding-bottom: var(--kmv-profile-pad-y);
}

/* C) VRM ビューアの縦長さ（高さ）を調整 */
section.hero:has(#heroCol #pfHudCard) #heroCol #pfVrmHud .pf-vrmwrap,
section.hero.kmv-profile-mode       #heroCol #pfVrmHud .pf-vrmwrap{
  aspect-ratio: var(--kmv-vrm-aspect);
  max-height: var(--kmv-vrm-maxh);
  width: clamp(220px, 34vw, 360px);    /* 必要ならここも触れます */
}
@media (max-width: 640px){
  section.hero:has(#heroCol #pfHudCard) #heroCol #pfVrmHud .pf-vrmwrap,
  section.hero.kmv-profile-mode       #heroCol #pfVrmHud .pf-vrmwrap{
    max-height: calc(var(--kmv-vrm-maxh) * .9);
    width: min(88vw, 320px);
  }
}
/* =======================================================================
   Block 4（HEXA ボタン）
   3枚目のバナーの右下に 325×105 のボタンを固定配置
   ======================================================================= */
/* Block4 のボタンを、現在のマークアップ（.kmv-banner が1つだけ）に合わせて位置付け直す */
#kmvBlock-4 .kmv-banner { position: relative; overflow: visible; }

#kmvBlock-4 .kmv-banner .kmv-hex-btn{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 325px;
  height: 105px;
  display: block;
  text-decoration: none;
  outline-offset: 4px;
  z-index: 5;                   /* セクション覆いリンクより前へ */
  background: url("/meta/img/button2.png") center/100% 100% no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  transition: transform .16s ease, filter .16s ease, background-image .16s ease;
}

/* hover効果（任意：今の仕様に合わせるなら） */
@media (hover:hover) and (pointer:fine){
  #kmvBlock-4 .kmv-banner .kmv-hex-btn:hover,
  #kmvBlock-4 .kmv-banner .kmv-hex-btn:focus-visible{
    transform: translateY(-1px) scale(1.02);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.32));
    background-image: url("/meta/img/button2-1.png");
  }
}