@charset "UTF-8";

/* =====================================================
  SYSTEM SUMMARY – MYTHOS CORE (Brand-Tokenized)
  - 子テーマは --brand-* を上書きするだけで反映
===================================================== */

.system-summary{
  background: var(--brand-bg, #fff);
  padding: 140px 0 170px;

  /* ink系（ブランド連動） */
  --sys-ink: var(--brand-ink, #111);
  --sys-soft: color-mix(in srgb, var(--sys-ink) 60%, transparent);
  --sys-line: var(--brand-line, rgba(0,0,0,.10));

  /* accent（茜=赤 / ミトス=金） */
  --sys-accent: var(--brand-accent, #9c7a2f);

  --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;
  }
}

.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);
  }
}

.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 .title{
  margin:0 0 var(--sys-gap-2);
}

.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);
}

.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;
  }
}

.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 color-mix(in srgb, var(--sys-ink) 15%, transparent);
  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: color-mix(in srgb, var(--sys-ink) 88%, transparent);
  margin:0 0 10px;
}

.system-card__meta{
  font-family:var(--font-en,"Cinzel",serif);
  font-size:11.5px;
  letter-spacing:.12em;
  color: color-mix(in srgb, var(--sys-ink) 60%, transparent);
  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: color-mix(in srgb, var(--sys-ink) 48%, transparent);
  margin:0;
  margin-top:auto;
}

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

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

/* CTA（色・線を brand accent に） */
.system-summary__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

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

  color: color-mix(in srgb, var(--sys-ink) 78%, transparent);
  padding:10px 12px 12px;

  background:transparent;
  border:none;
  box-shadow:none;

  position:relative;
  transition:opacity .3s ease, transform .3s ease;
}

.system-summary__cta::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:220px;
  height:1px;
  background: var(--sys-accent);
  opacity: .55;
  transition:
    opacity .3s ease,
    width .6s cubic-bezier(.16,1,.30,1);
}

.system-summary__cta:link,
.system-summary__cta:visited,
.system-summary__cta:hover,
.system-summary__cta:active{
  color: color-mix(in srgb, var(--sys-ink) 78%, transparent);
}

.system-summary__cta:hover{
  opacity:.72;
  transform:translateY(1px);
}

.system-summary__cta:hover::after{
  width:240px;
  opacity: .85;
}

.system-summary__cta:focus-visible{
  outline:2px solid color-mix(in srgb, var(--sys-accent) 55%, transparent);
  outline-offset:6px;
}

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