@charset "UTF-8";

/* =====================================================
   SYSTEM SUMMARY – ULTRA SILENT (SLOW CARD VERSION)
===================================================== */

.system-summary{
  background:#fff;
  padding:140px 0 170px;

  --sys-soft: rgba(0,0,0,.60);
  --sys-gap-1: 28px;
  --sys-gap-2: 34px;
  --sys-gap-3: 44px;

  --sys-card-bg: #fff;
  --sys-shadow-1: 0 8px 24px rgba(0,0,0,.04);
  --sys-shadow-2: 0 24px 60px rgba(0,0,0,.05);
  --sys-shadow-hover-1: 0 16px 40px rgba(0,0,0,.06);
  --sys-shadow-hover-2: 0 36px 80px rgba(0,0,0,.08);

  /* 超静寂スピード */
  --card-dur: 1400ms;
  --card-img-dur: 1800ms;
  --card-ease: cubic-bezier(.16,1,.30,1);

  width:100%;
}

@media (max-width:768px){
  .system-summary{
    padding:96px 0 128px;

    --sys-gap-1: 20px;
    --sys-gap-2: 26px;
    --sys-gap-3: 34px;
  }
}

/* =====================================================
   FULL WIDE CONTAINER
===================================================== */

.system-summary > .container{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.system-summary .section-head,
.system-summary .system-cards,
.system-summary__cta-wrap{
  width:min(1400px, calc(100% - 80px));
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:768px){
  .system-summary .section-head,
  .system-summary .system-cards,
  .system-summary__cta-wrap{
    width:calc(100% - 36px);
  }
}

/* =====================================================
   HEAD
===================================================== */

.system-summary .section-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.system-summary .eyebrow{
  margin:0 0 var(--sys-gap-1);
}

.system-summary .lead{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  font-size:15px;
  line-height:2.2;
  letter-spacing:.06em;
  color:var(--sys-soft);
}

/* =====================================================
   CARDS
===================================================== */

.system-cards{
  margin-top:var(--sys-gap-3);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
  align-items:stretch;
}

@media (max-width:768px){
  .system-cards{
    grid-template-columns:1fr;
    gap:22px;
  }
}

/* =====================================================
   CARD – ULTRA SLOW FLOAT
===================================================== */

.system-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--sys-card-bg);
  border:none;
  box-shadow:var(--sys-shadow-1), var(--sys-shadow-2);
  text-decoration:none;
  color:inherit;

  transition:
    transform var(--card-dur) var(--card-ease),
    box-shadow var(--card-dur) var(--card-ease);
}

.system-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sys-shadow-hover-1), var(--sys-shadow-hover-2);
}

.system-card:focus-visible{
  outline:2px solid rgba(0,0,0,.15);
  outline-offset:6px;
}

/* 画像 */

.system-card__media{
  aspect-ratio:3 / 2;
  overflow:hidden;
  background:#f3f2ed;
}

.system-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);

  transition: transform var(--card-img-dur) var(--card-ease);
}

.system-card:hover .system-card__media img{
  transform:scale(1.05);
}

/* 本文 */

.system-card__body{
  padding:18px 20px 22px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
  background:transparent;
}

.system-card__title{
  font-family:var(--font-en,"Cinzel",serif);
  letter-spacing:.18em;
  font-weight:500;
  font-size:14px;
  text-transform:uppercase;
  color:rgba(0,0,0,.88);
  margin:0 0 10px;
}

.system-card__meta{
  font-family:var(--font-en,"Cinzel",serif);
  font-size:11.5px;
  letter-spacing:.12em;
  color:rgba(0,0,0,.60);
  margin:0 0 10px;
  font-variant-numeric:tabular-nums;
}

.system-card__meta .dot{
  opacity:.5;
  padding:0 6px;
}

.system-card__sub{
  font-size:13px;
  color:rgba(0,0,0,.48);
  margin:0;
  margin-top:auto;
}

/* =====================================================
   CTA
===================================================== */

.system-summary__cta-wrap{
  margin-top:96px;
  display:flex;
  justify-content:center;
}

@media (max-width:768px){
  .system-summary__cta-wrap{
    margin-top:64px;
  }
}

.system-summary__cta{
  display:inline-block;
  padding:10px 0 12px;

  text-decoration:none;
  font-family:var(--font-en,"Cinzel",serif);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;

  color:rgba(0,0,0,.78);
  border-bottom:1px solid rgba(0,0,0,.22);

  transition:opacity .3s ease,
             transform .3s ease,
             border-color .3s ease;
}

.system-summary__cta:link,
.system-summary__cta:visited,
.system-summary__cta:hover,
.system-summary__cta:active{
  color:rgba(0,0,0,.78);
}

.system-summary__cta:hover{
  opacity:.65;
  transform:translateY(-1px);
  border-bottom-color:rgba(0,0,0,.32);
}

.system-summary__cta:focus-visible{
  outline:2px solid rgba(0,0,0,.15);
  outline-offset:6px;
}

/* =====================================================
   Reduced Motion
===================================================== */

@media (prefers-reduced-motion: reduce){
  .system-card,
  .system-card__media img,
  .system-summary__cta{
    transition:none !important;
    transform:none !important;
  }
}