/* ===== 月面脱兎社 リニューアル（試作） ===== */
:root{
  --bg:#FFF1E1;
  --ink:#1a1a1a;
  --muted:#8a7f74;
  --line:#e3d4c2;
  --cell:256px;
  --photo:184px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:15px; line-height:1.95; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; height:auto;}
a{color:inherit;}

/* ---- 上の横並びメニュー（パソコン） ---- */
.topbar{
  position:sticky; top:0; z-index:20; background:var(--bg);
  display:flex; align-items:center; gap:38px;
  padding:20px 32px; border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:0 0 auto;}
.brand img{width:46px; height:46px; object-fit:contain;}
.brand span{font-size:14px; letter-spacing:.16em; white-space:nowrap;}
.top-nav{margin-left:auto;}
.top-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:30px;
}
.top-nav a{
  text-decoration:none; font-size:13px; letter-spacing:.11em;
  white-space:nowrap; padding:4px 1px; display:inline-block;
}
.top-nav a:hover{opacity:.45;}
.top-nav a.current{border-bottom:1px solid var(--ink);}
.menu-btn{
  all:unset; cursor:pointer; font-size:13px; letter-spacing:.14em;
  padding:6px 2px; margin-left:auto; display:none;
}
.menu-btn:hover{opacity:.55;}

/* ---- 全画面メニュー ---- */
.menu{
  position:fixed; inset:0; z-index:30; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;
}
.menu.open{opacity:1; visibility:visible; transition:opacity .3s ease, visibility 0s;}
.menu ul{list-style:none; margin:0; padding:0; text-align:center;}
.menu li{margin:14px 0;}
.menu a{
  text-decoration:none; font-size:25px; letter-spacing:.1em; line-height:1.4;
  display:inline-block; padding:2px 6px;
}
.menu a:hover{opacity:.45;}
.menu a.current{border-bottom:1px solid var(--ink);}
.menu-close{
  all:unset; cursor:pointer; position:absolute; top:22px; right:38px; font-size:30px; line-height:1; padding:6px;
}
.menu-close:hover{opacity:.5;}
.menu-foot{margin:44px 0 0; font-size:12px; letter-spacing:.08em; color:var(--muted);}
.pdf-mark{
  font-size:9px; letter-spacing:.1em; border:1px solid currentColor;
  padding:1px 4px; margin-left:8px; vertical-align:middle; color:var(--muted);
}

/* ---- 本文 ---- */
main{max-width:900px; margin:0 auto; padding:60px 32px 100px;}
main.wide{max-width:1240px;}
.page-title{
  font-size:27px; font-weight:400; letter-spacing:.12em;
  margin:0 0 48px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.page-title span{
  display:block; font-size:11.5px; letter-spacing:.22em; color:var(--muted); margin-top:9px;
}
main p{margin:0 0 1.9em;}
.lead{
  font-size:21px; line-height:1.85; letter-spacing:.04em; margin-bottom:2.4em;
}
.sign{margin-top:3em; text-align:right; line-height:2.1;}
.note{
  font-size:13.5px; color:var(--muted); border-left:2px solid var(--line);
  padding-left:16px; margin-bottom:3em;
}
.note strong{color:var(--ink); font-weight:600;}

/* ---- member ---- */
.member-list{display:flex; flex-direction:column; gap:0;}
.member-card{
  display:grid; grid-template-columns:240px 1fr; gap:40px;
  font-size:13.5px; line-height:1.95;
  padding:46px 0; border-bottom:1px solid var(--line);
}
.member-card:first-child{padding-top:0;}
.member-photo{position:relative; margin-bottom:0;}
.member-photo img{width:100%; display:block;}
.member-photo .credit{}
.member-photo .credit{
  position:absolute; right:0; bottom:-16px; font-size:10px; color:var(--muted);
}
.member-card h2{
  font-size:17px; font-weight:600; letter-spacing:.05em; margin:0 0 4px; line-height:1.6;
}
.member-card h2 .en{
  display:block; font-size:11px; letter-spacing:.14em; color:var(--muted);
  font-weight:400; margin-top:3px;
}
.member-card .role{color:var(--muted); font-size:12.5px; margin:0 0 1.4em;}
.member-card p{margin:0 0 1.2em;}

/* ---- ロゴ ---- */
.logo-row{display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:48px;}
.logo-row figure{margin:0;}
.logo-row video, .logo-row img{width:100%; display:block; background:#fff;}
.logo-row figcaption{margin-top:14px; font-size:12px; color:var(--muted); line-height:1.9;}

/* ---- 団体概要 ---- */
.org{margin:0;}
.org-row{
  display:grid; grid-template-columns:150px 1fr; gap:20px;
  padding:22px 4px; border-bottom:1px solid var(--line);
}
.org dt{color:var(--muted); font-size:13px; letter-spacing:.06em;}
.org dd{margin:0; line-height:2.1;}
.org-link{margin-top:40px;}
.org-link a{text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px;}

/* ---- archive / TOPICS の見本 ---- */
.ph-list{list-style:none; margin:0; padding:0;}
.ph-item{
  display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.ph-thumb{aspect-ratio:4/3; background:rgba(0,0,0,.06);}
.ph-date{display:block; font-size:12px; color:var(--muted); letter-spacing:.08em; margin-bottom:12px;}
.ph-line{display:block; height:11px; background:rgba(0,0,0,.07); margin-bottom:9px;}
.ph-line.short{width:52%;}

/* ---- トップの写真グリッド ---- */
.grid{
  list-style:none; margin:0 auto; padding:0;
  display:grid; grid-template-columns:repeat(4, var(--cell));
  grid-auto-flow:dense;   /* 大きい写真のまわりに穴が空かないよう詰める */
  justify-content:center; width:max-content; max-width:100%;
}
.cell{width:var(--cell); height:var(--cell); display:flex; align-items:center; justify-content:center;}
/* 「大きく」を選んだ写真は2マス分を使う */
.cell.large{grid-column:span 2; grid-row:span 2; width:auto; height:auto;}
.cell.large .thumb img{max-width:calc(var(--photo) * 2); max-height:calc(var(--photo) * 2);}
.cell.large .overlay{padding:22px 22px 20px;}
.cell.large .overlay h2{font-size:16px;}
.cell.large .overlay .meta{font-size:11px;}
.cell.large .overlay p.body{font-size:13px;}
.thumb{position:relative; display:inline-block; line-height:0;}
.thumb img{display:block; max-width:var(--photo); max-height:var(--photo); width:auto; height:auto;}
.overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px 16px 15px; color:#fff; text-align:left; line-height:1.55; overflow:hidden;
  background:linear-gradient(to top, rgba(20,16,12,.82) 0%, rgba(20,16,12,.62) 55%, rgba(20,16,12,.34) 100%);
  opacity:0; transition:opacity .28s ease;
}
.overlay h2{font-size:13px; font-weight:600; letter-spacing:.05em; margin:0 0 3px;}
.overlay .meta{font-size:10px; letter-spacing:.09em; opacity:.72; margin:0 0 9px;}
.overlay p.body{font-size:11px; margin:0; white-space:pre-wrap; overflow:hidden;}
@media (hover:hover){ .thumb:hover .overlay{opacity:1;} }
.thumb.show .overlay{opacity:1;}
.top-lead{text-align:center; margin:0 auto 52px; max-width:620px; font-size:14px; color:var(--muted);}

/* ---- フッター ---- */
footer{
  text-align:center; padding:56px 20px 44px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted); letter-spacing:.06em;
}
footer p{margin:6px 0 0;}
.foot-fb{display:inline-block; opacity:.55;}
.foot-fb:hover{opacity:1;}
footer img{opacity:.6;}
footer img:hover{opacity:1;}
.copy{margin-top:16px !important; font-size:11px;}

/* ---- 狭い画面 ---- */
@media (max-width:1100px){ .grid{grid-template-columns:repeat(3, var(--cell));} }
@media (max-width:1040px){
  .top-nav{display:none;}
  .menu-btn{display:block;}
}
@media (max-width:860px){
  :root{--cell:200px; --photo:150px;}
  .topbar{padding:16px 22px;}
  .brand img{width:36px; height:36px;}
  main{padding:36px 22px 72px;}
  .grid{grid-template-columns:repeat(2, var(--cell));}
  .member-card{grid-template-columns:1fr; gap:20px;}
  .member-photo{max-width:260px;}
  .logo-row{grid-template-columns:1fr; gap:40px;}
  .org-row, .ph-item{grid-template-columns:1fr; gap:8px;}
  .ph-thumb{max-width:220px;}
  .page-title{font-size:23px; margin-bottom:34px;}
  .lead{font-size:18px;}
  .menu a{font-size:21px;}
}

/* ---- 一覧（TOPICS / archive） ---- */
.entry-list{list-style:none; margin:0; padding:0;}
.entry{border-bottom:1px solid var(--line);}
.entry a{
  display:grid; grid-template-columns:180px 1fr; gap:28px; align-items:center;
  padding:26px 0; text-decoration:none;
}
.entry a:hover{opacity:.6;}
.entry.no-thumb a{grid-template-columns:1fr;}
.entry-thumb img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover;}
.entry-date{display:block; font-size:12px; color:var(--muted); letter-spacing:.08em; margin-bottom:8px;}
.entry-text h2{font-size:16px; font-weight:600; margin:0 0 8px; line-height:1.6;}
.entry-text p{margin:0; font-size:13px; color:var(--muted); line-height:1.9;}
.single-thumb{margin:0 0 2.4em;}
.single-thumb img{width:100%; display:block;}
.back{margin-top:3.5em; padding-top:24px; border-top:1px solid var(--line); font-size:13px;}
.pagination, .nav-links{margin-top:40px; font-size:13px; letter-spacing:.08em;}
.nav-links .page-numbers{padding:6px 10px; text-decoration:none;}
.nav-links .current{border-bottom:1px solid var(--ink);}

/* 投稿本文（管理画面で書いた文章） */
main .wp-block-image{margin:2.4em 0;}
main h2{font-size:19px; letter-spacing:.04em; margin:2.6em 0 .9em;}
main h3{font-size:16px; letter-spacing:.04em; margin:2.2em 0 .8em;}
main ul:not(.grid):not(.entry-list), main ol{padding-left:1.4em; margin:0 0 1.9em;}
main a{text-underline-offset:3px;}

@media (max-width:860px){
  .entry a{grid-template-columns:110px 1fr; gap:18px;}
}

/* ---- トップを開いたときのエフェクト ---- */
#splash{
  position:fixed; inset:0; z-index:9999;
  background:#fff; text-align:center; overflow:hidden;
  transition:opacity .6s ease;
}
#splash.fade{opacity:0; pointer-events:none;}
#splash_logo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  transition:opacity .6s ease;
}
#splash_logo.fade{opacity:0;}
#splash_logo video{width:100%; height:90vh; outline:none; border:none;}
@media screen and (max-width:640px){
  #splash_logo video{width:100vw; height:auto;}
}

/* ============================================================
   写真のフレーム（額縁）
   写真ごとに、管理画面の「フレーム」で選びます。
   細い枠・面取りの陰影・写真との段差・落ち影、の4つで立体に見せています。
   ============================================================ */
.thumb.fr{
  --fw:3px;                        /* 枠の太さ */
  padding:var(--fw);
  position:relative;
  border-radius:1px;
  background-clip:padding-box;
  /* 落ち影（浮いて見せる）＋外周の角 */
  box-shadow:
    0 1px 1px rgba(45,32,20,.16),
    0 9px 20px rgba(45,32,20,.20),
    0 2px 5px rgba(45,32,20,.10);
}

/* 枠の内側の面取り（外は明るく、写真側は暗く） */
.thumb.fr::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  border-radius:1px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    inset 0 0 0 var(--fw) rgba(0,0,0,.05);
}

/* 写真と枠の段差（窓にはめ込んだ感じ） */
.thumb.fr::after{
  content:""; position:absolute; inset:var(--fw); pointer-events:none; z-index:2;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18),
    inset 0 1px 3px rgba(0,0,0,.24);
}

.thumb.fr .overlay{ inset:var(--fw); z-index:3; }
.cell.large .thumb.fr{ --fw:5px; }

/* 木目は「上下＝横目／左右＝縦目」になるよう、4辺を別々に描く */
.thumb.fr-wood-light, .thumb.fr-wood-dark, .thumb.fr-charcoal{
  background-image:
    repeating-linear-gradient(180deg, var(--ga) 0 1px, var(--gb) 1px 2px, var(--gc) 2px 4px, transparent 4px 7px),
    repeating-linear-gradient(180deg, var(--ga) 0 1px, var(--gb) 1px 2px, var(--gc) 2px 4px, transparent 4px 7px),
    repeating-linear-gradient(90deg,  var(--ga) 0 1px, var(--gb) 1px 2px, var(--gc) 2px 4px, transparent 4px 7px),
    repeating-linear-gradient(90deg,  var(--ga) 0 1px, var(--gb) 1px 2px, var(--gc) 2px 4px, transparent 4px 7px),
    var(--sheen),
    var(--base);
  background-size:
    100% var(--fw), 100% var(--fw), var(--fw) 100%, var(--fw) 100%, 100% 100%, 100% 100%;
  background-position: top left, bottom left, left top, right top, center, center;
  background-repeat: no-repeat;
}

/* ---- 木目（ライト） ---- */
.thumb.fr-wood-light{
  background-color:#d9b98d;
  --ga:rgba(122,82,39,.17);
  --gb:rgba(255,242,219,.20);
  --gc:rgba(152,106,53,.08);
  --sheen:linear-gradient(118deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 38%, rgba(90,58,26,.20) 100%);
  --base:linear-gradient(180deg, #e7cda4 0%, #d3ad7c 52%, #bd9564 100%);
}

/* ---- 木目（濃いめ） ---- */
.thumb.fr-wood-dark{
  background-color:#5d3c24;
  --ga:rgba(26,13,5,.32);
  --gb:rgba(196,142,89,.18);
  --gc:rgba(62,34,16,.20);
  --sheen:linear-gradient(118deg, rgba(255,214,166,.22) 0%, rgba(255,255,255,0) 40%, rgba(20,10,4,.42) 100%);
  --base:linear-gradient(180deg, #6f4a2d 0%, #573521 55%, #3f2515 100%);
}

/* ---- 黒（焦茶） ---- */
.thumb.fr-charcoal{
  background-color:#2f251e;
  --ga:rgba(0,0,0,.24);
  --gb:rgba(128,100,74,.11);
  --gc:rgba(0,0,0,.10);
  --sheen:linear-gradient(118deg, rgba(255,232,206,.16) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.40) 100%);
  --base:linear-gradient(180deg, #3b2f26 0%, #2b221b 58%, #1d1611 100%);
}

/* ---- 金縁 ---- */
.thumb.fr-gold{
  background-color:#c9a227;
  background-image:
    linear-gradient(125deg,
      #8a6a1e 0%,  #b98f28 8%,  #dcb64a 18%, #fbf0c2 28%, #e3c05c 38%,
      #a8801f 50%, #d9b043 60%, #f6e8ad 70%, #c49a2c 82%, #8d6c1d 100%);
}
.thumb.fr-gold::before{
  box-shadow:
    inset 0 0 0 1px rgba(255,248,214,.55),
    inset 0 0 0 calc(var(--fw) - 1px) rgba(90,64,10,.10);
}

/* ---- 白（オフホワイト） ---- */
.thumb.fr-white{
  background-color:#f4ece0;
  background-image:
    linear-gradient(118deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 45%, rgba(150,126,96,.20) 100%),
    linear-gradient(180deg, #fbf6ed 0%, #f1e7d8 56%, #e4d7c3 100%);
}
.thumb.fr-white::after{
  box-shadow:
    0 0 0 1px rgba(90,70,45,.16),
    inset 0 1px 3px rgba(0,0,0,.18);
}

@media (max-width:860px){ .thumb.fr{ --fw:2px; } .cell.large .thumb.fr{ --fw:4px; } }

/* ---- 影だけ（フレームなし） ---- */
.thumb.fr-shadow{
  --fw:0px;
  padding:0;
  background:none;
  box-shadow:
    0 2px 4px rgba(45,32,20,.14),
    0 12px 26px rgba(45,32,20,.20);
}
.thumb.fr-shadow::before,
.thumb.fr-shadow::after{ display:none; }
.thumb.fr-shadow .overlay{ inset:0; }