@charset "utf-8";

/*-------------------------------------------------------------------------------------------------------------------------------
* mv
-------------------------------------------------------------------------------------------------------------------------------*/

.mv .note {
  padding-inline: 30px;
  color: #893a1f;

}

.fwb {
  font-weight: bold;
}

.letter20 {
  letter-spacing: -0.02em;
}

.mv .note>ul li {
  font-size: 18px;
  /* letter-spacing: -0.08em; */
}

.mv .note>span {
  display: block;
  text-align: center;
  border: 1px solid #893a1f;
  font-size: 20px;
}

.mv .map ul {
  display: flex;
  justify-content: center;
  gap: 0 15px;
}

.mv .note-text {
  font-size: 18px;
}

.product-times {
  margin-top: 10px;
}


.product-times.times01 {
  max-width: fit-content;
}

.product-times.times01 .limited {
  width: 100%;

}

.product-times.times01 .week {
  width: 100%;
}

.product-times .limited {
  font-size: 21px;
  color: white;
  padding: 0 15px;
  background-color: #e50012;
  font-weight: 500;
  display: inline-block;
}

.product-times .limited.yellow {

  background-color: #fff000;
  color: #893a1f;
  border: 1px solid #fff000;

}

.product-times .limited.pi10 {
  font-size: 21px;
  color: white;
  padding: 0 10px;
  background-color: #e50012;
  border: 1px solid #e50012;
}

.product-times .week {
  font-size: 21px;
  color: #e3007f;
  padding: 0 5px;
  background-color: white;
  font-weight: 900;
  display: inline-block;
  border: 1px solid white;

}

.product-times .week.border-pink {
  border: 1px solid #e3007f;

}

.product-times .week.brown {
  color: #893a1f;

}

.product-times .week.brown.border {
  border: 1px solid #893a1f;
  background-color: transparent;

}

.product-times .week.letter {
  letter-spacing: -1px;

}

.product-times .week.mt05 {
  margin-top: 5px;
  display: inline-block;

}

.product-times .week.green {
  color: #179e3a;

}

.product-times .week.green.border {
  border: 1px solid #179e3a;
  background: transparent;

}

.product-times .week02 {
  font-size: 20px;
  color: #893a1f;
  padding: 0 5px;
  background-color: white;
  font-weight: 900;
  display: block;
  max-width: fit-content;
}

.product-times .week02.green {
  color: #179e3a;

}

.box-height {
  height: 100px;
}


/*-------------------------------------------------------------------------------------------------------------------------------
* nav
-------------------------------------------------------------------------------------------------------------------------------*/
.nav>a {
  display: block;
}

map area {
  opacity: 1;
  transition: all 0.2s;
}

map area:hover {
  opacity: 0.6;
}

area:-webkit-any-link {
  opacity: 0.6;
  cursor: pointer;
}

/*-------------------------------------------------------------------------------------------------------------------------------
* intro
-------------------------------------------------------------------------------------------------------------------------------*/
.intro {
  background-color: white;
  width: 638px;
  margin-inline: auto;
  padding: 30px 10px 50px;
}

.intro-title {
  padding-left: 250px;
  font-size: 42px;
  font-weight: 900;
  color: var(--main-color);
  position: relative;
}

.intro-image {
  width: 597px;
  margin-inline: auto;
  margin-top: 10px;
}

.intro-text {
  color: var(--main-color);
  font-size: 25px;
  font-weight: 400;
  padding: 0px 35px 15px;
  line-height: 1.4;

  span {
    color: white;
    background-color: var(--main-color);
  }
}

.intro-note {
  color: #e50012;
  font-size: 21px;
  font-weight: 400;
  padding: 0px 35px 0px;
  line-height: 1.4;


  span {
    background-color: #fff000;
    display: inline-block;
    line-height: 1;
    margin-bottom: 3px;
  }
}

/*-------------------------------------------------------------------------------------------------------------------------------
* check
-------------------------------------------------------------------------------------------------------------------------------*/
.check {
  padding-bottom: 150px;
}

.check .check-circle {
  margin-inline: auto;
  width: 475px;
}

.check .check-btn {
  margin-inline: auto;
  width: 665px;
  margin-top: 50px;
}

.check .check-btn a {
  display: block;

}

.check .check-btn a+a {
  margin-top: 30px;

}

.ponta {
  margin-top: 120px;
  margin-inline: auto;
  width: 666px;
}

.trans-ic {
  transform: translateY(-3px);
  display: inline-block;
}

/*-------------------------------------------------------------------------------------------------------------------------------
* scallop
-------------------------------------------------------------------------------------------------------------------------------*/
.sec-scallop {
  --main-color: #db6632;
  padding: 70px 0 150px;
  background: url(/base/osaka/hokkaido/img/260909/top/bg01.webp) no-repeat top center / cover;

}

.scallop .intro-title::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -40px;
  background: url(/base/osaka/hokkaido/img/260909/top/ic-scallop.webp) no-repeat center center / 100%;
  width: 248px;
  height: 248px;
}

.product.flex {
  display: flex;
  align-items: center;
}

.product.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

.product.flex.gap10 {
  gap: 10px;
}

.product.flex.gap20 {
  gap: 20px;
}

.product.flex.end {
  justify-content: flex-end;
}

/* .product-content {
  padding-inline: 50px;
} */

.product-img.transY-10 {
  transform: translateY(24px);
}

.product-img.transX-80 {
  transform: translateX(-20px) translateY(-20px);

}

.product-text {
  font-size: 24px;
  color: white;

  b {
    font-weight: bold;
  }

  .add {
    font-size: 18px;
  }

  .count {
    font-size: 19px;
  }

  .num {
    font-size: 26px;
  }

  .price {
    font-size: 33px;
    font-weight: bold;
  }
}

.product-note {
  font-size: 19px;
  color: white;
  margin-block: 10px;
}

/*-------------------------------------------------------------------------------------------------------------------------------
* corn
-------------------------------------------------------------------------------------------------------------------------------*/
.sec-corn {
  --main-color: #cf860c;
  padding: 70px 0 150px;
  background: url(/base/osaka/hokkaido/img/260909/top/bg02.webp) no-repeat top center / cover;

}

.corn .intro-title {
  padding-left: 215px;
  letter-spacing: -2px;
}

.corn .intro-title::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -45px;
  background: url(/base/osaka/hokkaido/img/260909/top/ic-corn.webp) no-repeat center center / 100%;
  width: 248px;
  height: 248px;
}

.corn-limit {
  margin-top: 115px;
  width: 600px;
  margin-inline: auto;
  background-color: #f9be00;
  border-radius: 40px;
  border: 2px solid #893a1f;
}

.corn-limit {
  margin-top: 115px;
  width: 600px;
  margin-inline: auto;
  background-color: #f9be00;
  border-radius: 40px;
  border: 2px solid #893a1f;
  padding: 35px;
}

.corn-limit-img {
  text-align: center;
}

.corn-limit .product-text {
  color: #893a1f;
}

.corn-limit .product-note {
  color: #893a1f;
}


/*-------------------------------------------------------------------------------------------------------------------------------
* sweets
-------------------------------------------------------------------------------------------------------------------------------*/
.sec-sweets {
  background-color: #fcf2fb;
}

.sweets-intro {
  padding-inline: 42.5px;
  margin-top: 60px;
  position: relative;

}

.sweets-intro::after {
  position: absolute;
  content: "";
  background: url(/base/osaka/hokkaido/img/260909/top/sweets-people.webp) no-repeat center center / 100%;
  width: 293px;
  height: 315px;
  top: 485px;
  right: 0;


}

.sweets-intro .product {
  background-color: #a44a8e;
  padding-inline: 37px;
}


.sweets-main {
  margin-top: 100px;
  margin-bottom: 200px;
}

.sweets-main .product.pt-fix {
  padding-bottom: 60px;
}

.sweets-main .product-text {
  color: #893a1f;
}

.sweets-main .product-content.sweets-fix {
  padding-top: 430px;
  padding-left: 30px;
}


.sweets-main .product-img.pos-fix {
  position: absolute;
  top: 40px;
  left: 70px;
  width: 549px;
  height: 812px;
}

.sweets-last {
  padding-inline: 42.5px;
  padding-bottom: 200px;
}

.sweets-last .last {
  background-color: white;
  position: relative;
}

.sweets-last .last::before {
  content: "";
  position: absolute;
  top: -124px;
  left: 0;
  width: 665px;
  height: 125px;
  background: url(/base/osaka/hokkaido/img/260909/top/wave.webp) no-repeat center center / 100%;
  z-index: 0;
}

.sweets-last .last::after {
  content: "";
  position: absolute;
  bottom: -124px;
  left: 0;
  width: 665px;
  height: 125px;
  background: url(/base/osaka/hokkaido/img/260909/top/wave.webp) no-repeat center center / 100%;
  z-index: 0;
  transform: rotate(180deg);
}

.sweets-last .last dl {
  display: flex;
  gap: 20px;
  padding-left: 42.5px;
  margin-top: 30px;
}

.sweets-last .last dd ul {
  display: flex;
  gap: 5px;
}

.sweets-last .last dd ul li {
  font-size: 26px;
  color: #893a1f;
}

.sweets-set {
  text-align: center;
  color: #893a1f;
}

.sweets-set .product-text {
  color: #893a1f;
}


/*-------------------------------------------------------------------------------------------------------------------------------
* boxed
-------------------------------------------------------------------------------------------------------------------------------*/

.sec-boxed {
  background-color: #fff9f8;
  padding-bottom: 150px;
}

.boxed-intro {
  display: flex;
  justify-content: center;
  align-items: end;
  transform: translateY(-80px);
}

.boxed-left {
  color: #e8562e;
  width: 231px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2px;
}

.boxed-right {
  display: flex;
}

.boxed .product-text {
  color: #893a1f;
}

/*-------------------------------------------------------------------------------------------------------------------------------
* eat
-------------------------------------------------------------------------------------------------------------------------------*/

.sec-eat {
  background-color: #fff8f5;
  padding-bottom: 100px;
}

.eat .eat-inner {
  border: 3px solid #e3007f;
  margin: 50px 35px 50px;
}

.eat .eat-inner.v2 {
  border: 3px solid #179e3a;
}

.eat .eat-name {
  background-color: #e3007f;
  text-align: center;
  padding-block: 10px;

}

.eat .v2 .eat-name {
  background-color: #179e3a;

}


.eat .eat-content {
  padding: 40px 39px 40px;
}

.eat .eat-content .product-text {
  color: #893a1f;
}

.eat .eat-content .product-text.pink {
  color: #e3007f;
}

.eat .eat-content .product-text.green {
  color: #179e3a;
}

/*-------------------------------------------------------------------------------------------------------------------------------
* gift
-------------------------------------------------------------------------------------------------------------------------------*/
.sec-gift {
  background-color: #fafcf0;
  padding-bottom: 100px;
}

.gift-wrapper {
  padding: 50px 40px;
}

.gift-top {
  padding-block: 30px;
  border-radius: 40px;
  border: 3px solid #93b257;
  background-color: white;

}

.gift-name {
  background-color: white;
  text-align: center;
  color: #93b257;
  font-weight: 900;
  font-family: "M PLUS Rounded 1c", sans-serif;

  .red {
    color: #ff0000;
  }
}

.gift-desc {
  font-size: 31px;
  font-weight: bold;
  background: #93b257;
  font-family: "M PLUS Rounded 1c", sans-serif;
  text-align: center;
  width: 534px;
  margin-inline: auto;
  color: white;
  border-radius: 80px;
  padding-block: 20px;

}

.gift-text {
  font-size: 27px;
  color: #893a1f;
  font-weight: 500;
  font-family: "M PLUS Rounded 1c", sans-serif;
}

.gift-note {
  font-size: 21px;
  color: #893a1f;
}

.gift-btn {
  margin: 30px 0 10px;
  text-align: center;
  color: #893a1f;
}

.sec-gift .product-text {
  color: #893a1f;
}

/*-------------------------------------------------------------------------------------------------------------------------------
* キャンペーン
-------------------------------------------------------------------------------------------------------------------------------*/
.sec-camp {
  background-color: #fff4f0;
  padding-bottom: 100px;
}

.camp-wrapper {
  padding: 50px 40px 0;
}

.camp-box {
  background-color: white;
  padding: 50px 54px;
  border: 4px solid #e84d07;
}

.camp-box.fix {
  padding: 50px 45px;
}

.sec-camp .camp-content {
  color: #893a1f;

}

.sec-camp .camp-content ul li {
  font-size: 27px;


}

.sec-camp .camp-content ul li .note {
  font-size: 21px;
  padding-left: 33px;
  display: block;


}



.sec-camp .camp-content ul li .red {
  color: #e60012;

}

.sec-camp .camp-text {
  font-size: 23px;
}

.sec-camp .camp-text span {
  font-size: 21px;
  display: block;
}

.camp-method {
  margin-top: 50px;
}

.camp-method h5 {
  font-family: "M PLUS Rounded 1c", sans-serif;
  color: #e84d07;
  font-size: 27px;
  font-weight: bold;
}

.camp-method .camp-add {
  font-size: 23px;

  span {
    font-size: 21px;
    display: block;
  }
}