/*
 * Hanaseru Eigo LP Layout Fix v1.6.1
 * 1) 「話せる英語の本質とは」帯をスマホでワイド化
 * 2) 講師紹介本文をワイド化
 * 3) Zoom案内2×2表の右端罫線を保証
 */

:root {
  --hel-fix-side-gap: 24px;
  --hel-fix-line: rgba(255, 255, 255, 0.28);
}

/* 全要素の幅計算を安定させる */
.hanaseru-eigo-lp *,
.hanaseru-eigo-lp *::before,
.hanaseru-eigo-lp *::after,
.hel-fix-scope *,
.hel-fix-scope *::before,
.hel-fix-scope *::after {
  box-sizing: border-box;
}

/* JSで特定した「話せる英語の本質とは」の濃紺帯 */
.hel-fix-wide-band {
  position: relative !important;
  max-width: none !important;
  width: calc(
    100% +
    var(--hel-fix-bleed-left, 0px) +
    var(--hel-fix-bleed-right, 0px)
  ) !important;
  margin-left: calc(-1 * var(--hel-fix-bleed-left, 0px)) !important;
  margin-right: calc(-1 * var(--hel-fix-bleed-right, 0px)) !important;
  padding-left: max(28px, var(--hel-fix-inner-left, 28px)) !important;
  padding-right: max(28px, var(--hel-fix-inner-right, 28px)) !important;
  overflow: visible !important;
}

/* 講師紹介の本文・メッセージをスマホでワイド化 */
.hel-fix-profile-wide {
  width: calc(100vw - (var(--hel-fix-side-gap) * 2)) !important;
  max-width: calc(100vw - (var(--hel-fix-side-gap) * 2)) !important;
  margin-left: calc(
    50% - 50vw + var(--hel-fix-side-gap)
  ) !important;
  margin-right: var(--hel-fix-side-gap) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hel-fix-profile-wide > *,
.hel-fix-profile-wide .profile-message,
.hel-fix-profile-wide .instructor-message,
.hel-fix-profile-wide blockquote {
  max-width: none !important;
  width: 100% !important;
}

/* Zoom案内の2×2表：外周罫線を独立描画して右端消失を防ぐ */
.hel-fix-zoom-grid {
  position: relative !important;
  width: calc(100% - 1px) !important;
  max-width: calc(100% - 1px) !important;
  margin-right: 1px !important;
  border: 1px solid var(--hel-fix-line) !important;
  overflow: visible !important;
  background-clip: padding-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.hel-fix-zoom-grid::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  width: 1px;
  background: var(--hel-fix-line);
  pointer-events: none;
  z-index: 4;
}

.hel-fix-zoom-grid > * {
  min-width: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--hel-fix-line) !important;
  border-bottom: 1px solid var(--hel-fix-line) !important;
}

.hel-fix-zoom-grid > *:nth-child(2n) {
  border-right: 0 !important;
}

.hel-fix-zoom-grid > *:nth-last-child(-n + 2) {
  border-bottom: 0 !important;
}

@media (min-width: 601px) {
  .hel-fix-profile-wide {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hel-fix-wide-band {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 380px) {
  :root {
    --hel-fix-side-gap: 20px;
  }

  .hel-fix-wide-band {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}