@charset "UTF-8";
.forPC {
  display: block;
}

.forSP {
  display: none;
}

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

  .forSP {
    display: block;
  }
}
.fv {
  background-image: url(./images/add/fv_bg.webp);
}
@media screen and (max-width: 768px) {
  .fv {
    background-image: url(./images/add/fv_bg_sp.webp);
    padding-bottom: 8vw;
  }
}

.fv_title .txt01 {
  width: 33.4vw;
  top: 25.5%;
  left: 7.5%;
  font-size: 7.03125vw;
  transform: rotate(0);
}
@media screen and (max-width: 768px) {
  .fv_title .txt01 {
    width: 53.2vw;
    top: 19.5vw;
  }
}

.fv_title .txt03 {
  width: 44vw;
  top: 34%;
  left: 3.5%;
  transform: rotate(0);
}
@media screen and (max-width: 768px) {
  .fv_title .txt03 {
    width: 70vw;
    top: 26vw;
    left: 2vw;
  }
}

@media screen and (max-width: 768px) {
  .fv_item .tonyu01 {
    width: 42vw;
    top: -48vw;
    right: -6.5vw;
  }
}

@media screen and (max-width: 768px) {
  .fv_item .tonyu02 {
    width: 44vw;
    top: -60vw;
    left: -4vw;
  }
}

p.anchor {
  width: 14.6vw;
  bottom: 0;
  right: 5%;
}
@media screen and (max-width: 768px) {
  p.anchor {
    width: 29.2vw;
    bottom: -22vw;
    right: 1.5vw;
    z-index: 5;
  }
}

.story {
  background: url(./images/add/story_bg.webp) no-repeat top center/cover;
  height: 110.7vw;
  padding-top: 9.5vw;
  margin-bottom: 5.7291666667vw;
}
@media screen and (max-width: 768px) {
  .story {
    height: 385.7vw;
    padding-top: 21vw;
    background: url(./images/add/story_bg_sp.webp) no-repeat top center/cover;
  }
}

.story .story_bread {
  width: 13.7vw;
  position: absolute;
  top: 32%;
  left: 0%;
}
@media screen and (max-width: 768px) {
  .story .story_bread {
    top: 218vw;
    width: 12.2vw;
  }
}

.story .chair {
  width: 28.5vw;
  top: 28%;
  left: 14%;
}
@media screen and (max-width: 768px) {
  .story .chair {
    width: 68.5vw;
    position: absolute;
    top: 169vw;
    right: -6vw;
  }
}

@media screen and (max-width: 768px) {
  .story .hot {
    top: 223vw;
  }
}

.story .txt {
  top: 24%;
  line-height: 1.9;
}

.story .girl {
  top: 79%;
}
@media screen and (max-width: 768px) {
  .story .girl {
    top: auto;
    bottom: 5vw;
  }
}

@media screen and (max-width: 768px) {
  .story .but {
    top: 65%;
  }
}

@media screen and (max-width: 768px) {
  .story .pop02 {
    top: 74.9%;
  }
}

@media screen and (max-width: 768px) {
  .story .pop03 {
    top: 77.5%;
  }
}

@media screen and (max-width: 768px) {
  .story .pop01 {
    top: 69%;
  }
}

@media screen and (max-width: 768px) {
  .story .ice {
    top: 152vw;
  }
}

.step1 .bread02 {
  width: 16.6vw;
  position: absolute;
  top: -7vw;
  right: 0%;
}
@media screen and (max-width: 768px) {
  .step1 .bread02 {
    width: 21.3vw;
    top: -43vw;
  }
}

.step1_main .tonyu03 .ttl {
  padding-top: 1.1vw;
}
@media screen and (max-width: 768px) {
  .step1_main .tonyu03 .ttl {
    background: url(./images/step1_tonyu02_bg.9c5cfbef87f38e372574.webp) no-repeat top center/contain;
    width: 84.9333333333vw;
    height: 19.0666666667vw;
    padding-top: 5.3333333333vw;
  }
}

p.kotei01 {
  width: 22.6vw;
  margin: auto;
  text-align: right;
}
@media screen and (max-width: 768px) {
  p.kotei01 {
    width: 84.9333333333vw;
    text-align: center;
  }
}

.step1_main .tonyu04 .ttl {
  padding-top: 1.1vw;
}

p.kotei02 {
  width: 28vw;
  margin: auto;
  text-align: right;
}
@media screen and (max-width: 768px) {
  p.kotei02 {
    width: 84.9333333333vw;
    text-align: center;
  }
}

main .ttl p {
  font-size: 1.46vw;
}
@media screen and (max-width: 768px) {
  main .ttl p {
    font-size: 4.2vw;
  }
}

.step1_main .tonyu04 .ttl {
  background: url(./images/add/bg_step1_tonyu04.webp) no-repeat top center/contain;
  width: 35.8vw;
  height: 7.19vw;
}
@media screen and (max-width: 768px) {
  .step1_main .tonyu04 .ttl {
    background: url(./images/add/bg_step1_tonyu04_sp.webp) no-repeat top center/contain;
    width: 84.9333333333vw;
    height: 19.0666666667vw;
    padding-top: 5.3333333333vw;
  }
}

.step3 .contents .more .item_wrap .comment.sangai {
  padding-top: 2.5vw;
  font-feature-settings: "palt";
}
@media screen and (max-width: 768px) {
  .step3 .contents .more .item_wrap .comment.sangai {
    padding-top: 5vw;
  }
}

.step3 .contents .more .item_wrap .comment {
  font-size: 1.67vw;
  line-height: 1.2;
}
@media screen and (max-width: 768px) {
  .step3 .contents .more .item_wrap .comment {
    font-size: 3.3vw;
  }
}

.step3 .contents .more .item_wrap .img.mlplus {
  margin-left: 1.2vw;
}
@media screen and (max-width: 768px) {
  .step3 .contents .more .item_wrap .img.mlplus {
    margin-left: 14.6666666667vw;
  }
}

.step3 .contents .iceContent02 .more .item_wrap.wrap02 .ttl {
  width: 23.9vw;
}
@media screen and (max-width: 768px) {
  .step3 .contents .iceContent02 .more .item_wrap.wrap02 .ttl {
    width: 100%;
  }
}

.camp .title .txt {
  font-size: 3.2vw;
  margin-bottom: 1.0416666667vw;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .camp .title .txt {
    font-size: 4.93vw;
    font-weight: 900;
  }
}

.camp .title h1 {
  font-size: 4.53vw;
  margin-bottom: 1.0416666667vw;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .camp .title h1 {
    font-size: 8.67vw;
    font-weight: 900;
    line-height: 1.2;
  }
}

.camp .line {
  width: 73.6vw;
}
@media screen and (max-width: 768px) {
  .camp .line {
    width: 80.9vw;
  }
}

.camp .line.h2_camp_line {
  width: 61.6vw;
  margin-bottom: 1.1vw;
}

.outline .line {
  width: 20vw;
}
@media screen and (max-width: 768px) {
  .outline .line {
    width: 44.5vw;
  }
}

.camp {
  padding-top: 6vw;
  padding-bottom: 12.2vw;
  background: url("images/add/bg_camp.webp") no-repeat top 15vw center;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  .camp {
    padding-top: 11vw;
    background: url("images/add/bg_camp_sp.webp") no-repeat top 52vw center;
    background-size: 100%;
    padding-bottom: 16.8vw;
  }
}
.camp #camp {
  margin-top: -100px;
  padding-top: 120px;
}
@media screen and (max-width: 768px) {
  .camp #camp {
    margin-top: -17vw;
    padding-top: 17vw;
  }
}
.camp h2 {
  width: 61.6vw;
  margin: 7.8vw auto 0.5vw;
}
@media screen and (max-width: 768px) {
  .camp h2 {
    width: 80.2vw;
    margin-top: 21.8vw;
  }
}
.camp h3 {
  width: 33.6vw;
  margin: 5.4vw auto 2vw;
}
@media screen and (max-width: 768px) {
  .camp h3 {
    width: 68.6vw;
    margin: 17vw auto 4vw;
  }
}
.camp p.kikan {
  font-size: 1.6vw;
  font-weight: 700;
  margin: auto auto 4.3vw;
}
@media screen and (max-width: 768px) {
  .camp p.kikan {
    font-size: 4.2vw;
    margin: 4.2vw auto 6.4vw;
  }
}
.camp ul.ulTri {
  width: 80vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.camp ul.ulTri::before, .camp ul.ulTri::after {
  display: none;
}
@media screen and (max-width: 768px) {
  .camp ul.ulTri {
    flex-direction: column;
    width: 82vw;
    gap: 0;
  }
}
.camp ul.ulTri li {
  width: 26vw;
}
@media screen and (max-width: 768px) {
  .camp ul.ulTri li {
    width: 100%;
  }
}
.camp ul.ulTri li dl dt {
  width: 19.6vw;
  height: 7.67vw;
  margin: auto;
  background: url("images/add/bg_hl_yl.webp") no-repeat;
  background-size: 100%;
  font-size: 1.93vw;
  font-weight: 900;
  display: flex;
  justify-content: center;
  margin-bottom: -4.2vw;
  position: relative;
  padding-top: 1.7vw;
}
@media screen and (max-width: 768px) {
  .camp ul.ulTri li dl dt {
    font-size: 6.1vw;
    width: 61.8vw;
    height: 24.1vw;
    margin-bottom: -14vw;
    padding-top: 5vw;
  }
}
.camp ul.ulTri.prize {
  margin-top: 6vw;
}
.camp ul.ulTri.point {
  margin-top: 2.3vw;
}
.camp ul.ulTri.point dl dt {
  background: url("images/add/bg_hl_or.webp") no-repeat;
  background-size: 100%;
}
.camp figure.points {
  width: 37.5vw;
  margin: auto auto 1.3vw;
}
@media screen and (max-width: 768px) {
  .camp figure.points {
    width: 82vw;
    margin: auto;
  }
}
.camp ul.attention {
  width: 37vw;
  margin: auto;
  transform: translateX(0.5vw);
}
@media screen and (max-width: 768px) {
  .camp ul.attention {
    width: 64vw;
  }
}
.camp ul.attention li {
  font-size: 0.93vw;
  line-height: 1.7;
  position: relative;
  padding-left: 1.1vw;
  position: relative;
}
@media screen and (max-width: 768px) {
  .camp ul.attention li {
    font-size: 2.6vw;
    padding-left: 1.6vw;
  }
}
.camp ul.attention li::before {
  content: '*';
  position: absolute;
  top: 0.2vw;
  left: 0;
}
.camp ul.attention li:nth-of-type(3)::before {
  content: '※';
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .camp ul.attention li:nth-of-type(3) {
    padding-left: 2.8vw;
  }
}

.gray.slide-in::before {
  animation: slide-in 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: url(./images/pc_main_bg.15a2853374b323198ecb.webp) repeat-y top center/100%;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 100%;
}

.outline {
  padding-top: 2.8vw;
  padding-bottom: 10vw;
  background: url("images/add/bg_outline.webp") no-repeat top center;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  .outline {
    background: url("images/add/bg_outline_sp.webp") no-repeat top center;
    background-size: 100%;
    padding-top: 12.2vw;
  }
}
.outline .title h1 {
  font-size: 4.53vw;
  margin-bottom: 1.0416666667vw;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .outline .title h1 {
    font-size: 9vw;
    font-weight: 900;
  }
}
.outline .doubleBox {
  width: 70.6vw;
  margin: 4.9vw auto 4.4vw;
  padding-bottom: 0.7vw;
  display: flex;
  justify-content: center;
  background: url("images/add/bg_doublebox.png") repeat-y center top;
  background-size: 0.25vw;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox {
    flex-direction: column;
    background: none;
    margin: 14vw auto 4.4vw;
  }
}
.outline .doubleBox .inner {
  width: 50%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner {
    width: 100%;
  }
}
.outline .doubleBox .inner h2 {
  font-size: 2.46vw;
  font-weight: 900;
  display: flex;
  justify-content: center;
  padding-top: 0.2vw;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner h2 {
    font-size: 7.4vw;
  }
}
.outline .doubleBox .inner h2.short {
  width: 19.6vw;
  height: 5vw;
  background: url("images/add/bg_h2_s.png") no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner h2.short {
    width: 58.9vw;
    height: 22.9vw;
  }
}
.outline .doubleBox .inner h2.long {
  width: 24.4vw;
  height: 7.7vw;
  background: url("images/add/bg_h2_l.png") no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner h2.long {
    width: 73.5vw;
    height: 26.2vw;
    padding-top: 0.8vw;
  }
}
.outline .doubleBox .inner h3 {
  font-size: 1.8vw;
  font-weight: 700;
  margin: 1.3vw auto;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner h3 {
    font-size: 5.6vw;
    margin-top: -5vw;
  }
}
.outline .doubleBox .inner h3 span {
  font-size: 50%;
  vertical-align: top;
  line-height: 2.5;
}
.outline .doubleBox .inner p.attention {
  font-size: 0.93vw;
  font-weight: 500;
  margin-bottom: 1.6vw;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner p.attention {
    font-size: 2.9vw;
    line-height: 1.5;
  }
}
.outline .doubleBox .inner figure {
  width: 22.4vw;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner figure {
    width: 67.3vw;
    margin: 6vw auto 12vw;
  }
}
.outline .doubleBox .inner ul.kikan {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4.6vw;
  margin-top: 3vw;
  margin-bottom: 1vw;
}
.outline .doubleBox .inner ul.kikan::before, .outline .doubleBox .inner ul.kikan::after {
  dispaly: none;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner ul.kikan {
    margin-top: -2vw;
    margin-bottom: 10vw;
    gap: 17vw;
  }
}
.outline .doubleBox .inner ul.kikan li {
  width: 100%;
  height: 2vw;
  font-size: 2vw;
  font-weight: 700;
  position: relative;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner ul.kikan li {
    font-size: 6.2vw;
  }
}
.outline .doubleBox .inner ul.kikan li:first-of-type::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 1.16vw;
  background: url("images/add/triangle.webp") no-repeat center top;
  background-size: 1.33vw;
  position: absolute;
  bottom: -3.2vw;
  left: 0;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner ul.kikan li:first-of-type::after {
    font-size: 6.2vw;
    background: url("images/add/triangle.webp") no-repeat center top;
    background-size: 4vw;
    height: 6vw;
    bottom: -13vw;
  }
}
.outline .doubleBox .inner ul.kikan li span {
  width: 2vw;
  height: 2vw;
  background: #3a1716;
  font-size: 58%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 0.2vw;
  padding-bottom: 0.1vw;
}
@media screen and (max-width: 768px) {
  .outline .doubleBox .inner ul.kikan li span {
    width: 6vw;
    height: 6vw;
    margin-left: 0.6vw;
  }
}
.outline .singleBox {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .outline .singleBox {
    margin-top: 10vw;
  }
}
.outline .singleBox h2 {
  font-size: 2.46vw;
  font-weight: 900;
  display: flex;
  justify-content: center;
  padding-top: 0.2vw;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .outline .singleBox h2 {
    font-size: 7.4vw;
  }
}
.outline .singleBox h2.short {
  width: 19.6vw;
  height: 5vw;
  background: url("images/add/bg_h2_s.png") no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 768px) {
  .outline .singleBox h2.short {
    width: 58.9vw;
    height: 23vw;
  }
}
.outline .singleBox h3 {
  font-size: 1.8vw;
  font-weight: 700;
  margin: 1.3vw auto 2.6vw;
}
@media screen and (max-width: 768px) {
  .outline .singleBox h3 {
    font-size: 5.6vw;
    margin-top: -5vw;
    line-height: 1.47;
  }
}

ul.threeSteps {
  width: 76.4vw;
  margin: auto auto 4.2vw;
  display: flex;
}
@media screen and (max-width: 768px) {
  ul.threeSteps {
    width: 82vw;
    flex-direction: column;
  }
}
ul.threeSteps::before, ul.threeSteps::after {
  display: none;
}
ul.threeSteps li {
  width: calc(100% / 3 );
}
@media screen and (max-width: 768px) {
  ul.threeSteps li {
    width: 100%;
  }
}

p.mameIntro {
  font-size: 1.6vw;
  font-weight: 700;
  color: #ed6b01;
  margin-bottom: 0.8vw;
  font-feature-settings: "palt";
  letter-spacing: 0.04vw;
}
@media screen and (max-width: 768px) {
  p.mameIntro {
    font-size: 5vw;
    margin-bottom: 1vw;
  }
}

p.mameDetail {
  font-size: 1.26vw;
  font-weight: 700;
  line-height: 1.6;
  color: #ed6b01;
  margin-bottom: 3.2vw;
}
@media screen and (max-width: 768px) {
  p.mameDetail {
    width: 82vw;
    margin: auto;
    font-size: 3.7vw;
    text-align: left;
    margin-bottom: 10vw;
  }
}

p.line_mamelage {
  width: 44.2vw;
  margin-bottom: 1.7vw;
}

@media screen and (max-width: 768px) {
  .step3 .contents .more .item_wrap .box {
    margin-top: -4vw;
  }
}

@media screen and (max-width: 768px) {
  .step3 .contents .more .item_wrap .img {
    margin-top: -2vw;
  }
}

@media screen and (max-width: 768px) {
  .step3 .contents .more .item_wrap .img img {
    width: 95%;
    margin-bottom: 1.5vw;
  }
}

@media screen and (max-width: 768px) {
  .btn a.toCamp {
    font-size: 4.2vw;
    font-weight: 900;
    margin-left: -5vw;
  }
}

@media screen and (max-width: 768px) {
  p.line_mamelage.line_mamelage01 {
    width: 68.9vw;
    margin-bottom: 2.6vw;
  }
}

@media screen and (max-width: 768px) {
  p.line_mamelage.line_mamelage02 {
    width: 69.7vw;
    margin-bottom: 7vw;
  }
}

@media (min-width: 751px) {
  .step3 .instant .contents .hotContent .point .comment {
    bottom: 18%;
  }
}
.step3 .drip .contents .point .comment {
  bottom: 18%;
}
@media (max-width: 750px) {
  .step3 .drip .contents .point .comment {
    bottom: 4%;
  }
}

@media (max-width: 750px) {
  .step3 .contents .iceContent {
    background: url(./images/ice_base.882882f5481f0db24429.webp) no-repeat bottom center/100%;
  }

  .step3 .contents .hotContent {
    background: url(./images/hot_base.3cf743df360a427f7f61.webp) no-repeat bottom center/100%;
  }

  .step3 .instant .contents .point .comment {
    bottom: -10%;
  }
}