/* =============================================================
   about.css  —  HOOKについて 詳細ページ
   template-about-detail.php
============================================================= */


/* -------------------------------------------------------------
   Container override
------------------------------------------------------------- */
.page-template-template-about-detail #content.l-container,
.page-template-template-about-detail #content.l-content,
.page-template-template-about-detail .l-mainContent,
.page-template-template-about-detail .l-mainContent__inner {
  max-width: 100% !important;
  padding: 0 !important;
}


/* =============================================================
   01. ページヘッダー（p-lower-hero）
============================================================= */
.p-lower-hero {
  background-color: var(--color-bg-gray, #F4F7F9);
  padding: 6rem 2rem;
  text-align: center;
}

.p-lower-hero__inner {
  margin-inline: auto;
}

.p-lower-hero__en {
  color: var(--color-blue, #2980B9);
  font-family: var(--font-accent, sans-serif);
  font-size: 1.2rem;
  letter-spacing: .1em;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}

.p-lower-hero__title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
  margin-bottom: 0;
}

.p-lower-hero__lead {
  color: var(--color-text-light, rgba(26,26,26,.6));
  font-size: 1.5rem;
  line-height: 1.8;
  margin-top: 1.6rem;
}

@media (min-width: 768px) {
  .p-lower-hero {
    padding: 8rem 2rem;
  }
}


/* =============================================================
   02. 本文セクション
============================================================= */
.p-about-detail__section--body {
  padding: 6rem 2rem;
}

@media (min-width: 768px) {
  .p-about-detail__section--body {
    padding: 8rem 2rem;
  }
}


/* =============================================================
   03. 本文コンテンツ typography
============================================================= */
.p-about-detail__content {
  color: var(--color-text, #1A1A1A);
  font-size: 1.6rem;
  line-height: 1.9;
  max-width: 72rem;
  margin-inline: auto;
}

.p-about-detail__content h2 {
  border-left: 4px solid var(--color-blue, #2980B9);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 2rem;
  margin-top: 5.6rem;
  padding-left: 1.2rem;
}

.p-about-detail__content h3 {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.6rem;
  margin-top: 4rem;
}

.p-about-detail__content h4 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.2rem;
  margin-top: 3.2rem;
}

.p-about-detail__content p {
  margin-bottom: 1.6rem;
}

.p-about-detail__content ul,
.p-about-detail__content ol {
  list-style: inside;
  margin-bottom: 1.6rem;
  padding-left: 2rem;
}

.p-about-detail__content li {
  margin-bottom: .8rem;
}

.p-about-detail__content blockquote {
  background: var(--color-bg-gray, #F4F7F9);
  border-left: 4px solid var(--color-blue, #2980B9);
  margin: 2.4rem 0;
  padding: 1.6rem 2rem;
}

.p-about-detail__content figure {
  margin: 2.4rem 0;
}

.p-about-detail__content img {
  border-radius: .4rem;
  height: auto;
  max-width: 100%;
}

.p-about-detail__content a {
  color: var(--color-blue, #2980B9);
  text-decoration: underline;
}

.p-about-detail__content a:hover {
  opacity: .75;
}

.p-about-detail__content table {
  border-collapse: collapse;
  font-size: 1.4rem;
  overflow-x: auto;
  width: 100%;
}

.p-about-detail__content th,
.p-about-detail__content td {
  border: 1px solid var(--color-border, rgba(26,26,26,.1));
  padding: 1rem 1.2rem;
  text-align: left;
}

.p-about-detail__content th {
  background: var(--color-bg-gray, #F4F7F9);
  font-weight: 700;
}

.p-about-detail__content code {
  background: var(--color-bg-gray, #F4F7F9);
  border-radius: .3rem;
  font-family: monospace;
  font-size: 1.4rem;
  padding: .2em .5em;
}

.p-about-detail__content pre {
  background: #1A1A1A;
  border-radius: .4rem;
  color: #f8f8f2;
  font-size: 1.4rem;
  margin: 2.4rem 0;
  overflow-x: auto;
  padding: 2rem;
}

.p-about-detail__content pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.p-about-detail__content hr {
  border: none;
  border-top: 1px solid var(--color-border, rgba(26,26,26,.1));
  margin: 3.2rem 0;
}


/* =============================================================
   04. 前後ページナビゲーション
============================================================= */
.p-about-detail__page-nav {
  border-top: 1px solid var(--color-border, rgba(26,26,26,.1));
  padding: 3.2rem 2rem;
}

.p-about-detail__page-nav-inner {
  align-items: center;
  display: flex;
  gap: 1.6rem;
  justify-content: space-between;
}

.p-about-detail__page-nav-link {
  align-items: center;
  color: var(--color-text, #1A1A1A);
  display: flex;
  font-size: 1.4rem;
  gap: .8rem;
  text-decoration: none;
  transition: opacity .2s;
}

.p-about-detail__page-nav-link:hover {
  opacity: .65;
}

.p-about-detail__page-nav-link--next {
  margin-left: auto;
}

.p-about-detail__page-nav-arrow {
  flex-shrink: 0;
}


/* =============================================================
   05. CTA
============================================================= */
.p-about-detail__cta-section {
  background-color: var(--color-bg-gray, #F4F7F9);
  padding: 6rem 2rem;
  text-align: center;
}

.p-about-detail__cta {
  margin-inline: auto;
  max-width: 64rem;
}

.p-about-detail__cta-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.6rem;
}

.p-about-detail__cta-text {
  color: var(--color-text-light, rgba(26,26,26,.6));
  font-size: 1.5rem;
  line-height: 1.8;
  margin-bottom: 3.2rem;
}

@media (min-width: 768px) {
  .p-about-detail__cta-section {
    padding: 8rem 2rem;
  }
}