/* 黒ベース・白字。上は紺、下は緑の帯に団体名（今のサイトに合わせた配色） */
:root {
  --bg: #191600;
  --ink: #f5f5f0;
  --sub: #8a897f;
  --cap: #bdbba6;
  --line: #55544a;
  --link: #d8d49a;
  --head: #000a59;
  --head-ink: #aebcf0;
  --foot: #1f4a16;
  --foot-ink: #b9d8a8;
  --face: 120px; /* 顔写真の大きさ（画面の大きさに関係なく固定） */
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--sans); font-size: 16px; line-height: 1.8; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
main { max-width: 960px; margin: 0 auto; padding: 0 16px 50px; }

/* 上下の帯（どちらも団体名＝トップページへのリンク） */
.site-header { background: var(--head); text-align: center; padding: 14px 16px; }
.site-footer { background: var(--foot); text-align: center; padding: 22px 16px; }
.site-name, .site-footer a { font-size: 20px; letter-spacing: .08em; }
.site-name { color: var(--head-ink); }
.site-footer a { color: var(--foot-ink); }

/* 検索窓（小さく右寄せ） */
.search-row { max-width: 960px; margin: 0 auto; padding: 10px 16px 0; display: flex; justify-content: flex-end; }
.search-box { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 0 2px 0 10px; }
.search-box input { width: 110px; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; padding: 1px 0; }
.search-box button { border: 0; background: none; color: var(--sub); padding: 3px 6px; cursor: pointer; display: flex; }
.search-box:focus-within { border-color: var(--cap); }

/* 見出し */
.page-title { text-align: center; font-weight: normal; font-size: 24px; color: var(--sub); margin: 26px 0 22px; }
.page-title small { display: block; font-size: 14px; }
.sec-title { text-align: center; font-weight: normal; font-size: 18px; margin: 44px 0 16px; }

/* トップ：ポスター（横に並べて、指でスライドして選ぶ） */
.posters { --pw: min(78vw, 420px); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 16px calc(50% - var(--pw) / 2) 6px; scrollbar-width: none; }
.posters::-webkit-scrollbar { display: none; }
.poster-slide { flex: 0 0 var(--pw); scroll-snap-align: center; text-align: center; transition: opacity .4s, filter .4s; }
/* 正面以外のポスターは一段暗く */
.poster-slide:not(.is-center) { opacity: .45; filter: brightness(.7); }
.poster-slide img { width: 100%; aspect-ratio: 1 / 1.414; object-fit: cover; }
.poster-text { display: block; margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--sub); }

.about { margin-top: 30px; padding-top: 50px; border-top: 1px solid var(--line); font-style: italic; font-size: 17px; line-height: 1.9; }
.president { text-align: center; font-style: normal; margin-top: 4px; letter-spacing: .1em; }

/* トップ：Instagram */
.insta { margin-top: 40px; }
.insta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.insta-item { aspect-ratio: 1; overflow: hidden; }
.insta-item img { width: 100%; height: 100%; object-fit: cover; }
.insta-cap { display: none; }
/* 看板（写真のマスと同じ大きさの正方形を、6マスの上の中央に置く。押すとインスタのページへ） */
.insta-sign-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.insta-sign { grid-column: 2; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; background: #24210a; border: 1px solid var(--line); color: var(--ink); text-align: center; transition: background .3s; }
.insta-sign:hover { background: #2e2a0e; }
.insta-sign svg { width: 32%; max-width: 60px; height: auto; }
.insta-sign-text { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.insta-sign-name { font-size: 16px; letter-spacing: .08em; }
.insta-sign-id { font-size: 12px; color: var(--sub); }

/* トップ：会員 */
.members { text-align: center; }
.member-genre h3 { font-weight: normal; font-size: 16px; color: var(--sub); margin: 24px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.member-genre h3 span { margin-left: 4px; }
.member-genre ul { list-style: none; margin: 0; padding: 0; }
.member-genre li { padding: 3px 0; }

/* 一覧（どの画面でも3列の正方形） */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
.card { display: block; text-align: center; }
.thumb { aspect-ratio: 1; overflow: hidden; background: #2a2710; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-cap { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--cap); }
.card-cap small { color: var(--sub); }
.grid-ex .thumb { aspect-ratio: 1 / 1.414; }

/* 作家一覧・検索結果の作家：顔写真は固定サイズ */
.grid-artist { grid-template-columns: repeat(auto-fill, var(--face)); justify-content: center; gap: 18px 14px; }
.thumb-face { width: var(--face); height: var(--face); margin: 0 auto; }
.noface { display: block; width: 100%; height: 100%; background: #2a2710; }

/* 展覧会ページ：ポスター表裏は常に横並び */
.ex-posters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ex-posters img { width: 100%; }
.ex-venue { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 6px; }
.ex-venue img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ex-info { text-align: center; margin: 18px 0 24px; }

/* 作家ページ・作品ページ */
.artist-head { margin-top: 20px; }
.artist-photo { width: var(--face); height: var(--face); object-fit: cover; margin: 0 auto 12px; }
.artist-name { text-align: center; font-size: 20px; font-weight: bold; margin: 0; }
.romaji { text-align: center; color: var(--sub); margin: 0 0 6px; font-size: 14px; }
.artist-head .genre-tag { text-align: center; }
.genre-tag { margin: 0; font-size: 15px; }
.genre-tag a { color: var(--sub); }
.profile { margin: 16px 0 30px; }

.work { margin-top: 16px; }
.work-img img { width: 100%; max-height: 85vh; object-fit: contain; }
.work-title { font-size: 22px; font-weight: bold; margin: 18px 0 4px; line-height: 1.5; }
.work-year { color: var(--sub); margin: 0; font-size: 15px; }
.work-year a { color: var(--sub); }
.work-meta { margin: 6px 0 0; }
.work-meta dt { float: left; clear: left; }
.work-meta dt::after { content: "："; }
.work-meta dd { margin: 0; }
.work-meta a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.work-comment { margin-top: 18px; }
.artist-box { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.artist-box-name { text-align: center; font-weight: bold; margin: 0; }

/* パンくず */
.crumbs { margin-top: 44px; font-size: 13px; color: var(--sub); }
.crumbs span { margin: 0 6px; }

/* 検索ページ */
.search-page-form { display: flex; gap: 8px; max-width: 520px; }
.search-page-form input { flex: 1; font: inherit; font-size: 16px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 4px; background: #24210a; color: var(--ink); }
.search-page-form button { font: inherit; font-size: 15px; padding: 0 20px; border: 0; border-radius: 4px; background: #333; color: #fff; cursor: pointer; }
.search-hint { font-size: 13px; color: var(--sub); }
.search-hint a { text-decoration: underline; }
.search-count { margin-top: 20px; color: var(--sub); }

/* 広い画面では、一覧の間隔とポスターの幅を少し広げる */
@media (min-width: 761px) {
  .grid { gap: 22px 16px; }
  .posters { --pw: 360px; }
}

/* ポスター送りボタン（マウスで操作する画面だけに表示） */
.posters-wrap { position: relative; }
.poster-nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .poster-nav { display: block; position: absolute; top: 40%; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 26px; line-height: 32px; cursor: pointer; }
  .poster-nav.prev { left: -6px; }
  .poster-nav.next { right: -6px; }
}

/* 区分ラベル（選抜工芸作家展・日韓国際交流工芸美術展） */
.group-label { text-align: center; margin: 40px 0 18px; }
.group-label span { display: inline-block; font-size: 13px; letter-spacing: .12em; color: var(--cap); border: 1px solid var(--line); padding: 2px 14px; }
.work-label { display: inline-block; margin: 16px 0 0; font-size: 12px; letter-spacing: .1em; color: var(--cap); border: 1px solid var(--line); padding: 0 10px; line-height: 1.9; }
.work-label + .work-title { margin-top: 8px; }
.other-works { margin-top: 10px; }

/* 展覧会ページ：タイトル左右の前後の回へのリンク、会場写真と作品の間は2行分あける */
.ex-title { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 26px 0 22px; }
.ex-title .page-title { margin: 0; }
.ex-nav { width: 32px; text-align: center; font-size: 22px; color: var(--sub); line-height: 1; }
.ex-nav:hover { color: var(--ink); }
.ex-works { margin-top: 3.6em; }