/* =========================================================
   MIZUHO BISOU
   WORKS PAGE
   /css/pages/works.css
========================================================= */


/* =========================================================
   01 VARIABLES
========================================================= */

.mzb-works-page {
  --mzb-width: 1180px;

  --mzb-text: #202020;
  --mzb-muted: #777773;
  --mzb-line: #d8d8d3;
  --mzb-soft-line: #e7e7e2;

  --mzb-white: #ffffff;
  --mzb-soft: #f6f6f2;
  --mzb-soft-2: #f1f1ed;
  --mzb-dark: #252525;

  --mzb-serif:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  --mzb-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "YuGothic",
    Meiryo,
    sans-serif;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: var(--mzb-white);
  color: var(--mzb-text);

  overflow-x: clip;
}


/* =========================================================
   02 SWELL RESET
========================================================= */

/* 標準タイトル */
body:has(.mzb-works-page) #top_title_area,
body:has(.mzb-works-page) .l-topTitleArea,
body:has(.mzb-works-page) .c-pageTitle {
  display: none !important;
}


/* パンくず */
body:has(.mzb-works-page) .p-breadcrumb,
body:has(.mzb-works-page) .c-breadcrumb {
  display: none !important;
}


/* SWELL側の余白解除 */
body:has(.mzb-works-page) .l-content {
  padding-top: 0 !important;
}


body:has(.mzb-works-page) .post_content {
  margin-top: 0 !important;
}


body:has(.mzb-works-page) .post_content > .mzb-works-page {
  width: 100vw !important;
  max-width: none !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* box sizing */
.mzb-works-page *,
.mzb-works-page *::before,
.mzb-works-page *::after {
  box-sizing: border-box;
}


/* SWELL見出し装飾完全解除 */
.mzb-works-page h1,
.mzb-works-page h2,
.mzb-works-page h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;

  background: transparent !important;
  box-shadow: none !important;
}


.mzb-works-page h1::before,
.mzb-works-page h1::after,
.mzb-works-page h2::before,
.mzb-works-page h2::after,
.mzb-works-page h3::before,
.mzb-works-page h3::after {
  display: none !important;

  content: none !important;
}


.mzb-works-page p,
.mzb-works-page figure,
.mzb-works-page dl,
.mzb-works-page dt,
.mzb-works-page dd {
  margin: 0 !important;
  padding: 0;
}


.mzb-works-page img {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  height: 100% !important;

  margin: 0 !important;

  object-fit: cover;
}


.mzb-works-page a {
  color: inherit;

  text-decoration: none !important;
}


/* =========================================================
   03 COMMON
========================================================= */

.mzb-works-container {
  width: min(calc(100% - 64px), var(--mzb-width)) !important;
  max-width: var(--mzb-width) !important;

  margin-inline: auto !important;
}


.mzb-pc-only {
  display: inline;
}


/* heading */

.mzb-works-heading {
  position: relative;

  padding-left: 28px;
}


.mzb-works-heading::before {
  content: "";

  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;

  display: block;

  width: 1px;

  background: #8b8b86;
}


.mzb-works-heading__en {
  margin-bottom: 11px !important;

  color: var(--mzb-muted);

  font-family: var(--mzb-sans);
  font-size: 10px;
  font-weight: 500;

  letter-spacing: 0.25em;
  line-height: 1.4;
}


.mzb-works-heading__ja {
  font-family: var(--mzb-serif);

  font-size: clamp(27px, 2.7vw, 40px);
  font-weight: 400;

  letter-spacing: 0.045em;
  line-height: 1.55;
}


/* =========================================================
   04 HERO
========================================================= */

.mzb-works-hero {
  padding:
    44px
    0
    72px;
}


.mzb-works-hero__inner {
  display: grid !important;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(0, 1.32fr) !important;

  align-items: center;

  gap: 0;
}


.mzb-works-hero__content,
.mzb-works-hero__media {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}


.mzb-works-hero__content {
  position: relative;
  z-index: 2;

  padding:
    36px
    50px
    36px
    0;
}


.mzb-works-hero__title {
  font-family: var(--mzb-serif) !important;

  font-size: clamp(41px, 4.5vw, 66px) !important;
  font-weight: 400 !important;

  letter-spacing: 0.04em;
  line-height: 1.43 !important;
}


.mzb-works-hero__lead {
  margin-top: 28px !important;
  padding-left: 28px;

  color: #565652;

  font-family: var(--mzb-sans);
  font-size: 13px;

  letter-spacing: 0.055em;
  line-height: 2;
}


.mzb-works-hero__media {
  overflow: hidden;

  aspect-ratio: 1.72 / 1;

  background: #efefeb;
}


.mzb-works-hero__media img {
  object-position: center center;
}


/* =========================================================
   05 INTRO
========================================================= */

.mzb-works-intro {
  position: relative;

  padding:
    58px
    0
    62px;

  background:
    radial-gradient(
      ellipse at 83% 15%,
      rgba(60, 70, 55, 0.055) 0,
      rgba(60, 70, 55, 0.025) 22%,
      transparent 50%
    ),
    var(--mzb-soft);
}


.mzb-works-intro__grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 0.8fr)
    minmax(0, 1.2fr) !important;

  gap: 70px;

  align-items: start;
}


.mzb-works-intro__grid > * {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
}


.mzb-works-intro__text {
  color: #4e4e4a;

  font-family: var(--mzb-sans);
  font-size: 13px;

  letter-spacing: 0.04em;
  line-height: 1.95;
}


.mzb-works-intro__text p + p {
  margin-top: 12px !important;
}


/* =========================================================
   06 FILTER
========================================================= */

.mzb-works-list {
  padding:
    44px
    0
    74px;
}


.mzb-works-filter-input {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  opacity: 0;

  pointer-events: none;
}


.mzb-works-filter {
  display: flex !important;

  align-items: center;
  justify-content: center;

  gap: 40px;

  width: 100% !important;

  margin: 0 0 28px !important;
  padding: 0 0 13px;

  border-bottom: 1px solid var(--mzb-soft-line);
}


.mzb-works-filter label {
  position: relative;

  flex: 0 0 auto;

  padding: 5px 0 7px;

  color: #555551;

  cursor: pointer;

  font-family: var(--mzb-sans);
  font-size: 12px;

  letter-spacing: 0.06em;
}


.mzb-works-filter label::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: -14px;
  left: 0;

  height: 1px;

  background: #252525;

  transform: scaleX(0);
}


/* selected */

#mzb-filter-all:checked
~ .mzb-works-filter
label[for="mzb-filter-all"]::after,

#mzb-filter-exterior:checked
~ .mzb-works-filter
label[for="mzb-filter-exterior"]::after,

#mzb-filter-interior:checked
~ .mzb-works-filter
label[for="mzb-filter-interior"]::after,

#mzb-filter-wood:checked
~ .mzb-works-filter
label[for="mzb-filter-wood"]::after,

#mzb-filter-shop:checked
~ .mzb-works-filter
label[for="mzb-filter-shop"]::after {
  transform: scaleX(1);
}


/* =========================================================
   07 PRIMARY WORKS GRID
========================================================= */

.mzb-works-primary-grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  column-gap: 30px;
  row-gap: 34px;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* SWELL等の外部干渉を強制解除 */
.mzb-works-primary-grid > .mzb-works-card {
  display: block;

  grid-column: auto !important;

  float: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


.mzb-works-card__image {
  overflow: hidden;

  width: 100% !important;

  aspect-ratio: 16 / 8.3;

  background: #ededeb;
}


.mzb-works-card__image img {
  transition: transform 0.6s ease;
}


.mzb-works-card:hover .mzb-works-card__image img {
  transform: scale(1.015);
}


.mzb-works-card__body {
  padding-top: 11px;
}


.mzb-works-card__category {
  margin-bottom: 5px !important;

  color: #777772;

  font-family: var(--mzb-sans);
  font-size: 9px;

  letter-spacing: 0.14em;
}


.mzb-works-card__title {
  font-family: var(--mzb-serif) !important;

  font-size: 20px !important;
  font-weight: 400 !important;

  letter-spacing: 0.025em;
  line-height: 1.45 !important;
}


.mzb-works-card__meta {
  margin-top: 4px !important;

  color: #797974;

  font-family: var(--mzb-sans);
  font-size: 10px;

  letter-spacing: 0.035em;
}


/* 店舗はALLではMORE WORKSに表示 */
.mzb-works-card--shop-filter {
  display: none !important;
}


/* FILTER */
#mzb-filter-exterior:checked
~ .mzb-works-primary-grid
.mzb-works-card:not(.cat-exterior),

#mzb-filter-interior:checked
~ .mzb-works-primary-grid
.mzb-works-card:not(.cat-interior),

#mzb-filter-wood:checked
~ .mzb-works-primary-grid
.mzb-works-card:not(.cat-wood) {
  display: none !important;
}


#mzb-filter-shop:checked
~ .mzb-works-primary-grid
.mzb-works-card {
  display: none !important;
}


#mzb-filter-shop:checked
~ .mzb-works-primary-grid
.mzb-works-card.cat-shop {
  display: block !important;
}


/* =========================================================
   08 FEATURED WORK
========================================================= */

.mzb-works-featured {
  padding:
    50px
    0;

  background: var(--mzb-soft);
}


.mzb-works-featured__grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr) !important;

  gap: 58px;

  align-items: center;

  width: 100% !important;
  max-width: none !important;
}


.mzb-works-featured__grid > * {
  grid-column: auto !important;

  float: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
}


.mzb-works-featured__main {
  overflow: hidden;

  aspect-ratio: 1.46 / 1;

  background: #e8e8e4;
}


.mzb-works-featured__main img {
  object-position: center center;
}


.mzb-works-featured__content {
  padding-right: 12px;
}


.mzb-works-featured__lead {
  margin-top: 20px !important;

  color: #555551;

  font-family: var(--mzb-sans);
  font-size: 13px;

  letter-spacing: 0.035em;
  line-height: 1.9;
}


.mzb-works-featured__info {
  margin-top: 20px !important;

  border-top: 1px solid var(--mzb-line);
}


.mzb-works-featured__info > div {
  display: grid !important;

  grid-template-columns: 100px minmax(0, 1fr);

  gap: 16px;

  padding: 8px 0;

  border-bottom: 1px solid var(--mzb-line);

  font-family: var(--mzb-sans);
  font-size: 10px;

  line-height: 1.6;
}


.mzb-works-featured__info dt {
  color: #797974;
}


.mzb-works-featured__info dd {
  color: #383834;
}


/* text link */

.mzb-works-text-link {
  display: inline-flex !important;

  align-items: center;

  gap: 28px;

  margin-top: 17px !important;
  padding-bottom: 4px;

  border-bottom: 1px solid #8e8e89;

  font-family: var(--mzb-sans);
  font-size: 10px;

  letter-spacing: 0.04em;
}


/* BEFORE AFTER */

.mzb-works-ba {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    28px
    minmax(0, 1fr);

  gap: 10px;

  align-items: center;

  width: 100% !important;

  margin-top: 21px !important;
}


.mzb-works-ba__item {
  width: 100% !important;

  margin: 0 !important;
}


.mzb-works-ba__image {
  overflow: hidden;

  aspect-ratio: 1.55 / 1;
}


.mzb-works-ba__item figcaption {
  margin-top: 5px;

  color: #898984;

  font-family: var(--mzb-sans);
  font-size: 8px;

  letter-spacing: 0.18em;
  text-align: center;
}


.mzb-works-ba__arrow {
  color: #777772;

  font-family: var(--mzb-sans);
  font-size: 16px;

  text-align: center;
}


/* =========================================================
   09 MORE WORKS
========================================================= */

.mzb-works-more {
  padding:
    46px
    0
    52px;
}


.mzb-works-more__head {
  display: flex !important;

  align-items: end;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 22px;
}


.mzb-works-more__title {
  font-family: var(--mzb-serif) !important;

  font-size: 27px !important;
  font-weight: 400 !important;

  letter-spacing: 0.035em;
}


.mzb-works-more__all {
  padding-bottom: 3px;

  color: #555551;

  font-family: var(--mzb-sans);
  font-size: 10px;

  letter-spacing: 0.04em;
}


.mzb-works-more__grid {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 22px;

  width: 100% !important;
}


.mzb-works-more__grid > .mzb-works-mini-card {
  grid-column: auto !important;

  float: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
}


.mzb-works-mini-card__image {
  overflow: hidden;

  aspect-ratio: 16 / 8.3;
}


.mzb-works-mini-card__category {
  margin-top: 9px !important;
  margin-bottom: 4px !important;

  color: #777772;

  font-family: var(--mzb-sans);
  font-size: 8px;

  letter-spacing: 0.13em;
}


.mzb-works-mini-card__title {
  font-family: var(--mzb-serif) !important;

  font-size: 17px !important;
  font-weight: 400 !important;

  line-height: 1.45 !important;
}


.mzb-works-mini-card__meta {
  margin-top: 3px !important;

  color: #868681;

  font-family: var(--mzb-sans);
  font-size: 9px;
}


/* =========================================================
   10 APPROACH
========================================================= */

.mzb-works-approach {
  padding:
    38px
    0;

  background: var(--mzb-soft);
}


.mzb-works-approach__grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.3fr)
    repeat(3, minmax(0, 1fr)) !important;

  width: 100% !important;

  border-top: 1px solid var(--mzb-line);
  border-bottom: 1px solid var(--mzb-line);
}


.mzb-works-approach__grid > * {
  grid-column: auto !important;

  float: none !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
}


.mzb-works-approach__intro,
.mzb-works-approach__item {
  padding:
    26px
    24px;

  border-right: 1px solid var(--mzb-line);
}


.mzb-works-approach__intro {
  padding-left: 0;
}


.mzb-works-approach__item:last-child {
  padding-right: 0;

  border-right: 0;
}


.mzb-works-approach__intro > p {
  margin-top: 13px !important;
  padding-left: 28px;

  color: #656560;

  font-family: var(--mzb-sans);
  font-size: 10px;

  line-height: 1.75;
}


.mzb-works-approach__number {
  margin-bottom: 15px !important;

  font-family: var(--mzb-serif);
  font-size: 20px;

  letter-spacing: 0.05em;
}


.mzb-works-approach__item h3 {
  margin-bottom: 8px !important;

  font-family: var(--mzb-serif) !important;

  font-size: 15px !important;
  font-weight: 400 !important;

  line-height: 1.55 !important;
}


.mzb-works-approach__item > p:last-child {
  color: #646460;

  font-family: var(--mzb-sans);
  font-size: 9px;

  line-height: 1.75;
}


/* =========================================================
   11 RELATED
========================================================= */

.mzb-works-related {
  padding:
    0
    0;

  background: #fafaf8;
}


.mzb-works-related__grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  width: 100% !important;
}


.mzb-works-related__card {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(130px, 0.75fr);

  gap: 28px;

  align-items: center;

  min-height: 210px;

  padding:
    30px
    30px;

  border-right: 1px solid var(--mzb-line);
}


.mzb-works-related__card:first-child {
  padding-left: 0;
}


.mzb-works-related__card:last-child {
  padding-right: 0;

  border-right: 0;
}


.mzb-works-related__en {
  margin-bottom: 9px !important;

  color: #777772;

  font-family: var(--mzb-sans);
  font-size: 8px;

  letter-spacing: 0.2em;
}


.mzb-works-related__content h2 {
  font-family: var(--mzb-serif) !important;

  font-size: 24px !important;
  font-weight: 400 !important;

  line-height: 1.5 !important;
}


.mzb-works-related__content > p:not(.mzb-works-related__en) {
  margin-top: 11px !important;

  color: #686863;

  font-family: var(--mzb-sans);
  font-size: 9px;

  line-height: 1.75;
}


.mzb-works-related__content span {
  display: inline-block;

  margin-top: 14px;

  font-family: var(--mzb-sans);
  font-size: 9px;
}


.mzb-works-related__image {
  overflow: hidden;

  aspect-ratio: 1.16 / 1;
}


/* =========================================================
   12 CONTACT
========================================================= */

.mzb-works-contact {
  padding:
    36px
    0;

  background: #ededE9;
}


.mzb-works-contact__inner {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(0, 0.65fr)
    auto !important;

  gap: 48px;

  align-items: center;

  width: 100% !important;
}


.mzb-works-contact__inner > * {
  grid-column: auto !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
}


.mzb-works-contact__en {
  margin-bottom: 8px !important;

  color: #777772;

  font-family: var(--mzb-sans);
  font-size: 8px;

  letter-spacing: 0.22em;
}


.mzb-works-contact h2 {
  font-family: var(--mzb-serif) !important;

  font-size: 25px !important;
  font-weight: 400 !important;

  line-height: 1.55 !important;
}


.mzb-works-contact__text {
  color: #666661;

  font-family: var(--mzb-sans);
  font-size: 10px;

  line-height: 1.8;
}


.mzb-works-contact__button {
  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  gap: 36px;

  min-width: 250px;

  padding:
    16px
    23px;

  background: #252525 !important;
  color: #ffffff !important;

  font-family: var(--mzb-sans);
  font-size: 10px;

  letter-spacing: 0.04em;
}


/* =========================================================
   13 TABLET
========================================================= */

@media (max-width: 1024px) {

  .mzb-works-container {
    width: min(calc(100% - 48px), var(--mzb-width)) !important;
  }


  .mzb-works-hero__content {
    padding-right: 34px;
  }


  .mzb-works-featured__grid {
    gap: 38px;
  }


  .mzb-works-related__card {
    grid-template-columns:
      minmax(0, 1fr)
      120px;

    gap: 18px;
  }

}


/* =========================================================
   14 MOBILE
========================================================= */

@media (max-width: 767px) {

  .mzb-works-container {
    width: calc(100% - 32px) !important;
  }


  .mzb-pc-only {
    display: none;
  }


  /* HERO */

  .mzb-works-hero {
    padding:
      0
      0
      56px;
  }


  .mzb-works-hero__inner {
    display: flex !important;

    flex-direction: column;
  }


  .mzb-works-hero__media {
    order: 1;

    width: calc(100% + 32px) !important;

    margin-left: -16px !important;

    aspect-ratio: 1.6 / 1;
  }


  .mzb-works-hero__content {
    order: 2;

    padding:
      30px
      0
      0;
  }


  .mzb-works-heading {
    padding-left: 18px;
  }


  .mzb-works-heading__en {
    margin-bottom: 7px !important;

    font-size: 8px;
  }


  .mzb-works-hero__title {
    font-size: clamp(31px, 9vw, 40px) !important;

    line-height: 1.45 !important;
  }


  .mzb-works-hero__lead {
    margin-top: 18px !important;
    padding-left: 18px;

    font-size: 11px;

    line-height: 1.85;
  }


  .mzb-works-heading__ja {
    font-size: 25px;
  }


  /* INTRO */

  .mzb-works-intro {
    padding:
      45px
      0;
  }


  .mzb-works-intro__grid {
    grid-template-columns: 1fr !important;

    gap: 27px;
  }


  .mzb-works-intro__text {
    padding-left: 18px;

    font-size: 11px;

    line-height: 1.85;
  }


  /* FILTER */

  .mzb-works-list {
    padding:
      35px
      0
      56px;
  }


  .mzb-works-filter {
    justify-content: flex-start;

    gap: 25px;

    overflow-x: auto;

    margin-bottom: 20px !important;
    padding-bottom: 11px;

    scrollbar-width: none;
  }


  .mzb-works-filter::-webkit-scrollbar {
    display: none;
  }


  .mzb-works-filter label {
    font-size: 9px;
  }


  /* WORKS
     提案UI通りスマホも2列 */

  .mzb-works-primary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 11px;
    row-gap: 27px;
  }


  .mzb-works-card__image {
    aspect-ratio: 1.52 / 1;
  }


  .mzb-works-card__body {
    padding-top: 8px;
  }


  .mzb-works-card__category {
    font-size: 7px;
  }


  .mzb-works-card__title {
    font-size: 14px !important;

    line-height: 1.45 !important;
  }


  .mzb-works-card__meta {
    font-size: 8px;
  }


  /* FEATURED */

  .mzb-works-featured {
    padding:
      0
      0
      50px;
  }


  .mzb-works-featured .mzb-works-container {
    width: 100% !important;
  }


  .mzb-works-featured__grid {
    grid-template-columns: 1fr !important;

    gap: 0;
  }


  .mzb-works-featured__main {
    aspect-ratio: 1.55 / 1;
  }


  .mzb-works-featured__content {
    padding:
      30px
      16px
      0;
  }


  .mzb-works-featured__lead {
    margin-top: 17px !important;

    font-size: 11px;
  }


  .mzb-works-featured__info {
    margin-top: 17px !important;
  }


  .mzb-works-featured__info > div {
    grid-template-columns:
      80px
      minmax(0, 1fr);

    gap: 10px;

    font-size: 9px;
  }


  .mzb-works-text-link {
    margin-top: 15px !important;

    font-size: 9px;
  }


  .mzb-works-ba {
    margin-top: 20px !important;

    grid-template-columns:
      minmax(0, 1fr)
      22px
      minmax(0, 1fr);
  }


  /* MORE WORKS */

  .mzb-works-more {
    padding:
      37px
      0
      43px;
  }


  .mzb-works-more__head {
    align-items: end;

    margin-bottom: 16px;
  }


  .mzb-works-more__title {
    font-size: 22px !important;
  }


  .mzb-works-more__all {
    font-size: 7px;
  }


  .mzb-works-more__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 12px;
  }


  .mzb-works-mini-card:nth-child(3) {
    grid-column: 1 / -1 !important;

    width: calc(50% - 6px) !important;
  }


  .mzb-works-mini-card__image {
    aspect-ratio: 1.52 / 1;
  }


  .mzb-works-mini-card__title {
    font-size: 13px !important;
  }


  /* APPROACH */

  .mzb-works-approach {
    padding:
      34px
      0;
  }


  .mzb-works-approach__grid {
    grid-template-columns: 1fr !important;
  }


  .mzb-works-approach__intro,
  .mzb-works-approach__item,
  .mzb-works-approach__item:last-child {
    padding:
      22px
      0;

    border-right: 0;
    border-bottom: 1px solid var(--mzb-line);
  }


  .mzb-works-approach__item:last-child {
    border-bottom: 0;
  }


  .mzb-works-approach__intro > p {
    padding-left: 18px;
  }


  .mzb-works-approach__number {
    margin-bottom: 8px !important;

    font-size: 17px;
  }


  .mzb-works-approach__item h3 {
    font-size: 15px !important;
  }


  /* RELATED
     提案UIに合わせてスマホも2列 */

  .mzb-works-related__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  .mzb-works-related__card,
  .mzb-works-related__card:first-child,
  .mzb-works-related__card:last-child {
    grid-template-columns: 1fr;

    gap: 16px;

    min-height: 0;

    padding:
      28px
      14px;

    border-right: 1px solid var(--mzb-line);
  }


  .mzb-works-related__card:first-child {
    padding-left: 0;
  }


  .mzb-works-related__card:last-child {
    padding-right: 0;

    border-right: 0;
  }


  .mzb-works-related__content h2 {
    font-size: 17px !important;
  }


  .mzb-works-related__content > p:not(.mzb-works-related__en) {
    font-size: 8px;
  }


  .mzb-works-related__image {
    aspect-ratio: 1.4 / 1;
  }


  /* CONTACT */

  .mzb-works-contact {
    padding:
      38px
      0;
  }


  .mzb-works-contact__inner {
    grid-template-columns: 1fr !important;

    gap: 19px;
  }


  .mzb-works-contact h2 {
    font-size: 22px !important;
  }


  .mzb-works-contact__button {
    width: 100% !important;
    min-width: 0;

    padding:
      15px
      20px;

    font-size: 9px;
  }

}


/* =========================================================
   15 VERY SMALL
========================================================= */

@media (max-width: 390px) {

  .mzb-works-container {
    width: calc(100% - 26px) !important;
  }


  .mzb-works-hero__media {
    width: calc(100% + 26px) !important;

    margin-left: -13px !important;
  }


  .mzb-works-primary-grid {
    gap:
      24px
      9px;
  }


  .mzb-works-card__title {
    font-size: 13px !important;
  }

}