@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: 84.533vw;
}
.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 {
    max-width: 998px;
  }
  .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.7;
  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);
}
@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: 18px;
    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);
  }
}

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

@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: 2vw;
  bottom: -1.8vw;
  width: 70.667vw;
  height: 48.8vw;
}
.b-product__item2 {
  left: -21.333vw;
  bottom: -3.5vw;
  width: 93.867vw;
  height: 45.867vw;
}
.b-product__item3 {
  left: 1.067vw;
  bottom: -5.2vw;
  width: 73.067vw;
  height: 57.867vw;
}
.b-product__bg {
  font-size: 0;
}
.b-product__bg img {
  width: 100%;
}
.b-product__name {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.b-product__bg_bottom {
  height: 100%;
  display: flex;
  align-items: flex-end;
}
@media screen and (min-width: 768px) {
  .b-product__item1 {
    left: 13px;
    bottom: -10px;
    width: 424px;
    height: 292px;
  }
  .b-product__item2 {
    left: -126px;
    bottom: -16px;
    width: 562px;
    height: 275px;
  }
  .b-product__item3 {
    left: 11px;
    bottom: -32px;
    width: 438px;
    height: 348px;
  }
}
@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.354vw;
    bottom: -1.042vw;
    width: 44.167vw;
    height: 30.417vw;
  }
  .b-product__item2 {
    left: -13.125vw;
    bottom: -1.667vw;
    width: 58.542vw;
    height: 28.646vw;
  }
  .b-product__item3 {
    left: 1.146vw;
    bottom: 3.333vw;
    width: 45.625vw;
    height: 36.25vw;
  }
}
.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;
  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: 33px;
    margin-top: 100px;
  }
}