@charset "utf-8";

/* =======================================================
 * Reduced motion
 * ======================================================= */
@media (prefers-reduced-motion: reduce) {
  .teams-search *,
  .teams-sort-modal__overlay *,
  .teams-cities-modal,
  .teams-cities-modal * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =======================================================
 * Tokens (safe defaults)
 * ======================================================= */
:root{
  --teams-ui-bg: #fff;
  --teams-ui-text: rgba(0,0,0,.86);
  --teams-ui-sub: rgba(0,0,0,.62);
  --teams-ui-sub2: rgba(0,0,0,.54);
  --teams-ui-border: rgba(0,0,0,.10);
  --teams-ui-border2: rgba(0,0,0,.14);
  --teams-ui-soft: rgba(0,0,0,.04);
  --teams-ui-soft2: rgba(0,0,0,.06);
  --teams-ui-shadow: 0 8px 28px rgba(0,0,0,.14);
  --teams-ui-shadow2: 0 10px 34px rgba(0,0,0,.16);
  --teams-ui-radius-md: 14px;
  --teams-ui-radius-lg: 18px;
  --teams-ui-radius-pill: 9999px;
}

/* =======================================================
 * teams-search (container)
 * ======================================================= */
.teams-search{
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.teams-search__inner{
}

/* =======================================================
 * Teams Search Bar
 * - SP/PC 共通：検索バー1本（統一）
 * ======================================================= */
.teams-search__bar{
  display: block;
}

/* compact wrap is always visible (SP/PC unified) */
.teams-search__bar__compact-wrap{
  display: block;
}

/* button */
.teams-search__bar-button{
  background: #FFF;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 64px;
  padding: 0 1rem;
  border: 1px solid #E6E6E6;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  justify-content: center;
  --teams-search__bar-icon: 24px;
  --teams-search__bar-icon-svg: 24px;
}

.teams-search__bar-body{
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.teams-search__bar-title{
  font-weight: 500;
}

.teams-search__bar-text{
  color: #666;
  font-size: 0.75rem;
}

.teams-search__bar-icon{
  background: transparent;
  flex: 0 0 var(--teams-search__bar-icon);
  display: grid;
  place-items: center;
  width: var(--teams-search__bar-icon);
  height: var(--teams-search__bar-icon);
  border-radius: 9999px;
}

.teams-search__bar-icon svg{
  width: var(--teams-search__bar-icon-svg);
  height: var(--teams-search__bar-icon-svg);
}

/* =======================================================
 * Filter section chevron (SVG arrow)
 * - 別CSSの transform 干渉を避け、SVGのみで回転制御
 * ======================================================= */
.teams-filter__section-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: rgba(0,0,0,.62);
  transform: none;
  transition: none;
}

.teams-filter__section[open] .teams-filter__section-icon{
  transform: none;
}

.teams-filter__section-icon-svg,
.teams-filter__section-icon > svg{
  display: block;
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transition: transform .16s ease;
}

.teams-filter__section[open] .teams-filter__section-icon-svg,
.teams-filter__section[open] .teams-filter__section-icon > svg{
  transform: rotate(-90deg);
}

/* =======================================================
 * Active filter chips（全幅でSP挙動を唯一の正）
 * ======================================================= */
.teams-active-filters{
}

/* row */
.teams-active-filters__inner{
  display: flex;
  align-items: center;
  padding-right: 16px;
  gap: 0.5rem;
}

/* chips wrapper (holds fades) */
.teams-active-filters__chips-wrap{
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  isolation: isolate;
}

/* chips list (scroll container) */
.teams-active-filters__chips{
  display: flex;
  gap: 0.5rem;
  min-width: 0;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  position: relative;
  z-index: 1;

  padding-left: 16px;
  padding-right: 16px;
  scroll-padding-left: 16px;
  scroll-padding-right: 16px;
}

/* actions */
.teams-active-filters__actions{
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  padding-left: 1rem;
}

/* fades (base: ON) */
.teams-active-filters__chips-wrap::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  z-index: 2;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}

.teams-active-filters__chips-wrap::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  z-index: 2;
  background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));
}

.teams-active-filters__chip{
  font-size: 0.875rem;
  background: #FFF;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  height: 40px;
  padding: 0 1rem;
  border: 1px solid #E6E6E6;
  border-radius: 9999px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  white-space: nowrap;
}

.teams-active-filters__chip:hover{
  color: #868686;
  background: #F6F6F6;
  border: 1px solid #F6F6F6;
}

.teams-active-filters__chip-label{
  white-space: nowrap;
}

/* chip close (X) */
.teams-active-filters__chip-close{
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  position: relative;
}

.teams-active-filters__chip-close::before,
.teams-active-filters__chip-close::after{
  content: "";
  background: #262626;
  width: 12px;
  height: 1px;
  border-radius: 0.5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.teams-active-filters__chip-close::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* +n（PC専用挙動を撤去：常に非表示） */
.teams-active-filters__chip--more{
  display: none;
}



/* clear chip (base: circle icon) */
.teams-active-filters__chip--clear{
  border-color: rgba(0,0,0,.18);
  background: rgba(0,0,0,.04);
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  justify-content: center;
  --clear-x-left: 50%;
  min-width: 40px;
}

/* hide text for clear chip (base) */
.teams-active-filters__chip--clear .teams-active-filters__chip-label{
  display: none;
}

.teams-active-filters__chip--clear::before,
.teams-active-filters__chip--clear::after{
  content: "";
  position: absolute;
  top: 50%;
  left: var(--clear-x-left);
  width: 14px;
  height: 2px;
  background: rgba(0,0,0,.54);
  border-radius: 1px;
  transform-origin: 50% 50%;
  pointer-events: none;
}

.teams-active-filters__chip--clear::before{
  transform: translate(-50%, -50%) rotate(45deg);
}

.teams-active-filters__chip--clear::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =======================================================
 * Keyword clear buttons: draw "X" with pseudo elements
 * ======================================================= */

/* SP modal: .teams-filter__keyword-clear */
.teams-filter__keyword-clear{
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: rgba(0,0,0,.62);
  border-radius: 9999px;
  position: relative;
}

.teams-filter__keyword-clear:focus-visible{
  outline: 3px solid rgba(0,0,0,.12);
  outline-offset: 2px;
}

.teams-filter__keyword-clear::before,
.teams-filter__keyword-clear::after{

  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.teams-filter__keyword-clear::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =======================================================
 * teams-filter（全幅でSP＝シートを唯一の正）
 * ======================================================= */
.teams-filter{
  margin-top: 1rem;
}

/* overlay (match .modal-overlay in site-header.css) */
.teams-filter::before{
  content: '';
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  inset: 0;
  z-index: 19000;
  transition: opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}

.teams-filter.is-open::before{
  opacity: 1;
  pointer-events: auto;
}

.teams-filter.is-closing::before{
  opacity: 0;
  pointer-events: none;
}

/* summary is hidden (button is the entry) */
.teams-filter__summary{
  display: none;
}

/* panel: full-screen sheet */
.teams-filter .teams-filter__panel{
  background: #fff;
  position: fixed;
  inset: 0;
  height: calc(var(--spb-vh, 1vh) * 100);
  max-height: calc(var(--spb-vh, 1vh) * 100);
  height: 100dvh;
  max-height: 100dvh;

  z-index: 19001;

  transform: translate3d(0, -12%, 0);
  transition: transform 0.25s ease, opacity 0.25s ease;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  will-change: transform, opacity;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.teams-filter.is-open .teams-filter__panel{
  transform: none; /* iOS: fixed footerの揺れ対策（transform固定バグ回避） */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.teams-filter.is-closing .teams-filter__panel{
  transform: translate3d(0, -10%, 0);
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

/* header */
.teams-filter__header{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 72px;
}

.teams-filter__title{
  font-size: 1.266rem;
  font-weight: 600;
  padding: 0 24px;
  color: var(--teams-ui-text);
}

/* content scroll area */
.teams-filter__content{
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem;
  padding-bottom: calc(14px + 80px + env(safe-area-inset-bottom));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* keyword block */
.teams-filter__keyword{
  background: #FFF;
  padding: 10px 12px;
  border: 1px solid #E6E6E6;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.teams-filter__keyword-label{
  font-size: 0.75rem;
  font-weight: 700;
  display: block;
  margin: 0 0 8px;
}

.teams-filter__keyword-field{
  position: relative;
}

.teams-filter__keyword-input{
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 40px 12px 12px;
  font-size: 16px;
  line-height: 1.25;
  background: #fff;
}

.teams-filter__keyword-clear{
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: var(--teams-ui-radius-pill);
  border: 0;
  background: rgba(0,0,0,.08);
  cursor: pointer;
}

/* sections */
.teams-filter__section{
  background: #FFF;
  border: 1px solid #E6E6E6;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  margin-bottom: 16px;
  overflow: hidden;
}

.teams-filter__section-summary{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  cursor: pointer;
  user-select: none;
}

.teams-filter__section-summary::-webkit-details-marker{
  display: none;
}

.teams-filter__section-label{
  font-size: 14px;
  font-weight: 900;
  color: var(--teams-ui-text);
  white-space: nowrap;
}

.teams-filter__section-value{
  margin-left: auto;
  max-width: 58%;
  font-size: 12px;
  font-weight: 700;
  color: var(--teams-ui-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teams-filter__section-body{
  padding: 1.5rem;
  border-top: 1px solid #E6E6E6;
}

.teams-filter__section[open]{
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}

.teams-filter__section .teams-filter__block{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* grids + choices */
.teams-filter__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.teams-filter__grid--checks{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teams-filter__grid--radios{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teams-filter__subblock{
  padding: 10px 0 0;
}

.teams-filter__legend{
  font-size: 0.75rem;
  font-weight: 500;
}

.teams-filter__hint{
  margin: 0 0 0.75rem;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0,0,0,.62);
}

/* radios/checkboxes (visual pill) */
.teams-filter__radio{
  display: block;
  position: relative;
  user-select: none;
}

.teams-filter__radio > input{
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
}

.teams-filter__radio-text{
  color: #666666;
  font-size: 0.875rem;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 12px 12px 36px;
  border: 1px solid #D6D6D6;
  border-radius: 9999px;
  position: relative;
}

.teams-filter__radio-text::before{
  content: "";
  background: #F6F6F6;
  width: 16px;
  height: 16px;
  border: 1px solid #D6D6D6;
  border-radius: 9999px;
  box-sizing: border-box;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.teams-filter__radio-text::after{
  content: "";
  background: #262626;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

.teams-filter__radio > input:checked + .teams-filter__radio-text{
  color: #262626;
  border-color: #666666;
}

.teams-filter__radio > input:checked + .teams-filter__radio-text::after{
  opacity: 1;
}

/* region cities open button */
.teams-filter__cities-open{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border: 1px solid var(--teams-ui-border);
  border-radius: var(--teams-ui-radius-md);
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  color: rgba(0,0,0,.82);
}

.teams-filter__cities-open:hover{
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.teams-filter__cities-open-label{
  font-size: 14px;
}

.teams-filter__cities-open-value{
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.62);
}

.teams-filter__cities-open-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: rgba(0,0,0,.62);
}

.teams-filter__cities-open-icon svg{
  display: block;
  width: 20px;
  height: 20px;
}

/* =======================================================
 * cities modal (統一：teams-filter と同じ開閉方式)
 * - class駆動（is-open / is-closing）
 * - overlay: opacity 0.2s
 * - panel: transform+opacity 0.25s, translate -12% -> 0 -> -10%
 * ======================================================= */
.teams-cities-modal{
  position: fixed;
  inset: 0;
  z-index: 19010;
  background: rgba(0,0,0,.55);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;

  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.teams-cities-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.teams-cities-modal.is-closing{
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

.teams-cities-modal__panel{
  position: fixed;
  inset: 0;
  z-index: 19011;
  background: #fff;

  height: calc(var(--spb-vh, 1vh) * 100);
  max-height: calc(var(--spb-vh, 1vh) * 100);
  height: 100dvh;
  max-height: 100dvh;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;

  transform: translate3d(0, -12%, 0);
  transition: transform 0.25s ease, opacity 0.25s ease;
  will-change: transform, opacity;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.teams-cities-modal.is-open .teams-cities-modal__panel{
  transform: none; /* teams-filter と同じ方針 */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.teams-cities-modal.is-closing .teams-cities-modal__panel{
  transform: translate3d(0, -10%, 0);
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

.teams-cities-modal__header{
  position: sticky;
  top: 0;
  z-index: 2;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-sizing: border-box;
}
.teams-cities-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.teams-cities-modal__header-summary{
  white-space:nowrap;
}

.teams-cities-modal__content{
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px;
  padding-bottom: calc(14px + 80px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* cities modal: 見出しは静的 */
.teams-cities-modal .teams-filter__section-summary{
  cursor: default;
}

/* Cities modal header (Back-only) - SVG arrow（全幅適用で統一） */
.teams-cities-modal__back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 9999px;
  color: rgba(0,0,0,.72);
  -webkit-tap-highlight-color: transparent;
}

.teams-cities-modal__back-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.teams-cities-modal__back-text{
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

.teams-cities-modal__actions{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 19012;
  display: flex;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.08);
}

/* actions (fixed bottom CTA) */
.teams-filter__actions{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 19002;

  display: flex;
  gap: 2rem;
  width: 100%;
  box-sizing: border-box;

  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.08);
  margin: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;

}

.teams-filter__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .01em;
  min-width: 130px;
}

.teams-filter__button--clear{
  flex: 0 0 auto;
}

.teams-filter__button--apply,
.teams-cities-modal__done{
  color: #FFF;
  background: #14B8B8;
  flex: 1 1 auto;
  border-color: #14B8B8;
}

/* 市町村シート表示中：下層（絞り込みシート）の固定CTAは隠す */
.teams-filter.is-cities-open .teams-filter__actions{
  visibility: hidden;
  pointer-events: none;
}

/* =======================================================
 * Minor breakpoint: 600px
 * ======================================================= */
@media (min-width: 600px) {
  .teams-filter__grid--checks{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .teams-filter__grid--radios{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}