/* ==========================================================================
   経営理念(about/principle) — /about/principle/index.php 専用
   ========================================================================== */

.page-about-principle main {
  overflow-x: visible;
}

/* --- セクション0: PMVVCピラミッド(言葉の定義) --- */
.principle-intro {
  margin-bottom: 96px;
  text-align: center;
}

.principle-intro .principle-intro__heading {
  margin: 0 0 24px;
  color: var(--color-primary);
  font-size: 2.5rem;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.5;
}

.principle-intro .principle-intro__lead {
  margin: 0 auto 56px;
  max-width: 760px;
  color: var(--color-primary);
  font-size: 1rem;
  line-height: 1.9;
}

.principle-intro__body {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 45px;
  align-items: start;
  margin-top: 40px; 
  text-align: left;
}

/* 左カラム */
.principle-intro__body .principle-intro__left .principle-intro__heading {
  margin: 0 0 24px;
}

.principle-intro__body .principle-intro__left .principle-intro__lead {
  margin: 0 0 40px;
  max-width: none;
  text-align: left;
}

.principle-intro__diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.principle-intro__body .principle-intro__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.principle-intro__list .principle-intro__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 0;
  padding: 26px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text-sub) 30%, transparent);
}

.principle-intro__row:first-child {
  border-top: none;
  padding-top: 0;
}

.principle-intro__row img {
  flex: 0 0 150px;
  max-width: 165px;
  height: auto;
  display: block;
  margin:0;
}
.principle-intro__row--purpose {
  margin-top:12px;
}

.principle-intro__list .principle-intro__q {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
}

.principle-intro__list .principle-intro__a {
  margin: 0;
  color: var(--color-text);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.principle-intro__row--purpose .principle-intro__q     { color: var(--color-accent-pink); }
.principle-intro__row--mission .principle-intro__q     { color: var(--color-scenes-corner-gold); }
.principle-intro__row--vision .principle-intro__q      { color: var(--color-contact-business); }
.principle-intro__row--corevalues .principle-intro__q  { color: var(--color-section-recruit); }
.principle-intro__row--credo .principle-intro__q       { color: var(--color-principle-credo); }

/* --- セクション1〜5共通: カード(.deco-panel再利用) --- */
.principle-section {
  margin-bottom: 64px;
}

.principle-panel {
  text-align: center;
}

/* パネルごとのテーマカラーを --panel-color に一本化し、ラベル文字色(eyebrow/title)・
   タグ文字色・区切り線色(後述 .principle-panel__divider)がすべてこれを参照。
   角のグラデーション色(--deco-panel-corner-1/2)も同じ値を使うため、
   ここで --panel-color を経由させて二重管理を回避 */
.principle-panel--purpose {
  --panel-color: var(--color-accent-pink);
  --deco-panel-corner-1: var(--panel-color);
  --deco-panel-corner-2: var(--panel-color);
}

.principle-panel--mission {
  --panel-color: var(--color-scenes-corner-gold);
  --deco-panel-corner-1: var(--panel-color);
  --deco-panel-corner-2: var(--panel-color);
}

.principle-panel--vision {
  --panel-color: var(--color-contact-business);
  --deco-panel-corner-1: var(--panel-color);
  --deco-panel-corner-2: var(--panel-color);
}

.principle-panel--corevalues {
  --panel-color: var(--color-section-recruit);
  --deco-panel-corner-1: var(--panel-color);
  --deco-panel-corner-2: var(--panel-color);
}

.principle-panel--credo {
  --panel-color: var(--color-principle-credo);
  --deco-panel-corner-1: var(--panel-color);
  --deco-panel-corner-2: var(--panel-color);
}

.principle-panel .deco-panel__eyebrow,
.principle-panel .deco-panel__title {
  color: var(--panel-color);
}

.principle-panel .principle-panel__heading {
  margin: 40px 0 0;
  color: var(--color-text);
  font-size: 2.5rem;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.principle-panel .principle-panel__subtext {
  margin: 16px 0 0;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  font-size: 1.125rem;
  line-height: 1.8;
}

.principle-panel__media {
  margin: 40px 0 0;
  border-radius: 16px;
  overflow: hidden;
}

.principle-panel--purpose .principle-panel__media,
.principle-panel--credo .principle-panel__media {
  border-radius: 0;
  overflow: visible;
}

.principle-panel__media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0; 
}

.principle-panel__content {
  margin-top: 40px;
  text-align: left;
}

p.principle-panel__content-lead {
    font-size: 1.125rem;
}

.principle-panel .principle-panel__emphasis {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-extrabold);
  font-size: 1.4375rem;
  line-height: 1.9;
}

.principle-panel--purpose .principle-panel__emphasis     { color: var(--color-accent-pink); }
.principle-panel--corevalues .principle-panel__emphasis  { color: var(--color-section-recruit); }
.principle-panel--credo .principle-panel__emphasis       { color: var(--color-principle-credo); }

.principle-panel .principle-panel__note--primary {
  color: var(--color-primary);
  font-size: 1.125rem;
  font-weight: var(--font-weight-medium);
  margin: 0 0 24px;
}

.principle-panel__divider {
  margin: 50px 0;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--color-text-sub) 30%, transparent);
}

/* パネルごとのテーマカラー(--panel-color)で上書き。太さ・余白は変更しない。 */
.principle-panel .principle-panel__divider {
  border-top-color: var(--panel-color);
}

.principle-panel .principle-panel__tag {
  margin: 40px 0 0;
  overflow-wrap: break-word;
  text-align: right;
  color: var(--panel-color);
  font-size: 1.375rem;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.5;
}

.principle-panel .principle-panel__tag span {
  display: block;
  color: var(--color-text-sub);
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
}

.principle-panel__content .principle-panel__footer {
  display: grid;
  grid-template-columns: auto auto;
  gap: 40px;
  align-items: start;
  justify-content: space-between;
}

.principle-panel__content .principle-panel__footer .principle-panel__content-text {
  order: 1;
  margin: 0;
}

.principle-panel__content .principle-panel__footer .principle-panel__tag {
  order: 2;
  margin: 0;
  text-align: left; 
}

.principle-panel .principle-panel__pdf-btn {
  display: flex;
  justify-content: center;
  margin: 50px 0;
}

/* --- バッジ付きカード3枚(Mission=枠線タイプ / Vision=塗りつぶしタイプ) --- */
.principle-panel__content .principle-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
  margin: 60px 0 0;
  list-style: none;
  padding: 0;
}

.principle-badges .principle-badges__item {
  position: relative;
  margin-bottom: 0;
  padding: 32px 20px 24px;
  border-radius: 12px;
}

.principle-badges__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -40%);
  padding: 4px 20px;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-weight: var(--font-weight-semibold);
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--color-bg);
}

.principle-badges .principle-badges__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
}

/* Mission: 枠線のみ */
.principle-badges--outline .principle-badges__item {
  border: 1px solid var(--color-scenes-corner-gold);
}

.principle-badges--outline .principle-badges__label {
  background-color: var(--color-scenes-corner-gold);
}

/* Vision: 塗りつぶし(2行ラベル) */
.principle-badges--filled .principle-badges__item {
  border: 1px solid var(--color-contact-business);
  padding-top: 56px;
}

.principle-badges--filled .principle-badges__label {
  background-color: var(--color-contact-business);
  white-space: normal;
  width: calc(100% - 24px);
  text-align: center;
  line-height: 1.35;
}

/* ==========================================================================
   SP(max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* 二重ガター解消 */
  .page-about-principle .deco-panel {
    margin-inline: 0;
  }

  .principle-intro {
    margin-bottom: 64px;
    padding-top:40px;
  }

  .principle-intro .principle-intro__heading {
    font-size: 1.75rem;
  }

  .principle-intro__body {
    display: block;
    margin-top: 0; 
  }

  .principle-intro__body .principle-intro__left .principle-intro__heading {
    margin: 40px 0 20px;
    text-align: center;
  }

  .principle-intro__body .principle-intro__left .principle-intro__lead {
    margin: 0 auto 40px;
    text-align: center;
  }

  .principle-intro__diagram {
    margin-bottom: 70px;
  }

  .principle-intro__list .principle-intro__a {
  text-align: left;
}

  .principle-intro__list .principle-intro__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .principle-intro__row img {
    flex: none; 
  }

  .principle-section {
    margin-bottom: 40px;
  }

  .principle-panel .principle-panel__heading {
    margin-top: 32px;
    font-size: 1.625rem;
  }

  .principle-panel .principle-panel__subtext {
    font-size: 1.125rem;
  }

  .principle-panel__media {
    margin-top: 32px;
    border-radius: 8.5px;
  }

  .principle-panel__content {
    margin-top: 32px;
  }

  .principle-panel .principle-panel__emphasis {
    font-size: 1.4375rem;
    line-height: 1.8;
  }

  .principle-panel__divider {
    margin: 32px 0;
  }

  .p.principle-panel__content-text {
    font-size: 1rem;
  }

  .principle-panel .principle-panel__tag {
    margin-top: 32px;
    font-size: 1.375rem;
  }

  .principle-panel__content .principle-panel__footer {
    display: block;
  }

  .principle-panel__content .principle-panel__footer .principle-panel__content-text {
    order: 0;
    margin: 0 0 20px;
  }

  .principle-panel__content .principle-panel__footer .principle-panel__tag {
    order: 0;
    margin-top: 32px;
    text-align: right;
  }

  .principle-panel__content .principle-badges {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 50px;
  }

  .principle-badges--filled .principle-badges__item {
    padding-top: 52px;
    margin-top: 10px;
  }
}