/* ====== Vars (tuned to style.css) ====== */
:root{ --text:#999; --bg:#fff; --brand:#b4ae99; --muted:#fff; --link:#999; --link-hover:#b4ae99; --border:#999; --radius:10px; }

/* ====== Reset & Base ====== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;padding:0;-webkit-text-size-adjust:none;color:var(--text);background:var(--bg);
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-size:16px;line-height:2}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,select,input,textarea{margin:0;padding:0;font-size:100%;font-weight:normal}
ul{list-style:none}
ol{padding-left:40px;padding-bottom:15px}
img{border:0;max-width:100%;height:auto;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0;font-size:100%}
iframe{width:100%}

a{color:var(--link);text-decoration:none;transition:.3s}
a:hover{color:var(--link-hover)}

/* ====== Layout ====== */
.container{max-width:1400px;margin-inline:auto;padding:0 3%}
.stack{display:grid;gap:24px}
main{padding:32px 0 64px}
section{padding:24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}
.box{border:1px solid var(--border);border-radius:var(--radius)}

/* ====== Header & Logo ====== */
header{text-align:center}
#logo img{width:400px;margin:40px auto}
.site-subtitle.container{margin-top:-20px;margin-bottom:10px}

/* ====== Navigation (style.cssに準拠) ====== */
#menubar{text-align:center;font-size:18px;margin-bottom:40px}
#menubar li{display:inline}
#menubar li a{padding:15px 30px;border-bottom:4px solid transparent}
#menubar li a:hover,#menubar li a[aria-current="page"]{color:var(--brand);border-bottom-color:var(--brand)}

/* ====== Content Headings & paragraphs (style.css移植) ====== */
#contents h2{clear:both;margin-bottom:20px;color:#fff;padding:10px 20px;background: #b4ae99;border-radius:var(--radius)}
#contents h3{clear:both;margin-bottom:20px;padding:8px 20px;background:#fff;border:1px solid #999;border-radius:var(--radius)}
#contents p{padding:0 20px 20px}
#contents p+p{margin-top:-5px}
#contents h2+p,#contents h3+p{margin-top:-10px}
#contents section+section{margin-top:30px}

/* Homeの見出しも同等に（#contents外のh2/h3対策） */
#main>section>h2{clear:both;margin-bottom:20px;color:#fff;padding:10px 20px;background:var(--brand);border-radius:var(--radius)}
#main>section>h3{clear:both;margin-bottom:20px;padding:8px 20px;background:#fff;border:1px solid var(--border);border-radius:var(--radius)}

/* ====== Gallery list（参照用） ====== */
.list{overflow:hidden;border-bottom:1px solid var(--border);padding:20px}
.list h4{color:var(--brand)}
.list img{width:20%;float:left;margin-right:3%}
.list p{padding:0 !important}

/* ====== Footer ====== */
footer{clear:both;text-align:center;padding:30px 0 10px}
footer a{text-decoration:none;border:0}
footer .pr{display:block}

/* ====== News (style.cssの#new) ====== */
#new dl{padding:0 20px;margin-bottom:20px}
#new dt{font-weight:bold;float:left;width:8em}
#new dd{padding-left:8em}

/* ====== Tables (.ta1 from style.css) ====== */ (.ta1 from style.css) ====== */
.ta1 caption{border:1px solid var(--border);border-bottom:none;text-align:left;background:#eee;font-weight:bold;padding:10px}
.ta1 th.tamidashi{width:auto;text-align:left;background:#eee}
.ta1{table-layout:fixed;width:100%;margin:0 auto 20px}
.ta1,.ta1 td,.ta1 th{word-break:break-all;border:1px solid var(--border);padding:10px}
.ta1 th{text-align:center;width:30%}

/* ====== NEW icon & utilities ====== */
.newicon{background:#f00;color:#fff;font-size:70%;line-height:1.5;padding:2px 5px;border-radius:2px;margin:0 5px;vertical-align:text-top}
.look{background:#e5e5e5;padding:5px 10px;border-radius:4px}
.mb15,.mb1em{margin-bottom:15px}
.color1{color:var(--brand)}
.pr{font-size:12px}
.wl{width:96%}
.ws{width:50%}
.c{text-align:center}.r{text-align:right}.l{text-align:left}

/* ====== Loader ====== */
.loader{display:flex;align-items:center;gap:.6rem;color:#666}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:#bbb;display:inline-block;animation:b 1.2s infinite}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}
@keyframes b{0%,80%,100%{transform:scale(.7);opacity:.5}40%{transform:scale(1);opacity:1}}

/* ====== Responsive ====== */
@media (max-width:900px){
  body{font-size:14px;line-height:1.7}
}
@media screen and (max-width:580px){
  body{font-size:12px;line-height:1.5}
  #menubar li{display:block;margin-bottom:10px}
  #menubar li a{padding:8px 30px}
  .list{padding:10px}
  .ws,.wl{width:94%}
}
  /* HOME KV: キャプション（左上 sticky 追従） */
  #kv{position:relative;display:grid}
  #kv > *{grid-area:1/1}
  #kv img{grid-area:1/1}
  /* ▼ここを拡大 */
  #kv .kv-caption{position:sticky;top:16px;justify-self:start;align-self:start;margin:16px;color:#fff;background:rgba(0,0,0,.45);padding:12px 16px;border-radius:8px;line-height:1.7;z-index:2;width:fit-content;max-width:min(98%,920px);overflow-wrap:anywhere}
  #kv .kv-caption p{margin:0;padding:0}
  #kv .kv-caption p+p{margin-top:4px}
  #kv .kv-title{margin:0;font-size:clamp(20px,4.2vw,28px);font-weight:700;line-height:1.3}
  #kv .kv-meta{margin:0;font-size:clamp(12px,1.8vw,14px);opacity:.95}
  @media (max-width:580px){
    #kv .kv-caption{top:10px;margin:10px;padding:10px 12px;max-width:96%}
  }
  /* ===== Main コンテンツ内のリンク下線（本文） ===== */
#main a{
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
#main a:hover{ text-decoration: underline; }

/* ===== Menubarリンク下線（←今回ONに変更） ===== */
header nav a{ text-decoration: none; }      /* ほかのヘッダリンク（ロゴなど）は従来どおり */
#menubar a{
  text-decoration: underline;               /* 常時下線 */
  text-underline-offset: 3px;               /* 少し離す（下辺ボーダーとの干渉を低減） */
  text-decoration-thickness: 1.2px;         /* やや細めで可読性確保 */
}
#menubar a:hover{ text-decoration: underline; }

/* Event subpage: keyvisual + list two-column */
#contents .cols-2{
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* 画像やや広め */
  gap: 24px;
  align-items: start;
}
#contents .cols-2 .media img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
@media (max-width: 768px){
  #contents .cols-2{ grid-template-columns: 1fr; }
}
/* 02_2：キービジュアル左／サークル情報右（スマホは縦） */
#contents .cols-2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
#contents .cols-2 .col{min-width:0}
#contents .cols-2 .media img{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:var(--radius)}
@media (max-width:768px){#contents .cols-2{grid-template-columns:1fr}}

/* サークルリスト：カット雛形（400×600想定 / 比率2:3） */
#contents .circle-list .cut.ph{width:200px;aspect-ratio:2/3;border:1px dashed var(--border);display:grid;place-items:center;background:#fff;color:#666;margin:auto}
#contents .circle-list img{width:200px;height:auto;display:block;margin:auto;border:1px solid var(--border);}
/* PC=KV内sticky, SP=KVと更新情報の間に独立表示 */
#event-summary{ display:none; }
@media (max-width:768px){
  #kv .kv-caption{ display:none; }  /* モバイルではオーバーレイ非表示 */
  #event-summary{ display:block; }  /* モバイルでは独立セクションを表示 */
}


/* 3-1) サークルカット（2:3でトリミング） */
#contents img.circle-cut{
  width:auto;
  height:130px;
  object-fit:cover;   /* 歪み防止 */
  display:block;
}

/* 3-2) ダイアログビューア */
dialog.image-viewer{ border:0; padding:0; background:transparent; }
dialog.image-viewer::backdrop{ background:rgba(0,0,0,.82); }
.image-viewer__stage{ display:grid; place-items:center; max-width:96vw; max-height:96vh; }
.image-viewer__img{ max-width:96vw; max-height:96vh; display:block; }
a.zoom{ cursor: zoom-in; }

/* === circle-list: PC/SP両対応（行高=枠高／一覧は枠いっぱい表示） === */
/* 影響範囲を .ta1.circle-list に限定し、他テーブルへの副作用を避けます */

/* 列幅とベース（PC基準） */
#contents table.ta1.circle-list{ table-layout: fixed; }
#contents table.ta1.circle-list tr{ height:auto; }
#contents table.ta1.circle-list th,
#contents table.ta1.circle-list td{ height:auto; padding-block:.35rem; vertical-align:top; }
#contents table.ta1.circle-list tr > :nth-of-type(1){ width:6em; text-align:left; }
#contents table.ta1.circle-list tr > :nth-of-type(3){ width:auto; }

/* 2列目＝画像枠（PCは最大幅を控えめに） */
#contents table.ta1.circle-list tr > :nth-of-type(2){ width:220px; }
#contents table.ta1.circle-list td:nth-of-type(2){ padding-top:0; padding-bottom:0; }
#contents table.ta1.circle-list td:nth-of-type(2) a.zoom{
  display:block; width:100%; max-width:220px; aspect-ratio:2/3;
  border:1px solid var(--border, #ccc); border-radius:4px; overflow:hidden;
  box-sizing:border-box; /* 枠線の分でズレないように */
}
#contents table.ta1.circle-list td:nth-of-type(2) a.zoom>img.circle-cut{
  display:block; width:100%; height:100%; object-fit:cover; /* 一覧は枠いっぱい（白帯なし） */
}

/* スマホ（幅狭）のときは、2列目枠を広げる → 行高もそれに追従 */
@media (max-width: 768px){
  #contents table.ta1.circle-list tr > :nth-of-type(2){ width:clamp(160px, 52vw, 240px); }
  #contents table.ta1.circle-list td:nth-of-type(2) a.zoom{ max-width:none; }
}

/* 直下要素の上下マージンをゼロ（行高暴れ防止、必要に応じて） */
#contents table.ta1.circle-list td>*{ margin-top:0; margin-bottom:0; }

/* === Map embed: visible on PC & Mobile at same position === */
#contents section#access{ display:block; }
#contents .map-embed{ display:block; margin: 1rem 0; }
#contents .map-embed iframe{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  border:0;
  border-radius: var(--radius, 6px);
}

@media (max-width: 768px){
  #contents section#access{ display:block !important; }
  #contents .map-embed iframe{
    aspect-ratio: 3 / 4;   /* 縦長画面で見やすく */
    min-height: 280px;
  }
}
/* === CTA: 「参加サークル一覧はこちら」を上品に強調（about_2.htmlのh3内リンク限定） === */
#contents h3 a[href$="CircleList_2.html"]{
  display:inline-block;
  padding:.45rem .85rem;
  font-weight:600;
  text-decoration:none;
  border:2px solid var(--accent, #3a9cff);
  border-radius:9999px;
  background: rgba(58,156,255,.06); /* うっすら背景 */
  line-height:1;
  transition: filter .2s ease, transform .02s ease, background-color .2s ease;
}
#contents h3 a[href$="CircleList_2.html"]:hover{
  filter:brightness(1.03);
}
#contents h3 a[href$="CircleList_2.html"]:active{
  transform:translateY(1px);
}
#contents h3 a[href$="CircleList_2.html"]:focus-visible{
  outline:3px solid color-mix(in srgb, #3a9cff 45%, transparent);
  outline-offset:2px;
}
#contents h3 a[href$="CircleList_2.html"]::after{
  content:" ›";
  font-weight:700;
}
/* === circle-list: PC/SP両対応（行高=枠高／一覧は枠いっぱい表示） === */
/* 影響範囲を .ta1.circle-list に限定し、他テーブルへの副作用を避けます */

/* 列幅とベース（PC基準） */
#contents table.ta1.circle-list{ table-layout: fixed; }
#contents table.ta1.circle-list tr{ height:auto; }
#contents table.ta1.circle-list th,
#contents table.ta1.circle-list td{ height:auto; padding-block:.35rem; vertical-align:top; }
#contents table.ta1.circle-list tr > :nth-of-type(1){ width:6em; text-align:left; }
#contents table.ta1.circle-list tr > :nth-of-type(4){ width:auto; }

/* 2列目＝画像枠（PCは最大幅を控えめに） */
#contents table.ta1.circle-list tr > :nth-of-type(3){ width:220px; }
#contents table.ta1.circle-list td:nth-of-type(3){ padding-top:0; padding-bottom:0; }
#contents table.ta1.circle-list td:nth-of-type(3) a.zoom{
  display:block; width:100%; max-width:220px; aspect-ratio:2/3;
  border:1px solid var(--border, #ccc); border-radius:4px; overflow:hidden;
  box-sizing:border-box; /* 枠線の分でズレないように */
}
#contents table.ta1.circle-list td:nth-of-type(3) a.zoom>img.circle-cut{
  display:block; width:100%; height:100%; object-fit:cover; /* 一覧は枠いっぱい（白帯なし） */
}

/* スマホ（幅狭）のときは、2列目枠を広げる → 行高もそれに追従 */
@media (max-width: 768px){
  /* 3列目（サークルカット）をコンパクト化 */
  #contents table.ta1.circle-list tr > :nth-of-type(3){ width:150px; }
  #contents table.ta1.circle-list td:nth-of-type(3){ padding-top:0; padding-bottom:0; }
  #contents table.ta1.circle-list td:nth-of-type(3) a.zoom{ width:150px; height:130px; max-width:none; display:block; }
  #contents table.ta1.circle-list td:nth-of-type(3) a.zoom>img.circle-cut{ width:150px; height:130px; object-fit:cover; display:block; }

  /* 折返し許可：1=スペース番号 / 2=オンリー / 4=サークル名 */
  #contents table.ta1.circle-list tr > :nth-of-type(1),
  #contents table.ta1.circle-list tr > :nth-of-type(2),
  #contents table.ta1.circle-list tr > :nth-of-type(4){
    white-space: normal; word-break: break-word; overflow-wrap: anywhere;
  }
}
  #contents table.ta1.circle-list td:nth-of-type(2) a.zoom{ max-width:none; }
}

/* 直下要素の上下マージンをゼロ（行高暴れ防止、必要に応じて） */
#contents table.ta1.circle-list td>*{ margin-top:0; margin-bottom:0; }

/* === circle-list: Smartphone 4-column layout (keep circle-cut height:130 / width:auto) === */
@media (max-width:768px){
  #contents table.ta1.circle-list{ table-layout: fixed; width:100%; }
  /* 1=スペース番号（最小限） / 2=オンリー（やや広め） / 3=カット（自動） / 4=サークル名（残り） */
  #contents table.ta1.circle-list tr > :nth-of-type(1){ width: clamp(2.6em, 12vw, 4em); }
  #contents table.ta1.circle-list tr > :nth-of-type(2){ width: clamp(6em, 32vw, 40vw); }
  #contents table.ta1.circle-list tr > :nth-of-type(3){ width: auto; }
  #contents table.ta1.circle-list tr > :nth-of-type(4){ width: auto; }

  /* 画像セルの上下詰め & 画像は高さ130px・横は自動（従前どおり） */
  #contents table.ta1.circle-list td:nth-of-type(3){ padding-top:0; padding-bottom:0; }
  #contents table.ta1.circle-list td:nth-of-type(3) a.zoom{
    display:inline-block; width:auto; height:auto; max-width:none; padding:0; box-sizing:content-box;
  }
  #contents table.ta1.circle-list td:nth-of-type(3) a.zoom > img.circle-cut{
    height:130px; width:auto; display:block; max-width:100%;
  }

  /* 折返し許可：1=スペース番号 / 2=オンリー / 4=サークル名 */
  #contents table.ta1.circle-list tr > :nth-of-type(1),
  #contents table.ta1.circle-list tr > :nth-of-type(2),
  #contents table.ta1.circle-list tr > :nth-of-type(4){
    white-space: normal; word-break: break-word; overflow-wrap: anywhere;
  }
}