@charset "UTF-8";
@import url("/product/tire/camp2610_ig80/shared/css/base.css");
@media screen and (min-width: 751px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: block;
  }
}
@media screen and (max-width: 750px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block;
  }
}
img {
  max-width: 100%;
  height: auto;
  pointer-events: none;
}

.colBase {
  color: #df0615;
}

.colSub {
  color: #000000;
}

.sizeXS {
  font-size: min(12px, 2.4vw);
}

.sizeSS {
  font-size: min(14px, 2.8vw);
}

.sizeS {
  font-size: min(15px, 3vw);
}

.sizeN {
  font-size: min(16px, 3.2vw);
}

.sizeM {
  font-size: min(18px, 3.6vw);
}

.sizeL {
  font-size: min(20px, 4vw);
}

.sizeLL {
  font-size: min(22px, 4.4vw);
}

.sizeH {
  font-size: min(24px, 4.8vw);
}

.sizeXL {
  font-size: min(26px, 5.2vw);
}

.sizeB {
  font-size: min(28px, 5.6vw);
}

.sizeML {
  font-size: min(19px, 3.2vw);
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.uline {
  text-decoration: underline;
}
a.uline:hover {
  text-decoration: none;
}

/*-------------------------------------------------
	++ BASE
-------------------------------------------------*/
body {
  font-family: YakuHanJP, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "Arial", sans-serif;
  background-color: #FFF;
  font-size: min(16px, 3.2vw);
  font-weight: 400;
  line-height: 1.6;
}
@media screen and (max-width: 750px) {
  body {
    font-size: 4vw;
  }
}
body a.colB {
  color: #b1e7ff;
}

#container {
  position: relative;
  width: 100%;
}
@media screen and (min-width: 751px) {
  #container::before {
    content: "";
    background-image: url(/product/tire/camp2610_ig80/shared/img/bg_left.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    position: fixed;
    top: 0;
    left: 0;
    width: calc((100% - 444px) / 2);
    height: 100vh;
    z-index: -1;
  }
  #container::after {
    content: "";
    background-image: url(/product/tire/camp2610_ig80/shared/img/bg_right.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    position: fixed;
    top: 0;
    right: 0;
    width: calc((100% - 444px) / 2);
    height: 100vh;
    z-index: -1;
  }
}

#contents {
  margin: 0 auto;
  width: 100%;
  position: relative;
  background-color: #df0615;
  background-image: url(/product/tire/camp2610_ig80/shared/img/main.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
}
@media screen and (min-width: 751px) {
  #contents {
    max-width: 444px;
    min-height: 100vh;
  }
  #contents #logo {
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    width: calc((100% - 444px) / 2);
  }
  #contents #logo a {
    display: block;
    width: 46.3%;
    aspect-ratio: 10/2.4;
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media screen and (max-width: 750px) {
  #contents {
    background-position: center top 12vw;
  }
  #contents #logo {
    width: 100%;
    height: 12vw;
    background-color: #000;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 2vw 5vw;
  }
  #contents #logo a {
    display: block;
    width: 44%;
  }
}

#main {
  margin: 0 auto;
  text-align: center;
  position: relative;
  min-height: 527px;
  padding-top: 460px;
  padding-inline: min(20px, 5vw);
}
@media screen and (max-width: 750px) {
  #main {
    padding-top: 103vw;
    min-height: 118.6vw;
  }
}

/* CAMPAIGN */
.contentWrap {
  padding-inline: min(20px, 4vw);
  padding-bottom: min(40px, 8vw);
}

.cpContent {
  margin: 0 auto;
  text-align: center;
  background-color: #000;
  color: #FFF;
  padding: min(30px, 7vw) min(25px, 7vw);
}
.cpContent a {
  color: #FFF;
  text-decoration: underline;
}

.cpIntro .introBtnSet {
  display: flex;
  flex-direction: column;
  gap: min(15px, 3vw);
}
.cpIntro .introBtnSet a {
  display: block;
}

.presentBox .att {
  font-size: min(10px, 2.8vw);
  margin-top: min(5px, 3vw);
  line-height: 1.8;
}

.cpProductTire {
  padding: 0 min(25px, 6.4vw);
}

#footer {
  padding: min(30px, 6vw);
  background-color: #FFF;
  color: #333;
}
@media screen and (max-width: 750px) {
  #footer .footerLogo {
    width: 50%;
    margin-inline: auto;
  }
}
#footer .footerLogo a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
#footer .copy {
  text-align: center;
  margin-top: min(25px, 5vw);
  font-size: min(10px, 2.2vw);
}

.movie {
  width: 100%;
  aspect-ratio: 16/9;
}
.movie iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.remodal {
  max-width: 860px;
  padding: 0;
}
.remodal .modalInner {
  padding: 20px;
  text-align: left;
}
@media screen and (max-width: 750px) {
  .remodal .modalInner {
    padding: 3vw;
  }
}
.remodal .modalInner h3 {
  margin-bottom: 15px;
}
@media screen and (max-width: 750px) {
  .remodal .modalInner h3 {
    margin-bottom: 3vw;
  }
}
.remodal button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  vertical-align: middle;
  border: 0;
  color: #FFF;
  padding: 10px 30px;
  border-radius: 5px;
  cursor: pointer;
  height: auto;
  background-color: #000;
}
.remodal a {
  color: #000;
}

.remodal-overlay {
  background: rgba(0, 0, 0, 0.7);
}