/* consumers.css — SP/Tablet responsive overrides + BEM components */

/* ===== Card row wrap at tablet (481-786px) ===== */
@media screen and (min-width: 481px) and (max-width: 786px) {
  .sd[data-s-4b770b3f-62ed-42a1-9316-752e7bd8c8ba],
  .sd[data-s-aed3d6ae-6c55-4918-adf5-e8aeee8ffdc7],
  .sd[data-s-2f4221ce-ed22-4401-a4f8-2a88600eecda],
  .sd[data-s-077fdf6a-04cd-454d-bf0f-3d577edd529d],
  .sd[data-s-b68d5873-5852-4dd3-af21-e18f8257e439] {
    flex-wrap: wrap;
  }
  /* Fix card width: 50% → calc(50% - 6px) to account for 12px gap */
  .sd[data-s-5a56e2f5-d7b5-4255-a287-df31bb2ea1cb],
  .sd[data-s-052b7b73-0e9f-4464-ad2a-c67ed0a52bcd] {
    width: calc(50% - 6px);
    max-width: calc(50% - 6px);
  }
}

/* ===== Display Toggle Overrides ===== */

/* Keep PC SEARCH SERVICE visible at tablet instead of de45e81e */
@media screen and (max-width: 768px) {
  .sd[data-s-ef270a35-9640-4b21-bd88-cb8fc53035c5] {
    display: flex !important;
  }
  .sd[data-s-de45e81e-4335-4fd3-871b-78b67749b46a] {
    display: none !important;
  }
}

/* At phone: hide PC, show phone SEARCH SERVICE */
@media screen and (max-width: 480px) {
  .sd[data-s-ef270a35-9640-4b21-bd88-cb8fc53035c5] {
    padding: 0 20px !important;
  }
  .sd[data-s-42b8367a-82eb-4f9c-befe-8b02eb7536bd] {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    background: #ebebeb;
  }
}

/* ===== Phone SEARCH SERVICE (BEM) ===== */

.search-sp {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin: 70px 20px;
  width: calc(100% - 40px);
}

/* Heading */
.search-sp__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.search-sp__title-en {
  margin: 0;
  letter-spacing: 0;
  color: #000;
  display: flex;
  font-size: 44px;
  line-height: 1.2;
  text-align: left;
  justify-content: flex-start;
  font-weight: bold;
  font-family: 'Inter';
}
.search-sp__title-ja {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}

/* Body */
.search-sp__body {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Section header (red bar + title) */
.search-sp__section-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
.search-sp__bar {
  display: block;
  width: 4px;
  height: 38px;
  background: #ff0000;
  flex-shrink: 0;
}
.search-sp__section-title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}

/* Needs section */
.search-sp__needs {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.search-sp__section > .search-sp__section-head {
  margin-bottom: 20px;
}

/* Needs group (accordion-style cards) */
.search-sp__group {
  background: #fff;
  border: 1px solid #bebebe;
  border-bottom: 0;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.search-sp__group--last {
  border-bottom: 1px solid #bebebe;
}
.search-sp__group-title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
  text-align: left;
}

/* Needs cards — image cards with text overlay */
.search-sp__cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.search-sp__card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #000;
  text-decoration: none;
  overflow: hidden;
}
.search-sp__card-img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
}
.search-sp__card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px 10px 0 0;
  background: #fff;
  z-index: 1;
}
.search-sp__card-text {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #000;
}
.search-sp__card-arrow {
  width: 16px;
  height: auto;
  flex-shrink: 0;
}

/* Service logos */
.search-sp__logos {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.search-sp__logo-link {
  display: block;
}
.search-sp__logo-img {
  display: block;
  width: 100%;
  height: auto;
}

/* CTA */
.search-sp__cta {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  border: 1px solid #a0a0a0;
  padding: 12px 28px 11px 28px;
  text-decoration: none;
  overflow: hidden;
  box-sizing: border-box;
}
.search-sp__cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 5;
}
.search-sp__cta-inner p {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.8;
  color: #000;
  transition: color 480ms cubic-bezier(0.19, 1, 0.22, 1);
}
.search-sp__cta-arrow {
  width: 10px;
  height: auto;
  transition: opacity 480ms cubic-bezier(0.19, 1, 0.22, 1);
}
.search-sp__cta-arrow-hover {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  z-index: 2;
  transition: opacity 480ms cubic-bezier(0.19, 1, 0.22, 1);
}
.search-sp__cta-arrow-hover img {
  width: 10px;
  height: auto;
}
.search-sp__cta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #000;
  z-index: 0;
  transition: width 480ms cubic-bezier(0.19, 1, 0.22, 1);
}
.search-sp__cta:hover .search-sp__cta-inner p {
  color: #fff;
}
.search-sp__cta:hover .search-sp__cta-arrow {
  opacity: 0;
}
.search-sp__cta:hover .search-sp__cta-arrow-hover {
  opacity: 1;
}
.search-sp__cta:hover .search-sp__cta-bg {
  width: 100%;
}

/* ===== PC SEARCH SERVICE tablet adjustments ===== */

/* Service grid rows: wrap at tablet for 2-col */
@media screen and (max-width: 768px) {
  .sd[data-s-872fdb36-50ca-42a4-a9dd-04a23f7592d5],
  .sd[data-s-7adf5f06-98e3-45a8-bf7a-f499eade16a6],
  .sd[data-s-90a288ec-65b2-4d70-8d7d-7419693d311b] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .sd[data-s-872fdb36-50ca-42a4-a9dd-04a23f7592d5] > *,
  .sd[data-s-7adf5f06-98e3-45a8-bf7a-f499eade16a6] > *,
  .sd[data-s-90a288ec-65b2-4d70-8d7d-7419693d311b] > * {
    flex: none !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }
}