/* ==========================================================================
   Project: About Page
   ========================================================================== */

/* ヒーロー背景をパンくず上（ページ最上部）まで伸ばす */
body.page-template-page-about {
  position: relative;
  --cdg-about-hero-bg-height: calc(
    var(--header-height-sp) + 10px + var(--space-xs) + 300px
  );
}

body.page-template-page-about.has-header-catchcopy {
  --cdg-about-hero-bg-height: calc(
    var(--header-height-sp) + var(--header-catchcopy-height-sp) + 10px + var(--space-xs) + 300px
  );
}

@media (min-width: 768px) {
  body.page-template-page-about {
    --cdg-about-hero-bg-height: calc(
      var(--header-height-pc) + 12px + var(--space-sm) + 360px
    );
  }

  body.page-template-page-about.has-header-catchcopy {
    --cdg-about-hero-bg-height: calc(
      var(--header-height-pc) + var(--header-catchcopy-height-pc) + 12px + var(--space-sm) + 360px
    );
  }
}

body.page-template-page-about::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: var(--cdg-about-hero-bg-height);
  background: linear-gradient(
    165deg,
    var(--color-bg-fv-start) 0%,
    var(--color-bg-fv-mid) 38%,
    var(--color-bg-fv-end) 72%
  );
  pointer-events: none;
}

body.page-template-page-about .l-breadcrumb-bar,
body.page-template-page-about .l-main {
  position: relative;
  z-index: 1;
}

.p-about {
  overflow: hidden;
}

/* JS 有効時：ヒーローだけ GSAP 適用前のちらつき防止 */
html.js .p-about [data-about-hero-bg],
html.js .p-about [data-about-hero-title] {
  opacity: 0;
  filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
  html.js .p-about [data-about-hero-bg],
  html.js .p-about [data-about-hero-title] {
    opacity: 1;
    filter: none;
  }
}

/* Hero */
.p-about-hero {
  position: relative;
  padding: var(--space-xl) 0 var(--space-2xl);
  text-align: center;
}
@media (min-width: 768px) {
  .p-about-hero {
    padding: var(--space-xl) 0 var(--space-xl);
  }
}

.p-about-hero__bg-title {
  position: absolute;
  top: 30%;
  right: 10%;
  z-index: 0;
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(88px, 24vw, 180px);
  line-height: 1;
  color: rgba(118, 199, 192, 0.16);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.p-about-hero__inner {
  position: relative;
  z-index: 1;
}

.p-about-hero__title {
  margin: 0 auto;
  max-width: 20em;
}

.p-about-hero__title .p-fv__title-line--1 {
  font-size: clamp(20px, 5vw, 40px);
}

.p-about-hero__title .p-fv__title-line--2 {
  font-size: clamp(24px, 6.2vw, 48px);
}
/* Section label（共通タイポ） */
.p-about-section-label {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(28px, 7vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-primary);
}

.p-about-message .p-about-section-label {
  margin-bottom: var(--space-md);
  text-align: center;
}

/* Philosophy */
.p-about-philosophy {
  position: relative;
  z-index: 1;
  padding: var(--section-padding-sp) 0;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .p-about-philosophy {
    padding: var(--section-padding-pc) 0;
  }
}

.p-about-philosophy__frame {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  --philosophy-label-gap-end: clamp(148px, 42%, 228px);
  --philosophy-label-gap-bottom: clamp(24px, 6.5vw, 48px);
}

/* 枠線の上に重ね、白背景で線を欠けさせる */
.p-about-philosophy__frame .p-about-section-label {
  position: absolute;
  top: 0;
  left: clamp(8px, 2.5vw, 28px);
  z-index: 2;
  width: fit-content;
  padding: 0 16px 2px 2px;
  background-color: var(--color-white);
  transform: translateY(-50%);
}

.p-about-philosophy__box {
  position: relative;
  margin: 0;
  padding: var(--space-2xl) var(--space-2xl);
  border: 0;
  border-right: 1px solid var(--color-primary-dark);
  border-bottom: 1px solid var(--color-primary-dark);
  background-color: var(--color-white);
  text-align: center;
}

@media (max-width: 767px) {
  .p-about-philosophy__box {
    padding: 60px var(--space-sm);
  }
}
/* 上辺・左辺はラベル直後から（欠けた枠線） */
.p-about-philosophy__box::before,
.p-about-philosophy__box::after {
  content: '';
  position: absolute;
  background-color: var(--color-primary-dark);
  pointer-events: none;
}

.p-about-philosophy__box::before {
  top: 0;
  left: var(--philosophy-label-gap-end);
  right: 0;
  height: 1px;
}

.p-about-philosophy__box::after {
  top: var(--philosophy-label-gap-bottom);
  left: 0;
  bottom: 0;
  width: 1px;
}

@media (min-width: 768px) {
  .p-about-philosophy__box {
    padding: 100px var(--space-2xl);
  }
}

.p-about-philosophy__lead {
  margin: 0 0 var(--space-2xl);
  font-family: var(--font-serif);
  font-size: clamp(18px, 3.6vw, 36px);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: var(--color-primary-dark);
}
@media (max-width: 767px) {
  .p-about-philosophy__lead {
    margin-bottom: var(--space-lg);
  }
}
.p-about-philosophy__body {
  font-size: clamp(14px, 2.8vw, 16px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.p-about-philosophy__body p {
  margin: 0 0 1.5em;
}

.p-about-philosophy__body p:last-child {
  margin-bottom: 0;
}

.p-about-philosophy__emphasis {
  color: var(--color-primary-dark);
  font-weight: 500;
}

/* Message */
.p-about-message {
  position: relative;
  z-index: 1;
  padding: var(--section-padding-sp) 0;
  background-color: var(--color-bg-section);
}

@media (min-width: 768px) {
  .p-about-message {
    padding: var(--section-padding-pc) 0;
  }
}

.p-about-message__header {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  text-align: center;
}

@media (min-width: 768px) {
  .p-about-message__header {
    margin-bottom: var(--space-xl);
  }
}

.p-about-message__en {
  margin: 0 0 var(--space-sm);
  font-size: clamp(13px, 2.6vw, 15px);
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

.p-about-message__lead {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 4.2vw, 28px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
}

.p-about-message__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 768px) {
  .p-about-message__grid {
    grid-template-columns: minmax(200px, 420px) minmax(0, 1fr);
    gap: var(--space-2xl);
  }
}

/* Message 写真コラージュ（カンプ準拠・assets/image/about） */
.p-about-message__visual {
  position: relative;
  width: min(100%, 320px);
  min-height: 380px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-about-message__visual {
    width: 100%;
    max-width: 440px;
    min-height: 520px;
    margin-inline: 0;
  }
}

.p-about-message__gradation {
  position: absolute;
  top: 61%;
  left: 0;
  z-index: 0;
  width: 56%;
  max-width: 240px;
  aspect-ratio: 1;
  overflow: hidden;
  pointer-events: none;
}

.p-about-message__gradation-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
}

.p-about-message__photo {
  margin: 0;
  overflow: hidden;
  background-color: var(--color-white);
  box-shadow: 0 8px 28px rgba(51, 51, 51, 0.1);
}

.p-about-message__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

.p-about-message__photo--main {
  position: relative;
  z-index: 2;
  width: 74%;
  margin: 14% 0 0 10%;
  aspect-ratio: 4 / 5;
}

.p-about-message__photo--sub {
  position: absolute;
  z-index: 1;
}

.p-about-message__photo--sub-top {
  top: 0;
  right: 0;
  width: 40%;
  max-width: 168px;
  aspect-ratio: 3 / 4;
}

.p-about-message__photo--sub-top img {
  object-position: center 15%;
}

.p-about-message__photo--sub-bottom {
  right: 2%;
  bottom: 6%;
  width: 44%;
  max-width: 188px;
  aspect-ratio: 16 / 10;
}

.p-about-message__photo--sub-bottom img {
  object-position: center 88%;
}

@media (max-width: 767px) {
  .p-about-message__visual {
    min-height: 340px;
  }

  .p-about-message__photo--main {
    width: 68%;
    margin-top: 18%;
  }

  .p-about-message__photo--sub-top {
    width: 36%;
  }

  .p-about-message__photo--sub-bottom {
    width: 40%;
    bottom: 4%;
  }
}

.p-about-message__body  p{
  font-size: 14px!important;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.p-about-message__profile {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(68, 68, 68, 0.15);
}

@media (min-width: 768px) {
  .p-about-message__profile {
    grid-template-columns: minmax(200px, 420px) minmax(0, 1fr);
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
    align-items: start;
  }
}

.p-about-message__profile-col {
  min-width: 0;
}

.p-about-message__profile-avatar {
  margin: 0 0 var(--space-sm);
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--radius-circle);
}

.p-about-message__profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-about-message__profile-brand {
  margin: 0 0 var(--space-xs);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
}

.p-about-message__profile-name {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-serif);
  font-size: clamp(18px, 3.6vw, 22px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

.p-about-message__profile-role {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}

.p-about-message__profile-credentials,
.p-about-message__profile-bio p {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .p-about-message__profile-credentials,
  .p-about-message__profile-bio p {
    font-size: 14px;
  }
}

.p-about-message__profile-credentials {
  margin: 0 0 var(--space-sm);
}

.p-about-message__profile-bio {
  margin: 0;
}