/* =========================================================
   DIVE HOME INTRO R1.2
   HERO + 3 ENTRANCES
   ========================================================= */

.dhi-r12 {
  --dhi-night: #06101b;
  --dhi-night-soft: #0b1725;
  --dhi-ivory: #f1eee6;
  --dhi-ink: #10171f;
  --dhi-muted: #747872;
  --dhi-line: rgba(16, 23, 31, .14);
  --dhi-safety: #d96f3d;

  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
}

.dhi-r12 *,
.dhi-r12 *::before,
.dhi-r12 *::after {
  box-sizing: border-box;
}

/* ---------------- HERO ---------------- */

.dhi-r12__hero {
  position: relative;
  min-height: min(860px, 84vh);
  background: var(--dhi-night);
  color: var(--dhi-ivory);
  overflow: hidden;
}

.dhi-r12__hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    url("https://dive-into-a-new.space/wp-content/uploads/2026/06/HOMEページメインビジュアル.jpg");
  background-size: cover;
  background-position: center 46%;
  transform: scale(1.015);
}

.dhi-r12__hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 10, 20, .76) 0%, rgba(5, 14, 30, .48) 44%, rgba(5, 15, 35, .13) 76%, rgba(4, 10, 20, .25) 100%),
    linear-gradient(180deg, rgba(1, 5, 14, .12) 0%, rgba(1, 5, 14, .04) 55%, rgba(1, 5, 14, .58) 100%);
}

.dhi-r12__hero-inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 88px), 1600px);
  min-height: min(860px, 84vh);
  margin: 0 auto;
  padding: 42px 0 36px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.dhi-r12__hero-top,
.dhi-r12__hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.dhi-r12__brand,
.dhi-r12__since,
.dhi-r12__kicker,
.dhi-r12__hero-bottom p,
.dhi-r12__scroll {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.dhi-r12__brand {
  color: rgba(241, 238, 230, .95);
  font-size: 10px;
}

.dhi-r12__since {
  color: rgba(241, 238, 230, .50);
  font-size: 8px;
}

.dhi-r12__hero-copy {
  align-self: center;
  width: min(1180px, 84vw);
  padding: 7vh 0 3vh;
}

.dhi-r12__kicker {
  margin-bottom: 24px;
  color: var(--dhi-safety);
  font-size: 9px;
}

.dhi-r12__title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--dhi-ivory) !important;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
  font-size: clamp(54px, 4.8vw, 88px) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  letter-spacing: -.045em;
  text-shadow: 0 2px 18px rgba(0,0,0,.16);
}

.dhi-r12__title::before,
.dhi-r12__title::after {
  display: none !important;
}

.dhi-r12__lead {
  margin: 34px 0 0;
  color: rgba(241, 238, 230, .72);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.9;
  letter-spacing: .05em;
}

.dhi-r12__hero-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(241, 238, 230, .16);
}

.dhi-r12__hero-bottom p {
  color: rgba(241, 238, 230, .44);
  font-size: 8px;
}

.dhi-r12__scroll {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: rgba(241, 238, 230, .82) !important;
  text-decoration: none !important;
  font-size: 8px;
}

.dhi-r12__scroll span {
  color: var(--dhi-safety);
  font-size: 13px;
  transition: transform .22s ease;
}

.dhi-r12__scroll:hover span {
  transform: translateY(4px);
}

/* ---------------- ENTRANCES ---------------- */

.dhi-r12__entrances {
  background: var(--dhi-ivory);
  color: var(--dhi-ink);
}

.dhi-r12__entrances-inner {
  width: min(calc(100% - 88px), 1600px);
  margin: 0 auto;
  padding: clamp(78px, 8vw, 124px) 0 clamp(88px, 9vw, 140px);
}

.dhi-r12__entrances-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: clamp(44px, 5vw, 72px);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--dhi-line);
}

.dhi-r12__section-code {
  margin: 0;
  color: var(--dhi-safety);
  font: 500 9px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .21em;
}

.dhi-r12__section-copy {
  margin: 0;
  justify-self: end;
  width: min(100%, 520px);
  color: var(--dhi-ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.75;
}

.dhi-r12__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 46px);
}

.dhi-r12-card {
  display: block;
  color: inherit !important;
  text-decoration: none !important;
}

.dhi-r12-card__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #d9d6ce;
}

.dhi-r12-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(4, 10, 18, .32));
  pointer-events: none;
}

.dhi-r12-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.dhi-r12-card:nth-child(1) .dhi-r12-card__image img {
  object-position: center center;
}

.dhi-r12-card:nth-child(2) .dhi-r12-card__image img {
  object-position: center center;
}

.dhi-r12-card:nth-child(3) .dhi-r12-card__image img {
  object-position: center center;
}

.dhi-r12-card:hover .dhi-r12-card__image img {
  transform: scale(1.035);
  filter: saturate(.92);
}

.dhi-r12-card__number {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 12px;
  color: rgba(241, 238, 230, .93);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 3vw, 50px);
  line-height: 1;
  letter-spacing: -.04em;
}

.dhi-r12-card__body {
  padding: 24px 2px 0;
}

.dhi-r12-card__code {
  margin: 0 0 14px;
  color: var(--dhi-safety);
  font: 500 8px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .21em;
}

.dhi-r12-card__title {
  margin: 0;
  color: var(--dhi-ink);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: clamp(30px, 2.6vw, 44px);
  line-height: 1.35;
  letter-spacing: -.025em;
}

.dhi-r12-card__text {
  margin: 20px 0 0;
  min-height: 5.9em;
  color: var(--dhi-muted);
  font-size: clamp(13px, .95vw, 15px);
  line-height: 1.95;
}

.dhi-r12-card__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding-top: 15px;
  border-top: 1px solid var(--dhi-line);
  color: rgba(16, 23, 31, .62);
  font: 500 8px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .19em;
}

.dhi-r12-card__link span:last-child {
  color: var(--dhi-safety);
  font-size: 15px;
  transition: transform .22s ease;
}

.dhi-r12-card:hover .dhi-r12-card__link span:last-child {
  transform: translate(4px, -4px);
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width: 1000px) {
  .dhi-r12__hero {
    min-height: 720px;
  }

  .dhi-r12__hero-inner {
    width: min(calc(100% - 54px), 850px);
    min-height: 720px;
  }

  .dhi-r12__hero-copy {
    width: min(760px, 88vw);
  }

  .dhi-r12__entrances-inner {
    width: min(calc(100% - 54px), 850px);
  }

  .dhi-r12__grid {
    gap: 22px;
  }

  .dhi-r12-card__text {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .dhi-r12__hero {
    min-height: 670px;
  }

  .dhi-r12__hero-bg {
    background-position: 61% center;
  }

  .dhi-r12__hero-inner {
    width: calc(100% - 44px);
    min-height: 670px;
    padding: 28px 0 26px;
  }

  .dhi-r12__hero-top {
    align-items: flex-start;
  }

  .dhi-r12__since {
    max-width: 150px;
    text-align: right;
    line-height: 1.7;
  }

  .dhi-r12__hero-copy {
    width: 100%;
    padding-top: 10vh;
  }

  .dhi-r12__title {
    font-size: clamp(46px, 13vw, 72px) !important;
    line-height: 1.28 !important;
  }

  .dhi-r12__lead {
    margin-top: 23px;
    font-size: 14px;
  }

  .dhi-r12__hero-bottom p {
    max-width: 150px;
    line-height: 1.6;
  }

  .dhi-r12__entrances-inner {
    width: calc(100% - 44px);
    padding: 68px 0 84px;
  }

  .dhi-r12__entrances-head {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 42px;
  }

  .dhi-r12__section-copy {
    justify-self: start;
    font-size: 25px;
  }

  .dhi-r12__grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .dhi-r12-card__image {
    aspect-ratio: 16 / 10;
  }

  .dhi-r12-card__title {
    font-size: 34px;
  }

  .dhi-r12-card__text {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .dhi-r12__hero {
    min-height: 630px;
  }

  .dhi-r12__hero-inner {
    min-height: 630px;
    width: calc(100% - 34px);
  }

  .dhi-r12__brand {
    font-size: 8px;
  }

  .dhi-r12__since {
    font-size: 6.5px;
  }

  .dhi-r12__hero-copy {
    padding-top: 7vh;
  }

  .dhi-r12__title {
    font-size: clamp(43px, 12vw, 60px) !important;
  }

  .dhi-r12__entrances-inner {
    width: calc(100% - 34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dhi-r12 *,
  .dhi-r12 *::before,
  .dhi-r12 *::after {
    transition: none !important;
  }
}


/* =========================================================
   R1.2.1 / FRONT PAGE CLEANUP
   HOMEを通常の「固定ページ」ではなく、ブランドポータルとして扱う。
   dhi-r12-active が付くページだけに限定。
   ========================================================= */

body.dhi-r12-active #header-container,
body.dhi-r12-active .header-container {
  display: none !important;
}

/* HOMEには記事タイトル・日付・SNS・著者・目次を出さない */
body.dhi-r12-active .entry-title,
body.dhi-r12-active .date-tags,
body.dhi-r12-active .post-date,
body.dhi-r12-active .post-update,
body.dhi-r12-active .sns-share,
body.dhi-r12-active .sns-follow,
body.dhi-r12-active .author-info,
body.dhi-r12-active .breadcrumb,
body.dhi-r12-active .toc,
body.dhi-r12-active .toc-content {
  display: none !important;
}

/* Cocoon本文コンテナの余白を、ポータルの全幅設計と喧嘩させない */
body.dhi-r12-active #content,
body.dhi-r12-active #content-in,
body.dhi-r12-active .content-in {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.dhi-r12-active #main,
body.dhi-r12-active main.main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.dhi-r12-active .entry-content {
  margin-top: 0 !important;
}

/* ショートコード同士の間にWordPress/Cocoonの空段落が残っても潰す */
body.dhi-r12-active .entry-content > p:empty,
body.dhi-r12-active .entry-content > .wp-block-spacer:empty {
  display: none !important;
}

/* HEROを一段落で読ませる */
@media (min-width: 761px) {
  .dhi-r12__title br {
    display: block;
  }

  .dhi-r12__hero-copy {
    width: min(1180px, 84vw);
  }
}


/* =========================================================
   R1.2.2 / PORTAL ENDING + COCOON CLEANUP
   [dive_home_portal] のHOMEだけに限定。
   旧HOMEの白い記事枠とCocoonフッターを切り離し、
   新ポータルを濃紺で最後まで通す。
   ========================================================= */

/* ページの地色を新HOMEの濃紺にする。全幅セクション自身の背景はそのまま。 */
body.dhi-r12-active {
  background: #06101b !important;
}

/*
 * Cocoonの固定ページ用白背景・余白を透明化。
 * ショートコードが終わった後に残る「白い箱」を作らせない。
 */
body.dhi-r12-active #content,
body.dhi-r12-active #content-in,
body.dhi-r12-active .content,
body.dhi-r12-active .content-in,
body.dhi-r12-active #main,
body.dhi-r12-active main.main,
body.dhi-r12-active article.article,
body.dhi-r12-active .entry-content {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.dhi-r12-active #content,
body.dhi-r12-active #content-in,
body.dhi-r12-active .content,
body.dhi-r12-active .content-in {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.dhi-r12-active #main,
body.dhi-r12-active main.main,
body.dhi-r12-active article.article,
body.dhi-r12-active .entry-content {
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 固定ページ本文の後ろにCocoonが足す領域はHOMEポータルでは不要。 */
body.dhi-r12-active .entry-footer,
body.dhi-r12-active .post-navi,
body.dhi-r12-active .pager-post-navi,
body.dhi-r12-active .related-entry-heading,
body.dhi-r12-active .related-list,
body.dhi-r12-active .related-entry-card-wrap,
body.dhi-r12-active .comment-area,
body.dhi-r12-active .under-entry-content,
body.dhi-r12-active .article-footer,
body.dhi-r12-active .post-meta,
body.dhi-r12-active .footer-meta {
  display: none !important;
}

/*
 * Cocoonの通常フッターはHOMEだけ非表示。
 * 他の記事・固定ページでは従来フッターをそのまま使う。
 */
body.dhi-r12-active #footer-container,
body.dhi-r12-active #footer,
body.dhi-r12-active .footer-container,
body.dhi-r12-active footer.footer {
  display: none !important;
}

/* ---------------- HOME PORTAL FOOTER ---------------- */

.dhi-r12__portal-footer {
  --dhi-footer-night: #06101b;
  --dhi-footer-ivory: #f1eee6;
  --dhi-footer-line: rgba(241, 238, 230, .12);
  --dhi-footer-muted: rgba(241, 238, 230, .42);
  --dhi-footer-orange: #d96f3d;

  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--dhi-footer-night);
  color: var(--dhi-footer-ivory);
  border-top: 1px solid var(--dhi-footer-line);
}

.dhi-r12__portal-footer *,
.dhi-r12__portal-footer *::before,
.dhi-r12__portal-footer *::after {
  box-sizing: border-box;
}

.dhi-r12__portal-footer-inner {
  width: min(calc(100% - 88px), 1600px);
  margin: 0 auto;
  padding: 46px 0 38px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 42px;
}

.dhi-r12__portal-footer-brand {
  color: rgba(241, 238, 230, .94) !important;
  text-decoration: none !important;
  font: 500 15px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.dhi-r12__portal-footer-brand::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-bottom: 17px;
  background: var(--dhi-footer-orange);
}

.dhi-r12__portal-footer-right {
  min-width: min(420px, 46vw);
}

.dhi-r12__portal-footer-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dhi-footer-line);
}

.dhi-r12__portal-footer-nav a {
  position: relative;
  padding: 0 20px;
  color: rgba(241, 238, 230, .68) !important;
  text-decoration: none !important;
  font: 500 8px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .18em;
  transition: color .2s ease;
}

.dhi-r12__portal-footer-nav a:first-child {
  padding-left: 0;
}

.dhi-r12__portal-footer-nav a:last-child {
  padding-right: 0;
}

.dhi-r12__portal-footer-nav a + a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 15px;
  transform: translateY(-50%);
  background: rgba(241, 238, 230, .16);
}

.dhi-r12__portal-footer-nav a:hover,
.dhi-r12__portal-footer-nav a:focus {
  color: var(--dhi-footer-ivory) !important;
}

.dhi-r12__portal-footer-copy {
  margin: 14px 0 0;
  color: var(--dhi-footer-muted);
  text-align: right;
  font: 400 8px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .09em;
}

@media (max-width: 760px) {
  .dhi-r12__portal-footer-inner {
    width: calc(100% - 44px);
    padding: 38px 0 32px;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 30px;
  }

  .dhi-r12__portal-footer-right {
    min-width: 0;
    width: 100%;
  }

  .dhi-r12__portal-footer-nav {
    justify-content: flex-start;
  }

  .dhi-r12__portal-footer-copy {
    text-align: left;
  }
}

@media (max-width: 420px) {
  .dhi-r12__portal-footer-inner {
    width: calc(100% - 34px);
  }

  .dhi-r12__portal-footer-brand {
    font-size: 12px;
  }
}


/* =========================================================
   R1.2.3 / COMPACT PORTAL FOOTER
   フッターを「大きな終章」ではなく、静かな署名へ。
   ========================================================= */

.dhi-r12__portal-footer-inner {
  padding-top: 30px;
  padding-bottom: 26px;
  align-items: center;
}

.dhi-r12__portal-footer-brand::before {
  margin-bottom: 12px;
}

.dhi-r12__portal-footer-right {
  min-width: min(390px, 44vw);
}

.dhi-r12__portal-footer-nav {
  padding-bottom: 13px;
}

.dhi-r12__portal-footer-copy {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .dhi-r12__portal-footer-inner {
    padding-top: 28px;
    padding-bottom: 26px;
    gap: 24px;
  }
}


/* =========================================================
   R1.2.5 / TRUE FULL-WIDTH WITHOUT 100vw
   100%ズーム時の横スクロールを根本解消。
   ========================================================= */

/*
 * HOMEではCocoonの固定ページコンテナそのものを100%幅へ。
 * これにより、子要素で100vw + -50vwを使う必要がなくなる。
 */
body.dhi-r12-active #container,
body.dhi-r12-active .container,
body.dhi-r12-active #content,
body.dhi-r12-active #content-in,
body.dhi-r12-active .content,
body.dhi-r12-active .content-in,
body.dhi-r12-active #main,
body.dhi-r12-active main.main,
body.dhi-r12-active article.article,
body.dhi-r12-active .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: clip !important;
}

/* 旧full-bleed hackを無効化 */
body.dhi-r12-active .dhi-r12,
body.dhi-r12-active .dhi-r12__portal-footer {
  position: relative !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: clip !important;
}

/* ブラウザ全体にも横方向の余剰幅を作らせない */
html:has(body.dhi-r12-active),
body.dhi-r12-active {
  max-width: 100%;
  overflow-x: clip !important;
}

/* grid/flex子が内容幅を理由に親を押し広げないようにする */
body.dhi-r12-active .dhi-r12 *,
body.dhi-r12-active .dhi-r12__portal-footer *,
body.dhi-r12-active .dhi-r12__hero-inner,
body.dhi-r12-active .dhi-r12__entrances-inner,
body.dhi-r12-active .dhi-r12__grid,
body.dhi-r12-active .dhi-r12-card,
body.dhi-r12-active .dhi-r12-card__body,
body.dhi-r12-active .dhi-r12__portal-footer-inner,
body.dhi-r12-active .dhi-r12__portal-footer-right {
  min-width: 0;
}

/* 長い日本語や英字でもviewport外へ押し出さない */
body.dhi-r12-active .dhi-r12 p,
body.dhi-r12-active .dhi-r12 h1,
body.dhi-r12-active .dhi-r12 a,
body.dhi-r12-active .dhi-r12__portal-footer a,
body.dhi-r12-active .dhi-r12__portal-footer p {
  overflow-wrap: anywhere;
}

/* 背景画像のscaleはhero内部でのみクリップ */
body.dhi-r12-active .dhi-r12__hero {
  max-width: 100%;
  overflow: hidden !important;
}


/* =========================================================
   R1.2.6 / MOBILE FINAL POLISH
   HERO改行とCocoonモバイルメニューを整理。
   ========================================================= */

.dhi-r12__title-line {
  display: block;
}

.dhi-r12__title-keep {
  white-space: nowrap;
}

/*
 * Cocoon標準の白いモバイル下部メニューは、
 * HOMEポータルの世界観と操作導線が重複するためHOMEのみ非表示。
 */
@media (max-width: 760px) {
  body.dhi-r12-active .mobile-menu-buttons,
  body.dhi-r12-active .mobile-footer-menu-buttons,
  body.dhi-r12-active #mobile-menu-buttons,
  body.dhi-r12-active #navi-footer,
  body.dhi-r12-active .navi-footer-in,
  body.dhi-r12-active .footer-mobile-buttons,
  body.dhi-r12-active .mobile-button-fmb,
  body.dhi-r12-active .menu-mobile,
  body.dhi-r12-active .mobile-menu-button {
    display: none !important;
  }

  .dhi-r12__title {
    font-size: clamp(40px, 10.8vw, 56px) !important;
    line-height: 1.34 !important;
    letter-spacing: -.04em;
  }

  .dhi-r12__title-line + .dhi-r12__title-line {
    margin-top: .10em;
  }

  .dhi-r12__hero-copy {
    padding-top: 8vh;
  }
}

@media (max-width: 420px) {
  .dhi-r12__title {
    font-size: clamp(37px, 10.3vw, 43px) !important;
    line-height: 1.38 !important;
  }

  .dhi-r12__hero-copy {
    padding-top: 6vh;
  }
}