.philo { background: var(--navy); color: #fff; padding: var(--sec) 0; position: relative; overflow: hidden; }
.philo::after {
  content: ""; position: absolute; right: -8vw; top: -10vw; width: 42vw; aspect-ratio: 1;
  background: url(../assets/symbol-white.svg) center/contain no-repeat; opacity: .06;
}
.philo-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; position: relative; z-index: 1; }
.philo .en { color: var(--sky); font-size: 14px; margin: 0 0 10px; }
.philo-copy { margin: 0; font-size: var(--t-h2); line-height: 1.55; letter-spacing: .06em; }
.philo-text p { margin: 0 0 1.1em; color: #cdd7ea; line-height: 2; }

.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: calc(var(--sec) * -.35) 0 var(--gap); position: relative; z-index: 2; }
.value { background: var(--blue); color: #fff; border-radius: var(--r-lg); padding: clamp(22px, 2.6vw, 36px); position: relative; overflow: hidden; box-shadow: var(--shadow); }
.value:nth-child(2) { background: #1b468a; }
.value:nth-child(3) { background: #163b75; }
.value .en { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .7); }
.value h3 { margin: 2px 0 18px; font-size: clamp(30px, 2.6vw + 12px, 44px); letter-spacing: .12em; line-height: 1.3; }
.value svg { position: absolute; right: -10px; bottom: -10px; width: 46%; color: rgba(255, 255, 255, .1); }
.value p:last-child { margin: 0; position: relative; line-height: 2; }

.credo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); }
.block { padding: clamp(22px, 2.8vw, 40px); }
.block .en { margin: 0 0 4px; font-size: 14px; color: var(--sky); }
.block h2 { margin: 0 0 18px; font-size: var(--t-h3); letter-spacing: .05em; line-height: 1.5; }
.mind { margin: 0; display: grid; gap: 4px; }
.mind div { padding: 14px 0; border-top: 1px solid var(--line); }
.mind dt { font-weight: 700; color: var(--blue); }
.mind dd { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.ki { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ki li { display: flex; gap: 16px; align-items: flex-start; }
.ki p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.kk { flex: none; width: 74px; padding: 8px 0; border-radius: 16px; color: #fff; text-align: center; font-weight: 700; font-size: 18px; line-height: 1.2; letter-spacing: .06em; }
.kk small { display: block; font-size: 10.5px; font-weight: 500; opacity: .85; letter-spacing: .1em; }
.k1 { background: #d9544a; } .k2 { background: #3d9a5f; } .k3 { background: var(--sky); }

.cl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.cl-head h2 { margin-bottom: 0; }
.cl-count { margin: 0; color: var(--muted); display: flex; align-items: baseline; gap: 6px; }
.cl-count b { font: 700 40px/1 var(--en); color: var(--ink); }
.cl-count button { margin-left: 14px; border: 0; background: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.cl-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 16px; }
.cl-group h3 { font-size: 15px; margin: 0 0 8px; color: var(--blue); letter-spacing: .04em; }
.cl-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 8px; border-radius: 14px; background: var(--bg); cursor: pointer; font-size: 15px; line-height: 1.7; transition: background .2s; }
.cl-item:hover { background: #e9eff6; }
.cl-item input { appearance: none; flex: none; width: 24px; height: 24px; margin: 1px 0 0; border-radius: 8px; border: 2px solid #b4c1d4; background: #fff; display: grid; place-items: center; cursor: pointer; transition: .2s; }
.cl-item input:checked { background: var(--blue); border-color: var(--blue); }
.cl-item input:checked::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.cl-item:has(input:checked) { background: var(--sky-soft); color: var(--muted); }
.note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

.msg { margin-top: var(--sec); background: linear-gradient(180deg, #2a3f63, var(--navy)); color: #fff; padding: var(--sec) 0; }
.msg-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 80px); }
.msg-copy { margin: 0; font-size: var(--t-h2); line-height: 1.6; letter-spacing: .08em; }
.msg p { margin: 0 0 1.2em; color: #cdd7ea; line-height: 2.1; }
.msg + .foot { margin-top: 0; }

@media (max-width: 900px) {
  .philo-in, .msg-in, .credo-grid { grid-template-columns: 1fr; }
  .values, .cl-groups { grid-template-columns: 1fr; }
  .values { margin-top: var(--gap); }
}