/* monthly-top.css - Figma MCP v3 SP 月極トップページ */
/* Generated from Figma node: 385:1177 (monthly_sp) */

/* ===== Header Component: 649:21249 =====
   プロパティ1=月極sp_header */

/* layout_F8D4QO: Header Container
   mode: column, gap: 10px, padding: 18px 15px 12px, width: 375
   fills: #FFFFFF, effect: box-shadow 0px 2px 2px rgba(0,0,0,0.1) */
.header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 15px 12px;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

/* layout_6W9CCB: Frame 723 (Top Row)
   mode: row, justifyContent: space-between, alignItems: center, width: 345 */
.frame-723 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* layout_1XV0LU: Frame 12 (Logo Area)
   mode: row, alignItems: center, gap: 10px */
.frame-12 {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* layout_04907K: icn_parkspark (Logo Icon)
   width: 61.2, height: 34 */
.icn-parkspark {
  width: 61.2px;
  height: 34px;
  object-fit: cover;
}

/* layout_LYKYN5: Frame 724 (Brand Text Area)
   mode: column, justifyContent: center, gap: 5px */
.frame-724 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

/* style_BLP3XE: 三菱地所の駐車場検索[パークスパーク]
   fontSize: 10, lineHeight: 1.2em, color: #1E1E1E */
.text-header-tagline {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.2em;
  color: #1E1E1E;
}

/* layout_17FGVJ: brand_logo (Brand Logo SVG)
   width: 102, height: 14 */
.brand-logo-header {
  width: 102px;
  height: 14px;
}

/* layout_7I3P3H: Frame 1 (Menu Button Area)
   mode: column, alignItems: center, gap: 2px, width: 36 */
.frame-1-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 36px;
  cursor: pointer;
}

/* layout_719QKV: List 2 (Hamburger Icon)
   width: 32, height: 33 */
.hamburger-menu {
  width: 32px;
  height: 33px;
}

/* style_84S9AL: MENU text
   fontSize: 9, lineHeight: 1.2em, color: #1E1E1E */
.text-menu {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 9px;
  line-height: 1.2em;
  text-align: center;
  color: #1E1E1E;
}

/* layout_PWOD0V: Frame 7 (Tab Row Container)
   mode: row, justifyContent: stretch, alignSelf: stretch, padding: 0 0 1px */
.frame-7 {
  display: flex;
  align-self: stretch;
  padding: 0 0 1px;
}

/* layout_HR0SA3: Frame 717 (Tab Container)
   mode: row, padding: 5px, height: 50, borderRadius: 40px
   fills: #F2F0E8 */
.frame-717 {
  display: flex;
  flex: 1;
  padding: 5px;
  height: 50px;
  border-radius: 40px;
  background-color: #F2F0E8;
}

/* layout_X58WZA: Frame 4/6 (Tab Button)
   mode: row, justifyContent: center, alignItems: center, gap: 5px
   padding: 10px 20px, borderRadius: 40px */
.tab-button {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px 20px;
  border-radius: 40px;
  text-decoration: none;
}

/* Tab Active (月極駐車場)
   fills: #FF1100, effect: box-shadow 0px 0px 10px rgba(0,0,0,0.2) */
.tab-button--active {
  background-color: #FF1100;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

/* Tab Inactive (時間貸駐車場)
   fills: #F2F0E8 */
.tab-button--inactive {
  background-color: #F2F0E8;
}

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

/* style_5DVDTU: Tab Text Active (14px bold white)
   fontWeight: 700, fontSize: 14, lineHeight: 1.2em */
.tab-text--active {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2em;
  text-align: center;
  color: #FFFFFF;
}

/* style_S5F8Y5: Tab Text Inactive (14px regular gray)
   fontWeight: 400, fontSize: 14, lineHeight: 1.2em, color: #797979 */
.tab-text--inactive {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2em;
  text-align: center;
  color: #797979;
}

/* ===== layout_M92RK5: monthly_sp (Main Container) =====
   mode: none, width: 375, height: 3237
   fills: fill_JIVA0U (#F2F0E8) */
.monthly-sp {
  width: 100%;
  min-height: 100vh;
  background-color: var(--fill-jiva0u, #F2F0E8);
  margin: 0 auto;
}

/* ===== layout_EY5AW7: Frame 136 (Main Content) =====
   mode: column, width: 375, y: 142 */
.frame-136 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ===== layout_S3UOEI: Group 607 (Hero Section) =====
   mode: none, width: 375, height: 192 */
.group-607 {
  position: relative;
  width: 100%;
  height: 192px;
}

/* ===== layout_VR662I: Group 605 =====
   mode: none, width: 375, height: 192 */
.group-605 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 192px;
}

/* ===== layout_F3ZHKR: Rectangle 1 (Hero Background) =====
   mode: none, width: 375, height: 180
   fills: fill_AM6E95 (#FF1100) */
.rectangle-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px;
  background-color: var(--fill-am6e95, #FF1100);
}

/* ===== layout_38GE2C: Frame 49 (Hero Image) =====
   mode: none, width: 275, height: 126, x: 95, y: 66
   opacity: 0.6 */
.frame-49 {
  position: absolute;
  top: 66px;
  left: 95px;
  width: 275px;
  height: 126px;
  opacity: 0.6;
}

.frame-49 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== layout_7NQRHE: Frame 133 (Hero Content) =====
   mode: column, gap: 15px, width: 210, x: 16, y: 44 */
.frame-133 {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: absolute;
  top: 44px;
  left: 16px;
  width: 210px;
}

/* ===== layout_GTJS44: Group 9 (Logo) =====
   mode: none, width: 206.82, height: 62 */
.group-9 {
  width: 206.82px;
  height: 62px;
}

/* パークスパークの月極駐車場検索 - TEXT
   style_8KJFO2: fontWeight 700, fontSize 14
   fills: fill_6R65D0 (#FFFFFF) */
.text-tagline {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1em;
  color: var(--fill-6r65d0, #FFFFFF);
}

/* ===== layout_1Q99LX: Group 606 (Hero Decoration) =====
   mode: none, opacity: inherited */
.group-606 {
  position: absolute;
  top: 66px;
  left: 0;
  width: 100%;
  height: 126px;
}

/* ===== layout_BDWWQU: Frame 4 (Search Section) =====
   mode: column, justifyContent: center, alignSelf: stretch
   gap: 40px, padding: 20px 16px 60px */
.frame-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  gap: 40px;
  padding: 20px 16px 60px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

/* ===== layout_6CTUG4: Frame 18 (Search Options Row) =====
   mode: row, justifyContent: stretch, alignItems: stretch
   gap: 10px, width: 343 */
.frame-18 {
  display: flex;
  width: 100%;
  align-items: stretch;
  gap: 10px;
}

/* ===== layout_W4MMOH: Frame 15/17/18 (Search Option Cards) =====
   borderRadius: 5px, effects: effect_SCOB96 */
.frame-15,
.frame-17,
.frame-18-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  flex: 1;
  border-radius: 5px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}

/* Frame 15 - 現在地から探す (Primary - Red)
   fills: #FF1100, strokes: #FF1100 */
.frame-15 {
  background-color: var(--fill-am6e95, #FF1100);
  border: 1px solid var(--fill-am6e95, #FF1100);
  min-width: 0;
}

/* Frame 18-card - エリアを選ぶ (White)
   fills: #FFFFFF, no stroke */
.frame-18-card {
  background-color: var(--fill-6r65d0, #FFFFFF);
  min-width: 0;
}

/* Frame 17 - プロに依頼する (White with white border)
   fills: #FFFFFF, strokes: #FFFFFF */
.frame-17 {
  background-color: var(--fill-6r65d0, #FFFFFF);
  border: 1px solid var(--fill-6r65d0, #FFFFFF);
  min-width: 0;
}

/* ===== layout_EO8K34: Group 4 (Search Option Icon) ===== */
.group-4 {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.frame-15 .group-4 {
  background-color: var(--fill-6r65d0, #FFFFFF);
}

.frame-18-card .group-4 {
  background-color: var(--fill-am6e95, #FF1100);
}

.frame-17 .group-4 {
  background-color: var(--fill-1rbrw9, #106EC6);
}

.group-4 img {
  width: 22px;
  height: 22px;
}

/* ===== layout_M2EX4P: Frame 14 (Search Option Text) ===== */
.frame-14 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* 現在地/エリア/プロに - TEXT (style_NYX5S4) */
.text-option-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.frame-15 .text-option-title {
  color: var(--fill-6r65d0, #FFFFFF);
}

.frame-18-card .text-option-title,
.frame-17 .text-option-title {
  color: var(--fill-a1t3ri, #000000);
}

.frame-17 .text-option-title {
  color: var(--fill-1rbrw9, #106EC6);
}

/* から探す/を選ぶ/依頼する - TEXT (style_XLQZQ1)
   sizing: horizontal: hug → white-space: nowrap */
.text-option-subtitle {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.frame-15 .text-option-subtitle {
  color: var(--fill-6r65d0, #FFFFFF);
}

.frame-18-card .text-option-subtitle {
  color: var(--fill-a1t3ri, #000000);
}

.frame-17 .text-option-subtitle {
  color: var(--fill-1rbrw9, #106EC6);
}

/* ===== layout_A4V7TX: Frame 134 (Search Bar) ===== */
.frame-134 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* ===== layout_Q1G60G: Frame 2 (Search Input) =====
   fills: fill_6R65D0, strokes: stroke_6VRUJY (#FF1100)
   borderRadius: 5px 0px 0px 5px */
.frame-2 {
  display: flex;
  height: 60px;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  flex: 1;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border-radius: 5px 0 0 5px;
  border: 2px solid var(--fill-am6e95, #FF1100);
}

/* 住所、駅名、施設名など - TEXT (style_B0G8ZI)
   fills: fill_R6V3BZ (#797979) */
.frame-2 input {
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: var(--fill-a1t3ri, #000000);
  border: none;
  outline: none;
}

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

/* ===== layout_7483DO: Frame 3 (Search Button) =====
   fills: fill_AM6E95, borderRadius: 0px 5px 5px 0px */
.frame-3 {
  display: inline-flex;
  height: 60px;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background-color: var(--fill-am6e95, #FF1100);
  border-radius: 0 5px 5px 0;
  border: none;
  cursor: pointer;
}

/* 検索 - TEXT (style_93ZDWO)
   fills: fill_6R65D0 (#FFFFFF) */
.frame-3 span {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  color: var(--fill-6r65d0, #FFFFFF);
  white-space: nowrap;
}

/* ===== layout_L9R70E: Frame 137 (Recent Parking Section) =====
   mode: column, width: 375 */
.frame-137 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ===== layout_RJ3O9K: Frame 722 (Section Header) ===== */
.frame-722 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
}

/* ===== layout_WAN3PO: ClockCounterClockwise ===== */
.clock-counter-clockwise {
  width: 24px;
  height: 24px;
}

/* 最近チェックした駐車場 - TEXT (style_B0G8ZI)
   fills: fill_A1T3RI (#000000) */
.text-section-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: var(--fill-a1t3ri, #000000);
  white-space: nowrap;
}

/* ===== layout_SGYEQK: Frame 51 (Parking List Container) =====
   mode: column, justifyContent: center, alignSelf: stretch
   gap: 20px, padding: 24px 16px
   [OVERRIDE] alignItems: center (Figma未指定だがデザイン意図) */
.frame-51 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 20px;
  padding: 24px 16px;
}

/* ===== layout_SE01OO: Frame 54 (Parking Cards Row) =====
   mode: row, gap: 10px, width: 359 */
.frame-54 {
  display: flex;
  width: 359px;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.frame-54::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* ===== layout_N8ZLO2: 月極 (Parking Card) =====
   mode: column, gap: 10px, padding: 20px 16px, width: 280
   fills: #FFFFFF, strokes: #F2F0E8, borderRadius: 10px */
.tsukigime {
  display: flex;
  flex-direction: column;
  width: 280px;
  min-width: 280px;
  gap: 10px;
  padding: 20px 16px;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border-radius: 10px;
  border: 1px solid var(--stroke-pe54na, #F2F0E8);
  overflow: hidden;
}

/* ===== layout_3M5X2Q: Group 639 (Card Image) ===== */
.group-639 {
  position: relative;
  width: 100%;
  height: 140px;
}

/* ===== layout_TGPTJD: Rectangle 10 (Image Placeholder) ===== */
.rectangle-10 {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* ===== layout_USY97Y: Frame 25 (Type Badge) =====
   fills: fill_6R65D0, strokes: stroke_4WJC0Z
   borderRadius: 5px */
.frame-25 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 3px 6px 4px;
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border-radius: 5px;
  border: 1px solid #000000;
}

/* 月極 - TEXT (style_CF5BE9) */
.frame-25 span {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--fill-a1t3ri, #000000);
  white-space: nowrap;
}

/* ===== layout_8E5D57: Frame 21 (Card Info) ===== */
.frame-21 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

/* ===== layout_8TH5QQ: Frame 140 (Status Container) ===== */
.frame-140 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0 0;
}

/* ===== layout_TA7GLU: Component 24 (Status Badge) =====
   fills: fill_2QTIX6 (#3C3C3C), borderRadius: 5px */
.component-24 {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background-color: var(--fill-2qtix6, #3C3C3C);
  border-radius: 5px;
}

/* 空 - TEXT (style_4V14TH)
   fills: fill_0CSQXC (#28AF62) */
.component-24 span {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 16px;
  text-align: center;
  color: var(--fill-0csqxc, #28AF62);
  white-space: nowrap;
}

/* PARKS PARK 港区麻布十番2丁目 - TEXT (style_XUV734) */
.text-parking-name {
  flex: 1;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19.2px;
  color: var(--fill-a1t3ri, #000000);
}

/* ===== layout_8SKWW1: Frame 24 (Tags Container) ===== */
.frame-24 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 100%;
}

/* ===== layout_E844XY: Frame 26 (Tag) =====
   fills: fill_6R65D0, strokes: stroke_ZNLAO8 */
.frame-26 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 3px 6px 4px;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border: 1px solid var(--stroke-znlao8, #696B68);
}

/* 地下自走式駐車場 - TEXT (style_CF5BE9) */
.frame-26 span {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--fill-a1t3ri, #000000);
  white-space: nowrap;
}

/* ===== layout_ONGWVN: Frame 22 (Price Container) =====
   fills: fill_JIVA0U (#F2F0E8) */
.frame-22 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 10px 16px 12px;
  width: 100%;
  background-color: var(--fill-jiva0u, #F2F0E8);
}

/* 44,000円/月 - TEXT (style_CSHXMU) */
.text-price {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16.8px;
  color: var(--fill-a1t3ri, #000000);
}

/* ===== layout_BZYBTB: Frame 98 (Action Buttons) =====
   mode: row, justifyContent: stretch, alignItems: stretch
   alignSelf: stretch, gap: 10px */
.frame-98 {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 10px;
}

/* ===== layout_PU1GOS: Frame 28/27 (Action Button) =====
   borderRadius: 5px */
.frame-28,
.frame-27 {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 15px 10px;
  flex: 1;
  border-radius: 5px;
}

/* Frame 28 - 詳細を見る (Secondary)
   fills: fill_6R65D0, strokes: stroke_ZNLAO8 */
.frame-28 {
  background-color: var(--fill-6r65d0, #FFFFFF);
  border: 1px solid var(--stroke-znlao8, #696B68);
}

/* Frame 27 - 申し込む (Primary)
   fills: fill_AM6E95 */
.frame-27 {
  background-color: var(--fill-am6e95, #FF1100);
  border: none;
}

/* 詳細を見る/申し込む - TEXT (style_OIELIY) */
.frame-28 span {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  color: var(--fill-a1t3ri, #000000);
  white-space: nowrap;
}

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

/* ===== Scroll Indicator ===== */
.group-12 {
  width: 343px;
  height: 5px;
  background-color: var(--fill-6r65d0, #FFFFFF);
}

.group-12-bar {
  width: 40px;
  height: 5px;
  background-color: var(--fill-am6e95, #FF1100);
}

/* ===== layout_7FKW31: Frame 138 (Video Section) =====
   mode: row, justifyContent: stretch, alignItems: stretch
   alignSelf: stretch, gap: 10px, padding: 40px 16px 20px */
.frame-138 {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 10px;
  padding: 40px 16px 20px;
}

/* ===== layout_YGCWFW: Frame 74 (Video Card) =====
   mode: column, gap: 20px, padding: 20px
   fills: fill_6R65D0, strokes: stroke_3385YV
   borderRadius: 10px
   [OVERRIDE] alignItems: center (Figma未指定だがデザイン意図) */
.frame-74 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  flex: 1;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border-radius: 10px;
  border: 1px solid var(--stroke-3385yv, #EBE9DC);
}

.frame-74 .video-thumb-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

/* ===== layout_E9XMAF: Frame 32 (Video Header) ===== */
.frame-32 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ===== layout_OOUU2Q: Group 5 (Play Icon) ===== */
.group-5 {
  width: 30px;
  height: 30px;
  background-color: var(--fill-am6e95, #FF1100);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.group-5 img {
  width: 16px;
  height: 16px;
}

/* 1分でわかるパークスパーク - TEXT (style_93ZDWO) */
.text-video-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  color: var(--fill-a1t3ri, #000000);
  white-space: nowrap;
}

/* ===== layout_K60CL9: Frame 88 (Video Thumbnail) ===== */
.frame-88 {
  width: 303px;
  height: 148px;
  overflow: hidden;
}

/* 月極駐車場編（1:00）- TEXT (style_B0BBKQ) */
.text-video-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16.8px;
  color: var(--fill-a1t3ri, #000000);
  white-space: nowrap;
}

/* ===== layout_S5VWQZ: Frame 130 (Feature Cards) =====
   mode: row, alignSelf: stretch, wrap: true
   gap: 20px, padding: 0px 16px 80px */
.frame-130 {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  gap: 20px;
  padding: 0 16px 80px;
}

/* ===== layout_50NFZ3: Frame 75/78/79/80 (Feature Card) =====
   fills: fill_6R65D0, strokes: stroke_3385YV
   borderRadius: 10px */
.frame-75,
.frame-78,
.frame-79,
.frame-80 {
  display: flex;
  flex-direction: column;
  width: 160px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 10px;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border-radius: 10px;
  border: 1px solid var(--stroke-3385yv, #EBE9DC);
}

/* Feature card images */
.feature-image {
  width: auto;
  height: 80px;
  object-fit: contain;
}

/* 選ばれる理由/よくあるご質問/etc - TEXT (style_YQE6DN) */
.text-feature-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 19.6px;
  text-align: center;
  color: var(--fill-a1t3ri, #000000);
  width: 100%;
  white-space: nowrap;
}

/* ===== layout_26H1FD: Frame 726 (CTA Section) =====
   mode: column, alignSelf: stretch, gap: -16px */
.frame-726 {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0;
}

/* ===== layout_GFPGI5: Frame 671 (CTA Cards Container) =====
   mode: column, alignSelf: stretch, gap: 16px, padding: 0px 20px */
.frame-671 {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 0;
  padding: 0;
  position: relative;
  z-index: 2;
  margin-bottom: -16px;
}

/* ===== Figma: 1860:8935 Frame 636 (CTA Card Outer) =====
   bg: #F2F0E8, rounded: 20px, overflow: clip, padding: 20px */
/* CTA1: top padding 0, bottom 20px. CTA2: top/bottom 20px */
.frame-636 {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  background-color: #F2F0E8;
  border-radius: 20px;
  overflow: hidden;
  padding: 0 20px 20px;
}

/* CTA2（2番目）: 上にも20px padding + CTA1に20px重なる */
.frame-636 + .frame-636 {
  padding-top: 20px;
  margin-top: -20px;
}

/* ===== Figma: 1860:8936 Frame 86 (CTA Card Inner) =====
   bg: white, backdrop-blur: 6px, rounded: 10px, h: 240px */
.frame-86 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 20px;
  height: 240px;
  background-color: #FFFFFF;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ===== layout_MIPNGH: Frame 87 (CTA Text) =====
   mode: column, alignSelf: stretch, gap: 10px */
.frame-87 {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 10px;
}

/* 駐車場探しはプロにおまかせ - TEXT (style_YHRSWG) */
.text-cta-subtitle {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22.4px;
  text-align: center;
  color: var(--fill-a1t3ri, #000000);
  width: 100%;
}

/* 駐車場提案コンシェルジュ - TEXT (style_BYPKPC) */
.text-cta-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 29.4px;
  text-align: center;
  color: var(--fill-a1t3ri, #000000);
  width: 100%;
}

/* ===== layout_S9UMAD: Frame 27 (CTA Primary Button) =====
   mode: row, justifyContent: space-between, alignItems: center
   gap: 20px, padding: 20px, width: 260, height: 60
   fills: #106EC6, effect: boxShadow, borderRadius: 5px */
.frame-27-cta {
  display: flex;
  width: 260px;
  height: 60px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background-color: var(--fill-1rbrw9, #106EC6);
  border-radius: 5px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
}

/* ===== layout_W49RJA: Frame 88 (CTA Secondary Button) =====
   fills: fill_6R65D0, strokes: stroke_ZNLAO8
   borderRadius: 8px */
.frame-88-cta {
  display: flex;
  width: 260px;
  height: 60px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 15px;
  background-color: var(--fill-6r65d0, #FFFFFF);
  border-radius: 8px;
  border: 1px solid var(--stroke-znlao8, #696B68);
}

/* 依頼する（無料）/詳しくはこちら - TEXT (style_1PK4KW) */
.text-cta-button {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}

.frame-27-cta .text-cta-button {
  color: var(--fill-6r65d0, #FFFFFF);
}

.frame-88-cta .text-cta-button {
  color: var(--fill-a1t3ri, #000000);
}

/* ===== layout_NAEUTP: footer (Footer Component) =====
   mode: none, width: 375, height: 887 */
.footer {
  position: relative;
  width: 100%;
  min-height: 887px;
  background-color: var(--fill-am6e95, #FF1100);
  z-index: 1;
}

/* ===== layout_Y5GR6E: Rectangle 32 (Footer Background) ===== */
.rectangle-32 {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--fill-am6e95, #FF1100);
}

/* ===== layout_2SN2L8: Frame 49 (Footer Decoration) =====
   opacity: 0.6 */
.frame-49-footer {
  position: absolute;
  width: 91.2%;
  height: 200px;
  bottom: 0;
  right: 0;
  opacity: 0.6;
}

/* ===== layout_UKJ6MD: Frame 725 (Footer Content) ===== */
.frame-725 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  position: relative;
}

/* ===== layout_8D4QWE: Frame 71 (Footer Main) ===== */
.frame-71 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 100px 16px 60px;
  width: 100%;
}

/* Footer text styles */
.text-footer {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: var(--fill-6r65d0, #FFFFFF);
}

.text-footer-brand {
  font-size: 16px;
  line-height: 22.4px;
}

.text-footer-link {
  font-size: 14px;
  line-height: 14px;
  white-space: nowrap;
}

.text-footer-copyright {
  font-size: 10px;
  line-height: 12px;
  white-space: nowrap;
}

/* Footer bottom bar */
.frame-676 {
  width: 100%;
  height: 39px;
}