@charset "UTF-8";
.design_light *,
.design_light *::before,
.design_light *::after {
  box-sizing: border-box;
}
.design_light {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: 100vh;
  margin: 0;
  background-color: #eef0f4;
  color: #1d2230;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.design_light main {
  overflow-x: clip;
}
.design_light section[id] {
  scroll-margin-top: 84px;
}
.design_light img {
  display: block;
  max-width: 100%;
  height: auto;
}
.design_light a {
  color: inherit;
}
.design_light p {
  margin: 0;
}
.design_light :focus-visible {
  outline: 3px solid #3b68b5;
  outline-offset: 3px;
}
.design_light .inner_box {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px) {
  .design_light .inner_box {
    padding: 0 20px;
  }
}
.design_light {
  /* ---------- 背景：斜めの細い線（ゆっくり横へ流れる）＋ゆっくり描かれる曲線 ---------- */
}
.design_light .bg_layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-image: radial-gradient(ellipse 70% 55% at 72% 8%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
}
.design_light .bg_layer::before {
  position: absolute;
  inset: 0 -40px;
  content: "";
  background-image: repeating-linear-gradient(-45deg, rgba(29, 34, 48, 0.06) 0 1px, transparent 1px 12px);
  animation: lt_hatch 6s linear infinite;
  will-change: transform;
}
@keyframes lt_hatch {
  from {
    transform: translateX(-16.97px);
  }
  to {
    transform: translateX(0);
  }
}
.design_light .bg_curves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.design_light .bg_curve,
.design_light .bg_flow {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.design_light .bg_curve {
  stroke: rgba(43, 49, 64, 0.2);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lt_bg_draw 9s cubic-bezier(0.55, 0, 0.25, 1) forwards;
}
.design_light .bg_curve_2 {
  animation-delay: 1.4s;
}
.design_light .bg_curve_3 {
  animation-delay: 2.6s;
  stroke: rgba(43, 49, 64, 0.12);
}
.design_light .bg_curve_4 {
  animation-delay: 3.6s;
  stroke: rgba(59, 104, 181, 0.32);
}
.design_light .bg_flow {
  stroke: rgba(59, 104, 181, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 0.012 0.988;
  stroke-dashoffset: 0;
  animation: lt_bg_flow 26s linear 6s infinite;
  opacity: 0;
}
@keyframes lt_bg_draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes lt_bg_flow {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
.design_light {
  /* ---------- 立方体（CSS 3D・6面） ---------- */
}
.design_light .iso_stage {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  transform: translateX(-50%) scale(var(--fit, 1));
  transform-origin: 50% 0;
}
.design_light .iso_scene {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform: rotateX(55deg) rotateZ(-45deg);
}
.design_light .iso_cube {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--w);
  height: var(--d);
  transform-style: preserve-3d;
  transform: translate3d(var(--x), var(--y), var(--z));
}
.design_light .iso_face {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform-origin: 0 0;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(43, 49, 64, 0.07);
}
.design_light .iso_face_top {
  width: var(--w);
  height: var(--d);
  transform: translateZ(var(--h));
}
.design_light .iso_face_bottom {
  width: var(--w);
  height: var(--d);
  background-color: #c9cfd9;
}
.design_light .iso_face_front {
  width: var(--w);
  height: var(--h);
  transform: translateY(var(--d)) translateZ(var(--h)) rotateX(-90deg);
  background-color: #dde1e9;
}
.design_light .iso_face_back {
  width: var(--w);
  height: var(--h);
  transform: rotateX(90deg);
  background-color: #cfd5df;
}
.design_light .iso_face_left {
  width: var(--h);
  height: var(--d);
  transform: rotateY(-90deg);
  background-color: #f0f2f6;
}
.design_light .iso_face_right {
  width: var(--h);
  height: var(--d);
  transform: translateX(var(--w)) translateZ(var(--h)) rotateY(90deg);
  background-color: #cfd5df;
}
.design_light .iso_dark .iso_face {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.design_light .iso_dark .iso_face_top {
  background-color: #3c4456;
}
.design_light .iso_dark .iso_face_left {
  background-color: #2b3140;
}
.design_light .iso_dark .iso_face_front {
  background-color: #20252f;
}
.design_light .iso_dark .iso_face_back,
.design_light .iso_dark .iso_face_right,
.design_light .iso_dark .iso_face_bottom {
  background-color: #171a22;
}
.design_light .iso_glass .iso_face {
  background-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95);
}
.design_light .iso_glass .iso_face_top {
  background-color: rgba(255, 255, 255, 0.42);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%);
}
.design_light .iso_glass .iso_face_left {
  background-color: rgba(255, 255, 255, 0.34);
}
.design_light .iso_glass .iso_face_front {
  background-color: rgba(214, 221, 233, 0.4);
}
.design_light .iso_blue .iso_face {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.design_light .iso_blue .iso_face_top {
  background-color: #5f87cf;
}
.design_light .iso_blue .iso_face_left {
  background-color: #3b68b5;
}
.design_light .iso_blue .iso_face_front {
  background-color: #2d5193;
}
.design_light .iso_blue .iso_face_back,
.design_light .iso_blue .iso_face_right,
.design_light .iso_blue .iso_face_bottom {
  background-color: #243f72;
}
.design_light {
  /* ---------- header ---------- */
}
.design_light .header_area {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(238, 240, 244, 0.92);
  border-bottom: 1px solid rgba(29, 34, 48, 0.12);
  transition: box-shadow 0.3s;
}
.design_light .header_area.is_scrolled {
  box-shadow: 0 8px 24px rgba(29, 34, 48, 0.06);
}
.design_light .header_inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}
@media (max-width: 640px) {
  .design_light .header_inner {
    gap: 12px;
    height: 60px;
  }
}
.design_light .header_logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .design_light .header_logo {
    gap: 8px;
    font-size: 12px;
    line-height: 1.35;
  }
}
.design_light .header_mark {
  flex-shrink: 0;
}
.design_light .header_mark .mark_top {
  fill: #ffffff;
  stroke: #2b3140;
  stroke-width: 1;
  stroke-linejoin: round;
}
.design_light .header_mark .mark_left {
  fill: #2b3140;
}
.design_light .header_mark .mark_right {
  fill: #596277;
}
.design_light .header_nav {
  margin-left: auto;
}
.design_light .header_nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.design_light .header_nav li {
  flex-shrink: 0;
}
.design_light .header_nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.design_light .header_nav a:hover {
  background-color: rgba(43, 49, 64, 0.06);
}
@media (max-width: 900px) {
  .design_light .header_nav {
    display: none;
  }
}
.design_light .header_btn {
  flex-shrink: 0;
  padding: 9px 20px;
  border-radius: 4px;
  background-color: #2b3140;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 #1c2029;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.design_light .header_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #1c2029;
}
@media (max-width: 640px) {
  .design_light .header_btn {
    padding: 8px 14px;
    font-size: 13px;
  }
}
.design_light {
  /* ---------- 共通の部品 ---------- */
}
.design_light .btn_primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 32px;
  border-radius: 6px;
  background-color: #2b3140;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 5px 0 #1c2029, 0 16px 30px rgba(29, 34, 48, 0.18);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.design_light .btn_primary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.design_light .btn_primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #1c2029, 0 24px 38px rgba(29, 34, 48, 0.2);
}
.design_light .btn_primary:hover::after {
  transform: translateX(4px) rotate(45deg);
}
.design_light .btn_primary:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #1c2029, 0 6px 14px rgba(29, 34, 48, 0.16);
}
.design_light .sec_area {
  position: relative;
  padding: 120px 0;
  counter-increment: sec_no;
}
@media (max-width: 900px) {
  .design_light .sec_area {
    padding: 96px 0;
  }
}
@media (max-width: 640px) {
  .design_light .sec_area {
    padding: 72px 0;
  }
}
.design_light main {
  counter-reset: sec_no;
}
.design_light .sec_title {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.03em;
}
.design_light .sec_title::before {
  content: counter(sec_no, decimal-leading-zero);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: #3b68b5;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.design_light .sec_title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 18px;
  background-color: #2b3140;
}
.design_light .sec_lead {
  margin: 0 0 48px;
  color: #5a6172;
}
@media (max-width: 640px) {
  .design_light .sec_lead {
    margin-bottom: 36px;
  }
}
.design_light {
  /* ---------- hero ---------- */
}
.design_light .hero_area {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(640px, 100vh - 68px);
  padding: 64px 0 80px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .design_light .hero_area {
    align-items: flex-start;
    min-height: 0;
    padding: 32px 0 calc(min(96vw, 460px) + 24px);
  }
}
.design_light .hero_machine {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.design_light .hero_inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.design_light .hero_copy {
  max-width: 560px;
  padding: 44px 44px 40px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 0 2px rgba(43, 49, 64, 0.06), 24px 30px 60px rgba(29, 34, 48, 0.1);
}
@media (max-width: 1024px) {
  .design_light .hero_copy {
    max-width: 500px;
    padding: 36px 34px 32px;
  }
}
@media (max-width: 900px) {
  .design_light .hero_copy {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .design_light .hero_copy {
    padding: 26px 20px 22px;
  }
}
.design_light .hero_eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #5a6172;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.design_light .hero_eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  background-color: #3b68b5;
  transform: rotate(45deg) scaleY(0.6);
}
.design_light .hero_title {
  margin: 18px 0 22px;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.design_light .hero_mark {
  white-space: nowrap;
  background-image: linear-gradient(transparent 70%, rgba(59, 104, 181, 0.2) 70%);
}
.design_light .hero_text {
  margin-bottom: 34px;
  color: #5a6172;
}
@media (max-width: 640px) {
  .design_light .hero_text br {
    display: none;
  }
}
.design_light .hero_proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(29, 34, 48, 0.12);
}
.design_light .hero_proof li {
  padding: 16px 12px 0 0;
  color: #5a6172;
  font-size: 13px;
  line-height: 1.6;
}
.design_light .hero_proof li + li {
  padding-left: 16px;
  border-left: 1px solid rgba(29, 34, 48, 0.12);
}
.design_light .hero_proof b {
  display: block;
  margin-bottom: 4px;
  color: #1d2230;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .design_light .hero_proof li {
    font-size: 12px;
  }
  .design_light .hero_proof li + li {
    padding-left: 10px;
  }
  .design_light .hero_proof b {
    font-size: 17px;
  }
}
.design_light {
  /* ---------- case ---------- */
}
.design_light .case_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: case_no;
}
@media (max-width: 900px) {
  .design_light .case_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}
.design_light .case_item {
  position: relative;
  padding: 34px 30px 32px;
  border-radius: 4px;
  background-color: #ffffff;
  counter-increment: case_no;
  box-shadow: 1px 1px 0 #e4e7ed, 2px 2px 0 #e0e3ea, 3px 3px 0 #dbdfe6, 4px 4px 0 #d7dbe3, 5px 5px 0 #d3d7e0, 16px 22px 30px rgba(29, 34, 48, 0.06);
}
.design_light .case_item::before {
  content: counter(case_no, decimal-leading-zero);
  position: absolute;
  top: 30px;
  right: 28px;
  color: #8c93a3;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
}
.design_light .case_item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  content: "";
  background: linear-gradient(to top left, #eef0f4 0 50%, #3b68b5 50% 100%);
  box-shadow: -3px -3px 6px rgba(29, 34, 48, 0.15);
  transition: width 0.35s cubic-bezier(0.3, 1.45, 0.5, 1), height 0.35s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.design_light .case_item:hover::after {
  width: 58px;
  height: 58px;
}
.design_light .case_item:hover .icon_fill {
  fill: #3b68b5;
}
@media (max-width: 640px) {
  .design_light .case_item {
    padding: 28px 22px 26px;
  }
}
.design_light .case_icon {
  display: block;
  margin-bottom: 20px;
}
.design_light .case_icon .icon_fill {
  fill: rgba(59, 104, 181, 0.16);
  stroke: #2b3140;
  stroke-width: 1.4;
  stroke-linejoin: round;
  transition: fill 0.4s;
}
.design_light .case_icon .icon_line {
  fill: none;
  stroke: #2b3140;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.design_light .case_name {
  margin: 0 0 12px;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 700;
  line-height: 1.5;
}
.design_light .case_text {
  color: #5a6172;
  font-size: 15px;
}
.design_light {
  /* ---------- calc ---------- */
}
.design_light .calc_box {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(29, 34, 48, 0.12), 24px 30px 50px rgba(29, 34, 48, 0.07);
}
@media (max-width: 900px) {
  .design_light .calc_box {
    grid-template-columns: minmax(0, 1fr);
  }
}
.design_light .calc_inputs {
  display: grid;
  align-content: center;
  gap: 30px;
  padding: 44px 40px;
  border-right: 1px solid rgba(29, 34, 48, 0.12);
}
@media (max-width: 900px) {
  .design_light .calc_inputs {
    border-right: 0;
    border-bottom: 1px solid rgba(29, 34, 48, 0.12);
  }
}
@media (max-width: 640px) {
  .design_light .calc_inputs {
    gap: 26px;
    padding: 32px 22px;
  }
}
.design_light .calc_field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 12px;
}
.design_light .calc_field label {
  font-size: 15px;
  font-weight: 700;
}
.design_light .calc_field input {
  grid-column: 1/-1;
}
.design_light .calc_value {
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.design_light .calc_value span {
  margin-left: 4px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #5a6172;
  font-size: 13px;
}
.design_light input[type=range] {
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.design_light input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2b3140 var(--fill, 50%), #dce0e7 var(--fill, 50%));
}
.design_light input[type=range]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 2px solid #2b3140;
  border-radius: 3px;
  background-color: #ffffff;
  box-shadow: 0 3px 8px rgba(29, 34, 48, 0.2);
  transform: rotate(45deg);
  -webkit-appearance: none;
  appearance: none;
}
.design_light input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background-color: #dce0e7;
}
.design_light input[type=range]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background-color: #2b3140;
}
.design_light input[type=range]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #2b3140;
  border-radius: 3px;
  background-color: #ffffff;
  transform: rotate(45deg);
}
.design_light input[type=range]:focus-visible {
  outline: 3px solid #3b68b5;
  outline-offset: 4px;
}
.design_light .calc_output {
  display: grid;
  align-content: start;
  padding: 24px 40px 40px;
}
@media (max-width: 640px) {
  .design_light .calc_output {
    padding: 20px 22px 32px;
  }
}
.design_light .bar_visual {
  --fit: 1;
  position: relative;
  height: calc(340px * var(--fit) + 36px);
  overflow: hidden;
}
@media (max-width: 1024px) {
  .design_light .bar_visual {
    --fit: 0.86;
  }
}
@media (max-width: 900px) {
  .design_light .bar_visual {
    --fit: 1;
  }
}
@media (max-width: 640px) {
  .design_light .bar_visual {
    --fit: 0.7;
  }
}
.design_light .bar_stage {
  width: 400px;
  height: 340px;
}
.design_light .bar_scene {
  top: 170px;
  left: 50px;
  width: 300px;
  height: 140px;
}
.design_light .bar_shadow {
  position: absolute;
  inset: -30px;
  display: block;
  background-image: radial-gradient(closest-side, rgba(29, 34, 48, 0.16), rgba(29, 34, 48, 0));
  transform: translate3d(16px, 16px, -1px);
}
.design_light .bar_plate {
  --x: 0px;
  --y: 0px;
  --z: 0px;
  --w: 300px;
  --d: 140px;
  --h: 12px;
}
.design_light .bar_plate .iso_face_top {
  background-image: repeating-linear-gradient(-45deg, rgba(43, 49, 64, 0.09) 0 1px, transparent 1px 8px);
}
.design_light .bar_cube {
  --h: 10px;
}
.design_light .bar_hours {
  --x: 20px;
  --y: 35px;
  --z: 12px;
  --w: 70px;
  --d: 70px;
}
.design_light .bar_yen {
  --x: 115px;
  --y: 35px;
  --z: 12px;
  --w: 70px;
  --d: 70px;
}
.design_light .bar_months {
  --x: 210px;
  --y: 35px;
  --z: 12px;
  --w: 70px;
  --d: 70px;
}
.design_light .bar_legend {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #5a6172;
  font-size: 12px;
}
.design_light .bar_legend li {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.design_light .bar_key {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(29, 34, 48, 0.12);
  background-color: #ffffff;
  transform: rotate(45deg) scaleY(0.7);
}
.design_light .bar_key_yen {
  border-color: #2b3140;
  background-color: #2b3140;
}
.design_light .bar_key_months {
  border-color: #3b68b5;
  background-color: #3b68b5;
}
.design_light .calc_result {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid rgba(29, 34, 48, 0.12);
}
@media (max-width: 640px) {
  .design_light .calc_result {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}
.design_light .calc_label {
  margin-bottom: 4px;
  color: #5a6172;
  font-size: 13px;
}
.design_light .calc_big,
.design_light .calc_mid {
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}
.design_light .calc_big small,
.design_light .calc_mid small {
  margin-left: 6px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #5a6172;
  font-size: 14px;
}
.design_light .calc_big {
  font-size: clamp(36px, 3.8vw, 48px);
}
.design_light .calc_mid {
  font-size: clamp(28px, 2.8vw, 36px);
}
.design_light .calc_payback {
  grid-column: 1/-1;
  padding: 14px 18px;
  border-left: 3px solid #3b68b5;
  background-color: #f3f5f9;
  font-size: 15px;
}
.design_light .calc_payback b {
  font-size: 18px;
}
.design_light .calc_note {
  grid-column: 1/-1;
  color: #8c93a3;
  font-size: 12px;
}
.design_light {
  /* ---------- works：スキャナー ---------- */
}
.design_light .works_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
@media (max-width: 900px) {
  .design_light .works_wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
.design_light .scan_box {
  --p: 100%;
  position: relative;
  padding: 16px 16px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f6f7f9, #dde1e8);
  box-shadow: 0 0 0 1px rgba(29, 34, 48, 0.12), inset 0 1px 0 #ffffff, 8px 8px 0 #d3d8e1, 0 24px 50px rgba(29, 34, 48, 0.12);
}
@media (max-width: 640px) {
  .design_light .scan_box {
    padding: 10px 10px 8px;
  }
}
.design_light .scan_glass {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 3px;
  background: #12161f;
  box-shadow: inset 0 0 0 2px #2b3140;
}
.design_light .scan_glass img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.design_light .scan_glass::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0 18%, transparent 30%);
  pointer-events: none;
}
.design_light .scan_new {
  clip-path: inset(0 0 calc(100% - var(--p)) 0);
}
.design_light .scan_bar {
  position: absolute;
  top: var(--p);
  right: -2%;
  left: -2%;
  z-index: 2;
  height: 16px;
  margin-top: -8px;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(160, 220, 255, 0.6) 40%, #ffffff 50%, rgba(160, 220, 255, 0.6) 60%, transparent);
  box-shadow: 0 0 24px 8px rgba(120, 190, 255, 0.55);
  transition: opacity 0.2s;
}
.design_light .scan_box.is_scan .scan_bar {
  opacity: 1;
}
.design_light .scan_box.is_done .scan_glass::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background: rgba(200, 230, 255, 0.5);
  pointer-events: none;
  animation: lt_scan_flash 0.5s ease-out forwards;
}
@keyframes lt_scan_flash {
  to {
    opacity: 0;
  }
}
.design_light .scan_rail {
  position: absolute;
  top: 16px;
  bottom: 44px;
  width: 6px;
  border-radius: 3px;
  background: rgba(43, 49, 64, 0.12);
}
.design_light .scan_rail::after {
  position: absolute;
  top: var(--p);
  left: -3px;
  width: 12px;
  height: 18px;
  margin-top: -9px;
  border-radius: 3px;
  content: "";
  background: #2b3140;
  box-shadow: 0 0 0 2px #ffffff;
}
@media (max-width: 640px) {
  .design_light .scan_rail {
    display: none;
  }
}
.design_light .scan_rail_l {
  left: 4px;
}
.design_light .scan_rail_r {
  right: 4px;
}
.design_light .scan_info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: #5a6172;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .design_light .scan_info {
    font-size: 11px;
  }
}
.design_light .scan_state {
  flex-shrink: 0;
}
.design_light .scan_lamp {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #9aa3b5;
  transition: background 0.2s, box-shadow 0.2s;
}
.design_light .scan_box.is_scan .scan_lamp {
  background: #3fd07a;
  box-shadow: 0 0 8px #3fd07a;
}
.design_light .scan_name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #1d2230;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
}
.design_light .scan_pct {
  flex-shrink: 0;
}
.design_light .scan_srcs {
  display: none;
}
.design_light .stack_list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.design_light .stack_btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  width: 100%;
  padding: 20px 22px;
  border: 1px solid rgba(29, 34, 48, 0.12);
  border-radius: 6px;
  background-color: #ffffff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s;
}
.design_light .stack_btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 #d3d8e1;
}
.design_light .stack_btn[aria-pressed=true] {
  border-color: #2b3140;
  transform: translate(-4px, -4px);
  box-shadow: 5px 5px 0 #2b3140;
}
.design_light .stack_btn[aria-pressed=true] .stack_tag {
  border-color: #3b68b5;
  background-color: #3b68b5;
  color: #ffffff;
}
.design_light .stack_name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
.design_light .stack_tag {
  flex-shrink: 0;
  padding: 2px 10px;
  border: 1px solid rgba(29, 34, 48, 0.12);
  border-radius: 999px;
  color: #5a6172;
  font-size: 12px;
  white-space: nowrap;
}
.design_light .stack_text {
  grid-column: 1/-1;
  color: #5a6172;
  font-size: 14px;
  line-height: 1.75;
}
.design_light .works_note {
  margin-top: 32px;
  color: #8c93a3;
  font-size: 13px;
}
.design_light {
  /* ---------- profile ---------- */
}
.design_light .profile_body {
  position: relative;
  padding: 44px 48px;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(29, 34, 48, 0.12), 6px 6px 0 #d7dbe3;
}
@media (max-width: 640px) {
  .design_light .profile_body {
    padding: 30px 22px;
  }
}
.design_light .profile_name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-bottom: 18px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
}
.design_light .profile_shop {
  color: #5a6172;
  font-size: 14px;
  font-weight: 500;
}
.design_light .profile_text {
  color: #5a6172;
}
.design_light {
  /* ---------- menu：ふたが開く立方体 ---------- */
}
.design_light .menu_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 900px) {
  .design_light .menu_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .design_light .menu_list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.design_light .menu_item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 22px 26px;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(29, 34, 48, 0.12);
  transition: box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.design_light .menu_item:hover {
  box-shadow: 0 0 0 1px rgba(29, 34, 48, 0.12), 18px 24px 40px rgba(29, 34, 48, 0.1);
}
.design_light .menu_item_main {
  box-shadow: 0 0 0 2px #2b3140;
}
.design_light .menu_item_main:hover {
  box-shadow: 0 0 0 2px #2b3140, 18px 24px 40px rgba(29, 34, 48, 0.12);
}
.design_light .menu_cube_btn {
  --fit: 1;
  position: relative;
  display: block;
  width: calc(100% + 44px);
  height: calc(250px * var(--fit));
  margin: 0 -22px 6px;
  padding: 0;
  border: 0;
  border-radius: 6px 6px 0 0;
  background-color: #f6f7f9;
  background-image: repeating-linear-gradient(-45deg, rgba(29, 34, 48, 0.06) 0 1px, transparent 1px 10px);
  cursor: pointer;
  overflow: hidden;
}
.design_light .menu_cube_btn:focus-visible {
  outline-offset: -3px;
}
@media (max-width: 1024px) {
  .design_light .menu_cube_btn {
    --fit: 0.9;
  }
}
@media (max-width: 900px) {
  .design_light .menu_cube_btn {
    --fit: 1;
  }
}
.design_light .menu_stage {
  width: 240px;
  height: 250px;
}
.design_light .menu_scene {
  top: 152px;
  left: 72px;
  width: 96px;
  height: 96px;
}
.design_light .menu_shadow {
  position: absolute;
  inset: -26px;
  display: block;
  background-image: radial-gradient(closest-side, rgba(29, 34, 48, 0.22), rgba(29, 34, 48, 0));
  transform: translate3d(14px, 14px, -1px);
}
.design_light .menu_cube {
  --x: 0px;
  --y: 0px;
  --z: 0px;
  --w: 96px;
  --d: 96px;
  --h: 76px;
  translate: 0 0 0;
  transition: translate 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.design_light .menu_lid {
  transform: translateZ(var(--h)) rotateX(0deg);
  transition: transform 0.65s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.design_light .menu_plate {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--w);
  height: 60px;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(43, 49, 64, 0.14), inset 0 -3px 0 #3b68b5;
  color: #1d2230;
  line-height: 1.2;
  transform-origin: 0 0;
  transform: translateY(calc(var(--d) * 0.55)) translateZ(calc(var(--h) - 4px)) rotateX(-90deg);
  transition: transform 0.55s cubic-bezier(0.3, 1.45, 0.5, 1) 0.12s;
}
.design_light .menu_plate b {
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
}
.design_light .menu_plate small {
  margin-top: 4px;
  color: #5a6172;
  font-size: 10px;
  white-space: nowrap;
}
.design_light .iso_dark .menu_plate {
  background-color: #ffffff;
  box-shadow: inset 0 0 0 1px #2b3140, inset 0 -3px 0 #3b68b5;
}
.design_light .menu_item:hover .menu_cube_btn .menu_cube,
.design_light .menu_cube_btn:focus-visible .menu_cube,
.design_light .menu_cube_btn[aria-pressed=true] .menu_cube {
  translate: 0 0 6px;
}
.design_light .menu_item:hover .menu_cube_btn .menu_lid,
.design_light .menu_cube_btn:focus-visible .menu_lid,
.design_light .menu_cube_btn[aria-pressed=true] .menu_lid {
  transform: translateZ(var(--h)) rotateX(108deg);
}
.design_light .menu_item:hover .menu_cube_btn .menu_plate,
.design_light .menu_cube_btn:focus-visible .menu_plate,
.design_light .menu_cube_btn[aria-pressed=true] .menu_plate {
  transform: translateY(calc(var(--d) * 0.55)) translateZ(calc(var(--h) + 66px)) rotateX(-90deg);
}
.design_light .menu_tag {
  align-self: flex-start;
  margin: 0 0 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background-color: #2b3140;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.design_light .menu_name {
  margin: 4px 0 10px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.5;
}
.design_light .menu_text {
  margin-bottom: 18px;
  color: #5a6172;
  font-size: 14px;
  line-height: 1.75;
}
.design_light .menu_price {
  margin-top: auto;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 900;
  line-height: 1.3;
}
.design_light .menu_term {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(29, 34, 48, 0.12);
  color: #5a6172;
  font-size: 13px;
}
.design_light .menu_note {
  margin-top: 30px;
  color: #5a6172;
  font-size: 13px;
  line-height: 1.9;
}
.design_light {
  /* ---------- flow：台座と荷物 ---------- */
}
.design_light .flow_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
@media (max-width: 1024px) {
  .design_light .flow_wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}
.design_light .flow_visual {
  --fit: 1;
  position: relative;
  height: calc(400px * var(--fit));
  overflow: hidden;
}
@media (max-width: 640px) {
  .design_light .flow_visual {
    --fit: 0.58;
  }
}
.design_light .flow_stage {
  width: 560px;
  height: 400px;
}
.design_light .flow_scene {
  top: -20px;
  left: 160px;
  width: 240px;
  height: 500px;
}
.design_light .flow_svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  transform: translateZ(30px);
}
.design_light .flow_track {
  fill: none;
  stroke: rgba(43, 49, 64, 0.25);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}
.design_light .flow_line {
  fill: none;
  stroke: #3b68b5;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.design_light .flow_ped {
  --w: 90px;
  --d: 90px;
  --h: 30px;
  --z: 0px;
  translate: 0 0 0;
  transition: translate 0.55s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.design_light .flow_ped .iso_face_top {
  transition: background-color 0.4s;
}
.design_light .flow_ped.is_on {
  translate: 0 0 18px;
}
.design_light .flow_ped.is_on .iso_face_top {
  background-color: #2b3140;
}
.design_light .flow_ped.is_on .flow_ped_label {
  color: #ffffff;
}
.design_light .flow_ped.is_on .flow_ped_label b {
  color: #8fb0e8;
}
.design_light .flow_ped_1 {
  --x: 20px;
  --y: 10px;
}
.design_light .flow_ped_2 {
  --x: 130px;
  --y: 135px;
}
.design_light .flow_ped_3 {
  --x: 20px;
  --y: 260px;
}
.design_light .flow_ped_4 {
  --x: 130px;
  --y: 385px;
}
.design_light .flow_ped_label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c93a3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(45deg);
  transition: color 0.4s;
}
.design_light .flow_ped_label b {
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 26px;
  font-weight: 500;
  transition: color 0.4s;
}
.design_light .flow_shadow {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 22px;
  height: 22px;
  background: rgba(29, 34, 48, 0.4);
  filter: blur(3px);
  transform: translate3d(var(--x, 57px), var(--y, 47px), var(--z, 48.5px));
}
.design_light .flow_box {
  --x: 54px;
  --y: 44px;
  --z: 48px;
  --w: 22px;
  --d: 22px;
  --h: 22px;
}
.design_light .flow_list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.design_light .flow_item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 8px 18px;
  padding: 18px 22px;
  border-left: 3px solid #d3d8e1;
  border-radius: 0 6px 6px 0;
  background-color: #ffffff;
  transition: border-color 0.4s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.design_light .flow_item.is_on {
  border-left-color: #3b68b5;
  transform: translateX(6px);
  box-shadow: 10px 12px 26px rgba(29, 34, 48, 0.07);
}
.design_light .flow_item.is_on .flow_num {
  border-color: #2b3140;
  background-color: #2b3140;
  color: #ffffff;
}
@media (max-width: 640px) {
  .design_light .flow_item {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 18px;
  }
}
.design_light .flow_circle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}
.design_light .flow_num {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(29, 34, 48, 0.12);
  border-radius: 4px;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 15px;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.design_light .flow_text {
  color: #5a6172;
  font-size: 14px;
  line-height: 1.75;
}
.design_light {
  /* ---------- contact ---------- */
}
.design_light .contact_area {
  padding: 40px 0 120px;
}
@media (max-width: 640px) {
  .design_light .contact_area {
    padding: 24px 0 80px;
  }
}
.design_light .contact_panel {
  position: relative;
  padding: 72px 56px 60px;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(29, 34, 48, 0.12), 8px 8px 0 #d7dbe3, 30px 40px 60px rgba(29, 34, 48, 0.08);
}
.design_light .contact_panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 64px;
  height: 3px;
  background-color: #3b68b5;
  transform: translateX(-50%);
}
@media (max-width: 640px) {
  .design_light .contact_panel {
    padding: 52px 22px 40px;
  }
}
.design_light .contact_title {
  margin: 0 0 16px;
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 900;
  line-height: 1.4;
}
.design_light .contact_text {
  color: #5a6172;
}
.design_light .contact_btn {
  margin: 36px 0 40px;
}
@media (max-width: 640px) {
  .design_light .contact_btn .btn_primary {
    padding: 16px 24px;
    font-size: 15px;
  }
}
.design_light .contact_terms {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 0 0;
  border-top: 1px solid rgba(29, 34, 48, 0.12);
  list-style: none;
  text-align: left;
}
.design_light .contact_terms li {
  position: relative;
  padding-left: 22px;
  color: #5a6172;
  font-size: 14px;
  line-height: 1.75;
}
.design_light .contact_terms li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 8px;
  height: 8px;
  background-color: #2b3140;
  transform: rotate(45deg) scaleY(0.7);
}
.design_light .contact_mail {
  margin-top: 26px;
  font-size: 15px;
}
.design_light .ai_note {
  margin-top: 14px;
  color: #8c93a3;
  font-size: 12px;
}
.design_light {
  /* ---------- footer ---------- */
}
.design_light .footer_area {
  padding: 28px 0;
  border-top: 1px solid rgba(29, 34, 48, 0.12);
  color: #8c93a3;
  font-size: 12px;
  text-align: center;
}

.design_light .works_app {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 560px;
  margin-top: 28px;
  padding: 16px 22px 16px 18px;
  border: 1px solid rgba(29, 34, 48, 0.12);
  border-radius: 8px;
  background-color: #ffffff;
  color: #1d2230;
  text-decoration: none;
  box-shadow: 4px 4px 0 #d3d8e1;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s;
}
.design_light .works_app:hover {
  border-color: #2b3140;
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 #2b3140;
}
.design_light .works_app:hover .works_app_cover {
  transform: rotateY(-115deg);
}
.design_light .works_app:hover .works_app_arrow {
  transform: translateX(6px);
}
.design_light .works_app_book {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 58px;
  border-radius: 2px 5px 5px 2px;
  background: repeating-linear-gradient(180deg, #ffffff 0 9px, #d3ddd8 9px 10px);
  box-shadow: inset 0 0 0 1px #b9c7c0;
  perspective: 300px;
}
.design_light .works_app_book::after {
  position: absolute;
  top: 12px;
  right: 6px;
  left: 8px;
  height: 6px;
  content: "";
  background: #f6d55c;
}
.design_light .works_app_cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(160deg, #1a7d5f, #0b4a37);
  box-shadow: inset 4px 0 0 rgba(0, 0, 0, 0.2);
  color: #e9d9a4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.design_light .works_app_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.design_light .works_app_label {
  color: #11694f;
  font-size: 12px;
  font-weight: 700;
}
.design_light .works_app_name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}
.design_light .works_app_arrow {
  flex-shrink: 0;
  font-size: 20px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.design_light .scan_col {
  position: relative;
  min-width: 0;
}
.design_light .scan_col .scan_box {
  position: relative;
  z-index: 2;
}
.design_light .works_go {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 86%;
  margin: -6px auto 0;
  padding: 18px 20px 14px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, rgba(43, 49, 64, 0.12), transparent 10px), #ffffff;
  box-shadow: 0 0 0 1px rgba(29, 34, 48, 0.12), 0 10px 20px -12px rgba(29, 34, 48, 0.4);
  color: #1d2230;
  text-decoration: none;
  -webkit-mask: linear-gradient(#000, #000) top/100% calc(100% - 6px) no-repeat, radial-gradient(circle at 6px 0, transparent 3px, #000 3.5px) bottom/12px 6px repeat-x;
  mask: linear-gradient(#000, #000) top/100% calc(100% - 6px) no-repeat, radial-gradient(circle at 6px 0, transparent 3px, #000 3.5px) bottom/12px 6px repeat-x;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.7s steps(7, end), opacity 0.2s;
}
.design_light .works_go.is_out {
  transform: translateY(0);
  opacity: 1;
}
.design_light .works_go.is_none {
  display: none;
}
.design_light .works_go:hover .works_go_arrow {
  transform: translateX(6px);
}
.design_light .works_go:hover .works_go_name {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 640px) {
  .design_light .works_go {
    width: 94%;
  }
}
.design_light .works_go_kind {
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid #2b3140;
  border-radius: 3px;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 11px;
  white-space: nowrap;
}
.design_light .works_go_name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
}
.design_light .works_go_arrow {
  flex-shrink: 0;
  font-size: 18px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.design_light .sec_title,
.design_light .contact_title,
.design_light .case_name,
.design_light .hero_title {
  word-break: auto-phrase;
  text-wrap: balance;
}
.design_light .hero_proof li {
  word-break: auto-phrase;
}
.design_light {
  /* ---------- 守っていること：見えたら南京錠が1つずつ閉まり、右の数字が数え上がる ---------- */
}
.design_light .guard_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .design_light .guard_wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
.design_light .guard_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 640px) {
  .design_light .guard_list {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}
.design_light .guard_item {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 1px 1px 0 #e4e7ed, 2px 2px 0 #e0e3ea, 3px 3px 0 #dbdfe6, 4px 4px 0 #d7dbe3, 5px 5px 0 #d3d7e0, 16px 22px 30px rgba(29, 34, 48, 0.06);
  transition: transform 0.45s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.design_light .guard_item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  content: "";
  background-color: #3b68b5;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
}
.design_light .guard_item.is_locked {
  transform: translateY(-3px);
}
.design_light .guard_item.is_locked::before {
  transform: scaleX(1);
}
@media (max-width: 640px) {
  .design_light .guard_item {
    padding: 26px 22px 24px;
  }
}
.design_light .guard_lock {
  display: block;
  margin-bottom: 16px;
  overflow: visible;
}
.design_light .guard_lock .guard_shackle {
  fill: none;
  stroke: #2b3140;
  stroke-width: 3;
  stroke-linecap: round;
  transform: translateY(-7px) rotate(24deg);
  transform-box: fill-box;
  transform-origin: 0% 100%;
  transition: transform 0.45s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.design_light .guard_lock .guard_body {
  fill: rgba(59, 104, 181, 0.16);
  stroke: #2b3140;
  stroke-width: 1.6;
  transition: fill 0.35s 0.2s;
}
.design_light .guard_lock .guard_hole {
  fill: #2b3140;
  stroke: #2b3140;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.design_light .guard_item.is_locked .guard_lock .guard_shackle {
  transform: none;
}
.design_light .guard_item.is_locked .guard_lock .guard_body {
  fill: #3b68b5;
}
.design_light .guard_item.is_locked .guard_lock .guard_hole {
  fill: #ffffff;
  stroke: #ffffff;
}
.design_light .guard_name {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.5;
}
.design_light .guard_text {
  margin: 0;
  color: #5a6172;
  font-size: 15px;
}
.design_light .guard_side {
  position: sticky;
  top: 110px;
  padding: 26px 24px;
  border-radius: 4px;
  background-color: #2b3140;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 4px 0 #1c2029;
}
@media (max-width: 900px) {
  .design_light .guard_side {
    position: static;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 14px;
    padding: 16px 20px;
  }
}
.design_light .guard_meter {
  margin: 0;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  line-height: 1;
}
.design_light .guard_meter_num {
  display: inline-block;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 500;
}
.design_light .guard_meter_num.is_tick {
  animation: guard_tick 0.35s cubic-bezier(0.3, 1.45, 0.5, 1);
}
.design_light .guard_meter_of {
  margin-left: 6px;
  color: #9aa3b5;
  font-size: 20px;
}
.design_light .guard_meter_label {
  margin: 12px 0 0;
  color: #9aa3b5;
  font-family: "IBM Plex Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.24em;
  transition: color 0.3s;
}
.guard_side.is_all .design_light .guard_meter_label {
  color: #8fb0ea;
}
@media (max-width: 900px) {
  .design_light .guard_meter_label {
    margin: 0;
  }
}
@keyframes guard_tick {
  0% {
    transform: translateY(-14px);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.design_light .guard_more {
  margin: 40px 0 0;
}
.design_light .guard_link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 6px;
  background-color: #ffffff;
  color: #1d2230;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px #2b3140, 0 3px 0 #2b3140;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.design_light .guard_link::after {
  content: "→";
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.design_light .guard_link:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1.5px #2b3140, 0 5px 0 #2b3140;
}
.design_light .guard_link:hover::after {
  transform: translateX(4px);
}