@charset "utf-8";
/*
0.702 -- 0.790 -- 0.889 -- 1.000 -- 1.125 -- 1.266 -- 1.424 -- 1.602 -- 1.802 -- 2.027 -- 2.281 -- 2.566 -- 2.887 -- 3.247 -- 3.653 -- 4.110 -- 4.624 -- 5.199 -- 5.852 -- 6.584 -- 7.401 -- 8.333 -- 9.375 -- 10.557 -- 11.877 -- 13.362 -- 15.032 -- 16.911
*/
/* ==================================================
 * reset
 * ================================================== */

/* 1) 全要素の box-sizing を統一 */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2) ほぼ全要素の余白・枠線リセット */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input, textarea, select {
  margin: 0;
  padding: 0;
  border: 0;
}

/* 3) HTML5 セクショニング要素を block に */
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section {
  display: block;
}

/* 4) メディア要素のベース */
audio, canvas, video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
}
embed, iframe, object, video {
  max-width: 100%;
}

/* 5) 画像 */
img {
  display: block;
  max-width: 100%;
  height: auto;
}
svg{display: block;}
/* 6) リスト */
ol, ul {
  list-style: none;
}

/* 7) フォーム要素（見た目は継承・ズーム対策） */
input, select, textarea {
  color: inherit;
  font: inherit;
  font-size: 16px; /* iOS ズーム対策。1rem にしたければここを変更 */
}
textarea {
  resize: vertical;
}

/* 8) ボタン */
button {
  color: inherit;
  font: inherit;background-color: inherit;
  margin: 0;
  padding: 0;
  border: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
button[disabled],
button[aria-disabled="true"] {
  cursor: default;
}

/* ==================================================
 * base（SPOCHIBA の標準スタイル）
 * ================================================== */

/* 1) ドキュメント全体のベース */
html {
  font-size: 100%;
  scrollbar-gutter: stable;
}

body {
  color: #262626;
    font-family: "Google Sans", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;letter-spacing: 0.05rem;
  text-align: left;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #FFF;
}

/* 2) タイポグラフィのベース強調 */
strong {
  font-weight: 600;
}
em {
  font-style: italic;
}
address {
  font-style: normal;
}

/* 3) リンク */
a:link,
a:active,
a:visited {
  color: #162636;
  text-decoration: none;
  transition:
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}
a:hover {
  text-decoration: none;
}

/* 4) テーブル（SPOCHIBA の標準見た目） */
table {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
}
table tr th {
  font-weight: 400;
}
table tr th,
table tr td {
  vertical-align: middle;
  word-wrap: break-word;
}

/* 5) アクセシビリティ対応：フォーカスリング */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #FFC306;
  outline-offset: 2px;
}

:root {
  /* ===== Brand colors ===== */
  --color-brand-red:   #DC2222;  /* ボタン・エラー・重要アクションなど */
  --color-brand-blue:  #28A0E2;  /* リンク・アクティブ状態など */
  --color-brand-gold:  #FFC306;  /* ロゴの黄色/ゴールドアクセント */

  /* ===== Neutrals (グレー〜ネイビー系) ===== */
  --color-neutral-900: #16181C;  /* ほぼ黒＝本文メインテキスト */
  --color-neutral-700: #46484C;  /* サブテキスト・見出しサブ */
  --color-neutral-500: #86888C;  /* 補助テキスト・ラベル */
  --color-neutral-300: #D6D8DC;  /* 枠線・分割線 */
  --color-neutral-200: #E6E8EC;  /* 枠線の薄い版・カード境界 */
  --color-neutral-100: #F6F8FC;  /* 薄めの背景・セクション背景 */

  --color-white: #FFFFFF;


  /* ベース */
  --color-bg-body: #FFFFFF;
  --color-text-main: #162636;

  /* ブランド系 */
  --color-brand-main: #FFC306;   /* ロゴのイエロー */
  --color-brand-dark: #C78E00;   /* 必要なら濃いめ */

  /* アクセント系（既存色をトークン化） */
  --color-accent-blue: #28A0E2;  /* ログインボタン */
  --color-accent-red:  #DC2222;  /* サインアップ */

  /* サーフェス / 枠線 */
  --color-surface:        #FFFFFF;
  --color-surface-muted:  #F6F7F8;
  --color-border-subtle:  #E6E6E6;

  /* テキストの補助色 */
  --color-text-muted:   #666768;
  --color-text-weak:    #969696;

  /* オーバーレイ・影 */
  --color-overlay:      rgba(0,0,0,.4);
  --shadow-soft:        0 1px 4px rgba(0,0,0,.1);

  /* ステート系（必要に応じて拡張） */
  --color-state-success: #3BAF4A;
  --color-state-warning: #F7B731;
  --color-state-danger:  #E74C3C;


  /* ================================
   * Typography
   * ================================ */

  --font-family-base:
    'Roboto',
    'Noto Sans JP',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-base: 1rem;      /* = 16px */
  --line-height-base: 1.75;

  /* 見出し用（必要に応じて使う） */
  --font-size-h1: 1.75rem;     /* 28px */
  --font-size-h2: 1.5rem;      /* 24px */
  --font-size-h3: 1.25rem;     /* 20px */


  /* ================================
   * Spacing
   * 4px グリッドベース
   * ================================ */

  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 40px;


  /* ================================
   * Radius
   * ================================ */

  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 9999px;


  /* ================================
   * Layout / Component size
   * ================================ */

  --header-height:          64px;
  --header-logo-height:     48px;
  --header-logo-width:      160px;

  --search-input-height:    50px;
  --icon-button-size-sm:    40px;
  --icon-button-size-md:    64px;

  /* モーダル関連 */
  --modal-max-width:        480px;
  --modal-content-max-width:480px;


  /* ================================
   * Breakpoints
   * （既に使っている 768 / 960 をトークン化）
   * ================================ */

  --bp-sm: 480px;
  --bp-md: 768px;   /* 現在の html font-size メディアクエリと揃える */
  --bp-lg: 960px;   
  --bp-xl: 1200px;


  /* ================================
   * Z-index layers
   * ================================ */

  --z-header:   16000;
  --z-modal:    19000;
  --z-dropdown: 17000;
  --z-toast:    20000; /* 今後追加する可能性用 */  


  /* ================================
   * Motion
   * ================================ */

  --duration-fast:   0.15s;
  --duration-medium: 0.2s;
  --duration-slow:   0.3s;

  --easing-standard: ease;
  --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  
  
  
  
  
  /* テキスト */
  --color-text-main:    var(--color-neutral-900);
  --color-text-muted:   var(--color-neutral-700);
  --color-text-subtle:  var(--color-neutral-500);
  --color-text-on-dark: #FFFFFF;

  /* 背景 */
  --color-bg-page:        #FFFFFF;
  --color-bg-subtle:      var(--color-neutral-100);
  --color-bg-elevated:    #FFFFFF;
  --color-bg-accent-dark: #151528; /* /teams 左カラム帯などダーク背景用 */

  /* 枠線・区切り */
  --color-border-default: var(--color-neutral-300);
  --color-border-subtle:  var(--color-neutral-200);

  /* アクション系 */
  --color-accent:            var(--color-brand-blue);
  --color-accent-strong:     var(--color-brand-red);
  --color-accent-warning:    var(--color-brand-gold);
  --color-focus-ring:        var(--color-brand-gold);
  
  
}

:root {
  /* Text */
  --spb-text-primary: #202124;
  --spb-text-secondary: #5f6368;
  --spb-text-tertiary: #9aa0a6;

  /* Surfaces / Borders */
  --spb-bg-base: #ffffff;
  --spb-surface-1: #f1f3f4;
  --spb-surface-2: #e8eaed;
  --spb-border: #dadce0;

  /* Brand / Semantics */
  --spb-blue: #1a73e8; /* links / primary actions */
  --spb-gold: #ffb300; /* rating stars */
  --spb-red: #d93025; /* error / danger */
}
/*
0.702 -- 0.790 -- 0.889 -- 1.000 -- 1.125 -- 1.266 -- 1.424 -- 1.602 -- 1.802 -- 2.027 -- 2.281 -- 2.566 -- 2.887 -- 3.247 -- 3.653 -- 4.110 -- 4.624 -- 5.199 -- 5.852 -- 6.584 -- 7.401 -- 8.333 -- 9.375 -- 10.557 -- 11.877 -- 13.362 -- 15.032 -- 16.911

Body（本文）

16px（1rem）：標準本文（説明文、レビュー本文など）
14px（0.875rem）：UI本文（フォーム説明、カード本文、ボタン以外の小さめ本文）
12px（0.75rem）：注釈・補足・メタ（日時、件数、ラベル補助）
11px（0.6875rem）：最小ラベル（バッジ、チップの小ラベル等）※多用しない

Label（ボタン/チップ/ナビ）

14px（0.875rem）：基本（ボタン文字、タブ、チップ）
12px（0.75rem）：サブ（小ボタン、補助ラベル）

Title / Headline（見出し）

22px（1.375rem）：カード/セクション見出し（強め）
24px（1.5rem）：ページ内見出し（H3相当）
28px（1.75rem）：ページ見出し（H2相当）
32px（2rem）：ページ主見出し（控えめH1）

Display（見せ場限定）

36px（2.25rem）：ヒーロー小（必要な場面だけ）
45px（2.8125rem）：ヒーロー中（LP/トップ限定）
57px（3.5625rem）：ヒーロー大（トップの最上段など限定）

*/

:root {
	/* Body */
	--spb-fs-body: 1rem;            /* 16px */
	--spb-fs-text-sm: 0.875rem;     /* 14px */
	--spb-fs-text-xs: 0.75rem;      /* 12px */
	--spb-fs-text-xxs: 0.6875rem;   /* 11px */

	/* Titles / Headlines */
	--spb-fs-title: 1.225rem;       /* 22px */
	--spb-fs-headline-sm: 1.5rem;   /* 24px */
	--spb-fs-headline-md: 1.75rem;  /* 28px */
	--spb-fs-headline-lg: 2rem;     /* 32px */

	/* Display (use sparingly) */
	--spb-fs-display-sm: 2.25rem;   /* 36px */
	--spb-fs-display-md: 2.8125rem; /* 45px */
	--spb-fs-display-lg: 3.5625rem; /* 57px */

	/* Optional: line-height tokens (recommended for consistency) */
	--spb-lh-body: 1.5;             /* 16px -> 24px */
	--spb-lh-body-sm: 1.43;         /* 14px -> ~20px */
	--spb-lh-caption: 1.33;         /* 12px -> ~16px */
	--spb-lh-title: 1.27;           /* 22px -> ~28px */
	--spb-lh-headline: 1.25;        /* 24-32px -> ~32-40px */
	--spb-lh-display: 1.12;         /* 36-57px -> tighter */

	/* Optional: font-weight tokens (Google寄りの運用) */
	--spb-fw-regular: 400;
	--spb-fw-medium: 500;
	--spb-fw-bold: 700;
}

/* =======================================================
 * 長い連続文字のはみ出し対策（現状維持）
 * ======================================================= */
.spb-prose,
.team-card__title,
.review-card__title,
.review-card__body,
.team-overview,
.page-header__title {
  overflow-wrap: anywhere;
  word-break: break-word;
}





/* ==================================================
 * main
 * ================================================== */
.main {
  width: 100%;
}

/* ==================================================
 * section
 * ================================================== */
.section {
  width: 100%;
  padding-inline: 16px;padding-block: 32px;
}
.section--wht {
  background: #FFF;
}
.section--gry {
  background: #F6F6F6;
}
.section--blk {
  color: #FFF;
  background: #161616;
}
.section__inner {
  max-width: 1400px;
  margin-inline: auto;
}
@media (min-width: 960px) {
.section {
  padding-inline: 24px;padding-block: 48px;
  }
}

/* ==================================================
 * stack
 * ================================================== */
.stack {
  display: flex;flex-direction: column;gap: 0;
}

/* ==================================================
 * row
 * ================================================== */
.row {
  width: 100%;
}

/* ==================================================
 * cols
 * ================================================== */
/* ==================================================
 * cols（SPベース：1カラム）
 * ================================================== */
.cols {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 24px;
}

.cols__side,
.cols__main {
  min-width: 0;
}

/* SPベース：HTML順序に依存せず「縦の並び順」を固定
   デフォルト：上main / 下side */
.cols.cols--2 > .cols__main { grid-row: 1; }
.cols.cols--2 > .cols__side { grid-row: 2; }

/* SP縦反転：上side / 下main */
.cols.cols--2.cols--stack-reverse > .cols__main { grid-row: 2; }
.cols.cols--2.cols--stack-reverse > .cols__side { grid-row: 1; }

/* ==================================================
 * PC（2カラム：min-widthのみ）
 * ================================================== */
/* ==================================================
 * cols: PCで必ず2カラム化（上書きに負けない強制版）
 * - min-widthのみ。max-widthは使わない。
 * - HTML順序に依存しない。
 * ================================================== */
@media (min-width: 960px) {
  /* 強制：cols--2 は必ず2列 */
  .cols.cols--2 {
    --sidebar-min: 320px;
    --sidebar-ideal: 33vw;
    --sidebar-max: 360px;
    --sidebar-w: clamp(var(--sidebar-min), var(--sidebar-ideal), var(--sidebar-max));

    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    gap: 48px;
    align-items: start;
  }

  /* 強制：左右配置を固定（HTML順序に依存しない） */
  .cols.cols--2 > .cols__main {
    grid-column: 1;
    grid-row: 1 !important;
    min-width: 0;
  }

  .cols.cols--2 > .cols__side {
    grid-column: 2;
    grid-row: 1 !important;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 24px;
    min-width: 0;
  }

  /* PC左右反転：left=side / right=main */
  .cols.cols--2.cols--reverse {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  }

  .cols.cols--2.cols--reverse > .cols__side {
    grid-column: 1 !important;
  }

  .cols.cols--2.cols--reverse > .cols__main {
    grid-column: 2 !important;
  }
}







/* ==================================================
 * page-header
 * ================================================== */
.page-header {
  width: 100%;
}
.page-header__title {
  font-size: clamp(2rem, 2.5vw, 3rem);font-weight: 500;
}
.page-header__flex {
  display: flex;align-items: center;justify-content: space-between;
}

/* ==================================================
 * single-teams page-header__meta
 * ================================================== */
.single-teams .page-header__meta {
  display: grid;grid-template-columns: 1fr;row-gap: 16px;
}
@media (min-width: 960px) {
  .single-teams .page-header__meta {
    display: grid;grid-template-columns: minmax(0, 1fr) auto;grid-template-rows: auto auto;align-items: start;
    column-gap: 48px;row-gap: 16px;
  }
  .single-teams .page-header__meta > .page-header__rating {
    grid-column: 1;grid-row: 1;
  }
  .single-teams .page-header__meta > .page-header__terms {
    grid-column: 1;grid-row: 2;
  }
  .single-teams .page-header__meta > .page-header__action {
    grid-column: 2;grid-row: 1 / 3;align-self: start;
  }
  @supports selector(:has(*)) {
    .single-teams .page-header__meta:has(> .page-header__owner) {
      grid-template-rows: auto auto auto;
    }
    .single-teams .page-header__meta > .page-header__owner {
      grid-column: 1;grid-row: 1;
    }
    .single-teams .page-header__meta:has(> .page-header__owner) > .page-header__rating {
      grid-row: 2;
    }
    .single-teams .page-header__meta:has(> .page-header__owner) > .page-header__terms {
      grid-row: 3;
    }
    .single-teams .page-header__meta:has(> .page-header__owner) > .page-header__action {
      grid-row: 1 / 4;
    }
  }
}

/* ==================================================
 * block-title
 * ================================================== */
.block-title{
  font-size: 1.5rem;font-weight: 500;
  display: block;
  width: 100%;
  margin-bottom: 1rem;
}








/* ==================================================
 * team-owner
 * ================================================== */
.team-owner {
  font-weight: 500;
  display: flex;align-items: center;gap: 0.5rem;
}
.team-owner__label {
  font-size: 0.875rem;
  line-height: 1;
}
.team-owner__value {
  font-size: 0.875rem;
  line-height: 1;
}
.team-owner__badge {
  font-size: 0.75rem;
  line-height: 1;
  display: inline-flex;align-items: center;justify-content: center;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
}
.team-owner__badge--verified {
  background: rgba(20,184,184,0.25);
}

/* ================================================== *
   ==================================================
   team-rating-aggregate
   ==================================================
 * ================================================== */
.team-rating-aggregate {
	display: inline-flex;align-items: center;gap: 0.5rem;
}
.team-rating-aggregate__value {
	font-weight: 700;line-height: 1;
}
.team-rating-aggregate__count {
	color: #666666;
	font-size: 0.875rem;line-height: 1;
}
.team-rating-aggregate__stars {
  line-height: 1;
	display: inline-flex;align-items: center;gap: 0.25rem;
}
.team-rating-aggregate__star {
	color: #FFF;background: #D6D6D6;
	display: inline-flex;align-items: center;justify-content: center;
	border-radius: 2px;
}
.team-rating-aggregate__star--full {
	background: #14B8B8;
}
.team-rating-aggregate__star--half {
	background: linear-gradient( to right, #14B8B8 0 50%, #14B8B8 50% 100% );
}
.team-rating-aggregate__star--empty {
	background: #D6D6D6;
}
.team-rating-aggregate--small .team-rating-aggregate__star {
	width: 18px;height: 18px;
}
.team-rating-aggregate--small .team-rating-aggregate__star svg {
	width: 12px;height: 12px;
}
.team-rating-aggregate--large .team-rating-aggregate__star {
	width: 32px;height: 32px;
}
.team-rating-aggregate--large .team-rating-aggregate__star svg {
	width: 24px;height: 24px;
}
.team-rating-aggregate--vertical {
  flex-direction: column;
}
.team-rating-aggregate--vertical .team-rating-aggregate__value {
	color: #666666;
	font-size: 2rem;
}
/*.team-rating-aggregate--stack {
	flex-wrap: wrap;gap: 0.5rem;
}
.team-rating-aggregate--stack .team-rating-aggregate__count {
	flex: 0 0 100%;  
}
/*@media (min-width: 768px) {
  .team-rating-aggregate--stack{
    flex-wrap: nowrap;
  }
  .team-rating-aggregate--stack .team-rating-aggregate__count {
    flex: 0 0 auto;
  }
}*/











/* ==================================================
 * team-action
 * ================================================== */
.team-action__list {
	display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 0.75rem;
}
.team-action__item {
	min-width: 0;
}
.team-action__button {
	background: #FFF;
	display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;
	width: 100%;min-height: max(48px, 3rem);
	padding: 0.5rem;
	border: 1px solid #D6D6D6;border-radius: 4px;
}
.team-action__button.team-action__button--review {
	color: #FFF;
	background: #14B8B8;
	border-color: #14B8B8;
}
.team-action__button.team-action__button--favorite.is-on {
	color: #14B8B8;
	border-color: #14B8B8;
	opacity: 0.5;
}
.team-action__button.team-action__button--favorite[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
.team-action__button-icon {
	flex: 0 0 auto;display: inline-flex;align-items: center;justify-content: center;
}
.team-action__button-icon svg {
	width: 20px;height: 20px;
}
.team-action__button-text {
	font-weight: 500;
	display: inline-block;
	white-space: nowrap;
}
@media (min-width: 960px) {
	.team-action__list {
		display: flex;flex-wrap: wrap;
	}
	.team-action__item {
		flex: 0 0 auto;
	}
	.team-action__button {
		justify-content: flex-start;
		width: auto;
		padding: 0.5rem 1rem;
	}
}

/* ==================================================
 * team-gallery
 * ================================================== */
.team-gallery {
  position: relative;
}
.team-gallery__list {
  display: grid;grid-template-columns: 1fr;gap: 0.75rem;
}
.team-gallery__item:nth-child(n + 2) {
  display: none;
}
.team-gallery__link {
  font-size: 0;line-height: 0;
  display: block;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden; 
}
.team-gallery__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;object-position: 50% 50%;
  transform: translateZ(0);
}
.team-gallery__badge {
  color: #FFF;
  font-size: 0.875rem;
  background: #D93A66;
  display: inline-flex;align-items: center;gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  position: absolute;top: 16px;right: 16px;
  pointer-events: none;
  z-index: 1;
}
.team-gallery__badge-icon {
  display: block;
  width: 24px;height: 24px;
}
.team-gallery__badge-num {
  font-weight: 700;
}
/* 古いブラウザ向けフォールバック */
@supports not (aspect-ratio: 1 / 1) {
  .team-gallery__link {
    height: 0;
    padding-top: 75%; /* 4:3 = 75% */
  }
  .team-gallery__img {
    position: absolute;
    inset: 0;
  }
}
@media (min-width: 960px) {
  .team-gallery__list {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
  .team-gallery__item:nth-child(n + 2) {
    display: block;
  }
  .team-gallery__item:nth-child(n + 4) {
    display: none;
  }
  .team-gallery__link {
    height: clamp(320px, 28vw, 480px);
    aspect-ratio: auto;
  }
}

/* ==================================================
 * team-gallery-lightbox
 * ================================================== */
.team-gallery-lightbox__overlay.modal-overlay {
  background: rgba(0,0,0,0.75);
  display: block;
  position: fixed;inset: 0;
  z-index: 19999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.team-gallery-lightbox__overlay.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease;
}
.team-gallery-lightbox__panel {
  display: grid;grid-template-rows: 1fr;align-items: stretch;justify-items: stretch;
  position: absolute;inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.team-gallery-lightbox__overlay.is-open .team-gallery-lightbox__panel {
  opacity: 1;
  transform: translateY(0);
}
.team-gallery-lightbox__close.modal-panel__close {
  background: rgba(0,0,0,0.75);
  position: absolute;top: 0;right: 0;
}
.team-gallery-lightbox__close .modal-panel__close-bar {
  background: #FFF !important;
}
.team-gallery-lightbox__stage {
  display: grid;grid-template-rows: 1fr;grid-template-columns: 1fr;place-items: center; 
  width: 100%;height: 100%;
  padding: 48px 16px;
  box-sizing: border-box;
  touch-action: pan-y;
}
.team-gallery-lightbox__img {
  grid-area: 1 / 1;
  max-width: min(100%, 980px);max-height: min(78vh, 760px);
  width: auto;height: auto;
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 120ms ease, transform 220ms ease;
  will-change: opacity, transform;
}
.team-gallery-lightbox__img.is-active {
  opacity: 1;
}
.team-gallery-lightbox__overlay.is-open .team-gallery-lightbox__img {
  transform: scale(1);
}
.team-gallery-lightbox__counter {
  color: #FFF;
  font-weight: 700;
  background: rgba(0,0,0,0.75);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  position: absolute;left: 16px;bottom: 16px;
}
.team-gallery-lightbox__nav {
  color: #FFF;
  background: rgba(0,0,0,0.5);
  display: inline-grid;place-items: center;
  width: 48px;height: 48px;
  border: 0;
  position: absolute;top: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 140ms ease, transform 140ms ease, background-color 140ms ease;
  will-change: transform, opacity;
}
.team-gallery-lightbox__nav:hover {
  background: rgba(0,0,0,0.75);
}
.team-gallery-lightbox__nav:focus-visible {
  outline: 2px solid rgba(255,255,255,0.75);
  outline-offset: 2px;
}
.team-gallery-lightbox__nav svg{
  display: block;
  width: 24px;height: 24px;
}
.team-gallery-lightbox__nav--prev {
  border-radius: 0 4px 4px 0;
  left: 16px;
}
.team-gallery-lightbox__nav--next {
  border-radius: 4px 0 0 4px;
  right: 16px;
}
.team-gallery-lightbox__nav[disabled],
.team-gallery-lightbox__nav[aria-disabled="true"] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .team-gallery-lightbox__overlay.modal-overlay,
  .team-gallery-lightbox__panel,
  .team-gallery-lightbox__img,
  .team-gallery-lightbox__nav {
    transition: none !important;
  }
}
@media (min-width: 960px) {
  .team-gallery-lightbox__nav--prev,
  .team-gallery-lightbox__nav--next {
    border-radius: 4px;
  }
}


/*----------------------------------- */
/*----------------------------------- */
/*-- a.tel -------------------------- */
/*----------------------------------- */
/*----------------------------------- */
a.tel{color: var(--color-slt-base);text-decoration: none;cursor: default;}
a.mail{color: var(--color-slt-base);text-decoration: none;cursor: default;}
/*----------------------------------- */
/*----------------------------------- */
/*-- a.bdr -------------------------- */
/*----------------------------------- */
/*----------------------------------- */
a.bdr{color: var(--color-slt-base);display: inline-flex;position: relative;overflow: hidden;}
a.bdr::before,
a.bdr::after{content: '';display: block;width: 100%;height: 1px;position: absolute;bottom: 0;}
a.bdr::before{border-bottom: 1px dashed var(--color-slt-base);left: 0;transform: translateX(0);opacity: 1;transition: transform .8s ease, opacity .8s ease;}
a.bdr::after{border-bottom: 1px solid var(--color-slt-base);left: -100%;transition: left 1s ease;}
a.bdr:hover{color: var(--color-slt-base);}
a.bdr:hover::before{transform: translateX(100%);opacity: 0;}
a.bdr:hover::after{left: 0;}
/*----------------------------------- */
/*----------------------------------- */
/*-- .ast --------------------------- */
/*----------------------------------- */
/*----------------------------------- */
p.ast{font-size: .790rem;display: flex;align-items: baseline;}
p.ast::before{content: '※';}
ul.ast{font-size: .790rem;}
ul.ast > li{display: flex;align-items: baseline;}
ul.ast > li::before{content: '※';}
/*----------------------------------- */
/*----------------------------------- */
/*-- .dot --------------------------- */
/*----------------------------------- */
/*----------------------------------- */
ul.dot li{padding-left: 20px;position: relative;}
ul.dot li::before{content: '';background: var(--color-slt-base);display: block;width: 4px;height: 4px;margin: 0 5px;border-radius: 9999px;position: absolute;left: 0;top: .8em;}
/*----------------------------------- */
/*----------------------------------- */
/*-- .over -------------------------- */
/*----------------------------------- */
/*----------------------------------- */
.over .img{overflow: hidden !important;}
.over .img img{transition: transform .3s ease;}
.over:hover .img img{transform: scale(1.05);}
/*----------------------------------- */
/*----------------------------------- */
/*-- .underline --------------------- */
/*----------------------------------- */
/*----------------------------------- */
.underline{text-decoration: underline;}
/*----------------------------------- */
/*----------------------------------- */
/*-- #wrapper ----------------------- */
/*----------------------------------- */
/*----------------------------------- */
#wrapper{text-align: left;width: 100%;position: relative;}
/*----------------------------------- */
/*----------------------------------- */
/*-- @keyframes --------------------- */
/*----------------------------------- */
/*----------------------------------- */
@keyframes line-infinite{0%{transform: translate(-100%, -50%); opacity: 0;}10%{opacity: 1;}50%{transform: translate(0%, -50%); opacity: 1;}90%{opacity: 1;}100%{transform: translate(100%, -50%); opacity: 0;}}
@keyframes spin-infinite{from{transform: rotateY(0deg);}to{transform: rotateY(360deg);}}
@keyframes text-infinite{0%{transform: translateX(0%);} 100%{transform: translateX(-50%);}}
@keyframes char-fade-in{to{opacity: 1;transform: translateY(0);}}
/*----------------------------------- */
/*----------------------------------- */
/*-- :root -------------------------- */
/*----------------------------------- */
/*----------------------------------- */
:root{
--color-slt-tint: #EAECEF; 
--color-slt-base: #4F5C5F;
--color-blu-tint: #D6E0E6;
--color-blu-base: #8099A9;
--color-trq-base: #2C9A95;	
--color-nvy-base: #163646;
--color-nvy-alpha80: rgba(22,54,70,.8);			
--color-wht-base: #FFFFFF;
--color-wht-alpha00: rgba(255,255,255, 0);
--color-wht-alpha10: rgba(255,255,255,.1);
--color-wht-alpha20: rgba(255,255,255,.2);
--color-wht-alpha40: rgba(255,255,255,.4);
--color-wht-alpha60: rgba(255,255,255,.6);
--color-wht-alpha80: rgba(255,255,255,.8);	
--color-blk-alpha05: rgba(0,0,0,.05);
--color-blk-alpha10: rgba(0,0,0,.1);
--color-blk-alpha20: rgba(0,0,0,.2);
}














.review-edit{background: #FFF;padding: clamp(20px, 5vw, 40px);border: 1px solid #D6D6D6;}






/* 展開時は 180° 回転（▼→▲） */








.login-required {
    color: #b00;
    font-weight: bold;
}

.submit.btn {
    padding: 8px 16px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.submit.btn:hover {
    background-color: #005177;
}










.teams-ranking { margin: .5rem 0 1rem; padding-left: 1.4em; }
.teams-ranking__item { margin: .25rem 0; }
.teams-ranking__link { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.teams-ranking__rank { font-weight:700; min-width:2ch; text-align:right; }
.teams-ranking__title { flex:1; }
.teams-ranking__meta { white-space:nowrap; font-size:.92em; opacity:.9; }


.related-reviews { margin: 1rem 0; }
.related-reviews__title { font-weight: 700; margin-bottom: .5rem; }
.related-reviews__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.related-reviews__item { border: 1px solid #eee; border-radius: 12px; padding: .75rem; }
.related-reviews__link { display: block; text-decoration: none; color: inherit; }
.related-reviews__meta { font-size: .9rem; opacity: .85; display: flex; gap: .5rem; align-items: center; margin-bottom: .25rem; }
.related-reviews__stars { letter-spacing: .05em; }
.related-reviews__excerpt { margin: 0; }
.related-reviews__team { display: block; margin-top: .25rem; opacity: .7; font-size: .85rem; }



.home-section { margin: 2rem 0; }
.home-section__title { font-size: 1.25rem; margin-bottom: .5rem; }

.ranking-tabs { display: flex; gap: .5rem; margin: .5rem 0 1rem; }
.ranking-tab {
  padding: .5rem .75rem; border: 1px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer;
}
.ranking-tab.is-active { border-color: #333; font-weight: 600; }

.teams-ranking,
.top-rated-teams__list { margin: 0; padding-left: 1.25rem; }
.teams-ranking__item,
.top-rated-teams__item { margin: .25rem 0; }


.home-latest-reviews .latest-reviews {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.home-latest-reviews .latest-reviews__item {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
}
.home-latest-reviews__more a { text-decoration: underline; }



.hero-search { padding: 24px 16px; background: #f7f8fb; border-radius: 16px; margin: 16px 0 24px; }
.hero-search__inner { max-width: 1080px; margin: 0 auto; }
.hero-search__title { font-size: 1.5rem; margin: 0 0 .25rem; }
.hero-search__subtitle { margin: 0 0 1rem; opacity: .8; }

.hero-search .site-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.hero-search .site-search input[type="search"] { padding: .6rem .75rem; font-size: 1rem; }
.hero-search .site-search button[type="submit"] { padding: .6rem .9rem; }
.hero-search .site-search .site-search-targets { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; margin: .25rem 0 0; }

.hero-search__quick { margin-top: 14px; display: grid; gap: 8px; }
.hero-search__quick-title { font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.hero-search__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-search .chip {
  display: inline-block; padding: .35rem .6rem; border: 1px solid #e2e5eb; border-radius: 999px;
  background: #fff; font-size: .9rem; line-height: 1; text-decoration: none; color: inherit;
}
.hero-search .chip:hover { border-color: #cbd1dc; }



.featured-teams { margin: 1.5rem 0; }
.featured-teams__title { font-size: 1.2rem; margin-bottom: .5rem; }
.featured-teams__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px;
}
.featured-teams__item { border: 1px solid #eee; border-radius: 12px; background: #fff; }
.featured-teams__link { display: block; padding: 10px; color: inherit; text-decoration: none; }
.featured-teams__thumb img { width: 100%; height: auto; display: block; border-radius: 8px; }
.featured-teams__name { margin: .4rem 0 .25rem; font-weight: 600; }
.featured-teams__rating { font-size: .95rem; opacity: .95; }

/* セクション共通 */
.home-section { margin: 2rem 0; }
.home-section__title { font-size: 1.25rem; margin-bottom: .5rem; }

/* タブ（共通クラス） */
.regions-tabs, .ranking-tabs { display:flex; gap:.5rem; margin:.5rem 0 1rem; }
.tab-btn, .ranking-tab { padding:.5rem .75rem; border:1px solid #ddd; border-radius:8px; background:#fff; cursor:pointer; }
.tab-btn.is-active, .ranking-tab.is-active { border-color:#333; font-weight:600; }

/* ランキングリスト（既存の流用でもOK） */
.teams-ranking,
.top-rated-teams__list { margin:0; padding-left:1.25rem; }
.teams-ranking__item,
.top-rated-teams__item { margin:.25rem 0; }



.home-top-picks .top-picks-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.top-picks-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; }
.top-picks-link { display: block; color: inherit; text-decoration: none; }
.top-picks-thumb img { width: 100%; height: auto; display: block; }
.top-picks-title { font-size: 1rem; margin: .5rem .75rem; line-height: 1.4; }
.top-picks-rating { margin: 0 .75rem .75rem; opacity: .95; display: flex; align-items: center; gap: .25rem; }
.top-picks-rating .star-empty { opacity: .35; }




.home-latest-reviews .latest-reviews-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;
}
.latest-reviews-card{border:1px solid #eee; border-radius:12px; background:#fff; overflow:hidden}
.latest-reviews-link{display:block; color:inherit; text-decoration:none}
.latest-reviews-thumb img{width:100%; height:auto; display:block}
.latest-reviews-body{padding:.75rem}
.latest-reviews-team{font-size:1rem; margin:0 0 .25rem}
.latest-reviews-meta{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; opacity:.95; margin-bottom:.25rem}
.latest-reviews-meta .star-empty{opacity:.35}
.latest-reviews-excerpt{margin:.25rem 0 0; line-height:1.6}



.ranking-tab:focus-visible,
.latest-reviews-link:focus-visible,
.teams-ranking__link:focus-visible {
  outline: 2px solid #444;
  outline-offset: 2px;
  border-radius: 8px;
}

.breadcrumb { margin:.5rem 0 1rem; font-size:.9rem; }
.breadcrumb__list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.25rem .5rem; }
.breadcrumb__item a { text-decoration:none; }
.breadcrumb__item:not(:last-child)::after { content:"›"; opacity:.5; margin-left:.5rem; }
.breadcrumb__item [aria-current="page"] { font-weight:600; }

/* タブ（共通クラス） 
.team-hero {
  display:grid;
  gap:1rem;
  grid-template-columns: 1fr;
  margin: 1rem 0 2rem;
}
@media (min-width: 960px){
  .team-hero {
    grid-template-columns: 2fr 3fr;
    align-items: center;
  }
}*/




/* === Rating Badge === */
.rating-badge{display:inline-flex;align-items:center;gap:.25rem;vertical-align:middle}
.rating-badge .rb-dot{display:inline-block}
.rating-badge .rb-bg{fill:var(--rb-empty,#E5E7EB);stroke:var(--rb-stroke,#D1D5DB)}
.rating-badge .rb-fg{fill:var(--rb-fill,#111827)}
.rating-badge--sm .rb-dot{width:12px;height:12px}
.rating-badge--md .rb-dot{width:16px;height:16px}
.rating-badge--lg .rb-dot{width:20px;height:20px}
.rating-badge__avg{font-weight:600;line-height:1}
.rating-badge__count{opacity:.8}




.btn { display:inline-block; padding:.6rem 1rem; border-radius:10px; text-decoration:none; }
.btn--primary { background:#1a73e8; color:#fff; }
.btn--ghost { border:1px solid #ccc; color:#333; background:#fff; }
.btn:hover { opacity:.9; }


.team-reviews .tabs { display:flex; gap:.5rem; margin:.5rem 0 1rem; }
.team-reviews .tab-btn {
  padding:.45rem .75rem; border:1px solid #ddd; background:#fff; border-radius:8px; cursor:pointer;
}
.team-reviews .tab-btn.is-active { border-color:#333; font-weight:600; }


.review-form .form-errors { 
  margin:.5rem 0; padding:.5rem .75rem; border:1px solid #f3c8c8; background:#fff5f5; color:#b50000; border-radius:8px;
}
#review-counter { margin-top:.25rem; font-size:.9em; opacity:.9; }
.rating-fieldset { border:0; padding:0; margin:0 0 .5rem; }
.rating-fieldset label { margin-right:.5rem; }
#review_submit[disabled] { opacity:.6; cursor:not-allowed; }


:root {
  --rating-color: #0ea5e9; /* デフォルト色（青） */
}
.rating-badge,
.team-hero__rating {
  color: var(--rating-color);
}
/* ページ/文脈ごとに変えたい場合の例：
.list-rating { color: #16a34a; }      
.single-rating { color: #0ea5e9; }    
.team-hero__rating { color: var(--rating-color); }
*/


:root {
  --rating-color: #0ea5e9;  /* ここを変えるだけで全体の丸評価の色が変わる */
}
.rating-badge,
.team-hero__rating {
  color: var(--rating-color);
}

/* 必要なら文脈ごとに上書き */
.list-rating   { color: var(--rating-color); }
.single-rating { color: var(--rating-color); }
/* 例）.archive .rating-badge { color:#16a34a; } など */



.auth-modal[hidden]{display:none}
.auth-modal{position:fixed;inset:0;z-index:9999}
.auth-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.auth-modal__dialog{position:relative;max-width:420px;margin:5vh auto;background:#fff;border-radius:10px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.auth-modal__close{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:20px;cursor:pointer}
.auth-tabs{display:flex;gap:8px;margin:10px 0 16px}
.auth-tab{flex:1;padding:10px;border:1px solid #ddd;background:#f7f7f7;cursor:pointer}
.auth-tab.is-active{background:#fff;border-bottom-color:#fff;font-weight:600}
.auth-panel{display:none}
.auth-panel.is-active{display:block}
.auth-errors{color:#c00;margin:.5rem 0}
.auth-submit{width:100%;padding:10px}

.login-register-tabs { max-width: 420px; margin: 50px auto; }
.tabs-nav { display: flex; margin-bottom: 20px; cursor: pointer; }
.tabs-nav li { flex: 1; text-align: center; padding: 10px; border: 1px solid #ddd; background: #f5f5f5; transition: 0.2s; }
.tabs-nav li.active { background: #fff; border-bottom: none; font-weight: bold; }
.tab-content { border: 1px solid #ddd; padding: 20px; background: #fff; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.errors p { color: #c00; margin: 0; }
.success { color: #060; text-align: center; }




.review-target{border: 1px solid #CCC;}

/* コンテナ */


/* フィールド共通 */
.review-field{margin-top: 40px;}



.review-form{width: 100%;}

.review-label,
.review-legend{font-size: 1.266rem;font-weight: 700;display: block;margin-bottom: 15px;}

.review-input,
.review-textarea{font-size: 16px;background: #F6F6F6;display: block;width: 100%;padding: 15px;margin-bottom: 0;border: 2px solid #D6D6D6;border-radius: 0;box-sizing: border-box;}
.review-input:focus,
.review-textarea:focus{border-color: #4488CC;outline: none;}
.review-textarea{min-height: 150px;resize: vertical;}



/* カウンタ */
.review-counter-wrap{font-size: .790rem;display: flex;align-items: baseline;justify-content: flex-end;gap: 5px;margin-top: 5px;}
.review-counter{font-variant-numeric: tabular-nums;}

/* エラー表示 */
.review-error{color: #CC4446; font-size: .790rem;min-height: 1em;margin-top: 5px;aria-atomic: true;}
[aria-invalid="true"]{border-color: #CC4446 !important;}









.review-target{margin-top: 40px;}




/* ヒントリンク & モーダル */
.review-linklike{ background:none; border:none;cursor:pointer; padding:0; text-decoration:underline; }

.review-linklike{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;margin-top: 20px;
}

.review-linklike:hover,
.review-linklike:focus-visible {
}

.review-linklike__icon svg {
  display: block;
  width: 20px;
  height: 20px;
  /* fill は SVG 内で currentColor 指定済み */
}



/*----------------------------------- */
/*----------------------------------- */
/*-- .dot --------------------------- */
/*----------------------------------- */
/*----------------------------------- */
ul.dot li{padding-left: 20px;position: relative;}
ul.dot li::before{content: '';background: var(--color-slt-base);display: block;width: 5px;height: 5px;margin: 0 5px;border-radius: 9999px;position: absolute;left: 0;top: .8em;}


/* 中央寄せ & サイズ制御 */
.review-hint-modal {
  width: min(480px, 92vw);
  border: none;
  border-radius: 12px;
  padding: 0;

  /* ここが中央寄せのキモ */
  inset: 50% auto auto 50%; /* top,right,bottom,left を一括指定 */
  transform: translate(-50%, -50%);
}

.review-hint-modal::backdrop {
  background: rgba(0,0,0,.35);
}

/* 内側は余白＋縦スクロール許可（モーダル自体は中央のまま） */
.review-hint-modal__inner {
  padding: 14px 16px;
  max-height: min(80vh, 720px);
  overflow: auto;
}

.review-hint-modal__header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.review-hint-modal__close {
  background:none;
  border:none;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}

.review-hint-modal__body { padding: 6px 2px; }
.review-hint-modal__body h3 { margin:.75rem 0 .25rem; font-size:15px; }

/* 画面がとても小さい場合の保険（微調整） */
@media (max-height: 520px) {
  .review-hint-modal__inner { max-height: 88vh; }
}



.review-hint-modal__footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border-top:1px solid #eee;
}

.review-guideline-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight:600;
  color: var(--link-color, #0b65c2);
}

.review-guideline-link:hover,
.review-guideline-link:focus-visible{
  text-decoration:underline;
}

.review-guideline-link .icon-arrow{
  width:1em;
  height:1em;
  flex:0 0 auto;
  transition: transform .18s ease;
}

.review-guideline-link:hover .icon-arrow,
.review-guideline-link:focus-visible .icon-arrow{
  transform: translateX(2px);
}

/* 動きを控えめに（環境設定に配慮） */
@media (prefers-reduced-motion: reduce){
  .review-guideline-link .icon-arrow{
    transition: none;
  }
}



#reviews { scroll-margin-top: 200px; }  


/* モーダル */
.is-modal-open { overflow:hidden; }
/* フォーム部分はこのクラス名に合わせる */
.spb-report-reasons { border:0; padding:0; margin:8px 0; display:grid; gap:.5rem; }
.spb-report-reasons label { display:flex; gap:.5rem; align-items:flex-start; }
.spb-report-details { display:block; margin-top:.5rem; }
.spb-report-details textarea { width:100%; }

/* モーダル */
.is-modal-open { overflow:hidden; }
/* 通報モーダルの重なりと当たり判定を強化 */
.spb-modal { position: fixed; inset: 0; z-index: 100000; } /* 既存オーバーレイより常に前面 */
.spb-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1;                 /* 背景は下 */
  pointer-events: auto;       /* 背景クリックは有効（閉じるトリガ） */
}
.spb-modal__dialog {
  position: relative; z-index: 2;
  max-width: 560px; width: calc(100% - 32px);
  margin: 5vh auto; background: #fff; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  padding: 16px 16px 12px;
  pointer-events: auto;       /* ダイアログ上は常に操作可能 */
}
.spb-modal__dialog * { pointer-events: auto; } /* 子孫も明示 */



#reviews { scroll-margin-top: var(--header-height, 200px); }

/* 同意チェック（装飾） */
.review-checkbox{display: flex;align-items: flex-start;gap: 10px;margin-top: 40px;}
.review-checkbox__input{width: 0;height: 0;position: absolute;opacity: 0;}
.review-checkbox__box{flex: 0 0 20px;background: #FFF;display: inline-flex;width: 20px;height: 20px;margin-top: .15em;border: 2px solid #AAA;border-radius: 0;position:relative;}
.review-checkbox__input:checked + .review-checkbox__box{background:#0F1C36;border-color:#0F1C36;}
.review-checkbox__input:checked + .review-checkbox__box::after{content: '';width: 6px;height: 12px;border: 2px solid #FFF;border-top: none;border-left: none;position: absolute;left: 5px;top: 1px;transform: rotate(45deg);}
.review-checkbox__label{font-size: .889rem;}

/* 送信ボタン */
.review-button{background: #345FAE;width: 100%;max-width: 360px;height: 60px;margin-top: 40px;border: 1px solid #345FAE;cursor: pointer;}
.review-button--primary{color:#FFF;font-weight: 700;background: #345FAE;border-color:#345FAE;}
.review-button--primary:hover{opacity: .9;}


/* 例: テーマの共通CSSに */
.spb-notice { padding:12px; margin:12px 0; border-radius:8px; }
.spb-notice-success { background:#e7f7ee; border:1px solid #b7e3c8; }
.spb-notice-info    { background:#eef5ff; border:1px solid #c8dcff; }
.spb-notice-error   { background:#ffecec; border:1px solid #f5b5b5; }



/* ===== Auth Modal (safe) ===== */

/* デフォルトは常に非表示（保険として display:none を基本に） */
#auth-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* 明示的に開いたときだけ表示 */
#auth-modal[aria-hidden="false"] {
  display: block;
}

/* hidden/aria-hidden=true は“完全に”無効化（他CSSに負けないよう !important） */
#auth-modal[hidden],
#auth-modal[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 背景スクロール停止は、開いている間だけ */
html.is-modal-open { overflow: hidden; }

/* オーバーレイはモーダル“開時のみ”反応させる */
#auth-modal .auth-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  /* デフォルトは無効化（閉じている時の誤作動防止） */
  pointer-events: none;
  opacity: 0;
}

/* 開時だけ有効化 */
#auth-modal[aria-hidden="false"] .auth-modal__overlay {
  pointer-events: auto;
  opacity: 1;
}

#auth-modal .auth-modal__dialog {
  position: absolute;
  max-width: 520px;
  width: min(92vw, 520px);
  max-height: 90vh;
  overflow: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 1;           /* overlay より前面 */
  pointer-events: auto; /* 入力可能 */
}

/* パネル切替（開いている時にだけ見せる） */
#auth-modal .auth-panel { display: none; }
#auth-modal[aria-hidden="false"] .auth-panel.is-active { display: block; }

/* 入力が弾かれないように */
#auth-modal input, #auth-modal select, #auth-modal textarea, #auth-modal button {
  pointer-events: auto;
}
/* --- ここから：丸評価（circle rating）CSS --- */
/* =========================================================
 * review rating (stars) - background chip integrated (final)
 * - JS: data-hover / data-value と連動（追加JS不要）
 * - 背景は .review-rating__item 自体に持たせ、二重実装を排除
 * ======================================================= */

/* カスタマイズ用の変数（ここだけ触れば見た目を調整可能） */
.review-rating {
  --rate-size: 28px;                 /* 星（SVG）のサイズ */
  --rate-gap: 10px;                  /* 星同士の間隔 */

  --rate-stroke: #cdd5df;            /* 非選択の枠色 */
  --rate-stroke-hover: #94a3b8;      /* hover時の枠色 */
  --rate-fill: #0ea5e9;              /* 塗り色（選択時） */

  --rate-focus: #0ea5e9;             /* フォーカスリング色 */
  --rate-label: #475569;             /* 右ラベル色 */
  --rate-error: #ef4444;             /* エラー色 */

  /* 背景ブロック（角丸四角） */
  --rate-box-pad: 6px;               /* 星の周りの余白 */
  --rate-box-radius: 12px;           /* 角丸 */
  --rate-box-bg: rgba(15, 23, 42, .04);
  --rate-box-bd: rgba(148, 163, 184, .35);

  /* 選択・hover中の背景 */
  --rate-box-bg-on: rgba(14, 165, 233, .10);
  --rate-box-bd-on: rgba(14, 165, 233, .30);
}

/* 配置 */
.review-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--rate-gap);
  user-select: none;
}

/* 各アイテム（角丸ブロック） */
.review-rating__item {
  inline-size: calc(var(--rate-size) + (var(--rate-box-pad) * 2));
  block-size:  calc(var(--rate-size) + (var(--rate-box-pad) * 2));
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  background: var(--rate-box-bg);
  border: 1px solid var(--rate-box-bd);
  border-radius: var(--rate-box-radius);

  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* hover：背景も少し反応（ただし “選択状態” が最優先） */
.review-rating__item:hover {
  background: var(--rate-box-bg-on);
  border-color: var(--rate-stroke-hover);
}

/* アクセシブルに不可視化（フォーカス可能なまま隠す） */
.review-rating__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* フォーカスリング（ブロックに出す）
   - クリック後に「選択された星だけ枠が強調」される原因になるため無効化
   - キーボード時の可視化も不要ならこれでOK
*/
.review-rating__item:focus-within {
  box-shadow: none;
  border-color: var(--rate-box-bd);
}
/* キーボード操作時だけフォーカスを出す（クリックでは出ない） */
.review-rating__input:focus-visible + .review-rating__icon {
  outline: 2px solid var(--rate-focus);
  outline-offset: 2px;
  border-radius: 8px;
}
/* SVG */
.review-rating__icon {
  width: var(--rate-size);
  height: var(--rate-size);
  display: block;
}

/* 輪郭と塗り（ここが抜けると表示が崩れやすい） */
.review-rating__stroke {
  fill: none;
  stroke: var(--rate-stroke);
  stroke-width: 2;
  transition: stroke .15s ease;
}
.review-rating__fill {
  fill: var(--rate-fill);
  transform: scale(0);               /* 非選択時は隠す */
  transform-origin: 50% 50%;
  transition: transform .14s ease;
}

/* ホバー時：枠だけ少し強調 */
.review-rating__item:hover .review-rating__stroke {
  stroke: var(--rate-stroke-hover);
}

/* 右のラベル */
.review-rating__label {
  margin-inline-start: .25rem;
  min-width: 6em;
  font-size: .875rem;
  color: var(--rate-label);
}

/* -------------------------------------------
   data-hover / data-value に応じて塗り＆背景をON
   ※ .review-rating の子要素は [label×5] + [span.label] 前提
   ------------------------------------------- */
.review-rating[data-hover="1"] .review-rating__item:nth-child(-n+1) .review-rating__fill,
.review-rating[data-value="1"] .review-rating__item:nth-child(-n+1) .review-rating__fill { transform: scale(1); }
.review-rating[data-hover="2"] .review-rating__item:nth-child(-n+2) .review-rating__fill,
.review-rating[data-value="2"] .review-rating__item:nth-child(-n+2) .review-rating__fill { transform: scale(1); }
.review-rating[data-hover="3"] .review-rating__item:nth-child(-n+3) .review-rating__fill,
.review-rating[data-value="3"] .review-rating__item:nth-child(-n+3) .review-rating__fill { transform: scale(1); }
.review-rating[data-hover="4"] .review-rating__item:nth-child(-n+4) .review-rating__fill,
.review-rating[data-value="4"] .review-rating__item:nth-child(-n+4) .review-rating__fill { transform: scale(1); }
.review-rating[data-hover="5"] .review-rating__item:nth-child(-n+5) .review-rating__fill,
.review-rating[data-value="5"] .review-rating__item:nth-child(-n+5) .review-rating__fill { transform: scale(1); }
/* -------------------------------------------
   data-hover / data-value に応じて「星の枠線（stroke）」も青にする
   （JS改修なしで選択状態に追従）
   ------------------------------------------- */
.review-rating[data-hover="1"] .review-rating__item:nth-child(-n+1) .review-rating__stroke,
.review-rating[data-value="1"] .review-rating__item:nth-child(-n+1) .review-rating__stroke { stroke: var(--rate-fill); }

.review-rating[data-hover="2"] .review-rating__item:nth-child(-n+2) .review-rating__stroke,
.review-rating[data-value="2"] .review-rating__item:nth-child(-n+2) .review-rating__stroke { stroke: var(--rate-fill); }

.review-rating[data-hover="3"] .review-rating__item:nth-child(-n+3) .review-rating__stroke,
.review-rating[data-value="3"] .review-rating__item:nth-child(-n+3) .review-rating__stroke { stroke: var(--rate-fill); }

.review-rating[data-hover="4"] .review-rating__item:nth-child(-n+4) .review-rating__stroke,
.review-rating[data-value="4"] .review-rating__item:nth-child(-n+4) .review-rating__stroke { stroke: var(--rate-fill); }

.review-rating[data-hover="5"] .review-rating__item:nth-child(-n+5) .review-rating__stroke,
.review-rating[data-value="5"] .review-rating__item:nth-child(-n+5) .review-rating__stroke { stroke: var(--rate-fill); }

/* :has 非対応のフォールバック（is-on / is-hover でも枠を青に） */
.review-rating.is-fallback .review-rating__item.is-on .review-rating__stroke,
.review-rating.is-fallback .review-rating__item.is-hover .review-rating__stroke {
  stroke: var(--rate-fill);
}

/* 背景ブロックも同条件でON */
.review-rating[data-hover="1"] .review-rating__item:nth-child(-n+1),
.review-rating[data-value="1"] .review-rating__item:nth-child(-n+1),
.review-rating[data-hover="2"] .review-rating__item:nth-child(-n+2),
.review-rating[data-value="2"] .review-rating__item:nth-child(-n+2),
.review-rating[data-hover="3"] .review-rating__item:nth-child(-n+3),
.review-rating[data-value="3"] .review-rating__item:nth-child(-n+3),
.review-rating[data-hover="4"] .review-rating__item:nth-child(-n+4),
.review-rating[data-value="4"] .review-rating__item:nth-child(-n+4),
.review-rating[data-hover="5"] .review-rating__item:nth-child(-n+5),
.review-rating[data-value="5"] .review-rating__item:nth-child(-n+5) {
  background: var(--rate-box-bg-on);
  border-color: var(--rate-box-bd-on);
}

/* -------------------------------------------
   :has 無し環境向けフォールバック（JSが is-fallback/is-on/is-hover を付与）
   ------------------------------------------- */
.review-rating.is-fallback .review-rating__item.is-on .review-rating__fill {
  transform: scale(1);
}
.review-rating.is-fallback .review-rating__item .review-rating__fill {
  opacity: 0;
  transition: opacity .15s ease;
}
.review-rating.is-fallback .review-rating__item.is-on .review-rating__fill,
.review-rating.is-fallback .review-rating__item.is-hover .review-rating__fill {
  opacity: 1;
}
.review-rating.is-fallback .review-rating__item.is-on,
.review-rating.is-fallback .review-rating__item.is-hover {
  background: var(--rate-box-bg-on);
  border-color: var(--rate-box-bd-on);
}

/* -------------------------------------------
   バリデーションエラー（あなたのJSは group に aria-invalid を付けるのでこちらが本命）
   ------------------------------------------- */
.review-rating[aria-invalid="true"] .review-rating__stroke {
  stroke: var(--rate-error);
}
.review-rating[aria-invalid="true"] .review-rating__item {
  border-color: rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .06);
}
.review-rating[aria-invalid="true"] + .review-error {
  color: var(--rate-error);
}





/* --------------------------------------------------
 * nav-pagination
 * -------------------------------------------------- */
.nav-pagination{
	font-size: .889rem;
  margin-top: 2rem;
}
.nav-pagination__list{
	display: flex;flex-wrap: wrap;justify-content: center;gap: 8px;
}
.nav-pagination .page-numbers{
	background: transparent;
	display: inline-flex;align-items: center;justify-content: center;
	width: clamp(40px, 3vw, 48px);height: clamp(40px, 3vw, 48px);
	border-radius: var(--radius-pill);
}
.nav-pagination .page-numbers.dots{
	background: transparent;
	width: clamp(16px, 2vw, 32px);height: clamp(40px, 3vw, 48px);
}
.nav-pagination a.page-numbers:hover{
	color: #DC2222;
	font-weight: 600;
}
.nav-pagination .page-numbers.current{
	color: #FFF;font-weight: 600;
	background: #2DB6CF;
}
.nav-pagination .page-numbers.prev,
.nav-pagination .page-numbers.next{
	background: transparent !important;
}
.nav-pagination__icon{
	display: inline-flex;align-items: center;justify-content: center;
}
.nav-pagination__icon svg{
	width: 16px;height: 16px;
}