/****************************************/
/********** ArtLab-Tokyo [CSS] **********/
/****************************************/


/****************************** Content ******************************/
/* /area/assets/css/style.css */
/* =========================================================
   Area UI Styles  —  Kanto tabs + Green card + Chips list
   保存先: /area/assets/css/style.css
   ========================================================= */

/* ---- カラー変数（必要に応じて調整） ---- */
:root{
  --area-green-1:#1e915f;   /* 見出し帯 上 */
  --area-green-2:#188a59;   /* 見出し帯 下 */
  --area-green-ink:#16784f; /* 緑系の文字 */
  --area-border:rgba(19,41,61,.08);
  --area-shadow:0 8px 22px rgba(0,0,0,.12);
}

/* ================== グリーンカード本体 ================== */
.geo-card{
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--area-shadow);
  border:1px solid var(--area-border);
  background:#fff;
}

/* ▼ ヘッダーを Grid 化して「左=タイトル／中央=タブ／右=余白」に固定 */
.geo-card__head{
  display:grid;
  grid-template-columns:1fr auto 1fr;  /* 左・中央(コンテンツ幅)・右 */
  align-items:center;
  column-gap:12px;
  background:linear-gradient(180deg,var(--area-green-1) 0%,var(--area-green-2) 100%);
  color:#fff;
  padding:14px 16px;
}
.geo-card__title{
  grid-column:1;             /* 左 */
  font-weight:800;
  letter-spacing:.02em;
  margin:0;
  font-size:16px;
}
.geo-card__body{
  background:#fff;
  padding:14px 16px 18px;
}

/* ================== タブ（ピル型・カード内） ================== */
.geo-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
/* ▼ タブのブロック自体を“中央カラム”に配置し、内部も中央寄せ */
.geo-tabs--pills{
  grid-column:2;             /* 中央に固定 */
  justify-content:center;    /* 複数行でも中央を維持 */
  margin:0 auto;             /* 念のため */
}

.geo-tab{
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.15);
  color:#fff;
  padding:.45rem .8rem;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .02s;
}
.geo-tab:hover{
  background:rgba(255,255,255,.22);
}
.geo-tab[aria-selected="true"]{
  background:#fff;
  color:var(--area-green-ink);
  border-color:#fff;
}

/* ================== パネル表示切替 ================== */
.geo-panels{margin-top:0;}
.geo-panel{display:none;}
.geo-panel.is-active{display:block;}

/* ================== チップ（バッジ）型リスト ================== */
/* 他テーマの装飾影響を最小化（list-style等） */
.geo-list{padding-left:0;margin:0;}
.geo-list--chips{display:flex;flex-wrap:wrap;gap:.4rem .5rem;}

/* リンクなし（span） */
.geo-list--chips>span{
  display:inline-block;
  padding:.32rem .75rem;
  border-radius:999px;
  background:#f6f6f6;
  border:1px solid #ddd;
  color:#333;
  font-size:13px;
  line-height:1.5;
  white-space:nowrap;
}

/* リンクあり（a）＝色付き */
.geo-list--chips>a{
  display:inline-block;
  padding:.32rem .75rem;
  border-radius:999px;
  background:#1e915f;
  border:1px solid #188a59;
  color:#fff;
  font-size:13px;
  line-height:1.5;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.geo-list--chips>a:hover{
  background:#16784f;
  border-color:#16784f;
}
.geo-list--chips>a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(30,145,95,.25);
}

/* 任意：無効化スタイル（必要な要素に .is-disabled を付与） */
.geo-list--chips>.is-disabled{
  background:#f0f0f0;border-color:#e0e0e0;color:#9aa0a6;cursor:default;
}

/* ================== アクセシビリティ（視覚非表示） ================== */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* ================== レスポンシブ ================== */
@media (max-width:640px){
  /* SPでは縦積みに。タブも中央寄せのままでOK */
  .geo-card__head{
    grid-template-columns:1fr;
    row-gap:8px;
  }
  .geo-card__title{grid-column:1;}
  .geo-tabs--pills{grid-column:1;justify-content:center;}
}

/* ====== 既存テーマからの干渉を受けやすい場合の保険（任意で有効化） ====== */
/* 必要になった時だけコメントアウトを外してください。強い指定なので常用は推奨しません。 */
/*
.geo-list--chips *::before,
.geo-list--chips *::after{content:none !important;}
*/
/****************************** Content End ******************************/