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

#contents_block .contents-inner {
  overflow: hidden;
}

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

#contents_block .header-inner {
  position: relative;
  max-width: 1300px;
  height: 60vw;
  max-height: 780px;
  margin: 0 auto;
}

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

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

#contents_block .header-title01-img {
  display: block;
  width: 100%;
  margin-bottom: 25px;
}

#contents_block .header-text {
  font-size: 16px;
  color: #4b0000;
  text-align: center;
  line-height: 1.8;
  margin-bottom: 15px;
}

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

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

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

#contents_block .raed-inner {
  position: relative;
  max-width: 1300px;
  height: 38vw;
  max-height: 494px;
  margin: 0 auto;
}

#contents_block .raed-icon {
  position: absolute;
  top: -20%;
  left: 17%;
  width: 15vw;
  max-width: 205px;
}

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

#contents_block .raed-wrap {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 13%;
  left: 17.5%;
  width: 71%;
  z-index: 1;
}

#contents_block .raed-text-box {
  width: 35.3%;
}

#contents_block .raed-title {
  margin: 15px 0 25px;
}

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

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

#contents_block .raed-img-box {
  width: 60.7%;
}

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

#contents_block .raed-cup {
  position: absolute;
  left: 9%;
  bottom: -38%;
  width: 26vw;
  max-width: 355px;
  z-index: 1;
}

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

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

#contents_block .tasty-inner {
  max-width: 1300px;
  height: 69vw;
  max-height: 897px;
  margin: 0 auto;
  position: relative;
}

#contents_block .tasty-title {
  position: absolute;
  top: -2%;
  left: 50%;
  width: 4.5vw;
  max-width: 58px;
  transform: translateX(-50%);
}

#contents_block .tasty-read-box {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 36.5vw;
  max-width: 474.5px;
  transform: translateX(-50%);
}

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

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

#contents_block .tasty-read-text {
  font-size: 14px;
  color: #4b0000;
  line-height: 2.0;
  text-align: left;
  width: 98%;
  margin: 0 auto;
}

#contents_block .tasty-read-note {
  font-size: 11px;
  color: #4b0000;
  line-height: 2.0;
  text-align: left;
  width: 98%;
  margin: 0 auto;
}

#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: 21%;
  left: 11%;
  width: 35.3vw;
  max-width: 459px;
}

#contents_block .tasty-detail-item-paste {
  top: 53%;
  left: 58%;
  width: 21.6vw;
  max-width: 281px;
}

#contents_block .tasty-detail-item-oil {
  top: 31.5%;
  left: 66%;
  width: 19.2vw;
  max-width: 250px;
}

#contents_block .tasty-detail-item-product {
  top: 38%;
  left: 40%;
  width: 24.8vw;
  max-width: 322px;
}

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

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

#contents_block .tasty-detail-item-crush .tasty-detail-text {
  top: 73%;
  left: 36%;
  width: 14.3vw;
  max-width: 186px;
}

#contents_block .tasty-detail-item-paste .tasty-detail-text {
  top: 41%;
  left: 10%;
  width: 14.2vw;
  max-width: 185px;
}

#contents_block .tasty-detail-item-oil .tasty-detail-text {
  top: 45%;
  left: 17%;
  width: 10.3vw;
  max-width: 134px;
}

#contents_block .tasty-note {
  position: absolute;
  top: 84.5%;
  left: 50%;
  width: 36.8vw;
  max-width: 478px;
  transform: translateX(-50%);
}

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

#contents_block .tasty-point01 {
  position: absolute;
  left: -48.5%;
  top: -70%;
  width: 76.9vw;
  max-width: 1000px;
  z-index: 10;
}

#contents_block .tasty-point02 {
  position: absolute;
  right: -48.5%;
  top: 61%;
  width: 76.9vw;
  max-width: 1000px;
  z-index: 10;
}

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

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

#contents_block .almondmilk-inner {
  max-width: 1300px;
  height: 39vw;
  max-height: 507px;
  margin: 0 auto;
  position: relative;
}

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

#contents_block .almondmilk-read-box {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 43.1vw;
  max-width: 560px;
  transform: translateX(-50%);
  z-index: 1;
}

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

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

#contents_block .almondmilk-read-text {
  font-size: 14px;
  color: #4b0000;
  text-align: left;
  line-height: 2.0;
  width: 72%;
  margin: 0 auto;
}

#contents_block .almondmilk-read-note {
  font-size: 12px;
}

#contents_block .almondmilk-detail-title {
  position: absolute;
  top: 22%;
  left: 34%;
  width: 54.2vw;
  max-width: 704px;
  z-index: 1;
}

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

#contents_block .almondmilk-detail-wrap {
  position: absolute;
  top: 63%;
  left: 34.4%;
  width: 18.1vw;
  max-width: 235px;
  z-index: 1;
}

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

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

#contents_block .almondmilk-bg-img {
  display: block;
  position: absolute;
  top: 10%;
  left: 2%;
  width: 26.9vw;
  max-width: 350px;
}

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

#contents_block .lineup-inner {
  max-width: 1300px;
  height: 89vw;
  max-height: 1154px;
  margin: 0 auto;
  position: relative;
}

#contents_block .lineup-inner::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 67.7%;
  height: 95%;
  background: url(../img/bg_clipping_01.png) no-repeat center top/100% auto;
  transform: translateX(-50%);
  z-index: 0;
}

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

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

#contents_block .lineup-read {
  position: absolute;
  top: 17.5%;
  left: 50%;
  width: 35vw;
  max-width: 455px;
  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: 15.5%;
  left: 70.5%;
  width: 17.2vw;
  max-width: 223.5px;
}

#contents_block .lineup-Icon-item-refresh {
  top: 43%;
  left: 6.5%;
  width: 20.5vw;
  max-width: 266px;
}

#contents_block .lineup-Icon-item-cooking {
  top: 63%;
  left: 75%;
  width: 20.9vw;
  max-width: 272px;
}

#contents_block .lineup-product {
  position: absolute;
  top: 29%;
  left: 24.5%;
  width: 54.2vw;
  max-width: 705px;
}

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

#contents_block .lineup-btn {
  position: absolute;
  top: 89%;
  left: 50%;
  width: 28.5vw;
  max-width: 370px;
  transform: translateX(-50%);
  z-index: 1;
}

#contents_block .lineup-btn-link {
  display: block;
  font-size: 17px;
  color: #ffffff;
  padding: 18px;
  border: 1px solid #4b0000;
  border-radius: 28px;
  background-color: #4b0000;
}

#contents_block .lineup-btn-link:hover {
  border-color: #4c0000;
  background-color: #fff;
  color: #4c0000;
}

#contents_block .lineup-btn-link::before,
#contents_block .lineup-btn-link::after {
  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: 12px;
  position: relative;
}

#contents_block .lineup-btn-link::before {
  margin-right: 10px;
  left: 0;
}

#contents_block .lineup-btn-link:hover::before {
  left: -1em;
  opacity: 0;
}

#contents_block .lineup-btn-link::after {
  margin-left: 10px;
  left: 1em;
  opacity: 0;
}

#contents_block .lineup-btn-link:hover::after {
  left: 0;
  opacity: 1;
}

#contents_block .lineup-almond {
  position: absolute;
  left: -10%;
  top: -11%;
  width: 35.5vw;
  max-width: 462px;
  z-index: 1;
}

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