html {
  font-size: 1px;
}

@media screen and (max-width: 1920px) and (min-width: 768.02px) {
  html {
    font-size: calc((100 / 1920) * 1vw);
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: calc((100 / 750) * 1vw);
  }
}

body {
  font-family: "Hiragino Sans", "ヒラギノ角ゴ", "Noto Sans JP", sans-serif;
  color: #000;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
}

p {
  letter-spacing: 0.02em;
}

.l-container {
  position: relative;
}

img,
video {
  width: 100%;
  display: block;
}

a {
  display: block;
  text-decoration: none;
}

.trans {
  transition: opacity 0.2s ease-in-out
}

.trans:hover {
  opacity: 0.7;
}

.flexcol {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wrapper {
  padding: 0 30rem;
}

@media screen and (min-width: 768.02px) {
  .pc {
    display: block;
  }

  .sp {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

header {
  background-color: #000;
}

header .header-wrapper {
  display: flex;
  align-items: center;
}

@media screen and (min-width: 768.02px) {
  header {
    padding: 10rem 0;
  }
  header .header-wrapper {
    max-width: 1000rem;
    margin: 0 auto;
  }

  header .header-logo {
    width: 61rem;
    margin-right: 40rem;
  }

  header .header-link {
    width: 303rem;
  }
}

@media only screen and (max-width: 768px) {
  header {
    padding: 21rem 30rem;
  }

  header .header-logo {
    width: 81rem;
    margin-right: 40rem;
  }

  header .header-link {
    width: 389rem;
  }
}

main {
  margin: 0 auto;
  background-color: #449edd;
  position: relative;
  z-index: 1;
}

main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url("../img/bg_main.jpg") no-repeat center center / cover;
}

.fv {
  padding-top: 16rem;
  margin-bottom: -47rem;
}

.banner {
  position: relative;
}

.banner h2 {
  position: absolute;
  top: 5.4%;
  left: 0;
  right: 0;
  z-index: 1;
}

.banner h2 img {
  max-width: 578rem;
  margin: 0 auto;
}

.lineup {
  padding: 40rem 0;
}

.lineup h2 {
  max-width: 653rem;
  margin: 0 auto 40rem;
}

.lineup-anchor {
  display: flex;
  margin-bottom: 34rem;
}

.lineup-anchor > li {
  width: calc(100% / 3);
  padding: 0 5rem;
}

.lineup-anchor > li:nth-child(1) {
  margin-top: -25rem;
}

.lineup-anchor a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: 90rem;
}

.lineup-anchor a::after {
  content: "";
  position: absolute;
  background: url("../img/icn_arrow_01.png") no-repeat center center / cover;
  width: 68rem;
  height: 78rem;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transition: transform 0.3s ease;
}

.lineup-anchor a:hover::after {
  transform: translate(-50%, 10rem);
}

.lineup-product {
  margin-bottom: 22rem;
}

.lineup-product > li {
  background-color: #fef7e4;
  border-radius: 14rem;
  padding: 65rem 18rem 42rem;
  margin-bottom: 62rem;
}

.lineup-product > li:last-child {
  margin-bottom: 0;
}

#delica_mini h3 {
  max-width: 551rem;
  margin-bottom: 40rem;
}

#delica_mini .delica_mini-edition {
  max-width: 517rem;
  margin-bottom: 35rem;
}

#delica_mini .delica_mini-product {
  max-width: 640rem;
  margin-bottom: -13rem;
}

.lineup .lineup-text {
  font-size: 20rem;
  font-weight: 300;
  line-height: calc(30 / 20);
  padding-left: 24rem;
}

#delica_mini .delica_mini-benefit {
  margin: 44rem 0 26rem;
}

#delica_mini .delica_mini-highlight {
  max-width: 527rem;
  margin: 0 auto 26rem;
}

#delica_mini .lineup-campaign {
  margin-top: 36rem;
}

#delica_d5 h3 {
  margin-bottom: 32rem;
}

#delica_d5 h3 img {
  margin: 0 auto;
}

#delica_d5 h3 img:nth-child(1) {
  max-width: 425rem;
  margin-bottom: 34rem;
}

#delica_d5 h3 img:nth-child(2) {
  max-width: 521rem;
}

#delica_d5 .delica_d5-product {
  max-width: 648rem;
  margin-bottom: 10rem;
}

#delica_d5 .lineup-text {
  font-weight: 400;
}

#delica_d5 .delica_d5-benefit {
  margin-top: 42rem;
  margin-bottom: 38rem;
}

#delica_d5 .delica_d5-highlight {
  font-weight: 500;
  font-size: 36rem;
  line-height: calc(54 / 36);
  text-align: center;
  margin-bottom: 72rem;
}

#delica_d5 .delica_d5-highlight strong {
  font-weight: 700;
  color: #ff6000;
  font-size: 46rem;
}

#delica_d5 .delica_d5-highlight span {
  font-size: 26rem;
  line-height: calc(36 / 26);
  display: block;
  margin-top: 28rem;
}

#delica_d5 .delica_d5-series {
  text-align: center;
  font-weight: 500;
  margin-bottom: 36rem;
}

#delica_d5 .series-label {
  color: #e60012;
  font-size: 30rem;
  font-weight: 500;
  border: 2px solid #e60012;
  border-radius: 4rem;
  padding: 5rem;
  max-width: 364rem;
  margin: 0 auto 18rem;
}

#delica_d5 h4 {
  max-width: 484rem;
  margin: 0 auto 20rem;
}

#delica_d5 .series-note {
  color: #ff6000;
  font-size: 22rem;
  margin: 17rem 0 87rem;
}

#delica_d5 .delica_d5-series p {
  font-size: 20rem;
  line-height: calc(30 / 20);
}

.delica_d5-slider {
  margin: 0 -10rem;
  position: relative;
}

.delica_d5-slider::before {
  content: "";
  position: absolute;
  top: -68rem;
  left: 50%;
  transform: translateX(-50%);
  width: 204rem;
  height: 44rem;
  background: url("../img/icn_arrow_03.png") no-repeat center center / cover;
}

.delica_d5-slider .swiper {
  padding: 0 38rem !important;
}

.delica_d5-slider .swiper-slide {
  box-shadow: 4rem 6rem 8rem rgba(0, 0, 0, 0.16);
}

.delica_d5-slider .swiper-arrow {
  background: url("../img/icn_arrow_02.png") no-repeat center center / cover;
  width: 29rem;
  height: 52rem;
  top: 44%;
  position: absolute;
}

.delica_d5-slider .swiper-arrow::after {
  display: none;
}

.delica_d5-slider .swiper-arrow.swiper-button-prev {
  left: 0;
  transform: rotate(180deg);
}
.delica_d5-slider .swiper-arrow.swiper-button-next {
  right: 0;
}

.delica_d5-slider .swiper-pagination {
  margin-top: 46rem;
  position: relative;
}

.delica_d5-slider .swiper-pagination-bullet {
  width: 20rem;
  height: 20rem;
  background-color: #bfbebe;
  opacity: 1 !important;
  margin: 0 10rem !important;
}

.delica_d5-slider .swiper-pagination-bullet-active {
  background-color: #777474;
}

#outlander_phev h3 {
  max-width: 479rem;
  margin-bottom: 40rem;
}

#outlander_phev .outlander_phev-product {
  max-width: 656rem;
  margin-bottom: 10rem;
}

.outlander_phev-benefit {
  margin: 44rem 24rem;
}

.outlander_phev-feature {
  font-weight: 500;
  font-size: 36rem;
  line-height: calc(54 / 36);
  text-align: center;
  margin-bottom: 33rem;
}

.outlander_phev-feature strong {
  font-weight: 700;
  color: #ff6000;
  font-size: 46rem;
}

.outlander_phev-choose p {
  font-size: 26rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 38rem;
}

.outlander_phev-choose li {
  margin-bottom: 20rem;
}

.lineup .lineup-note {
  color: #fff;
  font-weight: 500;
  font-size: 18rem;
  line-height: calc(30 / 18);
}

.cta {
  padding: 36rem 30rem 50rem;
}

.cta h2 {
  max-width: 611rem;
  margin: 0 auto -40rem;
  position: relative;
  top: -33rem;
}

.cta .cta-gift img:nth-child(1) {
  max-width: 500rem;
  margin-bottom: 40rem;
}

.cta .cta-gift img:nth-child(2) {
  max-width: 633rem;
}

.cta .cta-text {
  padding: 0 30rem 0 70rem;
  font-weight: 300;
  font-size: 20rem;
  line-height: calc(30 / 20);
  margin-bottom: 40rem;
  margin-top: 20rem;
}

.cta .wrapper {
  background-color: #fef7e4;
  border-radius: 14rem;
  padding: 0 0 67rem;
  max-width: 690rem;
  margin: 0 auto;
}

.cta .cta-campaign {
  max-width: 579rem;
  margin: 0 auto;
  position: relative;
  padding-bottom: 65rem;
  margin-bottom: 38rem;
}

.cta .cta-campaign::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 204rem;
  height: 44rem;
  background: url("../img/icn_arrow_03.png") no-repeat center center / cover;
}

.cta .cta-campaign p {
  font-size: 50rem;
  font-weight: 600;
  line-height: calc(66 / 50);
  text-align: center;
}

.btn {
  margin: 0 auto;
  background-color: #ff6000;
  border: 2px solid #fff;
  border-radius: 16rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: #fff;
  box-shadow: 2rem 4rem 6rem rgba(0, 0, 0, 0.4);
  font-weight: 500;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20rem;
  width: 10rem;
  height: 17rem;
  background-color: #fff;
  -webkit-mask-image: url("../img/icn_arrow_04.svg");
  mask-image: url("../img/icn_arrow_04.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #fff;
  color: #ff6000;
  border-color: #ff6000;
}

.btn:hover::after {
  background-color: #ff6000;
}

.cta .cta-btn {
  max-width: 616rem;
  padding: 32rem 40rem;
  font-size: 36rem;
}

footer {
  background-color: #000;
}

.footer-wrapper {
  max-width: 880rem;
  margin: 0 auto;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-logo {
  width: 471rem;
}

.footer-link {
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
}

.footer-mark {
  width: 137rem;
}

.footer-sns {
  display: flex;
  align-items: center;
}

footer small {
  font-size: 20rem;
  color: #898989;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  text-align: center;
  display: block;
}

@media screen and (min-width: 768px) {
  footer {
    padding: 40rem 30rem 25rem;
  }

  .footer-logo {
    width: 320rem;
  }

  .footer-link {
    font-size: 15rem;
    margin-top: 8rem;
    margin-bottom: 14rem;
  }

  .footer-sns > li {
    margin-right: 25rem;
    width: 40rem;
  }

  footer small {
    font-size: 13rem;
    margin-top: 20rem;
  }

  .footer-mark {
    width: 100rem;
  }
}

@media only screen and (max-width: 768.02px) {
  footer {
    padding: 46rem 30rem 140rem;
  }

  .footer-link {
    font-size: 24rem;
    margin: 10rem 0 18rem;
  }

  .footer-sns > li {
    margin-right: 30rem;
    width: 68rem;
  }

  .footer-mark {
    margin-bottom: 20rem;
  }

  footer small {
    margin-top: 32rem;
  }
}

.btn-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.btn-fixed.is-show {
  transform: translateY(0);
}

.btn-wrapper {
  background-color: #fff;
  display: flex;
  gap: 10rem;
  width: 750rem;
  margin: 0 auto;
  padding: 10rem 20rem;
}

.floating-btn {
  width: 50%;
  min-height: 88rem;
  font-size: 28rem;
  padding: 0 4%;
}

.floating-btn::after {
  right: 10rem;
}

@media screen and (min-width: 768.02px) {
  main {
    box-shadow:
    0 0 10px rgba(0,0,0,0.07),
    0 0 35px rgba(0,0,0,0.12),
    0 0 70px rgba(0,0,0,0.17);
    max-width: 750rem;
  }

  .bg-fixed {
    display: block;
    width: 100vw;
    height: 100vh;
    background: url("../img/bg_pc.jpg") no-repeat center center / cover;
    position: fixed;
    top: 0;
    left: 0;
  }

  .sidebar {
    position: fixed;
    top: 30%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .sidebar--left {
    left: calc(50% - 812rem);
  }

  .sidebar .logo {
    width: 321rem;
    margin-bottom: 48rem;
  }

  .sidebar a {
    max-width: 313rem;
  }

  .sidebar--right {
    right: calc(50% - 780rem);
    margin-top: 20rem;
  }

  .sidebar-btn {
    width: 280rem;
    min-height: 70rem;
    font-size: 22rem;
    padding: 10rem 20rem;
    margin-bottom: 20rem;
  }

  .sidebar-btn::after {
    right: 10rem;
  }
}
.pswp__img {
  cursor: pointer !important;
}

.delica_mini-video p:nth-child(1) {
  max-width: 487rem;
  margin: 65rem auto 26rem;
}