/* =========================================================
  about.css
  - ABOUTページ専用（事故防止のため必ずスコープ）
  - トップのトーンは維持しつつ、NAVICUS風 “ブロブ＋丸抜き＋交互レイアウト”
========================================================= */

body.page.page-about .container{
  max-width: 1120px;
}

/* =================================
  HERO
================================= */
body.page.page-about .about-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 10vh, 120px) 0 clamp(56px, 8vh, 88px);
}

/* 背景：トップの空気に寄せた薄グラデ＋ノイズ */
body.page.page-about .about-heroBg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(244,183,64,.14), transparent 64%),
    radial-gradient(900px 520px at 82% 32%, rgba(47,127,111,.18), transparent 66%),
    radial-gradient(760px 420px at 50% 80%, rgba(111,143,122,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
}
body.page.page-about .about-heroBg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: var(--noise);
  opacity:.50;
  mix-blend-mode:multiply;
}

/* 2カラム：左テキスト／右丸ビジュアル */
body.page.page-about .about-heroInner{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}

body.page.page-about .about-breadcrumb{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.58);
  margin: 0 0 10px;
}
body.page.page-about .about-breadcrumb .dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(47,127,111,.55);
  box-shadow: 0 6px 16px rgba(47,127,111,.18);
}

body.page.page-about .about-heroTitle{
  margin: 0 0 8px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.22;
  letter-spacing: .02em;
}
body.page.page-about .about-heroEn{
  margin: 0 0 18px;
  letter-spacing: .22em;
  color: rgba(184,138,26,.92);
}

body.page.page-about .about-leadCard{
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}
body.page.page-about .about-lead{
  margin: 0 0 12px;
  max-width: 70ch;
  line-height: 1.9;
}
body.page.page-about .about-mini .k{
  margin: 10px 0 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.62);
}
body.page.page-about .about-mini .t{
  margin: 0 0 8px;
  font-weight: 700;
}
body.page.page-about .about-mini .d{
  margin: 0;
  color: rgba(0,0,0,.74);
  line-height: 1.85;
}

body.page.page-about .about-heroActions{
  margin-top: 16px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}

/* 丸抜きビジュアル */
body.page.page-about .about-circle{
  width: min(340px, 70vw);
  aspect-ratio: 1/1;
  border-radius: 999px;
  overflow: hidden;
  margin-left: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.12);
  background: rgba(255,255,255,.8);
}
body.page.page-about .about-circle img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}
body.page.page-about .about-circle.is-lg{ width: min(380px, 76vw); }
body.page.page-about .about-circle.is-xl{ width: min(420px, 78vw); }

/* ブロブ（装飾） */
body.page.page-about .about-blobs{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
body.page.page-about .about-blobs .blob{
  position:absolute;
  width: 58px; height: 58px;
  border-radius: 999px;
  filter: blur(.2px);
  opacity: .95;
}
body.page.page-about .about-blobs .b1{ left: 6%; top: 18%; background: rgba(244,183,64,.35); }
body.page.page-about .about-blobs .b2{ left: 12%; top: 58%; background: rgba(47,127,111,.22); width: 72px; height:72px; }
body.page.page-about .about-blobs .b3{ left: 42%; top: 22%; background: rgba(120,170,255,.20); }
body.page.page-about .about-blobs .b4{ right: 10%; top: 22%; background: rgba(255,120,170,.18); width: 68px; height:68px; }
body.page.page-about .about-blobs .b5{ right: 18%; bottom: 18%; background: rgba(111,143,122,.18); }
body.page.page-about .about-blobs .b6{ left: 50%; bottom: 10%; background: rgba(184,138,26,.18); width: 88px; height:88px; }

/* =================================
  共通ラッパ（中央のまとまり）
================================= */
body.page.page-about .about-wrap{
  max-width: 980px;
}
body.page.page-about .about-centerCard{
  max-width: 720px;
  margin: 0 auto;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

body.page.page-about .about-oneTeam .k{
  margin:0 0 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.62);
}
body.page.page-about .about-oneTeam .t{
  margin:0 0 6px;
  font-weight: 800;
  letter-spacing: .06em;
}
body.page.page-about .about-oneTeam .d{
  margin:0 0 14px;
  color: rgba(0,0,0,.74);
}

/* テーマタグ */
body.page.page-about .about-tags{
  display:flex;
  flex-wrap: wrap;
  gap:8px;
}
body.page.page-about .about-tags .tag{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  font-size: 12px;
  color: rgba(0,0,0,.72);
}

/* =================================
  VISION：交互レイアウト
================================= */
body.page.page-about .about-alt{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}

body.page.page-about .about-secCap{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(0,0,0,.58);
}
body.page.page-about .about-h2{
  margin: 0 0 12px;
  font-family:"Noto Serif JP", serif;
  font-size: clamp(26px, 3.1vw, 36px);
  line-height: 1.35;
}
body.page.page-about .about-p{
  margin: 0 0 14px;
  line-height: 1.9;
  color: rgba(0,0,0,.74);
}

/* 3行リスト */
body.page.page-about .about-list{
  display:grid;
  gap: 10px;
}
body.page.page-about .about-li{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
body.page.page-about .about-li .k{
  margin:0 0 4px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(184,138,26,.92);
}
body.page.page-about .about-li .t{
  margin:0;
  font-weight: 700;
}

/* OUR PLACE 帯 */
body.page.page-about .about-place{
  margin-top: 18px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
}
body.page.page-about .about-placeBg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 30% 40%, rgba(47,127,111,.25), transparent 62%),
    radial-gradient(820px 420px at 70% 60%, rgba(244,183,64,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
}
body.page.page-about .about-placeBg::after{
  content:"";
  position:absolute; inset:0;
  background-image: var(--noise);
  opacity: .45;
  mix-blend-mode:multiply;
}
body.page.page-about .about-placeIn{
  position: relative;
  padding: 18px 20px;
}
body.page.page-about .about-placeIn .k{
  margin:0 0 8px;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(0,0,0,.58);
}
body.page.page-about .about-placeIn .t{
  margin:0;
  font-weight: 700;
  color: rgba(0,0,0,.76);
}

/* =================================
  VALUE：丸い指針（4つ）
================================= */
body.page.page-about .about-poles{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
body.page.page-about .about-poles .pole{
  border-radius: 999px;
  padding: 18px 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  text-align: center;
}
body.page.page-about .about-poles .pole .k{
  margin:0 0 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(184,138,26,.92);
}
body.page.page-about .about-poles .pole .t{
  margin:0 0 6px;
  font-weight: 800;
}
body.page.page-about .about-poles .pole .d{
  margin:0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(0,0,0,.70);
  text-wrap: balance;
}

/* TEAMバー */
body.page.page-about .about-teamBar{
  margin-top: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
}
body.page.page-about .about-teamBarIn{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

/* =================================
  MESSAGE
================================= */
body.page.page-about .about-message{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}

/* =================================
  HOW：3ステップ
================================= */
body.page.page-about .about-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
body.page.page-about .about-steps .step{
  border-radius: 16px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
body.page.page-about .about-steps .step .k{
  margin:0 0 6px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(184,138,26,.92);
}
body.page.page-about .about-steps .step .t{
  margin:0 0 6px;
  font-weight: 800;
}
body.page.page-about .about-steps .step .d{
  margin:0;
  color: rgba(0,0,0,.72);
  line-height: 1.8;
}

/* CONTACTバー */
body.page.page-about .about-contactBar{
  margin-top: 16px;
  border-radius: 18px;
  background: rgba(47,127,111,.92);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
}
body.page.page-about .about-contactBarIn{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}
body.page.page-about .about-contactBar .kicker,
body.page.page-about .about-contactBar .title,
body.page.page-about .about-contactBar .note{
  color: #fff;
}
body.page.page-about .about-contactBar .note{
  opacity: .9;
}

/* =================================
  Responsive
================================= */
@media (max-width: 980px){
  body.page.page-about .about-heroInner{
    grid-template-columns: 1fr;
  }
  body.page.page-about .about-circle{
    margin: 10px auto 0;
  }
  body.page.page-about .about-alt{
    grid-template-columns: 1fr;
  }
  body.page.page-about .about-message{
    grid-template-columns: 1fr;
  }
  body.page.page-about .about-poles{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.page.page-about .about-steps{
    grid-template-columns: 1fr;
  }
  body.page.page-about .about-teamBarIn,
  body.page.page-about .about-contactBarIn{
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 520px){
  body.page.page-about .about-leadCard{
    padding: 16px 14px 14px;
  }
  body.page.page-about .about-poles{
    grid-template-columns: 1fr;
  }
}