/* Basic reset to override UA margins */
html, body {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Mulish", "Zen Kaku Gothic New", sans-serif;
}

/* Scale variables unified from Ehime theme-common for consistency across sites */
:root {
  --1px: 0.0625rem;
  --2px: 0.125rem;
  --3px: 0.1875rem;
  --4px: 0.25rem;
  --5px: 0.3125rem;
  --6px: 0.375rem;
  --7px: 0.4375rem;
  --8px: 0.5rem;
  --9px: 0.5625rem;
  --10px: 0.625rem;
  --11px: 0.6875rem;
  --12px: 0.75rem;
  --13px: 0.8125rem;
  --14px: 0.875rem;
  --15px: 0.9375rem;
  --16px: 1rem;
  --17px: 1.0625rem;
  --18px: 1.125rem;
  --19px: 1.1875rem;
  --20px: 1.25rem;
  --21px: 1.3125rem;
  --22px: 1.375rem;
  --23px: 1.4375rem;
  --24px: 1.5rem;
  --25px: 1.5625rem;
  --26px: 1.625rem;
  --27px: 1.6875rem;
  --28px: 1.75rem;
  --29px: 1.8125rem;
  --30px: 1.875rem;
  --31px: 1.9375rem;
  --32px: 2rem;
  --33px: 2.0625rem;
  --34px: 2.125rem;
  --35px: 2.1875rem;
  --36px: 2.25rem;
  --37px: 2.3125rem;
  --38px: 2.375rem;
  --39px: 2.4375rem;
  --40px: 2.5rem;
  --41px: 2.5625rem;
  --42px: 2.625rem;
  --43px: 2.6875rem;
  --44px: 2.75rem;
  --45px: 2.8125rem;
  --46px: 2.875rem;
  --47px: 2.9375rem;
  --48px: 3rem;
  --49px: 3.0625rem;
  --50px: 3.125rem;
  --51px: 3.1875rem;
  --52px: 3.25rem;
  --53px: 3.3125rem;
  --54px: 3.375rem;
  --55px: 3.4375rem;
  --56px: 3.5rem;
  --57px: 3.5625rem;
  --58px: 3.625rem;
  --59px: 3.6875rem;
  --60px: 3.75rem;
  --61px: 3.8125rem;
  --62px: 3.875rem;
  --63px: 3.9375rem;
  --64px: 4rem;
  --65px: 4.0625rem;
  --66px: 4.125rem;
  --67px: 4.1875rem;
  --68px: 4.25rem;
  --69px: 4.3125rem;
  --70px: 4.375rem;
  --71px: 4.4375rem;
  --72px: 4.5rem;
  --73px: 4.5625rem;
  --74px: 4.625rem;
  --75px: 4.6875rem;
  --76px: 4.75rem;
  --77px: 4.8125rem;
  --78px: 4.875rem;
  --79px: 4.9375rem;
  --80px: 5rem;
  --81px: 5.0625rem;
  --82px: 5.125rem;
  --83px: 5.1875rem;
  --84px: 5.25rem;
  --85px: 5.3125rem;
  --86px: 5.375rem;
  --87px: 5.4375rem;
  --88px: 5.5rem;
  --89px: 5.5625rem;
  --90px: 5.625rem;
  --91px: 5.6875rem;
  --92px: 5.75rem;
  --93px: 5.8125rem;
  --94px: 5.875rem;
  --95px: 5.9375rem;
  --96px: 6rem;
  --97px: 6.0625rem;
  --98px: 6.125rem;
  --99px: 6.1875rem;
  --100px: 6.25rem;
  --102px: 6.375rem;
  --104px: 6.5rem;
  --105px: 6.5625rem;
  --106px: 6.625rem;
  --110px: 6.875rem;
  --111px: 6.9375rem;
  --112px: 7rem;
  --119px: 7.4375rem;
  --120px: 7.5rem;
  --125px: 7.8125rem;
  --130px: 8.125rem;
  --132px: 8.25rem;
  --135px: 8.4375rem;
  --136px: 8.5rem;
  --140px: 8.75rem;
  --142px: 8.875rem;
  --144px: 9rem;
  --145px: 9.0625rem;
  --150px: 9.375rem;
  --160px: 10rem;
  --164px: 10.25rem;
  --168px: 10.5rem;
  --170px: 10.625rem;
  --175px: 10.9375rem;
  --180px: 11.25rem;
  --184px: 11.5rem;
  --185px: 11.5625rem;
  --190px: 11.875rem;
  --200px: 12.5rem;
  --208px: 13rem;
  --210px: 13.125rem;
  --216px: 13.5rem;
  --220px: 13.75rem;
  --224px: 14rem;
  --228px: 14.25rem;
  --230px: 14.375rem;
  --232px: 14.5rem;
  --236px: 14.75rem;
  --240px: 15rem;
  --243px: 15.1875rem;
  --246px: 15.375rem;
  --250px: 15.625rem;
  --251px: 15.6875rem;
  --253px: 15.8125rem;
  --255px: 15.9375rem;
  --256px: 16rem;
  --260px: 16.25rem;
  --264px: 16.5rem;
  --270px: 16.875rem;
  --280px: 17.5rem;
  --288px: 18rem;
  --290px: 18.125rem;
  --300px: 18.75rem;
  --310px: 19.375rem;
  --320px: 20rem;
  --327px: 20.4375rem;
  --328px: 20.5rem;
  --330px: 20.625rem;
  --340px: 21.25rem;
  --350px: 21.875rem;
  --353px: 22.0625rem;
  --360px: 22.5rem;
  --370px: 23.125rem;
  --375px: 23.4375rem;
  --380px: 23.75rem;
  --390px: 24.375rem;
  --400px: 25rem;
  --420px: 26.25rem;
  --452px: 28.25rem;
  --470px: 29.375rem;
  --485px: 30.3125rem;
  --500px: 31.25rem;
  --501px: 31.3125rem;
  --584px: 36.5rem;
  --600px: 37.5rem;
  --700px: 43.75rem;
  --800px: 50rem;
  --820px: 51.25rem;
  --900px: 56.25rem;
  --1025px: 64.0625rem;
  --1050px: 65.625rem;
  --1200px: 75rem;
  --1300px: 81.25rem;
  --1320px: 82.5rem;
}

/* Shared utilities imported from Ehime theme-common */
#toast {
  visibility: hidden;
  z-index: 2;
  position: fixed;
  top: 24px;
  left: calc(50% - 112px);
  width: 224px;
  padding: 16px 24px;
  background: #ffffff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 16px;
}

/* Region filter common styles */
#filter_region.menu_warp {
  width: fit-content;
  margin: 0 auto;
}
#filter_region .menu_container {
  border-radius: 100px;
  background: #f2f4f6;
  display: flex;
  padding: var(--16px);
  align-items: flex-start;
  gap: var(--16px);
  max-width: 20rem;
}
#filter_region .menu_item {
  color: #888;
  white-space: nowrap;
  font-size: var(--14px);
}
#filter_region .selected {
  color: #000;
  position: relative;
}
#filter_region .selected::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M7.31101 13.3707C6.93332 13.3707 6.57844 13.2251 6.3106 12.9597C5.11923 11.7788 2.92322 9.56176 1.59666 7.98412C0.631735 6.83751 0.135753 5.68169 0.121389 4.54764C0.10787 3.43032 0.558225 2.38582 1.45893 1.4451C2.98321 -0.14593 5.44453 -0.453088 7.31101 0.672599C9.17749 -0.453088 11.638 -0.14593 13.1622 1.44593C14.0629 2.38666 14.5133 3.43032 14.4998 4.54848C14.4863 5.68253 13.9903 6.83835 13.0254 7.98496C11.6996 9.56092 9.50279 11.7788 8.31142 12.9606C8.04442 13.2259 7.6887 13.3715 7.31101 13.3715V13.3707Z' fill='%231B30F0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: -21px;
  left: 35%;
}

.region-labels { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.region-label { display: inline-flex; padding: 4px 8px; align-items: center; gap: 10px; border-radius: 100px; font-size: 12px; line-height: 1; border: 1px solid transparent; }
.region-label.is-parent { color: #1B30F0; background: #E3E9FF; border-color: #1B30F0; }
.region-label.is-child { color: #888888; background: #fff; border-color: #888; }



/* =========================
   New Region Filter (Tabs + Chips)
   ========================= */
#filter_region.region-filter-wrap {
  position: relative;
  display: grid;
  gap: 12px;
}

/* Area tabs */
#filter_region .filter-area {
  position: relative;
}
#filter_region .filter-area .filter-scroll {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 2px solid #F2F4F6; /* base underline */
  padding: 0;
}
#filter_region .filter-area .tab {
  display: inline-block;
  padding: 10px 0;
  white-space: nowrap;
  text-decoration: none;
  color: #000; /* default */
  font-weight: 700;
  font-size: 16px;
  border-bottom: 6px solid transparent; /* active underline */
}
#filter_region .filter-area .tab.is-active {
  color: #1B30F0; /* active color */
  border-bottom-color: #1B30F0;
}

/* City chips */
#filter_region .filter-city {
  position: relative;
  overflow: hidden;
  -ms-overflow-style: none;  /* IE, Edge */
  scrollbar-width: none;  /* Firefox */
}
#filter_region .filter-city ::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

#filter_region .filter-city .filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 右側フェード(64px)分チップが潜り込まないよう余白を確保 */
  padding: 0 64px 8px 0;
  border-bottom: 1px solid #F2F4F6; /* subtle bottom rule like mock */
  cursor: grab;
}
#filter_region .filter-city .filter-scroll.is-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Show a thin scrollbar only on hover-capable devices (PC) for discoverability */
@media (hover:hover) {
  /* PCでもスクロールバー非表示を維持 */
  #filter_region .filter-city { overflow: hidden; }
  #filter_region .filter-city .filter-scroll { scrollbar-width: none; -ms-overflow-style: none; }
  #filter_region .filter-city .filter-scroll::-webkit-scrollbar { display: none; }
}
#filter_region .filter-city .chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 100px;
  background: #fff;
  color: #000;
  border: 1px solid #888;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
#filter_region .filter-city .chip.is-active {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Right fade overlay */
#filter_region .fade-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 64px; /* as per Figma */
  height: 100%;
  pointer-events: none;
  background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
#filter_region .fade-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity .2s ease;
}
#filter_region .fade-left.is-visible { opacity: 1; }

#share {
  margin: 32px;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  color: #000000;
}

#share .socials {
  margin-top: 16px;
  display: flex;
  gap: 16px;
  justify-content: center;
}

#share .socials .icon {
  background-color: #ffffff;
  height: 54px;
  width: 54px;
  border-radius: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}