@charset "UTF-8";
/* ***************************************************************** */
/* basic */
/* ***************************************************************** */
.colnum1 p, .colnum2 p {
  margin-bottom: 0;
  text-align: left;
}
table {
  margin: 15px auto 20px;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
/* ***************************************************************** */
/* page */
/* ***************************************************************** */
.millionpower {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  font-size: 112.5%;
  font-feature-settings: "palt";
  /* ---------------------------------------- */
  /* 季節ごと変更エリア */
  /* ---------------------------------------- */
  /* ---------------------------------------- */
  /* ミリオンパワーの特徴 */
  /* ---------------------------------------- */
  /* ---------------------------------------- */
  /* 良質な国産福地ホワイト六片種を採用！ */
  /* ---------------------------------------- */
  /* ---------------------------------------- */
  /* 届いています、喜びの声！ */
  /* ---------------------------------------- */
}
.millionpower h4 {
  margin-bottom: 0.25em;
}
.millionpower img {
  width: 100%;
  margin-bottom: 0;
}
.millionpower .lead {
  color: #f09c41;
  font-weight: bold;
}
.millionpower .detail,
.millionpower .photo {
  margin-bottom: 15px;
}
.millionpower .mainVisual {
  margin-bottom: 30px;
}
.millionpower .cartWrapper {
  font-size: 55%;
}
.millionpower .cartWrapper .productDetail .image img {
  width: 49%;
}
.millionpower .newArea {
  margin-bottom: 30px;
}
.millionpower .newArea .sec02 {
  margin-bottom: 20px;
  padding: 20px;
  background: #e7f7ff;
}
.millionpower .newArea .sec02 h3 {
  width: 75%;
  margin: auto;
}
.millionpower .newArea .sec02 .block01 {
  margin: 15px auto;
}
.millionpower .newArea .sec02 .photo01 {
  width: 50%;
  margin: 0 auto 10px;
}
.millionpower .newArea .closing {
  width: 100%;
}
.millionpower .newArea .closing img {
  width: 100%;
}
.millionpower #point {
  margin-bottom: 30px;
  border-left: #dbeacd solid 1px;
  border-right: #dbeacd solid 1px;
  border-bottom: #dbeacd solid 1px;
  border-radius: 10px;
  overflow: hidden;
}
.millionpower #point p {
  margin: 0 0 1em;
}
.millionpower #point .point_title {
  margin: 0 0 0 -5px;
}
.millionpower #point h2 {
  margin: 0;
  padding: 0.5em 5% 0;
  color: #ff7200;
  font-weight: bold;
  font-size: 150%;
  text-align: center;
}
.millionpower #point dl {
  width: 90%;
  margin: auto;
  list-style: inside;
  counter-reset: item;
}
.millionpower #point dl div {
  padding: 0.5em 0;
}
.millionpower #point dl dt {
  position: relative;
  padding-left: 2em;
  color: #499400;
  font-size: 100%;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
.millionpower #point dl dt strong {
  color: #387101;
  font-size: 125%;
  font-weight: bold;
  border-bottom: 3px #387101 dotted;
}
.millionpower #point dl dt:before {
  font-family: YakuHanJP, Avenir, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  counter-increment: item;
  content: counter(item);
  /* 以下は自由に装飾... */
  font-weight: bold;
  color: #fff;
  background: #499400;
  border-radius: 15px;
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  left: 0;
  top: 5px;
  text-align: center;
  line-height: 1.5;
}
.millionpower #point dl dd {
  padding: 0;
  border-bottom: #dbeacd solid 1px;
}
.millionpower #point dl .photo {
  width: 75%;
  margin: auto;
}
.millionpower #explanation h2 {
  background: #499400;
  width: 100%;
  height: 1em;
  margin: 0 0 1em;
  padding: 1em 0;
  color: #ffffff;
  font-weight: bold;
  font-size: 100%;
  border-radius: 7px;
  text-align: center;
  line-height: 1;
  box-sizing: content-box;
}
.millionpower #explanation .photo {
  float: none;
  margin: 0 auto 1em;
  width: 50%;
}
.millionpower #explanation .explanation_wrap {
  padding: 0;
  margin: 0 0 1.5em;
}
.millionpower #explanation .explanation_wrap ul {
  width: 82%;
  margin: 1em auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
}
.millionpower #explanation .explanation_wrap ul li {
  width: 43%;
}
.millionpower #explanation .explanation_wrap ul li img {
  width: 100%;
}
.millionpower #explanation .explanation_wrap .detail_right {
  margin: 1em 0;
}
.millionpower #explanation .explanation_wrap .seisan {
  margin: 30px 0 0;
}
.millionpower .lpVoice {
  background: url("/html/template/million01/assets/img/healthfood/millionpower/voice_bg.gif") center top/100% auto repeat-y;
  padding: 1em;
  margin: 0 0 1em;
  box-sizing: border-box;
}
.millionpower .lpVoice .review {
  background: url("/html/template/million01/assets/img/healthfood/millionpower/voice_title_01.gif") center top/auto 100% no-repeat;
  width: 100%;
  height: 2em;
  margin: 0 0 0.5em;
  padding: 28px 0 0;
  color: #499400;
  font-weight: bold;
  font-size: 120%;
  text-align: center;
  box-sizing: content-box;
}
.millionpower .lpVoice .section {
  overflow: hidden;
  margin: 0 0 20px;
  padding: 0;
}
.millionpower .lpVoice dl {
  width: 100%;
}
.millionpower .lpVoice dl .voice_wrap {
  width: 100%;
  margin-bottom: 1em;
  padding: 1em 0;
  border-bottom: 1px dotted #444444;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
}
.millionpower .lpVoice dl .voice_wrap dt {
  width: 60%;
  color: #4e2800;
  font-weight: bold;
  font-size: 107.8%;
  order: 2;
}
.millionpower .lpVoice dl .voice_wrap .photo {
  width: 38%;
  order: 1;
  margin-bottom: 0;
}
.millionpower .lpVoice dl .voice_wrap .review-desc {
  width: 100%;
  order: 3;
}
.millionpower .block_voice .voice {
  background-color: #FFFFE0;
}
.millionpower .block_voice .voice .lead {
  width: 94%;
  margin: 1em auto 0;
}
.millionpower .block_voice .voice .message {
  padding-top: 0;
}
.millionpower .block_voice .reviewArea ul {
  height: inherit;
}
.millionpower .block_voice .reviewArea ul li.reviewV,
.millionpower .block_voice .reviewArea ul li.reviewW {
  width: 100%;
  float: none;
}
/* ************************************************ */
/* 続きを見る */
/* ************************************************ */
.review-desc {
  display: none;
  width: 100%;
  margin: 0 auto;
  padding: 0.5em 3% 1em;
  background-color: #FFFFE0;
}
.readmore {
  position: relative;
  width: 100%;
  margin: 1em auto;
  display: block;
  /* background-color: #758f5b; */
  background-color: #aaa;
  color: #fff;
  padding: 1em 0;
  line-height: 1;
  transition: 0.5s;
  -erbkit-transition: 0.5s;
  order: 4;
}
.readmore::after {
  content: " ";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  right: 28px;
  top: 15px;
  transition: 0.5s;
  -erbkit-transition: 0.5s;
}
.on-click {
  color: transparent !important;
}
.on-click:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  top: 25px;
  left: 0;
  right: 0;
  margin: auto;
}
.item-kikaku img {
  width: 25%;
}
@media screen and (min-width: 768px) {
  .millionpower {
    font-size: 100%;
    /* ---------------------------------------- */
    /* ミリオンパワーの特徴 */
    /* ---------------------------------------- */
    /* ---------------------------------------- */
    /* 良質な国産福地ホワイト六片種を採用！ */
    /* ---------------------------------------- */
    /* ---------------------------------------- */
    /* 届いています、喜びの声！ */
    /* ---------------------------------------- */
  }
  .millionpower .newArea .sec02 {
    margin-bottom: 30px;
    padding: 25px;
  }
  .millionpower .newArea .sec02 h3 {
    margin: 0;
    width: 25%;
  }
  .millionpower .newArea .sec02 .block01 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  .millionpower .newArea .sec02 .lead {
    order: 1;
    width: 100%;
    font-size: 150%;
    margin-bottom: 0.25em;
  }
  .millionpower .newArea .sec02 .photo01 {
    width: 21%;
    margin: 0;
    order: 2;
  }
  .millionpower .newArea .sec02 .description01 {
    width: 75%;
    order: 3;
  }
  .millionpower #point h2 {
    font-size: 200%;
    text-align: left;
  }
  .millionpower #point dl div {
    padding: 1em 0;
  }
  .millionpower #point dl div:last-of-type dd.block01 {
    border: none;
  }
  .millionpower #point dl dt {
    font-size: 175%;
    line-height: 1;
    margin-bottom: 0.5em;
  }
  .millionpower #point dl dt:before {
    border-radius: 18px;
    width: 36px;
    height: 36px;
    top: 0;
    line-height: 1.25;
  }
  .millionpower #point dl .block01 {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    padding-bottom: 2em;
  }
  .millionpower #point dl .block01 .lead {
    width: 100%;
    font-size: 150%;
    margin-bottom: 0.5em;
  }
  .millionpower #point dl .block01 dd {
    padding: 0;
    border-bottom: #dbeacd solid 1px;
  }
  .millionpower #point dl .block01 .photo {
    width: 38%;
    margin: 0;
    padding: 0;
  }
  .millionpower #point dl .block01 .photo img {
    width: 100%;
  }
  .millionpower #point dl .block01 .description {
    width: 60%;
    margin-bottom: 0;
  }
  .millionpower #explanation {
    margin-bottom: 50px;
  }
  .millionpower #explanation h2 {
    font-size: 200%;
  }
  .millionpower #explanation .explanation_wrap {
    padding: 0;
    margin: 0 0 1.5em;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  .millionpower #explanation .explanation_wrap:last-of-type .photo {
    margin: 0 auto 1em;
  }
  .millionpower #explanation .explanation_wrap .photo {
    margin: 0;
    width: 38%;
  }
  .millionpower #explanation .explanation_wrap ul {
    width: 82%;
    margin: 1em auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  .millionpower #explanation .explanation_wrap ul li {
    width: 43%;
  }
  .millionpower #explanation .explanation_wrap ul li img {
    width: 100%;
  }
  .millionpower #explanation .explanation_wrap .description {
    width: 60%;
  }
  .millionpower #explanation .explanation_wrap .detail_right {
    margin: 0;
  }
  .millionpower #explanation .explanation_wrap .seisan {
    margin: 30px auto 0;
  }
  .millionpower .lpVoice {
    background: url("/html/template/million01/assets/img/healthfood/millionpower/voice_bg.gif") center top/100% auto repeat-y;
    padding: 1em;
    margin: 0 0 1em;
    box-sizing: border-box;
  }
  .millionpower .lpVoice .review {
    background: url("/html/template/million01/assets/img/healthfood/millionpower/voice_title_01.gif") center top/auto 100% no-repeat;
    width: 100%;
    height: 2em;
    margin: 0 0 0.5em;
    padding: 28px 0 0;
    color: #499400;
    font-weight: bold;
    font-size: 120%;
    text-align: center;
  }
  .millionpower .lpVoice .section {
    overflow: hidden;
    margin: 0 0 20px;
    padding: 0;
  }
  .millionpower .lpVoice dl {
    width: 100%;
  }
  .millionpower .lpVoice dl .voice_wrap {
    width: 100%;
    margin-bottom: 1em;
    padding: 1em 0;
    border-bottom: 1px dotted #444444;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  .millionpower .lpVoice dl .voice_wrap dt {
    width: 70%;
    color: #4e2800;
    font-weight: bold;
    font-size: 150%;
    order: 2;
  }
  .millionpower .lpVoice dl .voice_wrap .photo {
    width: 28%;
    order: 1;
    margin-bottom: 0;
  }
  .millionpower .lpVoice dl .voice_wrap .review-desc {
    width: 100%;
    order: 3;
  }
  .millionpower .block_voice .reviewArea ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  .millionpower .block_voice .reviewArea ul li.reviewV,
.millionpower .block_voice .reviewArea ul li.reviewW {
    width: 49.5%;
  }
}
@media screen and (min-width: 1024px) {
  .millionpower {
    font-size: 125%;
  }
  .millionpower .cartWrapper {
    font-size: 80%;
  }
}
@media screen and (max-width: 374px) {
  .millionpower #point dl dt {
    line-height: 1.4;
  }
}
/*# sourceMappingURL=millionpower.css.map */