@charset "utf-8";
/* CSS Document */

.gaming-pc-matrix {
}

.gaming-pc-matrix header {
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:3px solid #1f1f1f;
}

.gaming-pc-matrix header p {
  margin:0 0 5px;
  color:#555;
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.1em;
}

.gaming-pc-matrix h1 {
  margin:0;
  font-size:2.25rem;
  line-height:1.25;
}

.gaming-pc-matrix h3 {
  padding:5px 16px;
  border-left:9px solid #fff000;
  background:#3a3a3a;
  color:#fff;
  box-shadow:0 3px 0 rgba(0,0,0,.14);
  font-size:1.5rem;
  letter-spacing:.07em;
}

.gaming-pc-matrix h3 small {
  display:inline;
  margin-left:10px;
  color:#dce5ed;
  font-size:14px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:.06em;
}

.gaming-pc-matrix h3 small:before {
  content:"― ";
}

.gaming-pc-matrix .cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.gaming-pc-matrix .card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:244px;
  padding:14px 20px 16px;
  border:2px solid #b8b8b8;
  border-top:8px solid #272727;
  border-radius:10px;
  background:#fff;
  color:#222;
  text-decoration:none;
  box-shadow:0 7px 0 #dedede,0 12px 24px rgba(0,0,0,.1);
  transition:border-color .1s,box-shadow .1s,transform .1s;
}

.gaming-pc-matrix .card:hover {
  border-color:#222;
  box-shadow:0 10px 0 #fff000,0 18px 30px rgba(0,0,0,.18);
  transform:translateY(-4px);
}

.gaming-pc-matrix .card:active {
    border-color:#222;
    transform:translateY(0px);
}

.gaming-pc-matrix .card:focus-visible {
  outline:3px solid #000;
  outline-offset:3px;
}

.gaming-pc-matrix .pc-label {
  position:relative;
  display: block;
  z-index:1;
  margin:0 0 4px;
	font-size:1.1rem;
  font-weight:800;
}

.gaming-pc-matrix dl {
  position:relative;
  z-index:1;
  margin:0;
}

.gaming-pc-matrix dl div {
  display:grid;
  grid-template-columns:116px 1fr;
  gap:7px;
  padding:7px 0;
  border-bottom:1px solid #d3d3d3;
}

.gaming-pc-matrix dt {
  color:#555;
  font-size:1rem;
  font-weight:500;
}

.gaming-pc-matrix dd {
  margin:0;
  font-size:1rem;
  font-weight:800;
  line-height:1.45;
}

.gaming-pc-matrix footer {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}

.gaming-pc-matrix footer strong {
  color:#d40000;
  font-size:1.6rem;
  font-weight: 700;
}

.gaming-pc-matrix .tax {
  margin-right:2px;
  font-size:.5em;
  font-weight: 400;
}

.gaming-pc-matrix .view {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border:2px solid #111;
  border-radius:999px;
  background:#fff000;
  color:#000;
  box-shadow:0 4px 0 #111;
  font-size:1rem;
  font-weight:900;
  line-height:1;
}

.gaming-pc-matrix .view b {
  margin-left:8px;
  font-size:1.4rem;
  line-height:.7;
}

.gaming-pc-matrix .card:hover .view {
  box-shadow:0 2px 0 #111;
  transform:translateY(2px);
}

.gaming-pc-matrix .card::after {
  content:"";
  position:absolute;
  right:14px;
  bottom:50px;
  z-index:0;
  width:46%;
  height:62%;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
  opacity:.16;
  pointer-events:none;
  user-select:none;
}

.gaming-pc-matrix .card--desktop::after {
  background-image:url("/contents/genre/a1020000/img/pc-icon-desktop.png");
}

.gaming-pc-matrix .card--note::after {
  right:10px;
  width:49%;
  height:64%;
  opacity:.18;
  background-image:url("/contents/genre/a1020000/img/pc-icon-note.png");
}

@media(max-width:800px) {
  .gaming-pc-matrix {
  }

  .gaming-pc-matrix h1 {
    font-size:1.75rem;
  }

  .gaming-pc-matrix h3 {
    padding:11px 12px;
    font-size:1.125rem;
  }

  .gaming-pc-matrix h3 small {
    font-size:.8125rem;
  }

  .gaming-pc-matrix .cards {
    grid-template-columns:1fr;
    gap:13px;
  }

  .gaming-pc-matrix .card {
    min-height:252px;
    padding:18px;
    border-top-width:7px;
    box-shadow:0 6px 0 #dedede,0 10px 20px rgba(0,0,0,.1);
  }

  .gaming-pc-matrix dl div {
    grid-template-columns:110px 1fr;
  }

  .gaming-pc-matrix .card::after {
    right:16px;
    bottom:54px;
    width:38%;
    height:54%;
    opacity:.13;
  }

  .gaming-pc-matrix .card--note::after {
    width:43%;
    height:58%;
    opacity:.15;
  }
	
	.gaming-pc-matrix dt,.gaming-pc-matrix dd{
		font-size: 14px;
	}
}

@media(max-width:400px) {
  /* .gaming-pc-matrix h3 small {
    display:none;
  } */

  .gaming-pc-matrix .card {
    min-height:262px;
  }

  .gaming-pc-matrix dl div {
    grid-template-columns:102px 1fr;
  }

  .gaming-pc-matrix .view {
  }
}