/* ============================================================
   私たちについて（about.html）固有スタイル
   「人の顔が見える」ページのためグリーンをやや多めに使う
   ============================================================ */

/* ---- 理念・メッセージ ---- */
.phil{background:var(--white);border-radius:48px;margin:0 10px}
.phil-msg{
  font-size:clamp(1.25rem,3.8vw,1.85rem);font-weight:900;line-height:2.1;
  margin-top:12px;max-width:30em;
}
.phil-msg .marker{padding:0 2px}
.phil-body{margin-top:22px;color:var(--ink-soft);max-width:40em}
/* Mission / Vision */
.mv-label{
  display:inline-flex;align-items:center;gap:8px;margin-top:34px;
  background:var(--yellow);border:2px solid var(--ink);border-radius:999px;
  padding:3px 16px;font-weight:900;font-size:.85rem;
}
.mv-label .en{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
/* す・ま・い・る */
.sumairu{display:grid;gap:12px;margin-top:20px}
.sumairu-item{
  display:flex;align-items:center;gap:16px;background:var(--bg);
  border:3px solid var(--ink);border-radius:22px;padding:12px 18px;
  transition:transform .5s var(--ease-soft);
}
.sumairu-item:hover{transform:translateY(-3px)}
.sumairu-item .kana{
  flex:none;width:54px;height:54px;display:grid;place-items:center;
  font-size:1.5rem;font-weight:900;background:var(--yellow);
  border:2.5px solid var(--ink);border-radius:var(--radius-blob2);
}
.sumairu-item:nth-child(odd) .kana{transform:rotate(-6deg)}
.sumairu-item:nth-child(even) .kana{transform:rotate(6deg);border-radius:var(--radius-blob3)}
.sumairu-item p{font-weight:700;font-size:.95rem;line-height:1.7}
.sumairu-item small{display:block;font-weight:500;color:var(--ink-soft);font-size:.8rem}
/* クレド */
.credo{margin-top:56px}
.credo h3{font-size:1.3rem;font-weight:900}
.credo-list{list-style:none;margin-top:20px;display:grid;gap:12px;max-width:46em}
.credo-list li{
  display:flex;gap:14px;align-items:flex-start;background:var(--bg);
  border:2px solid var(--ink);border-radius:18px;padding:14px 18px;
}
.credo-list .c-num{
  flex:none;width:32px;height:32px;display:grid;place-items:center;margin-top:4px;
  font-family:var(--font-en);font-weight:800;font-size:1rem;
  background:var(--green-soft);color:#0A5E36;border-radius:50%;
}
.credo-list strong{display:block;font-size:.98rem;font-weight:900;line-height:1.7}
.credo-list small{display:block;font-weight:500;color:var(--ink-soft);font-size:.82rem;margin-top:2px}
.phil-grid{display:grid;gap:18px;margin-top:44px}
.phil-card{
  position:relative;background:var(--bg);border:3px solid var(--ink);border-radius:26px;
  padding:28px 24px 24px;transition:transform .55s var(--ease-soft),box-shadow .55s var(--ease-soft);
}
.phil-card:hover{transform:translateY(-6px) rotate(.5deg);box-shadow:var(--shadow-pop)}
.phil-card:nth-child(even):hover{transform:translateY(-6px) rotate(-.5deg)}
.phil-card .p-num{position:absolute;top:16px;right:20px;font-family:var(--font-en);font-weight:800;font-size:1.5rem;color:rgba(42,36,21,.16)}
.phil-card .p-icon{
  width:60px;height:60px;display:grid;place-items:center;margin-bottom:16px;
  border-radius:var(--radius-blob2);background:var(--green-soft);
  transition:border-radius .6s var(--ease-soft),transform .6s var(--ease-soft);
}
.phil-card:nth-child(2) .p-icon{background:var(--yellow-soft)}
.phil-card:nth-child(3) .p-icon{background:var(--blue-soft)}
.phil-card:nth-child(4) .p-icon{background:var(--yellow)}
.phil-card:hover .p-icon{border-radius:var(--radius-blob1);transform:rotate(-8deg) scale(1.06)}
.phil-card h3{font-size:1.1rem;font-weight:900;margin-bottom:8px}
.phil-card p{font-size:.9rem;color:var(--ink-soft)}
.phil-note{margin-top:24px;font-size:.85rem;color:var(--ink-soft)}

/* ---- 3つの特徴の深掘り ---- */
.deep-row{display:grid;gap:30px;align-items:center;margin-top:64px}
.deep-row:first-of-type{margin-top:48px}
.deep-row .ph{min-height:260px}
.deep-txt .d-num{
  font-family:var(--font-en);font-weight:800;font-size:2.4rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.6px var(--ink);opacity:.55;display:block;
}
.deep-txt h3{font-size:clamp(1.35rem,3.6vw,1.7rem);font-weight:900;margin:12px 0 12px}
.deep-txt p{color:var(--ink-soft);font-size:.95rem}
.deep-list{list-style:none;margin-top:18px;display:grid;gap:10px}
.deep-list li{
  display:flex;gap:10px;align-items:flex-start;font-size:.92rem;font-weight:700;
  background:var(--white);border:2px solid var(--ink);border-radius:16px;padding:10px 16px;
}
.deep-list .chk{flex:none;width:22px;height:22px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;margin-top:4px}
.deep-list small{display:block;font-weight:500;color:var(--ink-soft);font-size:.8rem}

/* ---- スタッフ紹介 ---- */
.staff{background:var(--cream2);border-radius:48px;margin:0 10px}
.staff-grid{display:grid;gap:22px;margin-top:44px}
.staff-card{
  position:relative;background:var(--white);border:3px solid var(--ink);border-radius:28px;
  padding:24px 22px 26px;transition:transform .55s var(--ease-soft),box-shadow .55s var(--ease-soft);
}
.staff-card:hover{transform:translateY(-8px) rotate(.6deg);box-shadow:var(--shadow-pop)}
.staff-card:nth-child(2):hover{transform:translateY(-8px) rotate(-.6deg)}
.staff-card .ph{min-height:230px;margin-bottom:18px}
.staff-quote{font-size:1.15rem;font-weight:900;line-height:1.7}
.staff-quote .marker{padding:0 2px}
.staff-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.staff-meta span{display:inline-block;font-size:.78rem;font-weight:900;padding:3px 14px;border-radius:999px}
.staff-meta .role{background:var(--green-soft);color:#0A5E36}
.staff-meta .years{background:var(--blue-soft);color:var(--ink)}
.staff-card p.staff-body{font-size:.88rem;color:var(--ink-soft);margin-top:12px}
.staff-note{margin-top:26px;font-size:.85rem;color:var(--ink-soft)}

/* ---- 管理責任者あいさつ ---- */
.greet{overflow:visible}
.greet-grid{display:grid;gap:32px;align-items:start;margin-top:44px}
.greet-photo{position:relative}
.greet-photo .ph{min-height:320px}
.greet-name{
  margin-top:16px;background:var(--white);border:3px solid var(--ink);border-radius:20px;
  padding:14px 20px;text-align:center;
}
.greet-name strong{display:block;font-size:1.15rem;font-weight:900}
.greet-name span{display:block;font-size:.8rem;color:var(--ink-soft);font-weight:700}
.greet-card{position:relative;background:var(--white);border:3px solid var(--ink);border-radius:32px;padding:36px 28px 30px}
.greet-badge{
  position:absolute;top:-22px;left:24px;transform:rotate(-3deg);
  background:var(--blue);color:#fff;font-weight:900;font-size:.88rem;
  padding:8px 20px;border-radius:999px;box-shadow:var(--shadow-pop);
}
.greet-card h3{font-size:clamp(1.25rem,3.6vw,1.6rem);font-weight:900;line-height:1.7;margin:6px 0 16px}
.greet-card p{font-size:.95rem;color:var(--ink-soft);margin-top:12px}

/* ---- レスポンシブ ---- */
@media(min-width:600px){
  .phil-grid{grid-template-columns:1fr 1fr}
  .staff-grid{grid-template-columns:1fr 1fr}
  .sumairu{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .deep-row{grid-template-columns:1fr 1.05fr;gap:48px}
  .deep-row.rev .deep-photo{order:2}
  .greet-grid{grid-template-columns:340px 1fr;gap:44px}
}
@media(min-width:1024px){
  .staff-grid{grid-template-columns:repeat(3,1fr)}
}