/* =========================================================
   Philosophy page — page-specific styles
   ========================================================= */

.gnav a.is-active{ color:var(--navy) }
.gnav a.is-active::after{ width:100%; left:0 }

/* ---------- Page hero ---------- */
.page-hero{
  padding:calc(64px + var(--gap)) 0 calc(var(--gap) * .8);
  background:var(--paper);
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; right:-15%; top:-20%;
  width:60%; height:80%;
  background:radial-gradient(ellipse at center,
    oklch(0.72 0.06 78 / .09) 0%, transparent 55%);
  pointer-events:none;
}
.page-hero__inner{ position:relative; z-index:2 }

.crumbs{
  display:flex; gap:10px; align-items:center;
  color:var(--ink-mute);
  margin-bottom:48px;
}
.crumbs a{ color:var(--ink-mute); transition:color .3s }
.crumbs a:hover{ color:var(--navy) }
.crumbs span:not(.mono){ opacity:.5 }

.page-hero__index{
  color:var(--gold-deep);
  margin-bottom:20px;
}

.page-hero__title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px, 7.2vw, 96px);
  line-height:1.16;
  letter-spacing:.03em;
  color:var(--navy-ink);
  margin:0 0 28px;
  word-break:keep-all;
  overflow-wrap:normal;
  line-break:strict;
}
.page-hero__title span{ display:block }
.page-hero__title--em{
  font-weight:500;
  color:var(--navy);
  position:relative;
  padding-right:.15em;
  width:fit-content;
}
.page-hero__title--em::after{
  content:"";
  position:absolute; left:0; bottom:.05em;
  width:2.4em; height:2px;
  background:var(--gold);
}

.page-hero__latin{
  font-family:var(--latin); font-style:italic;
  font-size:clamp(15px, 1.5vw, 20px);
  color:var(--ink-mute);
  letter-spacing:.04em;
  margin:0 0 32px;
}
.page-hero__lead{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(14px, 1.15vw, 17px);
  line-height:2;
  color:var(--ink-soft);
  max-width:52ch;
  margin:0 0 72px;
}

/* Table of contents */
.toc{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.toc a{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:4px 14px;
  padding:24px 20px 22px;
  border-right:1px solid var(--line);
  color:var(--ink-soft);
  transition:background .3s, color .3s;
}
.toc a:last-child{ border-right:0 }
.toc a:hover{ background:var(--paper-2); color:var(--navy-ink) }
.toc__no{
  grid-row:1 / span 2;
  align-self:center;
  color:var(--gold-deep);
  font-size:15px;
  letter-spacing:.14em;
}
.toc__t{
  font-family:var(--latin); font-style:italic;
  font-size:18px; letter-spacing:.04em;
  color:var(--navy-ink);
}
.toc__jp{
  font-family:var(--serif);
  font-size:12px;
  color:var(--ink-mute);
  letter-spacing:.06em;
}
@media (max-width:820px){
  .toc{ grid-template-columns:repeat(2,1fr) }
  .toc a:nth-child(2){ border-right:0 }
  .toc a:nth-child(1),
  .toc a:nth-child(2){ border-bottom:1px solid var(--line) }
}


/* ---------- Creed sections (Mission / Vision / Value) ---------- */
.creed{
  padding:var(--gap) 0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.creed--ink{
  background:var(--navy-ink);
  color:var(--white-warm);
  border-bottom:none;
}
.creed__inner{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
}
.creed__side{
  position:sticky;
  top:88px;
  padding-top:8px;
  border-top:2px solid var(--gold);
  display:flex; flex-direction:column; gap:10px;
}
.creed--ink .creed__side{ border-top-color:var(--gold) }
.creed__index{
  color:var(--gold-deep);
  padding-top:8px;
}
.creed--ink .creed__index{ color:var(--gold) }
.creed__label{
  font-family:var(--latin); font-style:italic;
  font-size:32px; letter-spacing:.04em;
  color:var(--navy-ink);
  line-height:1;
}
.creed--ink .creed__label{ color:oklch(0.88 0.05 78) }
.creed__ja{
  font-family:var(--serif);
  font-weight:400;
  font-size:15px;
  letter-spacing:.14em;
  color:var(--ink-mute);
}
.creed--ink .creed__ja{ color:oklch(0.78 0.02 85) }

.creed__body{ padding-top:8px }
.creed__latin{
  font-family:var(--latin); font-style:italic;
  font-size:16px;
  color:var(--ink-mute);
  letter-spacing:.04em;
  margin:0 0 20px;
}
.creed--ink .creed__latin{ color:oklch(0.78 0.03 85) }
.creed__h{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(27px, 3.6vw, 48px);
  line-height:1.42;
  letter-spacing:.04em;
  color:var(--navy-ink);
  margin:0 0 36px;
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:normal;
  line-break:strict;
  max-width:18ch;
}
.creed__h--value{ max-width:20ch }
.creed--ink .creed__h{ color:var(--white-warm) }
.creed__h em{
  font-style:normal;
  font-weight:400;
  color:var(--navy);
}
.creed--ink .creed__h em{ color:oklch(0.85 0.06 78) }
.creed__p{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(15px, 1.25vw, 17.5px);
  line-height:2.1;
  letter-spacing:.02em;
  color:var(--ink);
  max-width:64ch;
  margin:0;
}
.creed--ink .creed__p{ color:oklch(0.9 0.01 85) }

@media (max-width:820px){
  .creed__inner{ grid-template-columns:1fr }
  .creed__side{ position:static }
}

/* Vision notes */
.vision-notes{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:oklch(0.98 0.008 85 / .16);
  border-top:1px solid oklch(0.98 0.008 85 / .16);
  border-bottom:1px solid oklch(0.98 0.008 85 / .16);
}
.vnote{
  background:var(--navy-ink);
  padding:28px 24px 30px;
  display:flex; flex-direction:column; gap:10px;
}
.vnote__no{ color:var(--gold) }
.vnote__t{
  font-family:var(--serif);
  font-weight:500;
  font-size:18px;
  color:var(--white-warm);
  letter-spacing:.06em;
  word-break:keep-all;
  overflow-wrap:normal;
}
.vnote__d{
  font-size:12.5px; line-height:1.9;
  color:oklch(0.82 0.02 85);
}
@media (max-width:820px){
  .vision-notes{ grid-template-columns:1fr }
}

/* Value Triad — signature typographic block */
.value-triad{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.vtile{
  padding:36px 32px 40px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:20px;
  transition:background .35s;
  position:relative;
  min-width:0;
}
.vtile:last-child{ border-right:0 }
.vtile:hover{ background:var(--paper-2) }

.vtile__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.vtile__no{ color:var(--gold-deep) }
.vtile__en{
  font-family:var(--latin); font-style:italic;
  font-size:15px;
  color:var(--ink-mute);
  letter-spacing:.06em;
}

.vtile__jp{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(30px, 3.2vw, 42px);
  color:var(--navy-ink);
  margin:8px 0 12px;
  letter-spacing:0;
  line-height:1;
  display:flex;
  justify-content:space-between;
  gap:.15em;
  white-space:nowrap;      /* 4字を絶対に分割しない */
  min-width:0;
}
.vtile__jp span{
  display:inline-block;
  flex:0 0 auto;
}

.vtile__d{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.95;
  color:var(--ink-soft);
  margin:0;
}
@media (max-width:820px){
  .value-triad{ grid-template-columns:1fr }
  .vtile{ border-right:0 }
  .vtile:last-child{ border-bottom:0 }
}


/* =========================================================
   History
   ========================================================= */
.history{
  padding:var(--gap) 0;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.history__inner{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
}
.history__side{
  position:sticky;
  top:88px;
  padding-top:8px;
  border-top:2px solid var(--gold);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.history__index{
  color:var(--gold-deep);
  padding-top:8px;
}
.history__label{
  font-family:var(--latin);
  font-style:italic;
  font-size:32px;
  letter-spacing:.04em;
  color:var(--navy-ink);
  line-height:1;
}
.history__ja{
  font-family:var(--serif);
  font-weight:400;
  font-size:15px;
  letter-spacing:.14em;
  color:var(--ink-mute);
}
.history__body{ padding-top:8px }
.history__latin{
  font-family:var(--latin);
  font-style:italic;
  font-size:16px;
  color:var(--ink-mute);
  letter-spacing:.04em;
  margin:0 0 20px;
}
.history__h{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(27px, 3.6vw, 48px);
  line-height:1.42;
  letter-spacing:.04em;
  color:var(--navy-ink);
  margin:0 0 40px;
  text-wrap:balance;
  word-break:keep-all;
  overflow-wrap:normal;
  line-break:strict;
  max-width:18ch;
}
.history__h em{
  font-style:normal;
  font-weight:400;
  color:var(--navy);
}
.history__timeline{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.history-item{
  display:grid;
  grid-template-columns:minmax(88px, 120px) 1fr;
  gap:24px;
  padding:28px 28px 30px;
  background:var(--white-warm);
}
.history-item__date{
  color:var(--gold-deep);
  letter-spacing:.12em;
  white-space:nowrap;
}
.history-item__body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.history-item__title{
  margin:0;
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  color:var(--navy-ink);
  letter-spacing:.04em;
}
.history-item__text{
  margin:0;
  font-family:var(--serif);
  font-size:15px;
  line-height:2;
  color:var(--ink-soft);
}

/* =========================================================
   CEO Message
   ========================================================= */
.message{
  padding:var(--gap) 0;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.message__inner{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
}
.message__side{
  position:sticky;
  top:88px;
  padding-top:8px;
  border-top:2px solid var(--gold);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.message__index{
  color:var(--gold-deep);
  padding-top:8px;
}
.message__label{
  font-family:var(--latin);
  font-style:italic;
  font-size:32px;
  letter-spacing:.04em;
  color:var(--navy-ink);
  line-height:1;
}
.message__ja{
  font-family:var(--serif);
  font-weight:400;
  font-size:15px;
  letter-spacing:.14em;
  color:var(--ink-mute);
}
.message__body{ padding-top:8px }
.message__latin{
  font-family:var(--latin);
  font-style:italic;
  font-size:16px;
  color:var(--ink-mute);
  letter-spacing:.04em;
  margin:0 0 20px;
}
.message__h{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(27px, 3.6vw, 48px);
  line-height:1.42;
  letter-spacing:.04em;
  color:var(--navy-ink);
  margin:0 0 40px;
  word-break:keep-all;
  overflow-wrap:normal;
  line-break:strict;
  text-wrap:balance;
  max-width:18ch;
}
.message__h em{
  font-style:normal;
  font-weight:400;
  color:var(--navy);
}
.message__text{
  font-family:var(--serif);
  font-weight:400;
  font-size:16px;
  line-height:2.15;
  letter-spacing:.02em;
  color:var(--ink);
  max-width:60ch;
}
.message__text p{
  margin:0 0 24px;
  text-indent:1em;
}
.message__text p:first-child::first-letter{
  font-family:var(--latin);
  font-weight:500;
  float:left;
  font-size:56px;
  line-height:.88;
  padding:6px 12px 0 0;
  color:var(--navy);
  text-indent:0;
}
.message__text p:first-child{ text-indent:0 }
.message__sign{
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:60ch;
}
.message__sign-title{
  font-family:var(--serif);
  font-size:13px;
  color:var(--ink-mute);
  letter-spacing:.14em;
}
.message__sign-name{
  min-height:56px;
  display:flex;
  align-items:center;
}
.message__sign-name-image{
  display:block;
  width:auto;
  max-width:min(280px, 100%);
  max-height:64px;
  height:auto;
}
.message__sign-name-fallback{
  font-family:var(--serif);
  font-weight:500;
  font-size:28px;
  color:var(--navy-ink);
  letter-spacing:.14em;
}
.message__sign-latin{
  color:var(--ink-mute);
  margin-top:2px;
}

@media (max-width:820px){
  .history__inner,
  .message__inner{ grid-template-columns:1fr }
  .history__side,
  .message__side{ position:static }
  .history-item{ grid-template-columns:1fr; gap:10px }
  .message__text p:first-child::first-letter{ font-size:44px }
}

@media (max-width:820px){
  .message__sign-name-image{
    max-width:min(240px, 100%);
    max-height:56px;
  }
}