/* common */
html, body {
  overflow-x: hidden;
}

/* header */
#contents_block .header {
  position: relative;
  height: 182vw;
  background: url(../img/sp/bg_sand_01.png) repeat center;
}

#contents_block .header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 176vw;
  background: url(../img/sp/img_header_01.png) no-repeat center/auto 100%;
  z-index: 1;
}

#contents_block .header-wrap {
  position: absolute;
  top: 41%;
  left: 50%;
  width: 77.3%;
  transform: translateX(-50%);
  z-index: 2;
}

#contents_block .header-title01-img {
  display: block;
  width: 89%;
  margin: 0 auto 15px;
}

#contents_block .header-text {
  font-size: 3.75vw;
  color: #4b0000;
  text-align: left;
  line-height: 2.0;
  margin-bottom: 20px;
}

#contents_block .header-note {
  display: flex;
  justify-content: center;
  font-size: 2.5vw;
  color: #4b0000;
  line-height: 1.4;
  text-align: left;
}

/* raed */
#contents_block .raed {
  position: relative;
  height: 180vw;
  background: url(../img/sp/bg_sand_01.png) repeat center;
}

#contents_block .raed::before {
  content: "";
  position: absolute;
  left: 0;
  top: -11vw;
  width: 100%;
  height: 191vw;
  background: url(../img/sp/bg_sand_02.png) no-repeat center/auto 100%;
  z-index: 0;
}

#contents_block .raed-icon {
  position: absolute;
  top: -15%;
  left: 34%;
  width: 46.8vw;
  z-index: 1;
}

#contents_block .raed-icon-img {
  display: block;
  width: 100%;
}

#contents_block .raed-wrap {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 85%;
  transform: translateX(-50%);
  z-index: 1;
}

#contents_block .raed-text-box {
  margin-bottom: 30px;
}

#contents_block .raed-title {
  margin-bottom: 30px;
}

#contents_block .raed-title-text {
  display: block;
  width: 100%;
}

#contents_block .read-text {
  font-size: 3.75vw;
  color: #4b0000;
  text-align: left;
  line-height: 2.0;
}

#contents_block .raed-img {
  display: block;
  width: 100%;
}

#contents_block .raed-cup {
  position: absolute;
  left: 0vw;
  top: 114.1vw;
  width: 61vw;
  z-index: 1;
}

#contents_block .raed-cup-img {
  display: block;
  width: 100%;
}

#contents_block .raed-point {
  position: absolute;
  right: 0;
  top: 58%;
  width: 55.7vw;
  z-index: 10;
}

/* tasty */
#contents_block .tasty {
  height: 321vw;
  background: url(../img/sp/bg_sand_01.png) repeat center;
  position: relative;
}

#contents_block .tasty-title {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12.5vw;
  transform: translateX(-50%);
}

#contents_block .tasty-read-box {
  position: absolute;
  top: 7.5%;
  left: 50%;
  width: 85%;
  transform: translateX(-50%);
}

#contents_block .tasty-read {
  margin-bottom: 40px;
}

#contents_block .tasty-read-img {
  display: block;
  width: 100%;
}

#contents_block .tasty-read-text {
  font-size: 3.75vw;
  color: #4b0000;
  line-height: 2.0;
  text-align: left;
}

#contents_block .tasty-read-note {
  font-size: 2.5vw;
  color: #4b0000;
  line-height: 2.0;
  text-align: left;
  margin-top: 10px;
}

#contents_block .tasty-detail-list {
  list-style: none;
}

#contents_block .tasty-detail-item-crush,
#contents_block .tasty-detail-item-paste,
#contents_block .tasty-detail-item-oil,
#contents_block .tasty-detail-item-product {
  position: absolute;
}

#contents_block .tasty-detail-item-crush {
  top: 18%;
  right: -19%;
  width: 98.3vw;
}

#contents_block .tasty-detail-item-paste {
  top: 72.5%;
  left: 6%;
  width: 58.8vw;
}

#contents_block .tasty-detail-item-oil {
  top: 54.5%;
  left: -5%;
  width: 58.8vw;
}

#contents_block .tasty-detail-item-product {
  top: 61.5%;
  right: -8%;
  width: 50.4vw;
}

#contents_block .tasty-detail-img {
  display: block;
  width: 100%;
}

#contents_block .tasty-detail-text {
  font-size: 3.75vw;
  color: #ffffff;
  line-height: 1.7;
  position: absolute;
}

#contents_block .tasty-detail-item-crush .tasty-detail-text {
  top: 73%;
  left: 26%;
  width: 48.9vw;
}

#contents_block .tasty-detail-item-paste .tasty-detail-text {
  top: 40%;
  left: 11%;
  width: 39.8vw;
}

#contents_block .tasty-detail-item-oil .tasty-detail-text {
  top: 46%;
  left: 15%;
  width: 37.5vw;
}

#contents_block .tasty-note {
  position: absolute;
  top: 91%;
  left: 50%;
  width: 90%;
  transform: translateX(-50%);
}

#contents_block .tasty-note-text {
  font-size: 2.5vw;
  color: #4b0000;
  text-align: left;
  line-height: 1.6;
}

#contents_block .tasty-point01 {
  position: absolute;
  left: 0;
  top: 20%;
  width: 62.5vw;
  z-index: 10;
}

/* almondmilk */
#contents_block .almondmilk {
  height: 142vw;
  background: url(../img/sp/bg_sand_04.png) repeat center;
  position: relative;
}

#contents_block .almondmilk::before {
  content: "";
  position: absolute;
  left: 0;
  top: -9vw;
  width: 100%;
  height: 151vw;
  background: url(../img/sp/bg_sand_03.png) no-repeat center/auto 100%;
  z-index: 0;
}

#contents_block .almondmilk-title {
  position: absolute;
  top: -1%;
  left: 50%;
  width: 28.1vw;
  transform: translateX(-50%);
  z-index: 1;
}

#contents_block .almondmilk-read-box {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 85%;
  transform: translateX(-50%);
  z-index: 1;
}

#contents_block .almondmilk-read {
  margin-bottom: 40px;
}

#contents_block .almondmilk-read-img {
  display: block;
  width: 100%;
}

#contents_block .almondmilk-read-text {
  font-size: 3.75vw;
  color: #4b0000;
  text-align: left;
  line-height: 2.0;
}

#contents_block .almondmilk-read-note {
  display: block;
  font-size: 2.5vw;
  margin-top: 15px;
}

#contents_block .almondmilk-detail-title {
  position: absolute;
  top: 51.5%;
  left: 0;
  width: 100vw;
  z-index: 1;
}

#contents_block .almondmilk-detail-title-img {
  display: block;
  width: 100%;
}

#contents_block .almondmilk-detail-wrap {
  position: absolute;
  top: 72%;
  left: 8%;
  width: 60.4vw;
  z-index: 1;
}

#contents_block .almondmilk-detail-text {
  font-size: 3.75vw;
  color: #4b0000;
  text-align: left;
  line-height: 1.8;
  margin-bottom: 10px;
}

#contents_block .almondmilk-detail-note {
  font-size: 2.5vw;
  color: #4b0000;
  text-align: left;
  line-height: 1.8;
}

/* lineup */
#contents_block .lineup {
  height: 491vw;
  background: url(../img/bg_sand_04.png) repeat center;
  position: relative;
}

#contents_block .lineup::before {
  content: "";
  position: absolute;
  bottom: 2%;
  left: 0;
  width: 100%;
  height: 95%;
  background: url(../img/sp/bg_clipping_01.png) no-repeat center/cover;
  z-index: 0;
}

#contents_block .lineup-title {
  position: absolute;
  top: -1.5%;
  left: calc(50% + 0.5%);
  width: 47.5vw;
  transform: translateX(-50%);
  z-index: 1;
}

#contents_block .lineup-title-img {
  display: block;
  width: 100%;
}

#contents_block .lineup-read {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 78.1vw;
  transform: translateX(-50%);
  z-index: 1;
}

#contents_block .lineup-read-img {
  display: block;
  width: 100%;
}

#contents_block .lineup-Icon-list {
  list-style: none;
}

#contents_block .lineup-Icon-item-awakening,
#contents_block .lineup-Icon-item-refresh,
#contents_block .lineup-Icon-item-cooking {
  position: absolute;
  z-index: 1;
}

#contents_block .lineup-Icon-item-awakening {
  top: 12.2%;
  left: 56%;
  width: 40.9vw;
}

#contents_block .lineup-Icon-item-refresh {
  top: 13.2%;
  left: 3%;
  width: 48.8vw;
}

#contents_block .lineup-Icon-item-cooking {
  top: 21%;
  left: 36%;
  width: 48.9vw;
}

#contents_block .lineup-product {
  position: absolute;
  top: 31.8%;
  left: calc(50% + 1%);
  width: 84.9vw;
  transform: translateX(-50%);
}

#contents_block .lineup-product-img {
  display: block;
  width: 100%;
}

#contents_block .lineup-btn {
  position: absolute;
  top: 92%;
  left: 50%;
  width: 90vw;
  transform: translateX(-50%);
  z-index: 1;
}

#contents_block .lineup-btn-link {
  display: block;
  font-size: 3.75vw;
  color: #ffffff;
  padding: 1em 0.5em;
  border: 1px solid #4b0000;
  border-radius: 6.0vw;
  background-color: #4b0000;
}

#contents_block .lineup-btn-link::before {
  display: inline-block;
  content: '';
  width: 1em;
  height: 1em;
  font-family: 'icomoon';
  line-height: 1;
  letter-spacing: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  vertical-align: middle;
  content: '\e902';
  font-size: 2.81vw;
  margin-right: 5px;
}

/* point */
#contents_block .point-almond01 {
  position: absolute;
  left: 0;
  top: 440vw;
  width: 62.5vw;
  z-index: 10;
}

#contents_block .point-almond01-img {
  display: block;
  width: 100%;
}

#contents_block .point-almond02 {
  position: absolute;
  right: 0;
  top: 310vw;
  width: 55.7vw;
  z-index: 10;
}

#contents_block .point-almond02-img {
  display: block;
  width: 100%;
}