.main-area {
  --content-width: 87.5rem;
  --credit-width-pc: 71.6rem;
  --credit-width-sp: 86.75rem;
  --sub-width-pc: 87.4rem;
  --sub-width-sp: 107.25rem;
  --title-width: 90.6rem;
  --anchor-item-width: 34.5rem;
  --title-background: #000;
}

html {
  font-size: 62.5%;
}

@media only screen and (max-width: 1200px) {
  html {
    font-size: calc(10 *(100vw / 1200));
  }
}

.main-area {
  --sp-rate: 1.5;
  max-width: 120rem;
  margin: 0 auto;
  color: #000;
}

.main-area picture {
  display: block;
}

.main-area img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .main-area img {
    image-rendering: -webkit-optimize-contrast;
  }
}

@media screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}

.headding-area__text {
  --area-mt: 9.3rem;
  margin-top: var(--area-mt);
}

.headding-area__text h2 {
  width: var(--title-width);
  margin: 0 auto;
}

.headding-area__text p {
  margin-top: 5.4rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 3.2rem;
  text-align: center;
  line-height: 1.38;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 767px) {
  .headding-area__text {
    margin-top: calc(var(--area-mt) * 0.58);
  }
}

.anchor-area {
  margin-top: 2.5rem;
}

.anchor-area__main {
  display: flex;
  justify-content: center;
  -moz-column-gap: 2rem;
  column-gap: 2rem;
}

.anchor-area__main--count4,
.anchor-area__main--count6 {
  flex-wrap: wrap;
  row-gap: 1.1rem;
}

.anchor-area__main--count4 {
  width: 85.5rem;
  margin: 0 auto;
}

.anchor-area__main--count4 .anchor-area__item {
  width: 37.5rem;
}

.anchor-area__main--count4 .anchor-area__item:nth-of-type(2n)::after {
  content: none;
}

.anchor-area__main--count3 .anchor-area__item:nth-of-type(3n)::after,
.anchor-area__main--count6 .anchor-area__item:nth-of-type(3n)::after {
  content: none;
}

.anchor-area__item {
  position: relative;
  flex-shrink: 0;
  width: var(--anchor-item-width);
}

.anchor-area__item::after {
  content: "";
  position: absolute;
  top: 9.8rem;
  right: -1rem;
  z-index: 1;
  width: 1px;
  height: 19.6rem;
  background-color: #494949;
}

.anchor-area a {
  display: block;
}

@media screen and (max-width: 767px) {
  .anchor-area__item::after {
    right: -1.3rem;
  }
}

.column-area {
  margin-top: 7rem;
}

.loop-area {
  margin: 12rem 0 15.5rem;
}

.loop-item {
  padding: 10.7rem 0 0;
}

.loop-item--border {
  border-top: 1px solid #333;
}

.loop-item__name-en {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 9.695rem;
  text-align: center;
  line-height: 1.26;
  letter-spacing: 0;
}

.loop-item__model-wrap {
  position: relative;
  margin-top: 4.5rem;
}

.loop-item__name-ja {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 73.3rem;
  max-width: 100%;
  height: 5.8rem;
  padding: 0 3rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 2.76rem;
  color: #fff;
  line-height: 1.01;
  letter-spacing: 0.26em;
  font-feature-settings: "palt";
  white-space: nowrap;
  background-color: var(--title-background, #000);
}

.loop-item__lead {
  transform: translateZ(0);
  width: 102.5rem;
  margin: -7rem auto 0;
  padding-top: 6.6rem;
  background-color: #fff;
}

.loop-item__lead span {
  display: block;
  width: var(--content-width);
  margin: 0 auto;
  font-family: "Noto Serif JP", serif;
  font-size: 5.169rem;
  text-align: center;
  line-height: 1.34;
  letter-spacing: 0;
  border-bottom: 1px solid #000;
}

.loop-item__desc {
  --font-size: 2rem;
  width: var(--content-width);
  margin: 4.3rem auto 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--font-size);
  line-height: 1.682;
  letter-spacing: 0.12em;
  font-feature-settings: "palt";
}

.loop-item__prod {
  display: block;
  width: var(--content-width);
  margin: 7rem auto 0;
}

.loop-item__detail {
  width: var(--credit-width-pc);
  margin: 0 auto;
}

.loop-item__detail-name,
.loop-item__detail-taxin {
  font-feature-settings: "palt";
}

.loop-item__detail-name {
  --font-size: 2.194rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--font-size);
  letter-spacing: 0.12em;
}

.loop-item__detail-price {
  --font-size: 3.802rem;
  margin-top: 1.8rem;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: var(--font-size);
  letter-spacing: 0.02em;
}

.loop-item__detail-taxin {
  --font-size: 2.438rem;
  font-size: var(--font-size);
}

.loop-item__detail-link {
  --btn-height: 10.119rem;
  --font-size: 2.268rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--btn-height);
  margin-top: 3rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: var(--font-size);
  color: #fff;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
  background-color: #000;
}

.loop-item__sub {
  width: var(--sub-width-pc);
  margin: 9.5rem auto 0;
}

.loop-item__coordinate {
  width: var(--sub-width-pc);
  margin: 6.5rem auto 0;
}

.loop-item__coordinate-title-en {
  --font-size: 3.489rem;
  --margin-right: 1.8rem;
  margin-right: var(--margin-right);
  font-family: "Noto Serif SC", serif;
  font-weight: 600;
  font-size: var(--font-size);
  color: #8b3801;
}

.loop-item__coordinate-title-ja {
  --font-size: 2.16rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--font-size);
}

.loop-item__credit-area {
  --margin-top: 0.2rem;
  margin-top: var(--margin-top);
}

.loop-item__credit-item {
  --credit-height: 8.7rem;
  --padding: 0 0.6rem;
  --font-size: 2.217rem;
  width: 100%;
  height: var(--credit-height);
  padding: var(--padding);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--font-size);
  letter-spacing: 0.12em;
  font-feature-settings: "palt";
  border-bottom: 1px solid #000;
}

.loop-item__credit-item--nolink,
.loop-item__credit-item--annotation {
  display: flex;
  align-items: center;
}

.loop-item__credit-item--annotation {
  border-bottom: none;
}

.loop-item__credit-link {
  --after-width: 0.9rem;
  --after-height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.loop-item__credit-link::after {
  content: "";
  display: block;
  width: var(--after-width);
  height: var(--after-height);
  background: url(../img/components/arrow-right.png) center/100% no-repeat;
}

@media screen and (max-width: 767px) {
  .loop-item__desc {
    font-size: calc(var(--font-size) * var(--sp-rate));
  }

  .main-area .footer-annotation p {
    font-size: calc(var(--font-size) * var(--sp-rate));
  }
}

@media screen and (max-width: 767px) {
  .loop-item {
    font-size: calc(var(--font-size) * var(--sp-rate));
  }

  .loop-item__detail {
    width: var(--credit-width-sp);
  }

  .loop-item__detail-name {
    font-size: calc(var(--font-size) * var(--sp-rate));
  }

  .loop-item__detail-price {
    font-size: calc(var(--font-size) * var(--sp-rate));
  }

  .loop-item__detail-taxin {
    font-size: calc(var(--font-size) * var(--sp-rate));
  }

  .loop-item__detail-link {
    height: calc(var(--btn-height) * 1.6);
    font-size: calc(var(--font-size) * var(--sp-rate));
  }

  .loop-item__sub {
    width: var(--sub-width-sp);
  }

  .loop-item__coordinate {
    width: var(--sub-width-sp);
  }

  .loop-item__coordinate-title-en {
    margin-right: calc(var(--margin-right) * var(--sp-rate));
    font-size: calc(var(--font-size) * var(--sp-rate));
  }

  .loop-item__coordinate-title-ja {
    font-size: calc(var(--font-size) * var(--sp-rate));
  }

  .loop-item__credit-area {
    margin-top: calc(var(--margin-top) * var(--sp-rate));
  }

  .loop-item__credit-item {
    height: calc(var(--credit-height) * 1.6);
    padding: calc(var(--padding) * var(--sp-rate));
    font-size: calc(var(--font-size) * var(--sp-rate));
  }

  .loop-item__credit-link::after {
    width: calc(var(--after-width) * var(--sp-rate));
    height: calc(var(--after-height) * var(--sp-rate));
  }

}

.footer-annotation {
  --width: 104.8rem;
  width: var(--width);
  margin: 0 auto 20.2rem;
}

.footer-annotation p {
  --font-size: 2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: var(--font-size);
  line-height: 1.682;
  letter-spacing: 0.12em;
  font-feature-settings: "palt";
}

.footer-annotation p:not(:first-child) {
  margin-top: 4.3rem;
}