.vc-guide {
  margin: clamp(40px, 6vw, 84px) 0;
}
.vc-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(32px, 5.5vw, 86px);
  padding: clamp(36px, 5.5vw, 78px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 28px;
}
.vc-story:nth-child(even) .vc-copy { grid-column: 2; grid-row: 1; }
.vc-story:nth-child(even) .vc-visual { grid-column: 1; grid-row: 1; }
.vc-copy { min-width: 0; }
.vc-copy .vc-label {
  color: #6651a9;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.vc-copy h2 {
  font-size: clamp(29px, 3.2vw, 47px);
  text-wrap: balance;
  line-height: 1.15;
}
.vc-copy p:not(.vc-label) {
  margin-top: 17px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
  color: #5b5668;
}
.vc-visual {
  margin: 0;
  padding: clamp(20px, 3.4vw, 46px);
  overflow: hidden;
  border-radius: 18px;
  min-width: 0;
  line-height: 1.45;
}
.vc-letter { background: #e9eff2; color: #2c4350; }
.vc-letter figcaption, .vc-chat-head, .vc-po-top, .vc-ticket-head, .vc-ticket-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.vc-letter figcaption, .vc-chat-head { border-bottom: 1px solid #becbcf; padding-bottom: 12px; }
.vc-letter figcaption b, .vc-chat-head b { font: 750 20px/1.3 var(--head); }
.vc-letter figcaption span, .vc-chat-head span, .vc-ticket-head span { font-size: 14px; }
.vc-letter blockquote {
  margin: 24px 0;
  max-width: 32ch;
  color: #27323b;
  font: 650 clamp(20px, 2.25vw, 32px)/1.56 var(--head);
  letter-spacing: -.035em;
}
.vc-letter mark {
  color: inherit;
  background: linear-gradient(transparent 68%, #afd1c9 68%, #afd1c9 94%, transparent 94%);
}
.vc-letter mark + mark { background: linear-gradient(transparent 68%, #ead59e 68%, #ead59e 94%, transparent 94%); }
.vc-matches { border-top: 1px solid #bacacd; }
.vc-match {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #c4d0d1;
  padding: 10px 0;
}
.vc-match .goods-art {
  width: clamp(44px, 4.8vw, 68px);
  height: clamp(43px, 4.4vw, 60px);
  border-radius: 8px;
  background-color: #f3f7f3;
  object-fit: contain;
}
.vc-match:last-child .goods-art { background-color: #f8f4e9; }
.vc-match b, .vc-match span { display: block; }
.vc-match b { font-size: clamp(15px, 1.5vw, 19px); }
.vc-match span { color: #4c5d66; font-size: 14px; }
.vc-match strong { font: 750 clamp(19px, 1.9vw, 27px)/1.2 var(--head); }
.vc-po { background: #eee8db; color: #413c32; padding-top: clamp(28px, 4vw, 56px); }
.vc-paper {
  position: relative;
  padding: clamp(20px, 2.8vw, 38px);
  background: #fffcf4;
  border: 1px solid #cfc4af;
  box-shadow: 5px 6px 0 #d8ceba;
}
.vc-po-top b { font-size: clamp(17px, 1.6vw, 22px); }
.vc-po-top span { border: 1px solid #a89c85; padding: 1px 6px; font-size: 12px; font-weight: 700; }
.vc-po-title { font: 750 clamp(26px, 2.8vw, 40px)/1.15 var(--head); letter-spacing: -.043em; margin-top: 26px; }
.vc-po-ref { font-size: 14px; color: #736751; margin-top: 6px; }
.vc-paper table { border-collapse: collapse; width: 100%; margin-top: 26px; font-size: clamp(14px, 1.25vw, 18px); }
.vc-paper th, .vc-paper td { padding: 9px 0; border-bottom: 1px solid #d8d0c0; text-align: start; }
.vc-paper th:first-child { padding-right: 12px; }
.vc-paper th:last-child, .vc-paper td { text-align: end; }
.vc-paper thead th { color: #685f4d; font-size: 13px; font-weight: 500; border-top: 1px solid #b1a58e; }
.vc-po-foot { margin-top: 24px; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; font-size: 15px; }
.vc-po-foot > span:first-child { font-weight: 700; color: #736247; }
.vc-po-foot > span:last-child { margin-left: auto; color: #665b48; }
.vc-conflict { background: #f8e8df; color: #54382e; }
.vc-conflict figcaption, .vc-clarify figcaption { font-size: 17px; font-weight: 700; }
.vc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 18px 0 24px;
}
.vc-compare > div { border-top: 2px solid #ad816b; padding-top: 8px; display:flex; align-items:baseline; flex-wrap:wrap; column-gap:7px; }
.vc-compare > div + div { color: #7b3e2b; border-top-color: #7b3e2b; }
.vc-compare span { width: 100%; display: block; font-size: 14px; font-weight: 600; }
.vc-compare b { font: 800 clamp(44px, 5.7vw, 78px)/1.14 var(--head); letter-spacing: -.075em; }
.vc-compare small { font-size: 15px; }
.vc-shot { display: block; width: 100%; padding: 0; position: relative; background: white; border-radius: 8px; text-align: start; cursor: zoom-in; }
.vc-shot img { display: block; width: 100%; height: auto; border-radius: inherit; }
.vc-shot > span {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: #fff;
  border: 1px solid #d5ccdf;
  color: #3f3453;
  border-radius: 5px;
  width: 25px;
  height: 25px;
  line-height: 23px;
  font-size: 17px;
  text-align: center;
}
.vc-chat { background: #dfebe1; color: #2a4939; }
.vc-chat-head { border-color: #b8cbbb; }
.vc-chat blockquote {
  position: relative;
  margin: 18px 16% 20px 0;
  background: #fffef8;
  color: #2b3e32;
  padding: 14px 17px 10px;
  border-radius: 0 16px 16px 16px;
  font-size: clamp(17px, 1.5vw, 22px);
}
.vc-chat blockquote small { display: block; text-align: right; font-size: 12px; margin-top: 7px; color: #4c6f5e; }
.vc-ticket { margin-left: 9%; background: #fcfbf5; border-radius: 9px; border: 1px solid #becbbd; padding: clamp(15px, 2.2vw, 28px); box-shadow: 3px 4px 0 #c7d7c9; }
.vc-ticket-head { border-bottom: 1px solid #c9d1c4; padding-bottom: 12px; }
.vc-ticket-head b { font: 750 clamp(21px, 2vw, 30px)/1.2 var(--head); letter-spacing: -.035em; }
.vc-ticket-line { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid #dee3d7; font-size: 15px; }
.vc-ticket-line > span:last-child { min-width: 2.2em; text-align: end; }
.vc-ticket-foot { margin-top: 12px; }
.vc-ticket-foot strong { font: 800 clamp(30px, 3vw, 42px)/1 var(--head); letter-spacing: -.06em; }
.vc-clarify { background: #ede8f5; color: #4c3c63; }
.vc-clarify blockquote { margin: 14px 0 24px; max-width: 26ch; font: 700 clamp(27px, 2.8vw, 40px)/1.22 var(--head); letter-spacing: -.045em; }
@media (max-width: 820px) {
  .vc-story { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .vc-story:nth-child(even) .vc-copy, .vc-story:nth-child(even) .vc-visual { grid-row: auto; grid-column: auto; }
  .vc-story .vc-visual { width: 100%; }
}
@media (max-width: 430px) {
  .vc-visual { padding: 18px; }
  .vc-po { padding: 22px 16px 17px; }
  .vc-paper { padding: 17px; }
  .vc-ticket { margin-left: 3%; padding: 14px; }
  .vc-chat blockquote { margin-right: 5%; }
  .vc-ticket-line { gap: 7px; font-size: 14px; }
  .vc-compare small { font-size: 13px; }
  .vc-conflict, .vc-clarify { padding: 17px 12px 12px; }
  .vc-clarify figcaption, .vc-clarify blockquote, .vc-conflict figcaption, .vc-conflict .vc-compare { margin-left: 5px; margin-right: 5px; }
}