@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Oxygen:wght@700&text=0123456789,&display=swap");
/* /////////////////////////////////////////////////////////////////////
//  Global
/////////////////////////////////////////////////////////////////////*/
h2, h3, h4, h5, h6, p, li, ol, dl, label, select, button, span, table, .no-shaggy {
  transform: rotate(0.03deg);
}

h1, h2, p {
  /* margin: 0; */
  padding: 0;
  line-height: 1;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #fff;
  font-size: 1.6rem;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  color: #42210B;
  line-height: 1.4;
}

img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease-out;
  word-wrap: break-word;
}

a:hover {
  color: inherit;
}

a.text-link {
  text-decoration: underline;
}

a.text-link:hover {
  text-decoration: none;
}

.drop-shadow {
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
}

.z-index-1 {
  z-index: 1;
}

.sub-small {
  top: -0.6em;
  font-size: 0.6em;
  font-weight: 400;
}

hr {
  border-top: 1px solid rgb(79 34 14/30%);
}

.lh-3 {
  line-height: 1;
}

/*-- background --*/
.bg-c-brown {
  background-color: #4F220E;
}
.bg-c-red {
  background-color: #E82E21;
}
.bg-c-yellow {
  background-color: #FFF033;
}
.bg-c-lb{
  background-color: #9adff5;
}

.bg-note {
  background-size: 25px 25px;
  background-image: linear-gradient(0deg, #C9905D, #C9905D 2px, #EDAC7C 2px, #EDAC7C);
}

.bg-argyle {
  background-size: 200px 200px;
  background-image: url(cocoa_img/riyuu-bg.png);
  background-blend-mode: color-burn;
  background-color: #754C24;
}

/*-- font --*/
.oxygen {
  font-family: "Oxygen", sans-serif;
  font-weight: 700;
}
.playpen-sans-bold {
  font-family: "Playpen Sans", cursive;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/*-- color --*/
.red {
  color: red !important;
}

.text-yellow {
  color: #FFF033;
}

.text-red {
  color: #E82E21;
}

.text-brown {
  color: #4F220E;
}

/*-- marker --*/
.marker {
  background: linear-gradient(transparent 50%, #FFF033 50%);
}

/*-- animation --*/
/* fuwafuwa */
@-webkit-keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
.anm-fwfw {
  -webkit-animation: 3s fuwafuwa infinite ease-in-out;
          animation: 3s fuwafuwa infinite ease-in-out;
}

/* slideText */
.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
}

.leftAnime {
  opacity: 0; /*事前に透過0にして消しておく*/
}

@-webkit-keyframes slideTextX100 {
  from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeLeftRight {
  -webkit-animation-name: slideTextX100;
          animation-name: slideTextX100;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes slideTextX-100 {
  from {
    transform: translateX(100%); /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%); /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateX(0); /*要素を元の位置に移動*/
    opacity: 1;
  }
}
.slideAnimeRightLeft {
  -webkit-animation-name: slideTextX-100;
          animation-name: slideTextX-100;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

/*-- title --*/
.section-title h1 {
  font-family: "Oxygen", "M PLUS Rounded 1c", sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.4;
}

.section-title h1:before,
.section-title h1:after {
  content: "";
  display: block;
  margin: auto;
  width: 200px;
  height: 30px;
}

.section-title h1:before {
  background: url(can_img_22_wi/title-blog-top.svg) center top no-repeat;
  margin-bottom: 10px;
}

.section-title h1:after {
  background: url(can_img_22_wi/title-blog-bottom.svg) center bottom no-repeat;
  margin-top: 10px;
}

.logo-can-brown {
  width: 160px;
}

.section-sub-title h2 {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.4;
}

/*-- 576px --*/
@media all and (max-width: 576px) {
  .section-title h1 {
    font-size: 32px;
  }
  .section-title h1:before,
.section-title h1:after {
    width: 160px;
    height: 20px;
  }
  .logo-can-brown {
    width: 120px;
  }
  .section-sub-title h2 {
    font-size: 24px;
  }
}
/* /////////////////////////////////////////////////////////////////////
//  mainvisual
/////////////////////////////////////////////////////////////////////*/
.obi-cal{
  font-weight: 700;
  text-align: center;
  font-size: 22px;
  padding:8px;
}

#mainvisual {
  padding: 10px 0 10px;
  background: url(cocoa_img/img-mv-pc_2401.jpg) repeat-x center top;
}

.logo-can-mv {
  top: 20px;
  right: 20px;
  width: 156px;
}

.mainvisual-container {
  padding: 0 40px;
  max-width: 1400px;
  width: 100%;
}

.logo-wrapper {
  margin-left: -15px;
  padding-bottom: 160px;
  position: relative;
  z-index: 1;
}

/*
.logo-ribbon {
  position: absolute;
  top: -12%;
  z-index: 2;
}
*/

.package-cocoa-mv {
  position: absolute;
  top:42%;
  left: 1%;
  z-index: 2;
  width:660px;
}

.logo-wrapper::after{
  content: "";
  position: absolute;
  z-index: -1;
  width: 550px;
  height:43%;
  top: 65%;
  left: 7%;
  background-color: #fff;
  opacity: 0.7;
}

.catch-mv {
  position: absolute;
  top: -2px;
  right: 8%;
}

.info-fv {
  line-height: 2em;
  font-size:18px;
  font-weight: 500;
  letter-spacing: -0.05em;
  padding-right: 40px;
}
/*-- 1400px --*/
@media all and (max-width: 1400px) {


  .catch-mv {
    width:42vw;
    top: 2%;
    right: 10%;
  }

}

@media all and (max-width: 1350px) {
  .catch-mv {
    right: 9%;
  }
}

@media all and (max-width: 1280px) {
  .catch-mv {
    right: 7%;
  }
}

/*-- 1200px --*/
@media all and (max-width: 1200px) {
  #mainvisual {
    background-size: cover;
  }
  .logo-can-mv {
    right: 20px;
    width: 140px;
  }
  .logo-wrapper .logo-cocoa {
    width: 500px;
  }
  .logo-ribbon {
    top: -15%;
  }
  .package-cocoa-mv{
    top:38%;
  }
  .package-cocoa-mv img {
    width: 85%;
  }
  .catch-mv{
    right: 7%;
    width: 46%;
    top: -1%;
  }
  .logo-wrapper::after{
    width:480px;
    height: 40%;
  }

  .info-fv{
    padding-right:50px;
  }
}

@media all and (max-width: 1100px) {
  .catch-mv {
    right: 5.5%;
    width: 45%;
    top: 1%;
  }
}

/*-- 992px --*/
@media all and (max-width: 992px) {
  #mainvisual {
    padding: 10px 0 10px;
  }
  .logo-can-mv {
    top: 10px;
    right: 10px;
  }
  .logo-wrapper .logo-cocoa {
    width: 470px;
  }
  .logo-ribbon {
    width: 330px;
    top: -10%;
    left: 2%;
  }
  .catch-mv {
    width: 42%;
    top: 2%;
    right: 5%;
  }

  .package-cocoa-mv{
    top:39%;
  }
  .package-cocoa-mv img {
    width: 77%;
  }
  .logo-wrapper::after{
    width:440px;
    height: 36%;
  }

  .info-fv{
    line-height: 1.5em;
    padding-right: 0;
  }
}
/*-- 900px --*/
@media all and (max-width: 900px) {
  #mainvisual{
    background-position: 55% top;
    background-size: cover;
  }
  .catch-mv {
    width:44%;
    right: 8%;
  }

  .logo-wrapper{
    padding-top: 10px;
  }
  .logo-wrapper .logo-cocoa {
    width: 400px;
  }
  .package-cocoa-mv{
    top:40%;
  }
  .package-cocoa-mv img {
    width: 67%;
  }
  .logo-wrapper::after{
    top:60%;
    width:380px;
    height: 37%;
  }

  .info-fv{
    margin-top:-30px;
    line-height: 1.5em;
  }
}
/*-- 850px --*/
@media all and (max-width: 850px) {
  .catch-mv {
    right: 4%;
  }
  .catch-mv img {
    transform: rotate(5deg);
  }
}
/*-- 768px --*/
@media all and (max-width: 767px) {
  #mainvisual {
    padding: 10px 0 10px;
    background: linear-gradient(to bottom, rgba(34,14,11,0.5), rgba(34,14,11,0) 50%, rgba(34,14,11,0)),url(cocoa_img/img-mv-sp_2401.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
  }
  .mainvisual-container {
    padding: 0;
  }
  .logo-wrapper {
    margin:0 5px;
    padding-bottom: 0;
  }
  .logo-wrapper .logo-cocoa {
    width: 75%;
  }
  .logo-ribbon {
    width: 350px;
    top: -40px;
    left: 0%;
  }
  .catch-mv {
    position: relative;
    margin: 250px auto 20px;
    width: 80%;
  }
  .catch-mv img {
    transform: rotate(-1deg);
  }
  .package-cocoa-mv {
    width: 43%;
    top:13%;
    left:auto;
    right:-13%;

  }
  .package-cocoa-mv img {
    margin-right: 10px;

  }

  .cal-hyouji{
    position:absolute;
    top:98%;
    width:90%;
    left:3%;
  }

  .cal-icon{
    position:absolute;
    top:65%;
    left:55%;
    width:17%;
  }
  .logo-wrapper::after{
    display: none;
  }
  .info-fv{
    font-size:2.5vw;
    padding-right: 20px;
  }
}
/*-- 650px --*/
@media all and (max-width: 650px) {
  .catch-mv {
    margin: 200px auto 20px;
  }
}
/*-- 576px --*/
@media all and (max-width: 576px) {
  .obi-cal{
    font-size: 4.2vw;
    line-height: 4.7vw;
  }

  #mainvisual {
    padding: 1px 0 5px;
  }
  .logo-wrapper {
    margin-top: 0;
  }
  /* .logo-wrapper .logo-cocoa {
    width: 360px;
  } */

  .catch-mv {
    margin: 150px auto 20px;
    width: 85%;
  }

  .logo-can-mv {
    width: 110px;;
    right: 5px;
    top: 10px;
  }
  /* .package-cocoa-mv {
    top:10%;
  }
  .cal-icon{
    top:60%;
    width: 15vw;
  } */

  .info-fv{
    font-size: 2.7vw;
    padding-right: 10px;
  }
}
/*-- 450px --*/
@media all and (max-width: 450px) {

  .logo-wrapper .logo-cocoa {
    width: 320px;
  }
  .catch-mv {
    width: 90%;
    margin: 100px auto 20px;
  }
  /* .package-cocoa-mv {
    width: 48%;
    top: 150px;
    left: 53%;
  } */
}
/*-- 400px --*/
@media all and (max-width: 400px) {
  .catch-mv {
    width: 80%;
    margin: 80px auto 20px;
  }

  /* .package-cocoa-mv {
    width: 49%;
    top: 157px;
    left: 52%;
  } */
}
/*-- 360px --*/
@media all and (max-width: 360px) {
  .logo-can-mv {
    width: 112px;
  }
}
/* /////////////////////////////////////////////////////////////////////
//  product
/////////////////////////////////////////////////////////////////////*/
#product-01, #product-02 {
  padding: 60px 0 40px;
}

/* == product-frame ================ */
.product-frame {
  /* margin-bottom: 30px; */
  padding: 20px 40px;
  background-color: #FFF4F3;
  border-radius: 10px;
}

.product-box {
  padding: 10px 0;
}

.product-ribbon {
  height: 65px;
  width: 220px;
  font-size: 2.8rem;
  font-weight: 700;
  background-image: url(cocoa_img/product-ribbon.png);
  background-repeat: no-repeat;
  transform: rotate(5deg);
  display: inline-block;
  position: absolute;
  bottom: 5%;
  left: 35%;
}

.product-ribbon-fl {
  font-size: 3.7rem;
}

.product-ribbon-fs {
  font-size: 2.3rem;
}

/* gentei,kikan */
.gentei, .kikan {
  width: 140px;
  height: 140px;
  top: -15px;
  left: -50px;
  background-position: center;
  background-repeat: no-repeat;
  line-height: 1;
  font-weight: 700;
  z-index: 1;
}

.gentei {
  font-size: 4rem;
  padding: 3rem;
  background-image: url(cocoa_img/icon-gentei-2411.svg);
}

.kikan {
  font-size: 3.5rem;
  padding: 2.5rem;
  background-image: url(cocoa_img/icon-kikan.svg);
}

.gentei span, .kikan span {
  font-size: 20px;
  font-weight: 700;
}


/* == product-img ================ */
.product-img {
  margin-top: 15px;
}
.product-img .info-image {
  position: absolute;
  bottom: 0px;
  right: 50px;
}
#product-01 .product-img .info-image {
  bottom: -15px;
}
.product-img-special i {
  font-size: 64px;
}

.special-icon,
.price-icon {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  font-size: 33px;
  font-weight: 500;
  line-height: 1.1;
  position: absolute;
  bottom: 0;
  right: -70px;
}

.price-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 33px;
  font-weight: 500;
  line-height: 1.1;
  position: absolute;
  bottom: 0;
  right: -70px;
}



.special-icon {
  background-color: #E82E21;
}

.price-icon {
  background-color: #42210B;
}
#oobukuro-s .price-icon {
  right: -65px;
}
.special-icon small,
.price-icon small {
  font-size: 24px;
}
.special-pill,.gentei-pill {
  display: inline-block;
  font-size: 2rem;
  font-weight: 500;
  line-height: 4rem;
}
.special-pill {
  border-radius: 4rem;
}
.gentei-pill {
  font-weight: 700;
  border: 2px solid #E82E21;
}
.special-pill .fs-l,.gentei-pill .fs-l {
  font-size: 3rem;
}
.product-img .cocoa-sizzle {
  width: 400px;
  margin: 40% 0% 0% 15%;
}

.product-img .cocoa-kohousou {
  position: absolute;
  top: 0%;
  left: 5%;
}
.cocoa-oobukuro-02 {
  position: absolute;
  right: 0%;
}
.fukidashi-01 {
  font-size: 2.8rem;
  font-weight: 500;
  padding-bottom: 20px;
  position: relative;
}
.fukidashi-01 span {
  font-size: 3.5rem;
}
.fukidashi-01:after {
  content: url(cocoa_img/fukidashi.png);
  height: 20px;
  width: auto;
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
}

/* == product-desc ================ */
.product-desc h3.name {
  font-size: 55px;
  line-height: 1.1;
  font-weight: 700;
}

.product-desc h3.name small {
  font-weight: 700;
}

.product-desc .lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.product-desc .equivalent {
  font-size: 24px;
  margin-bottom: -10px;
}

.item-function{
  border:2px solid #4F220E;
  font-size: 24px;
  font-weight: 600;
}

.sale55-icon {
  width: fit-content;
  background-color: white;
  border: 1px solid #4F220E;
  padding: 5px 5px 0;
}

.price-free {
  padding: 0.3em 0.6em;
  font-size: 30px;
  font-weight: 500;
}

.price .price-title {
  font-size: 36px;
  font-weight: 500;
}

.price b {
  position: relative;
  bottom: -5px;
  font-family: "Oxygen", sans-serif;
  padding: 0 0.05em 0 0.1em;
  font-size: 72px;
}

.price .unit {
  font-size: 42px;
  font-weight: 500;
}

.bags b {
  font-size: 50px;
}

.bags .unit {
  font-size: 36px;
  font-weight: 500;
}

.bags-small {
  font-size: 75%;
  font-weight: 700;
}

.set-contents {
  padding: 10px;
}

.set-contents p {
  font-size: 18px;
  line-height: 1.6;
}

.comments ul {
  font-size: 13px;
  line-height: 1.2;
}

/*-- button --*/
.button-buy {
  background-color: #EA4762;
  border-radius: 56px;
  font-size: 24px;
  color: #fff;
  line-height: 56px;
  transition: all 0.4s ease-out;
}

.button-buy:hover {
  background-color: #ED0A3B;
  color: #fff;
  text-decoration: none;
}

/*-- ill --*/
.ill-cacao {
  top: 40px;
  right: -150px;
}
.ill-cafeset {
  bottom: 50px;
  left: -170px;
}
.ill-chocolate {
  top: 185px;
  right: -150px;
}
.ill-cacaocut-02 {
  bottom: 110px;
  left: -170px;
}

/*-- 1400px --*/
@media all and (max-width: 1400px) {
  .gentei, .kikan {
    left: -40px;
  }
}
/*-- 1200px --*/
@media all and (max-width: 1200px) {
  .product-img {
    margin: 20px 0 0;
  }
  .product-img .info-image {
    right: 20px;
  }
  .product-img .cocoa-sizzle {
    width: 350px;
    margin: 65% 0% 0% 10%;
  }
  #product-01 .product-img .info-image {
    right: 50px;
  }
  .package-small {
    height: 148px;
  }
  .special-icon, .price-icon {
    bottom: 70%;
    right: 0%;
  }
  #oobukuro-s .price-icon {
    bottom: 0%;
    right: -5%;
  }
  #oobukuro-w .price-icon {
    bottom: 0%;
    right: -15%;
  }
  .product-img .cocoa-kohousou {
    top: 0;
  }
  .product-desc h3.name {
    font-size: 48px;
  }
}
/*-- 992px --*/
@media all and (max-width: 991px) {
  .product-img .info-image {
    right: 30px;
  }
  #product-01 .product-img .info-image {
    right: 90px;
    bottom: 35px;
  }
  .special-icon, .price-icon {
    bottom: 75%;
  }
  #oobukuro-s .price-icon {
    bottom: 5%;
    right: 13%;
  }
  #oobukuro-w .price-icon {
    bottom: 5%;
    right: -25%;
  }
  .product-img .cocoa-sizzle {
    margin: 0% 0% 0% 40%;
  }
  .product-img .cocoa-kohousou {
    top: 0;
  }
  .product-desc h3.name {
    font-size: 52px;
  }
}
/*-- 768px --*/
@media all and (max-width: 767px) {
  #product-01 .product-img .info-image {
    right: 5px;
    bottom: 10px;
  }
  .special-icon, .price-icon {
    bottom: 70%;
  }
  #oobukuro-s .price-icon {
    bottom: 5%;
    right: 0%;
  }
  #oobukuro-w .price-icon {
    bottom: 5%;
    right: -10%;
  }
  .product-img .cocoa-sizzle {
    width: 310px;
    margin: 10% 0% 5% 30%;
  }
  .product-img .cocoa-kohousou {
    top: 0;
    left: -5%;
  }
  .product-desc h3.name small {
    font-size: 75%;
  }
}
/*-- 576px --*/
@media all and (max-width: 576px) {
  #product-01, #product-02 {
    padding: 30px 0 20px;
  }
  .product-frame {
    padding: 20px 10px;
    background-size: 240px, 240px;
  }
  .product-box {
    padding: 0;
  }
  .product-img .info-image {
    right: 10px;
  }
  #product-01 .product-img .info-image {
    bottom: 10px;
    right: 15px;
  }

  .product-img-special i {
    font-size: 40px;
  }
  .product-desc h3.name small {
    font-size: 80%;
  }
  .package-small {
    height: 32vw;
  }
  .special-icon{
    width: 85px;
    height: 85px;
    font-size: 25px;
  }
  .price-icon {
    width: 75px;
    height: 75px;
    font-size: 25px;
  }
  .special-icon small,
.price-icon small {
    font-size: 20px;
  }
  #oobukuro-w .price-icon {
    right: -5%;
  }
  .product-desc h3.name {
    font-size: 38px;
  }
  .product-desc .lead {
    font-size: 16px;
  }
  .product-desc .equivalent {
    font-size: 18px;
  }
  .price-free {
    font-size: 24px;
  }
  .price .price-title {
    font-size: 24px;
  }
  .price b {
    font-size: 56px;
  }
  .price .unit {
    font-size: 32px;
  }
  .bags b {
    font-size: 40px;
  }
  .bags .unit {
    font-size: 32px;
  }
  .set-contents p {
    font-size: 16px;
  }
  .comments ul {
    font-size: 12px;
  }
  .button-buy {
    font-size: 22px;
  }
  .gentei, .kikan {
    width: 100px;
    height: 100px;
    top: -15px;
    left: -15px;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 1;
    font-weight: 700;
  }
  .gentei {
    font-size: 3rem;
    padding: 2rem;
  }
  .kikan {
    font-size: 2.5rem;
    padding: 1.5rem;
  }
  .kikan span {
    font-size: 1.5rem;
  }
  .product-ribbon {
    height: 53px;
    width: 180px;
    font-size: 2rem;
    background-size: contain;
    bottom: 0%;
    left: 28%;
  }
  .product-ribbon-fs {
    font-size: 2rem;
  }
  .product-ribbon-fl {
    font-size: 3rem;
  }
  .sale55-icon {
    width: 60%;
  }
  .product-img .cocoa-kohousou {
    top: 0;
    width: 50%;
    left: 0;
  }
  .product-img .cocoa-sizzle {
    width: 70%;
    margin: 10% 0% 0% 25%;
  }
  .cocoa-oobukuro-01, .cocoa-oobukuro-02 {
    width: 65%;
  }
  .item-function{
    border:2px solid #4F220E;
    font-size: 4.2vw;
    font-weight: 600;
  }
}
/*-- 450px --*/
@media all and (max-width: 450px) {
  #product-01 .product-img .info-image {
    /* bottom: -15px; */
    bottom: 0px;
    right: 0px;
  }
  .gentei {
    font-size: 2.8rem;
    padding: 2.2rem;
  }

}
/*-- 320px --*/
@media all and (max-width: 320px) {
  .special-icon {
    width: 88px;
    height: 88px;
  }

  .price-icon {
    width: 70px;
    height: 70px;
  }

  .special-icon small,
.price-icon small {
    font-size: 18px;
  }
}
/* /////////////////////////////////////////////////////////////////////
//  calcium
/////////////////////////////////////////////////////////////////////*/
#calcium{
  padding: 30px 0 ;
}

.cal-msg{
  position: relative;
  margin-top: -50px;
}


.ill-teeth{
  position:absolute;
  top:2%;
  left:5%;
}
.ill-cacaocut{
  width: 200px;
  position:absolute;
  left:80%;
  top: 55%;
}


@media all and (max-width: 1200px) {
  .cal-msg2{
    width:70%;
    padding-left: 10px;
  }
  .ill-teeth{
    width: 10%;
    top:5%;
  }
  .ill-cacaocut{
    width: 15vw;
  }

}

@media all and (max-width: 992px) {
  .cal-msg{
    position: relative;
    margin-top: -30px;
  }

}

@media all and (max-width: 767px) {
  #calcium{
    padding: 4vw 0 2vw;
  }

  .cal-msg{
    position: relative;
    margin-top: 0;
  }

  .cal-msg2{
    width:95%;
    padding-left: 0;
  }

  .ill-teeth{
    transform: rotate(-5deg);
    width:12%;
    left:0;
    top:58%;

  }
  .ill-cacaocut{
    top: 61%;
    left:85%;
  }

}

@media all and (max-width: 576px) {
  #calcium{
    padding: 4vw 0 3vw;
  }

  .ill-cacaocut{
    top: 74%;
    left:82%;
    }

    .ill-teeth{
      transform: rotate(-7deg);
      left:2%;

    }
}

@media all and (max-width: 450px) {
  #calcium{
    padding: 4vw 0 1vw;
  }
  .ill-cacaocut{
    top: 70%;
    left:83%;
    }
}

@media all and (max-width: 375px) {
  .ill-cacaocut{
    top: 68%;
    left:83%;
    }
}

/* /////////////////////////////////////////////////////////////////////
//  aisarete
/////////////////////////////////////////////////////////////////////*/
#aisarete {
  padding: 30px 0;
}
/* /////////////////////////////////////////////////////////////////////
//  riyuu
/////////////////////////////////////////////////////////////////////*/
#riyuu {
  padding: 40px 0;
}

.riyuu-ttl {
  position: relative;
}

.ill-cwc, .ill-cookie {
  position: absolute;
  top: 10%;
}

.ill-cwc {
  left: 0;
}

.ill-cookie {
  right: 0;
}

.riyuu-txt p {
  font-size: 2.2rem;
  line-height: 1.2;
}

.border-top-pink {
  border-top: 2px solid #F48B76;
}

@media all and (max-width: 1200px) {
  .riyuu-txt p {
    font-size: 1.8rem;
  }
  .ill-cwc {
    left: -5%;
  }
  .ill-cookie {
    right: -5%;
  }
}
@media all and (max-width: 992px) {
  .riyuu-txt p {
    font-size: 1.6rem;
  }
  .ill-cwc, .ill-cookie {
    width: 120px;
    top: -5%;
  }
  .ill-cwc {
    left: -10%;
  }
  .ill-cookie {
    right: -10%;
  }
}
/*-- 768px --*/
@media all and (max-width: 768px) {
  .ill-cwc, .ill-cookie {
    width: 95px;
    top: -19%;
  }
  .ill-cwc {
    left: -2%;
  }
  .ill-cookie {
    right: -2%;
  }
}
/*-- 576px --*/
@media all and (max-width: 576px) {
  .ill-cwc, .ill-cookie {
    width: 85px;
    top: -15%;
  }
}
/*-- 450px --*/
@media all and (max-width: 450px) {
  .ill-cwc, .ill-cookie {
    width: 70px;
    top: -25%;
  }
}
/* /////////////////////////////////////////////////////////////////////
//  seibun
/////////////////////////////////////////////////////////////////////*/
#seibun {
  padding: 40px 0 0;
}

.bg-seibun {
  background-size: 100px 100px;
  background-image: url(cocoa_img/seibun-bg-01.png), url(cocoa_img/seibun-bg-02.png);
  background-blend-mode: multiply;
}

.seibun-ttl {
  position: relative;
}

.ill-spoon{
  position: absolute;
  top: 0;
}

.ill-spoon {
  left: 0;
}

/* .ill-cacaocut {
  right: 0;
} */

.seibun-txt {
  font-size: 2.2rem;
  line-height: 1.2;
}

.border-top-pink {
  border-top: 2px solid #F48B76;
}

.seibun-img-bg {
  background-image: url(cocoa_img/seibun-photo-01-pc.png), url(cocoa_img/seibun-photo-02-pc.png), url(cocoa_img/ill-cacaobeans.png);
  background-position: left top, right 10%, right 95%;
  background-repeat: no-repeat;
}

.seibun-img {
  padding: 33px 0;
}

.seibun-01, .seibun-02, .seibun-03 {
  width: 278px;
}

.seibun-01 {
  margin: 0 auto -3%;
}

/* .ill-seibun-choco{
  position:absolute;
  top:20%;
  left:0;
  width:25%;
} */
@media all and (max-width: 1200px) {
  .seibun-txt {
    font-size: 1.8rem;
  }
  .ill-spoon {
    left: -5%;
  }
  /* .ill-cacaocut {
    right: -5%;
  } */
  .seibun-img-bg {
    background-size: 45%, 45%, 30%;
    background-position: left 10%, right 10%, right 95%;
  }
}
@media all and (max-width: 992px) {
  .seibun-txt {
    font-size: 1.6rem;
  }
  .ill-spoon {
    width: 145px;
    top: -10%;
}
  .ill-spoon {
    left: 0;
  }
  /* .ill-cacaocut {
    right: -5%;
  } */
  .seibun-01, .seibun-02, .seibun-03 {
    width: 220px;
  }
  .seibun-img {
    padding: 10px 0;
  }
  .seibun-img-bg {
    background-image: url(cocoa_img/seibun-photo-01-sp.png),url(cocoa_img/seibun-photo-02-sp.png),url(cocoa_img/ill-cacaobeans.png);
    background-size: 43%, 48%, 30%;
    background-position: left 20%, right 10%, right 100%;
  }
}
@media all and (max-width: 767px) {
  .ill-spoon {
    width: 120px;
    top: -15%;
  }
  .ill-spoon {
    left: -5%;
  }
  /* .ill-cacaocut {
    right: -10%;
  } */
  .seibun-01 {
    margin: 0 auto -5%;
  }
  .seibun-cocoaimg{
    position: absolute;
    width:40%;
    right: -10%;
    top:-3%;
  }

  }
}
@media all and (max-width: 576px) {
  .seibun-01, .seibun-02, .seibun-03 {
    width: 160px;
  }
  .ill-spoon {
    width: 100px;
    top: -15%;
  }
  .ill-spoon {
    left: -3%;
  }
  /* .ill-cacaocut {
    right: -8%;
  } */
}
@media all and (max-width: 450px) {
  .ill-spoon {
    width: 80px;
    top: -15%;
  }
  .ill-spoon {
    left: -3%;
  }
  /* .ill-cacaocut {
    right: -8%;
  } */
}
/* /////////////////////////////////////////////////////////////////////
//  review
/////////////////////////////////////////////////////////////////////*/
#review {
  padding: 40px 0;
}

.review-ttl {
  position: relative;
}

.review-wrapper {
  padding: 1rem;
  border-radius: 10px;
  background: white;
}

.review-item {
  height: 250px;
  background-image: linear-gradient(to right, #EAD4BB 10px, transparent 10px), linear-gradient(to bottom, #EAD4BB 10px, transparent 10px), linear-gradient(to left, #EAD4BB 10px, transparent 10px), linear-gradient(to top, #EAD4BB 10px, transparent 10px);
  background-size: 20px 4px, 4px 20px, 20px 4px, 4px 20px;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-position: left top, right top, right bottom, left bottom;
  border-radius: 5px;
  text-align: center;
  padding: 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  align-items: flex-start;
}
.review-item img {
  height: 61px;
}
.review-txt {
  line-height: 1.8rem;
}

@media all and (max-width: 1200px) {
  .review-item {
    height: 280px;
  }
}
@media all and (max-width: 992px) {
  .review-item {
    height: 260px;
  }
}
@media all and (max-width: 767px) {
  .review-item {
    height: 210px;
  }
}
@media all and (max-width: 576px) {
  .review-item {
    height: auto;
  }
}
/* /////////////////////////////////////////////////////////////////////
//  recipe
/////////////////////////////////////////////////////////////////////*/
#recipe {
  padding: 40px 0;
}

.step-list {
  padding: 20px 30px 20px 40px;
  border: 2px solid #e5d1ab;
  border-radius: 10px;
}

.step-list:before,
.step-list:after {
  content: "";
  display: block;
  position: absolute;
}

.step-list:before {
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  background-color: #faf7ee;
  border: 2px solid #e5d1ab;
  border-radius: 50%;
}

.step-list:after {
  top: -20px;
  left: -20px;
  width: 44px;
  height: 44px;
  background: url(can_img_22_wi/ring.svg) no-repeat;
}

.ring {
  top: -24px;
  left: -16px;
}

.step-desc {
  margin-left: 20px;
}

.step-desc p,
.recipe-desc p {
  font-size: 22px;
  line-height: 1.4;
}

.step-desc .step,
.ice-and-hot {
  font-size: 40px;
}

.step-desc .step {
  min-width: 200px;
}

.hot-title,
.ice-title {
  position: absolute;
}

.hot-title {
  right: -120px;
}

.ice-title {
  bottom: 0;
  left: -120px;
}
.ice-img img{
  max-width: 130%;
  margin-left: -20%;
}
.rc-2 {
  margin-top: 120px;
}

/*-- line --*/
.line-beige {
  background: url(can_img_22_wi/line-beige.png) left no-repeat;
}

.line-pink {
  padding: 0.7em 1.2em;
  background: url(can_img_22_wi/line-pink.png) bottom left no-repeat;
}

.line-light-blue {
  padding: 0 1.5em 0.5em;
  background: url(can_img_22_wi/line-light-blue.png) bottom left no-repeat;
}

/*-- ill --*/
.ill-drawing-2 {
  right: -186px;
  bottom: 0;
}

.ill-4 {
  left: 0;
}

.ill-5 {
  right: 0;
}



/*-- 1200px --*/
@media all and (max-width: 1200px) {
  .step-img {
    width: 200px;
  }
  .step-desc {
    width: 60%;
  }
  .hot-title {
    right: -115px;
  }
}
/*-- 992px --*/
@media all and (max-width: 992px) {
  .recipe-content {
    margin-top: 20px;
  }
  .rc-2 {
    margin-top: 60px;
  }
  .ill-sp-3,
.ill-sp-4 {
    width: 120px;
  }
  .ill-sp-4 {
    right: 0;
    bottom: 0;
  }
  .hot-title {
    right: -70px;
  }
  .ice-title {
    bottom: -30px;
    left: -60px;
  }
}
/*-- 768px --*/
@media all and (max-width: 768px) {
  .step-desc .step,
.ice-and-hot {
    font-size: 40px;
  }
  .hot-title {
    right: -100px;
  }
  .ice-title {
    bottom: 0;
    left: -80px;
  }
  .line-beige,
.line-pink,
.line-light-blue {
    background-size: 120px;
  }
}
/*-- 576px --*/
@media all and (max-width: 576px) {
  #recipe {
    padding: 20px 0 40px;
  }
  .step-list {
    padding: 20px;
  }
  .step-list:before {
    top: 5px;
    left: 5px;
    width: 15px;
    height: 15px;
  }
  .step-list:after {
    top: -15px;
    left: -15px;
    width: 33px;
    height: 33px;
  }
  .step-img {
    width: 50%;
  }
  .step-desc {
    margin-left: 10px;
    width: 50%;
  }
  .step-desc p,
.recipe-desc p {
    font-size: 18px;
  }
  .rc-2 {
    margin-top: 0;
  }
  .recipe-img {
    width: 200px;
  }
  .ice-img img{
    max-width: 100%;
    margin-left: auto;
  }
  .ill-sp-3,
.ill-sp-4 {
    width: 22vw;
  }
  .hot-title {
    right: -112px;
  }
}
/* /////////////////////////////////////////////////////////////////////
//  seihin-wrapper
/////////////////////////////////////////////////////////////////////*/
#seihin {
  padding: 40px 0;
}
.seihin-wrapper {
  border-radius: 15px;

}
.seihin-wrapper li {
  line-height: 1.2;
}

dl.data-sheet {
  border: 1px solid #dee2e6;
  border-bottom: none;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 10px;
}

dl.data-sheet dt:nth-of-type(even), dl.data-sheet dd:nth-of-type(even) {
  background-color: #f7f5f2;
}

dl.data-sheet dt, dl.data-sheet dd {
  margin-bottom: 0;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  border-right: 1px solid #dee2e6;
}

dl.data-sheet dt {
  width: 30%;
}

dl.data-sheet dd {
  width: 70%;
  border-right: none;
  word-break: break-all;
}

dl.data-sheet dt.seihin-br-lb{
  border-radius: 0 0 0 10px;
}

dl.data-sheet dd.seihin-br-rb{
  border-radius: 0 0 10px 0;
}

/*-- 576px --*/
@media all and (max-width: 576px) {
  .seihin-wrapper img {
    width: 200px;
  }
}

/*-- 576px --*/

@media all and (max-width: 576px) {
  #moreinfo .bg-white {
    padding: 20px 10px;
  }
  .moreinfo-title h3 {
    font-size: 18px;
  }
  dl.data-sheet dt,
  dl.data-sheet dd {
    width: 100%;
    border-right: none;
  }
  dl.data-sheet dt {
    padding-bottom: 0;
    border-top: none;
    border-bottom: none;
  }
}


/* == product-img ================ */
.ms-n20 {
  margin-left: -20px;
}

.capacity-icon {
  right: -96px;
  bottom: 0;
  width: 96px;
  height: 96px;
  border: 2px solid #6c3524;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1.2;
}

/*-- product-img-speech-bubble --*/
.product-img-speech-bubble h4 {
  font-size: 30px;
}

.product-img-speech-bubble h4 span {
  font-size: 40px;
}

.speech-bubble-left {
  width: 48px;
}

.speech-bubble-right {
  width: 42px;
}

/*-- point --*/
.point {
  font-size: 18px;
  line-height: 1.2;
}

.point-1 {
  top: 40px;
  left: -120px;
  background-image: url(can_img_22_wi/point-1.svg);
  background-position: center;
  background-repeat: no-repeat;
  padding: 1.5em 1em;
}

.point-2 {
  top: 0;
  right: -120px;
  background-image: url(can_img_22_wi/point-2.svg);
  background-position: center;
  background-repeat: no-repeat;
  padding: 2.5em 1em;
}

/*-- ill --*/
.ill-drawing-3 {
  top: 1000px;
  left: -160px;
}

.ill-drawing-4 {
  right: -320px;
  bottom: 0;
}

.ill-6 {
  left: 0;
}

.ill-7 {
  right: 0;
}

.ill-8 {
  top: 600px;
  left: -104px;
}

.ill-9 {
  top: 1200px;
  right: -150px;
}

.ill-10 {
  left: -150px;
  bottom: 600px;
}

/*-- 1200px --*/
@media all and (max-width: 1200px) {
  .affordable-img {
    width: 280px;
  }
  .affordable-package {
    height: 184px;
  }
  .affordable-big-package {
    height: 240px;
  }
  .point {
    font-size: 16px;
  }
  .ill-sp-5,
.ill-sp-6 {
    width: 120px;
  }
  .ill-sp-6 {
    right: 0;
  }
}
/*-- 576px --*/
@media all and (max-width: 576px) {
  #affordable {
    padding: 20px 0 40px;
  }
  .affordable-img {
    width: 64vw;
  }
  .affordable-package {
    height: 40vw;
  }
  .affordable-big-package {
    height: 56vw;
  }
  .capacity-icon {
    right: -80px;
    width: 80px;
    height: 80px;
    font-size: 22px;
  }
  .product-img-speech-bubble h4 {
    font-size: 6vw;
  }
  .product-img-speech-bubble h4 span {
    font-size: 8vw;
  }
  .speech-bubble-left {
    width: 10vw;
  }
  .speech-bubble-right {
    width: 9vw;
  }
  .point {
    font-size: 3.6vw;
  }
  .point-1 {
    left: -22vw;
  }
  .point-2 {
    right: -22vw;
  }
  .ill-drawing-4 {
    right: 10px;
    width: 24vw;
  }
  .ill-sp-5,
.ill-sp-6 {
    width: 22vw;
  }
}
/*-- 320px --*/
@media all and (max-width: 320px) {
  .capacity-icon {
    right: -72px;
    width: 72px;
    height: 72px;
    font-size: 18px;
  }
}
/* /////////////////////////////////////////////////////////////////////
//  Page top
/////////////////////////////////////////////////////////////////////*/
#pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  opacity: 0;
  transform: translateY(100px);
  z-index: 2;
}

#pagetop a {
  width: 48px;
  height: 48px;
  background-color: #323232;
  border-radius: 50%;
  font-size: 18px;
  color: #fff;
  transition: all 0.3s;
  opacity: 0.3;
}

#pagetop.UpMove {
  -webkit-animation: UpAnime 0.5s forwards;
          animation: UpAnime 0.5s forwards;
}

@-webkit-keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#pagetop.DownMove {
  -webkit-animation: DownAnime 0.5s forwards;
          animation: DownAnime 0.5s forwards;
}

@-webkit-keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}
/*-- 992px --*/
@media all and (max-width: 992px) {
  #pagetop {
    right: 10px;
    bottom: 10px;
  }
}

/*-- point --*/

.point {
  font-size: 18px;
  line-height: 1.2;
}
.point-1 {
  top: 55px;
  left: -62px;
  background-image: url(cocoa_img/point-1.svg);
  background-position: center;
  background-repeat: no-repeat;
  padding: 1.5em 1em;
}
.point-2 {
  top: 55px;
  right: -85px;
  background-image: url(cocoa_img/point-2.svg);
  background-position: center;
  background-repeat: no-repeat;
  padding: 2.5em 1em;
}

/*-- 1200px --*/
@media all and (max-width: 1200px) {
  .point-1 {
    left: -18px;
  }
  .point-2 {
    right: -32px;
  }
}

/*-- 991px --*/
@media all and (max-width: 991px) {
  .point-1 {
    left: 80px;
  }
  .point-2 {
    right: 60px;
  }
}

/*-- 768px --*/
@media all and (max-width: 768px) {
  .point-1 {
    left: -18px;
  }
  .point-2 {
    right: -32px;
  }
}

/*-- 576px --*/
@media all and (max-width: 576px) {
  .point {
    font-size: 3.6vw;
  }
}

/*-- 320px --*/

@media all and (max-width: 320px) {

}