/* =========================
   min.css (single source of truth)
   - base 12px
   - topline same size
   - works index = wrap grid
   - profile = 2 columns
   - concept = vertical subnav
   - works detail (old html) = minimal + centered images + no upscale
   ========================= */

/* ===== 1) Base ===== */
:root{
  --pad: 100px;

  --text:#111;
  --muted:#666;
  --line:#ddd;
  --bg:#fff;

  --fs:12px;
  --lh:1.9;

  --thumb:70px;

  --works-col-gap: 100px;
  --works-row-gap: 20px;

  --content-max: 980px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",
              "Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
  font-size:var(--fs);
  line-height:var(--lh);
}

/* links: unify + visited fix */
a{ color:var(--text); text-decoration:none; }
a:visited{ color:var(--text); }
a:hover{ text-decoration:underline; }

/* ===== 2) Layout common (new pages) ===== */
.center{
  width:100%;
  min-height:100vh;
  padding:var(--pad);
}
.frame{
  width:100%;
  max-width:none;
  margin:0;
  min-height:calc(100vh - (var(--pad) * 2));
  display:flex;
  flex-direction:column;
}
.topline{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:nowrap;          /* 1行固定 */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:var(--fs);
  letter-spacing:.02em;
}
.topline a{ font-size:var(--fs); padding:2px 0; }

.hr{
  border:0;
  border-top:1px solid var(--line);
  margin:14px 0 0;
}
.page{ margin-top:18px; }
.foot{ margin-top:18px; font-size:var(--fs); }

/* ===== 3) Typography helpers ===== */
.h1,h1{
  font-size:14px;
  font-weight:600;
  margin:0 0 14px;
  line-height:1.5;
}
.h2,h2{
  font-size:13px;
  font-weight:600;
  margin:0 0 12px;
  line-height:1.5;
}
.p,p{
  font-size:var(--fs);
  margin:0 0 14px;
}
.richtext{
  font-size:var(--fs);
  line-height:var(--lh);
  max-width:760px;
}

/* ======================================================
   WORKS index (your HTML uses <section class="grid">)
   ====================================================== */
.grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--thumb), var(--thumb)));
  column-gap:var(--works-col-gap);
  row-gap:var(--works-row-gap);
  align-content:start;
}

.card{ width:var(--thumb); }
.card a{ display:block; width:var(--thumb); }

.thumb{
  display:block;
  width:var(--thumb);
  height:var(--thumb);
  overflow:hidden;
  background:#f3f3f3;
  border:1px solid #eee;
}
.thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* caption: 1行固定で右にはみ出してOK */
.cap{
  margin-top:8px;
  font-size:10px;
  line-height:1.2;
  color:var(--muted);
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
.card a:hover .thumb{ border-color:#bbb; }

/* ======================================================
   PROFILE (body class="is-profile")
   ====================================================== */
.is-profile .page--profile{
  margin-top:18px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:40px;
  align-items:start;
  max-width:1100px;          /* 右に寄りすぎ防止 */
}
.is-profile .article{ max-width:760px; }
.is-profile .profile-aside{
  max-width:320px;
  justify-self:start;
}
@media (max-width:900px){
  .center{ padding:40px; }
  .is-profile .page--profile{
    grid-template-columns:1fr;
    gap:18px;
    max-width:none;
  }
  .is-profile .profile-aside{ max-width:760px; }
}

/* ======================================================
   CONCEPT (body class="is-concept")
   ====================================================== */
.is-concept .subnav{
  margin:18px 0 22px;
  display:block;
}
.is-concept .subnav__item{
  display:block;
  font-size:var(--fs);
  line-height:1.6;
  letter-spacing:.02em;
  margin:0 0 6px;
  padding:0;
  width:max-content;
  max-width:100%;
}
.is-concept .subnav__item.is-active{ text-decoration:underline; }
.is-concept .page--concept{ margin-top:0; }
.is-concept .article{ max-width:760px; }

/* ======================================================
   WORKS detail pages (old HTML) – normalize safely
   - affects pages that have #attention + #MAIN + #CONTENT
   - HTMLは触らない前提
   ====================================================== */

/* outer padding */
#attention{
  width:100%;
  padding:var(--pad);
}

/* 背景帯は消す */
#HEAD-BG,#FOOT-BG{ background:transparent !important; }

/* ロゴは消す（画像ロゴも） */
#HEAD h1,
#HEAD h1 img{
  display:none !important;
}

/* 旧グロナビをテキスト化（残す） */
#NAVI{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:var(--fs);
  letter-spacing:.02em;
}
#NAVI li{ margin:0; padding:0; }
#NAVI a{ color:var(--text); text-decoration:none; }
#NAVI a:visited{ color:var(--text); }
#NAVI a:hover{ text-decoration:underline; }

/* main */
#MAIN{
  width:100%;
  margin:0;
  min-height:calc(100vh - (var(--pad) * 2));
  display:flex;
  flex-direction:column;
}

/* hr substitute */
#MAIN:before{
  content:"";
  display:block;
  border-top:1px solid var(--line);
  margin:14px 0 0;
}

/* content width */
#CONTENT{
  width:min(var(--content-max), 100%);
  margin:24px 0 0;
  font-size:var(--fs);
  line-height:1.85;
}

/* title */
#CONTENT h2{
  margin:0 0 18px;
  font-size:var(--fs);
  font-weight:600;
  letter-spacing:.02em;
}

/* 写真エリアは中央寄せ（元HTMLが align="center" のため） */
#CONTENT div[align="center"]{
  text-align:center !important;
}

/* ===== 重要：画像を “拡大しない” + 中央寄せ + 余白 =====
   - 小さい元画像は原寸のまま（ボケ防止）
   - 大きい元画像だけ縮小して画面にフィット
*/
#CONTENT img{
  display:block;
  width:auto;           /* 原寸優先 */
  max-width:100%;       /* 画面より大きい時だけ縮小 */
  height:auto;
  margin:0 auto 18px;   /* 写真間隔を復活 */
}

/* prev/next nav を “埋もれにくく” */
.archive-navi{
  margin-top:18px;
  font-size:var(--fs);
  padding:10px 0;
  position: sticky;
  bottom: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.archive-navi a{
  color:var(--text);
  text-decoration:none;
}
.archive-navi a:visited{ color:var(--text); }
.archive-navi a:hover{ text-decoration:underline; }

/* old right column: hide */
.SUBCONTENT{ display:none; }

/* footer */
#FOOT{ margin-top:18px; font-size:var(--fs); }
#FOOT p{ margin:0; color:var(--muted); }

@media (max-width:640px){
  #attention{ padding:28px; }
  #NAVI{ gap:12px; }
  #CONTENT{ margin-top:18px; }
}

/* works detail: 小さい画像を引き伸ばさない（原寸以上に拡大禁止） */
#CONTENT img{
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
}
/* 画像間の余白（元の <br><br> の代わり） */
#CONTENT img{ margin: 0 auto 18px !important; }