@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Oxygen:wght@400;700&display=swap");
/*文字シャギーを解消*/
h2, h4, h5, h6, p, li, ol, dt, dd, label, select, button, span, table, .no-shaggy {
  transform: rotate(0.03deg);
}

/* 画像 hover:半透明 ＿＿＿＿＿＿＿＿＿＿＿*/
.tra:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  transition: all 0.3s ease;
}

/*--------------------------------------------------
　分岐　サンプル
-------------------------------------------------*/
/*--------------------------------------------------
 変数
-------------------------------------------------*/
/*--------------------------------------------------
 *共通設定*
-------------------------------------------------*/
#wrapper {
  color: #333333;
  font-family: "M PLUS Rounded 1c", sans-serif;
  line-height: 1.2;
  width: 100%;
}

.content-1200 {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 1200px) {
  .content-1200 {
    padding: 0;
  }
}

.content-1120 {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.font-w800 {
  font-weight: 800;
}

.bg-red {
  background-color: #e74c3c;
}

.bg-orange {
  background-color: #f39c12;
}

.color-red {
  color: #ff0000;
}

.color-red-light {
  color: #e74c3c;
}

.border-2 {
  border-width: 2px !important;
}

.border-8 {
  border-width: 8px !important;
}
@media all and (max-width: 767px) {
  .border-8 {
    border-width: 6px !important;
  }
}

.border-red {
  border-color: #e74c3c !important;
}

.border-grey {
  border-color: #bdc3c7 !important;
}

.box-yellow-green {
  background: linear-gradient(-45deg, #659820, #bfe012, #f1c40f);
  padding: 8px;
  border-radius: 30px;
}

.box-yellow-green-inner {
  background: #FFF;
  padding: 8px;
  border-radius: 20px;
}

/*=============================================>>>>>
= 画像の「イメージ」追加に関するクラス =
===============================================>>>>>*/
.text-img-attention--newitem {
  position: absolute;
  bottom: 60px;
  right: 270px;
}
@media screen and (max-width: 1200px) {
  .text-img-attention--newitem {
    bottom: 3%;
    right: 17%;
  }
}
@media all and (max-width: 767px) {
  .text-img-attention--newitem {
    width: 12%;
    bottom: -1%;
    right: 9%;
  }
  .text-img-attention--newitem img {
    width: 100%;
    height: auto;
  }
}

.text-img-attention--mainvisual--aoume {
  position: absolute;
  top: 516px;
  right: 298px;
  z-index: 2;
  width: 10%;
}
.text-img-attention--mainvisual--aoume img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1200px) {
  .text-img-attention--mainvisual--aoume {
    top: 83%;
    right: 59%;
    width: 12%;
  }
}
@media screen and (max-width: 992px) {
  .text-img-attention--mainvisual--aoume {
    top: 80%;
    right: 59%;
    width: 12%;
  }
}
@media all and (max-width: 767px) {
  .text-img-attention--mainvisual--aoume {
    top: 74%;
    right: 79%;
    width: 20%;
  }
}
.text-img-attention--mainvisual--lemon {
  position: absolute;
  top: 520px;
  right: 196px;
  z-index: 2;
  width: 10%;
}
.text-img-attention--mainvisual--lemon img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1200px) {
  .text-img-attention--mainvisual--lemon {
    top: 83%;
    right: 26%;
    width: 12%;
  }
}
@media screen and (max-width: 992px) {
  .text-img-attention--mainvisual--lemon {
    top: 80%;
    right: 59%;
    width: 12%;
  }
}
@media all and (max-width: 767px) {
  .text-img-attention--mainvisual--lemon {
    top: 74%;
    right: 2%;
    width: 20%;
  }
}

.text-img-attention--product--aoume {
  position: absolute;
  top: 360px;
  right: 6%;
  z-index: 10;
}
@media screen and (max-width: 1400px) {
  .text-img-attention--product--aoume {
    top: 67%;
    right: 7%;
  }
}
@media screen and (max-width: 1200px) {
  .text-img-attention--product--aoume {
    top: 87%;
    right: 20%;
  }
}
@media screen and (max-width: 1190px) {
  .text-img-attention--product--aoume {
    top: 84%;
  }
}
@media screen and (max-width: 1110px) {
  .text-img-attention--product--aoume {
    top: 81%;
  }
}
@media screen and (max-width: 992px) {
  .text-img-attention--product--aoume {
    top: 72%;
  }
}
@media all and (max-width: 767px) {
  .text-img-attention--product--aoume {
    display: none;
  }
}
.text-img-attention--product--lemon {
  position: absolute;
  top: 360px;
  right: -403px;
  z-index: 10;
}
@media screen and (max-width: 1400px) {
  .text-img-attention--product--lemon {
    top: 92%;
    right: -61%;
  }
}
@media screen and (max-width: 1024px) {
  .text-img-attention--product--lemon {
    top: 87%;
    right: -59%;
  }
}
@media screen and (max-width: 992px) {
  .text-img-attention--product--lemon {
    top: 85%;
  }
}
@media all and (max-width: 767px) {
  .text-img-attention--product--lemon {
    display: none;
  }
}

.text-img-attention--voice-aoume {
  position: absolute;
  top: 218px;
  left: 2px;
  z-index: 10;
  font-size: 12px;
}
@media screen and (max-width: 1200px) {
  .text-img-attention--voice-aoume {
    top: 39%;
    left: 0.5%;
  }
}
@media screen and (max-width: 1024px) {
  .text-img-attention--voice-aoume {
    top: 37%;
    left: 1%;
    font-size: 11px;
  }
}
@media screen and (max-width: 820px) {
  .text-img-attention--voice-aoume {
    top: 34%;
    left: 0.2%;
  }
}
@media screen and (max-width: 768px) {
  .text-img-attention--voice-aoume {
    top: 36%;
  }
}
@media all and (max-width: 767px) {
  .text-img-attention--voice-aoume {
    display: none;
  }
}
.text-img-attention--voice-lemon {
  position: absolute;
  top: 197px;
  left: 11px;
  z-index: 10;
  font-size: 12px;
}
@media screen and (max-width: 1200px) {
  .text-img-attention--voice-lemon {
    top: 30%;
    left: 1%;
  }
}
@media all and (max-width: 767px) {
  .text-img-attention--voice-lemon {
    display: none;
  }
}

/*= End of 画像の「イメージ」追加に関するクラス =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= 背景 =
===============================================>>>>>*/
.mainvisual-bg {
  background-image: url(can_ml_aoume/mainvisual-name-bg-suisai@2x-80.jpg);
  background-size: cover;
  background-position: top center;
}

.product-line {
  height: 38px;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1200px) {
  .product-line {
    height: 15px;
  }
}

.bg-white-half {
  background-color: rgba(255, 255, 255, 0.5);
  display: inline-block;
}
@media screen and (max-width: 576px) {
  .bg-white-half {
    display: block;
    background-color: rgba(255, 255, 255, 0.8);
  }
}

/*= End of 背景 =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= 境界線 =
===============================================>>>>>*/
.hr-green {
  height: 38px;
  background-color: #4a9241;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1200px) {
  .hr-green {
    height: 15px;
  }
}

/*= End of 境界線 =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= Newitem--新商品 =
===============================================>>>>>*/
.newitem-bg {
  background-image: url(can_ml_aoume/newitem-bg@2x-80.jpg);
  background-position: 47% 0;
  background-size: cover;
  padding-bottom: 10px;
}
@media screen and (max-width: 1200px) {
  .newitem-bg {
    background-size: 207%;
    background-position: 47% 0;
    background-repeat: no-repeat;
    padding-bottom: 0.8%;
  }
}
@media screen and (max-width: 767px) {
  .newitem-bg {
    background-image: url(can_ml_aoume/newitem-bg--sp@2x-80.jpg);
    background-size: cover;
    background-position: 100% 0;
  }
}

.newitem-catch01 {
  position: relative;
  top: -10px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .newitem-catch01 {
    width: 35%;
  }
  .newitem-catch01 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-catch01 {
    transform: rotate(2deg);
    width: 46%;
    left: 0%;
    top: 7px;
  }
}

.newitem-catch02 {
  position: absolute;
  top: -8px;
  left: 56px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .newitem-catch02 {
    width: 58%;
    left: 5%;
  }
  .newitem-catch02 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-catch02 {
    transform: rotate(2deg);
    width: 81%;
    left: 1%;
    top: 2%;
  }
}

.newitem-name {
  position: relative;
  z-index: 2;
  margin-top: 90px;
  margin-left: 50px;
}
@media screen and (max-width: 1200px) {
  .newitem-name {
    width: 45%;
    left: 0;
    margin: 7% 0 0 2%;
  }
  .newitem-name img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-name {
    width: 81%;
    left: 0%;
    margin-top: 13%;
  }
}

.newitem-name-bg {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  mix-blend-mode: multiply;
}
.newitem-name-bg img {
  position: absolute;
  top: 165px;
  left: 10px;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .newitem-name-bg {
    position: absolute;
    top: 19%;
    left: 0%;
    width: 52%;
  }
  .newitem-name-bg img {
    width: 100%;
    height: auto;
  }
  .newitem-name-bg img {
    top: auto;
    left: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-name-bg {
    width: 83%;
  }
}

.newitem-houzai-oume {
  position: relative;
  left: 159px;
  width: 25%;
  margin: -12px 0 0 0;
  z-index: 2;
}
.newitem-houzai-oume img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1200px) {
  .newitem-houzai-oume {
    width: 26%;
    left: 13%;
    top: 0;
    margin: -1% 0 0 0%;
  }
}
@media screen and (max-width: 767px) {
  .newitem-houzai-oume {
    width: 41%;
    left: 4%;
  }
}

.newitem-img-aoume {
  position: absolute;
  top: 576px;
  left: 26px;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .newitem-img-aoume {
    top: 73%;
    left: 2%;
    width: 17%;
  }
  .newitem-img-aoume img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-img-aoume {
    top: 90%;
    left: -2%;
    width: 15%;
  }
}

.newitem-icon-vitaminC {
  position: absolute;
  top: 370px;
  left: 470px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .newitem-icon-vitaminC {
    top: 48%;
    left: 40%;
    width: 13%;
  }
  .newitem-icon-vitaminC img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-icon-vitaminC {
    top: 28%;
    right: 0%;
    width: 20%;
    left: auto;
  }
}

.newitem-img-chaba01 {
  position: absolute;
  top: 514px;
  left: 440px;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .newitem-img-chaba01 {
    top: 67%;
    left: 37%;
    width: 15%;
  }
  .newitem-img-chaba01 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-img-chaba01 {
    top: 89%;
    width: 12%;
    left: 38%;
  }
}

.newitem-icon-kinousei {
  position: absolute;
  top: 684px;
  left: 480px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .newitem-icon-kinousei {
    top: 89%;
    left: 40%;
    width: 16%;
  }
  .newitem-icon-kinousei img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-icon-kinousei {
    top: 0;
    left: 10%;
    width: 30%;
    position: relative;
    margin: 8px 0;
  }
}

.newitem-text {
  position: absolute;
  top: 190px;
  right: 168px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .newitem-text {
    width: 40%;
    top: 24%;
    right: 12%;
  }
  .newitem-text img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-text {
    width: 55%;
    top: 44%;
    right: 1%;
  }
}

.newitem-img-chaba02 {
  position: absolute;
  top: 280px;
  right: 30px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .newitem-img-chaba02 {
    top: 36%;
    right: 5px;
    width: 19%;
  }
  .newitem-img-chaba02 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-img-chaba02 {
    display: none;
  }
}

.newitem-logo-cantafe {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .newitem-logo-cantafe {
    width: 16%;
    top: 1%;
    right: 1%;
  }
  .newitem-logo-cantafe img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .newitem-logo-cantafe {
    width: 20%;
    top: 0%;
    right: 0%;
  }
}

/*= Newitem--新商品  =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= mainvisual =
===============================================>>>>>*/
.mainvisual-box {
  width: 50%;
  padding: 50px 40px 30px;
}
.mainvisual-box a {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .mainvisual-box {
    padding: 5% 1% 1% 1%;
  }
}

.mainvisual-icon-new {
  position: absolute;
  top: 5px;
  left: -25px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .mainvisual-icon-new {
    width: 19%;
    top: 28%;
    left: 42%;
    z-index: 5;
  }
  .mainvisual-icon-new img {
    width: 100%;
    height: auto;
  }
}

.mainvisual-name-aoume {
  text-align: right;
  margin: 0 0 0 auto;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .mainvisual-name-aoume {
    margin: -14px 0 0 auto;
    width: 100%;
  }
}

.mainvisual-box2408 {
  width: 50%;
  padding: 40px 40px 30px;
}
.mainvisual-box2408 a {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1300px) {
  .mainvisual-box2408 {
    padding: 5% 1% 1% 1%;
  }
}

.mainvisual-name-aoume2407 {
  text-align: left;
  margin: 0 0 0 -20px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1300px) {
  .mainvisual-name-aoume2407 {
    width: 79%;
    margin: 0 0 0 1%;
  }
  .mainvisual-name-aoume2407 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual-name-aoume2407 {
    margin: 3px auto 0;
    width: 87%;
  }
  .mainvisual-name-aoume2407 img {
    width: 100%;
    height: auto;
  }
}

.mainvisual-name-lemon2408 {
  position: relative;
  z-index: 2;
  margin: 0 0 0 -20px;
}
@media screen and (max-width: 1300px) {
  .mainvisual-name-lemon2408 {
    width: 79%;
    margin: 0 0 0 1%;
  }
  .mainvisual-name-lemon2408 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual-name-lemon2408 {
    margin: 3px auto 0;
    width: 87%;
  }
}

.mainvisual-icon-vitaminC2407 {
  position: absolute;
  top: 5%;
  right: 2%;
  width: 22%;
  z-index: 2;
}
.mainvisual-icon-vitaminC2407 img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1300px) {
  .mainvisual-icon-vitaminC2407 {
    top: 10%;
    right: 1%;
    width: 21%;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual-icon-vitaminC2407 {
    top: 26%;
    left: 0%;
    width: 23%;
  }
}

.mainvisual-icon-katekin2408 {
  position: absolute;
  top: 6%;
  right: 4%;
  width: 22%;
  z-index: 2;
}
.mainvisual-icon-katekin2408 img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1300px) {
  .mainvisual-icon-katekin2408 {
    top: 11%;
    right: 1%;
    width: 21%;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual-icon-katekin2408 {
    top: 26%;
    right: 0%;
    width: 23%;
  }
}

.mainvisual-icon-kinousei2408 {
  position: relative;
  margin: 15px 8px 0 auto;
  width: 33%;
  z-index: 2;
}
.mainvisual-icon-kinousei2408 img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1300px) {
  .mainvisual-icon-kinousei2408 {
    margin: 1% 2% 0 auto;
    width: 35%;
  }
}

.mainvisual-houzai-lemon2408 {
  position: relative;
  margin: 72px 0 0 0;
  width: 42%;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .mainvisual-houzai-lemon2408 {
    margin: 14% 0 0 0;
    width: 48%;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual-houzai-lemon2408 {
    margin: 15.5% 0 0 0;
  }
}

.mainvisual-logo-cantafe {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10%;
  z-index: 13;
}
.mainvisual-logo-cantafe img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1300px) {
  .mainvisual-logo-cantafe {
    top: 1%;
    width: 13%;
  }
}

.mainvisual-name-bg-aoume2408 {
  max-width: 1200px;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.mainvisual-name-bg-aoume2408 img {
  position: absolute;
  top: 14px;
  right: 10px;
  z-index: 1;
}
@media screen and (max-width: 992px) {
  .mainvisual-name-bg-aoume2408 {
    position: absolute;
    top: 3%;
    left: 0%;
    width: 100%;
    z-index: 1;
  }
  .mainvisual-name-bg-aoume2408 img {
    width: 100%;
    height: auto;
  }
  .mainvisual-name-bg-aoume2408 img {
    top: auto;
    left: auto;
  }
}

.mainvisual-name-bg-lemon2408 {
  max-width: 1200px;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.mainvisual-name-bg-lemon2408 img {
  position: absolute;
  top: 14px;
  left: 10px;
  z-index: 1;
}
@media screen and (max-width: 992px) {
  .mainvisual-name-bg-lemon2408 {
    position: absolute;
    top: 3%;
    left: 0%;
    width: 100%;
    z-index: 1;
  }
  .mainvisual-name-bg-lemon2408 img {
    width: 100%;
    height: auto;
  }
  .mainvisual-name-bg-lemon2408 img {
    top: auto;
    left: auto;
  }
}

.mainvisual-button {
  margin-top: 20px;
}
@media screen and (max-width: 1300px) {
  .mainvisual-button {
    margin-top: 0;
  }
}
@media all and (max-width: 767px) {
  .mainvisual-button {
    margin-top: 2%;
  }
}

.text-img-attention--mainvisual2408--aoume {
  position: absolute;
  top: 516px;
  right: 298px;
  z-index: 2;
  width: 10%;
}
.text-img-attention--mainvisual2408--aoume img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1300px) {
  .text-img-attention--mainvisual2408--aoume {
    top: 83%;
    right: 59%;
    width: 12%;
  }
}
@media all and (max-width: 1024px) {
  .text-img-attention--mainvisual2408--aoume {
    top: 77%;
    right: 82%;
    width: 13%;
  }
}
@media all and (max-width: 992px) {
  .text-img-attention--mainvisual2408--aoume {
    width: 15%;
  }
}
@media all and (max-width: 767px) {
  .text-img-attention--mainvisual2408--aoume {
    top: 74%;
    right: 79%;
    width: 20%;
  }
}
.text-img-attention--mainvisual2408--lemon {
  position: absolute;
  top: 520px;
  right: 196px;
  z-index: 2;
  width: 10%;
}
.text-img-attention--mainvisual2408--lemon img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1300px) {
  .text-img-attention--mainvisual2408--lemon {
    top: 83%;
    right: 26%;
    width: 12%;
  }
}
@media all and (max-width: 1024px) {
  .text-img-attention--mainvisual2408--lemon {
    top: 77%;
    right: 2%;
    width: 13%;
  }
}
@media all and (max-width: 992px) {
  .text-img-attention--mainvisual2408--lemon {
    width: 15%;
  }
}
@media all and (max-width: 767px) {
  .text-img-attention--mainvisual2408--lemon {
    top: 74%;
    right: 2%;
    width: 20%;
  }
}

.mainvisual-glass-aoume {
  position: absolute;
  top: 210px;
  left: -26px;
}
@media screen and (max-width: 1200px) {
  .mainvisual-glass-aoume {
    width: 80%;
    top: 38%;
    left: -17%;
  }
  .mainvisual-glass-aoume img {
    width: 100%;
    height: auto;
  }
}

.mainvisual-icon-kinousei {
  position: relative;
  margin: 15px 8px 0 auto;
  width: 33%;
  z-index: 2;
}
.mainvisual-icon-kinousei img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1200px) {
  .mainvisual-icon-kinousei {
    margin: 5% 2% 0 auto;
    width: 35%;
  }
}

.mainvisual-houzai-oume {
  position: relative;
  margin: 5px -9px 0 auto;
  width: 42%;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .mainvisual-houzai-oume {
    margin: 5px 0 0 auto;
    width: 48%;
  }
}

.mainvisual-icon-vitaminC {
  position: absolute;
  top: 23%;
  left: 2%;
  width: 22%;
  z-index: 2;
}
.mainvisual-icon-vitaminC img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1200px) {
  .mainvisual-icon-vitaminC {
    top: 25%;
    left: 0%;
    width: 23%;
  }
}

.mainvisual-text-aoume {
  position: absolute;
  top: 37%;
  left: -14%;
}
@media screen and (max-width: 1200px) {
  .mainvisual-text-aoume {
    display: none;
  }
}

.mainvisual-name-bg-aoume {
  max-width: 1200px;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.mainvisual-name-bg-aoume img {
  position: absolute;
  top: 14px;
  right: 10px;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .mainvisual-name-bg-aoume {
    position: absolute;
    top: 7%;
    left: 0%;
    width: 100%;
    z-index: 1;
  }
  .mainvisual-name-bg-aoume img {
    width: 100%;
    height: auto;
  }
  .mainvisual-name-bg-aoume img {
    top: auto;
    left: auto;
  }
}

.mainvisual-bg-aoume {
  position: absolute;
  top: -60px;
  left: -470px;
}
@media screen and (max-width: 1200px) {
  .mainvisual-bg-aoume {
    width: 91%;
    top: -1%;
    left: -10%;
  }
  .mainvisual-bg-aoume img {
    width: 100%;
    height: auto;
  }
}

.mainvisual-name-lemon {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .mainvisual-name-lemon {
    margin: -14px 0 0 0;
    width: 100%;
  }
}

.mainvisual-glass-lemon {
  position: absolute;
  top: 213px;
  left: 204px;
}
@media screen and (max-width: 1200px) {
  .mainvisual-glass-lemon {
    width: 70%;
    top: 37%;
    left: 42%;
  }
  .mainvisual-glass-lemon img {
    width: 100%;
    height: auto;
  }
}

.mainvisual-houzai-lemon {
  position: relative;
  margin: 72px 0 0 0;
  width: 42%;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .mainvisual-houzai-lemon {
    margin: 19% 0 0 0;
    width: 48%;
  }
}
@media all and (max-width: 767px) {
  .mainvisual-houzai-lemon {
    margin: 19% 0 0 0;
  }
}

.mainvisual-icon-katekin {
  position: absolute;
  top: 25%;
  right: 5%;
  width: 22%;
  z-index: 2;
}
.mainvisual-icon-katekin img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1200px) {
  .mainvisual-icon-katekin {
    top: 26%;
    right: 2%;
  }
}

.mainvisual-text-lemon {
  position: absolute;
  top: 42%;
  right: -13%;
}
@media screen and (max-width: 1200px) {
  .mainvisual-text-lemon {
    display: none;
  }
}

.mainvisual-name-bg-lemon {
  max-width: 1200px;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.mainvisual-name-bg-lemon img {
  position: absolute;
  top: 14px;
  left: 10px;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .mainvisual-name-bg-lemon {
    position: absolute;
    top: 7%;
    left: 0%;
    width: 100%;
    z-index: 1;
  }
  .mainvisual-name-bg-lemon img {
    width: 100%;
    height: auto;
  }
  .mainvisual-name-bg-lemon img {
    top: auto;
    left: auto;
  }
}

.mainvisual-bg-lemon {
  position: absolute;
  top: -75px;
  left: 419px;
}
@media screen and (max-width: 1200px) {
  .mainvisual-bg-lemon {
    width: 91%;
    top: -1%;
    left: 20%;
  }
  .mainvisual-bg-lemon img {
    width: 100%;
    height: auto;
  }
}

/*= End of mainvisual =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= 製品 =
===============================================>>>>>*/
.product-bg-white {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 20px 40px;
  width: 670px;
}
@media screen and (max-width: 1200px) {
  .product-bg-white {
    width: 60%;
    padding: 20px;
    padding-bottom: 10px;
    border-radius: 15px;
  }
}
@media all and (max-width: 767px) {
  .product-bg-white {
    width: 100%;
  }
}

.product-aoume-catch {
  position: relative;
  z-index: 11;
}
.product-aoume-catch img {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .product-aoume-catch {
    width: 80%;
    margin: 0 auto;
  }
  .product-aoume-catch img {
    width: 100%;
    height: auto;
  }
}

.product-aoume-bg {
  background-image: url(can_ml_aoume/product-aoume-bg@2x-80-2504.jpg);
  background-position: 47% -1px;
  background-size: cover;
  padding-bottom: 10px;
  background-repeat: no-repeat;
  background-color: #e8e2e6;
}
@media screen and (max-width: 1200px) {
  .product-aoume-bg {
    background-size: 169% auto;
    background-position: 59% 2px;
  }
}
@media screen and (max-width: 767px) {
  .product-aoume-bg {
    background-size: 348% auto;
    background-position: 59% 160%;
  }
}
@media screen and (max-width: 576px) {
  .product-aoume-bg {
    background-position: 59% 101%;
  }
}
@media screen and (max-width: 400px) {
  .product-aoume-bg {
    background-position: 59% 243%;
  }
}

.product-aoume-icon-new {
  position: absolute;
  top: -30px;
  right: -110px;
}
@media screen and (max-width: 1200px) {
  .product-aoume-icon-new {
    top: -7%;
    right: -13%;
    width: 22%;
  }
}
@media screen and (max-width: 767px) {
  .product-aoume-icon-new {
    top: -10%;
    right: -7%;
    width: 22%;
  }
  .product-aoume-icon-new img {
    width: 100%;
    height: auto;
  }
}

.product-aoume-houzai {
  width: 240px;
  margin: 0 15px 0 -8px;
}
.product-aoume-houzai img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1200px) {
  .product-aoume-houzai {
    width: 100%;
  }
}

.product-icon-vitaminC {
  position: absolute;
  top: -23px;
  right: 0;
}
@media screen and (max-width: 1200px) {
  .product-icon-vitaminC {
    top: -12%;
    width: 46%;
  }
  .product-icon-vitaminC img {
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 1200px) {
  .product-aoume-text {
    width: 88%;
  }
  .product-aoume-text img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 576px) {
  .product-aoume-text {
    width: 100%;
  }
  .product-aoume-text img {
    width: 100%;
    height: auto;
  }
}

.product-left {
  width: 30%;
}

@media screen and (max-width: 1200px) {
  .product-aoume-img-sozai {
    width: 63%;
  }
}

.product-lemon-catch {
  position: relative;
  z-index: 10;
}
.product-lemon-catch img {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .product-lemon-catch {
    width: 100%;
    margin: 0 auto;
  }
  .product-lemon-catch img {
    width: 100%;
    height: auto;
  }
}

.product-lemon-bg {
  background-image: url(can_ml_aoume/product-lemon-bg@2x-80-2404.jpg);
  background-size: cover;
  background-position: 43% 94%;
  padding-bottom: 10px;
  background-repeat: no-repeat;
  background-color: #e8e2e6;
}
@media screen and (max-width: 1200px) {
  .product-lemon-bg {
    background-size: 199% auto;
    background-position: 50% -3%;
  }
}
@media screen and (max-width: 767px) {
  .product-lemon-bg {
    background-size: 478% auto;
    background-position: 59% 60%;
  }
}

.product-lemon-bg-suisai {
  background-image: url(can_ml_aoume/product-lemon-bg-suizai@2x-50.jpg);
  background-size: cover;
}

.product-icon-katekin {
  position: absolute;
  top: -7px;
  right: -6px;
}
@media screen and (max-width: 1200px) {
  .product-icon-katekin {
    top: -3%;
    width: 44%;
    right: 0%;
  }
  .product-icon-katekin img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .product-icon-katekin {
    top: -1%;
    width: 44%;
    right: 2%;
  }
}

.product-notes {
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .product-notes {
    font-size: 12px;
  }
}

.product-aoume-bg-fuwa01 {
  position: absolute;
  top: -95%;
  left: -50%;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .product-aoume-bg-fuwa01 {
    width: 185%;
    top: -91%;
    left: -49%;
  }
  .product-aoume-bg-fuwa01 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .product-aoume-bg-fuwa01 {
    top: -21%;
  }
}

.product-aoume-bg-fuwa02 {
  position: absolute;
  top: -25%;
  left: -45%;
  z-index: 1;
}
@media screen and (max-width: 1200px) {
  .product-aoume-bg-fuwa02 {
    width: 145%;
    top: -21%;
    left: -23%;
  }
  .product-aoume-bg-fuwa02 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .product-aoume-bg-fuwa02 {
    display: none;
  }
}

.product-lemon-bg-fuwa01 {
  position: absolute;
  top: -65%;
  left: -50%;
  z-index: 2;
}
@media screen and (max-width: 1500px) {
  .product-lemon-bg-fuwa01 {
    width: 165%;
    top: -91%;
    left: -39%;
  }
  .product-lemon-bg-fuwa01 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .product-lemon-bg-fuwa01 {
    top: -21%;
  }
}

.product-lemon-bg-fuwa02 {
  position: absolute;
  top: -45%;
  left: -45%;
  z-index: 1;
}
@media screen and (max-width: 1500px) {
  .product-lemon-bg-fuwa02 {
    width: 155%;
    top: -21%;
    left: -23%;
  }
  .product-lemon-bg-fuwa02 img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .product-lemon-bg-fuwa02 {
    display: none;
  }
}

.product-aoume-bg-suisai {
  background-image: url(can_ml_aoume/product-aoume-bg-suizai@2x-50.jpg);
  background-size: cover;
}

.product-lemon-bg-suisai {
  background-image: url(can_ml_aoume/product-lemon-bg-suizai@2x-50.jpg);
  background-size: cover;
}

.sales-bg-white {
  background: #FFF;
  border-radius: 20px;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 991px) {
  .sales-bg-white {
    border-radius: 10px;
  }
}

.sales-ribon {
  margin: -60px 0 0 -10px;
}
@media screen and (max-width: 767px) {
  .sales-ribon {
    margin: -11% 0 0 -1%;
  }
}

@media screen and (max-width: 767px) {
  .icon-gentei {
    width: 50%;
    max-width: 250px;
  }
}

.item-name {
  font-size: 47px;
  font-weight: 800;
  line-height: 1;
}
.item-name small {
  font-weight: 800;
}
@media all and (max-width: 991px) {
  .item-name {
    font-size: 2.8rem;
  }
}
@media all and (max-width: 768px) {
  .item-name {
    font-size: 2.8rem;
  }
}
@media all and (max-width: 576px) {
  .item-name {
    font-size: 1.8rem;
  }
}

.item-name--min {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}
.item-name--min small {
  font-weight: 800;
}
@media all and (max-width: 991px) {
  .item-name--min {
    font-size: 25px;
  }
}

.item-name--small {
  font-size: 24px;
  font-weight: 800;
}
@media all and (max-width: 991px) {
  .item-name--small {
    font-size: 18px;
    transform: rotate(0.03deg);
  }
}

.item-description {
  font-size: 25px;
  font-weight: 700;
  color: #FFF;
}
@media all and (max-width: 768px) {
  .item-description {
    font-size: 1.1rem;
  }
}

.item-quantity {
  font-size: 37px;
  font-weight: 800;
  line-height: 1.1;
}
.item-quantity small {
  font-weight: 800;
}
@media all and (max-width: 768px) {
  .item-quantity {
    font-size: 28px;
  }
}
@media all and (max-width: 320px) {
  .item-quantity {
    font-size: 1.2rem;
  }
}

.price {
  font-family: "Oxygen", sans-serif;
  letter-spacing: -0.1rem;
  font-size: 65px;
  font-weight: 800;
  padding: 0 0.08em 0 0.5rem;
  line-height: 1 !important;
}
.price--special {
  font-size: 2rem;
  font-weight: 800;
}
.price--unit {
  font-size: 2.3rem;
  font-weight: 700;
}
@media all and (max-width: 1200px) {
  .price {
    font-size: 3.3rem;
  }
  .price--special {
    font-size: 1.5rem;
  }
  .price--unit {
    font-size: 2rem;
  }
}
@media all and (max-width: 768px) {
  .price--special {
    font-size: 1.8rem;
  }
}
@media all and (max-width: 576px) {
  .price {
    font-size: 3rem;
  }
  .price--special {
    font-size: 1.4rem;
  }
  .price--unit {
    font-size: 1.5rem;
  }
}

.soutou {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: right;
  line-height: 1 !important;
}
@media all and (max-width: 320px) {
  .soutou {
    font-size: 0.8rem;
  }
}

.item-text {
  font-size: 1.2rem;
}
@media all and (max-width: 768px) {
  .item-text {
    font-size: 1rem;
  }
}
.item-text small {
  font-size: 1rem;
  vertical-align: top;
}

.item-set-box {
  position: relative;
  margin-top: 1rem;
  padding: 1rem;
  border: 2px solid #acbbc3;
  border-radius: 5px;
}
.item-set-box-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0.5rem;
  margin: 0;
  font-size: 1.1rem;
  background-color: white;
  transform: translateY(-50%) translateX(1em);
}
.item-set-box P {
  font-size: 1.1rem;
}
@media all and (max-width: 768px) {
  .item-set-box {
    padding: 0.8rem;
  }
  .item-set-box P {
    font-size: 0.9rem;
  }
}

.btn-cart {
  width: 80%;
  font-size: 28px;
  font-weight: 500;
  padding: 1rem;
  color: #fff !important;
  background-color: #0cbb3b;
}
.btn-cart:hover {
  background-color: #098b2c;
}
@media screen and (max-width: 576px) {
  .btn-cart {
    font-size: 1.2rem;
    width: 100%;
  }
}
@media screen and (max-width: 320px) {
  .btn-cart {
    font-size: 1rem;
  }
}

/*矢印ボタン_____________*/
.arrow_btn {
  color: #fff;
  position: relative;
  transition: 0.5s;
}

.arrow_btn::after {
  transition: 0.3s;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto;
  transform: rotate(45deg);
}

.arrow_btn:hover::after {
  right: 12px;
}

.icon-new {
  font-size: 22px;
  font-weight: 700;
  padding: 5px 10px;
  color: #FFF;
  background-color: #fe2066;
  border-radius: 5px;
}
@media all and (max-width: 991px) {
  .icon-new {
    font-size: 18px;
    padding: 3px 5px;
  }
}

.atention-text {
  font-size: 1rem;
  padding-bottom: 1px;
  text-align: right;
}
.atention-text a {
  text-decoration: underline !important;
}
.atention-text a:hover {
  text-decoration: none !important;
}
@media all and (max-width: 768px) {
  .atention-text {
    font-size: 0.8rem;
  }
}

/*= End of 製品 =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= 　ポイント =
===============================================>>>>>*/
.point-aoume-bg {
  background-image: url(can_ml_aoume/point-aoume-bg@2x-50.jpg);
  background-size: cover;
  background-position: top center;
}

.point-lemon-bg {
  background-image: url(can_ml_aoume/point-lemon-bg@2x-50.jpg);
  background-size: cover;
  background-position: top center;
}
@media screen and (max-width: 767px) {
  .point-lemon-bg {
    background-image: none;
  }
}

.product-text {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
}
@media all and (max-width: 768px) {
  .product-text {
    font-size: 16px;
    line-height: 1.2;
  }
}

@media all and (max-width: 768px) {
  .product-img {
    width: 50%;
  }
}

/*= End of ポイント =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
=  声 =
===============================================>>>>>*/
.voice-img {
  margin: -50px -60px 0 -60px;
}
.voice-img--aoume {
  margin: -50px -70px 0 -40px;
}
@media all and (max-width: 768px) {
  .voice-img--aoume {
    margin: -4% -2% 0 -2%;
  }
}
@media all and (max-width: 768px) {
  .voice-img {
    margin: -4% -2% 0 -2%;
  }
}

/*= End of 声 =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
=  つくり方　how-to =
===============================================>>>>>*/
.how-to-bg {
  background-image: url(can_ml_aoume/how-to-bg@2x-50.jpg);
  background-size: cover;
  background-position: top center;
}

/*= End of つくり方　how-to =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= シーン　scene =
===============================================>>>>>*/
.scene-bg {
  background-image: url(can_ml_aoume/scene-bg@2x-50.jpg);
  background-size: cover;
  background-position: top center;
}

.scene-img-bottle {
  position: absolute;
  top: 0;
  left: -40px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .scene-img-bottle {
    left: -8%;
    width: 48%;
  }
  .scene-img-bottle img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .scene-img-bottle {
    top: -10%;
    left: -1%;
    width: 29%;
  }
}

.scene-img-glass {
  position: absolute;
  top: 160px;
  left: -40px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .scene-img-glass {
    left: -8%;
    width: 48%;
  }
  .scene-img-glass img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .scene-img-glass {
    top: 27%;
    left: 3%;
    width: 29%;
  }
}

.scene-text {
  position: absolute;
  top: -60px;
  right: -160px;
  z-index: 2;
}
@media screen and (max-width: 1450px) {
  .scene-text {
    right: -12%;
    width: 39%;
  }
  .scene-text img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 1300px) {
  .scene-text {
    right: 0%;
  }
  .scene-text img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .scene-text {
    right: -1%;
    width: 72%;
    top: 62%;
  }
}

/*= End of シーン　scene =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= レシピ recipe =
===============================================>>>>>*/
#recipe h2 {
  font-size: 33px;
  color: #4d4d4d;
}
@media screen and (max-width: 767px) {
  #recipe h2 {
    font-size: 27px;
  }
}
#recipe h3 {
  text-align: left;
  position: relative;
  z-index: 3;
  color: #4d4d4d;
}
#recipe h3 span {
  position: relative;
  font-size: 19px;
  display: inline-block;
  padding: 0 20px 0 0;
  background-color: #ffff79;
  z-index: 3;
}
#recipe h3::after { /* ::after または:after */
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  background-color: #4d4d4d;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 2;
}
#recipe ul {
  list-style: none;
  padding: 0;
}

.recipe-bg {
  background-image: url(can_ml_aoume/recipe-bg-80.jpg);
  background-repeat: no-repeat;
  background-position: 45% 103%;
}
@media screen and (max-width: 1200px) {
  .recipe-bg {
    background-size: auto 90%;
  }
}
@media screen and (max-width: 767px) {
  .recipe-bg {
    background-size: auto 49%;
    background-position: 29% 25%;
  }
}

.racipe-smoothie {
  position: relative;
  z-index: 1;
  margin-top: 80px;
  background-image: url(can_ml_aoume/racipe-smoothie@2x.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media screen and (max-width: 1200px) {
  .racipe-smoothie {
    margin-top: 15%;
  }
}
@media screen and (max-width: 767px) {
  .racipe-smoothie {
    margin-top: 80%;
  }
}

.recipe-fukidashi {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .recipe-fukidashi {
    left: auto;
    width: 33%;
    right: 0;
    top: -5%;
  }
  .recipe-fukidashi img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .recipe-fukidashi {
    top: -7%;
    right: 0;
    left: auto;
    width: 39%;
  }
}

.recipe-text {
  position: absolute;
  top: -54px;
  left: -80px;
  z-index: 2;
}
@media screen and (max-width: 1200px) {
  .recipe-text {
    left: -8%;
    width: 78%;
  }
  .recipe-text img {
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .recipe-text {
    display: none;
  }
}

/*= End of レシピ recipe =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= 説明 note =
===============================================>>>>>*/
.note-bg {
  background-image: url(can_ml_aoume/note-bg@2x-50.jpg);
  background-size: cover;
  background-position: top center;
}

#note h1 {
  font-size: 22px;
  font-weight: 700;
}
@media all and (max-width: 768px) {
  #note h1 {
    font-size: 18px;
  }
}

/* --------------------------------------------------
足湯美人LPCSS引用
-------------------------------------------------*/
.moreinfo-table {
  line-height: 2;
  color: #333333;
}
.moreinfo-table th {
  width: 20%;
  background-color: #f5f5f5;
  vertical-align: middle;
  font-weight: bold;
}
.moreinfo-table td {
  background-color: #FFF;
}
.moreinfo-table th, .moreinfo-table td {
  padding: 8px 15px;
  line-height: 1.5;
}
@media all and (max-width: 480px) {
  .moreinfo-table {
    line-height: 1.5;
  }
  .moreinfo-table th, .moreinfo-table td {
    display: block;
    width: 100%;
    padding: 8px 15px;
  }
}

@media all and (max-width: 480px) {
  #moreinfo .container {
    padding: 0 1em;
  }
}
/* --------------------------------------------------
足湯美人LPCSS引用　ここまで
-------------------------------------------------*/
/*= End of 説明 =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= アニメーション =
===============================================>>>>>*/
.target {
  animation: target 5s ease-in-out infinite alternate-reverse;
}
@keyframes target {
  0% {
    transform: translateY(-8%);
  }
  100% {
    transform: translateY(8%);
  }
}

.target2 {
  animation: target2 5s ease-in-out infinite alternate-reverse;
}
@keyframes target2 {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}

/*= End of アニメーション =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= pagetop =
===============================================>>>>>*/
.pagetop {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.6);
  color: #fff;
  transition: 0.3s;
  opacity: 0;
  z-index: 20;
}

/*= End of pagetop =*/
/*=============================================<<<<<*/
/*=============================================>>>>>
= footer =
===============================================>>>>>*/
.ft_pc_common_cp {
  margin-bottom: 3px;
  padding-top: 5px;
}

/*= End of footer =*/
/*=============================================<<<<<*//*# sourceMappingURL=can_ml_aoume.css.map */