@charset "UTF-8";
.sp_br {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp_br {
    display: inline-block;
  }
}

@media screen and (max-width: 768px) {
  .pc_br {
    display: none;
  }
}

h2, h3, p, td {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important;
  font-size: 18px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.125rem;
  line-height: 2;
  color: #44342C;
}

@media screen and (max-width: 768px) {
  h2, h3, p, td {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    /*IE9以下で反映されるよう記述*/
    font-size: 0.75rem;
  }
}

a {
  text-decoration: none !important;
}

ul {
  padding: 0;
}

li {
  position: relative;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 18px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.125rem;
  line-height: 2;
  color: #44342C;
  list-style: none;
}

.commonTitle h2 {
  text-align: center;
  font-weight: bold;
  font-size: 36px;
  /*IE9以下で反映されるよう記述*/
  font-size: 2.25rem;
  margin: 0 auto 2px;
}

@media screen and (max-width: 768px) {
  .commonTitle h2 {
    font-size: 30px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1.875rem;
  }
}

.commonTitle h3 {
  text-align: center;
  font-weight: bold;
  font-size: 32px;
  /*IE9以下で反映されるよう記述*/
  font-size: 2rem;
  margin: 0 auto 2px;
  color: #10452A;
}

@media screen and (max-width: 768px) {
  .commonTitle h3 {
    font-size: 26px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1.625rem;
  }
}

.commonTitle p {
  text-align: center;
  font-size: 13px;
  /*IE9以下で反映されるよう記述*/
  font-size: 0.8125rem;
  margin-top: 4px;
}

.commonWrapper {
  min-width: 800px;
  width: 70vw;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .commonWrapper {
    width: 90vw;
    min-width: 0;
    margin: 0 auto;
  }
}

.textCenter {
  text-align: center;
}

.commonFlexbox {
  display: flex;
  justify-content: space-between;
}

.commonFlexbox .commonFlex_sub {
  width: 30%;
  box-sizing: border-box;
  background: url(../images/cmn_bg01.png) no-repeat center;
  background-size: cover;
}

.commonFlexbox .commonFlex_sub .subWrap {
  padding: 60px 40px 20px;
}

@media screen and (max-width: 768px) {
  .commonFlexbox .commonFlex_sub .subWrap {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 10px;
  }
}

.commonFlexbox .commonFlex_sub .imageBox {
  width: 194px;
  height: 290px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .commonFlexbox .commonFlex_sub .imageBox {
    width: 60px;
    height: 90px;
    margin: 0 0;
  }
}

.commonFlexbox .commonFlex_sub .imageBox .pic01 {
  padding-top: 149.48454%;
  background: url(../images/cmn_logocircle.png) no-repeat center;
  background-size: contain;
}

.commonFlexbox .commonFlex_sub .snsBox {
  margin: 0px auto 20px;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .commonFlexbox .commonFlex_sub .snsBox {
    display: none;
  }
}

.commonFlexbox .commonFlex_sub .snsBox a {
  display: inline-block;
  width: 40px;
  height: 40px;
}

.commonFlexbox .commonFlex_sub .snsBox .twitter {
  margin-right: 10px;
  background: url(../images/kv_sns01.png) no-repeat center;
  background-size: contain;
}

.commonFlexbox .commonFlex_sub .snsBox .facebook {
  background: url(../images/kv_sns02.png) no-repeat center;
  background-size: contain;
}

.commonFlexbox .commonFlex_main {
  width: 70%;
}

@media screen and (max-width: 768px) {
  .commonFlexbox .commonFlex_main {
    width: 100%;
  }
}

a.cmnLink {
  background-color: #EFF2F3;
  border-radius: 999px;
  padding: 16px 20px;
  color: #10452A;
  box-sizing: border-box;
  font-size: 14px;
  /*IE9以下で反映されるよう記述*/
  font-size: 0.875rem;
  font-weight: bold;
}

.commonImgtitle {
  max-width: 738px;
  height: 180px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .commonImgtitle {
    height: 130px;
  }
}

@media screen and (max-width: 768px) {
  .kvBlock .commonFlexbox {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .kvBlock .commonFlexbox .commonFlex_sub {
    width: 100%;
    height: 120px;
  }
}

.kvBlock .commonFlexbox .commonFlex_sub .txtBox {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .kvBlock .commonFlexbox .commonFlex_sub .txtBox {
    width: 76%;
    margin-top: 0;
  }
}

.kvBlock .commonFlexbox .commonFlex_sub .txtBox p {
  color: #FFF;
  font-weight: bold;
}

.kvBlock .commonFlexbox .commonFlex_sub .txtBox .sub {
  font-size: 18px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.125rem;
}

@media screen and (max-width: 768px) {
  .kvBlock .commonFlexbox .commonFlex_sub .txtBox .sub {
    font-size: 14px;
    /*IE9以下で反映されるよう記述*/
    font-size: 0.875rem;
    margin-bottom: 2px !important;
  }
}

.kvBlock .commonFlexbox .commonFlex_sub .txtBox .title {
  font-size: 28px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.75rem;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .kvBlock .commonFlexbox .commonFlex_sub .txtBox .title {
    font-size: 20px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 !important;
  }
}

.kvBlock .commonFlexbox .commonFlex_sub a.amazonLink {
  position: relative;
  width: 100%;
  display: block;
  background-color: #10452A;
  padding: 30px 40px 30px 140px;
  box-sizing: border-box;
  transition: all 0.3s ease 0s;
}

@media screen and (max-width: 768px) {
  .kvBlock .commonFlexbox .commonFlex_sub a.amazonLink {
    display: none;
  }
}

.kvBlock .commonFlexbox .commonFlex_sub a.amazonLink:hover {
  background-color: #FD7E00;
}

.kvBlock .commonFlexbox .commonFlex_sub a.amazonLink::before {
  content: "";
  width: 104px;
  height: 152px;
  position: absolute;
  top: -28px;
  left: 10px;
  background: url(../images/amazon_pic01.png) no-repeat center;
  background-size: contain;
}

.kvBlock .commonFlexbox .commonFlex_sub a.amazonLink::after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -15px;
  background: url(../images/kv_pic03.png) no-repeat center;
  background-size: contain;
}

.kvBlock .commonFlexbox .commonFlex_sub a.amazonLink .txt p {
  color: #FFF;
  font-weight: bold;
}

.kvBlock .commonFlexbox .commonFlex_sub a.amazonLink .txt .sub {
  font-size: 14px;
  /*IE9以下で反映されるよう記述*/
  font-size: 0.875rem;
}

.kvBlock .commonFlexbox .commonFlex_sub a.amazonLink .txt .sub02 {
  font-size: 10px;
  /*IE9以下で反映されるよう記述*/
  font-size: 0.625rem;
}

.kvBlock .commonFlexbox .commonFlex_sub a.amazonLink .txt .main {
  font-size: 20px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.25rem;
}

.kvBlock .commonFlex_main {
  position: relative;
  background: url(../images/kv_bg02.jpg) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .kvBlock .commonFlex_main {
    width: 100%;
    height: 0;
    padding-top: 108.26667%;
    background: url(../images/kv_bg02_sp.jpg) no-repeat center;
    background-size: contain;
  }
}

@media screen and (max-width: 768px) {
  .kvBlock .linkBox {
    display: none;
  }
}

.kvBlock .linkBox a.link01 {
  display: inline-block;
  position: absolute;
  bottom: 50px;
  right: 180px;
  padding-right: 24px;
}

.kvBlock .linkBox span.arrow {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 10px;
  vertical-align: middle;
  background: url(../images/kv_pic04.png) no-repeat center;
  background-size: contain;
}

.kvBlock .linkBox a.link02 {
  display: inline-block;
  position: absolute;
  bottom: 50px;
  right: 50px;
}

.spAmazonlink {
  display: none;
}

@media screen and (max-width: 768px) {
  .spAmazonlink {
    display: block;
  }
  .spAmazonlink a.amazonLink {
    position: relative;
    display: block;
    width: 90%;
    margin: 50px auto 30px;
    background-color: #10452A;
    padding: 16px 0 16px 100px;
    box-sizing: border-box;
  }
  .spAmazonlink a.amazonLink::before {
    content: "";
    width: 80px;
    height: 103px;
    position: absolute;
    top: -20px;
    left: 10px;
    background: url(../images/amazon_pic01.png) no-repeat center;
    background-size: contain;
  }
  .spAmazonlink a.amazonLink::after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -15px;
    background: url(../images/kv_pic03.png) no-repeat center;
    background-size: contain;
  }
  .spAmazonlink a.amazonLink .txt p {
    color: #FFF;
    font-weight: bold;
    margin: 4px 0 0 0 !important;
    line-height: 1.2;
  }
  .spAmazonlink a.amazonLink .txt p.sub {
    font-size: 14px;
    /*IE9以下で反映されるよう記述*/
    font-size: 0.875rem;
  }
  .spAmazonlink a.amazonLink .txt p.sub02 {
    font-size: 10px;
    /*IE9以下で反映されるよう記述*/
    font-size: 0.625rem;
  }
  .spAmazonlink a.amazonLink .txt p.main {
    font-size: 24px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1.5rem;
  }
}

.storyBlock {
  position: relative;
  width: 100%;
  background-color: #F9FFEB;
  padding: 120px 0;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .storyBlock {
    padding: 60px 0;
  }
}

.storyBlock:before {
  content: "";
  display: block;
  width: 282px;
  height: 113vh;
  position: absolute;
  top: 0px;
  right: 0px;
  background: url(../images/story_bg02.png) no-repeat center;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .storyBlock:before {
    height: 130vh;
    right: -140px;
    opacity: 0.4;
  }
}

.storyBlock:after {
  content: "";
  display: block;
  width: 282px;
  height: 113vh;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url(../images/story_bg01.png) no-repeat center;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .storyBlock:after {
    height: 130vh;
    left: -140px;
    opacity: 0.4;
  }
}

.storyBlock .commonTitle h2, .storyBlock .commonTitle p {
  color: #10452A;
}

.storyBlock .storyTxt {
  position: relative;
  z-index: 999;
}

.storyBlock .storyTxt p.mainTitle {
  font-weight: bold;
  font-size: 24px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.5rem;
  margin: 40px auto;
}

@media screen and (max-width: 768px) {
  .storyBlock .storyTxt p.mainTitle {
    font-size: 20px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1.25rem;
    margin: 20px 0;
  }
}

@media screen and (max-width: 768px) {
  .storyBlock .storyTxt p {
    font-size: 16px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
  }
}

@media screen and (max-width: 768px) {
  .storyBlock .storyTxt .textCenter {
    text-align: left;
  }
}

.strongBlock {
  padding-top: 80px;
  position: relative;
  background-color: #FFF;
}

.strongBlock span.decopic01 {
  content: "";
  display: block;
  width: 286px;
  height: 267px;
  position: absolute;
  top: 0px;
  right: 0px;
  background: url(../images/strong_deco01.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .strongBlock span.decopic01 {
    display: none;
  }
}

.strongBlock span.decopic02 {
  content: "";
  display: block;
  width: 220px;
  height: 210px;
  position: absolute;
  top: 500px;
  left: 0px;
  background: url(../images/strong_deco02.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .strongBlock span.decopic02 {
    width: 110px;
    height: 105px;
    opacity: 0.3;
  }
}

.strongBlock span.decopic03 {
  content: "";
  display: block;
  width: 256px;
  height: 210px;
  position: absolute;
  top: 1000px;
  right: 0px;
  background: url(../images/strong_deco03.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .strongBlock span.decopic03 {
    width: 128px;
    height: 105px;
    opacity: 0.3;
  }
}

.strongBlock span.decopic04 {
  content: "";
  display: block;
  width: 250px;
  height: 322px;
  position: absolute;
  bottom: 170px;
  left: 0px;
  background: url(../images/strong_deco04.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .strongBlock span.decopic04 {
    width: 125px;
    height: 161px;
    opacity: 0.3;
  }
}

.strongBlock span.decopic05 {
  content: "";
  display: block;
  width: 270px;
  height: 184px;
  position: absolute;
  bottom: -80px;
  right: 0px;
  background: url(../images/strong_deco05.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .strongBlock span.decopic05 {
    width: 135px;
    height: 92px;
    opacity: 0.3;
  }
}

.strongBlock .commonWrapper .commonImgtitle {
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .strongBlock .commonWrapper .commonImgtitle {
    margin: 40px auto 10px;
  }
}

.strongBlock .commonWrapper .commonImgtitle .imageBoxstrong {
  width: 100%;
  height: 0;
  padding-top: 24.49118%;
  background: url(../images/strong_title.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .strongBlock .commonWrapper .commonImgtitle .imageBoxstrong {
    padding-top: 25.65217%;
  }
}

.strongBlock .commonWrapper .txtBlock {
  position: relative;
  z-index: 999;
  margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .strongBlock .commonWrapper .txtBlock {
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 768px) {
  .strongBlock .commonWrapper .txtBlock p.spmain {
    margin-top: 4px !important;
    font-size: 16px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
  }
}

.strongBlock .commonWrapper .txtBlock .num {
  font-family: 'Noto Serif JP', serif;
  font-size: 28px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.75rem;
  color: #FD7E00;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .strongBlock .commonWrapper .txtBlock .num {
    line-height: 0.8;
    font-family: 'Noto Serif JP', serif;
  }
}

.strongBlock .commonWrapper .txtBlock .main {
  font-size: 30px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.875rem;
  color: #10452A;
  font-weight: bold;
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .strongBlock .commonWrapper .txtBlock .main {
    font-size: 22px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1.375rem;
    line-height: 1.4;
  }
}

.drinkBlock .drinkFlexbox {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox {
    display: block;
    margin-top: 100px;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_sub {
  width: 30%;
  box-sizing: border-box;
  background: url(../images/drink_bg01.png) no-repeat center;
  background-size: cover;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_sub {
    width: 100%;
    height: 400px;
    background: url(../images/drink_bg01_sp.png) no-repeat center;
    background-size: cover;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_main {
  width: 70%;
  background: url(../images/drink_bg02.png) no-repeat center;
  background-size: cover;
  padding: 70px 100px 50px 50px;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main {
    width: 100%;
    padding: 70px 30px 60px 30px;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_main p {
  color: #FFF;
}

.drinkBlock .drinkFlexbox .drinkFlex_main .mainBox {
  display: flex;
  justify-content: left;
}

.drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01 {
  width: 70%;
  margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01 {
    position: relative;
    width: 100%;
  }
  .drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01::before {
    content: "";
    background-color: #fff;
    width: 108px;
    height: 162px;
    position: absolute;
    top: -40px;
    right: 0px;
    background: url(../images/cmn_logocircle.png) no-repeat center;
    background-size: contain;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01 .pic01 {
  width: 257px;
  height: 117px;
  background: url(../images/cmn_logoherb.png) no-repeat center;
  background-size: contain;
  margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01 .pic01 {
    width: 210px;
    height: 110px;
    margin-bottom: 60px;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01 p.title {
  display: inline;
  position: relative;
  font-weight: bold;
  font-size: 24px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01 p.title::before {
  content: "";
  background-color: #fff;
  width: 168px;
  height: 1px;
  position: absolute;
  top: 10px;
  right: -190px;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01 p.title::before {
    display: none;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01 p.content {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .txtBox01 p.content {
    font-size: 16px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .logo {
  width: 216px;
  height: 324px;
  background: url(../images/cmn_logocircle.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main .mainBox .logo {
    display: none;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_main .funBox {
  margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main .funBox {
    margin-bottom: 40px;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_main .funBox p.funTitle {
  display: inline;
  position: relative;
  font-weight: bold;
  font-size: 24px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.drinkBlock .drinkFlexbox .drinkFlex_main .funBox p.funTitle::before {
  content: "";
  background-color: #fff;
  width: 508px;
  height: 1px;
  position: absolute;
  top: 10px;
  right: -520px;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main .funBox p.funTitle::before {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main .funBox .spfun {
    font-size: 16px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
  }
}

.drinkBlock .drinkFlexbox .drinkFlex_main .funBox02 p.greentitle {
  display: inline;
  background-color: #10452A;
  font-size: 16px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1rem;
  padding: 4px 8px;
}

@media screen and (max-width: 768px) {
  .drinkBlock .drinkFlexbox .drinkFlex_main .funBox02 p {
    font-size: 14px;
    /*IE9以下で反映されるよう記述*/
    font-size: 0.875rem;
  }
}

.amazonBlock {
  background-color: #FFF;
  padding-top: 90px;
}

.amazonBlock .commonWrapper .commonImgtitle {
  margin: 60px auto 20px;
}

@media screen and (max-width: 768px) {
  .amazonBlock .commonWrapper .commonImgtitle {
    margin: 20px auto 20px;
    height: 100px;
  }
}

.amazonBlock .commonWrapper .commonImgtitle .imageBoxamazon {
  width: 100%;
  height: 0;
  padding-top: 24.49118%;
  background: url(../images/amazon_title.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .amazonBlock .commonWrapper p.textCenter {
    font-size: 16px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
    text-align: left;
  }
}

.amazonBlock .productWrapper {
  padding: 100px;
  box-sizing: border-box;
  background-color: #FFF;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper {
    padding: 60px 20px 120px 20px;
  }
}

.amazonBlock .productWrapper .productBox {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper .productBox {
    display: block;
  }
}

.amazonBlock .productWrapper .productBox .productPic {
  width: 40%;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper .productBox .productPic {
    width: 70%;
    margin: 0 auto 40px;
  }
}

.amazonBlock .productWrapper .productBox .productPic .picBoxwrap {
  width: 290px;
  height: 402.5px;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper .productBox .productPic .picBoxwrap {
    width: 90%;
    height: auto;
  }
}

.amazonBlock .productWrapper .productBox .productPic .picBoxwrap .pic01 {
  width: 100%;
  height: 0;
  padding-top: 138.7931%;
  background: url(../images/amazon_pic01.png) no-repeat center;
  background-size: contain;
}

.amazonBlock .productWrapper .productBox .productPic .picBoxwrap .pic02 {
  width: 100%;
  height: 0;
  padding-top: 138.7931%;
  background: url(../images/amazon_pic02.png) no-repeat center;
  background-size: contain;
}

.amazonBlock .productWrapper .productBox .productPic .picBoxwrap .pic03 {
  width: 100%;
  height: 0;
  padding-top: 138.7931%;
  background: url(../images/amazon_pic03.png) no-repeat center;
  background-size: contain;
}

.amazonBlock .productWrapper .productBox .productPic .picBoxwrap .pic04 {
  width: 100%;
  height: 0;
  padding-top: 138.7931%;
  background: url(../images/amazon_pic04.png) no-repeat center;
  background-size: contain;
}

.amazonBlock .productWrapper .productBox .productPic .picBoxwrap .pic05 {
  width: 100%;
  height: 0;
  padding-top: 138.7931%;
  background: url(../images/amazon_pic05.png) no-repeat center;
  background-size: contain;
}

.amazonBlock .productWrapper .productBox .productPic .picBoxwrap .pic06 {
  width: 100%;
  height: 0;
  padding-top: 138.7931%;
  background: url(../images/amazon_pic06.png) no-repeat center;
  background-size: contain;
}

.amazonBlock .productWrapper .productBox .productPic .picBoxwrap .pic07 {
  width: 100%;
  height: 0;
  padding-top: 138.7931%;
  background: url(../images/amazon_pic07.png) no-repeat center;
  background-size: contain;
}

.amazonBlock .productWrapper .productBox .productTxt {
  width: 60%;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper .productBox .productTxt {
    width: 100%;
  }
}

.amazonBlock .productWrapper .productBox .productTxt .mainTitle {
  margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper .productBox .productTxt .mainTitle {
    margin-bottom: 16px;
  }
}

.amazonBlock .productWrapper .productBox .productTxt .mainTitle p {
  color: #10452A;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper .productBox .productTxt .mainTitle p {
    line-height: 1.4;
    margin-top: 4px;
    margin-bottom: 4px;
  }
}

.amazonBlock .productWrapper .productBox .productTxt .mainTitle .brand {
  font-size: 13px;
  /*IE9以下で反映されるよう記述*/
  font-size: 0.8125rem;
}

.amazonBlock .productWrapper .productBox .productTxt .mainTitle .productTitle {
  font-size: 30px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.875rem;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper .productBox .productTxt .mainTitle .productTitle {
    font-size: 20px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1.25rem;
  }
}

.amazonBlock .productWrapper .productBox .productTxt .mainTitle .caption {
  font-size: 24px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.5rem;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper .productBox .productTxt .mainTitle .caption {
    font-size: 16px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
  }
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper .productBox .productTxt p.explanatory {
    font-size: 16px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1rem;
  }
}

.amazonBlock .productWrapper a.productLink {
  position: relative;
  display: block;
  width: 400px;
  padding: 30px 0px;
  background-color: #FD7E00;
  border-radius: 4px;
  margin: 60px auto 0;
  color: #FFF;
  font-size: 22px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.375rem;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
  transition: all 0.3s ease 0s;
  box-shadow: 1px 27px 58px -11px #b3b3b3;
}

@media screen and (max-width: 768px) {
  .amazonBlock .productWrapper a.productLink {
    width: 80%;
    margin: 30px auto 0;
    padding: 20px 0px;
    font-size: 20px;
    /*IE9以下で反映されるよう記述*/
    font-size: 1.25rem;
  }
}

.amazonBlock .productWrapper a.productLink:hover {
  background-color: #10452A;
}

.amazonBlock .productWrapper a.productLink::before {
  content: "";
  width: 26px;
  height: 26px;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -13px;
  background: url(../images/amazon_arrow.png) no-repeat center;
  background-size: contain;
  z-index: 999;
}

.amazonBlock .productWrapper:nth-child(even) {
  background-color: #FFFEF4;
}

.howtoBlock {
  width: 100%;
  background-color: #F9FFEB;
  padding: 120px 0;
}

@media screen and (max-width: 768px) {
  .howtoBlock {
    padding: 60px 0;
  }
}

.howtoBlock .commonTitle h3 {
  font-size: 22px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.375rem;
}

.howtoBlock ul.howtoList {
  margin-top: 50px;
  padding-left: 0;
}

.howtoBlock ul.howtoList li {
  padding: 30px 0 30px 100px;
  border-bottom: 2px dashed #10452A;
}

@media screen and (max-width: 768px) {
  .howtoBlock ul.howtoList li {
    padding: 12px 0 12px 60px;
  }
}

.howtoBlock ul.howtoList li:first-child {
  border-top: 2px dashed #10452A;
}

.howtoBlock ul.howtoList li:before {
  content: "";
  display: block;
  width: 40px;
  height: 39px;
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -18px;
  background: url(../images/howto_pic01.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .howtoBlock ul.howtoList li:before {
    top: 17px;
    left: 10px;
    margin-top: 0px;
  }
}

.cautionBlock {
  padding: 100px 0;
  background-color: #FFF;
}

@media screen and (max-width: 768px) {
  .cautionBlock {
    padding: 60px 0;
  }
}

.cautionBlock .commonTitle h2 {
  font-size: 30px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.875rem;
}

.cautionBlock .commonTitle p {
  font-size: 11px;
  /*IE9以下で反映されるよう記述*/
  font-size: 0.6875rem;
}

.cautionBlock .listBlock {
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .cautionBlock .listBlock {
    margin-top: 30px;
  }
}

.cautionBlock .listBlock h3 {
  position: relative;
  color: #10452A;
  font-size: 22px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1.375rem;
  padding-left: 20px;
  font-weight: bold;
}

.cautionBlock .listBlock h3:before {
  content: "";
  display: block;
  background-color: #10452A;
  width: 3px;
  height: 35px;
  position: absolute;
  top: -2px;
  left: 0px;
}

.cautionBlock .listBlock ul {
  padding-left: 0;
}

.cautionBlock .listBlock ul li {
  position: relative;
  padding: 8px 0 8px 30px;
  font-size: 16px;
  /*IE9以下で反映されるよう記述*/
  font-size: 1rem;
}

@media screen and (max-width: 768px) {
  .cautionBlock .listBlock ul li {
    font-size: 14px;
    /*IE9以下で反映されるよう記述*/
    font-size: 0.875rem;
  }
}

.cautionBlock .listBlock ul li:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 18px;
  left: 10px;
  background: url(../images/caution_pic01.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .cautionBlock .listBlock ul li:before {
    content: "";
    top: 17px;
  }
}

@media screen and (max-width: 768px) {
  .footBlock {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .footBlock .commonFlex_sub {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-top: 78.45745%;
    background: url(../images/cmn_bg01.png) no-repeat center;
    background-size: cover;
  }
}

.footBlock .commonFlex_sub .subWrap {
  padding: 100px 40px 0px;
}

@media screen and (max-width: 768px) {
  .footBlock .commonFlex_sub .subWrap {
    position: absolute;
    top: 0px;
    display: block;
    width: 100%;
    padding: 30px 20px 0px;
  }
}

.footBlock .commonFlex_sub .subWrap .imageBox {
  width: 278px;
  height: 138px;
  margin: 0 0 20px 0;
}

@media screen and (max-width: 768px) {
  .footBlock .commonFlex_sub .subWrap .imageBox {
    width: 139px;
    height: 69px;
  }
}

.footBlock .commonFlex_sub .subWrap .imageBox .footpic01 {
  padding-top: 49.64029%;
  background: url(../images/cmn_logoherb.png) no-repeat center;
  background-size: contain;
}

.footBlock .commonFlex_sub .subWrap .txtBox p {
  color: #FFF;
  font-size: 14px;
  /*IE9以下で反映されるよう記述*/
  font-size: 0.875rem;
}

@media screen and (max-width: 768px) {
  .footBlock .commonFlex_sub .subWrap .txtBox p {
    margin: 0 4px 0 0;
  }
}

.footBlock .commonFlex_sub .subWrap .snsBox {
  margin: 20px 0;
  text-align: left;
}

.footBlock .commonFlex_sub .subWrap p.copy {
  font-size: 12px;
  /*IE9以下で反映されるよう記述*/
  font-size: 0.75rem;
  color: #FFF;
}

@media screen and (max-width: 768px) {
  .footBlock .commonFlex_main {
    display: none;
  }
}

.footBlock .commonFlex_main .map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 55%;
}

.footBlock .commonFlex_main .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.spfootBlock {
  display: none;
}

@media screen and (max-width: 768px) {
  .spfootBlock {
    display: block;
  }
}

.spfootBlock .spmapWrap .map iframe {
  width: 100%;
}

.spfootBlock .spfooterGreen {
  width: 100%;
  height: 370px;
  background: url(../images/cmn_bg01.png) no-repeat center;
  background-size: cover;
  padding: 50px 20px 20px 20px;
  box-sizing: border-box;
}

.spfootBlock .spfooterGreen .imageBox {
  width: 278px;
  height: 138px;
  margin: 0 0 20px 0;
}

@media screen and (max-width: 768px) {
  .spfootBlock .spfooterGreen .imageBox {
    width: 200px;
    height: 100px;
  }
}

.spfootBlock .spfooterGreen .imageBox .footpic01 {
  padding-top: 49.64029%;
  background: url(../images/cmn_logoherb.png) no-repeat center;
  background-size: contain;
}

.spfootBlock .spfooterGreen .txtBox {
  margin-top: 30px;
}

.spfootBlock .spfooterGreen .txtBox p {
  color: #FFF;
  line-height: 1.2;
  font-size: 14px;
  /*IE9以下で反映されるよう記述*/
  font-size: 0.875rem;
  margin-bottom: 10px;
}

.spfootBlock .spfooterGreen .snsBox {
  text-align: center;
}

.spfootBlock .spfooterGreen .snsBox a {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: 20px auto 10px;
}

.spfootBlock .spfooterGreen .snsBox .twitter {
  margin: 0px 5px 0px 5px;
  background: url(../images/kv_sns01.png) no-repeat center;
  background-size: contain;
}

.spfootBlock .spfooterGreen .snsBox .facebook {
  margin: 0px 5px 0px 5px;
  background: url(../images/kv_sns02.png) no-repeat center;
  background-size: contain;
}

.spfootBlock .spfooterGreen p.copy {
  color: #FFF;
  text-align: center;
}

.spMenu .uk-offcanvas-bar {
  width: 340px;
  color: rgba(255, 255, 255, 0.1) !important;
}

.spMenu .menulistBlock {
  margin-top: 80px !important;
}

.spMenu .menulistBlock ul li {
  padding-bottom: 20px;
}

.uk-navbar-toggle {
  display: none;
}

.uk-navbar-right {
  position: fixed;
  z-index: -999;
}

@media screen and (max-width: 768px) {
  .uk-navbar-right {
    position: fixed;
    right: 0;
    z-index: 999;
    background-color: rgba(13, 105, 50, 0.7);
  }
  .uk-navbar-right .sptoggleLink svg rect {
    fill: #FFF !important;
  }
}

.uk-offcanvas-close {
  width: 80px;
  height: 80px;
}

.linkwhite {
  color: #FFF;
}

.linkwhite a {
  color: #FFF !important;
}