/*
 * 施工事例一覧 v75：支給スマートフォンデザイン再現レイヤー
 * 基準画像 853 × 1844。写真・波形・小さな装飾のみ画像を使用し、
 * 見出し・説明・絞り込み・下部コピーは選択可能なHTMLテキストで描画する。
 */

.works-hero__mobile-photo-wave,
.works-hero__mobile-lower-wave,
.works-hero__mobile-statement {
  display: none;
}

@media (max-width: 900px) {
  html,
  body.page-works {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    background: #fff;
  }

  body.page-works main,
  body.page-works .works--visual-hero {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  body.page-works .works-hero {
    position: relative !important;
    width: 100% !important;
    height: 216.178195vw !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body.page-works .works-hero::after {
    content: none !important;
    display: none !important;
  }

  body.page-works .works-hero__mobile-photo-wave {
    position: absolute;
    top: 15.240328vw;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 79.132474vw;
    object-fit: fill;
    pointer-events: none;
  }

  body.page-works .works-hero__stage {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
  }

  body.page-works .works-hero__stage > img:not(.works-hero__badge) {
    display: none !important;
  }

  body.page-works .works-hero__copy {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  body.page-works .works-hero__badge {
    position: absolute !important;
    top: 94.255569vw !important;
    left: 50% !important;
    display: block !important;
    width: 30.480657vw !important;
    height: 12.309496vw !important;
    margin: 0 !important;
    object-fit: fill !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }

  body.page-works .works-hero__title {
    position: absolute !important;
    top: 110.550996vw !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    color: #233746 !important;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
    font-size: 7.385697vw !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    letter-spacing: .375em !important;
    white-space: nowrap !important;
    transform: none !important;
  }

  body.page-works .works-hero__divider {
    position: absolute !important;
    top: 121.336460vw !important;
    left: 50% !important;
    display: block !important;
    width: 42.203986vw !important;
    height: 7.033998vw !important;
    margin: 0 !important;
    background: url("../works-reference/works-mobile-divider-v75.png") center / 100% 100% no-repeat !important;
    transform: translateX(-50%) !important;
  }

  body.page-works .works-hero__divider > * {
    display: none !important;
  }

  body.page-works .works-hero__lead {
    position: absolute !important;
    top: 131.184056vw !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    color: #334b5f !important;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
    font-size: 2.461899vw !important;
    font-weight: 400 !important;
    line-height: 2.15 !important;
    letter-spacing: .20em !important;
    transform: none !important;
  }

  body.page-works .works-hero__tabs {
    position: absolute !important;
    top: 148.417350vw !important;
    left: 4.454865vw !important;
    display: grid !important;
    grid-template-columns: 1.12fr 1fr 1.42fr 1.22fr 1.75fr !important;
    gap: 0.703400vw !important;
    width: 90.973036vw !important;
    height: 9.144197vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
  }

  body.page-works .works-hero__tabs a,
  body.page-works .works-hero__tabs a:last-child {
    grid-column: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 9.144197vw !important;
    margin: 0 !important;
    padding: 0 .7vw !important;
    border: 0.117233vw solid #ebe8e1 !important;
    border-radius: 999px !important;
    color: #42566a !important;
    background: rgba(255,255,255,.98) !important;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
    font-size: 2.227433vw !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    box-shadow: 0 0.45vw 1.1vw rgba(44,64,79,.035) !important;
  }

  body.page-works .works-hero__tabs .is-active {
    border-color: #39779d !important;
    color: #fff !important;
    background: linear-gradient(135deg, #39779d, #39779d) !important;
  }

  body.page-works .works-reference-hotspots {
    display: none !important;
  }

  body.page-works .drawer.is-open {
    background-color: #39779d !important;
    background-image: none !important;
  }

  body.page-works .works-hero__mobile-lower-wave {
    position: absolute;
    top: 161.195779vw;
    left: 0;
    z-index: 5;
    display: block;
    width: 100%;
    height: 21.688159vw;
    object-fit: fill;
    pointer-events: none;
  }

  body.page-works .works-hero__mobile-statement {
    position: absolute;
    top: 182.883939vw;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: block;
    padding: 2.813599vw 10.433763vw 0;
    color: #223746;
    background: #f3f6f9;
    text-align: left;
  }

  body.page-works .works-hero__mobile-statement h2 {
    margin: 0;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 4.454865vw;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: .11em;
    white-space: nowrap;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  body.page-works .works-hero__mobile-statement p {
    margin: 4.923798vw 0 0;
    font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: 2.579132vw;
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: .11em;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  body.page-works .works-hero__title,
  body.page-works .works-hero__lead,
  body.page-works .works-hero__tabs {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }

  body.page-works .works__content {
    position: relative;
    z-index: 6;
    width: 100% !important;
    margin: 0 !important;
    padding: 48px 20px 80px !important;
    background: #f0f5f8 !important;
  }

  body.page-works .sim-fab {
    display: none !important;
  }
}