@font-face {
  font-family: 'HiraKakuStd-W7-AlphaNum';
  src: url('/cocobana/fonts/HiraKakuStd-W7-AlphaNum.eot');
  src: url('/cocobana/fonts/HiraKakuStd-W7-AlphaNum.eot?#iefix') format('embedded-opentype'),
      url('/cocobana/fonts/HiraKakuStd-W7-AlphaNum.woff2') format('woff2'),
      url('/cocobana/fonts/HiraKakuStd-W7-AlphaNum.woff') format('woff'),
      url('/cocobana/fonts/HiraKakuStd-W7-AlphaNum.ttf') format('truetype'),
      url('/cocobana/fonts/HiraKakuStd-W7-AlphaNum.svg#HiraKakuStd-W7-AlphaNum') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
img {
  max-width: 100%;
}
section {
  position: relative;
  z-index: 1;
}
.js-fadeUp,
.js-fadeUp--list {
  opacity: 0;
  transform: translateY(10%);
}
.js-fadeRight {
  opacity: 0;
}
.js-fadeLeft {
  opacity: 0;
}
.animation__wobbling {
  animation: wobbling_x 1s ease-in-out infinite alternate,
		wobbling_y 1.5s ease-in-out infinite alternate;
}
@keyframes wobbling_x {
	0% {
		margin-left: 12px;
	}
	100% {
		margin-left: 0px;
	}
}
@keyframes wobbling_y {
	0% {
		margin-top: 0px;
	}
	100% {
		margin-top: 12px;
	}
}
@keyframes recomend__popup {
  0% {
    transform: translate(0px, 0px);
  }
  10% {
    transform: translate(5px, 5px);
  }
  20% {
    transform: translate(0px, 0px);
  }
  30% {
    transform: translate(5px, 5px);
  }
  40%, 100% {
    transform: translate(0px, 0px);
  }
}
#cocobana {
  padding-bottom: 7%;
  position: relative;
  background: url(../files/bg_texture_sp.jpg) center top/100%;
  overflow: hidden;
  color: #973300;
}
.b-container {
  margin: 0 auto;
  max-width: 1062px;
  padding: 0 6.4vw;
}
.mb--0 {margin-bottom: 0!important;}

.b-order {
  margin-bottom: 6.667vw;
}
.b-order h2 {
  text-align: center;
  margin-bottom: 3.2vw;
}
.b-order h3 {
  text-align: center;
  margin-bottom: 2.667vw;
}
.b-order h3 img {
  height: 5.333vw;
}
.b-box {
  background-color: #fff;
  border: 1px solid #8b2f00;
  border-radius: 4vw;
  padding: 4vw;
}
.b-lead {
  font-family: 'HiraKakuStd-W7-AlphaNum';
  font-weight: 700;
  text-align: center;
  font-size: 4vw;
  letter-spacing: 0.1em;
  line-height: 1.2;
  margin-bottom: 4vw;
}
.b-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #8b2f00;
  text-align: center;
  height: 18.667vw;
  border-radius: 10vw;
  text-decoration: none!important;
  text-align: center;
}
.b-button a img {
  height: 12.4vw;
}
@media screen and (max-width: 767px) {
  .u-md-only,
  .u-pc-only {
    display: none!important;
  }
  .mb--sp-8 {margin-bottom: 8vw!important;}
}
@media screen and (min-width: 768px) {
  .u-sp-only {
    display: none!important;
  }
  .mb--pc-65 {margin-bottom: 65px!important;}
  #cocobana {
    padding-bottom: 80px;
    background: url(../files/bg_texture.jpg) center top/100%;
  }
  .b-container {
    padding: 0 30px;
  }
  .b-order {
    margin-bottom: 54px;
  }
  .b-order h2 {
    margin-bottom: 31px;
  }
  .b-order h2 img {
    max-width: 641px;
  }
  .b-order h3 {
    margin-bottom: 20px;
  }
  .b-order h3 img {
    height: 44px;
  }
  .b-box {
    border-radius: 30px;
    padding: 34px 30px 30px;
  }
  .b-lead {
    font-size: 33px;
    margin-bottom: 25px;
  }
  .b-button a {
    height: 154px;
    border-radius: 78px;
    transition: opacity 0.3s ease;
    font-size: 38px;
  }
  .b-button a:hover {
    opacity: 0.7;
  }
  .b-button a img {
    height: 102px;
  }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
  .h-md-only {
    display: none!important;
  }
}
@media screen and (min-width: 961px) {
  .u-md-only {
    display: none!important;
  }
}

.b-menu,
.b-movie {
  margin-bottom: 6.667vw;
}
.b-movie h2 {
  font-size: 0;
  text-align: center;
  margin-bottom: 3.467vw;
}
.b-movie h2 img {
  height: 5.733vw;
}
.b-movie p {
  font-family: 'HiraKakuStd-W7-AlphaNum';
  font-size: 3.533vw;
  text-align: center;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 4vw;
}
.b-youtube {
  margin: 0 auto;
  max-width: 560px;
}
.b-youtube iframe {
  width: 100%;
  height: 40.3vw;
}
.b-menu .b-button a {
  background-color: #ffba00;
}
@media screen and (max-width: 767px) {
  .b-youtube {
    padding-left: 1.867vw;
    padding-right: 1.867vw;
  }
  .b-movie .b-box {
    padding-bottom: 5.867vw;
  }
  .b-menu {
    padding-left: 4vw;
    padding-right: 4vw;
  }
}
@media screen and (min-width: 768px) {
  .b-menu,
  .b-movie {
    margin-bottom: 54px;
  }
  .b-movie .b-box {
    padding: 27px 30px 48px;
  }
  .b-movie p {
    font-size: 19px;
    margin-bottom: 30px;
  }
  .b-movie h2 {
    margin-bottom: 23px;
  }
  .b-movie h2 img {
    width: 563px;
    height: auto;
  }
  .b-youtube iframe {
    height: 315px;
  }
}

/* hambur */
.clearfix:after {
  content: ' ';
  display: block;
  clear: both;
}
.b-ham__head {
  padding-bottom: 8.933vw;
  padding-top: 7.733vw;
  position: relative;
}
.b-ham__head h1,
.b-ham__head h2 {
  font-size: 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.b-ham__head h1 {
  margin-bottom: 1.6vw;
}
.b-ham__head h1 img {
  width: 76vw;
}
.b-ham__head h2 img {
  width: 24.267vw;
}
.h-ballon01 {
  background: url(../files/ballon01_sp.png) no-repeat 0 0 / 100% 100%;
  width: 37.867vw;
  height: 38vw;
  position: absolute;
  left: -14vw;
  top: -14.267vw;
}
.b-ham__list {
  margin-bottom: 2vw;
}
.b-ham__item {
  width: 78.667vw;
  margin-bottom: 6.667vw;
  float: left;
}
.b-ham__item:nth-child(even) {
  float: right;
}
.b-ham__box {
  background-color: #fff;
  border: 0.8vw solid #8b2f00;
  padding: 0.933vw;
  border-radius: 8vw;
  position: relative;
}
.b-ham__inner {
  border: 1px solid #8b2f00;
  border-radius: 6.4vw;
  -webkit-overflow: hidden;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  position: relative;
}
.b-ham__open {
  background: url(../../files/front_sp.png) no-repeat 0 0 / 100% 100%;
  width: 21.6vw;
  height: 5.6vw;
  position: absolute;
  right: -2.933vw;
  bottom: 3.2vw;
  cursor: pointer;
  z-index: 3;
}
.b-ham__num {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  position: absolute;
  right: -2.5vw;
  top: -2.5vw;
  width: 27.2vw;
  height: 27.2vw;
  font-size: 0;
  z-index: 3;
}
.b-ham__num1 {
  background-image: url(../../files/num01_sp.png);
}
.b-ham__num2 {
  background-image: url(../../files/num02_sp.png);
}
.b-ham__num3 {
  background-image: url(../../files/num03_sp.png);
}
.b-ham__num4 {
  background-image: url(../../files/num04_sp.png);
}
.b-ham__num5 {
  background-image: url(../../files/num05_sp.png);
}
.b-ham__num6 {
  background-image: url(../../files/num06_sp.png);
}
.b-ham__num7 {
  background-image: url(../../files/num07_sp.png);
}
.b-ham__num8 {
  background-image: url(../../files/num08_sp.png);
}
@media screen and (max-width: 767px) {
  .b-ham__item:nth-child(even) .b-ham__num {
    right: inherit;
    left: -2.5vw;
  }
  .b-ham__item:nth-child(even) .b-ham__num8 {
    right: -2.5vw;
    left: inherit;
  }
}
@media screen and (min-width: 768px) {
  .b-hambur .b-container {
    position: relative;
  }
  .b-ham__head {
    padding-bottom: 106px;
    padding-top: 102px;
  }
  .b-ham__head h1 {
    margin-bottom: 17px;
  }
  .b-ham__head h1 img {
    width: 853px;
  }
  .b-ham__head h2 img {
    width: 273px;
  }
  .h-ballon01 {
    background-image: url(../files/ballon01.png);
    width: 426px;
    height: 426px;
    position: absolute;
    top: -70px;
    left: -146px;
  }
  .h-ballon02 {
    background: url(../files/ballon02.png) no-repeat 0 0 / 100% 100%;
    width: 170px;
    height: 170px;
    position: absolute;
    right: 112px;
    bottom: -124px;
  }
  .h-ballon03 {
    background: url(../files/ballon03.png) no-repeat 0 0 / 100% 100%;
    width: 53px;
    height: 53px;
    position: absolute;
    right: 58px;
    top: 274px;
  }
  .h-ballon04 {
    background: url(../files/ballon04.png) no-repeat 0 0 / 100% 100%;
    width: 267px;
    height: 165px;
    position: absolute;
    right: 124px;
    bottom: 48px;
  }
  .b-ham__list {
    margin-bottom: 38px;
  }
  .b-ham__item {
    width: 50%;
    padding-right: 28px;
    margin-bottom: 40px;
  }
  .b-ham__item:nth-child(even) {
    padding-right: 0;
    padding-left: 28px;
  }
  .b-ham__item:nth-child(2) {
    margin-top: 256px;
  }
  .b-ham__box {
    border-width: 5px;
    border-radius: 48px;
    padding: 5px;
  }
  .b-ham__inner {
    border-radius: 45px;
  }
  .b-ham__open {
    background-image: url(../../files/front.png);
    width: 129px;
    height: 34px;
    right: -20px;
    bottom: 24px;
  }
  .b-ham__num {
    width: 163px;
    height: 163px;
    right: -15px;
    top: -15px;
  }
  .b-ham__num1 {
    background-image: url(../../files/num01.png);
  }
  .b-ham__num2 {
    background-image: url(../../files/num02.png);
  }
  .b-ham__num3 {
    background-image: url(../../files/num03.png);
  }
  .b-ham__num4 {
    background-image: url(../../files/num04.png);
  }
  .b-ham__num5 {
    background-image: url(../../files/num05.png);
  }
  .b-ham__num6 {
    background-image: url(../../files/num06.png);
  }
  .b-ham__num7 {
    background-image: url(../../files/num07.png);
  }
  .b-ham__num8 {
    background-image: url(../../files/num08.png);
  }
}

.b-ham__flip {
  width: 100%;
  height: 78.667vw;
  perspective: 1000px;
}
.b-ham__flipInner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
body:not(.ie11) .b-ham__flip.is--opened .b-ham__flipInner {
  transform: rotateY(180deg);
}
.b-ham__front,
.b-ham__back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.8s ease-in-out;
}
body:not(.ie11) .b-ham__flip .b-ham__back {
  opacity: 0;
}
body:not(.ie11) .b-ham__flip.is--opened .b-ham__front {
  opacity: 0;
}
body:not(.ie11) .b-ham__flip.is--opened .b-ham__back {
  opacity: 1;
}
.b-ham__back {
  position: relative;
}
body:not(.ie11) .b-ham__back {
  transform: rotateY(180deg);
}
body.ie11 .b-ham__front {
  z-index: 1;
  transition: opacity 0.8s ease-in-out;
}
body.ie11 .b-ham__back {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out;
}
body.ie11 .b-ham__flip.is--opened .b-ham__front {
  opacity: 0;
  z-index: 0;
  visibility: hidden;
}
body.ie11 .b-ham__flip.is--opened .b-ham__back {
  opacity: 1;
  z-index: 1;
  visibility: visible;
}
.b-ham__box,
.b-ham__inner {
  height: 100%;
}
.b-ham__back p {
  font-family: 'HiraKakuStd-W7-AlphaNum';
  line-height: 1.4;
  font-weight: 600;
  font-size: 3.4vw;
  position: relative;
  z-index: 1;
}
.b-ham__close {
  width: 4.4vw;
  height: 4.4vw;
  background: url(../../files/close_sp.png) no-repeat 0 0 / 100% 100%;
  position: absolute;
  right: 5.867vw;
  bottom: 5.867vw;
  cursor: pointer;
  z-index: 1;
}
.b-ham__back .b-ham__inner {
  padding: 5.2vw 6vw;
}
.b-ham__item:nth-child(6) .b-product__name,
.b-ham__item:nth-child(4) .b-product__name {
  text-align: right;
}
.b-ham__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: cover;
}
.b-ham__bg1 {
  background-image: url(../files/bg_back01_sp.png);
}
.b-ham__bg2 {
  background-image: url(../files/bg_back02_sp.png);
}
.b-ham__bg3 {
  background-image: url(../files/bg_back03_sp.png);
}
.b-ham__bg4 {
  background-image: url(../files/bg_back04_sp.png);
}
.b-ham__bg5 {
  background-image: url(../files/bg_back05_sp.png);
}
.b-ham__bg6 {
  background-image: url(../files/bg_back06_sp.png);
}
.b-ham__bg7 {
  background-image: url(../files/bg_back07_sp.png);
}
.b-ham__bg8 {
  background-image: url(../files/bg_back08_sp.png);
}
@media screen and (min-width: 768px) {
  .b-ham__flip {
    height: 472px;
  }
  .b-ham__close {
    width: 26px;
    height: 26px;
    background-image: url(../../files/close.png);
    right: 36px;
    bottom: 36px;
  }
  .b-ham__back p {
    font-size: 22px;
    letter-spacing: 0.01em;
  }
  .b-ham__back .b-ham__inner {
    padding: 30px 35px;
  }
  .b-ham__bg1 {
    background-image: url(../files/bg_back01.png);
  }
  .b-ham__bg2 {
    background-image: url(../files/bg_back02.png);
  }
  .b-ham__bg3 {
    background-image: url(../files/bg_back03.png);
  }
  .b-ham__bg4 {
    background-image: url(../files/bg_back04.png);
  }
  .b-ham__bg5 {
    background-image: url(../files/bg_back05.png);
  }
  .b-ham__bg6 {
    background-image: url(../files/bg_back06.png);
  }
  .b-ham__bg7 {
    background-image: url(../files/bg_back07.png);
  }
  .b-ham__bg8 {
    background-image: url(../files/bg_back08.png);
  }
}

@media screen and (max-width: 767px) {
  .b-ham__back p {
    font-size: 14px;
    letter-spacing: 0.01em;
    line-height: 1.3;
  }
}

@media screen and (min-width: 768px) and (max-width: 960px) {
  .b-ham__back p {
    font-size: 1.9vw;
  }
}


@keyframes shake {
  0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  9%{-webkit-transform:rotate(-3.5deg);transform:rotate(-3.5deg)}
  18%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
  27%{-webkit-transform:rotate(-3.5deg);transform:rotate(-3.5deg)}
  36%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
.b-product__name {
  font-size: 0;
}
.b-product__name img {
  width: 100%;
}
.b-product {
  font-size: 0;
  position: absolute;
}
.b-product:not(.b-product__fixed) {
  animation: shake 4500ms steps(1) 2500ms infinite;
}
.b-product__item1 {
  left: -2.4vw;
  bottom: -15.2vw;
  width: 53.867vw;
  height: 63.2vw;
}
.b-product__item2 {
  left: -30vw;
  bottom: -39.733vw;
  width: 134.4vw;
  height: 138.133vw;
}
.b-product__item3 {
  left: -12.933vw;
  bottom: -23.133vw;
  width: 88.8vw;
  height: 64.8vw;
}
.b-product__item4 {
  left: 17.867vw;
  bottom: -0.8vw;
  width: 53.067vw;
  height: 56.267vw;
}
.b-product__item5 {
  left: 4.8vw;
  bottom: -27.333vw;
  width: 78.933vw;
  height: 75.733vw;
}
.b-product__item6 {
  left: 1.6vw;
  bottom: 0.8vw;
  width: 73.067vw;
  height: 53.6vw;
}
.b-product__item7 {
  right: -9.6vw;
  bottom: -4.4vw;
  width: 73.333vw;
  height: 81.333vw;
}
.b-ham__item7 .b-product__bg,
.b-ham__item4 .b-product__bg,
.b-ham__item2 .b-product__bg {
  font-size: 0;
}
.b-ham__item7 .b-product__bg img,
.b-ham__item4 .b-product__bg img,
.b-ham__item2 .b-product__bg img {
  width: 100%;
}
.b-ham__item7 .b-product__name,
.b-ham__item4 .b-product__name,
.b-ham__item2 .b-product__name {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.b-ham__item7 .b-product__bg {
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.b-ham__item7 .b-product__name {
  top: inherit;
  bottom: 0;
}
@media screen and (min-width: 768px) {
  .b-product__item1 {
    left: -12px;
    bottom: -91px;
    width: 322px;
    height: 379px;
  }
  .b-product__item2 {
    left: -177px;
    bottom: -235px;
    width: 800px;
    height: 784px;
  }
  .b-product__item3 {
    left: -75px;
    bottom: -140px;
    width: 533px;
    height: 388px;
  }
  .b-product__item4 {
    left: 110px;
    bottom: 18px;
    width: 318px;
    height: 338px;
  }
  .b-product__item5 {
    left: 32px;
    bottom: -163px;
    width: 473px;
    height: 454px;
  }
  .b-product__item6 {
    left: 10px;
    bottom: 5px;
    width: 435px;
    height: 328px;
  }
  .b-product__item7 {
    right: -56px;
    bottom: -28px;
    width: 440px;
    height: 490px;
  }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
  .b-ham__item {
    padding-right: 20px;
  }
  .b-ham__item:nth-child(even) {
    padding-right: 0;
    padding-left: 20px;
  }
  .b-product__item1 {
    left: -1.563vw;
    bottom: -11.849vw;
    width: 41.927vw;
    height: 49.349vw;
  }
  .b-product__item2 {
    left: -28.646vw;
    bottom: -30.599vw;
    width: 104.167vw;
    height: 102.083vw;
  }
  .b-product__item3 {
    left: -11.005vw;
    bottom: -10.693vw;
    width: 69.401vw;
    height: 50.521vw;
  }
  .b-product__item4 {
    left: 5.208vw;
    bottom: 2.557vw;
    width: 32.292vw;
    height: 34.896vw;
  }
  .b-product__item5 {
    left: -7.813vw;
    bottom: -21.224vw;
    width: 61.589vw;
    height: 59.115vw;
  }
  .b-product__item6 {
    left: -0.391vw;
    bottom: 0.651vw;
    width: 56.641vw;
    height: 42.708vw;
  }
  .b-product__item7 {
    right: -7.292vw;
    bottom: -3.646vw;
    width: 57.292vw;
    height: 63.802vw;
  }
}
.b-ham__flip .b-ham__box {
  cursor: pointer;
}

/* Breadscrumb */
.b-breadscrumb {
  color: #000;
  line-height: 1.2;
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 5;
  padding-top: 15px;
  text-align: right;
}
.b-breadscrumb a {
  display: inline-block;
  color: #717171;
  position: relative;
  padding-right: 20px;
  margin-right: 12px;
}
.b-breadscrumb a:hover {
  text-decoration: underline;
}
.b-breadscrumb a:first-child {
  padding-left: 24px;
}
.b-breadscrumb a:first-child::before {
  content: "";
  width: 16px;
  height: 15px;
  background: url(/cocobana/files/ico_home.png) no-repeat 0 0 / 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.b-breadscrumb a::after {
  content: "";
  width: 6px;
  height: 16px;
  background: url(/cocobana/files/arrow.png) no-repeat 0 0 / 100% 100%;
  position: absolute;
  right: 0;
  top: 0;
}
.b-breadscrumb span {
  display: inline-block;
  font-weight: bold;
}

/* update 230601 */
.b-product__snow2,
.b-product__snow1 {
  font-size: 0;
  position: absolute;
}
.b-product__snow2 img,
.b-product__snow1 img {
  width: 100%;
}
.b-product__snow1 {
  left: 34vw;
  bottom: -2.133vw;
  width: 25.6vw;
  height: 29.333vw;
}
.b-product__snow2 {
  left: 3.6vw;
  bottom: 26.4vw;
  width: 23.2vw;
  height: 24.267vw;
}
.b-ham__item1 .b-ham__back p {
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .b-product__snow1 {
    left: 212px;
    bottom: -13px;
    width: 152px;
    height: 175px;
  }
  .b-product__snow2 {
    left: 19px;
    bottom: 19px;
    width: 139px;
    height: 145px;
  }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
  .b-product__snow1 {
    left: 10vw;
    bottom: -13px;
    width: 19.792vw;
    height: 22.786vw;
  }
  .b-product__snow2 {
    left: 19px;
    bottom: 19px;
    width: 18.099vw;
    height: 18.88vw;
  }
}

.b-ham__head_desc {
  font-size: 3.467vw;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #fa1b19;
  margin-top: 9vw;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .b-ham__head_desc {
    font-size: 35px;
    margin-top: 100px;
  }
}
@media screen and (min-width: 800px) {
  .b-ham__head_desc {
    font-size: 37.5px;
    margin-top: 100px;
  }
}