:root {
  --dap-night: #06101b;
  --dap-night-2: #091827;
  --dap-ivory: #f1eee6;
  --dap-muted: rgba(241, 238, 230, .54);
  --dap-dim: rgba(241, 238, 230, .26);
  --dap-line: rgba(195, 207, 221, .13);
  --dap-orange: #d96f3d;
  --dap-paper: #ebe7dc;
  --dap-ink: #10151d;
}

/* Cocoon cleanup, ABOUT page only */
body.dive-about-active {
  background: var(--dap-night) !important;
}

body.dive-about-active #header-container,
body.dive-about-active #navi,
body.dive-about-active .breadcrumb,
body.dive-about-active .entry-title,
body.dive-about-active .date-tags,
body.dive-about-active .sns-share,
body.dive-about-active .sns-follow,
body.dive-about-active .entry-footer,
body.dive-about-active .post-navi,
body.dive-about-active .pager-post-navi,
body.dive-about-active .related-entry-heading,
body.dive-about-active .related-list,
body.dive-about-active .comment-area,
body.dive-about-active .under-entry-content,
body.dive-about-active .article-footer,
body.dive-about-active #footer-container,
body.dive-about-active #footer,
body.dive-about-active footer.footer {
  display: none !important;
}

body.dive-about-active #content,
body.dive-about-active #content-in,
body.dive-about-active .content,
body.dive-about-active .content-in,
body.dive-about-active #main,
body.dive-about-active main.main,
body.dive-about-active article.article,
body.dive-about-active .entry-content {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dap-about,
.dap-about * {
  box-sizing: border-box;
}

.dap-about {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: clip;
  background: var(--dap-night);
  color: var(--dap-ivory);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dap-about a {
  color: inherit;
}

/* HERO */
.dap-hero {
  min-height: 92vh;
  padding: 54px max(42px, calc((100vw - 1740px) / 2)) 52px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(circle at 78% 25%, rgba(29, 70, 123, .28), transparent 32%),
    linear-gradient(145deg, #020822 0%, #061128 48%, #12253a 100%);
  border-bottom: 1px solid var(--dap-line);
}

.dap-hero__topline,
.dap-hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: rgba(241, 238, 230, .60);
  font: 600 9px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .24em;
}

.dap-hero__topline a,
.dap-hero__foot a {
  text-decoration: none;
}

.dap-hero__body {
  align-self: center;
  max-width: 1120px;
  padding: 68px 0 50px;
}

.dap-eyebrow {
  margin: 0 0 24px;
  color: var(--dap-orange);
  font: 600 9px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .24em;
}

.dap-hero__title {
  margin: 0;
  max-width: 1120px;
  color: var(--dap-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
  font-size: clamp(54px, 6.4vw, 118px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .015em;
}

.dap-hero__lead {
  margin: 46px 0 0;
  color: rgba(241, 238, 230, .68);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(16px, 1.25vw, 23px);
  line-height: 2.05;
}

.dap-hero__foot {
  padding-top: 20px;
  border-top: 1px solid rgba(241, 238, 230, .15);
}

.dap-hero__foot a {
  color: var(--dap-ivory);
}

/* MAIN */
.dap-main {
  width: min(calc(100% - 84px), 1500px);
  margin: 0 auto;
}

.dap-main > section {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  gap: 70px;
  padding: 110px 0;
  border-bottom: 1px solid var(--dap-line);
}

.dap-section-index {
  padding-top: 7px;
}

.dap-section-index span {
  display: block;
  margin-bottom: 12px;
  color: var(--dap-orange);
  font: 600 8px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
}

.dap-section-index p {
  margin: 0;
  color: rgba(241, 238, 230, .38);
  font: 600 8px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .20em;
}

/* INTRO */
.dap-intro__content {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .7fr);
  gap: 90px;
  align-items: start;
}

.dap-intro__big,
.dap-philosophy__statement {
  margin: 0;
  color: var(--dap-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(32px, 3vw, 56px);
  line-height: 1.65;
  letter-spacing: .02em;
}

.dap-intro__copy,
.dap-philosophy__copy,
.dap-field__copy {
  color: rgba(241, 238, 230, .62);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 16px;
  line-height: 2.2;
}

.dap-intro__copy p,
.dap-philosophy__copy p,
.dap-field__copy p {
  margin: 0 0 28px;
}

/* PHILOSOPHY */
.dap-philosophy__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .72fr);
  gap: 90px;
}

/* FIELD */
.dap-field {
  background:
    linear-gradient(
      90deg,
      rgba(217,111,61,.028),
      rgba(217,111,61,0) 42%
    );
}

.dap-field__stats {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  max-width: 760px;
  margin-bottom: 60px;
  border-top: 1px solid var(--dap-line);
  border-bottom: 1px solid var(--dap-line);
}

.dap-field__stats div {
  min-height: 130px;
  padding: 30px 28px;
  border-right: 1px solid var(--dap-line);
}

.dap-field__stats div:last-child {
  border-right: 0;
}

.dap-field__stats strong {
  display: block;
  margin-bottom: 12px;
  color: var(--dap-ivory);
  font: 400 clamp(31px, 3vw, 50px)/1 "Georgia", serif;
}

.dap-field__stats span {
  color: rgba(241, 238, 230, .34);
  font: 600 8px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .18em;
}

.dap-field__copy,
.dap-linkline {
  grid-column: 2;
}

.dap-linkline {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-top: 35px;
  padding: 22px 0;
  border-top: 1px solid rgba(217,111,61,.55);
  border-bottom: 1px solid var(--dap-line);
  text-decoration: none !important;
}

.dap-linkline span {
  color: var(--dap-orange);
  font: 600 8px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .19em;
}

.dap-linkline strong {
  color: var(--dap-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 17px;
  font-weight: 400;
}

/* WHAT I WRITE */
.dap-write__intro {
  grid-column: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 45px;
  margin-bottom: 46px;
}

.dap-write__intro p,
.dap-write__intro strong {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 400;
}

.dap-write__intro p {
  color: rgba(241, 238, 230, .48);
  font-size: 15px;
}

.dap-write__intro strong {
  max-width: 600px;
  color: var(--dap-ivory);
  font-size: clamp(26px, 2.2vw, 42px);
  line-height: 1.6;
}

.dap-write__cards {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--dap-line);
  border-bottom: 1px solid var(--dap-line);
}

.dap-write__cards article {
  min-height: 325px;
  padding: 34px 30px;
  border-right: 1px solid var(--dap-line);
}

.dap-write__cards article:last-child {
  border-right: 0;
}

.dap-write__cards span {
  color: var(--dap-orange);
  font: 600 7px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
}

.dap-write__cards h2 {
  margin: 72px 0 24px;
  color: var(--dap-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 29px;
  font-weight: 400;
}

.dap-write__cards p {
  margin: 0;
  color: rgba(241, 238, 230, .49);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 14px;
  line-height: 2.0;
}

/* RULES */
.dap-rules__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--dap-line);
}

.dap-rules__list > div {
  display: grid;
  grid-template-columns: 40px 180px 1fr;
  gap: 20px;
  padding: 28px 18px 28px 0;
  border-bottom: 1px solid var(--dap-line);
}

.dap-rules__list > div:nth-child(odd) {
  padding-right: 40px;
  border-right: 1px solid var(--dap-line);
}

.dap-rules__list > div:nth-child(even) {
  padding-left: 40px;
}

.dap-rules__list span {
  color: var(--dap-orange);
  font: 600 7px/1.6 Arial, Helvetica, sans-serif;
}

.dap-rules__list strong {
  color: rgba(241, 238, 230, .76);
  font: 600 8px/1.6 Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
}

.dap-rules__list p {
  margin: 0;
  color: rgba(241, 238, 230, .48);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 14px;
  line-height: 1.9;
}

/* CLOSE */
.dap-main > .dap-close {
  display: block;
  padding-top: 130px;
  padding-bottom: 130px;
  border-bottom: 0;
}

.dap-close > p {
  margin: 0 0 24px;
  color: var(--dap-orange);
  font: 600 8px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .20em;
}

.dap-close h2 {
  margin: 0;
  max-width: 900px;
  color: var(--dap-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(40px, 4.5vw, 80px);
  font-weight: 400;
  line-height: 1.45;
}

.dap-close__actions {
  display: flex;
  gap: 32px;
  margin-top: 58px;
}

.dap-close__actions a {
  min-width: 210px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(217,111,61,.68);
  text-decoration: none !important;
  color: rgba(241, 238, 230, .78);
  font: 600 9px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
}

/* FOOTER */
.dap-footer {
  border-top: 1px solid var(--dap-line);
  background: #050e18;
}

.dap-footer__inner {
  width: min(calc(100% - 84px), 1500px);
  margin: 0 auto;
  padding: 32px 0 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
}

.dap-footer__brand {
  color: var(--dap-ivory) !important;
  text-decoration: none !important;
  font: 500 12px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.dap-footer__brand::before {
  content: "";
  display: block;
  width: 27px;
  height: 1px;
  margin-bottom: 11px;
  background: var(--dap-orange);
}

.dap-footer__nav {
  display: flex;
  justify-content: flex-end;
  gap: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dap-line);
}

.dap-footer__nav a {
  position: relative;
  padding: 0 18px;
  color: rgba(241,238,230,.66) !important;
  text-decoration: none !important;
  font: 500 8px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .16em;
}

.dap-footer__nav a:first-child {
  padding-left: 0;
}

.dap-footer__nav a:last-child {
  padding-right: 0;
}

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

.dap-footer__copy {
  margin: 9px 0 0;
  color: rgba(241,238,230,.36);
  text-align: right;
  font: 400 8px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}

/* Responsive */
@media (max-width: 1000px) {
  .dap-main > section {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 45px;
  }

  .dap-intro__content,
  .dap-philosophy__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .dap-rules__list > div {
    grid-template-columns: 32px 140px 1fr;
  }
}

@media (max-width: 760px) {
  .dap-hero {
    min-height: 86vh;
    padding: 34px 24px 30px;
  }

  .dap-hero__topline,
  .dap-hero__foot {
    font-size: 7px;
    letter-spacing: .16em;
  }

  .dap-hero__topline span {
    text-align: right;
  }

  .dap-hero__body {
    padding: 50px 0 38px;
  }

  .dap-hero__title {
    font-size: clamp(44px, 12vw, 72px);
  }

  .dap-hero__lead {
    margin-top: 34px;
    font-size: 15px;
    line-height: 1.95;
  }

  .dap-main {
    width: calc(100% - 44px);
  }

  .dap-main > section {
    display: block;
    padding: 78px 0;
  }

  .dap-section-index {
    margin-bottom: 38px;
  }

  .dap-intro__big,
  .dap-philosophy__statement {
    font-size: 31px;
  }

  .dap-field__stats,
  .dap-field__copy,
  .dap-linkline,
  .dap-write__intro,
  .dap-write__cards {
    grid-column: auto;
  }

  .dap-field__stats {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 42px;
  }

  .dap-field__stats div {
    min-height: 98px;
    padding: 23px 14px;
  }

  .dap-field__stats strong {
    font-size: 29px;
  }

  .dap-write__intro {
    display: block;
  }

  .dap-write__intro p {
    margin-bottom: 16px;
  }

  .dap-write__cards {
    grid-template-columns: 1fr;
  }

  .dap-write__cards article {
    min-height: auto;
    padding: 30px 0 34px;
    border-right: 0;
    border-bottom: 1px solid var(--dap-line);
  }

  .dap-write__cards article:last-child {
    border-bottom: 0;
  }

  .dap-write__cards h2 {
    margin-top: 34px;
  }

  .dap-rules__list {
    grid-template-columns: 1fr;
  }

  .dap-rules__list > div,
  .dap-rules__list > div:nth-child(odd),
  .dap-rules__list > div:nth-child(even) {
    grid-template-columns: 30px 1fr;
    padding: 24px 0;
    border-right: 0;
  }

  .dap-rules__list p {
    grid-column: 2;
  }

  .dap-close__actions {
    flex-direction: column;
    gap: 18px;
  }

  .dap-footer__inner {
    width: calc(100% - 44px);
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .dap-footer__nav {
    justify-content: flex-start;
  }

  .dap-footer__copy {
    text-align: left;
  }
}


/* =========================================================
   R1.0.1 / ORIGINAL ABOUT STORY
   旧ABOUTの実体験・写真・旅ブログの軸を再構成。
   ========================================================= */

.dap-intro__content {
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.2fr);
  gap: 84px;
}

.dap-intro__portrait {
  margin: 0;
}

.dap-intro__portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  object-fit: cover;
  filter: saturate(.78) contrast(.98) brightness(.86);
  border: 1px solid rgba(241,238,230,.08);
}

.dap-intro__portrait p {
  margin: 13px 0 0;
  color: rgba(241,238,230,.34);
  font: 600 7px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .18em;
}

.dap-intro__story {
  min-width: 0;
}

.dap-intro__story .dap-intro__copy {
  max-width: 700px;
  margin-top: 44px;
}

/* TURNING POINT */
.dap-turning__content {
  display: grid;
  grid-template-columns: 170px minmax(0, 780px);
  gap: 58px;
  align-items: start;
}

.dap-turning__year {
  margin: 0;
  color: var(--dap-orange);
  font: 400 clamp(46px, 5vw, 78px)/.9 Georgia, serif;
}

.dap-turning__story h2,
.dap-lifestyle h2 {
  margin: 0 0 30px;
  color: var(--dap-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(31px, 2.7vw, 50px);
  font-weight: 400;
  line-height: 1.65;
}

.dap-turning__story p,
.dap-lifestyle__copy p {
  margin: 0 0 25px;
  color: rgba(241,238,230,.58);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 15px;
  line-height: 2.15;
}

/* LIFE ON THE MOVE */
.dap-lifestyle__grid {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(380px, 1fr);
  gap: 82px;
}

.dap-lifestyle__eyebrow {
  margin: 0 0 25px;
  color: var(--dap-orange);
  font: 600 8px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .18em;
}

/* TWO BLOGS */
.dap-blogs__content {
  min-width: 0;
}

.dap-blogs__lead {
  margin: 0 0 48px;
  color: var(--dap-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(31px, 2.8vw, 52px);
  line-height: 1.65;
}

.dap-blogs__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--dap-line);
  border-bottom: 1px solid var(--dap-line);
}

.dap-blogs__links a {
  min-height: 210px;
  padding: 30px 32px;
  text-decoration: none !important;
  border-right: 1px solid var(--dap-line);
  transition: background .2s ease;
}

.dap-blogs__links a:last-child {
  border-right: 0;
}

.dap-blogs__links a:hover,
.dap-blogs__links a:focus {
  background: rgba(217,111,61,.04);
}

.dap-blogs__links span {
  display: block;
  margin-bottom: 48px;
  color: var(--dap-orange);
  font: 600 7px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .17em;
}

.dap-blogs__links strong {
  display: block;
  color: var(--dap-ivory);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 21px;
  font-weight: 400;
}

.dap-blogs__links p {
  margin: 16px 0 0;
  color: rgba(241,238,230,.42);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 13px;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .dap-intro__content,
  .dap-lifestyle__grid {
    grid-template-columns: 1fr;
  }

  .dap-intro__portrait {
    max-width: 680px;
  }

  .dap-turning__content {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .dap-intro__content {
    display: block;
  }

  .dap-intro__portrait {
    margin-bottom: 42px;
  }

  .dap-turning__content {
    display: block;
  }

  .dap-turning__year {
    margin-bottom: 28px;
  }

  .dap-lifestyle__grid {
    display: block;
  }

  .dap-lifestyle__copy {
    margin-top: 34px;
  }

  .dap-blogs__links {
    grid-template-columns: 1fr;
  }

  .dap-blogs__links a {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid var(--dap-line);
  }

  .dap-blogs__links a:last-child {
    border-bottom: 0;
  }
}


/* =========================================================
   R1.0.2 / COCOON RESET + WIDTH FIX
   内容は変更せず、ABOUT上に残るテーマ由来の見た目だけを除去。
   ========================================================= */

/* ---------------------------------------------------------
   1) Cocoonの見出し装飾をABOUT内だけ完全にリセット
   --------------------------------------------------------- */
body.dive-about-active .dap-about h1,
body.dive-about-active .dap-about h2,
body.dive-about-active .dap-about h3,
body.dive-about-active .dap-about h4,
body.dive-about-active .dap-about h5,
body.dive-about-active .dap-about h6 {
  position: static !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none;
}

body.dive-about-active .dap-about h1::before,
body.dive-about-active .dap-about h1::after,
body.dive-about-active .dap-about h2::before,
body.dive-about-active .dap-about h2::after,
body.dive-about-active .dap-about h3::before,
body.dive-about-active .dap-about h3::after,
body.dive-about-active .dap-about h4::before,
body.dive-about-active .dap-about h4::after,
body.dive-about-active .dap-about h5::before,
body.dive-about-active .dap-about h5::after,
body.dive-about-active .dap-about h6::before,
body.dive-about-active .dap-about h6::after {
  display: none !important;
  content: none !important;
}

/* Cocoon側の強いheading指定より、ABOUTの見出し設計を優先 */
body.dive-about-active .dap-hero__title {
  color: var(--dap-ivory) !important;
}

body.dive-about-active .dap-turning__story h2,
body.dive-about-active .dap-lifestyle h2,
body.dive-about-active .dap-write__cards h2,
body.dive-about-active .dap-close h2 {
  color: var(--dap-ivory) !important;
}

/* カテゴリー名などにテーマ背景色が入り込むケースも抑止 */
body.dive-about-active .dap-about article,
body.dive-about-active .dap-about strong,
body.dive-about-active .dap-about span {
  background-image: none;
}

/* ---------------------------------------------------------
   2) ABOUTではCocoon自動目次を出さない
   --------------------------------------------------------- */
body.dive-about-active #toc,
body.dive-about-active .toc,
body.dive-about-active .toc-content,
body.dive-about-active .toc-list,
body.dive-about-active .toc-widget-box,
body.dive-about-active .toc-widget-box-wrap,
body.dive-about-active .widget-toc,
body.dive-about-active .entry-content > .toc {
  display: none !important;
}

/* ---------------------------------------------------------
   3) 100vw由来の数px横はみ出しを廃止
   --------------------------------------------------------- */
html:has(body.dive-about-active),
body.dive-about-active {
  overflow-x: clip !important;
}

body.dive-about-active .dap-about {
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: clip !important;
}

/* Cocoon側のコンテナに残る左右の微妙なはみ出しも抑止 */
body.dive-about-active #container,
body.dive-about-active .container,
body.dive-about-active #content,
body.dive-about-active #content-in,
body.dive-about-active .content,
body.dive-about-active .content-in,
body.dive-about-active #main,
body.dive-about-active main.main,
body.dive-about-active article.article,
body.dive-about-active .entry-content {
  overflow-x: clip !important;
  max-width: 100% !important;
}

/* full width sections */
body.dive-about-active .dap-hero,
body.dive-about-active .dap-footer,
body.dive-about-active .dap-main {
  max-width: 100%;
}

/* ---------------------------------------------------------
   4) テーマ由来の段落余白をABOUTで安定化
   --------------------------------------------------------- */
body.dive-about-active .dap-about p {
  max-width: none;
}

/* スクリーン幅が狭いPCでも右端に余計な1pxを作らない */
@media (min-width: 761px) {
  body.dive-about-active .dap-about {
    contain: paint;
  }
}


/* =========================================================
   R1.0.3 / TRUE 100% ZOOM FIT
   overflowを隠すのではなく、各グリッドが実際に縮められる構造へ。
   ========================================================= */

/* 全グリッド／flex子要素を縮小可能にする */
.dap-main,
.dap-main > section,
.dap-main > section > *,
.dap-intro__content,
.dap-intro__content > *,
.dap-philosophy__grid,
.dap-philosophy__grid > *,
.dap-turning__content,
.dap-turning__content > *,
.dap-lifestyle__grid,
.dap-lifestyle__grid > *,
.dap-write__intro,
.dap-write__intro > *,
.dap-write__cards,
.dap-write__cards > *,
.dap-rules__list,
.dap-rules__list > *,
.dap-blogs__content,
.dap-blogs__links,
.dap-blogs__links > *,
.dap-field__stats,
.dap-field__stats > * {
  min-width: 0;
}

/* 本文は必ずカラム内で折り返す */
.dap-about p,
.dap-about h1,
.dap-about h2,
.dap-about h3,
.dap-about strong,
.dap-about a {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* mainの左右余白を画面幅に応じて可変化 */
.dap-main {
  width: min(calc(100% - clamp(40px, 5vw, 84px)), 1500px);
}

/* セクションの左インデックスと本文のgapを可変化 */
.dap-main > section {
  grid-template-columns: clamp(145px, 12vw, 215px) minmax(0, 1fr);
  gap: clamp(34px, 4vw, 70px);
}

/* INTRO */
.dap-intro__content {
  grid-template-columns:
    minmax(260px, .72fr)
    minmax(0, 1.2fr);
  gap: clamp(42px, 5vw, 84px);
}

.dap-intro__copy,
.dap-philosophy__copy,
.dap-field__copy,
.dap-turning__story,
.dap-lifestyle__copy {
  max-width: 820px;
}

/* TURNING POINT */
.dap-turning__content {
  grid-template-columns:
    clamp(110px, 12vw, 170px)
    minmax(0, 820px);
  gap: clamp(34px, 4vw, 58px);
}

/* WHY I KEEP MOVING */
.dap-philosophy__grid {
  grid-template-columns:
    minmax(0, .92fr)
    minmax(0, .78fr);
  gap: clamp(44px, 5vw, 90px);
}

.dap-philosophy__statement {
  max-width: 720px;
}

/* LIFE ON THE MOVE */
.dap-lifestyle__grid {
  grid-template-columns:
    minmax(0, .88fr)
    minmax(0, 1fr);
  gap: clamp(46px, 5vw, 82px);
}

.dap-lifestyle h2 {
  max-width: 610px;
}

.dap-lifestyle__copy {
  width: 100%;
}

/* WHAT I WRITE */
.dap-write__intro {
  gap: clamp(30px, 4vw, 45px);
}

.dap-write__intro strong {
  min-width: 0;
  max-width: 620px;
}

/* 3 cards must stay inside the viewport */
.dap-write__cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dap-write__cards article {
  min-width: 0;
}

/* rules */
.dap-rules__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dap-rules__list > div {
  grid-template-columns:
    34px
    minmax(110px, 160px)
    minmax(0, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}

/* two blogs */
.dap-blogs__links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* stats */
.dap-field__stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*
 * 1500px以下では「デスクトップ2カラム」を維持しつつ
 * 見出し／本文の圧迫を先に弱める。
 */
@media (max-width: 1500px) {
  .dap-main {
    width: calc(100% - 56px);
  }

  .dap-main > section {
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 38px;
  }

  .dap-intro__content {
    grid-template-columns: minmax(250px, .70fr) minmax(0, 1.15fr);
    gap: 44px;
  }

  .dap-philosophy__grid,
  .dap-lifestyle__grid {
    gap: 48px;
  }

  .dap-turning__content {
    grid-template-columns: 115px minmax(0, 1fr);
    gap: 36px;
  }

  .dap-intro__big,
  .dap-philosophy__statement {
    font-size: clamp(29px, 2.8vw, 46px);
  }

  .dap-turning__story h2,
  .dap-lifestyle h2 {
    font-size: clamp(28px, 2.5vw, 42px);
  }

  .dap-intro__copy,
  .dap-philosophy__copy,
  .dap-field__copy,
  .dap-turning__story p,
  .dap-lifestyle__copy p {
    font-size: 14px;
  }
}

/*
 * 1250px以下はLIFE/WHY/INTROの中身を1列化。
 * セクション番号は左に残るので、誌面感は維持。
 */
@media (max-width: 1250px) and (min-width: 761px) {
  .dap-intro__content,
  .dap-philosophy__grid,
  .dap-lifestyle__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .dap-intro__portrait {
    max-width: 650px;
  }

  .dap-intro__story,
  .dap-philosophy__copy,
  .dap-lifestyle__copy {
    max-width: 820px;
  }

  .dap-write__intro {
    align-items: start;
    flex-direction: column;
  }

  .dap-rules__list > div {
    grid-template-columns: 28px 130px minmax(0, 1fr);
  }
}

/* 100%表示でブラウザ幅が狭めでも、絶対に右へ押し出さない */
@media (max-width: 1050px) and (min-width: 761px) {
  .dap-main {
    width: calc(100% - 40px);
  }

  .dap-main > section {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 28px;
  }

  .dap-write__cards,
  .dap-blogs__links,
  .dap-rules__list {
    grid-template-columns: 1fr;
  }

  .dap-write__cards article,
  .dap-blogs__links a,
  .dap-rules__list > div,
  .dap-rules__list > div:nth-child(odd),
  .dap-rules__list > div:nth-child(even) {
    border-right: 0;
  }

  .dap-write__cards article,
  .dap-blogs__links a {
    border-bottom: 1px solid var(--dap-line);
  }
}


/* =========================================================
   R1.0.5 / MOBILE LAYOUT LOCK
   R1.0.3以降のPCフィット調整がスマホの1カラムを
   再び2カラムへ戻さないよう、CSS末尾で構造を確定。
   ========================================================= */

@media (max-width: 760px) {
  .dap-main {
    width: calc(100% - 44px) !important;
  }

  .dap-main > section {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 72px 0 !important;
  }

  .dap-section-index {
    width: 100% !important;
    margin-bottom: 34px !important;
  }

  .dap-intro__content,
  .dap-philosophy__grid,
  .dap-turning__content,
  .dap-lifestyle__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
    width: 100% !important;
  }

  .dap-intro__portrait,
  .dap-intro__story,
  .dap-intro__copy,
  .dap-philosophy__statement,
  .dap-philosophy__copy,
  .dap-turning__year,
  .dap-turning__story,
  .dap-lifestyle__lead,
  .dap-lifestyle__copy,
  .dap-field__stats,
  .dap-field__copy,
  .dap-linkline,
  .dap-write__intro,
  .dap-write__cards,
  .dap-blogs__content,
  .dap-blogs__links,
  .dap-rules__list {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-column: auto !important;
  }

  .dap-intro__big,
  .dap-philosophy__statement,
  .dap-turning__story h2,
  .dap-lifestyle h2 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(29px, 8.6vw, 39px) !important;
    line-height: 1.65 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .dap-intro__copy,
  .dap-philosophy__copy,
  .dap-turning__story p,
  .dap-lifestyle__copy p,
  .dap-field__copy {
    width: 100% !important;
    max-width: none !important;
    font-size: 14px !important;
    line-height: 2.05 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* WHY I KEEP MOVING: statement→copy の縦積みに固定 */
  .dap-philosophy__statement {
    margin-bottom: 0 !important;
  }

  /* Turning point also must not leave a thin year column */
  .dap-turning__year {
    margin-bottom: 4px;
  }

  /* 3 cards / blogs / rules stay single-column */
  .dap-write__cards,
  .dap-blogs__links,
  .dap-rules__list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dap-write__intro {
    display: block !important;
  }
}


/* =========================================================
   R1.0.6 / WHAT I WRITE ENTRANCES
   3カードを各カテゴリへの入口としてカード全体リンク化。
   ========================================================= */

.dap-write__cards article {
  position: relative;
  padding: 0 !important;
}

.dap-write__card-link {
  position: relative;
  display: block;
  min-height: 325px;
  padding: 34px 30px;
  color: inherit !important;
  text-decoration: none !important;
  background: transparent !important;
  transition: background-color .22s ease;
}

.dap-write__card-link::after {
  content: "↗";
  position: absolute;
  top: 30px;
  right: 28px;
  color: rgba(217,111,61,.78);
  font: 400 15px/1 Arial, Helvetica, sans-serif;
  transition: transform .22s ease, color .22s ease;
}

.dap-write__card-link:hover,
.dap-write__card-link:focus-visible {
  background: rgba(241,238,230,.025) !important;
}

.dap-write__card-link:hover::after,
.dap-write__card-link:focus-visible::after {
  color: var(--dap-orange);
  transform: translate(2px,-2px);
}

.dap-write__card-link:focus-visible {
  outline: 1px solid rgba(217,111,61,.55);
  outline-offset: -1px;
}

@media (max-width: 760px) {
  .dap-write__cards article {
    min-height: 0 !important;
    padding: 0 !important;
  }

  .dap-write__card-link {
    min-height: 0 !important;
    padding: 30px 0 34px !important;
  }

  .dap-write__card-link::after {
    top: 29px;
    right: 3px;
    font-size: 16px;
  }

  .dap-write__card-link h2 {
    padding-right: 34px !important;
  }
}


/* =========================================================
   R1.0.7 / TURNING POINT YEAR LOCK
   67%→75%→100%のズーム変化でも「2019」を分割しない。
   ========================================================= */

.dap-turning__year {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* fixed 115px column was too narrow for 4-digit year at some zoom levels */
.dap-turning__content {
  grid-template-columns: max-content minmax(0, 820px) !important;
}

@media (max-width: 1500px) and (min-width: 761px) {
  .dap-turning__content {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    gap: clamp(30px, 3.2vw, 48px) !important;
  }
}

/* narrower desktop/tablet: keep one-line year, slightly reduce only when necessary */
@media (max-width: 1050px) and (min-width: 761px) {
  .dap-turning__content {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  .dap-turning__year {
    font-size: clamp(52px, 7vw, 66px) !important;
  }
}

/* mobile remains the existing one-column layout */
@media (max-width: 760px) {
  .dap-turning__content {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dap-turning__year {
    white-space: nowrap !important;
  }
}


/* =========================================================
   R1.0.9 / MOBILE TYPOGRAPHY RHYTHM
   日本語の助詞・語尾で不自然に切れないよう、
   意味のまとまりで改行を制御する。
   ========================================================= */

.dap-copy-line {
  display: block;
}

.dap-mobile-line {
  display: inline;
}

/* ABOUTは独自ナビ・フッターを持つためCocoonの固定モバイルバーを重ねない */
@media (max-width: 760px) {
  body.dive-about-active .mobile-menu-buttons,
  body.dive-about-active .mobile-footer-menu-buttons,
  body.dive-about-active #mobile-menu-buttons,
  body.dive-about-active #navi-footer,
  body.dive-about-active .navi-footer-in,
  body.dive-about-active .footer-mobile-buttons,
  body.dive-about-active .mobile-button-fmb,
  body.dive-about-active .menu-mobile,
  body.dive-about-active .mobile-menu-button {
    display: none !important;
  }

  .dap-mobile-line {
    display: block;
  }

  /* HERO
     「長く働くために、」を一息で読める大きさまでわずかに抑える */
  .dap-hero__title {
    font-size: clamp(38px, 10.4vw, 43px) !important;
    line-height: 1.42 !important;
    letter-spacing: 0 !important;
  }

  .dap-hero__title .dap-copy-line + .dap-copy-line {
    margin-top: .06em;
  }

  /* INTRO
     40代。 / 環境を自分で / 選び直すために、 /
     リゾートバイトを / 使っている。 */
  .dap-intro__big {
    font-size: clamp(29px, 8.2vw, 34px) !important;
    line-height: 1.72 !important;
    letter-spacing: .01em !important;
  }

  .dap-intro__big .dap-copy-line + .dap-copy-line {
    margin-top: .08em;
  }

  /* WHY I KEEP MOVING
     念のため広めのスマホでも1カラムを強制し、
     左右の細い列へ戻らないようにする */
  .dap-philosophy__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }

  .dap-philosophy__statement {
    font-size: clamp(29px, 8.2vw, 34px) !important;
    line-height: 1.72 !important;
  }

  /* Closing copy
     「選択肢 / に。」を禁止 */
  .dap-close h2 {
    max-width: none !important;
    font-size: clamp(28px, 7.8vw, 33px) !important;
    line-height: 1.62 !important;
    letter-spacing: .01em !important;
  }

  .dap-close h2 .dap-copy-line + .dap-copy-line {
    margin-top: .08em;
  }
}

/* 一部Androidブラウザで実効viewportが広めに評価される場合にも
   ABOUTの読み組みだけはタブレット直前まで自然な1カラムにする */
@media (max-width: 900px) and (min-width: 761px) {
  .dap-philosophy__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .dap-philosophy__statement {
    max-width: 680px !important;
  }
}