/* =========================================================
   fudosha.net /assets/css/about.css

   - PC hero：gridの列割当を固定して「左=説明 / 右=立ち絵」に戻す
   - PC hero：文字も text-shadow で白フチ
   - SP NPC：文字を黒に戻して text-shadow で白フチ（レイアウトは維持）
   - FIX: PC hero で fig→info のDOM順でも同一行に乗るよう grid-row を明示
   ========================================================= */

:root{
  --about-ink: #1c2233;
  --about-hover: #f08a2a;

  --about-gap: clamp(.6rem, 2.2vw, .95rem);
  --about-pad-y: clamp(.6rem, 2.4vw, 1.1rem);
  --about-pad-x: clamp(.8rem, 2.4vw, 1.75rem);

  --about-sep: rgba(15, 18, 28, 0.35);

  --about-hero-gap: clamp(0rem, 1.2vw, 0rem);
  --about-tile-gap: clamp(1.25rem, 3.0vw, 1.85rem);

  --about-ribbon-bg: rgba(0,0,0,.92);
  --about-ribbon-ink: #fff;
  --about-ribbon-fs: clamp(.75rem, 1.2vw, .9rem);
 
  /* about-row font size（PC/SP） */
  --about-row-fs-pc: clamp(.9rem, 1.05vw, 1rem);
  --about-row-fs-sp: clamp(0.7rem, 3.8vw, .85rem);

  /* HERO veil 色（PC/SP共通の“色”）
     alphaは各端末の --hero-veil-pc / --hero-veil-sp で制御 */
  --about-hero-veil-color: rgba(245,245,245,1);

  /* -------------------------
     OUTLINE（白フチ）共通ユーティリティ用
     ------------------------- */
  --outline-w: 1px;
  --outline-c: rgba(255,255,255,.96);

  /* HERO: SP text outline（黒文字 + 白フチ） */
  --hero-sp-text: rgba(15, 18, 28, 0.92);
  --hero-sp-outline: rgba(255,255,255,.96);
  --hero-sp-outline-w: 1px;

  /* HERO: PC text outline（黒文字 + 白フチ） */
  --hero-pc-text: rgba(15, 18, 28, 0.92);
  --hero-pc-outline: rgba(255,255,255,.94);
  --hero-pc-outline-w: 1px;

  /* Stand（立ち絵のサイズ） 結局HTMLでやるのでここやっても変わらない*/
  --hero-stand-pc-w: 26rem;
  --hero-stand-sp-w: 5rem;
  --hero-stand-ar: 3 / 4;

  /* NPC card (PC base) */
  --about-card-line: rgba(20, 95, 145, 0.62);
  --about-card-fill: rgba(108, 138, 172, 0.83);
  --about-card-shadow: rgba(0, 0, 0, 0.42);

  /* NPC media（画像部）: historyカードと同じ「黒い台 + 画像」 */
  --about-media-bg: #000;
  --about-media-pad-pc: calc(12px * var(--pc-ui-scale, 1));
  --about-media-pad-sp: calc(10px * var(--pc-ui-scale, 1));
  --about-media-radius-pc: calc(12px * var(--pc-ui-scale, 1));
  --about-media-radius-img-pc: calc(10px * var(--pc-ui-scale, 1));

  /* -------------------------
     SP NPC（PCと分けて設定したい部分）
     ------------------------- */
  --about-npc-sp-ink: rgba(15, 18, 28, 0.92);
  --about-npc-sp-outline: rgba(255,255,255,.96);
  --about-npc-sp-outline-w: calc(1px * var(--pc-ui-scale, 1));

  --about-npc-sp-role-bg: rgba(0,0,0,.92);
  --about-npc-sp-role-ink: #ffffff;
}

.about,
.about *{ box-sizing: border-box; }

.about{
  color: var(--about-ink);
  overflow-x: clip;
}

.about-block{
  position: relative;
  padding: var(--about-pad-y) 0;
}

/* NPCカードの間隔：HTMLに<p>が挟まっても必ず効く */
.about-block.about-tile{
  margin: 0 0 var(--about-tile-gap);
}

/* 最後だけ余白を消す（必要なら） 
.about-block.about-tile:last-of-type{
  margin-bottom: 0;
}
とりあえずいらないので殺しておく*/

/* NPC間に挟んでる直下の<p>は余白源になりがちなので殺す（“消さない”条件は満たす） */
.about > p{
  margin: 0;
  height: 0;
}

.about-section-title{
  margin: 0 0 .6em;
  font-weight: 900;
  letter-spacing: .14em;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: rgba(15,18,28,.75);
}

.about-sep{
  border: 0;
  border-top: 2px dashed var(--about-sep);
  margin: var(--about-hero-gap) 0 var(--about-hero-gap);
}

.about-name{
  margin: 0 0 .55rem;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(1.75rem, 3.4vw, 3.35rem);
}
.about-name.is-small{ font-size: clamp(1.25rem, 2.4vw, 2.1rem); }

.about-name-sub{
  display:block;
  margin-top:.35rem;
  font-weight:800;
  font-size: clamp(.75rem, 1.1vw, 1rem);
  letter-spacing:.22em;
  opacity:.9;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.about a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.about a:hover{ color: var(--about-hover); }

.about-table{ margin:0; padding:0; }

.about-row{
  display:grid;
  grid-template-columns: calc(140px * var(--pc-ui-scale, 1)) minmax(0, 1fr);
  gap: calc(16px * var(--pc-ui-scale, 1));
  padding: .6rem 0;
  border-top: 2px dashed rgba(28,34,51,.35);
}
.about-row dt,
.about-row dd{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: var(--about-row-fs-pc);
}

@media (max-width: 767px){
  .about-row dt,
  .about-row dd{
    font-size: var(--about-row-fs-sp);
  }
}

.about-row dt{
  margin:0;
  font-weight:900;
  letter-spacing:.06em;
}
.about-row dd{
  margin:0;
  line-height:1.65;
}
.about-row.is-full{ grid-template-columns:1fr; gap:0; }

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ribbon */
.about-role{
  display:inline-flex;
  align-items:center;
  margin: 0 0 .55em;
  padding: .35em .75em;
  background: var(--about-ribbon-bg);
  color: var(--about-ribbon-ink);
  font-size: var(--about-ribbon-fs);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height:1;
}

/* ribbon (in hero section)*/
.about-ribbon{
  display:inline-flex;
  align-items:center;
  margin: 0 0 0em;
  padding: .35em .75em;
  background: var(--about-ribbon-bg);
  color: var(--about-ribbon-ink);
  font-size: var(--about-ribbon-fs);
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height:1;
}

/* =========================================================
   HERO
   ========================================================= */

.about-hero{ padding: 0; }

.about-hero{
  --hero-bg-pos-pc: left top;
  --hero-bg-pos-sp: center;

  --hero-veil-pc: .72; /* inlineで上書き可 */
  --hero-veil-sp: .72; /* inlineで上書き可 */
}

/* PC: 背景は media に、内容は overlay を“積層”で載せる */
.about-hero-media{
  display: grid;
  grid-template-areas: "stack";
  overflow: hidden;

  background-image: var(--hero-bg-pc, var(--hero-bg-sp));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-bg-pos-pc);
  background-color: var(--bg);

  min-height: clamp(34rem, 72vw, 72dvh);
}

/* ★absolute禁止。grid上でin-flowに載せる */
.about-hero-overlay{
  grid-area: stack;
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--about-gap);
  align-items: end;
padding-bottom: 0;
}

/* HEROベール（PC） */
.about-hero-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--about-hero-veil-color);
  opacity: var(--hero-veil-pc);
  pointer-events:none;
  z-index: 0;
}

.about-hero-overlay > *{
  position: relative;
  z-index: 1;
}

/* ★PCの配置を“同一行”に固定する（DOM順が fig→info でも崩れない） */
@media (min-width: 768px){
  .about-hero-info{
    grid-column: 1;
    grid-row: 1;        /* ←これが本命 */
    align-self: end;
  }

  .about-hero-fig{
    grid-column: 2;
    grid-row: 1;        /* ←これが本命 */
    justify-content: flex-end;
    align-self: end;
  }
}

.about-hero-info{
  max-width: 38rem;
  min-width: 0;
}

/* PC hero 文字：黒 + 白フチ（text-shadow） */
@media (min-width: 768px){
  .about-hero-info :is(.about-name, .about-name-sub, .about-row dt, .about-row dd){
    color: var(--hero-pc-text);
    text-shadow:
      var(--hero-pc-outline-w) 0 0 var(--hero-pc-outline),
      calc(var(--hero-pc-outline-w) * -1) 0 0 var(--hero-pc-outline),
      0 var(--hero-pc-outline-w) 0 var(--hero-pc-outline),
      0 calc(var(--hero-pc-outline-w) * -1) 0 var(--hero-pc-outline),
      var(--hero-pc-outline-w) var(--hero-pc-outline-w) 0 var(--hero-pc-outline),
      calc(var(--hero-pc-outline-w) * -1) var(--hero-pc-outline-w) 0 var(--hero-pc-outline),
      var(--hero-pc-outline-w) calc(var(--hero-pc-outline-w) * -1) 0 var(--hero-pc-outline),
      calc(var(--hero-pc-outline-w) * -1) calc(var(--hero-pc-outline-w) * -1) 0 var(--hero-pc-outline);
      
  }

    .about-hero-info .about-ribbon{
    text-shadow: none;}
}

@media (max-width: 767px){
  /* HERO内のリボンだけはフチ（text-shadow）を無効化 */
  .about-hero-info .about-ribbon{
    text-shadow: none;
  }
}

.about-hero-fig{
  margin: 0;
  display: flex;
  min-width: 0;
}

.about-hero-fig::before{
  content:"";
  display:block;

  width: min(var(--hero-stand-pc-w), 100%);
  aspect-ratio: var(--hero-stand-ar);

  background-image: var(--hero-stand-pc, var(--hero-stand-sp));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right bottom;
}

/* =========================================================
   NPC (PC)
   ========================================================= */
.about-tile{ padding: 0; }

.about-card{
  background: var(--about-card-fill);
  border: 2px solid var(--about-card-line);
  border-radius: 14px;
  box-shadow: 0 12px 28px var(--about-card-shadow);
  overflow: hidden;
  width: 100%;
}

.about-card-inner{ padding: var(--about-pad-y); }

.about-tile-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--about-gap);
  align-items: stretch;
}

.about-tile-fig{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
}

/* =========================================================
   NPC media（画像部）
   - history の .history-media と同じ見た目
   - 黒い台（picture）に padding を取り、その上に画像を載せる
   ========================================================= */
.about-tile-fig picture{
  display:flex;
  width:100%;
  background: var(--about-media-bg);
  padding: var(--about-media-pad-pc);
  border-radius: var(--about-media-radius-pc);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 18px rgba(0,0,0,.35);

  align-items:center;
  justify-content:center;
}

.about-tile-fig img{
  display:block;
  width:100%;
  height:auto;
  border-radius: var(--about-media-radius-img-pc);
  box-shadow: 0 10px 18px rgba(0,0,0,.30);
}

.about-info{
  background: rgba(245,245,245,.46);/*NPC説明部*/
  color: var(--about-ink);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);/*NPC説明部の影*/
  text-align:left;
  min-width:0;
}

.about-tile .about-row{ border-top: 2px dashed rgba(28,34,51,.22); }
.about-tile + .about-tile{ margin-top: var(--about-tile-gap); }

.about-tile.is-reverse .about-tile-fig{ order: 2; }
.about-tile.is-reverse .about-info{ order: 1; }
.about-tile.is-info-right .about-info{ text-align:right; }
.about-tile.is-info-center .about-info{ text-align:center; }
.about-tile.is-fig-right .about-tile-fig{ justify-content:flex-end; }
.about-tile.is-fig-center .about-tile-fig{ justify-content:center; }

/* =========================================================
   SP
   ========================================================= */
@media (max-width: 767px){

  .about-hero-media{
    background-image: var(--hero-bg-sp);
    background-position: var(--hero-bg-pos-sp);
    min-height: clamp(28rem, 140vw, 50rem);
  }

  .about-hero-overlay{
    display: flex;
    flex-direction: column;
    gap: .35rem;
    justify-content: flex-end;

    padding: var(--about-pad-y) var(--about-pad-x);
    padding-bottom: max(.25rem, env(safe-area-inset-bottom));
  }

  .about-hero-overlay::before{
    opacity: var(--hero-veil-sp);
  }

  .about-hero-fig{
     order: 1;
      align-self: flex-start;
       justify-content: flex-start; 
    transform: translateX(0px); /* 右に12px。左なら -12px */
    }
  .about-hero-info{ order: 2; max-width: none; }

  .about-hero-fig::before{
    width: var(--hero-stand-sp-w);
    aspect-ratio: var(--hero-stand-ar);
    background-image: var(--hero-stand-sp, var(--hero-stand-pc));
    background-position: left bottom;
  }

  .about-row{
    grid-template-columns: 7.2em minmax(0, 1fr);
    gap: .8rem;
  }

  .about-hero-info :is(.about-name, .about-name-sub, .about-row dt, .about-row dd){
    color: var(--hero-sp-text);
    text-shadow:
      var(--hero-sp-outline-w) 0 0 var(--hero-sp-outline),
      calc(var(--hero-sp-outline-w) * -1) 0 0 var(--hero-sp-outline),
      0 var(--hero-sp-outline-w) 0 var(--hero-sp-outline),
      0 calc(var(--hero-sp-outline-w) * -1) 0 var(--hero-sp-outline),
      var(--hero-sp-outline-w) var(--hero-sp-outline-w) 0 var(--hero-sp-outline),
      calc(var(--hero-sp-outline-w) * -1) var(--hero-sp-outline-w) 0 var(--hero-sp-outline),
      var(--hero-sp-outline-w) calc(var(--hero-sp-outline-w) * -1) 0 var(--hero-sp-outline),
      calc(var(--hero-sp-outline-w) * -1) calc(var(--hero-sp-outline-w) * -1) 0 var(--hero-sp-outline);
  }

  /* SP NPC（レイアウト維持） */
  .about-card-inner{ padding: 0; }

  .about-tile-grid{
    grid-template-columns: 1fr;
    gap: 0;
    display: grid;
    grid-template-areas: "stack";
  }

  .about-tile-fig{ grid-area: stack; }

  .about-tile-fig picture{
    padding: var(--about-media-pad-sp);
    border-radius: 0;
    box-shadow: none;
  }
  .about-tile-fig img{
    border-radius: 0;
    box-shadow: none;
  }

  .about-info{
    grid-area: stack;
    align-self: end;
    justify-self: stretch;

    margin: clamp(.55rem, 3.4vw, .9rem);
    padding: clamp(.75rem, 3.6vw, 1.05rem) clamp(.85rem, 4.2vw, 1.25rem);

    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    color: var(--about-npc-sp-ink);
    text-align: left;
  }

  .about-info .about-role{
    background: var(--about-npc-sp-role-bg);
    color: var(--about-npc-sp-role-ink);
  }

  .about-info :is(.about-name, .about-name-sub, .about-table, .about-row dt, .about-row dd){
    text-shadow:
      var(--about-npc-sp-outline-w) 0 0 var(--about-npc-sp-outline),
      calc(var(--about-npc-sp-outline-w) * -1) 0 0 var(--about-npc-sp-outline),
      0 var(--about-npc-sp-outline-w) 0 var(--about-npc-sp-outline),
      0 calc(var(--about-npc-sp-outline-w) * -1) 0 var(--about-npc-sp-outline),
      var(--about-npc-sp-outline-w) var(--about-npc-sp-outline-w) 0 var(--about-npc-sp-outline),
      calc(var(--about-npc-sp-outline-w) * -1) var(--about-npc-sp-outline-w) 0 var(--about-npc-sp-outline),
      var(--about-npc-sp-outline-w) calc(var(--about-npc-sp-outline-w) * -1) 0 var(--about-npc-sp-outline),
      calc(var(--about-npc-sp-outline-w) * -1) calc(var(--about-npc-sp-outline-w) * -1) 0 var(--about-npc-sp-outline);
  }

  .about-tile .about-row{
    border-top: 0;
    padding: .35rem 0;
  }

  .about-tile.is-reverse .about-tile-fig{ order: 0; }
  .about-tile.is-reverse .about-info{ order: 0; }
}


/*任意の場所だけ透明文字*/
body[data-page="about"] .sukemoji{
  color: transparent;
  text-shadow: none;
  -webkit-text-stroke: 0;
}