@charset "utf-8";


/************************************************************
共通
************************************************************/

#wrapper a,
#wrapper a img,
#wrapper a span {
  transition: opacity .3s ease-in;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
#wrapper {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.pagetop {
	position:fixed;
	right:30px;
	bottom:30px;
	z-index:100;
}

@media all and (min-width: 751px) and (max-width: 1350px) {
  .container__inner {
    padding-top: 119px
  }
}
@media screen and (max-width: 640px) {
  .pagetop {
    position:fixed;
    right:15px;
    bottom:65px;
    z-index:19999;
    width:30px;
  }
}

.txt-hiddden {
  display: none;
}

@media screen and (min-width: 751px) {
  .u-disp-pc {
    display: block;
  }

  .u-disp-sp {
    display: none;
  }
}

@media screen and (max-width: 750px) {
  .u-disp-pc {
    display: none;
  }

  .u-disp-sp {
    display: block;
  }
}

/* .c-tit
---------------------------------------------------------- */
.c-tit {
  text-align: center;
}

.c-tit .tit_ja {
  display: block;
  color: #3a1409;
  font-size: 28px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.c-tit .tit_en {
  display: block;
  color: #3a1409;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  background: -ms-linear-gradient(90deg, #dcb298 40%, #877977 60%);
  background: -webkit-linear-gradient(90deg, #dcb298 40%, #877977 60%);
  background: linear-gradient(90deg, #dcb298 40%, #877977 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.organic_top .c-tit .tit_en {
  background: linear-gradient(90deg, #3a1409 30%, #cc8b5d 60%);
  background: -ms-linear-gradient(90deg, #3a1409 30%, #cc8b5d 60%);
  background: -webkit-linear-gradient(90deg, #3a1409 30%, #cc8b5d 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media all and (-ms-high-contrast: none) {

  /* IE10,11用 */
  .c-tit .tit_en,
  .organic_top .c-tit .tit_en {
    background: none;
  }
}

@media screen and (max-width: 750px) {

  .c-tit .tit_en {
    font-size: 13px;
  }

}


/* .btn.detail
---------------------------------------------------------- */
.btn.detail {
  position: relative;
  display: block;
  width: 290px;
  margin-left: auto;
  margin-right: auto;
  padding: 9px 0;
  color: #004839;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
  border: 1px solid #004839;
}

.btn.detail.brown {
  color: #6e2615;
  border: 1px solid #6e2615;
}

.btn.detail::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px;
  margin: auto 12px auto 0;
  padding-top: 5px;
  background: url(../img/common/btn/icon_detail_green.png) no-repeat center;
  background-size: contain;
}

.btn.detail.brown::before {
  background-image: url(../img/common/btn/icon_detail_brown.png);
}

/* .btn.recipe
---------------------------------------------------------- */
.btn.recipe {
  position: relative;
  display: block;
  width: 290px;
  margin-left: auto;
  margin-right: auto;
  padding: 13px 0 12px;
  color: #fff;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
  line-height: 1.25;
  background-color: #004839;
}

.btn.recipe.brown {
  background-color: #6e2615;
}

.btn.recipe::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 5px;
  margin: auto 12px auto 0;
  background: url(../img/common/btn/icon_detail.png) no-repeat center;
  background-size: contain;
}

/************************************************************
#wrapper
************************************************************/


/************************************************************
header
************************************************************/

.headerWrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  padding: 32px 35px;
  border-bottom: 0;
  background: #fff;
}

header::after {
  content: "";
  display: block;
  clear: both;
}

@media screen and (max-width: 750px) {

  header {
    padding: 3.466% 0;
    background-color: #fff !important;
  }

}

/* .logo
---------------------------------------------------------- */
header .logo {
  width: 160px;
  float: left;
}

@media screen and (max-width: 860px) {

  header .logo {
    width: 18.604%;
  }

}

@media screen and (max-width: 750px) {

  .headerWrapper {
    z-index: 10001;
  }

  header .logo {
    width: 26.133%;
    margin-top: 0;
    padding: 0 0 0 3.333%;
  }

}

/* .headerList
---------------------------------------------------------- */
.headerList {
  display: flex;
  flex-wrap: wrap;
  width: 74.728%;
  max-width: 820px;
  float: left;
  margin: 0 0 0 3.395%;
}

.headerList::after {
  clear: both;
  content: "";
  display: block;
}

.headerList .list__item {
  position: relative;
  margin-right: 2.375%;
}

.headerList .list__item:last-child {
  margin-right: 0;
}

.headerList .list__item.onlineshop {
  margin-top: 0;
}

.headerList .list__item.aboutTanitaCafe {
  margin-top: 0;
}

.headerList .list__item.developersVoice {
  margin-top: 0;
}

.headerList .list__link {
  position: relative;
  display: block;
  color: #3a1409;
  font-size: 14px;
  font-size: 1.024vw;
}

.headerList .list__item.current>.list__link::before,
.headerList>.list__item:hover>.list__link::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  z-index: 1;
  width: 100%;
  height: 0;
  border-bottom: 1px solid #3a1409;
}

@media screen and (min-width: 1366px) {
  .headerList {
    margin-left: 44px;
  }

  .headerList .list__link {
    font-size: 14px;
  }
}

@media screen and (max-width: 860px) {

  .headerList .list__item {
    margin-right: 2.375%;
  }

}

@media screen and (max-width: 750px) {

  .headerList {
    display: none;
  }

}


/* .dropMenuList
---------------------------------------------------------- */
.headerList .dropMenuList {
  display: none;
  position: absolute;
  top: 20px;
  width: 216px;
  padding-top: 14px;
}

.headerList>.list__item:hover .dropMenuList {
  display: block;
}

.headerList .dropMenuList a {
  display: block;
  padding: 17px 26px;
  border-top: 1px solid #3a1409;
  background-color: #fff;
}

.headerList .dropMenuList li:first-child a {
  border-top: 0;
}

@media screen and (max-width: 860px) {

  .headerList .dropMenuList a {
    padding: 7.878% 12.049%;
  }

}

/* .menu-trigger
---------------------------------------------------------- */
.menu-trigger {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 6.133%;
  height: 0;
  padding-top: 6.666%;
  margin: auto 7.066% auto 0;
  background: url(../img/common/header/menu.png) no-repeat center;
  background-size: cover;
}

.menu-trigger.open {
  width: 3.066%;
  padding-top: 3.066%;
  background: url(../img/common/header/menu_close.png) no-repeat center;
  background-size: cover;
}

.headerWrapper .gnavWrap {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0 0 20%;
  background: #fff;
  z-index: 10001;
}

.headerWrapper .gnav {
  position: static;
  display: block;
  padding-bottom: 0;
}

.headerWrapper .gnav-list {
  position: static;
  margin: 0 17px;
  letter-spacing: 0;
  border-top: 1px solid #3a1409;
}

.headerWrapper .gnav-item {
  position: relative;
  display: block;
  margin: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.43;
  letter-spacing: 1.5px;
  vertical-align: top;
  border-bottom: 1px solid #3a1409;
}

.headerWrapper .gnav-item a::before,
.headerWrapper .gnav-item span::before,
.headerWrapper .gnav-item span::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 5.865%;
  height: 0;
  margin: auto 13px auto 0;
  padding-top: 1.759%;
  background: url(../img/common/header/icon_navi.png) no-repeat center;
  background-size: cover;
}

.headerWrapper .gnav-item.recipe span::before {
  width: 4.398%;
  padding-top: 0;
  border-top: 1px solid #3a1409;
  background: transparent;
}

.headerWrapper .gnav-item span::after {
  right: 5px;
  width: 1px;
  height: 15px;
  padding-top: 0;
  border-left: 1px solid #3a1409;
  background: transparent;
}

.headerWrapper .open.gnav-item span::after {
  border-left: 0;
}

.headerWrapper .gnav-item a,
.headerWrapper .gnav-item span {
  position: relative;
  display: block;
  padding: 24px 0 24px 13px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.headerWrapper .gnav-item.act:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 44px;
  background: #e50012;
}

.headerWrapper .gnav-item .dropMenuList {
  display: none;
}

.headerWrapper .gnav-item .dropMenuList li {
  border-top: 1px solid #3a1409;
}

.closeBtn {
  position: relative;
  width: 62.133%;
  margin: 8.8% auto 0;
  padding: 1px;
  background-image: linear-gradient(4deg, #ad744b, #e3d59e);
  background-image: -ms-linear-gradient(4deg, #ad744b, #e3d59e);
  background-image: -webkit-linear-gradient(4deg, #ad744b, #e3d59e);
}

.closeBtn .closeBtn__txt {
  position: relative;
  display: block;
  padding: 14px 0;
  color: #3a1409;
  font-size: 14px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
  background-color: #fff;
}

.closeBtn .closeBtn__txt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 4.936%;
  margin: auto 11.256% auto 0;
  padding-top: 4.936%;
  background: url(../img/common/header/menu_close.png) no-repeat center;
  background-size: contain;
}

#overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.70);
  z-index: 10000;
}


/************************************************************
footer
************************************************************/

#footerWrapper {
  padding: 0 35px 72px;
}

footer {
  max-width: 1000px;
  margin: 95px auto 0;
}

@media screen and (max-width: 750px) {

  #footerWrapper {
    padding: 0 0 32px;
  }

  footer {
    width: 70.133%;
    margin: 13.066% auto 0;
  }

}

/* .footerTop
---------------------------------------------------------- */
.footerTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid #6f534b;
}

.footerTop .footer__companyName {
  width: 220px;
  font-size: 20px;
}

.footerTop .footer__companyName a {
  color: #3a1409;
}

.footer__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 176px;
}

.footer__share .share__txt {
  position: relative;
  width: 78px;
  padding: 6px 0 5px;
  color: #3a1409;
  font-size: 14px;
}

.footer__share .share__txt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 1px;
  height: 32px;
  background-color: #3a1409;
}

@media screen and (max-width: 750px) {

  .footerTop {
    display: block;
  }

  .footerTop .footer__companyName {
    width: 100%;
    font-size: 15px;
    text-align: center;
  }

  .footer__share {
    justify-content: center;
    width: 100%;
    margin-top: 2.95%;
  }

  .footer__share .share__txt {
    width: 57px;
    padding: 6px 0 5px;
    color: #3a1409;
    font-size: 10px;
  }

}

/* .snsList
---------------------------------------------------------- */
.footer__share .snsList {
  width: 80px;
  margin-left: 18px;
}

.footer__share .snsList::after {
  content: "";
  display: block;
  clear: both;
}

.footer__share .snsList .list__item {
  float: left;
  margin-left: 18px;
}

.footer__share .snsList .list__item:first-child {
  margin-left: 0;
}

.footer__share .snsList .list__item.twitter {
  width: 32px;
}

.footer__share .snsList .list__item.facebook {
  width: 30px;
}

@media screen and (max-width: 750px) {

  .footer__share .snsList {
    width: 19.672%;
    margin-left: 5.245%;
  }

  .footer__share .snsList .list__item {
    margin-left: 22.407%;
  }

  .footer__share .snsList .list__item.twitter {
    width: 40.013%;
  }

  .footer__share .snsList .list__item.facebook {
    width: 37.512%;
  }

}

/* .footerBottom
---------------------------------------------------------- */
.footerBottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-top: 32px;
  border-top: 1px solid #cac0bd;
}

.footer__list .list__item {
  display: inline-block;
  vertical-align: top;
  margin-left: 11px;
}

.footer__list .list__item:first-child {
  margin-left: 0;
}

.footer__list a {
  color: #3a1409;
  font-size: 12px;
}

.copyright {
  color: #3a1409;
  font-size: 10px;
}

@media screen and (max-width: 750px) {

  .footerBottom {
    justify-content: center;
    padding-top: 16px;
  }

  .footer__list {
    width: 244px;
    margin: 0 auto;
    text-align: center;
  }

  .footer__list .list__item {
    margin-left: 18px;
  }

  .footer__list a {
    font-size: 10px;
  }

  .copyright {
    margin: 8px 0 0;
    font-size: 10px;
    line-height: 1.8;
    text-align: center;
  }

}

/************************************************************
#container
************************************************************/

/* .inner
---------------------------------------------------------- */
.inner {
  width: 87.847%;
  min-width: 700px;
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 750px) {

  .inner {
    width: 78.666%;
    min-width: initial;
    min-width: auto;
    max-width: none;
  }

}


/************************************************************
.mainVisual
************************************************************/

.mainVisual {
  position: relative;
  background-image: url(../img/top/mainVisual/bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.mainVisual__inner {
  position: relative;
  width: 85.847%;
  max-width: 1020px;
  margin: 0 auto;
  padding-bottom: 12px;
}

@media screen and (max-width: 750px) {

  .mainVisual {
    background: transparent;
  }

  .mainVisual__inner {
    position: relative;
    width: 78.666%;
    padding-bottom: 0;
  }

  .mainVisual__bg {
    position: relative;
    width: 100%;
    padding-top: 72.8%;
    background-image: url(../img/top/mainVisual/bg_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

}

/* .mainVisual__txtWrap
---------------------------------------------------------- */

.mainVisual__txtWrap {
  padding: 19.75% 0 0;
}

.mainVisual .mainVisual__txt {
  width: 36.5%;
  margin-left: 0;
  padding-top: 13.833%;
  background-image: url(../img/top/mainVisual/main_text.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .mainVisual__txtWrap {
    margin-top: 10.17%;
    padding-top: 0;
  }

  .mainVisual .mainVisual__txt {
    width: 100%;
    margin: 0;
    padding-top: 35.765%;
    background-image: url(../img/top/mainVisual/main_text_sp.png);
  }

}


/* .mainVisual__item
---------------------------------------------------------- */
.mainVisual__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 83.334%;
  max-width: 184px;
  margin: 4.666% 0 0 11.666%;
}

.mainVisual__item .item__txt {
  width: 20.9%;
  padding-top: 3.6%;
  background-image: url(../img/top/mainVisual/text_lineup.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.mainVisual__item .item__img {
  width: 40%;
  margin-left: 3%;
  padding-top: 21.4%;
  background-image: url(../img/developersVoice/developersMainVisual/img_item.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .mainVisual__item {
    display: block;
    width: 100%;
    margin: 10.797% 0 0 27.797%;
  }

  .mainVisual__item .item__txt {
    width: 100%;
    padding-top: 25.086%;
    background-image: url(../img/top/mainVisual/text_lineup_sp.png);
  }

  .mainVisual__item .item__img {
    width: 90%;
    margin: 0 auto;
    padding-top: 41.358%;
    background-image: url(../img/organic/organicMainVisual/img_item_sp.png);
  }

}


/* .bg_almond .mainVisual .bg_soy
---------------------------------------------------------- */
.mainVisual .bg_almond {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 19.5%;
  margin: 5.416% 0 0 31.333%;
  padding-top: 13.416%;
  background-image: url(../img/top/mainVisual/bg_almond.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.mainVisual .bg_soy {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 38.333%;
  margin: 30.417% 0 0 -25.167%;
  padding-top: 38.333%;
  background-image: url(../img/top/mainVisual/bg_soy.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .mainVisual .bg_almond {
    left: auto;
    right: 0;
    width: 42.375%;
    margin: -23.73% -13.56% 0 0;
    padding-top: 31.697%;
    background-image: url(../img/top/mainVisual/bg_almond_sp.png);
  }

  .mainVisual .bg_soy.pc {
    display: none;
  }

  .mainVisual .bg_soy.sp {
    position: absolute;
    top: auto;
    left: 0;
    bottom: 0;
    width: 44.07%;
    margin: 0 0 44.748% -13.56%;
    padding-top: 50.85%;
    background-image: url(../img/top/mainVisual/bg_soy_sp.png);
  }

}


/************************************************************
.mainContents
************************************************************/
.mainContents {
  position: relative;
}

.mainContents__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  transform: skewY(-6deg);
  -webkit-transform: skewY(-6deg);
}

.contentsBlock {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-items: center;
  padding: 14% 0;
}

@media screen and (max-width: 750px) {
  .mainContents {
    transform: skewY(-6deg);
    -webkit-transform: skewY(-6deg);
  }

  .contentsBlock {
    padding: 11.2% 0 8.533%;
  }

  .mainContents .inner {
    width: 100%;
    transform: skewY(6deg);
    -webkit-transform: skewY(6deg);
  }

}

/* .txtBlock
---------------------------------------------------------- */
.mainContents .txtBlock {
  position: relative;
  z-index: 1;
  width: 36.5%;
  margin: -6.667% 8.166% 0 8.166%;
}

.mainContents .txtBlock__tit {
  color: #3a1409;
  text-align: center;
  line-height: 1.666;
}

.mainContents .txtBlock__tit .tit_s {
  display: block;
  font-size: 19px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.mainContents .txtBlock__tit .tit_l {
  display: block;
  margin-top: 5px;
  font-size: 24px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.txtBlock__txt {
  margin: 6.849% 0 0;
  color: #3a1409;
  font-size: 16px;
  line-height: 2.312;
}

@media screen and (max-width: 750px) {

  .mainContents .txtBlock {
    width: 100%;
    margin: 0;
  }

  .mainContents .txtBlock__tit .tit_s {
    font-size: 16px;
  }

  .mainContents .txtBlock__tit .tit_l {
    margin-top: 0;
    font-size: 20px;
  }

  .txtBlock__txt {
    width: 78.666%;
    margin: 8% auto 0;
    font-size: 13px;
    line-height: 1.923;
  }

}

/* .imgBlock
---------------------------------------------------------- */
.mainContents .imgBlock {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 47.084%;
  margin: -1.5% 0 0;
  padding-top: 49.417%;
  background-image: url(../img/top/organic/item.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media screen and (max-width: 750px) {

  .mainContents .imgBlock.pc {
    display: none;
  }

  .mainContents .imgBlock.sp {
    position: static;
    width: 91.2%;
    margin: 5.866% auto 0;
    padding-top: 59.866%;
    background-image: url(../img/top/organic/item_sp.png);
  }

}

/* .btnBlock
---------------------------------------------------------- */
.btnBlock {
  position: relative;
  z-index: 1;
  margin: 9.132% 0 0;
}

.btnList {
  display: flex;
  flex-wrap: wrap;
}

.btnList .list__item {
  width: 45.664%;
  margin-left: 4.109%;
}

.btnList .list__item:first-child {
  margin-left: 0;
}

.btnList a {
  position: relative;
  display: block;
  padding: 10px 0;
  text-align: center;
  background-color: #004839;
}

.btnList .btn__txt {
  display: block;
  position: relative;
  color: #fff;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.btnList .detail .btn__txt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 10%;
  height: 5px;
  margin: auto 10% auto 0;
  background: url(../img/common/btn/icon_detail.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 1200px) {

  .btnList .btn__txt {
    font-size: 13px;
  }

}

@media screen and (max-width: 1000px) {

  .btnList {
    display: block;
  }

  .btnList .list__item {
    width: 63%;
    margin-top: 4%;
    margin-left: auto;
    margin-right: auto;
  }

  .btnList .list__item:first-child {
    margin-top: 0;
    margin-left: auto;
  }

  .btnList .btn__txt {}

}

@media screen and (max-width: 750px) {

  .btnBlock {
    margin: 9.6% 0 0;
  }

  .btnList {
    display: block;
  }

  .btnList .list__item:first-child {
    margin: 0 auto 5.333%;
  }

  .btnList .list__item {
    width: 48.8%;
    margin: 0 auto;
  }

  .btnList .btn__txt {
    font-size: 14px;
  }

}

/************************************************************
.organic
************************************************************/
.mainContents.organic {
  margin: 5.856% 0 0;
}

.mainContents.organic .mainContents__bg {
  background-image: linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(140, 175, 164, .6) 57%, rgba(51, 108, 95, .6) 88%);
  background-image: -ms-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(140, 175, 164, .6) 57%, rgba(51, 108, 95, .6) 88%);
  background-image: -webkit-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(140, 175, 164, .6) 57%, rgba(51, 108, 95, .6) 88%);
}

@media screen and (max-width: 750px) {
  .mainContents.organic .mainContents__bg {
    display: none;
  }

  .mainContents.organic {
    margin: 12.933% 0 0;
    background-image: linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -ms-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -webkit-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);

  }


}

@media screen and (min-width: 1366px) {

  .mainContents.organic {
    margin: 80px 0 0;
  }

  .mainContents.organic::after {
    padding-top: 839px;
  }

}

/* .mainContents.organic .contentsBlock
---------------------------------------------------------- */
.mainContents.organic .contentsBlock::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 10.25%;
  height: 0;
  margin: 10.833% -4.166% 0 0;
  padding-top: 19.75%;
  background-image: url(../img/top/organic/bg_text.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .mainContents.organic .contentsBlock::before {
    width: 13.466%;
    margin: 17% 0 0 0;
    padding-top: 25.2%;
    background-image: url(../img/top/organic/bg_text_sp.png);
  }

}

/* .mainContents.organic .bg_soy
---------------------------------------------------------- */
.mainContents.organic .bg_soy {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 36.667%;
  height: 0;
  margin: -6.916% 0 0 -12.916%;
  padding-top: 25%;
  background-image: url(../img/top/organic/bg_soy.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .mainContents.organic .bg_soy {
    width: 40%;
    margin: -10.666% 0 0 0;
    padding-top: 38.666%;
    background-image: url(../img/top/organic/bg_soy_sp.png);
  }

}


/************************************************************
.almondMilk
************************************************************/
.mainContents.almondMilk {
  margin-top: 7.027%;
}

.mainContents.almondMilk .mainContents__bg {
  transform: skewY(-6deg);
  -webkit-transform: skewY(-6deg);
  background-image: linear-gradient(4deg, rgba(110, 38, 21, .6) 16%, rgba(183, 144, 135, .6) 37%, rgba(255, 249, 248, .6) 97%);
  background-image: -ms-linear-gradient(4deg, rgba(110, 38, 21, .6) 16%, rgba(183, 144, 135, .6) 37%, rgba(255, 249, 248, .6) 97%);
  background-image: -webkit-linear-gradient(4deg, rgba(110, 38, 21, .6) 16%, rgba(183, 144, 135, .6) 37%, rgba(255, 249, 248, .6) 97%);
}

.mainContents.almondMilk .inner {}

@media screen and (max-width: 750px) {

  .mainContents.almondMilk {
    margin-top: 17.866%;
    background-image: linear-gradient(4deg, rgba(110, 38, 21, .6) 11%, rgba(183, 144, 135, .6) 34%, rgba(255, 249, 248, .6) 100%);
    background-image: -webkit-linear-gradient(4deg, rgba(110, 38, 21, .6) 11%, rgba(183, 144, 135, .6) 34%, rgba(255, 249, 248, .6) 100%);
    background-image: -ms-linear-gradient(4deg, rgba(110, 38, 21, .6) 11%, rgba(183, 144, 135, .6) 34%, rgba(255, 249, 248, .6) 100%);
  }

  .mainContents.almondMilk .mainContents__bg {
    display: none;
  }

}

@media screen and (min-width: 1366px) {

  .mainContents.almondMilk {
    margin-top: 96px;
  }

  .mainContents.almondMilk::after {
    padding-top: 833px;
  }

}


/* .mainContents.almondMilk .contentsBlock
---------------------------------------------------------- */
.mainContents.almondMilk .contentsBlock {
  flex-direction: initial;
  flex-direction: row;
  padding: 7.833% 0;
}

.mainContents.almondMilk .contentsBlock::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 8.333%;
  height: 0;
  margin: 5.666% 0 0 -4.166%;
  padding-top: 47.917%;
  background-image: url(../img/top/almondMilk/bg_text.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .mainContents.almondMilk .contentsBlock::before {
    width: 13.333%;
    margin: 14.133% 0 0 0;
    padding-top: 76.666%;
  }

}

/* .txtBlock
---------------------------------------------------------- */
.mainContents.almondMilk .txtBlock {
  width: 36.5%;
  margin: 3.333% 12% 0 8.166%;
}

@media screen and (max-width: 750px) {

  .mainContents.almondMilk .txtBlock {
    width: 100%;
    margin: 0;
  }

}

/* .btnBlock
---------------------------------------------------------- */
.mainContents.almondMilk .btnList a {
  background-color: #6e2615;
}

/* .imgBlock
---------------------------------------------------------- */
.mainContents.almondMilk .imgBlock {
  left: auto;
  right: 0;
  width: 43.334%;
  margin: 13px 0 0;
  width: 43.334%;
  margin: 1% 0 0;
  padding-top: 47%;
  background-image: url(../img/top/almondMilk/item.png);
}

@media screen and (max-width: 750px) {

  .mainContents.almondMilk .imgBlock.sp {
    width: 91.2%;
    margin: 5.866% auto 0;
    padding-top: 59.866%;
    background-image: url(../img/top/almondMilk/item_sp.png);
  }

}

/* .mainContents.almondMilk .bg_almond
---------------------------------------------------------- */
.mainContents.almondMilk .bg_almond {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 33.333%;
  height: 0;
  margin: -5.166% -9.166% 0 0;
  padding-top: 25%;
  background-image: url(../img/top/almondMilk/bg_almond.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .mainContents.almondMilk .bg_almond {
    width: 36.933%;
    margin: -13.333% 0 0 0;
    padding-top: 36%;
    background-image: url(../img/top/almondMilk/bg_almond_sp.png);
  }

}

/************************************************************
.onlineshop
************************************************************/
.onlineshop {
  margin: 8.784% 0 0;
}

@media screen and (max-width: 750px) {

  .onlineshop {
    margin: 18.933% 0 0;
  }

}

@media screen and (min-width: 1366px) {

  .onlineshop {
    margin: 120px 0 0;
  }

}

/* .inner
---------------------------------------------------------- */
.onlineshop .inner {
  width: 73.206%;
  max-width: 1000px;
}

@media screen and (max-width: 750px) {

  .onlineshop .inner {
    width: 78.666%;
  }

}


/* .onlineshopContents
---------------------------------------------------------- */
.onlineshopContents {
  display: flex;
  flex-wrap: wrap;
  margin-top: 41px;
}

@media screen and (max-width: 750px) {

  .onlineshopContents {
    display: block;
    margin-top: 7.458%;
  }

}


/* .onlineshopContents__txtWrap
---------------------------------------------------------- */
.onlineshopContents__txtWrap {
  width: 44%;
}

.onlineshopContents__txt {
  color: #3a1409;
  font-size: 16px;
  line-height: 1.937;
}

@media screen and (max-width: 750px) {

  .onlineshopContents__txtWrap {
    width: 100%;
  }

  .onlineshopContents__txt {
    font-size: 13px;
    line-height: 1.923;
  }

}

/* .onlineshopContents__bnrWrap
---------------------------------------------------------- */
.onlineshopContents__bnrWrap {
  width: 47.5%;
  margin-left: 8.3%;
}

.onlineshopContents__bnrList {
  display: flex;
  flex-wrap: wrap;
}

.onlineshopContents__bnrList .list__item {
  width: 48.422%;
}

.onlineshopContents__bnrList .list__item:nth-child(2n) {
  margin-left: 3.158%;
}

.onlineshopContents__bnrList .list__item:nth-child(n + 3) {
  margin-top: 3.158%;
}

@media screen and (max-width: 750px) {

  .onlineshopContents__bnrWrap {
    width: 100%;
    margin: 8.136% auto 0;
  }

  .onlineshopContents__bnrList .list__item {
    width: 48.659%;
  }

  .onlineshopContents__bnrList .list__item:nth-child(2n) {
    margin-left: 2.656%;
  }

}


/************************************************************
.aboutTanitaCafe
************************************************************/

.aboutTanitaCafe {
  margin-top: 8.052%;
}

@media screen and (max-width: 750px) {

  .aboutTanitaCafe {
    margin-top: 11.733%;
  }

}

@media screen and (min-width: 1366px) {

  .aboutTanitaCafe {
    margin-top: 110px;
  }

}

/* .inner
---------------------------------------------------------- */
.aboutTanitaCafe .inner {
  width: 73.206%;
  max-width: 1000px;
}

@media screen and (max-width: 750px) {

  .aboutTanitaCafe .inner {
    width: 78.666%;
  }

}

/* .aboutTanitaCafeContents
---------------------------------------------------------- */
.aboutTanitaCafeContents {
  display: flex;
  flex-wrap: wrap;
  margin-top: 41px;
}

@media screen and (max-width: 750px) {

  .aboutTanitaCafeContents {
    display: block;
    margin-top: 6.78%;
  }

}

/* .aboutTanitaCafeContents__txtWrap
---------------------------------------------------------- */
.aboutTanitaCafeContents__txtWrap {
  width: 47.2%;
}

.aboutTanitaCafeContents__txt {
  color: #3a1409;
  font-size: 16px;
  line-height: 1.937;
}

@media screen and (max-width: 750px) {

  .aboutTanitaCafeContents__txtWrap {
    width: 100%;
  }

  .aboutTanitaCafeContents__txt {
    font-size: 13px;
    line-height: 1.923;
  }

}

/* .aboutTanitaCafeContents__bnrList
---------------------------------------------------------- */
.aboutTanitaCafeContents__bnrList {
  margin-top: 32px;
}

.aboutTanitaCafeContents__bnrList .list__item {
  margin-top: 15px;
}

.aboutTanitaCafeContents__bnrList .list__item:first-child {
  margin-top: 0;
}

@media screen and (max-width: 750px) {

  .aboutTanitaCafeContents__bnrList {
    margin-top: 8.136%;
  }

  .aboutTanitaCafeContents__bnrList .list__item {
    margin-top: 4.915%;
  }

}

/* .aboutTanitaCafeContents__imgWrap
---------------------------------------------------------- */
.aboutTanitaCafeContents__imgWrap {
  width: 47.5%;
  margin-left: 4.8%;
  padding-top: 33.4%;
  background-image: url(../img/top/aboutTanitaCafe/img_tanita_cafe.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media screen and (max-width: 750px) {

  .aboutTanitaCafeContents__imgWrap {
    width: 89.158%;
    margin: 10.17% auto 0;
    padding-top: 60.004%;
    background-image: url(../img/top/aboutTanitaCafe/img_tanita_cafe_sp.jpg);
  }

}


/************************************************************
.developersVoice
************************************************************/

#developersVoice.developersVoice {
  margin-top: 8.052%;
}

@media screen and (max-width: 750px) {

  #developersVoice.developersVoice {
    margin-top: 16%;
  }

}

@media screen and (min-width: 1366px) {

  #developersVoice.developersVoice {
    margin-top: 110px;
  }

}

/* .inner
---------------------------------------------------------- */
.developersVoice .inner {
  width: 73.206%;
  max-width: 1000px;
}

@media screen and (max-width: 750px) {

  .developersVoice .inner {
    width: 78.666%;
  }

}

/* .developersVoiceContents
---------------------------------------------------------- */
.developersVoiceContents {
  display: flex;
  flex-wrap: wrap;
  margin-top: 41px;
}

@media screen and (max-width: 750px) {

  .developersVoiceContents {
    display: block;
    margin-top: 6.78%;
  }

}

/* .developersVoiceContents__txtWrap
---------------------------------------------------------- */
.developersVoiceContents__txtWrap {
  width: 47.2%;
}

.developersVoiceContents__txt {
  color: #3a1409;
  font-size: 16px;
  line-height: 1.937;
}

@media screen and (max-width: 750px) {

  .developersVoiceContents__txtWrap {
    width: 100%;
  }

  .developersVoiceContents__txt {
    font-size: 13px;
    line-height: 1.923;
  }

}

/* .developersVoiceContents__bnrList
---------------------------------------------------------- */
.developersVoiceContents__bnrList {
  margin-top: 32px;
}

.developersVoiceContents__bnrList .list__item {
  margin-top: 15px;
}

.developersVoiceContents__bnrList .list__item:first-child {
  margin-top: 0;
}

@media screen and (max-width: 750px) {

  .developersVoiceContents__bnrList {
    margin-top: 8.136%;
  }

  .developersVoiceContents__bnrList .list__item {
    margin-top: 4.915%;
  }

}

/* .developersVoiceContents__imgWrap
---------------------------------------------------------- */
.developersVoiceContents__imgWrap {
  width: 47.5%;
  margin-left: 4.8%;
  padding-top: 33.4%;
  background-image: url(../img/top/developersVoice/img_developers_voice.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media screen and (max-width: 750px) {

  .developersVoiceContents__imgWrap {
    width: 89.158%;
    margin: 10.17% auto 0;
    padding-top: 60.004%;
    background-image: url(../img/top/developersVoice/img_developers_voice_sp.jpg);
  }

}

/************************************************************************************************************************
以下オーガニック豆乳商品詳細 & アーモンドミルク詳細ページ共通CSS
************************************************************************************************************************/

/************************************************************
footer
************************************************************/

@media screen and (max-width: 750px) {

  .tanita-cafe.second_top footer {
    margin-top: 16.8%;
  }

}


/* .inner
---------------------------------------------------------- */
.organic_top .inner,
.almondMilk_top .inner,
.ambassador .inner {
  width: 73.206%;
  max-width: 1000px;
}

@media screen and (max-width: 750px) {

  .organic_top .inner,
  .almondMilk_top .inner,
  .ambassador .inner {
    width: 78.666%;
  }

}


/* .c-tit
---------------------------------------------------------- */
.c-tit .tit_ja {
  font-size: 28px;
}

.tit_en {}

@media screen and (max-width: 750px) {

  .c-tit .tit_ja {
    font-size: 20px;
  }

}


/************************************************************
.secondMainVisual
************************************************************/
.secondMainVisual {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.secondMainVisual__inner {
  width: 73.206%;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 2.928%;
}

@media screen and (max-width: 750px) {

  .tanita-cafe .secondMainVisual {
    background-image: none;
  }

  .secondMainVisual__bg {
    width: 100%;
    padding-top: 59.733%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .secondMainVisual__inner {
    width: 78.666%;
    padding-top: 0;
  }

}

@media screen and (min-width: 1366px) {

  .secondMainVisual__inner {
    padding-top: 80px;
  }

}

/* .secondMainVisual__item
---------------------------------------------------------- */
.secondMainVisual__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10% 0 2%;
}

.secondMainVisual__item .item__txt {
  width: 22.6%;
  margin-left: -7.7%;
  padding-top: 13%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.secondMainVisual__item .item__img {
  width: 50%;
  margin-left: 4%;
  padding-top: 28%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .secondMainVisual__item {
    display: block;
    margin: 4.068% 0 0;
    padding: 0;
  }

  .secondMainVisual__item .item__txt {
    width: 100%;
    margin-left: 0;
    padding-top: 29.493%;
  }

  .secondMainVisual__item .item__img {
    width: 100%;
    margin: 11.187% 0 0;
    padding-top: 45.765%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

}

/* .secondMainVisual .bg_soy
---------------------------------------------------------- */

@media screen and (max-width: 750px) {
  .bg_soy {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 26.66%;
    height: 0;
    margin: 0 -3% -2% 0;
    padding-top: 18.663%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/organic/organicMainVisual/bg_soy_sp.png);
  }

}

/* .secondMainVisual .bg_almond
---------------------------------------------------------- */

@media screen and (max-width: 750px) {

  .bg_almond {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 43.901%;
    height: 0;
    margin: 0 0 25.544% 0;
    padding-top: 37.29%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/almondMilk/almondMilkMainVisual/bg_almond_sp.png);

  }

}

/************************************************************
.secondOverView
************************************************************/

.secondOverView {
  position: relative;
  margin-top: 6.295%;
  transform: skewY(-6deg);
  -webkit-transform: skewY(-6deg);
  background-image: linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(140, 175, 164, .6) 57%, rgba(51, 108, 95, .6) 88%);
  background-image: -ms-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(140, 175, 164, .6) 57%, rgba(51, 108, 95, .6) 88%);
  background-image: -webkit-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(140, 175, 164, .6) 57%, rgba(51, 108, 95, .6) 88%);
}

.secondOverView .inner {
  transform: skewY(6deg);
  -webkit-transform: skewY(6deg);
}

@media screen and (max-width: 750px) {

  .secondOverView {
    margin-top: 6.295%;
    padding: 9.866% 0 20.266%;
    background-image: linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -ms-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -webkit-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
  }

}

@media screen and (min-width: 1366px) {

  .secondOverView {
    margin-top: 86px;
  }

}

.secondOverView .c-tit .tit_en {
  background: -ms-linear-gradient(90deg, #877977 44%, #dcb298 60%);
  background: -webkit-linear-gradient(90deg, #877977 44%, #dcb298 60%);
  background: linear-gradient(90deg, #877977 44%, #dcb298 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 750px) {

  .secondOverView .c-tit .tit_en {
    background: -ms-linear-gradient(90deg, #3a1409, #cc8b5d);
    background: -webkit-linear-gradient(90deg, #3a1409, #cc8b5d);
    background: linear-gradient(90deg, #3a1409, #cc8b5d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}

@media all and (-ms-high-contrast: none) {

  /* IE10,11用 */
  .secondOverView .c-tit .tit_en {
    background: none;
  }
}

/* .secondOverView__contents
---------------------------------------------------------- */
.secondOverView__contents {
  position: relative;
  padding: 5.124% 0 6.149%;
}

@media screen and (max-width: 750px) {

  .secondOverView__contents {
    padding: 0;
  }

}

@media screen and (min-width: 1366px) {

  .secondOverView__contents {
    padding: 70px 0 84px;
  }

}

/* .secondOverView__txt
---------------------------------------------------------- */
.secondOverView__txt {
  margin-top: 1.5%;
  color: #3a1409;
  font-size: 16px;
  text-align: center;
  line-height: 2.5;
}

@media screen and (max-width: 750px) {

  .secondOverView__txt {
    margin-top: 9.153%;
    font-size: 13px;
    text-align: left;
    line-height: 1.923;
  }

}


/* .secondOverView__img
---------------------------------------------------------- */
.secondOverView__img {
  width: 60%;
  margin: 3.7% auto 0;
  padding-top: 33.7%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .secondOverView__img {
    width: 100%;
    margin-top: 13.221%;
    padding-top: 56.275%;
  }

}

/* .secondOverView .bg_spoon
---------------------------------------------------------- */
.secondOverView .bg_spoon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 43%;
  margin: 1.1% 0 0 -34.3%;
  padding-top: 43.6%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .secondOverView .bg_spoon {
    width: 47.46%;
    margin: -22.374% 0 0 -13.56%;
    padding-top: 47.46%;
  }

}

/* .secondOverView .bg_soy
---------------------------------------------------------- */
.secondOverView .bg_soy {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 39%;
  margin: 0 -25.3% -12.9% 0;
  padding-top: 32%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .secondOverView .bg_soy {
    width: 39%;
    margin: 0 -13.56% -55.935% 0;
    padding-top: 57.631%;
  }

}

/* .secondOverView .bg_almond
---------------------------------------------------------- */
.secondOverView .bg_almond {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 49.155%;
  margin: 0 -25.3% .6% 0;
  padding-top: 53.732%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/************************************************************
.secondFeatures
************************************************************/

.secondFeatures {
  margin: 4.612% 0 0;
}

@media screen and (max-width: 750px) {

  .secondFeatures {
    margin: 17.6% 0 0;
  }

}

@media screen and (min-width: 1366px) {

  .secondFeatures {
    margin: 63px 0 0;
  }

}

.secondFeatures .c-tit .tit_en {
  background: -ms-linear-gradient(90deg, #877977 44%, #dcb298 60%);
  background: -webkit-linear-gradient(90deg, #877977 44%, #dcb298 60%);
  background: linear-gradient(90deg, #877977 44%, #dcb298 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 750px) {

  .secondFeatures .c-tit .tit_en {
    background: -ms-linear-gradient(90deg, #cc8b5d 34%, #3a1409 70%);
    background: -webkit-linear-gradient(90deg, #cc8b5d 34%, #3a1409 70%);
    background: linear-gradient(90deg, #cc8b5d 34%, #3a1409 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}

@media all and (-ms-high-contrast: none) {

  /* IE10,11用 */
  .secondFeatures .c-tit .tit_en {
    background: none;
  }
}

/* .secondFeaturesList
---------------------------------------------------------- */
.secondFeaturesList .item__tit {
  display: inline-block;
  margin: 0;
  padding: 4px 54px;
  color: #fff;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
  background-color: #004839;
}

@media screen and (max-width: 750px) {

  .secondFeaturesList .item__tit {
    display: block;
    margin: 0;
    padding: 2px 54px;
  }

}

/* .secondFeaturesListWrap
---------------------------------------------------------- */
.secondFeaturesListWrap {
  position: relative;
  margin: 56px 0 0;
}

@media screen and (max-width: 750px) {

  .secondFeaturesListWrap {
    margin: 8.814% 0 0;
  }


}

/* .secondFeaturesList .list__item
---------------------------------------------------------- */
.secondFeaturesList .list__item {
  position: relative;
  margin-top: 58px;
}

.secondFeaturesList .list__item:first-child {
  margin-top: 0;
}

@media screen and (max-width: 750px) {

  .secondFeaturesList .list__item {
    margin-top: 11.865%;
  }

}

/* .secondFeaturesList .item__contents
---------------------------------------------------------- */
.secondFeaturesList .item__contents {
  display: flex;
  flex-wrap: wrap;
}

.secondFeaturesList .list__item:nth-child(2n) .item__contents {
  flex-direction: row-reverse;
}

@media screen and (max-width: 750px) {

  .secondFeaturesList .item__contents {
    display: block;
  }

}

/* .secondFeatures__contents .item__txtWrap
---------------------------------------------------------- */
.secondFeatures__contents .item__txtWrap {
  width: 50%;
  padding: 0 3.6%;
}

.secondFeatures__contents .list__item:nth-child(2) .item__txtWrap {
  padding: 0 4.9% 0 2.7%;
}
@media screen and (max-width: 750px) {

  .secondFeatures__contents .list__item:nth-child(2) .item__txtWrap {
    padding: 0;
  }

}

.secondFeaturesList .item__tit .tit__txt {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
}

.secondFeaturesList .item__tit .tit__num {
  display: inline-block;
  vertical-align: middle;
  font-size: 24px;
}

.secondFeaturesList .txt__tit {
  margin: 36px 0 0;
  color: #3a1409;
  font-size: 24px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  line-height: 1.333;
}

.secondFeaturesList .txt__description {
  margin: 25px 0 0;
  color: #3a1409;
  font-size: 16px;
  line-height: 2.312;
}

@media screen and (max-width: 750px) {

  .secondFeatures__contents .item__txtWrap {
    width: 100%;
    padding: 0;
  }

  .secondFeaturesList .item__tit .tit__txt {
    font-size: 13px;
  }

  .secondFeaturesList .item__tit .tit__num {
    font-size: 16px;
  }

  .secondFeaturesList .txt__tit {
    margin: 7.797% 0 0;
    font-size: 18px;
    line-height: 1.222;
    text-align: center;
  }

  .secondFeaturesList .txt__description {
    margin: 5.763% 0 0;
    font-size: 13px;
    line-height: 1.923;
  }

}

/* .secondFeatures__contents .item__img
---------------------------------------------------------- */
.secondFeatures__contents .item__img {
  width: 44%;
  height: 0;
  margin-left: 2.4%;
  padding: 29.5% 0 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.secondFeatures__contents .list__item:nth-child(2n) .item__img {
  margin-left: 0;
  margin-right: 2.4%;
}

@media screen and (max-width: 750px) {


  .secondFeatures__contents .item__img {
    width: 100%;
    height: 0;
    margin-top: 8.136%;
    margin-left: 0;
    padding: 59.6% 0 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .secondFeatures__contents .list__item:nth-child(2n) .item__img {
    margin-left: 0;
    margin-right: 0;
  }

}

/* .secondFeatures__contents .bg_circle
---------------------------------------------------------- */
.secondFeatures__contents .bg_circle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 46%;
  margin: 12.9% 0 0 -42.4%;
  padding-top: 46%;
  background-image: url(../img/common/bg/bg_circle.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .secondFeatures__contents .bg_circle {
    display: none;
  }

}

/************************************************************
.secondLineup
************************************************************/
.secondLineup {
  position: relative;
  margin-top: 7.467%;
}

.secondLineup .c-tit .tit_en {
  background: -ms-linear-gradient(90deg, #3a1409 44%, #cc8b5d 60%);
  background: -webkit-linear-gradient(90deg, #3a1409 44%, #cc8b5d 60%);
  background: linear-gradient(90deg, #3a1409 44%, #cc8b5d 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 750px) {

  .secondLineup .c-tit .tit_en {
    background: -ms-linear-gradient(90deg, #3a1409 36%, #cc8b5d 60%);
    background: -webkit-linear-gradient(90deg, #3a1409 36%, #cc8b5d 60%);
    background: linear-gradient(90deg, #3a1409 36%, #cc8b5d 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}

@media screen and (max-width: 750px) {

  .secondLineup {
    margin-top: 30.133%;
  }

}

@media all and (-ms-high-contrast: none) {

  /* IE10,11用 */
  .secondLineup .c-tit .tit_en {
    background: none;
  }
}

@media screen and (min-width: 1366px) {

  .secondLineup {
    position: relative;
    margin-top: 102px;
  }

}

/* .inner
---------------------------------------------------------- */
.secondLineup .inner {
  position: relative;
}

/* .secondLineup__bg
---------------------------------------------------------- */
.secondLineup__bg {
  position: relative;
  transform: skewY(-6deg);
  -webkit-transform: skewY(-6deg);
  background-image: linear-gradient(4deg, rgba(51, 108, 95, .6) 19%, rgba(140, 175, 164, .6) 37%, rgba(229, 241, 233, .6) 99%);
  background-image: -ms-linear-gradient(4deg, rgba(51, 108, 95, .6) 19%, rgba(140, 175, 164, .6) 37%, rgba(229, 241, 233, .6) 99%);
  background-image: -webkit-linear-gradient(4deg, rgba(51, 108, 95, .6) 19%, rgba(140, 175, 164, .6) 37%, rgba(229, 241, 233, .6) 99%);
}

.secondLineup__bg__inner {
  padding: 5.27% 0;
}

.secondLineup__bg .inner {
  transform: skewY(6deg);
  -webkit-transform: skewY(6deg);
}

@media screen and (max-width: 750px) {

  .secondLineup__bg {
    z-index: 1;
    background: transparent;
  }

  .secondLineup__bg__inner {
    padding: 0 0 0;
  }

}

@media screen and (min-width: 1366px) {

  .secondLineup__bg__inner {
    padding: 72px 0;
  }

}

/* .secondLineup__innerBg
---------------------------------------------------------- */

@media screen and (max-width: 750px) {

  .secondLineup__innerBg {
    position: relative;
    padding: 0 0 19.466%;
    transform: skewY(-6deg);
    -webkit-transform: skewY(-6deg);
    background-image: linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -ms-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -webkit-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
  }

  .secondLineup__innerBg .inner {
    transform: skewY(6deg);
    -webkit-transform: skewY(6deg);
  }

}


/* .secondLineup .c-tit
---------------------------------------------------------- */

@media screen and (max-width: 750px) {

  .secondLineup .c-tit .tit_ja {
    font-size: 20px;
  }

}

/* .secondLineupImgList
---------------------------------------------------------- */
.secondLineupImgList {
  display: flex;
  flex-wrap: wrap;
}

.secondLineupImgList .item__img {
  width: 50%;
  height: 0;
  padding-top: 48%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .secondLineupImgList {
    display: none;
  }

}

/* .secondLineupList .list__item
---------------------------------------------------------- */

@media screen and (max-width: 750px) {

  .secondLineupList .list__item {
    position: relative;
  }

  .secondLineupList .list__item::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 77.971%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

}

/* .secondLineupList
---------------------------------------------------------- */
.secondLineupList {
  display: flex;
  flex-wrap: wrap;
  margin: -74px 0 0;
}

.secondLineupList .list__item {
  display: flex;
  flex-wrap: wrap;
  width: 48%;
  margin-left: 3.5%;
}

.secondLineupList .list__item:first-child {
  margin-left: 0;
}

@media screen and (max-width: 750px) {

  .secondLineupList {
    display: block;
    margin: -31.086% 0 0;
  }

  .secondLineupList .list__item {
    display: block;
    width: 100%;
    margin-top: 20.679%;
    margin-left: 0;
  }

  .secondLineupList .list__item:first-child {
    margin-top: 0;
    padding-top: 33.9%;
  }

}

@media screen and (min-width: 1366px) {

  .secondLineupList {
    margin: -7.4% 0 0;
  }

}


/* .secondLineupList .item__contents
---------------------------------------------------------- */
.secondLineupList .item__contents {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid #bfd3cd;
  border-right: 1px solid #336c5f;
  background-color: #fff;
}

.secondineupList .item__contents:before {
  top: -1px;
  left: 0;
}

.secondLineupList .item__contents:after {
  bottom: -1px;
  left: 0;
}

.secondLineupList .item__contents:before,
.secondLineupList .item__contents:after {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: linear-gradient(left, #bfd3cd, #336c5f);
  background: -ms-linear-gradient(left, #bfd3cd, #336c5f);
  background: -webkit-gradient(linear, left top, right bottom, from(#bfd3cd), to(#336c5f));
}

@media screen and (max-width: 750px) {

  .secondLineupList .item__contents {
    display: block;
    margin: 9.153% 0 0;
  }

}


/* .secondLineupList .item__txtWrap
---------------------------------------------------------- */
.secondLineupList .item__txtWrap {
  position: relative;
  top: 4px;
  left: 4px;
  width: 100%;
  padding: 0 0 232px;
  border-left: 1px solid #bfd3cd;
  border-right: 1px solid #336c5f;
}

.secondLineupList .item__txtWrap:before {
  top: 0px;
  left: 0;
}

.secondLineupList .item__txtWrap:after {
  bottom: 0;
  left: 0;
}

.secondLineupList .item__txtWrap:before,
.secondLineupList .item__txtWrap:after {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: linear-gradient(left, #bfd3cd, #336c5f);
  background: -ms-linear-gradient(left, #bfd3cd, #336c5f);
  background: -webkit-gradient(linear, left top, right bottom, from(#bfd3cd), to(#336c5f));
}

.secondLineupList .item__txtWrap__in {
  width: 100%;
}

.secondLineupList .item__txtWrap__inner {
  padding: 11.765% 9.033% 0;
}

.secondLineupList .item__tit {
  color: #3a1409;
  font-size: 24px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  line-height: 1.333;
  text-align: center;
}

.secondLineupList .item__description {
  margin: 9.23% 0 10.255%;
  color: #3a1409;
  font-size: 16px;
  line-height: 2.312;
}


@media screen and (max-width: 750px) {
  .secondLineupList .item__txtWrap {
    padding: 0 0 53.562%;
  }

  .secondLineupList .item__txtWrap__inner {
    padding: 10.653% 6.873% 10.653% 8.935%;
  }

  .secondLineupList .item__tit {
    font-size: 16px;
  }

  .secondLineupList .item__description {
    margin: 16px 0 19px;
    font-size: 13px;
    line-height: 1.923;
  }

}


/* .secondLineupList .btn.detail
---------------------------------------------------------- */
.secondLineupList .btnWrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 0 10.46% 0;
}

.secondLineupList .btn.detail {
  width: 60.926%;
  min-width: 292px;
  margin-top: 14px;
  padding: 9px 32px 9px;
  font-weight: bold;
}

.secondLineupList .btn.detail:first-child {
  margin-top: 0;
}

.secondLineupList .btn.detail::before {
  width: 6.897%;
  margin: auto 4.138% auto 0;
  padding-top: 1.724%;
}


@media screen and (max-width: 750px) {
  .secondLineupList .btnWrap {
    margin-bottom: 9.948%;
  }

  .secondLineupList .btn.detail {
    margin-top: 15px;
  }

  .secondLineupList .btn.detail:first-child {
    margin-top: 0;
  }

  .secondLineupList .btn.detail {
    width: 73.888%;
    min-width: 221px;
    padding: 9px 24px 9px;
    font-size: 12px;
  }

}


/* .secondLineupList .btn.recipe
---------------------------------------------------------- */
.secondLineupList .btn.recipe {
  width: 60.926%;
  min-width: 292px;
  margin-top: 14px;
  padding: 2.731% 6.722% 2.521%;
}

.secondLineupList .btn.recipe::before {
  width: 6.897%;
  margin: auto 4.138% auto 0;
}

@media screen and (max-width: 750px) {

  .secondLineupList .btn.recipe {
    width: 73.888%;
    min-width: 221px;
    margin-top: 15px;
    padding: 13px 24px 12px;
    font-size: 12px;
  }

}


/* .secondLineup .bg_soy
---------------------------------------------------------- */
.secondLineup .bg_soy {
  position: absolute;
  left: 105.5%;
  bottom: -160%;
  z-index: 0;
  width: 37.4%;
  margin: 0;
  padding-top: 36.2%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .secondLineup .bg_soy.sp {
    width: 0;
    margin: 0 0 -53.223% -13.56%;
    padding-top: 47.46%;
  }


}

/* .secondLineup .bg_almond
---------------------------------------------------------- */
.secondLineup .bg_almond {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 31.2%;
  margin: 0 0 -20.8% -29%;
  padding-top: 41.8%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .secondLineup .bg_almond {
    width: 47.467%;
    margin: 0 0 -48.477% -13.56%;
    padding-top: 54.24%;
  }

}

/* .secondLineup .bg_spoon
---------------------------------------------------------- */
.secondLineup .bg_spoon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 43%;
  margin: -18.2% -30.7% 0 0;
  padding-top: 46%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .secondLineup .bg_spoon {
    width: 47.291%;
    margin: -33.9% -13.56% 0 0;
    padding-top: 47.46%;
  }

}


/************************************************************************************************************************
以下オーガニック豆乳商品詳細ページCSS
************************************************************************************************************************/

/************************************************************
.organicMainVisual
************************************************************/
.organicMainVisual {
  background-image: url(../img/organic/organicMainVisual/bg.png);
}

@media screen and (max-width: 750px) {

  .organicMainVisual__bg {
    background-image: url(../img/organic/organicMainVisual/bg_sp.png);
  }

}

/* .organicMainVisual__item
---------------------------------------------------------- */
.organicMainVisual__item .item__txt {
  background-image: url(../img/organic/organicMainVisual/text_detail.png);
}

.organicMainVisual__item .item__img {
  background-image: url(../img/organic/organicMainVisual/img_item.png);
}

@media screen and (max-width: 750px) {

  .organicMainVisual__item .item__txt {
    background-image: url(../img/organic/organicMainVisual/text_detail_sp.png);
  }

  .organicMainVisual__item .item__img {
    background-image: url(../img/organic/organicMainVisual/img_item_sp.png);
  }

}

/************************************************************
.organicOverView
************************************************************/

.organicOverView {
  margin-top: 53px;
}

@media screen and (max-width: 750px) {
  .organicOverView {
    margin-top: 60px;
  }
}

/* .organicOverView__img
---------------------------------------------------------- */
.organicOverView__img {
  background-image: url(../img/organic/organicOverView/img.jpg);
}

@media screen and (max-width: 750px) {

  .organicOverView__img {
    background-image: url(../img/organic/organicOverView/img_sp.jpg);
  }

}

/* .organicOverView .bg_spoon
---------------------------------------------------------- */
.organicOverView .bg_spoon {
  background-image: url(../img/organic/organicOverView/bg_spoon.png);
}

@media screen and (max-width: 750px) {

  .organicOverView .bg_spoon {
    background-image: url(../img/organic/organicOverView/bg_spoon_sp.png);
  }

}

/* .organicOverView .bg_soy
---------------------------------------------------------- */
.organicOverView .bg_soy {
  background-image: url(../img/organic/organicOverView/bg_soy.png);
}

@media screen and (max-width: 750px) {

  .organicOverView .bg_soy {
    background-image: url(../img/organic/organicOverView/bg_soy_sp.png);
  }

}

/************************************************************
.organicFeatures
************************************************************/

/* .organicFeatures__contents .item__img
---------------------------------------------------------- */
.organicFeatures__contents .item__img {
  background-image: url(../img/organic/organicFeatures/img_01.jpg);
}

.organicFeatures__contents .list__item:nth-child(2) .item__img {
  background-image: url(../img/organic/organicFeatures/img_02.jpg);
}

.organicFeatures__contents .list__item:nth-child(3) .item__img {
  background-image: url(../img/organic/organicFeatures/img_03.jpg);
}

@media screen and (max-width: 750px) {

  .organicFeatures__contents .item__img {
    background-image: url(../img/organic/organicFeatures/img_01_sp.jpg);
  }

  .organicFeatures__contents .list__item:nth-child(2) .item__img {
    background-image: url(../img/organic/organicFeatures/img_02_sp.jpg);
  }

  .organicFeatures__contents .list__item:nth-child(3) .item__img {
    background-image: url(../img/organic/organicFeatures/img_03_sp.jpg);
  }

}

/************************************************************
.organicLineup
************************************************************/

.organicLineup__bg__inner {
  padding-bottom: 110px;
}

@media screen and (max-width: 750px) {
  .organicLineup {
    margin-top: 20%;
  }

  .organicLineup__bg {
    position: relative;
    padding: 0 0 19.466%;
    transform: skewY(-6deg);
    -webkit-transform: skewY(-6deg);
    background-image: linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -ms-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -webkit-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
  }

  .organicLineup__bg__inner {
    padding-top: 12%;
    padding-bottom: 3%;
  }
}

/* .organicLineup
---------------------------------------------------------- */
.organicLineupImgList {
  margin-top: 16%;
}

.organicLineupImgList .item__Img__box {
  z-index: 101;
  width: 30%;
  flex-shrink: 0;
  position: relative;
}

.organicLineupImgList .organicNonAdjustment.item__img {
  background-image: url(../img/organic/organicLineup/img_item_01.png);
  width: 100%;
  padding-top: 357px;
  background-size: contain;
  position: absolute;
  bottom: 22%;
}

.organicLineupImgList .organicAdjustment.item__img {
  background-image: url(../img/organic/organicLineup/img_item_02.png);
}

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

/* .organicNonAdjustment .list__item
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .list__item.organicNonAdjustment {
    width: 100%;
  }
  
  .list__item.organicNonAdjustment .item__txtWrap {
    padding-bottom: 0;
  }
  
  .list__item.organicNonAdjustment .item__txtWrap__inner {
    display: flex;
    padding: 4.565% 5.033% 0;
  }
  
  .list__item.organicNonAdjustment .item__description {
    margin: 2.23% 0 2.255%;
  }
  
  .list__item.organicNonAdjustment .item__tit {
    text-align: left;
  }
  
  .list__item.organicNonAdjustment .btnWrap {
    position: relative;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9%;
  }
  
  .list__item.organicNonAdjustment .btn {
    width: auto;
    padding: 1.831% 4.722% 1.831%;
    margin-top: 0;
    min-height: 65px;
    min-width: 290px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
  }
}

@media screen and (max-width: 750px) {

  .list__item.organicNonAdjustment .item__contents {
    margin-top: 6%;
  }

  .item__img.organicNonAdjustment {
    display: none;
  }

  .organicLineupList .list__item.organicNonAdjustment::before {
    background-image: url(../img/organic/organicLineup/img_item_01_sp.png);
    background-size: contain;
  }

  .organicLineupList .list__item.organicAdjustment::before {
    background-image: url(../img/organic/organicLineup/img_item_02_sp.png);
  }
  
  .organicLineupList .list__item:first-child {
    padding-top: 24%;
  }

  .list__item.organicNonAdjustment .item__txtWrap {
    padding: 0 0 57.562%;
  }

  .list__item.organicNonAdjustment .item__txtWrap__inner {
    padding: 10.653% 6.873% 0 8.935%;
  }

  .list__item.organicNonAdjustment .item__description {
    margin: 16px 0 8px;
  }

  .list__item.organicNonAdjustment .btnWrap {
    margin-bottom: 12.948%;
  }

  .list__item.organicNonAdjustment .btn {
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

}

/* .organicLineup .bg_soy
---------------------------------------------------------- */
.organicLineup .bg_soy {
  background-image: url(../img/organic/organicLineup/bg_soy.png);
  bottom: -122%;
}

@media screen and (max-width: 750px) {

  .organicLineup .bg_soy {
    background-image: url(../img/organic/organicLineup/bg_soy_sp.png);
  }

}

/* .organicLineup .bg_spoon
---------------------------------------------------------- */
.organicLineup .bg_spoon {
  background-image: url(../img/organic/organicLineup/bg_spoon.png);
}

@media screen and (max-width: 750px) {

  .organicLineup .bg_spoon {
    background-image: url(../img/organic/organicLineup/bg_spoon_sp.png);
  }

}


/************************************************************************************************************************
以下アーモンドミルク詳細ページCSS
************************************************************************************************************************/

/************************************************************
.almondMilkMainVisual
************************************************************/
.almondMilkMainVisual {
  background-image: url(../img/almondMilk/almondMilkMainVisual/bg.png);
}

@media screen and (max-width: 750px) {

  .almondMilkMainVisual__bg {
    padding-top: 56.666%;
    background-image: url(../img/almondMilk/almondMilkMainVisual/bg_sp.png);
  }

}


/* .almondMilkMainVisual__item
---------------------------------------------------------- */
.almondMilkMainVisual__item .item__txt {
  background-image: url(../img/almondMilk/almondMilkMainVisual/text_detail.png);
}

.almondMilkMainVisual__item .item__img {
  background-image: url(../img/almondMilk/almondMilkMainVisual/img_item.png);
}

@media screen and (max-width: 750px) {

  .almondMilkMainVisual__item .item__txt {
    background-image: url(../img/almondMilk/almondMilkMainVisual/text_detail_sp.png);
  }

  .almondMilkMainVisual__item .item__img {
    background-image: url(../img/almondMilk/almondMilkMainVisual/img_item_sp.png);
  }

}

/************************************************************
.almondMilkOverView
************************************************************/

.almondMilkOverView {
  background-image: linear-gradient(4deg, rgba(115, 45, 29, .6) 7%, rgba(185, 147, 139, .6) 31%, rgba(255, 249, 248, .6) 100%);
  background-image: -ms-linear-gradient(4deg, rgba(115, 45, 29, .6) 7%, rgba(185, 147, 139, .6) 31%, rgba(255, 249, 248, .6) 100%);
  background-image: -webkit-linear-gradient(4deg, rgba(115, 45, 29, .6) 7%, rgba(185, 147, 139, .6) 31%, rgba(255, 249, 248, .6) 100%);
}

.almondMilkOverView .c-tit .tit_en {
  background: -ms-linear-gradient(90deg, #3d1205 44%, #d48955 60%);
  background: -webkit-linear-gradient(90deg, #3d1205 44%, #d48955 60%);
  background: linear-gradient(90deg, #3d1205 44%, #d48955 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (max-width: 750px) {

  .almondMilkOverView {
    margin-top: 11.733%;
    padding-bottom: 26.666%;
    background-image: linear-gradient(4deg, rgba(115, 45, 29, .6) 7%, rgba(185, 147, 139, .6) 31%, rgba(255, 249, 248, .6) 100%);
    background-image: -webkit-linear-gradient(4deg, rgba(115, 45, 29, .6) 7%, rgba(185, 147, 139, .6) 31%, rgba(255, 249, 248, .6) 100%);
    background-image: -ms-linear-gradient(4deg, rgba(115, 45, 29, .6) 7%, rgba(185, 147, 139, .6) 31%, rgba(255, 249, 248, .6) 100%);
  }

}

@media all and (-ms-high-contrast: none) {
  /* IE10,11用 */

  .almondMilkOverView .c-tit .tit_en {
    background: none;
  }

}

/* .almondMilkOverView__img
---------------------------------------------------------- */
.almondMilkOverView__img {
  background-image: url(../img/almondMilk/almondMilkOverView/img.jpg);
}

@media screen and (max-width: 750px) {

  .almondMilkOverView__img {
    background-image: url(../img/almondMilk/almondMilkOverView/img_sp.jpg);
  }

}

/* .almondMilkOverView .bg_spoon
---------------------------------------------------------- */
.almondMilkOverView .bg_spoon {
  width: 47.6%;
  margin: -0.6% 0 0 -38.9%;
  padding-top: 46%;
  background-image: url(../img/almondMilk/almondMilkOverView/bg_spoon.png);
}

@media screen and (max-width: 750px) {

  .almondMilkOverView .bg_spoon {
    width: 55.766%;
    margin: -27.12% 0 0 -13.56%;
    padding-top: 59.326%;
    background-image: url(../img/almondMilk/almondMilkOverView/bg_spoon_sp.png);
  }

}

/* .almondMilkOverView .bg_almond
---------------------------------------------------------- */
.almondMilkOverView .bg_almond {
  width: 40.3%;
  margin: 0 -26.2% -9.3% 0;
  padding-top: 33.4%;
  background-image: url(../img/almondMilk/almondMilkOverView/bg_almond.png);
}

@media screen and (max-width: 750px) {

  .almondMilkOverView .bg_almond {
    width: 55.766%;
    margin: 0 -13.56% -55.935% 0;
    padding-top: 56.105%;
    background-image: url(../img/almondMilk/almondMilkOverView/bg_almond_sp.png);
  }

}


/************************************************************
.almondMilkFeatures
************************************************************/

/* .almondMilkFeaturesList
---------------------------------------------------------- */
.almondMilkFeaturesList .item__tit {
  background-color: #6e2615;
}

/* .almondMilkFeatures__contents .item__img
---------------------------------------------------------- */
.almondMilkFeatures__contents .item__img {
  background-image: url(../img/almondMilk/almondMilkFeatures/img_01.jpg);
}

.almondMilkFeatures__contents .list__item:nth-child(2) .item__img {
  background-image: url(../img/almondMilk/almondMilkFeatures/img_02.jpg);
}

.almondMilkFeatures__contents .list__item:nth-child(3) .item__img {
  background-image: url(../img/almondMilk/almondMilkFeatures/img_03.jpg);
}

/* .secondFeatures__contents .bg_circle
---------------------------------------------------------- */
.almondMilkFeatures__contents .bg_circle {
  margin: 18.9% 0 0 -46.5%;
  background-image: url(../img/common/bg/bg_circle_almond.png);
}

@media screen and (max-width: 750px) {

  .almondMilkFeatures__contents .item__img {
    background-image: url(../img/almondMilk/almondMilkFeatures/img_01_sp.jpg);
  }

  .almondMilkFeatures__contents .list__item:nth-child(2) .item__img {
    background-image: url(../img/almondMilk/almondMilkFeatures/img_02_sp.jpg);
  }

  .almondMilkFeatures__contents .list__item:nth-child(3) .item__img {
    background-image: url(../img/almondMilk/almondMilkFeatures/img_03_sp.jpg);
  }

}


/************************************************************
.almondMilkLineup
************************************************************/

/* .almondMilkLineup__bg
---------------------------------------------------------- */
.almondMilkLineup__bg {
  background-image: linear-gradient(4deg, rgba(255, 249, 248, .6) 7%, rgba(185, 147, 139, .6) 31%, rgba(115, 45, 29, .6) 100%);
  background-image: -ms-linear-gradient(4deg, rgba(255, 249, 248, .6) 7%, rgba(185, 147, 139, .6) 31%, rgba(115, 45, 29, .6) 100%);
  background-image: -webkit-linear-gradient(4deg, rgba(255, 249, 248, .6) 7%, rgba(185, 147, 139, .6) 31%, rgba(115, 45, 29, .6) 100%);
}

@media screen and (max-width: 750px) {

  .almondMilkLineup__bg {
    background-image: none;
  }

}

/* .almondMilkLineup__innerBg
---------------------------------------------------------- */

@media screen and (max-width: 750px) {

  .almondMilkLineup__innerBg {
    background-image: linear-gradient(4deg, rgba(255, 249, 248, .6) 0%, rgba(185, 147, 139, .6) 69%, rgba(115, 45, 29, .6) 93%);
    background-image: -ms-linear-gradient(4deg, rgba(255, 249, 248, .6) 0%, rgba(185, 147, 139, .6) 69%, rgba(115, 45, 29, .6) 93%);
    background-image: -webkit-linear-gradient(4deg, rgba(255, 249, 248, .6) 0%, rgba(185, 147, 139, .6) 69%, rgba(115, 45, 29, .6) 93%);
  }

}


/* .almondMilkLineupImgList
---------------------------------------------------------- */
.almondMilkLineupImgList .almondMilkAdjustment.item__img {
  background-image: url(../img/almondMilk/almondMilkLineup/img_item_01.png);
}

.almondMilkLineupImgList .almondMilkNonAdjustment.item__img {
  background-image: url(../img/almondMilk/almondMilkLineup/img_item_02.png);
}

/* .almondMilkLineupList .list__item
---------------------------------------------------------- */

@media screen and (max-width: 750px) {

  .almondMilkLineupList .almondMilkNonAdjustment::before {
    background-image: url(../img/almondMilk/almondMilkLineup/img_item_01_sp.png);
  }

  .almondMilkLineupList .almondMilkAdjustment::before {
    background-image: url(../img/almondMilk/almondMilkLineup/img_item_02_sp.png);
  }

}


/* .almondMilkLineupList .item__contents
---------------------------------------------------------- */
.almondMilkLineupList .item__contents {
  border-left: 1px solid #ddc5bf;
  border-right: 1px solid #9d685b;
}

/* .almondMilkLineupList .item__txtWrap
---------------------------------------------------------- */
.almondMilkLineupList .item__txtWrap {
  border-left: 1px solid #ddc5bf;
  border-right: 1px solid #9d685b;
}

.almondMilkLineupList .item__txtWrap:before,
.almondMilkLineupList .item__txtWrap:after {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: linear-gradient(left, #ddc5bf, #9d685b);
  background: -ms-linear-gradient(left, #ddc5bf, #9d685b);
  background: -webkit-gradient(linear, left top, right bottom, from(#ddc5bf), to(#9d685b));
}

.almondMilkLineupList .item__contents:before,
.almondMilkLineupList .item__contents:after {
  background: linear-gradient(left, #ddc5bf, #9d685b);
  background: -ms-linear-gradient(left, #ddc5bf, #9d685b);
  background: -webkit-gradient(linear, left top, right bottom, from(#ddc5bf), to(#9d685b));
}

/* .almondMilkLineup .bg_almond
---------------------------------------------------------- */
.almondMilkLineup .bg_almond {
  background-image: url(../img/almondMilk/almondMilkLineup/bg_almond.png);
}

@media screen and (max-width: 750px) {

  .almondMilkLineup .bg_almond {
    background-image: url(../img/almondMilk/almondMilkLineup/bg_almond_sp.png);
  }

}

/* .almondMilkLineup .bg_spoon
---------------------------------------------------------- */
.almondMilkLineup .bg_spoon {
  width: 54%;
  margin: -20.9% -35% 0 0;
  padding-top: 51.2%;
  background-image: url(../img/almondMilk/almondMilkLineup/bg_spoon.png);
}

@media screen and (max-width: 750px) {

  .almondMilkLineup .bg_spoon {
    width: 47.291%;
    margin: -36.951% -13.56% 0 0;
    padding-top: 54.24%;
    background-image: url(../img/almondMilk/almondMilkLineup/bg_spoon_sp.png);
  }

}


/************************************************************************************************************************
以下タニタカフェ監修商品アンバサダーページCSS
************************************************************************************************************************/

/************************************************************
.ambassadorMainVisual
************************************************************/
.ambassadorMainVisual__contents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 14.8%;
}

@media screen and (max-width: 750px) {

  .ambassadorMainVisual__contents {
    display: block;
    padding-top: 28.137%;
  }

}

@media screen and (min-width: 1366px) {

  .ambassadorMainVisual__contents {
    padding-top: 148px;
  }

}


/* .ambassadorMainVisual__txtWrap
---------------------------------------------------------- */
.ambassadorMainVisual__txtWrap {
  width: 44%;
}

.ambassadorMainVisual__tit {
  color: #3a1409;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
  line-height: 1.7;
}

.ambassadorMainVisual__tit .tit_s {
  display: block;
  font-size: 21px;
}

.ambassadorMainVisual__tit .tit_l {
  display: block;
  font-size: 30px;
}

.ambassadorMainVisual__tit .tit__icon {
  vertical-align: top;
  font-size: 18px;
}

.ambassadorMainVisual__description {
  margin: 36px 0 0 -3.5%;
  color: #3a1409;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.8px;
  line-height: 1.937;
}

.ambassadorMainVisual__comment {
  position: relative;
  margin: 18px 0 0 22px;
  padding-left: 1em;
  color: #3a1409;
  font-size: 12px;
  line-height: 1.883;
}

@media screen and (max-width: 750px) {

  .ambassadorMainVisual__txtWrap {
    width: 100%;
  }

  .ambassadorMainVisual__tit .tit_s {
    font-size: 15px;
  }

  .ambassadorMainVisual__tit .tit_l {
    font-size: 26px;
  }

  .ambassadorMainVisual__tit .tit__icon {
    vertical-align: middle;
    font-size: 20px;
  }

  .ambassadorMainVisual__description {
    margin: 7.119% 0 0 0;
    font-size: 13px;
    line-height: 1.923;
  }

  .ambassadorMainVisual__comment {
    max-width: 295px;
    margin: 5.763% auto 0;
    font-size: 10px;
  }

}


/* .ambassadorMainVisual__imgWrap
---------------------------------------------------------- */
.ambassadorMainVisual__imgWrap {
  width: 50%;
  height: 0;
  margin-left: 6%;
  padding-top: 20.8%;
  background-image: url(../img/ambassador/ambassadorMainVisual/img_item.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ambassadorMainVisual__comment .comment__icon {
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 750px) {

  .ambassadorMainVisual__imgWrap {
    width: 100%;
    margin: 8.475% auto 0;
    padding-top: 38.646%;
    background-image: url(../img/ambassador/ambassadorMainVisual/img_item_sp.png);
  }

}


/************************************************************
.ambassadorMember
************************************************************/
.ambassadorMember {
  position: relative;
  margin-top: 100px;
  padding: 9.956% 0 4.831%;
}

.ambassadorMember__bg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  margin: 0 auto;
  height: 100%;
  -webkit-transform: skewY(-6deg);
  transform: skewY(-6deg);
  background-image: linear-gradient(35deg, rgb(138, 180, 171) 1%, rgb(255, 255, 255) 47%, rgb(212, 190, 185) 79%, rgb(169, 125, 115) 99%);
  background-image: -ms-linear-gradient(35deg, rgb(138, 180, 171) 1%, rgb(255, 255, 255) 47%, rgb(212, 190, 185) 79%, rgb(169, 125, 115) 99%);
  background-image: -webkit-linear-gradient(35deg, rgb(138, 180, 171) 1%, rgb(255, 255, 255) 47%, rgb(212, 190, 185) 79%, rgb(169, 125, 115) 99%);
}


.ambassadorMember__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.ambassadorMember__list .list__item {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 32.5%;
  margin-left: 1.2%;
  padding-bottom: 5%;
  background-color: #fff;
}

.ambassadorMember__list .list__item:nth-child(n + 4) {
  margin-top: 13.3%;
}

.ambassadorMember__list .list__item:first-child,
.ambassadorMember__list .list__item:nth-child(4) {
  margin-left: 0;
}

.ambassadorMember__list .list__contenst {
  position: relative;
  padding: 0 0 17.847%;
}

@media screen and (max-width: 750px) {

  .ambassadorMember {
    margin-top: 11.2%;
    padding: 15.733% 0;
    -webkit-transform: skewY(-6deg);
    transform: skewY(-6deg);
    background-image: linear-gradient(90deg, rgba(157, 192, 185, .6) 1%, rgba(255, 255, 255, .6) 47%, rgba(235, 216, 212, .6) 89%, rgba(214, 177, 169, .6) 100%);
    background-image: -ms-linear-gradient(90deg, rgba(157, 192, 185, .6) 1%, rgba(255, 255, 255, .6) 47%, rgba(235, 216, 212, .6) 89%, rgba(214, 177, 169, .6) 100%);
    background-image: -webkit-linear-gradient(90deg, rgba(157, 192, 185, .8) 1%, rgba(255, 255, 255, .8) 47%, rgba(235, 216, 212, .8) 89%, rgba(214, 177, 169, .8) 100%);
  }

  .ambassadorMember__bg {
    display: none;
  }

  .ambassadorMember .inner {
    -webkit-transform: skewY(6deg);
    transform: skewY(6deg);
  }

  .ambassadorMember__list {
    display: block;
  }

  .ambassadorMember__list .list__item {
    display: block;
    width: 100%;
    margin: 24.069% 0 0;
    padding-bottom: 0;
  }

  .ambassadorMember__list .list__item:nth-child(n + 4) {
    margin-top: 25.086%;
  }

  .ambassadorMember__list .list__item:first-child {
    margin-top: 0;
  }

  .ambassadorMember__list .list__contenst {
    padding: 0 0 10.17%;
  }

}

@media screen and (min-width: 1366px) {

  .ambassadorMember {
    padding: 136px 0 66px;
  }

  .ambassadorMember__bg {
    padding-top: 1411px;
  }

}

/* .ambassadorMember__list .list__top
---------------------------------------------------------- */
.ambassadorMember__list .list__top {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 55.695% 0 0;
}

.ambassadorMember__list .list__img {
  position: absolute;
  top: -28.7%;
  right: 13.847%;
  width: 71.696%;
  max-width: 71.696%;
}

.list__sns {
  position: absolute;
  top: 24px;
  right: 3.692%;
  width: 7.077%;
  max-width: 7.077%;
}

@media screen and (max-width: 750px) {

  .ambassadorMember__list .list__top {
    display: block;
    padding: 34.578% 0 0;
  }

  .ambassadorMember__list .list__img {
    top: 0;
    left: 0;
    right: 0;
    width: 50.511%;
    max-width: initial;
    max-width: none;
    margin: -15.255% auto 0;
  }

  .list__sns {
    top: 0;
    right: 8.4751%;
    width: 6.78%;
    max-width: 6.78%;
    margin-top: 5.085%;
  }

}


/* .ambassadorMember__list .list__bottom
---------------------------------------------------------- */
.ambassadorMember__list .list__bottom {
  margin-top: 4.923%;
}

.ambassadorMember__list .list__name {
  padding: 0 7.692%;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
}

.ambassadorMember__list .list__name .name_s {
  display: block;
  font-size: 13px;
}

.ambassadorMember__list .list__name .name_l {
  display: block;
  font-size: 20px;
}

.ambassadorMember__list .name_kana {
  font-size: 12px;
}

.list__description {
  margin-top: 4.923%;
  padding: 0 7.692%;
  font-size: 14px;
  line-height: 2;
}

@media screen and (max-width: 750px) {

  .ambassadorMember__list .list__bottom {
    margin-top: 5.085%;
  }

  .ambassadorMember__list .list__name {}

  .ambassadorMember__list .list__name .name_s {
    font-size: 10px;
  }

  .ambassadorMember__list .list__name .name_l {
    font-size: 16px;
  }

  .ambassadorMember__list .name_kana {
    font-size: 11px;
  }

  .list__description {
    font-size: 13px;
    line-height: 1.923;
  }

}


/* .ambassadorMember__list .list__sns
---------------------------------------------------------- */
.list__sns__list .list__sns__list__item {
  position: relative;
  margin-top: 52.219%;
  transition: .3s;
}

.list__sns__list .list__sns__list__item:first-child {
  margin-top: 0;
}

.list__sns__list .list__sns__list__item {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.list__sns__list__item.facebook {
  width: 100%;
  padding-top: 100%;
  background-image: url(../img/ambassador/ambassadorMember/icon_facebook.png);
}

.list__sns__list__item.instagram {
  width: 95.735%;
  padding-top: 95.735%;
  background-image: url(../img/ambassador/ambassadorMember/icon_instagram.png);
}

.list__sns__list__item.blog {
  width: 95.735%;
  padding-top: 82.68%;
  background-image: url(../img/ambassador/ambassadorMember/icon_blog.png);
}

.list__sns__list__item.home {
  width: 95.735%;
  padding-top: 91.383%;
  background-image: url(../img/ambassador/ambassadorMember/icon_home.png);
}

.list__sns__list a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: auto;
}

.list__sns__list .list__sns__list__item:hover {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

@media screen and (max-width: 750px) {

  .list__sns__list .list__sns__list__item {
    margin-top: 50.075%;
  }

  .list__sns__list__item.facebook {
    width: 100%;
    padding-top: 100%;
    background-image: url(../img/ambassador/ambassadorMember/icon_facebook_sp.png);
  }

  .list__sns__list__item.instagram {
    width: 97.597%;
    padding-top: 97.597%;
    background-image: url(../img/ambassador/ambassadorMember/icon_instagram_sp.png);
  }

  .list__sns__list__item.blog {
    width: 100%;
    padding-top: 85.127%;
    background-image: url(../img/ambassador/ambassadorMember/icon_blog_sp.png);
  }

  .list__sns__list__item.home {
    width: 100%;
    padding-top: 95.142%;
    background-image: url(../img/ambassador/ambassadorMember/icon_home_sp.png);
  }

}


/* .ambassadorMember__list .list__btn
---------------------------------------------------------- */
.ambassadorMember__list .list__btn {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 51.08%;
  min-width: 120px;
  max-width: 166px;
  margin: 0 auto 0;
  padding: 3.384% 6.154% 3.077% 0;
  color: #fff;
  font-size: 16px;
  text-align: center;
  background-color: #a97d73;
}

.ambassadorMember__list .list__btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 7.228%;
  height: 0;
  margin: auto 8.457% auto 0;
  padding-top: 8.024%;
  background-image: url(../img/common/btn/icon_window.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media screen and (max-width: 1200px) {

  .ambassadorMember__list .list__btn {
    min-width: 140px;
    font-size: 14px;
  }

}

@media screen and (max-width: 750px) {

  .ambassadorMember__list .list__btn {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 48.07%;
    min-width: initial;
    min-width: auto;
    margin: 4.746% auto 0;
    padding: 6px 10px 5px 0;
    color: #fff;
    font-size: 13px;
    text-align: center;
    background-color: #a97d73;
  }

  .ambassadorMember__list .list__btn::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6.924%;
    max-width: 9px;
    height: 0;
    margin: auto 10px auto 0;
    padding-top: 7.308%;
  }

}


/* .tanita-cafe.ambassador .btn.back
---------------------------------------------------------- */
.tanita-cafe.ambassador .btn.back {
  display: block;
  position: relative;
  width: 277px;
  margin: 91px auto 0;
  padding: 10px 0;
  background-color: #a97d73;
}

.tanita-cafe.ambassador .btn.back .btn__txt {
  display: block;
  position: relative;
  color: #fff;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
}

.tanita-cafe.ambassador .btn.back .btn__txt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px;
  margin: auto 20px auto 0;
  padding-top: 7px;
  background: url(../img/common/btn/icon_detail.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 750px) {

  .tanita-cafe.ambassador .btn.back {
    display: block;
    position: relative;
    width: 66.666%;
    margin: 91px auto 0;
    padding: 11px 0;
    background-color: #a97d73;
  }

  .tanita-cafe.ambassador .btn.back .btn__txt {
    font-size: 13px;
  }

  .tanita-cafe.ambassador .btn.back .btn__txt::before {
    width: 5.8%;
    margin: auto 4.238% auto 0;
    padding-top: 1.695%;
  }

}



/************************************************************************************************************************
以下レシピページ共通CSS
************************************************************************************************************************/

/* .inner
---------------------------------------------------------- */
.tanita-cafe.recipe .inner {
  width: 73.206%;
  max-width: 1000px;
}

@media screen and (max-width: 750px) {

  .tanita-cafe.recipe .inner {
    width: 78.666%;
    max-width: none;
  }

  .tanita-cafe.recipe .recipeMainVisual .inner {
    width: 100%;
  }

}

/* .tanita-cafe.recip .recipeListWrap__titBlock
---------------------------------------------------------- */
.recipeListWrap__titBlock {
  width: 73.206%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.tanita-cafe.recipe .tit {
  color: #3a1409;
  font-size: 30px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  line-height: 1.566;
  text-align: center;
}

@media screen and (max-width: 750px) {

  .tanita-cafe.recipe .tit {
    font-size: 18px;
    line-height: 1.388;
  }


}

/************************************************************
.recipeMainVisual
************************************************************/

.recipeMainVisual {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.recipeMainVisual::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 auto;
  padding-top: 49.487%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.recipeMainVisual__tit {
  padding-top: 14%;
}

.recipeMainVisual__tit .tit__txt {
  width: 27.8%;
  margin: 0 auto;
  padding-top: 15.2%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.recipeMainVisual__item {
  width: 33.8%;
  margin: 3% auto 0;
  padding-top: 27%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(16%);
}

@media all and (min-width: 751px) and (max-width: 1350px) {
  .recipeMainVisual__tit {
    padding-top: 6%!important;
  }
}

@media screen and (max-width: 750px) {

  .recipeMainVisual::before {
    display: none;
  }

  .recipeMainVisual .recipeMainVisual__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    width: 100%;
    margin: 14.666% 0 0;
    padding-top: 45.066%;
    background-image: url(../img/recipe/organic/recipeMainVisual/bg_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .recipeMainVisual__contents {
    display: flex;
    flex-wrap: wrap;
    padding: 70.133% 0 0;
  }

  .recipeMainVisual__tit {
    width: 40.133%;
    height: 0;
    margin: 0 0 0 7.733%;
    padding-top: 24.133%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .recipeMainVisual__tit .tit__txt {
    width: 100%;
    margin: 0;
  }

  .recipeMainVisual__item {
    width: 43.2%;
    margin: 4.533% 0 0 -1.066%;
    padding-top: 24%;
  }

}

@media screen and (min-width: 1366px) {

  .recipeMainVisual::before {
    padding-top: 676px;
  }

}

/************************************************************
.recipeListWrap
************************************************************/
.recipeListWrap {
  margin: 6.515% 0 0;
}

.recipeListWrap__bg {
  position: relative;
  margin: 6.2% 0 0;
  padding: 0 0 2.474%;
}

.recipeListWrap__bg__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  transform: -webkit-skewY(-6deg);
  transform: skewY(-6deg);
}

.recipeListWrap .inner {
  position: relative;
}

@media screen and (max-width: 750px) {

  .recipeListWrap {
    margin: 8.8% 0 0;
  }

  .recipeListWrap__bg {
    margin: 17.066% 0 0;
    transform: -webkit-skewY(-6deg);
    transform: skewY(-6deg);
  }

  .recipeListWrap .inner {
    transform: -webkit-skewY(6deg);
    transform: skewY(6deg);
  }

  .recipeListWrap__bg__inner {
    display: none;
  }

}

@media screen and (min-width: 1366px) {
  .recipeListWrap {
    margin-top: 39px;
  }

  .recipeListWrap__bg {
    margin-top: 85px;
    padding: 0 0 30px;
  }

}

/* .recipeList
---------------------------------------------------------- */
.recipeList {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  top: -28px;
  margin: 0 auto;
}

.recipeList .list__item {
  width: 21.7%;
  margin-left: 4.4%;
}

.recipeList .list__item:first-child,
.recipeList .list__item:nth-child(4n + 1) {
  margin-left: 0;
}

.recipeList .list__item:nth-child(n + 5) {
  margin-top: 3.7%;
}

.recipeList .item__img {
  display: block;
  width: 100%;
}

.recipeList .inline-link {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: .3s;
}

.recipeList .inline-link:hover {
  cursor: pointer;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.recipeList .item__tit {
  margin: 4.147% 0 0;
  color: #3a1409;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.625;
}

@media screen and (max-width: 1000px) {

  .recipeList .item__tit {
    font-size: 14px;
  }

}

@media screen and (max-width: 750px) {

  .recipeList {
    top: -38px;
  }

  .recipeList .list__item {
    width: 45.765%;
    margin-left: 0;
  }

  .recipeList .list__item:nth-child(2n) {
    margin-left: 8.465%;
  }

  .recipeList .list__item:nth-child(n + 3),
  .recipeList .list__item:nth-child(n + 5) {
    margin-top: 13.335%;
  }

  .recipeList .item__tit {
    margin: 5.926% 0 0;
    font-size: 13px;
    line-height: 1.384;
  }

}

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

  .recipeList .item__tit {
    font-size: 10px;
  }

}


/* .tanita-cafe.recipe .btn.back
---------------------------------------------------------- */
.tanita-cafe.recipe .btn.back {
  display: block;
  position: relative;
  width: 320px;
  margin: 87px auto 0;
  padding: 10px 0;
  background-color: #004839;
}

.tanita-cafe.recipe.almondMilk .btn.back {
  background-color: #6e2615;
}

.tanita-cafe.recipe .btn.back .btn__txt {
  display: block;
  position: relative;
  padding-right: 16px;
  color: #fff;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
}

.tanita-cafe.recipe .btn.back .btn__txt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 7px;
  margin: auto 20px auto 0;
  background: url(../img/common/btn/icon_detail.png) no-repeat center;
  background-size: contain;
}

@media screen and (max-width: 750px) {

  .tanita-cafe.recipe .btn.back {
    display: block;
    position: relative;
    width: 66.666%;
    margin: 21.066% auto 0;
    padding: 11px 0;
  }

  .tanita-cafe.recipe .btn.back .btn__txt {
    font-size: 13px;
  }

  .tanita-cafe.recipe .btn.back .btn__txt::before {
    width: 5.8%;
    margin: auto 4.238% auto 0;
    padding-top: 1.695%;
  }

}

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

  .tanita-cafe.recipe .btn.back .btn__txt {
    font-size: 10px;
  }

}

/************************************************************
.modalWrap
************************************************************/

/* .recipeModal .mfp-close
---------------------------------------------------------- */
.mfp-close-btn-in .mfp-close {
  opacity: 1;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  margin: 3.339% 4.553% 0 0;
}

.mfp-close:last-child:before,
.mfp-close:last-child:after {
  width: 36px;
  background-color: #004839;
}

.recipeModal.almondMilk .mfp-close:last-child:before,
.recipeModal.almondMilk .mfp-close:last-child:after {
  background-color: #6e2615;
}

.mfp-bg {
  background-color: #fff;
}

.recipeModal {
  position: relative;
  width: 73.206%;
  min-width: 745px;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}

.recipeModal .content__wrap {
  margin: 2px 0 0;
  border: 1px solid #004839;
  background-color: #fff;
}

.recipeModal.almondMilk .content__wrap {
  border: 1px solid #6e2615;
}

.content__inner {
  width: 87.865%;
  margin: 0 auto;
}

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

  .mfp-container {
    padding: 0;
  }

  .recipeModal .mfp-close:last-child:before,
  .recipeModal .mfp-close:last-child:after {
    top: 20px;
    left: 0;
    width: 36px;
  }

}

@media screen and (max-width: 750px) {

  .mfp-close-btn-in .mfp-close {
    width: 13px;
    height: 13px;
    margin: 4.657% 10.685% 0 0;
  }

  .mfp-close:last-child:before,
  .mfp-close:last-child:after {
    width: 17px;
  }

  .recipeModal {
    width: 97.333%;
    min-width: auto;
    min-width: initial;
    padding: 2px 0;
  }

  .content__inner {
    width: 80.826%;
  }
}

/* .recipeModal__name
---------------------------------------------------------- */
.recipeModal__name {
  color: #3a1409;
  text-align: center;
}

.recipeModal__name .name_s {
  display: block;
  padding: 5.308% 0 0;
  font-size: 16px;
}

.recipeModal__name .name_l {
  display: block;
  font-size: 30px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.recipeModal__lead-text {
  color: #3a1409;
  text-align: center;
  font-size: 16px;
  padding: 1em 0;
}
@media screen and (max-width: 750px){
  .recipeModal__lead-text {
    font-size: 13px;
  }
}

@media screen and (max-width: 750px) {

  .recipeModal__name .name_s {
    padding: 30px 0 0;
    font-size: 11px;
  }

  .recipeModal__name .name_l {
    margin: 12px 0 0;
    font-size: 18px;
  }

}


/* .recipeModal__calorie
---------------------------------------------------------- */
.recipeModal__calorie {
  width: 12.693%;
  min-width: 108px;
  margin: .692% 0 0 auto;
}

.recipeModal__calorie .calorie__txt {
  position: relative;
  color: #3a1409;
  font-size: 14px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.recipeModal__calorie .calorie__txt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 9.092%;
  height: 0;
  margin: -7.092% 0 0 -19.094%;
  padding-top: 21.822%;
  background-image: url(../img/common/modal/icon/icon_falk.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.recipeModal.almondMilk .recipeModal__calorie .calorie__txt::before {
  background-image: url(../img/common/modal/icon/icon_falk_brown.png);
}

@media screen and (max-width: 750px) {

  .recipeModal__calorie {
    width: 80px;
    margin: 3px auto 0;
  }

  .recipeModal__calorie .calorie__txt {
    font-size: 10px;
  }

  .recipeModal__calorie .calorie__txt::before {
    width: 5px;
    margin: -3px 0 0 -10px;
    padding-top: 12px;
    background-image: url(../img/common/modal/icon/icon_falk.png);
  }

}


/* .recipeModal__media
---------------------------------------------------------- */
.recipeModal__media {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1.369% 0 0;
}

.recipeModal__media .media__img {
  width: 40.629%;
}

.recipeModal__media .media__movie {
  position: relative;
  width: 56.949%;
  height: 0;
  margin-left: 2.424%;
  padding-top: 31.84%;
}

.recipeModal__media .media__movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: auto;
}

@media screen and (max-width: 750px) {

  .recipeModal__media {
    display: block;
    margin: 1.369% 0 0;
  }

  .recipeModal__media .media__img {
    width: 100%;
    margin: 0 auto;
  }

  .recipeModal__media .media__movie {
    width: 100%;
    margin: 6.271% auto 0;
    padding-top: 56.241%;
  }

}

/* .recipeModal__recipe
---------------------------------------------------------- */

.recipeModal__recipe {
  display: flex;
  flex-wrap: wrap;
  margin: 5.706% 0 0;
}

.recipeModal__recipe .recipe__tit {
  max-width: 423px;
  padding: 7px 0;
  color: #fff;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
  background-color: #004839;
}

.recipeModal.almondMilk .recipeModal__recipe .recipe__tit {
  background-color: #6e2615;
}

.recipeModal__recipe .recipe__item {
  width: 48.275%;
}

.recipeModal__recipe .recipe__step.recipe__item {
  width: 48.581%;
}

.recipeModal__recipe .recipe__item:nth-child(2n) {
  margin-left: 3.08%;
}

@media screen and (max-width: 750px) {

  .recipeModal__recipe {
    display: block;
  }

  .recipeModal__recipe .recipe__tit {
    max-width: inherit;
    padding: 7px 0;
    font-size: 13px;
  }

  .recipeModal__recipe .recipe__step.recipe__item {
    width: 100%;
  }

  .recipeModal__recipe .recipe__item {
    width: 100%;
  }

  .recipeModal__recipe .recipe__item:nth-child(2n) {
    margin-top: 12.611%;
    margin-left: 0;
  }

}

/* .recipeModal__recipe .recipe__material
---------------------------------------------------------- */
.recipeModal__recipe .recipe__material {}

.recipeModal__recipe .recipe__material .recipe__container {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin-top: 0;
}

.recipeModal__recipe .recipe__material .recipe__container:first-child {
  margin-top: 0;
}

.recipeModal__recipe .recipe__block {
  width: 48.135%;
}

.recipe__step .recipe__item {
  width: 48.581%;
}

.recipeModal__recipe .recipe__block:nth-child(2n) {
  margin-left: 2.98%;
}

.recipeModal__recipe .recipe__list {
  margin: 10.925% 0 0;
}

.recipeModal__recipe .recipe__list .list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.476%;
  border-top: 1px solid #a0938f;
}

.recipeModal__recipe .recipe__list .list__item:last-child {
  border-bottom: 1px solid #a0938f;
}

.recipeModal__recipe .recipe__list .list__item.list__nest {
  display: block;
}

.recipeModal__recipe .recipe__list .list__item.list__nest .item__block {
  display: flex;
  justify-content: space-between;
  margin-top: 5.959%;
}

.recipeModal__recipe .recipe__list .list__item.list__nest .item__block:first-child {
  margin-top: 0;
}

.recipeModal__recipe .recipe__name {
  display: inline-block;
  margin: 24px 0 0;
  padding: 3px 13.905%;
  color: #fff;
  font-size: 14px;
  text-align: center;
  background-color: #678982;
}

.recipeModal__recipe .item__name,
.recipeModal__recipe .item__description {
  letter-spacing: -0.2px;
}

.recipeModal__recipe .item__name {
  color: #3a1409;
  font-size: 13px;
}

.recipeModal__recipe .item__description {
  color: #3a1409;
  font-size: 13px;
  text-align: center;
}

.recipeModal__recipe .recipe__commentWrap {
  width: 100%;
  margin: 5.019% 0 0;
  text-align: right;
}

.recipeModal__recipe .recipe__comment {
  display: inline-block;
  color: #3a1409;
  font-size: 14px;
  text-align: left;
}

.recipeModal__recipe .recipe__sub_titWrap {
  width: 100%;
  margin: 5.019% 0 0;
}

.recipeModal__recipe .recipe__sub_tit {
  display: inline-block;
  color: #3a1409;
  font-size: 14px;
}

.recipeModal__recipe .recipe__attention {
  font-size: 12px;
}

.recipeModal__recipe .recipe__comment__tit+.recipe__attention {
  margin: 0 0 0 12px;
}

@media screen and (max-width: 750px) {
  .recipeModal__recipe .recipe__material {}

  .recipeModal__recipe .recipe__container {
    display: flex;
    flex-wrap: wrap;
  }

  .recipeModal__recipe .recipe__container:last-child {}

  .recipeModal__recipe .recipe__block {
    width: 100%;
  }

  .recipeModal__recipe .recipe__block:nth-child(2n) {
    margin-left: 0;
  }

  .recipeModal__recipe .recipe__list {
    margin: 5.112% 0 0;
  }

  .recipe__container .recipe__block+.recipe__block .recipe__list {
    margin-top: 0;
  }

  .recipeModal__recipe .recipe__list .list__item {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
  }

  .recipeModal__recipe .recipe__list .list__item:last-child {}

  .recipe__container .recipe__block+.recipe__block .recipe__list .list__item:first-child {
    border-top: 0;
  }

  .recipeModal__recipe .recipe__list .list__item.list__nest {
    display: block;
  }

  .recipeModal__recipe .recipe__list .list__item.list__nest .item__block {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
  }

  .recipeModal__recipe .recipe__list .list__item.list__nest .item__block:first-child {
    margin-top: 0;
  }

  .recipeModal__recipe .recipe__name {
    margin: 5.112% 0 0;
    padding: 1px 17px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    background-color: #678982;
  }

  .recipeModal__recipe .item__name {
    color: #3a1409;
    font-size: 13px;
  }

  .recipeModal__recipe .item__description {
    font-size: 13px;
  }

  .recipeModal__recipe .recipe__commentWrap {
    margin: 2.726% 0 0;
  }

  .recipeModal__recipe .recipe__comment {
    font-size: 11px;
  }

  .recipeModal__recipe .recipe__sub_tit {
    font-size: 13px;
  }

  .recipeModal__recipe .recipe__attention {
    font-size: 10px;
  }

}


/* .recipeModal__recipe .recipe__step
---------------------------------------------------------- */
.recipeModal__recipe .recipe__step .recipe__container+.recipe__container {
  margin-top: 20px;
}

.recipeModal__recipe .recipe__step .recipe__list {
  margin: 2.612% 0 0;
}

.recipeModal__recipe .recipe__step .recipe__list .list__item {
  flex-wrap: wrap;
  justify-content: inherit;
  align-items: center;
}

.recipeModal__recipe .recipe__step .recipe__list .list__item:first-child {
  border-top: 0;
}

.recipeModal__recipe .recipe__step .recipe__block {
  width: 100%;
  margin: 0 0 0 auto;
}

.recipeModal__recipe .recipe__step .recipe__tit {
  margin: 0 0 0 auto;
}

.recipeModal__recipe .item__num {
  width: 3.8%;
  height: 0;
  padding-top: 5.463%;
  background-image: url(../img/common/modal/icon/txt_num_01.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.recipeModal__recipe .list__item:nth-child(2) .item__num {
  background-image: url(../img/common/modal/icon/txt_num_02.png);
}

.recipeModal__recipe .list__item:nth-child(3) .item__num {
  background-image: url(../img/common/modal/icon/txt_num_03.png);
}

.recipeModal__recipe .list__item:nth-child(4) .item__num {
  background-image: url(../img/common/modal/icon/txt_num_04.png);
}

.recipeModal__recipe .list__item:nth-child(5) .item__num {
  background-image: url(../img/common/modal/icon/txt_num_05.png);
}

.recipeModal__recipe .list__item:nth-child(6) .item__num {
  background-image: url(../img/common/modal/icon/txt_num_06.png);
}

.recipeModal__recipe .list__item:nth-child(7) .item__num {
  background-image: url(../img/common/modal/icon/txt_num_07.png);
}

.recipeModal__recipe .list__item:nth-child(8) .item__num {
  background-image: url(../img/common/modal/icon/txt_num_08.png);
}

.recipeModal__recipe .list__item:nth-child(9) .item__num {
  background-image: url(../img/common/modal/icon/txt_num_09.png);
}

.recipeModal__recipe .item__num .recipeModal__recipe .item__step {
  color: #3a1409;
}

.recipeModal__recipe .item__step {
  width: calc(100% - 24px - 16px);
  margin-left: 24px;
  color: #3a1409;
  font-size: 16px;
  letter-spacing: 0;
}

.recipeModal__recipe .item__step__tit {
  display: block;
}

@media screen and (max-width: 750px) {

  .recipeModal__recipe .recipe__step .recipe__list {
    margin: 11px 0 0;
  }

  .recipeModal__recipe .recipe__step .recipe__list .list__item {
    flex-wrap: wrap;
    justify-content: inherit;
  }

  .recipeModal__recipe .recipe__step .recipe__container:last-child {
    padding: 0;
  }

  .recipeModal__recipe .recipe__step .recipe__block {
    width: 96.094%;
    margin: 0 0 0 auto;
  }

  .recipeModal__recipe .item__num {
    width: 8px;
    padding-top: 12px;
  }

  .recipeModal__recipe .list__item:nth-child(2) .item__num {
    background-image: url(../img/common/modal/icon/txt_num_02.png);
  }

  .recipeModal__recipe .list__item:nth-child(3) .item__num {
    background-image: url(../img/common/modal/icon/txt_num_03.png);
  }

  .recipeModal__recipe .list__item:nth-child(4) .item__num {
    background-image: url(../img/common/modal/icon/txt_num_04.png);
  }

  .recipeModal__recipe .item__step {
    width: calc(100% - 24px - 16px);
    margin-left: 24px;
    font-size: 13px;
  }

}

/* .recipeModal__recipe .recipe__point
---------------------------------------------------------- */
.recipeModal__recipe .recipe__point {
  width: 89.475%;
  margin: 27px auto 0;
  padding: 9px 18px;
  background-color: #c4d6d2;
}

.recipeModal.almondMilk .recipeModal__recipe .recipe__point {
  background-color: #d6c4c4;
}

.recipeModal__recipe .recipe__point .point__txt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.recipeModal__recipe .recipe__point .txt__tit {
  display: block;
  position: relative;
  width: 58px;
  color: #004839;
  font-size: 20px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

.recipeModal.almondMilk .recipeModal__recipe .recipe__point .txt__tit {
  color: #6e2615;
}

.recipeModal__recipe .recipe__point .txt__tit::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 33px;
  height: 0;
  margin: auto -44px auto 0;
  border-top: 1px solid #004839;
}

.recipeModal.almondMilk .recipeModal__recipe .recipe__point .txt__tit::before {
  border-top: 1px solid #6e2615;
}

.recipeModal__recipe .recipe__point .txt__description {
  display: block;
  width: calc(100% - 58px - 58px);
  margin: 0 0 0 58px;
  color: #3a1409;
  font-size: 16px;
  letter-spacing: 0;
}

@media screen and (max-width: 750px) {
  .recipeModal__recipe .recipe__point {
    width: 100%;
    margin: 6.817% auto 0;
    padding: 12px 15px;
  }

  .recipeModal__recipe .recipe__point .txt__tit {
    width: 40px;
    font-size: 13px;
  }

  .recipeModal__recipe .recipe__point .txt__tit::before {
    width: 16px;
    margin: auto -18px auto 0;
  }

  .recipeModal__recipe .recipe__point .txt__description {
    width: calc(100% - 40px - 28px);
    margin: 0 0 0 28px;
    font-size: 12px;
  }

}

/* .recipeModal__recipe .closeBtn
---------------------------------------------------------- */
.recipeModal__recipe .closeBtn {
  position: relative;
  width: 23.079%;
  max-width: 200px;
  margin: 3.808% auto 5.769%;
  padding: 1.153% 0;
  color: #fff;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
  background: #004839;
  transition: .3s;
}

.recipeModal.almondMilk .recipeModal__recipe .closeBtn {
  background: #6e2615;
}

.recipeModal__recipe .closeBtn:before,
.recipeModal__recipe .closeBtn:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 2px;
  margin: auto 15.001% auto 0;
}

.recipeModal__recipe .closeBtn:before {
  width: 18px;
  background-color: #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.recipeModal__recipe .closeBtn:after {
  width: 18px;
  background-color: #fff;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.recipeModal__recipe .closeBtn:hover {
  cursor: pointer;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

@media screen and (max-width: 750px) {

  .recipeModal__recipe .closeBtn {
    width: 54.255%;
    margin: 10.225% auto 11.589%;
    padding: 8px 0;
    font-size: 13px;
  }

  .recipeModal__recipe .closeBtn:before,
  .recipeModal__recipe .closeBtn:after {
    margin-right: 15.079%;
  }

  .recipeModal__recipe .closeBtn:before {
    width: 14px;
  }

  .recipeModal__recipe .closeBtn:after {
    width: 14px;
  }

}


/************************************************************************************************************************
以下オーガニックレシピページCSS
************************************************************************************************************************/

/************************************************************
.organicRecipeMainVisual
************************************************************/
.organicRecipeMainVisual::before {
  background-image: url(../img/recipe/organic/recipeMainVisual/bg.png);
}

.organicRecipeMainVisual .recipeMainVisual__tit .tit__txt {
  background-image: url(../img/recipe/organic/recipeMainVisual/tit.png);
}

.organicRecipeMainVisual .recipeMainVisual__item {
  background-image: url(../img/recipe/organic/recipeMainVisual/img_item.png);
}

@media screen and (max-width: 750px) {

  .organicRecipeMainVisual .recipeMainVisual__tit {
    background-image: url(../img/recipe/organic/recipeMainVisual/tit_sp.png);
  }

  .organicRecipeMainVisual .recipeMainVisual__tit .tit__txt {
    background-image: none;
  }

  .organicRecipeMainVisual .recipeMainVisual__item {
    background-image: url(../img/recipe/organic/recipeMainVisual/img_item_sp.png);
    background-size: contain;
    padding-top: 35%;
    margin: -4.533% 0 0 1.066%;
  }

}

/************************************************************
.recipeListWrap.organicRecipe
************************************************************/
.tanita-cafe.recipe.organic .recipeListWrap__bg__inner {
  background-image: linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(140, 175, 164, .6) 71%, rgba(51, 108, 95, .6) 89%);
  background-image: -webkit-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(140, 175, 164, .6) 71%, rgba(51, 108, 95, .6) 89%);
  background-image: -ms-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(140, 175, 164, .6) 71%, rgba(51, 108, 95, .6) 89%);
}

@media screen and (max-width: 750px) {

  .tanita-cafe.recipe.organic .recipeListWrap__bg {
    background-image: linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -webkit-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -ms-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
  }

}

/* .organicRecipe .bg_circle
---------------------------------------------------------- */
.organicRecipe .bg_circle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 40%;
  height: 0;
  margin: -27.5% -41.7% 0 0;
  padding-top: 40%;
  background-image: url(../img/recipe/organic/organicRecipe/bg_circle.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .organicRecipe .bg_circle {
    margin: 0;
    padding-top: 30%;
    background-image: url(../img/recipe/organic/organicRecipe/bg_circle.png);
  }

}

/************************************************************
.pastRecipe
************************************************************/
.pastRecipe {
  margin: 9.516% 0 0;
}

@media screen and (max-width: 750px) {

  .pastRecipe {
    margin: 10.133% 0 0;
  }

}

@media screen and (min-width: 1366px) {

  .pastRecipe {
    margin-top: 130px;
  }

}


/* .pastRecipe .bg_spoon
---------------------------------------------------------- */
.pastRecipe .bg_spoon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 50%;
  height: 0;
  margin: -26.8% 0 0 -42.5%;
  padding-top: 50%;
  background-image: url(../img/recipe/organic/pastRecipe/bg_spoon.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .pastRecipe .bg_spoon {
    width: 50.681%;
    height: 0;
    margin: -62.716% 0 0 -13.56%;
    padding-top: 59.326%;
    background-image: url(../img/recipe/organic/pastRecipe/bg_spoon_sp.png);
  }

}

/* .pastRecipe .bg_soy
---------------------------------------------------------- */
.pastRecipe .bg_soy {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 42%;
  height: 0;
  margin: 0 -42.1% -22.1% 0;
  padding-top: 38%;
  background-image: url(../img/recipe/organic/pastRecipe/bg_soy.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .pastRecipe .bg_soy {
    width: 50.85%;
    margin: 0 -13.56% -29.154% 0;
    padding-top: 50.85%;
    background-image: url(../img/recipe/organic/pastRecipe/bg_soy_sp.png);
  }

}

/************************************************************************************************************************
以下アーモンドミルクレシピページCSS
************************************************************************************************************************/

/************************************************************
.almondMilkRecipeMainVisual
************************************************************/
.recipeMainVisual .recipeMainVisual__bg {
  background-image: url(../img/recipe/almondMilk/recipeMainVisual/bg_sp.png);
}

.almondMilkRecipeMainVisual::before {
  background-image: url(../img/recipe/almondMilk/recipeMainVisual/bg.png);
}

.almondMilkRecipeMainVisual .recipeMainVisual__tit .tit__txt {
  background-image: url(../img/recipe/almondMilk/recipeMainVisual/tit.png);
}

.almondMilkRecipeMainVisual .recipeMainVisual__item {
  background-image: url(../img/recipe/almondMilk/recipeMainVisual/img_item.png);
}

@media screen and (max-width: 750px) {

  .almondMilkRecipeMainVisual .recipeMainVisual__tit {
    background-image: url(../img/recipe/almondMilk/recipeMainVisual/tit_sp.png);
  }

  .almondMilkRecipeMainVisual .recipeMainVisual__tit .tit__txt {
    background-image: none;
  }

  .almondMilkRecipeMainVisual .recipeMainVisual__item {
    background-image: url(../img/recipe/almondMilk/recipeMainVisual/img_item_sp.png);
  }

}

@media screen and (min-width: 1366px) {

  .almondMilkRecipeMainVisual::before {
    padding-top: 690px;
  }

}


/************************************************************
.almondMilkRecipe
************************************************************/
.almondMilkRecipe .recipeListWrap__bg__inner {
  background-image: linear-gradient(4deg, rgba(110, 38, 21, .6) 11%, rgba(183, 144, 135, .6) 34%, rgba(255, 249, 248, .6) 100%);
  background-image: -webkit-linear-gradient(4deg, rgba(110, 38, 21, .6) 11%, rgba(183, 144, 135, .6) 34%, rgba(255, 249, 248, .6) 100%);
  background-image: -ms-linear-gradient(4deg, rgba(110, 38, 21, .6) 11%, rgba(183, 144, 135, .6) 34%, rgba(255, 249, 248, .6) 100%);
}

@media screen and (max-width: 750px) {

  .almondMilkRecipe .recipeListWrap__bg {
    background-image: linear-gradient(4deg, rgba(110, 38, 21, .6) 11%, rgba(183, 144, 135, .6) 34%, rgba(255, 249, 248, .6) 100%);
    background-image: -webkit-linear-gradient(4deg, rgba(110, 38, 21, .6) 11%, rgba(183, 144, 135, .6) 34%, rgba(255, 249, 248, .6) 100%);
    background-image: -ms-linear-gradient(4deg, rgba(110, 38, 21, .6) 11%, rgba(183, 144, 135, .6) 34%, rgba(255, 249, 248, .6) 100%);
  }

}

/* .almondMilkRecipe .bg_circle
---------------------------------------------------------- */
.almondMilkRecipe .bg_circle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 40%;
  height: 0;
  margin: -27.4% -41.8% 0 0;
  padding-top: 40%;
  background-image: url(../img/recipe/almondMilk/almondMilkRecipe/bg_circle.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .almondMilkRecipe .bg_circle {
    display: none;
    background-image: none;
  }

}

/* .almondMilkRecipe .bg_spoon
---------------------------------------------------------- */
.almondMilkRecipe .bg_spoon {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 38%;
  height: 0;
  margin: 0 0 -30.8% -34.2%;
  padding-top: 33%;
  background-image: url(../img/recipe/almondMilk/almondMilkRecipe/bg_spoon.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .almondMilkRecipe .bg_spoon {
    width: 45.596%;
    margin: 0 0 -33.9% -13.56%;
    padding-top: 45.765%;
    background-image: url(../img/recipe/almondMilk/almondMilkRecipe/bg_spoon_sp.png);
  }

}

/* .almondMilkRecipe .bg_almond
---------------------------------------------------------- */
.almondMilkRecipe .bg_almond {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 38%;
  height: 0;
  margin: 0 -27% 1.3% 0;
  padding-top: 28%;
  background-image: url(../img/recipe/almondMilk/almondMilkRecipe/bg_almond.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {

  .almondMilkRecipe .bg_almond {
    display: none;
    background-image: none;
  }

}



/************************************************************************************************************************
以下開発者の声ページCSS
************************************************************************************************************************/

/************************************************************
.developersMainVisual
************************************************************/
.developersMainVisual {
  background-image: url(../img/developersVoice/developersMainVisual/bg.png);
  background-position: 45% 100%;
  background-size: 150%;
}

@media screen and (max-width: 750px) {

  .developersMainVisual__bg {
    background-image: url(../img/developersVoice/developersMainVisual/bg_sp.png);
  }

}

/* .developersMainVisual__item
---------------------------------------------------------- */
.developersMainVisual__item {
  padding: 7% 0 5%;
  justify-content: center;
}
.developersMainVisual__item .item__txt {
  width: 23%;
  padding-top: 13.6%;
  background-image: url(../img/developersVoice/developersMainVisual/text_detail.png);
}

.developersMainVisual__item .item__img {
  position: relative;
  background-image: url(../img/developersVoice/developersMainVisual/img_item.png);
  background-size: contain;
  background-position: left;
  margin: 0 18% 0 7%;
  padding-top: 30%;
}

.developersMainVisual__item .item__bg {
  position: absolute;
  bottom: 0;
  left: 29%;
  width: 28.001%;
  height: 0;
  margin: -8.4% -15.8% 0 0;
  padding-top: 20%;
  background-image: url(../img/developersVoice/developersMainVisual/bg_soy.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media screen and (max-width: 750px) {
  .developersMainVisual__item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 0 5%;
  }
  .developersMainVisual__item .item__txt {
    width: 62%;
    margin-left: 0;
    padding-top: 30.68%;
    background-image: url(../img/developersVoice/developersMainVisual/text_detail_sp.png);
    background-size: contain;
  }

  .developersMainVisual__item .item__img {
    width: 38%;
    background-image: url(../img/organic/organicMainVisual/img_item_sp.png);
    margin: 0 0 0 6%;
    padding-top: 45%;
  }

  .developersMainVisual__item .item__bg {
    display: none;
  }
}

/************************************************************
.developersIntro
************************************************************/
.developersIntro-intro {
  margin: 53px 0 0;
  color: #3a1409;
  font-size: 16px;
  text-align: center;
  line-height: 1.9375;
}

@media screen and (max-width: 750px) {
  .developersIntro-intro {
    margin: 35px 0 0;
    font-size: 13px;
    text-align: left;
    line-height: 1.923;
  }
}

/************************************************************
.developersMember
************************************************************/
.developersMember {
  position: relative;
  margin-top: 94px;
  padding: 4.685% 0 6.588%;
}

.developersMember__bg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  margin: 0 auto;
  height: 100%;
  transform: skewY(-6deg);
  -webkit-transform: skewY(-6deg);
  background-image: -moz-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
  background-image: -webkit-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
  background-image: -ms-linear-gradient(4deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);

}

.developersMember__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.developersMember__list .list__item {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 32.5%;
  margin-left: 1.2%;
  padding-bottom: 2px;
  background-color: #fff;
  box-shadow: 0px 4px 5.7px 0.3px rgba(4, 0, 0, 0.2);
}

.developersMember__list .list__item:nth-child(n + 4) {
  margin-top: 13.3%;
}

.developersMember__list .list__item:first-child,
.developersMember__list .list__item:nth-child(4) {
  margin-left: 0;
}

.developersMember__list .list__contenst {
  position: relative;
  width: 100%;
  padding: 0 0 17.847%;
}

.developersMember__note {
  position: relative;
  text-align: right;
  font-size: 14px;
  margin-top: 40px;
  color: #3a1409;
  padding: 0 0 0 16px;
}
.developersMember__note span {
  display: inline-block;
    position: relative;
    text-indent: -16px;
}

@media screen and (max-width: 750px) {

  .developersMember {
    margin-top: 20.533%;
    padding: 7.466% 0 17.866%;
    -webkit-transform: skewY(-6deg);
    transform: skewY(-6deg);
    background-image: -moz-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -webkit-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
    background-image: -ms-linear-gradient(-1deg, rgba(229, 241, 233, .6) 1%, rgba(150, 194, 181, .6) 80%, rgba(70, 146, 129, .6) 99%);
  }

  .developersMember__bg {
    display: none;
  }

  .developersMember .inner {
    -webkit-transform: skewY(6deg);
    transform: skewY(6deg);
  }

  .developersMember__list {
    display: block;
  }

  .developersMember__list .list__item {
    display: block;
    width: 100%;
    margin: 24.069% 0 0;
    padding-bottom: 0;
  }

  .developersMember__list .list__item:nth-child(n + 4) {
    margin-top: 25.086%;
  }

  .developersMember__list .list__item:first-child {
    margin-top: 0;
  }

  .developersMember__list .list__contenst {
    padding: 0 0 10.17%;
  }

  .developersMember__note {
    text-align: left;
    margin-top: 24px;
  }

  .developersMember__note {
    font-size: 13px;
  }

}

@media screen and (min-width: 1366px) {

  .developersMember {
    padding: 64px 0 90px;
  }

  .developersMember__bg {
    padding-top: 1031px;
  }

}

/* .developersMember__list .list__top
---------------------------------------------------------- */
.developersMember__list .list__top {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  padding: 50.461% 0 0;
}

.developersMember__list .list__img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 61.846%;
  max-width: 61.846%;
  margin: -50px auto 0;
}

@media screen and (max-width: 750px) {

  .developersMember__list .list__top {
    display: block;
    padding: 34.239% 0 0;
  }

  .developersMember__list .list__img {
    top: 0;
    left: 0;
    right: 0;
    width: 50.85%;
    max-width: initial;
    max-width: none;
    margin: -16.611% auto 0;
  }

}


/* .developersMember__list .list__bottom
---------------------------------------------------------- */
.developersMember__list .list__bottom {
  margin-top: 4.923%;
}

.developersMember__list .list__name {
  padding: 0 7.692%;
  color: #3a1409;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
}

.developersMember__list .list__name .name_s {
  display: block;
  font-size: 13px;
}

.developersMember__list .list__name .name_l {
  display: block;
  font-size: 20px;
}

.developersMember__list .name_kana {
  font-size: 12px;
}

.developersMember .list__description {
  margin-top: 4.923%;
  padding: 0 7.692%;
  font-size: 14px;
  line-height: 2;
}

@media screen and (max-width: 750px) {

  .developersMember__list .list__bottom {
    margin-top: 4.407%;
  }

  .developersMember__list .list__name {}

  .developersMember__list .list__name .name_s {
    font-size: 10px;
  }

  .developersMember__list .list__name .name_l {
    font-size: 16px;
  }

  .developersMember__list .name_kana {
    font-size: 11px;
  }

  .developersMember .list__description {
    font-size: 13px;
    line-height: 1.923;
  }

}

/* .developersMember .list__interview
---------------------------------------------------------- */
.developersMember .list__interview {
  margin-top: 26px;
}

.developersMember .interview-list .item__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.developersMember .interview-list .item__list {
  margin-top: 16px;
}

.developersMember .interview-list .item__list:first-child {
  margin-top: 0;
}

.developersMember .interview-list .item__icon {
  display: block;
  width: 9.23%;
  padding-top: 8%;
  background-image: url(../img/developersVoice/developersMember/icon/icon_interview.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.developersMember .interview-list .item__des {
  width: 64.615%;
  margin-left: 6.769%;
  color: #3a1409;
  font-size: 14px;
}

.developersMember .interview-list .item__des-link {
  text-decoration: underline;
}

.developersMember .interview-list .item__des-link:hover {
  text-decoration: none;
}

@media screen and (max-width: 750px) {

  .developersMember .interview-list .item__list {
    margin-top: 5.424%;
  }

  .developersMember .interview-list .item__icon {
    width: 8.136%;
    margin-left: 3.729%;
    padding-top: 7.119%;
    background-image: url(../img/developersVoice/developersMember/icon/icon_interview_sp.png);
  }

  .developersMember .interview-list .item__des {
    width: 74.242%;
    font-size: 13px;
  }

}


/* .tanita-cafe.developersVoice .btn.back
---------------------------------------------------------- */
.tanita-cafe.developersVoice .btn.back {
  display: block;
  position: relative;
  width: 277px;
  margin: 57px auto 0;
  padding: 10px 0;
  background-color: #004839;
}

.tanita-cafe.developersVoice .btn.back .btn__txt {
  display: block;
  position: relative;
  color: #fff;
  font-size: 16px;
  font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center;
}

.tanita-cafe.developersVoice .btn.back .btn__txt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  margin: auto 0 auto 20px;
  padding-top: 7px;
  background: url(../img/common/btn/icon_detail.png) no-repeat center;
  background-size: contain;
  transform: scale(-1, 1);
}

@media screen and (max-width: 750px) {

  .tanita-cafe.developersVoice .btn.back {
    display: block;
    position: relative;
    width: 66.666%;
    margin: 44px auto 0;
    padding: 11px 0;
  }

  .tanita-cafe.developersVoice .btn.back .btn__txt {
    font-size: 13px;
  }

  .tanita-cafe.developersVoice .btn.back .btn__txt::before {
    width: 5.6%;
    height: 0;
    margin: auto 0 auto 6.4%;
    padding-top: 2%;
  }

}


/************************************************************************************************************************
以下開発者の声詳細ページCSS
************************************************************************************************************************/

/************************************************************
.devMv
************************************************************/
@media screen and (min-width: 751px) {
  .devMv {
    position: relative;
    padding: 168px 0 0;
  }

  .devMv__inner {
    position: relative;
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 751px) and (max-width: 1350px) {
  .devMv {
    position: relative;
    padding: 4% 0 0;
  }
}

@media screen and (max-width: 750px) {
  .devMv {
    position: relative;
    padding: 24% 0 0;
  }

  .devMv__inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
  }
}

/* .devMv__ttl
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .devMv__ttl {
    width: 230px;
    height: 0;
    margin: 0 auto 0;
    padding-top: 136px;
    background-image: url(../img/developersVoice/detail/common/devMv/ttl.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

@media screen and (max-width: 750px) {
  .devMv__ttl {
    width: 78.666%;
    height: 0;
    margin: 0 auto 0;
    padding-top: 24.133%;
    background-image: url(../img/developersVoice/detail/common/devMv/ttl_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

/* .devMv-bg
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .devMv-bg {
    position: absolute;
    bottom: 0;
    height: 0;
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .devMv-bg--spoon {
    left: 0;
    width: 30.746%;
    margin: 0 0 -26.72% -12.005%;
    padding-top: 32.21%;
    background-image: url(../img/developersVoice/detail/common/devMv/bg_spoon.png);
  }

  .devMv-bg--soy {
    right: 0;
    width: 380px;
    margin: 0 -5.051% -11.859% 0;
    padding-top: 23.426%;
    background-image: url(../img/developersVoice/detail/common/devMv/bg_soy.png);
  }
}

@media screen and (min-width: 1366px) {
  .devMv-bg--spoon {
    left: 0;
    width: 420px;
    margin: 0 0 -365px -164px;
    padding-top: 440px;
  }

  .devMv-bg--soy {
    right: 0;
    width: 380px;
    margin: 0 -69px -162px 0;
    padding-top: 320px;
  }
}

@media screen and (max-width: 750px) {
  .devMv-bg {
    position: absolute;
    bottom: 0;
    height: 0;
    z-index: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .devMv-bg--spoon {
    left: 0;
    width: 22.666%;
    margin: 0 0 0 0;
    padding-top: 32%;
    background-image: url(../img/developersVoice/detail/common/devMv/bg_spoon_sp.png);
  }

  .devMv-bg--soy {
    right: 0;
    width: 22.666%;
    margin: 0 0 -1.6% 0;
    padding-top: 32%;
    background-image: url(../img/developersVoice/detail/common/devMv/bg_soy_sp.png);
  }
}

/************************************************************
.devArticle
************************************************************/
@media screen and (min-width: 751px) {
  .devArticle {
    position: relative;
    margin: 171px 0 0;
    padding: 120px 0 0;
  }

  .devArticle__inner {
    width: 78.274%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 750px) {
  .devArticle {
    position: relative;
    margin: 30.4% 0 0;
    padding: 11.2% 0 15.2%;
  }

  .devArticle__inner {
    width: 82.608%;
    margin: 0 auto;
  }
}

/* .devArticle-bg
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .devArticle-bg {
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background-image: -moz-linear-gradient(4deg, rgb(229, 241, 233) 1%, rgb(150, 194, 181) 80%, rgb(70, 146, 129) 99%);
    background-image: -webkit-linear-gradient(4deg, rgb(229, 241, 233) 1%, rgb(150, 194, 181) 80%, rgb(70, 146, 129) 99%);
    background-image: -ms-linear-gradient(4deg, rgb(229, 241, 233) 1%, rgb(150, 194, 181) 80%, rgb(70, 146, 129) 99%);
    transform: skewY(-6deg);
    -webkit-transform: skewY(-6deg);
  }
}

@media screen and (max-width: 750px) {
  .devArticle-bg {
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background-image: -moz-linear-gradient(-1deg, rgb(229, 241, 233) 1%, rgb(150, 194, 181) 80%, rgb(70, 146, 129) 99%);
    background-image: -webkit-linear-gradient(-1deg, rgb(229, 241, 233) 1%, rgb(150, 194, 181) 80%, rgb(70, 146, 129) 99%);
    background-image: -ms-linear-gradient(-1deg, rgb(229, 241, 233) 1%, rgb(150, 194, 181) 80%, rgb(70, 146, 129) 99%);
    opacity: 0.6;
    -webkit-transform: skewY(-6deg);
  }
}

/* .devArticle-contents
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .devArticle-contents {
    position: relative;
    width: 80.527%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 86px;
    background-color: #fff;
    box-shadow: 0px 4px 5.7px 0.3px rgba(4, 0, 0, 0.2);
  }
}

@media screen and (max-width: 750px) {
  .devArticle-contents {
    position: relative;
    width: 92%;
    margin: 0 auto;
    padding: 0 0 15.466%;
    background-color: #fff;
    box-shadow: 0px 4px 5.7px 0.3px rgba(4, 0, 0, 0.2);
  }
}

/* .devArticle-photo
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .devArticle-photo-wrap {
    padding-top: 13.363%;
  }

  .devArticle-photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 54.546%;
    margin: -21% auto 0;
  }
}

@media screen and (max-width: 750px) {
  .devArticle-photo-wrap {
    padding-top: 15.652%;
  }

  .devArticle-photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 74.637%;
    margin: -31.449% auto 0;
  }
}

/* .devArticle-name
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .devArticle-name {
    margin: 28px 0 0;
    color: #3a1409;
    text-align: center;
  }

  .devArticle-name--s {
    display: block;
    font-size: 14px;
  }

  .devArticle-name--b {
    font-size: 24px;
  }

  .devArticle-name--kana {
    font-size: 14px;
  }
}

@media screen and (max-width: 750px) {
  .devArticle-name {
    margin: 4.927% 0 0;
    color: #3a1409;
    text-align: center;
  }

  .devArticle-name--s {
    display: block;
    margin: 0 0 3px;
    font-size: 10px;
  }

  .devArticle-name--b {
    font-size: 16px;
  }

  .devArticle-name--kana {
    font-size: 11px;
  }
}

/* .devArticle-tab-list
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .devArticle-tab-wrap {
    margin: 33px 0 0;
  }

  .devArticle-tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
  }

  .devArticle-tab-list .list__item {
    width: 42.728%;
  }

  .devArticle-tab-list .item__contents {
    padding: 11px 20px;
    border: 1px solid #004839;
  }

  .devArticle-tab-list .is-active .item__contents {
    padding: 19px 20px;
    background-color: #004839;
    transition: opacity .3s;
  }

  .devArticle-tab-list .item__contents:hover {
    cursor: pointer;
    opacity: .8;
  }

  .devArticle-tab-list .item__ttl {
    color: #004839;
    font-size: 14px;
    text-align: center;
  }

  .devArticle-tab-list .is-active .item__ttl {
    color: #fff;
  }
}

@media screen and (max-width: 750px) {
  .devArticle-tab-wrap {
    margin: 5.217% 0 0;
  }

  .devArticle-tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
  }

  .devArticle-tab-list .list__item {
    width: 45.797%;
  }

  .devArticle-tab-list .item__contents {
    padding: 3.797% 8.861%;
    border: 1px solid #004839;
  }

  .devArticle-tab-list .is-active .item__contents {
    padding: 4.43% 8.861%;
    background-color: #004839;
    transition: opacity .3s;
  }

  .devArticle-tab-list .item__contents:hover {
    cursor: pointer;
    opacity: .8;
  }

  .devArticle-tab-list .item__ttl {
    color: #004839;
    font-size: 10px;
  }

  .devArticle-tab-list .is-active .item__ttl {
    color: #fff;
  }
}

/* .js-devArticle-tabArticle
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .js-devArticle-tabArticle {
    display: none;
  }

  .js-devArticle-tabArticle.is-visivle {
    display: block;
  }
}

@media screen and (max-width: 750px) {
  .js-devArticle-tabArticle {
    display: none;
  }

  .js-devArticle-tabArticle.is-visivle {
    display: block;
  }
}

/* .devArticle-ttl
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .devArticle-ttl-wrap {
    margin: 33px 0 0;
  }

  .devArticle-ttl {
    position: relative;
    color: #3a1409;
    font-size: 26px;
    line-height: 1.8461;
    text-align: center;
  }

  .devArticle-ttl::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    margin: 0 auto -13px;
    border-bottom: 1px solid #004839;
  }
}

@media screen and (max-width: 750px) {
  .devArticle-ttl-wrap {
    margin: 6.376% 0 0;
  }

  .devArticle-ttl {
    position: relative;
    color: #3a1409;
    font-size: 17px;
    line-height: 1.588;
    text-align: center;
  }

  .devArticle-ttl::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    margin: 0 auto -10px;
    border-bottom: 1px solid #004839;
  }
}

/* .devArticle-des
---------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .devArticle-des-wrap {
    margin: 51px 0 0;
  }

  .devArticle-des {
    position: relative;
    color: #3a1409;
    font-size: 16px;
    line-height: 1.75;
  }

  .devArticle-des+.devArticle-des {
    margin-top: 25px;
  }
}

@media screen and (max-width: 750px) {
  .devArticle-des-wrap {
    margin: 9.565% 0 0;
  }

  .devArticle-des {
    position: relative;
    color: #3a1409;
    font-size: 13px;
    line-height: 1.923;
  }

  .devArticle-des+.devArticle-des {
    margin-top: 4.057%;
  }
}


html {
  scroll-behavior: smooth;
}