/* area-pref.css - Figma MCP v3 SP エリア都道府県・市区町村ページ */
/* Shared by area_pref.tpl and area_city.tpl */

/* ===== Header (Area Page variant - no tab bar) ===== */

/* Header Container (outer) */
.header-area {
  background-color: #FFFFFF;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
  width: 375px;
  max-width: 100%;
}

/* Header Inner: flex, items-center, justify-between, h-70, px-15 */
.header-area-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 15px;
}

/* Logo Area: flex, gap-10, items-center */
.header-logo-area {
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
}

/* Logo Image: h-34, w-61.2, object-fit cover */
.header-logo-img {
  width: 61.2px;
  height: 34px;
  object-fit: cover;
}

/* Brand Area */
.header-brand-area {
  display: flex;
  align-items: center;
}

/* Brand Text: font-normal, leading-1.4, text-#1e1e1e, text-10 */
.header-brand-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.4;
  color: #1E1E1E;
}

/* Header Right: flex, gap, items-center */
.header-right {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Switch Button: bg-#f2f0e8, border #dcd8c0, h-42, rounded-5
   gap-2, items-center, justify-center, pl-12 pr-8 py-10 */
.header-switch-btn {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 10px 8px 10px 12px;
  background-color: #F2F0E8;
  border: 1px solid #DCD8C0;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

/* Switch Text: font-normal, leading-1.2, text-#797979, text-12 */
.header-switch-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: #797979;
}

/* Switch Icon: size-14 */
.header-switch-icon {
  width: 14px;
  height: 14px;
}

/* Menu Button: flex-col, gap-2, items-center, w-36 */
.header-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  width: 36px;
  cursor: pointer;
}

/* Menu Icon: h-33, w-32 */
.header-menu-icon {
  width: 32px;
  height: 33px;
}

/* Menu Text: font-normal, text-#1e1e1e, text-9, text-center */
.header-menu-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 9px;
  text-align: center;
  color: #1E1E1E;
}

/* ===== Page Container ===== */

.area-pref-sp,
.area-city-sp {
  width: 375px;
  max-width: 100%;
  min-height: 100vh;
  background-color: var(--fill-jiva0u, #F2F0E8);
  margin: 0 auto;
}

/* ===== Breadcrumb ===== */

/* Container: bg-#f2f0e8, flex, gap-5, h-50, items-center, px-16 py-10, w-full */
.breadcrumb-area {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 50px;
  padding: 10px 16px;
  width: 100%;
  background-color: #F2F0E8;
}

/* Link: underline, font-normal, leading-1.2, text-#696b68, text-12 */
.breadcrumb-link {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: #696B68;
  text-decoration: underline;
  text-decoration-style: solid;
  white-space: nowrap;
}

/* Separator Icon: size-12 */
.breadcrumb-separator {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Current Text: font-normal, leading-1.2, text-#696b68, text-12 */
.breadcrumb-current {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  color: #696B68;
  white-space: nowrap;
}

/* ===== Search Section ===== */

/* Container: flex-col, gap-16, items-start, justify-center
   pb-40 pt-20 px-16, shadow, w-full */
.search-section-area {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px 40px;
  width: 100%;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}

/* Search Bar Wrapper: flex, items-center, justify-between, w-full */
.search-bar-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Search Input Area: bg-white, border-2 border-#f10, flex-1
   h-60, items-center, px-15 py-10, rounded-bl-5 rounded-tl-5 */
.search-input-wrapper {
  display: flex;
  flex: 1 0 0;
  height: 60px;
  align-items: center;
  padding: 10px 15px;
  background-color: #FFFFFF;
  border: 2px solid var(--fill-am6e95, #FF1100);
  border-radius: 5px 0 0 5px;
}

/* Search Input Text: font-normal, leading-none, text-#797979, text-16, text-center */
.search-input-area {
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--fill-a1t3ri, #000000);
  border: none;
  outline: none;
  text-align: center;
}

.search-input-area::placeholder {
  color: var(--fill-r6v3bz, #797979);
}

/* Search Button: bg-#f10, h-60, items-center, px-20 py-10
   rounded-br-5 rounded-tr-5 */
.search-button-area {
  display: flex;
  height: 60px;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--fill-am6e95, #FF1100);
  border-radius: 0 5px 5px 0;
  border: none;
  cursor: pointer;
}

/* Search Button Text: font-bold, leading-none, text-16, text-center, text-white */
.search-button-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: var(--fill-6r65d0, #FFFFFF);
  white-space: nowrap;
}

/* GPS Button: bg-#f10, h-60, items-center, justify-between
   pl-20 pr-30 py-20, rounded-10, shadow, w-full */
.gps-button-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 20px 30px 20px 20px;
  width: 100%;
  background-color: var(--fill-am6e95, #FF1100);
  border-radius: 10px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/* GPS Icon: size-40 */
.gps-icon {
  width: 40px;
  height: 40px;
}

/* GPS Right Arrow Icon */
.gps-icon-right {
  width: 20px;
  height: 20px;
}

/* GPS Text: font-bold, leading-16px, text-16, text-center, text-white */
.gps-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  color: var(--fill-6r65d0, #FFFFFF);
}

/* ===== Area Content (Dropdown + Kana List) ===== */

/* Container: flex-col, items-center, pb-60, px-16, w-full */
.area-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 60px;
  width: 100%;
}

/* Inner Wrapper: flex-col, items-start, w-full */
.area-content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Items Wrapper: flex-col, gap-20, items-start, w-full */
.area-items-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

/* Dropdown: bg-white, border #696b68, h-50, items-center, justify-between
   pb-10 pt-8 px-15, rounded-5, w-full */
.area-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 8px 15px 10px;
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid var(--stroke-znlao8, #696B68);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

/* Dropdown Select: full width, styled as native select */
.area-dropdown-select {
  flex: 1;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--fill-a1t3ri, #000000);
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Dropdown Icon: size-20 */
.area-dropdown-icon {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* ===== Kana List Box ===== */

/* Container: bg-white, border #696b68, flex-col, gap-20
   px-16 py-20, rounded-5, w-full */
.kana-list-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 16px;
  width: 100%;
  background-color: #FFFFFF;
  border: 1px solid var(--stroke-znlao8, #696B68);
  border-radius: 5px;
}

/* Kana Row: flex, gap-20, items-start, w-full
   font-normal, leading-none, text-16, text-center */
.kana-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

/* Kana Label: text-#f10 */
.kana-label {
  color: var(--fill-am6e95, #FF1100);
  flex-shrink: 0;
}

/* Kana Items Wrap: content-start, flex, flex-1, flex-wrap
   gap-20px 40px, items-start, text-black, underline */
.kana-items {
  display: flex;
  flex: 1 0 0;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 20px 40px;
  color: var(--fill-a1t3ri, #000000);
}

/* Kana Item Link: underline, decoration-solid */
.kana-items a,
.kana-item {
  text-decoration: underline;
  text-decoration-style: solid;
  color: var(--fill-a1t3ri, #000000);
}

/* Divider: border-top #e0ddd1 */
.kana-divider {
  width: 100%;
  border: none;
  border-top: 1px solid #E0DDD1;
}

/* ===== Parking Cards Section ===== */

/* Section: flex-col, items-start, pb-80, w-375 */
.parking-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 80px;
  width: 375px;
  max-width: 100%;
}

/* Section Header: flex, gap-5, items-center, px-16 */
.parking-header {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0 16px;
}

/* Header Icon: size-24 */
.parking-header-icon {
  width: 24px;
  height: 24px;
}

/* Header Text: font-normal, leading-16px, text-16, text-black, text-center */
.parking-header-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  color: var(--fill-a1t3ri, #000000);
  white-space: nowrap;
}

/* Cards Container: flex-col, gap-20, items-start, justify-center
   px-16 py-24, w-full */
.parking-cards-outer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  width: 100%;
}

/* Cards Scroll Wrapper: flex, gap-10, items-start, w-359
   overflow-x auto, scrollbar hiding */
.parking-cards-scroll {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 359px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.parking-cards-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* Card: bg-white, border #f2f0e8, flex-col, gap-10
   px-16 py-20, rounded-10, w-301, flex-shrink-0 */
.parking-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 20px 16px;
  width: 301px;
  min-width: 301px;
  flex-shrink: 0;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border: 1px solid var(--stroke-pe54na, #F2F0E8);
  border-radius: 10px;
  overflow: hidden;
}

/* Card Image Container: grid overlay */
.parking-card-image-wrapper {
  position: relative;
  width: 269px;
  height: 140px;
}

.parking-card-image {
  width: 269px;
  height: 140px;
  object-fit: cover;
}

/* Badge: bg-white, border #696b68, items-center, justify-center
   pb-4 pt-3 px-6 */
.parking-card-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px 4px;
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border: 1px solid var(--stroke-znlao8, #696B68);
  border-radius: 5px;
}

/* Badge Text: font-normal, leading-16px, text-12, text-black */
.parking-card-badge-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--fill-a1t3ri, #000000);
  white-space: nowrap;
}

/* Card Title Row */
.parking-card-title-row {
  width: 100%;
}

/* Card Title: font-normal, leading-1.2, text-16, text-black */
.parking-card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--fill-a1t3ri, #000000);
}

/* Card Tags: flex, flex-wrap, gap-y-5, items-center, w-full */
.parking-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 5px;
  align-items: center;
  width: 100%;
}

/* Tag */
.parking-card-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px 4px;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border: 1px solid var(--stroke-znlao8, #696B68);
}

.parking-card-tag-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--fill-a1t3ri, #000000);
  white-space: nowrap;
}

/* Card Price Area: bg-#f2f0e8, flex-col, items-start
   pb-12 pt-10 px-16, w-full */
.parking-card-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px 12px;
  width: 100%;
  background-color: var(--fill-jiva0u, #F2F0E8);
}

/* Card Price Text: font-normal, leading-1.4, text-12, text-black */
.parking-card-price-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fill-a1t3ri, #000000);
}

/* Card Buttons: flex, gap-10, items-start, w-full */
.parking-card-buttons {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
}

/* Detail Button: bg-white, border #696b68, flex-1, h-40
   items-center, justify-center, rounded-5 */
.parking-card-btn-detail {
  display: flex;
  flex: 1 0 0;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border: 1px solid var(--stroke-znlao8, #696B68);
  text-decoration: none;
  cursor: pointer;
}

/* Apply Button: bg-#e60012, flex-1, h-40
   items-center, justify-center, rounded-5 */
.parking-card-btn-apply {
  display: flex;
  flex: 1 0 0;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: #FF1100;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

/* Button Text: font-normal, leading-none, text-14, text-center */
.parking-card-btn-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--fill-a1t3ri, #000000);
}

.parking-card-btn-text-white {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--fill-6r65d0, #FFFFFF);
}

/* Scroll Indicator */
.parking-scroll-indicator {
  position: relative;
  width: 343px;
  max-width: 100%;
  height: 5px;
  background-color: var(--fill-6r65d0, #FFFFFF);
}

.parking-scroll-track {
  width: 100%;
  height: 5px;
  background-color: var(--fill-6r65d0, #FFFFFF);
}

.parking-scroll-bar {
  width: 40px;
  height: 5px;
  background-color: var(--fill-am6e95, #FF1100);
  position: absolute;
  top: 0;
  left: 0;
}

/* ===== CTA Section ===== */

/* Section: flex-col, isolate, items-start, pb-16, w-full */
.cta-section {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  align-items: flex-start;
  padding-bottom: 16px;
  width: 100%;
}

/* Cards Wrapper: flex-col, gap-16, items-start, mb--16, px-20, w-full, z-2 */
.cta-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: -16px;
  padding: 0 20px;
  width: 100%;
  z-index: 2;
}

/* CTA Card Wrapper */
.cta-card-wrapper {
  width: 100%;
}

/* CTA Card: backdrop-blur-6, bg-white, border-16 #f2f0e8
   flex-col, gap-20, h-240, items-center, justify-center, rounded-10, w-full */
.cta-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  height: 240px;
  width: 100%;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border: 16px solid var(--fill-jiva0u, #F2F0E8);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

/* CTA Card Text Group */
.cta-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}

/* CTA Subtitle: font-normal, text-16, text-center, text-black, leading-1.4 */
.cta-subtitle {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: var(--fill-a1t3ri, #000000);
  width: 100%;
}

/* CTA Title: font-bold, text-21, text-center, text-black, leading-1.4 */
.cta-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.4;
  text-align: center;
  color: var(--fill-a1t3ri, #000000);
  width: 100%;
}

/* CTA Primary Button: bg-#106ec6, h-60, items-center, justify-center
   p-20, rounded-5, shadow, w-260 */
.cta-button-primary {
  display: flex;
  width: 260px;
  height: 60px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--fill-1rbrw9, #106EC6);
  border-radius: 5px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

/* CTA Primary Button Text: font-medium, leading-none, text-18, text-center, text-white */
.cta-button-primary-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--fill-6r65d0, #FFFFFF);
}

/* CTA Secondary Button: bg-white, border #696b68, h-60
   items-center, justify-center, px-15 py-10, rounded-8, w-260 */
.cta-button-secondary {
  display: flex;
  width: 260px;
  height: 60px;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border: 1px solid var(--stroke-znlao8, #696B68);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}

/* CTA Secondary Button Text: font-medium, leading-none, text-18, text-center, text-black */
.cta-button-secondary-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--fill-a1t3ri, #000000);
}

/* ===== Footer ===== */

/* Container: relative, w-375 */
.footer-area {
  position: relative;
  width: 375px;
  max-width: 100%;
  min-height: 887px;
  z-index: 1;
}

/* Background: absolute, bg-#f10, inset-0 */
.footer-bg {
  position: absolute;
  inset: 0;
  background-color: var(--fill-am6e95, #FF1100);
}

/* Decoration: absolute, opacity-60, overflow-clip */
.footer-decoration {
  position: absolute;
  top: 75.2%;
  right: 0;
  bottom: 2.29%;
  left: 8.8%;
  opacity: 0.6;
  overflow: clip;
}

/* Decoration Image */
.footer-decoration img {
  position: absolute;
  top: 0;
  right: -30.07%;
  bottom: -10.35%;
  left: 0;
  width: auto;
  height: auto;
}

/* Content Wrapper: absolute, flex-col */
.footer-content-wrapper {
  position: absolute;
  top: -2.25%;
  right: 0;
  bottom: -0.01%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Content Inner: flex-col, gap-40, items-center, pb-60 pt-100 px-16, w-full */
.footer-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  padding: 100px 16px 60px;
  width: 100%;
}

/* Footer Branding: flex, gap-20, items-start, w-full */
.footer-branding {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

/* Footer Logo: h-60, w-109.091 */
.footer-logo {
  width: 109.091px;
  height: 60px;
}

/* Footer Brand Info */
.footer-brand-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Footer Brand Text: font-normal, leading-1.4, text-16, text-white */
.footer-brand-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--fill-6r65d0, #FFFFFF);
}

/* Footer Brand Logo: h-24, overflow-clip, w-175 */
.footer-brand-logo {
  height: 24px;
  width: 175px;
  overflow: clip;
}

/* Footer Nav */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
}

/* Footer Tabs: bg-white, h-60, items-start, p-5, rounded-40, w-343 */
.footer-tabs {
  display: flex;
  align-items: flex-start;
  height: 60px;
  padding: 5px;
  width: 343px;
  max-width: 100%;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border-radius: 40px;
}

/* Tab base */
.footer-tab {
  display: flex;
  flex: 1 0 0;
  gap: 5px;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 40px;
  text-decoration: none;
}

/* Tab Active: bg-#f10, shadow */
.footer-tab--active {
  background-color: var(--fill-am6e95, #FF1100);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.footer-tab--active .footer-tab-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: var(--fill-6r65d0, #FFFFFF);
}

/* Tab Inactive: bg-white */
.footer-tab--inactive {
  background-color: var(--fill-6r65d0, #FFFFFF);
}

.footer-tab--inactive .footer-tab-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: var(--fill-r6v3bz, #797979);
}

/* Tab Icon: size-16 */
.footer-tab-icon {
  width: 16px;
  height: 16px;
}

/* Footer Links: flex-col, gap-30, font-normal, leading-none, text-14, text-white */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--fill-6r65d0, #FFFFFF);
}

.footer-links-group {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer-link {
  color: var(--fill-6r65d0, #FFFFFF);
  text-decoration: none;
}

/* External Links */
.footer-external-links {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.footer-external-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
}

/* External Link Icon: size-12 */
.footer-external-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Copyright: font-normal, leading-1.2, text-10, text-white */
.footer-copyright {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.2;
  color: var(--fill-6r65d0, #FFFFFF);
}

/* Bottom Logo: h-39.063, overflow-clip, w-full */
.footer-bottom-logo {
  height: 39.063px;
  width: 100%;
  overflow: clip;
}

.footer-bottom-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}