@charset "utf-8";

/* PC */
#lp02 { font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Noto Sans Japanese", sans-serif; }
#lp02 section { background: transparent; }
#lp02 .img_wrap img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* layout_hero */
#lp02 .layout_hero .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 1100px;
  background: #000;
}
#lp02 .layout_hero .text_wrap {
  position: relative;
  width: 100%;
  z-index: 1;
}
#lp02 .layout_hero .text_wrap .logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
#lp02 .layout_hero .text_wrap .logo img {
  display: block;
  max-width: 150px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#lp02 .layout_hero .text_wrap .item {
  display: flex;
  justify-content: center;
  align-items: center;
}
#lp02 .layout_hero .text_wrap .item img {
  display: block;
  max-width: 340px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#lp02 .layout_hero .text_wrap .copy {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#lp02 .layout_hero .text_wrap .copy li:nth-of-type(1) {
  position: absolute;
  top: 25%;
  right: 50%;
  transform: rotate(10deg) translateX(18vw);
}
#lp02 .layout_hero .text_wrap .copy li:nth-of-type(2) {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: rotate(-10deg) translateX(-18vw);
}
#lp02 .layout_hero .text_wrap .copy img {
  display: block;
  width: 100px;
}

#lp02 .layout_hero .text_wrap .outline {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0 0 0;
}
#lp02 .layout_hero .text_wrap .outline img {
  display: block;
  width: 500px;
}
#lp02 .layout_hero .img_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#lp02 .layout_hero .img_wrap .simpleParallax { align-items: flex-start; }
#lp02 .layout_hero .img_wrap img { height: auto; }

/* layout_item */
#lp02 .layout_item .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 80px 0;
  background: #fff;
}
#lp02 .layout_item .item { display: flex; }
#lp02 .layout_item .item li { padding: 0 2.5%; }
#lp02 .layout_item .item .text_wrap { text-align: center; }
#lp02 .layout_item .item .text_wrap .capacity { line-height: 1.5; }
#lp02 .layout_item .item .text_wrap .price { font-size: 75%; }
#lp02 .layout_item .item .text_wrap .price.subscriptions .yen {
  color: #000;
  font-size: 18rem;
}

#lp02 .layout_item .item .text_wrap .yen {
  color: #ea0016;
  font-family: 'Abril Fatface', cursive;
  font-weight: bold;
  font-size: 24rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#lp02 .layout_item .item .text_wrap .yen s {
  font-size: 75%;
  font-weight: normal;
  color: #000;
}
#lp02 .layout_item .item .text_wrap .btn_wrap {
  justify-content: center;
  margin: 40px 0 0 0;
}
#lp02 .layout_item .item .text_wrap .btn_wrap .btn span { background: #e71f19; }
#lp02 .layout_item .item .text_wrap .btn_wrap input[type="submit"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1.5em 3em;
  color: #fff;
  font-size: 16rem;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  background: #e71f19;
  transition: all .5s cubic-bezier(.215,.61,.355,1);
  cursor: pointer;
}
#lp02 .layout_item .item .text_wrap .btn_wrap input:hover[type="submit"] {
  -webkit-filter: brightness(1.25);
  filter: brightness(1.25);
}

#lp02 .layout_item .item .img_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
}
#lp02 .layout_item .item .img_wrap img {
  -o-object-fit: contain;
     object-fit: contain;
}

/* layout_outline */
#lp02 .layout_outline .inner {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 1000px;
  padding: 80px 0;
  background: #000;
}
#lp02 .layout_outline .text_wrap { z-index: 1; }
#lp02 .layout_outline .text_wrap .copy img {
  display: block;
  width: 800px;
}
#lp02 .layout_outline .img_wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#lp02 .layout_outline .img_wrap .simpleParallax {
  width: 500px;
  height: auto;
  overflow: visible!important;
}
#lp02 .layout_outline .img_wrap img {
  width: 90%;
  height: auto;
}

/* layout_recommendation */
#lp02 .layout_recommendation .inner {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 80px 0;
  background: #a40000;
}
#lp02 .layout_recommendation .text_wrap { z-index: 1; }
#lp02 .layout_recommendation .text_wrap .title {
  display: flex;
  justify-content: center;
  margin: 0 0 80px 0;
}
#lp02 .layout_recommendation .text_wrap .title img { width: 500px; }
#lp02 .layout_recommendation .text_wrap .balloon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
}
#lp02 .layout_recommendation .text_wrap .balloon li { width: 300px; }
#lp02 .layout_recommendation .text_wrap .balloon li img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#lp02 .layout_recommendation .img_wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#lp02 .layout_recommendation .img_wrap img {
  height: 300px;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translateX(25%);
}

/* layout_powerup */
#lp02 .layout_powerup .inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 1000px;
  padding: 80px 0;
  background: #000;
}
#lp02 .layout_powerup .text_wrap {
  position: relative;
  z-index: 1;
}
#lp02 .layout_powerup .text_wrap .copy {
  display: flex;
  justify-content: center;
  align-items: center;
}
#lp02 .layout_powerup .text_wrap .copy img {
  display: block;
  width: 500px;
  /* transform: rotate(-10deg); */
}
#lp02 .layout_powerup .text_wrap .item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0 0 0;
}
#lp02 .layout_powerup .text_wrap .item img {
  display: block;
  width: 222px;
}
#lp02 .layout_powerup .img_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#lp02 .layout_powerup .img_wrap img {
  display: block;
  width: 1400px;
  height: auto;
}

/* layout_formulation */
#lp02 .layout_formulation .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #fff;
}
#lp02 .layout_formulation .half {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 1100px;
}
#lp02 .layout_formulation .text_wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#lp02 .layout_formulation .text_wrap .outline {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
#lp02 .layout_formulation .text_wrap .outline img {
  display: block;
  height: 72px;
}
#lp02 .layout_formulation .text_wrap .formulation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: calc(6.25vw / 2) calc(6.25vw / 4) 0 calc(6.25vw / 4);
}
#lp02 .layout_formulation .text_wrap .formulation li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% / 3 - (6.25vw / 2));
  margin: 0 calc(6.25vw / 4);
  padding: 6em 3em;
  background: rgba(255,255,255,.95);
  border-radius: 10px;
}
#lp02 .layout_formulation .text_wrap .formulation li h5 { margin: 0 0 .5em 0; }
/* #lp02 .layout_formulation .text_wrap .formulation li p { font-size: 75%; } */
#lp02 .layout_formulation .img_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* layout_specification */
#lp02 .layout_specification .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
  background: #f5f5f5;
}
#lp02 .layout_specification .text_wrap { max-width: 960px; }
#lp02 .layout_specification .text_wrap dt {
  margin: 2em 0 0 0;
  font-size: 24rem;
  font-weight: bold;
}
#lp02 .layout_specification .text_wrap dt:nth-of-type(1) { margin: 0; }

/* layout_akahige */
#lp02 .layout_akahige .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
  background: #f5f5f5;
}
#lp02 .layout_akahige .text_wrap { max-width: 960px; }
#lp02 .layout_akahige .text_wrap p { font-size: 24rem; }
#lp02 .layout_akahige .text_wrap ul { font-size: 24rem; }
#lp02 .layout_akahige .text_wrap li { margin: 1em 0 0 0; }

/* タブレット横 */
@media screen and (max-width: 1180px) {
  /* layout_hero */
  #lp02 .layout_hero .inner { min-height: 700px; }
  #lp02 .layout_hero .text_wrap .logo img { max-width: 100px; }
  #lp02 .layout_hero .text_wrap .item img { max-width: 250px; }
  #lp02 .layout_hero .text_wrap .copy img { width: 80px; }
  #lp02 .layout_hero .text_wrap .outline { padding: 0; }
  #lp02 .layout_hero .text_wrap .outline img { width: 350px; }
  #lp02 .layout_hero .text_wrap .copy li:nth-of-type(1) { transform: rotate(10deg) translateX(23vw); }
  #lp02 .layout_hero .text_wrap .copy li:nth-of-type(2) { transform: rotate(-10deg) translateX(-23vw); }

  /* layout_item */
  #lp02 .layout_item .inner { padding: 40px 0; }
  #lp02 .layout_item .item .text_wrap .yen { font-size: 18rem; }
  #lp02 .layout_item .item .text_wrap .price.subscriptions .yen { font-size: 14rem; }
  #lp02 .layout_item .item .text_wrap .btn_wrap { margin: 20px 0 0 0; }
  #lp02 .layout_item .item .text_wrap .btn_wrap input[type="submit"] {
    padding: 1.25em 3em;
    font-size: 14rem;
  }
  #lp02 .layout_item .item .img_wrap { max-width: 400px; }

  /* layout_outline */
  #lp02 .layout_outline .inner {
    min-height: 570px;
    padding: 40px 0;
  }
  #lp02 .layout_outline .text_wrap .copy img { width: 500px; }
  #lp02 .layout_outline .img_wrap .simpleParallax { width: 300px; }

  /* layout_recommendation */
  #lp02 .layout_recommendation .inner { padding: 40px 0; }
  #lp02 .layout_recommendation .text_wrap .title { margin: 0 0 40px 0; }
  #lp02 .layout_recommendation .text_wrap .title img { width: 300px; }
  #lp02 .layout_recommendation .text_wrap .balloon { max-width: 600px; }
  #lp02 .layout_recommendation .text_wrap .balloon li { width: 200px; }
  #lp02 .layout_recommendation .img_wrap img {
    height: 200px;
    transform: translateX(30%);
  }

  /* layout_powerup */
  #lp02 .layout_powerup .inner {
    min-height: 600px;
    padding: 40px 0;
  }
  #lp02 .layout_powerup .text_wrap .copy img { width: 400px; }
  #lp02 .layout_powerup .text_wrap .item img { width: 160px; }
  #lp02 .layout_powerup .img_wrap img { width: 900px; }

  /* layout_formulation */
  #lp02 .layout_formulation .inner { flex-wrap: wrap; }
  #lp02 .layout_formulation .half {
    width: 100%;
    min-height: 650px;
  }
  #lp02 .layout_formulation .text_wrap { padding: 40px 0; }
  #lp02 .layout_formulation .text_wrap .outline img { height: 50px; }
  #lp02 .layout_formulation .text_wrap .formulation { padding: 3% 3% 0 3%; }
  #lp02 .layout_formulation .text_wrap .formulation li {
    width: 48.41%;
    margin: 3.18% 0 0 0;
    padding: 2em;
  }
  #lp02 .layout_formulation .text_wrap .formulation li:nth-of-type(1),
  #lp02 .layout_formulation .text_wrap .formulation li:nth-of-type(2) { margin: 0; }
  #lp02 .layout_formulation .text_wrap .formulation li h5 { margin: 0 0 .75em 0; }
  #lp02 .layout_formulation .text_wrap .formulation li p { font-size: 80%; }

  /* layout_specification */
  #lp02 .layout_specification .inner { padding: 40px; }
  #lp02 .layout_specification .text_wrap dt { font-size: 14rem; }

  /* layout_akahige */
  #lp02 .layout_akahige .inner { padding: 40px; }
  #lp02 .layout_akahige .text_wrap p { font-size: 14rem; }
  #lp02 .layout_akahige .text_wrap ul { font-size: 14rem; }
  #lp02 .layout_akahige .text_wrap li { margin: .5em 0 0 0; }
}

/* タブレット縦 */
@media screen and (max-width: 820px) {
  /* layout_hero */
  #lp02 .layout_hero .text_wrap .logo img { max-width: 150px; }
  #lp02 .layout_hero .text_wrap .item img { max-width: 250px; }
  #lp02 .layout_hero .text_wrap .outline img { width: 450px; }
  #lp02 .layout_hero .img_wrap img {
    width: auto;
    height: 120%;
  }
  #lp02 .layout_hero .text_wrap .copy li:nth-of-type(1) { transform: rotate(10deg) translateX(30vw); }
  #lp02 .layout_hero .text_wrap .copy li:nth-of-type(2) { transform: rotate(-10deg) translateX(-30vw); }

  /* layout_item */
  #lp02 .layout_item .item .img_wrap { max-width: 300px; }

  /* layout_recommendation */
  #lp02 .layout_recommendation .img_wrap img {
    height: 180px;
    transform: translateX(37.5%);
  }
}

/* スマホ縦 */
@media screen and (max-width: 430px) {
  #lp02 .layout_hero .text_wrap .logo img { max-width: 180px; }
  #lp02 .layout_hero .text_wrap .item img { max-width: 200px; }
  #lp02 .layout_hero .text_wrap .copy img { width: 100px; }
  #lp02 .layout_hero .text_wrap .outline img { width: 300px; }
  #lp02 .layout_hero .img_wrap img {
    width: auto;
    height: 100%;
  }
  #lp02 .layout_hero .text_wrap .logo img { max-width: 100px; }
  #lp02 .layout_hero .text_wrap .copy li:nth-of-type(1) { transform: rotate(10deg) translateX(40vw); }
  #lp02 .layout_hero .text_wrap .copy li:nth-of-type(2) { transform: rotate(-10deg) translateX(-40vw); }
  #lp02 .layout_hero .text_wrap .copy img { width: 60px; }

  /* layout_item */
  #lp02 .layout_item .item .text_wrap h4 small { display: block; }
  #lp02 .layout_item .item .text_wrap .btn span { padding: 1.25em 1.5em; }
  #lp02 .layout_item .item .text_wrap .btn_wrap input[type="submit"] { padding: 1.25em 1.5em; }
  #lp02 .layout_item .item .img_wrap { max-width: 150px; }

  /* layout_outline */
  #lp02 .layout_outline .inner { min-height: 450px; }
  #lp02 .layout_outline .text_wrap .copy img { width: 300px; }
  #lp02 .layout_outline .img_wrap .simpleParallax { width: 250px; }

  /* layout_recommendation */
  #lp02 .layout_recommendation .text_wrap .title img { width: 200px; }
  #lp02 .layout_recommendation .text_wrap .balloon li { width: 150px; }
  #lp02 .layout_recommendation .img_wrap img {
    height: 150px;
    transform: translateX(32.5%);
  }

  /* layout_powerup */
  #lp02 .layout_powerup .inner { min-height: 450px; }
  #lp02 .layout_powerup .text_wrap .copy img { width: 250px; }
  #lp02 .layout_powerup .text_wrap .item img { width: 120px; }
  #lp02 .layout_powerup .img_wrap img { width: 600px; }

  /* layout_formulation */
  #lp02 .layout_formulation .half { min-height: 400px; }
  #lp02 .layout_formulation .text_wrap .formulation li { width: 100%; }
  #lp02 .layout_formulation .text_wrap .formulation li:nth-of-type(2) { margin: 3.18% 0 0 0; }
}
