.cocacola .main_contents .campaign h2::after, .cocacola .main_contents .itemlist .bdr_inner::before, .cocacola .main_contents .itemlist .bdr_inner::after, .cocacola .main_contents .itemlist .bdr_outer::before, .cocacola .main_contents .itemlist .bdr_outer::after, .pokkasapporo .main_contents .instagram h2::after, .mizkan .main_contents .tvcm h2::after, .scrl_contents .product .bdr_inner::before, .scrl_contents .product .bdr_inner::after, .scrl_contents .product .bdr_outer::before, .scrl_contents .product .bdr_outer::after, .scrl_contents .combination__graph .spoon, .scrl_contents .combination__graph .graph::before, .scrl_contents .combination__graph .graph::after, .scrl_contents .combination__graph .graph, .main_contents::after, .main_bg .main_bg__before picture, .main_bg::after {
  display: block;
  content: "";
  position: absolute;
}

html {
  overflow-y: scroll;
}

.loading {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  opacity: 0;
  webkit-mask-image: linear-gradient(135deg, #000 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(135deg, #000 50%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 150% 300%;
  mask-size: 150% 300%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transition: opacity 1.5s 0.5s cubic-bezier(0.32, 0.94, 0.6, 1), mask-position 1.5s 0.5s cubic-bezier(0.32, 0.94, 0.6, 1), -webkit-mask-position 1.5s 0.5s cubic-bezier(0.32, 0.94, 0.6, 1);
}
.loading.is-active {
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.loading.is-active .main_bg .main_bg__before::after {
  height: calc(100% - 100px);
}
@media print, screen and (min-width: 768px) {
  .loading.is-active .main_bg .main_bg__before::after {
    height: calc(100% - 208px);
  }
}
.loading.is-active .main_bg .main_bg__before .main_bg__before_in {
  width: 100%;
  height: 100%;
  transform: translate(0) scale(1);
}
.loading.is-hidden .main_bg::after {
  background-color: transparent;
}
.loading.is-hidden .loading__logo {
  opacity: 0;
}

.main_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.main_bg::after {
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  z-index: 3;
  transition: background-color 0.7s;
  transition-delay: 0.2s;
}
.main_bg .main_bg__before {
  width: 100%;
  height: 100%;
  position: relative;
}
.main_bg .main_bg__before picture {
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
  left: 0;
  transition: opacity 0.5s;
}
.main_bg .main_bg__before picture.main_bg__before_in {
  width: 100%;
  height: 100%;
  margin: auto;
  z-index: 1;
  inset: 0;
  transform: translate(10%, 22%);
  transition: width 2.5s cubic-bezier(0.11, 0, 0.5, 0) 2.5s, height 2.5s cubic-bezier(0.11, 0, 0.5, 0) 2.5s, transform 2s cubic-bezier(0.11, 0, 0.5, 0) 2.5s, opacity 0.5s;
}
@media print, screen and (min-width: 768px) {
  .main_bg .main_bg__before picture.main_bg__before_in {
    width: 520px;
    height: 520px;
    transform: translate(3%, 0);
  }
}
.main_bg .main_bg__before picture.main_bg__before_out {
  z-index: 2;
  opacity: 0;
}
.main_bg .main_bg__before picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.main_bg .main_bg__before.img-change .main_bg__before_in {
  opacity: 0;
}
.main_bg .main_bg__before.img-change .main_bg__before_out {
  opacity: 1;
}
.main_bg .main_bg__after {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 120%;
  z-index: 2;
  opacity: 0;
  transform: skewX(-5deg);
  transform-origin: right;
  transition: left 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1), transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.main_bg .main_bg__after img {
  width: 100%;
  max-width: initial;
  height: 100vh;
  object-fit: cover;
  transform: scale(1.2);
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.main_bg .main_bg__after .main_bg__after_child {
  width: 115%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.main_bg .main_bg__after .main_bg__after_child:last-child {
  left: 115%;
}
.main_bg .main_bg__after.is-active {
  left: -115%;
  opacity: 1;
  transform: skewX(0);
}
.main_bg .main_bg__after.is-active .main_bg__after_child:last-child {
  animation: main_bg_after_move 12s cubic-bezier(0.61, 1, 0.88, 1) forwards;
  animation-delay: 1s;
}
.main_bg .main_bg__after.is-active img {
  transform: scale(1);
}

@keyframes main_bg_after_move {
  0% {
    left: 115%;
  }
  100% {
    left: 100%;
  }
}
.loading__logo {
  width: 50%;
  max-width: 350px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 5;
  transform: translateY(-50%);
  transition: opacity 0.7s 0.2s;
}
@media print, screen and (min-width: 768px) {
  .loading__logo {
    width: 30.7%;
  }
}

.mask-layer {
  display: grid;
  place-items: center;
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.mask-box {
  width: 100%;
  height: 95vw;
  aspect-ratio: 700/665.2;
  clip-path: url(#clip);
}
@media print, screen and (min-width: 768px) {
  .mask-box {
    width: min(80vmin, 700px);
    height: auto;
  }
}

@media print, screen and (min-width: 768px) {
  main {
    height: 100vh;
  }
}
main.is-scroll {
  height: auto;
  overflow: visible;
}

.main_contents {
  visibility: hidden;
  position: relative;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.7s, visibility 0.7s;
}
@media print, screen and (min-width: 768px) {
  .main_contents {
    height: 100vh;
  }
}
.main_contents::after {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s cubic-bezier(0.85, 0, 0, 0.9);
}

#smooth-wrapper {
  z-index: 3;
}

.contents__grid {
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}
@media print, screen and (min-width: 768px) {
  .contents__grid {
    width: calc(100% - 40px);
    max-width: 1190px;
    height: auto;
    display: grid;
    grid-template-columns: 68.15% 28.89%;
    margin: 0 auto;
    z-index: 3;
    overflow: visible;
  }
}

.colab_logo {
  width: calc(100% - 125px);
  max-width: 199px;
  position: fixed;
  top: 10px;
  left: 14px;
  z-index: 4;
}
@media print, screen and (min-width: 768px) {
  .colab_logo {
    width: 68.14%;
    max-width: initial;
    margin-right: -2.46%;
    margin-bottom: 12.34%;
    position: relative;
    top: 0;
    left: -2.46%;
  }
}
.colab_logo img {
  width: 100%;
  transition-delay: 0.2s;
}

.sp_scrl_blk {
  min-width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 20px;
}
@media print, screen and (min-width: 321px) {
  .sp_scrl_blk {
    padding: 9.6%;
  }
}
@media print, screen and (min-width: 768px) {
  .sp_scrl_blk {
    min-width: auto;
    height: auto;
    display: block;
    align-items: normal;
    justify-items: legacy;
    padding: 0;
  }
}
.sp_scrl_blk.double {
  min-width: 200%;
}
@media print, screen and (min-width: 768px) {
  .sp_scrl_blk.double {
    min-width: auto;
  }
}
.sp_scrl_blk.intro {
  padding: 0;
}
.sp_scrl_blk {
  /*&.mgr100_sp {
      margin-right: 100%;
      @include sp {
          margin-right: 0;
      }
  }*/
}

.scrl_contents {
  height: 100vh;
  height: 100dvh;
  order: 1;
  display: flex;
  padding-top: 50vh;
  padding-top: 50dvh;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents {
    width: auto;
    height: auto;
    order: 0;
    display: block;
    padding: 0 0 15% 0;
  }
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .intro {
    padding-top: 20px;
  }
}
@media print, screen and (min-width: 920px) {
  .scrl_contents .intro {
    padding-top: 35px;
  }
}
@media print, screen and (min-width: 1100px) {
  .scrl_contents .intro {
    padding-top: 50px;
  }
}
.scrl_contents .about {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .about {
    margin-bottom: 20%;
  }
}
.scrl_contents .about h1 {
  width: 100%;
  position: relative;
  z-index: 2;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .about h1 {
    width: 105.54%;
    margin-right: -2.27%;
    margin-bottom: 9.5%;
    left: -2.27%;
  }
}
.scrl_contents .about h1 img {
  width: 100%;
  max-width: initial;
  transition-delay: 0.5s;
}
.scrl_contents .about__text p {
  font-size: 1.3rem;
  font-weight: 500;
  color: #FFF;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media print, screen and (min-width: 321px) {
  .scrl_contents .about__text p {
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .about__text p {
    font-size: 1.7rem;
    letter-spacing: 0.095em;
  }
}
@media print, screen and (min-width: 920px) {
  .scrl_contents .about__text p {
    font-size: 1.8rem;
  }
}
@media print, screen and (min-width: 1100px) {
  .scrl_contents .about__text p {
    font-size: 1.9rem;
  }
}
.scrl_contents .about__text.is-active .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.scrl_contents .about__text.is-active .RotateFadeIn__con .tl_only_X {
  transform: translate(0);
}
.scrl_contents .combination {
  display: flex;
  gap: 9%;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .combination {
    display: block;
    gap: 0;
    padding-top: 30vh;
    margin-bottom: 20%;
  }
}
.scrl_contents .combination img {
  max-width: initial;
  display: block;
  position: relative;
}
.scrl_contents .combination .combination__img1,
.scrl_contents .combination .combination__img2 {
  flex: 1;
  position: relative;
  overflow: visible;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .combination .combination__img1,
  .scrl_contents .combination .combination__img2 {
    flex: auto;
  }
}
.scrl_contents .combination .combination__img1 img,
.scrl_contents .combination .combination__img2 img {
  width: 100%;
  border: 1px solid #FFF;
  border-radius: 10px;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .combination .combination__img1 img,
  .scrl_contents .combination .combination__img2 img {
    border-radius: 4px;
  }
}
.scrl_contents .combination .combination__img1 {
  margin-bottom: 5%;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .combination .combination__img1 {
    margin-bottom: 8.01%;
  }
}
.scrl_contents .combination .combination__img2 {
  margin-top: 5%;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .combination .combination__img2 {
    margin-top: 0;
  }
}
.scrl_contents .combination__graph {
  position: relative;
  /*&::after {
      @extend %before_after;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s 0.5s;
  }*/
}
.scrl_contents .combination__graph .RotateFadeIn {
  overflow: visible;
}
.scrl_contents .combination__graph p {
  position: relative;
  z-index: 1;
}
.scrl_contents .combination__graph img {
  width: 100%;
  z-index: 2;
}
.scrl_contents .combination__graph .graph {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.scrl_contents .combination__graph .graph::before, .scrl_contents .combination__graph .graph::after {
  width: 100%;
  bottom: 0;
  left: 0;
}
.scrl_contents .combination__graph .graph::before {
  z-index: 0;
  transition: transform 0.7s 1s;
  transform-origin: center bottom;
}
.scrl_contents .combination__graph .graph::after {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s 1s, margin-bottom 0.7s 1s;
}
.scrl_contents .combination__graph .spoon {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s 1.2s;
}
.scrl_contents .combination__graph.is-active::after {
  opacity: 1;
}
.scrl_contents .combination__graph.is-active .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.scrl_contents .combination__graph.is-active .RotateFadeIn__con .tl_only_X {
  transform: translate(0);
}
.scrl_contents .combination__graph.is-active .graph::after {
  opacity: 1;
}
.scrl_contents .combination__graph.is-active .spoon {
  opacity: 1;
}
.scrl_contents .combination__graph .graph__shape {
  position: absolute;
  z-index: -1;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .product {
    max-width: 495px;
    margin-bottom: 13.3%;
  }
}
.scrl_contents .product .bdr_outer {
  position: relative;
}
.scrl_contents .product .bdr_outer::before, .scrl_contents .product .bdr_outer::after {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 100% auto, 100% auto;
  top: 0;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .product .bdr_outer::before, .scrl_contents .product .bdr_outer::after {
    width: 19px;
    height: 19px;
  }
}
@media print, screen and (min-width: 920px) {
  .scrl_contents .product .bdr_outer::before, .scrl_contents .product .bdr_outer::after {
    width: 22px;
    height: 22px;
  }
}
@media print, screen and (min-width: 1100px) {
  .scrl_contents .product .bdr_outer::before, .scrl_contents .product .bdr_outer::after {
    width: 24px;
    height: 24px;
  }
}
.scrl_contents .product .bdr_outer::before {
  background-image: url(../img/underlayer/corner_dotted_top_left.svg);
  left: 0;
}
.scrl_contents .product .bdr_outer::after {
  background-image: url(../img/underlayer/corner_dotted_top_right.svg);
  right: 0;
}
.scrl_contents .product .bdr_inner {
  padding: 16px 16px 5px 16px;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .product .bdr_inner {
    padding: 19px 19px 5px 19px;
  }
}
@media print, screen and (min-width: 920px) {
  .scrl_contents .product .bdr_inner {
    padding: 22px 22px 5px 22px;
  }
}
@media print, screen and (min-width: 1100px) {
  .scrl_contents .product .bdr_inner {
    padding: 24px 24px 5px 24px;
  }
}
.scrl_contents .product .bdr_inner::before, .scrl_contents .product .bdr_inner::after {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 100% auto, 100% auto;
  bottom: 0;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .product .bdr_inner::before, .scrl_contents .product .bdr_inner::after {
    width: 19px;
    height: 19px;
  }
}
@media print, screen and (min-width: 920px) {
  .scrl_contents .product .bdr_inner::before, .scrl_contents .product .bdr_inner::after {
    width: 22px;
    height: 22px;
  }
}
@media print, screen and (min-width: 1100px) {
  .scrl_contents .product .bdr_inner::before, .scrl_contents .product .bdr_inner::after {
    width: 24px;
    height: 24px;
  }
}
.scrl_contents .product .bdr_inner::before {
  background-image: url(../img/underlayer/corner_dotted_bottom_left.svg);
  left: 0;
}
.scrl_contents .product .bdr_inner::after {
  background-image: url(../img/underlayer/corner_dotted_bottom_right.svg);
  right: 0;
}
.scrl_contents .product h2 {
  margin-bottom: 10px;
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .product h2 {
    margin-bottom: 14px;
  }
}
@media print, screen and (min-width: 920px) {
  .scrl_contents .product h2 {
    margin-bottom: 17px;
  }
}
@media print, screen and (min-width: 1100px) {
  .scrl_contents .product h2 {
    margin-bottom: 20px;
  }
}
.scrl_contents .product h2 img {
  width: 100%;
}
.scrl_contents .product .product__text {
  font-size: 1.4rem;
  font-weight: 500;
  color: #FFF;
  line-height: 1.89;
  margin-bottom: 10px;
}
@media print, screen and (min-width: 321px) {
  .scrl_contents .product .product__text {
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .scrl_contents .product .product__text {
    font-size: 1.7rem;
    margin-bottom: 14px;
  }
}
@media print, screen and (min-width: 920px) {
  .scrl_contents .product .product__text {
    font-size: 1.8rem;
    margin-bottom: 17px;
  }
}
@media print, screen and (min-width: 1100px) {
  .scrl_contents .product .product__text {
    font-size: 1.9rem;
    margin-bottom: 20px;
  }
}

.back_button {
  width: 10.66%;
  max-width: 40px;
  display: block;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
@media print, screen and (min-width: 768px) {
  .back_button {
    display: none;
  }
}
.back_button.is-active {
  opacity: 1;
  visibility: visible;
}
.back_button img {
  width: 100%;
}

.item__package {
  width: 100%;
  height: 50vh;
  height: 50dvh;
  display: grid;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
}
@media print, screen and (min-width: 768px) {
  .item__package {
    width: auto;
    height: 100vh;
    min-height: 700px;
    place-items: center;
    position: static;
  }
}
.item__package .item__package_inner {
  height: 50vh;
  padding: 55px;
}
@media print, screen and (min-width: 768px) {
  .item__package .item__package_inner {
    height: auto;
    padding: 0;
  }
}
.item__package .package__img {
  height: calc(50vh - 100px);
  height: calc(50dvh - 100px);
}
@media print, screen and (min-width: 768px) {
  .item__package .package__img {
    height: auto;
  }
}
.item__package .package__img.RotateFadeIn {
  overflow: visible;
}
.item__package .package__img span {
  height: 100%;
  display: block;
}
.item__package .package__img img {
  width: auto;
  height: 100%;
  display: block;
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .item__package .package__img img {
    width: 120%;
    max-width: initial;
    margin-right: -10%;
    position: relative;
    left: -10%;
  }
}
.item__package .package__img .RotateFadeIn__con {
  height: 100%;
}
.item__package .package_slide {
  position: relative;
}
.item__package .package_slide img:not(:first-child) {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
@media print, screen and (min-width: 768px) {
  .item__package .package_slide img:not(:first-child) {
    left: -10%;
    right: auto;
  }
}
.item__package .link_button {
  width: 100%;
  margin: 0 auto;
  opacity: 0;
}
.item__package .link_button a {
  max-width: 180px;
}
@media print, screen and (min-width: 768px) {
  .item__package .link_button a {
    max-width: 226px;
  }
}
.item__package.is-active .package__img .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
  transition: opacity 1.5s cubic-bezier(0.32, 0.94, 0.6, 1), transform 1.5s cubic-bezier(0.32, 0.94, 0.6, 1) 0s;
}
.item__package.is-active .package__img .RotateFadeIn__con .tl_only_X {
  transform: translate(0);
  transition: opacity 1.5s cubic-bezier(0.32, 0.94, 0.6, 1), transform 1.5s cubic-bezier(0.32, 0.94, 0.6, 1) 0.1s;
}
.item__package.is-active .link_button {
  opacity: 1;
}
.item__package.is-active .link_button .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
  transition-delay: 0.5s;
}
.item__package.is-active .link_button .RotateFadeIn__con .tl_only_X {
  transform: translate(0);
  transition: opacity 1.5s cubic-bezier(0.32, 0.94, 0.6, 1), transform 1.5s cubic-bezier(0.32, 0.94, 0.6, 1) 0.6s;
}

.main_contents.is-active {
  display: block;
  opacity: 1;
  visibility: visible;
}
.main_contents.is-active .colab_logo .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.main_contents.is-active .colab_logo .RotateFadeIn__con .tl_only_X {
  transform: translate(0);
}
.main_contents.is-active .scrl_contents .about h1 .RotateFadeIn__con {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
  transition-delay: 0.5s;
}
.main_contents.is-active .scrl_contents .about h1 .RotateFadeIn__con .tl_only_X {
  transform: translate(0);
  transition-delay: 0.7s;
}
.main_contents.is-overlay::after {
  clip-path: inset(0 0 0 0);
}

.mizkan .loading__shape #mask-path {
  fill: #801100;
  fill-opacity: 0.6;
}
.mizkan .main_bg::after {
  background-color: rgba(128, 17, 0, 0.5);
}
.mizkan .main_bg .main_bg__before_in {
  width: 100%;
  height: 100%;
  transform: translate(0) scale(1);
}
.mizkan .mask-svg {
  fill: #801100;
  fill-opacity: 0.6;
}
.mizkan .main_contents::after {
  background-color: rgba(128, 17, 0, 0.5);
}
.mizkan .main_contents .combination .combination__img1 {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .mizkan .main_contents .combination .combination__img1 .RotateFadeIn__con {
    width: 80.14%;
    margin-right: -19.72%;
    left: -19.72%;
  }
}
.mizkan .main_contents .combination .combination__img2 {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .mizkan .main_contents .combination .combination__img2 .RotateFadeIn__con {
    width: 80.14%;
    margin-left: 14.79%;
  }
}
.mizkan .main_contents .combination .combination__img1 img,
.mizkan .main_contents .combination .combination__img2 img {
  box-shadow: 0px 0px 10px rgba(128, 17, 0, 0.2);
}
@media print, screen and (min-width: 768px) {
  .mizkan .main_contents .combination__graph {
    margin-top: -2.83%;
  }
}
.mizkan .main_contents .combination__graph {
  /*&::after {
      width: 80.19%;
      height: 107.37%;
      background: url(../img/mizkan/combination_graph_bg.png) no-repeat center center;
      background-size: 100% 100%;
      top: -12.7%;
      left: 6%;
      @include sp {
          width: 43.27%;
          top: 4.3%;
          left: -3%;
      }
  }*/
}
.mizkan .main_contents .combination__graph p {
  width: 69.96%;
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  .mizkan .main_contents .combination__graph p {
    width: 38.47%;
    margin: 0;
  }
}
.mizkan .main_contents .combination__graph .graph::before, .mizkan .main_contents .combination__graph .graph::after {
  width: 26.25%;
}
.mizkan .main_contents .combination__graph .graph::before {
  padding-top: 1.6%;
  bottom: 22%;
}
.mizkan .main_contents .combination__graph .graph::after {
  padding-top: 8.97%;
  bottom: 18.6%;
}
.mizkan .main_contents .combination__graph .graph1::before, .mizkan .main_contents .combination__graph .graph1::after {
  left: 18.26%;
}
.mizkan .main_contents .combination__graph .graph1::before {
  background-color: #FCEEDA;
}
.mizkan .main_contents .combination__graph .graph1::after {
  background-image: url(../img/mizkan/graph1_water_surface.png);
}
.mizkan .main_contents .combination__graph .graph2::before, .mizkan .main_contents .combination__graph .graph2::after {
  left: 54.5%;
}
.mizkan .main_contents .combination__graph .graph2::before {
  background-color: #E37F73;
}
.mizkan .main_contents .combination__graph .graph2::after {
  background-image: url(../img/mizkan/graph2_water_surface.png);
}
.mizkan .main_contents .combination__graph.is-active .graph1::before {
  transform: scaleY(12);
}
.mizkan .main_contents .combination__graph.is-active .graph1::after {
  margin-bottom: 19%;
}
.mizkan .main_contents .combination__graph.is-active .graph2::before {
  transform: scaleY(4.5);
}
.mizkan .main_contents .combination__graph.is-active .graph2::after {
  margin-bottom: 6.5%;
}
.mizkan .main_contents .combination__graph .graph__shape {
  width: 96.2%;
  height: 144.55%;
  top: -32%;
  left: -4%;
  opacity: 0.7;
}
@media print, screen and (min-width: 768px) {
  .mizkan .main_contents .combination__graph .graph__shape {
    width: 53.2%;
    height: 144.55%;
    top: -17%;
    left: -9.3%;
    opacity: 0.7;
  }
}
.mizkan .main_contents .combination__graph .graph__shape path {
  fill: #801100;
}
.mizkan .main_contents .tvcm {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .mizkan .main_contents .tvcm {
    max-width: 590px;
  }
}
.mizkan .main_contents .tvcm h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #FFF;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .mizkan .main_contents .tvcm h2 {
    font-size: 1.7rem;
    margin-bottom: 12px;
  }
}
@media print, screen and (min-width: 920px) {
  .mizkan .main_contents .tvcm h2 {
    font-size: 1.8rem;
    margin-bottom: 14px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mizkan .main_contents .tvcm h2 {
    font-size: 1.9rem;
    margin-bottom: 15px;
  }
}
.mizkan .main_contents .tvcm h2::after {
  width: 1px;
  height: 18px;
  margin: 0 auto;
  background-color: #FFF;
  top: calc(100% - 5px);
  left: 0;
  right: 0;
}
@media print, screen and (min-width: 768px) {
  .mizkan .main_contents .tvcm h2::after {
    height: 22px;
    top: calc(100% - 7px);
  }
}
@media print, screen and (min-width: 920px) {
  .mizkan .main_contents .tvcm h2::after {
    height: 26px;
  }
}
@media print, screen and (min-width: 1100px) {
  .mizkan .main_contents .tvcm h2::after {
    height: 30px;
  }
}
.mizkan .main_contents .tvcm h2 span {
  padding-bottom: 5px;
  border-bottom: 1px solid #FFF;
}
.mizkan .main_contents .tvcm .movie {
  padding-top: 55.25%;
  box-shadow: 0px 0px 10px rgba(128, 17, 0, 0.2);
  position: relative;
  overflow: hidden;
}
.mizkan .main_contents .tvcm .movie iframe {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.mizkan .text_glow {
  text-shadow: 0px 0px 10px rgba(128, 17, 0, 0.2);
}

.pokkasapporo .loading__shape #mask-path {
  fill: #FFB637;
  fill-opacity: 0.6;
}
.pokkasapporo .main_bg::after {
  background-color: rgba(255, 204, 65, 0.5);
}
.pokkasapporo .main_bg .main_bg__before picture.main_bg__before_in {
  transform: translate(-2%, 12%) scale(0.7);
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_bg .main_bg__before picture.main_bg__before_in {
    transform: translate(-15%, 0) scale(1);
  }
}
.pokkasapporo .loading__logo {
  transform: translateY(-55%);
}
.pokkasapporo .mask-svg {
  fill: #FFB637;
  fill-opacity: 0.6;
}
.pokkasapporo .main_contents::after {
  background-color: rgba(235, 166, 36, 0.45);
}
.pokkasapporo .main_contents .combination .combination__img1 {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination .combination__img1 .RotateFadeIn__con {
    width: 80.14%;
    margin-right: -19.72%;
    left: -19.72%;
  }
}
.pokkasapporo .main_contents .combination .combination__img2 {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination .combination__img2 .RotateFadeIn__con {
    width: 80.14%;
    margin-left: auto;
    right: -2.58%;
  }
}
.pokkasapporo .main_contents .combination .combination__img1 img,
.pokkasapporo .main_contents .combination .combination__img2 img {
  box-shadow: 0px 0px 10px rgba(255, 204, 65, 0.2);
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph {
    margin-top: -3.57%;
  }
}
.pokkasapporo .main_contents .combination__graph {
  /*&::after {
      width: 85.25%;
      height: 122.41%;
      background: url(../img/pokkasapporo/combination_graph_bg_sp.png) no-repeat center center;
      background-size: 100% 100%;
      top: -11%;
      left: 10%;
      @include sp {
          width: 50.67%;
          height: 94%;
          background-image: url(../img/pokkasapporo/combination_graph_bg_pc.png);
          top: -6%;
          left: -5%;
      }
  }*/
}
.pokkasapporo .main_contents .combination__graph p {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph p {
    width: 38.47%;
    margin-left: 2.83%;
  }
}
.pokkasapporo .main_contents .combination__graph .graph::before, .pokkasapporo .main_contents .combination__graph .graph::after {
  width: 19.4%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph .graph::before, .pokkasapporo .main_contents .combination__graph .graph::after {
    width: 26.25%;
  }
}
.pokkasapporo .main_contents .combination__graph .graph::before {
  padding-top: 1.6%;
  bottom: 17%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph .graph::before {
    bottom: 45%;
  }
}
.pokkasapporo .main_contents .combination__graph .graph::after {
  padding-top: 8.97%;
  bottom: 13.7%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph .graph::after {
    bottom: 42.3%;
  }
}
.pokkasapporo .main_contents .combination__graph .graph1::before, .pokkasapporo .main_contents .combination__graph .graph1::after {
  left: 13.7%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph .graph1::before, .pokkasapporo .main_contents .combination__graph .graph1::after {
    left: 18.1%;
  }
}
.pokkasapporo .main_contents .combination__graph .graph1::before {
  width: 19.4%;
  background-color: #FCEEDA;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph .graph1::before {
    width: 26.4%;
  }
}
.pokkasapporo .main_contents .combination__graph .graph1::after {
  background-image: url(../img/pokkasapporo/graph1_water_surface.png);
}
.pokkasapporo .main_contents .combination__graph .spoon {
  width: 12.38%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph .spoon {
    width: 17.3%;
  }
}
.pokkasapporo .main_contents .combination__graph .spoon1 {
  top: 51.22%;
  left: 44.5%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph .spoon1 {
    top: 34.22%;
    left: 59%;
  }
}
.pokkasapporo .main_contents .combination__graph .spoon2 {
  top: 51.22%;
  left: 72%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph .spoon2 {
    top: auto;
    bottom: 10.88%;
    left: 41%;
  }
}
.pokkasapporo .main_contents .combination__graph.is-active .graph1::before {
  transform: scaleY(8);
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph.is-active .graph1::before {
    transform: scaleY(10.3);
  }
}
.pokkasapporo .main_contents .combination__graph.is-active .graph1::after {
  margin-bottom: 10%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph.is-active .graph1::after {
    margin-bottom: 16%;
  }
}
.pokkasapporo .main_contents .combination__graph .graph__shape {
  width: 126%;
  height: 162.72%;
  top: -39%;
  left: -13%;
  opacity: 0.7;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .combination__graph .graph__shape {
    width: 67.03%;
    height: 112.22%;
    top: -12%;
    left: -12.5%;
    opacity: 0.7;
  }
}
.pokkasapporo .main_contents .combination__graph .graph__shape path {
  fill: #EBA624;
}
.pokkasapporo .main_contents .instagram {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .instagram {
    max-width: 495px;
  }
}
.pokkasapporo .main_contents .instagram h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #FFF;
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .instagram h2 {
    font-size: 1.7rem;
    margin-bottom: 32px;
  }
}
@media print, screen and (min-width: 920px) {
  .pokkasapporo .main_contents .instagram h2 {
    font-size: 1.8rem;
    margin-bottom: 38px;
  }
}
@media print, screen and (min-width: 1100px) {
  .pokkasapporo .main_contents .instagram h2 {
    font-size: 1.9rem;
    margin-bottom: 43px;
  }
}
.pokkasapporo .main_contents .instagram h2::after {
  width: 1px;
  height: 18px;
  margin: 0 auto;
  background-color: #FFF;
  top: calc(100% - 5px);
  left: 0;
  right: 0;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .instagram h2::after {
    height: 22px;
    top: calc(100% - 7px);
  }
}
@media print, screen and (min-width: 920px) {
  .pokkasapporo .main_contents .instagram h2::after {
    height: 26px;
  }
}
@media print, screen and (min-width: 1100px) {
  .pokkasapporo .main_contents .instagram h2::after {
    height: 30px;
  }
}
.pokkasapporo .main_contents .instagram h2 span {
  padding-bottom: 5px;
  border-bottom: 1px solid #FFF;
}
.pokkasapporo .main_contents .instagram ul li:not(:last-child) {
  margin-bottom: 20px;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .instagram ul li:not(:last-child) {
    margin-bottom: 23px;
  }
}
@media print, screen and (min-width: 920px) {
  .pokkasapporo .main_contents .instagram ul li:not(:last-child) {
    margin-bottom: 26px;
  }
}
@media print, screen and (min-width: 1100px) {
  .pokkasapporo .main_contents .instagram ul li:not(:last-child) {
    margin-bottom: 28px;
  }
}
.pokkasapporo .main_contents .instagram ul a {
  font-size: 1.3rem;
  font-weight: bold;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.5s;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .instagram ul a {
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 920px) {
  .pokkasapporo .main_contents .instagram ul a {
    font-size: 1.6rem;
  }
}
@media print, screen and (min-width: 1100px) {
  .pokkasapporo .main_contents .instagram ul a {
    font-size: 1.7rem;
  }
}
@media (hover: hover) {
  .pokkasapporo .main_contents .instagram ul a:where(:any-link, :enabled, summary, span, dt, div):hover {
    opacity: 0.7;
  }
}
.pokkasapporo .main_contents .instagram ul a img {
  width: 23px;
}
.pokkasapporo .main_contents .instagram ul a span {
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0;
  padding: 2px 10px 8px 10px;
  border: 1px solid #FFF;
  border-radius: 50px;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .main_contents .instagram ul a span {
    font-size: 1.4rem;
  }
}
@media print, screen and (min-width: 920px) {
  .pokkasapporo .main_contents .instagram ul a span {
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 1100px) {
  .pokkasapporo .main_contents .instagram ul a span {
    font-size: 1.6rem;
  }
}
.pokkasapporo .text_glow {
  text-shadow: 0px 0px 10px rgba(255, 204, 65, 0.2);
}
.pokkasapporo .item__package {
  top: 2.5%;
}
@media print, screen and (min-width: 768px) {
  .pokkasapporo .item__package {
    top: 0;
  }
}

.cocacola .loading__shape #mask-path {
  fill: #D49C61;
  fill-opacity: 0.6;
}
.cocacola .main_bg::after {
  background-color: rgba(193, 137, 97, 0.5);
}
.cocacola .main_bg .main_bg__before picture.main_bg__before_in {
  transform: translate(6%, 13%) scale(0.8);
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_bg .main_bg__before picture.main_bg__before_in {
    transform: scale(1.1) translateX(2%) translateY(-5%);
  }
}
.cocacola .loading__logo {
  transform: translateY(-55%);
}
.cocacola .mask-svg {
  fill: #D49C61;
  fill-opacity: 0.6;
}
.cocacola .main_contents::after {
  background-color: rgba(140, 87, 2, 0.55);
}
.cocacola .main_contents .about__text p {
  letter-spacing: 0.01em;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .about__text p {
    letter-spacing: 0.05em;
  }
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination .combination__img1 {
    width: 100%;
  }
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination .combination__img1 .RotateFadeIn__con {
    width: 80.14%;
    margin-left: auto;
    right: -1.84%;
  }
}
.cocacola .main_contents .combination .combination__img2 {
  width: 90%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination .combination__img2 .RotateFadeIn__con {
    width: 70.28%;
    margin-right: -19.72%;
    left: -19.72%;
  }
}
.cocacola .main_contents .combination .combination__img1 img,
.cocacola .main_contents .combination .combination__img2 img {
  box-shadow: 0px 0px 10px rgba(201, 119, 27, 0.2);
}
.cocacola .main_contents .combination__graph {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph {
    width: 38.47%;
    margin-left: 4.93%;
  }
}
.cocacola .main_contents .combination__graph {
  /*&::after {
      width: 87.9%;
      height: 125.43%;
      background: url(../img/cocacola/combination_graph_bg_sp.png) no-repeat center center;
      background-size: 100% 100%;
      top: -12.5%;
      left: 6%;
      @include sp {
          width: 151.92%;
          height: 107.56%;
          background-image: url(../img/cocacola/combination_graph_bg_pc.png);
          top: -6%;
          left: -28%;
      }
  }*/
}
.cocacola .main_contents .combination__graph .graph::before, .cocacola .main_contents .combination__graph .graph::after {
  width: 18%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph .graph::before, .cocacola .main_contents .combination__graph .graph::after {
    width: 26.1%;
  }
}
.cocacola .main_contents .combination__graph .graph::before {
  padding-top: 1.6%;
  bottom: 17%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph .graph::before {
    bottom: 20%;
  }
}
.cocacola .main_contents .combination__graph .graph::after {
  padding-top: 7.97%;
  bottom: 13.7%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph .graph::after {
    padding-top: 8.97%;
    bottom: 16.7%;
  }
}
.cocacola .main_contents .combination__graph .graph1::before, .cocacola .main_contents .combination__graph .graph1::after {
  left: 40.2%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph .graph1::before, .cocacola .main_contents .combination__graph .graph1::after {
    left: 18.1%;
  }
}
.cocacola .main_contents .combination__graph .graph1::before {
  width: 18%;
  background-color: #FAECD9;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph .graph1::before {
    width: 26.4%;
  }
}
.cocacola .main_contents .combination__graph .graph1::after {
  background-image: url(../img/cocacola/graph1_water_surface.png);
}
.cocacola .main_contents .combination__graph .graph2::before, .cocacola .main_contents .combination__graph .graph2::after {
  left: 65.2%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph .graph2::before, .cocacola .main_contents .combination__graph .graph2::after {
    left: 54.4%;
  }
}
.cocacola .main_contents .combination__graph .graph2::before {
  width: 18%;
  background-color: #DBAF7F;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph .graph2::before {
    width: 26.4%;
  }
}
.cocacola .main_contents .combination__graph .graph2::after {
  background-image: url(../img/cocacola/graph2_water_surface.png);
}
.cocacola .main_contents .combination__graph .graph__shape {
  width: 100%;
  height: 144.72%;
  top: -23%;
  left: 0%;
  opacity: 0.7;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph .graph__shape {
    width: 172.34%;
    height: 121.46%;
    top: -12%;
    left: -40.5%;
    opacity: 0.7;
  }
}
.cocacola .main_contents .combination__graph .graph__shape path {
  fill: #8C5702;
}
.cocacola .main_contents .combination__graph.is-active .graph1::before {
  transform: scaleY(3);
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph.is-active .graph1::before {
    transform: scaleY(4.3);
  }
}
.cocacola .main_contents .combination__graph.is-active .graph1::after {
  margin-bottom: 3.5%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph.is-active .graph1::after {
    margin-bottom: 6%;
  }
}
.cocacola .main_contents .combination__graph.is-active .graph2::before {
  transform: scaleY(9);
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph.is-active .graph2::before {
    transform: scaleY(12);
  }
}
.cocacola .main_contents .combination__graph.is-active .graph2::after {
  margin-bottom: 12%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .combination__graph.is-active .graph2::after {
    margin-bottom: 19%;
  }
}
.cocacola .main_contents .addmilk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .addmilk {
    margin-top: -6.9%;
  }
}
.cocacola .main_contents .addmilk_blk {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .addmilk_blk {
    width: 36.79%;
  }
}
.cocacola .main_contents .addmilk_blk p {
  width: 100%;
  margin: 0;
}
.cocacola .main_contents .addmilk_blk img {
  width: 100%;
}
.cocacola .main_contents .itemlist {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .itemlist {
    max-width: 590px;
    margin-bottom: 11.97%;
  }
}
.cocacola .main_contents .itemlist .bdr_outer {
  position: relative;
}
.cocacola .main_contents .itemlist .bdr_outer::before, .cocacola .main_contents .itemlist .bdr_outer::after {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 100% auto, 100% auto;
  top: 0;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .itemlist .bdr_outer::before, .cocacola .main_contents .itemlist .bdr_outer::after {
    width: 19px;
    height: 19px;
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .itemlist .bdr_outer::before, .cocacola .main_contents .itemlist .bdr_outer::after {
    width: 22px;
    height: 22px;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .itemlist .bdr_outer::before, .cocacola .main_contents .itemlist .bdr_outer::after {
    width: 24px;
    height: 24px;
  }
}
.cocacola .main_contents .itemlist .bdr_outer::before {
  background-image: url(../img/underlayer/corner_dotted_top_left.svg);
  left: 0;
}
.cocacola .main_contents .itemlist .bdr_outer::after {
  background-image: url(../img/underlayer/corner_dotted_top_right.svg);
  right: 0;
}
.cocacola .main_contents .itemlist .bdr_inner {
  display: flex;
  align-items: center;
  gap: 3%;
  padding: 16px 16px 16px 16px;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .itemlist .bdr_inner {
    display: block;
    padding: 19px 19px 19px 19px;
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .itemlist .bdr_inner {
    padding: 22px 22px 22px 22px;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .itemlist .bdr_inner {
    padding: 24px 24px 24px 24px;
  }
}
.cocacola .main_contents .itemlist .bdr_inner::before, .cocacola .main_contents .itemlist .bdr_inner::after {
  width: 16px;
  height: 16px;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 100% auto, 100% auto;
  bottom: 0;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .itemlist .bdr_inner::before, .cocacola .main_contents .itemlist .bdr_inner::after {
    width: 19px;
    height: 19px;
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .itemlist .bdr_inner::before, .cocacola .main_contents .itemlist .bdr_inner::after {
    width: 22px;
    height: 22px;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .itemlist .bdr_inner::before, .cocacola .main_contents .itemlist .bdr_inner::after {
    width: 24px;
    height: 24px;
  }
}
.cocacola .main_contents .itemlist .bdr_inner::before {
  background-image: url(../img/underlayer/corner_dotted_bottom_left.svg);
  left: 0;
}
.cocacola .main_contents .itemlist .bdr_inner::after {
  background-image: url(../img/underlayer/corner_dotted_bottom_right.svg);
  right: 0;
}
.cocacola .main_contents .itemlist .itemlist__img {
  width: 60%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .itemlist .itemlist__img {
    width: auto;
    margin-bottom: 17px;
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .itemlist .itemlist__img {
    margin-bottom: 19px;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .itemlist .itemlist__img {
    margin-bottom: 20px;
  }
}
.cocacola .main_contents .itemlist .itemlist__img img {
  width: 100%;
}
.cocacola .main_contents .itemlist .itemlist__text {
  flex: 1;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .itemlist .itemlist__text {
    flex: auto;
  }
}
.cocacola .main_contents .itemlist .itemlist__text p {
  font-size: 1.4rem;
  font-weight: 500;
  color: #FFF;
  line-height: 1.89;
}
@media print, screen and (min-width: 321px) {
  .cocacola .main_contents .itemlist .itemlist__text p {
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .itemlist .itemlist__text p {
    font-size: 1.7rem;
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .itemlist .itemlist__text p {
    font-size: 1.8rem;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .itemlist .itemlist__text p {
    font-size: 1.9rem;
  }
}
.cocacola .main_contents .itemlist .itemlist__text {
  /*.link_button a {
      margin: 0;
      @include sp {
          margin: 0 auto;
      }
  }*/
}
.cocacola .main_contents .campaign {
  width: 100%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .campaign {
    max-width: 590px;
  }
}
.cocacola .main_contents .campaign h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #FFF;
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
  position: relative;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .campaign h2 {
    font-size: 1.7rem;
    margin-bottom: 32px;
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .campaign h2 {
    font-size: 1.8rem;
    margin-bottom: 38px;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .campaign h2 {
    font-size: 1.9rem;
    margin-bottom: 43px;
  }
}
.cocacola .main_contents .campaign h2::after {
  width: 1px;
  height: 18px;
  margin: 0 auto;
  background-color: #FFF;
  top: calc(100% - 5px);
  left: 0;
  right: 0;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .campaign h2::after {
    height: 22px;
    top: calc(100% - 7px);
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .campaign h2::after {
    height: 26px;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .campaign h2::after {
    height: 30px;
  }
}
.cocacola .main_contents .campaign h2 span {
  padding-bottom: 5px;
  border-bottom: 1px solid #FFF;
}
.cocacola .main_contents .campaign ul li:not(:last-child) {
  margin-bottom: 20px;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .campaign ul li:not(:last-child) {
    margin-bottom: 23px;
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .campaign ul li:not(:last-child) {
    margin-bottom: 26px;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .campaign ul li:not(:last-child) {
    margin-bottom: 28px;
  }
}
.cocacola .main_contents .campaign ul a {
  font-size: 1.3rem;
  font-weight: bold;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.5s;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .campaign ul a {
    font-size: 1.5rem;
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .campaign ul a {
    font-size: 1.6rem;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .campaign ul a {
    font-size: 1.7rem;
  }
}
@media (hover: hover) {
  .cocacola .main_contents .campaign ul a:where(:any-link, :enabled, summary, span, dt, div):hover {
    opacity: 0.7;
  }
}
.cocacola .main_contents .campaign ul a .font_s {
  font-size: 1rem;
  display: block;
  margin-top: 2px;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .campaign ul a .font_s {
    font-size: 1.1rem;
    display: inline;
    margin-top: 0;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .campaign ul a .font_s {
    font-size: 1.2rem;
  }
}
.cocacola .main_contents .campaign ul a img {
  width: 23px;
}
.cocacola .main_contents .campaign ul a .check {
  font-size: 1.2rem;
  text-align: center;
  line-height: 1;
  letter-spacing: 0;
  min-width: 56px;
  padding: 3px 10px 7px 10px;
  border: 1px solid #FFF;
  border-radius: 50px;
}
@media print, screen and (min-width: 768px) {
  .cocacola .main_contents .campaign ul a .check {
    font-size: 1.4rem;
    min-width: 66px;
  }
}
@media print, screen and (min-width: 920px) {
  .cocacola .main_contents .campaign ul a .check {
    font-size: 1.5rem;
    min-width: 76px;
  }
}
@media print, screen and (min-width: 1100px) {
  .cocacola .main_contents .campaign ul a .check {
    font-size: 1.6rem;
  }
}
.cocacola .text_glow {
  text-shadow: 0px 0px 10px rgba(201, 119, 27, 0.2);
}
.cocacola .item__package {
  top: 2.5%;
}
@media print, screen and (min-width: 768px) {
  .cocacola .item__package {
    top: 0;
  }
}