@charset "UTF-8";
@keyframes fadeIn {
  0% {
    opacity: 0; }
  1% {
    opacity: 0; }
  100% {
    opacity: 1;
    transform: translateZ(1px); } }
@keyframes fadeInMove {
  0% {
    display: none;
    opacity: 0; }
  1% {
    display: block;
    top: 30px;
    opacity: 0; }
  100% {
    display: block;
    top: 0;
    opacity: 1; } }
.l-main > section,
.l-main > article,
.sticky-bg-box > section {
  opacity: 0;
  position: relative;
  top: 30px;
  transition-duration: .6s;
  transition-delay: .2s;
  transition-timing-function: ease-in-out; }

.l-main > section.is-animate,
.l-main > article.is-animate,
.sticky-bg-box > section.is-animate {
  opacity: 1;
  top: 0; }

@media screen and (min-width: 768px) {
  .pc-none {
    display: none; } }
@media screen and (max-width: 767px) {
  .pc-none {
    display: block; } }

@media screen and (min-width: 768px) {
  .sp-none {
    display: block; } }
@media screen and (max-width: 767px) {
  .sp-none {
    display: none; } }

/*
* .entrance
*/
.entrance {
  width: 100%;
  opacity: 0; }
  @media screen and (min-width: 768px) {
    .entrance {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      height: 46.875vw; } }
  @media screen and (max-width: 767px) {
    .entrance {
      margin-bottom: 10vw; } }

.entrance.is-animate {
  animation: fadeIn .6s ease-in-out 0s 1 normal forwards; }

@media screen and (min-width: 768px) {
  .ontime .entrance {
    border-bottom: 100px; } }

.entrance--picture,
.entrance__description {
  height: 100%; }

@media screen and (max-width: 767px) {
  .entrance--picture {
    margin-bottom: 3vw;
    border-bottom: 1px solid #f2f2f2; } }

.entrance--picture picture,
.entrance--picture img {
  width: auto;
  height: 100%; }

.entrance__description {
  display: flex;
  flex-flow: column;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .entrance__description {
      justify-content: flex-start;
      align-items: flex-start;
      padding-top: 16.2vw;
      padding-left: 3.8vw; } }
  @media screen and (max-width: 767px) {
    .entrance__description {
      justify-content: center;
      align-items: center; } }

.entrance--title {
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.09em; }
  @media screen and (min-width: 768px) {
    .entrance--title {
      margin-bottom: 2.34375vw;
      font-size: 2.1875vw;
      line-height: 1.7;
      width: 400px; } }
  @media screen and (max-width: 767px) {
    .entrance--title {
      width: 84.53334vw;
      margin: 0 auto 4vw;
      font-size: 5.33334vw;
      line-height: 1.3;
      text-align: center;
      max-width: 768px; } }
  .entrance--title span {
    text-transform: uppercase; }

.entrance--name {
  font-family: "Noto Serif JP", serif; }
  @media screen and (min-width: 768px) {
    .entrance--name {
      margin-bottom: 2.3vw;
      font-size: 1.5625vw;
      letter-spacing: .11em; } }
  @media screen and (max-width: 767px) {
    .entrance--name {
      margin-bottom: 3.5vw;
      font-size: 3.73334vw;
      letter-spacing: 0.06em; } }

@media screen and (min-width: 768px) {
  .entrance--limited {
    margin: 0 0 1vw .2vw;
    font-size: 1.015625vw;
    letter-spacing: .15em; } }
@media screen and (max-width: 767px) {
  .entrance--limited {
    margin-bottom: 3.4vw;
    font-size: 3.2vw;
    letter-spacing: .11em; } }

@media screen and (min-width: 768px) {
  .entrance--price {
    margin: 0 0 2vw .2vw;
    letter-spacing: .15em;
    font-size: 1.015625vw; } }
@media screen and (max-width: 767px) {
  .entrance--price {
    margin-bottom: 3.4vw;
    font-size: 3.2vw;
    letter-spacing: .11em; } }

.entrance__icon {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start; }
  @media screen and (min-width: 768px) {
    .entrance__icon {
      margin-left: .4vw; } }

.entrance__icon li {
  border: 1px solid #c8c8c8;
  color: #878782;
  font-family: "Poppins", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .entrance__icon li {
      max-width: 5.46875vw;
      margin-left: 0.78125vw;
      padding: 0 .703125vw;
      font-size: 0.859375vw;
      line-height: 1.40625vw; } }
  @media screen and (max-width: 767px) {
    .entrance__icon li {
      max-width: 18.93334vw;
      margin-left: 3vw;
      padding: 0 2.66667vw;
      font-size: 2.66667vw;
      line-height: 4.8vw; } }
  .entrance__icon li:first-child {
    margin-left: 0; }

/*
* .prod
*/
@media screen and (min-width: 768px) {
  .detail + .prod {
    margin-bottom: 138px; } }
@media screen and (max-width: 767px) {
  .detail + .prod {
    margin-bottom: 23.4vw; } }

@media screen and (min-width: 768px) {
  .prod--picture {
    margin: 0 110px 0 52px; } }
@media screen and (max-width: 767px) {
  .prod--picture {
    width: 56vw;
    margin: 0 auto 2.6vw; } }

@media screen and (max-width: 767px) {
  .prod__description {
    text-align: center; } }

@media screen and (min-width: 768px) {
  .ontime .prod__description {
    padding-top: 60px; } }

@media screen and (min-width: 768px) {
  .prod--copy {
    margin-bottom: 43px;
    font-size: .875rem;
    letter-spacing: .07em; } }
@media screen and (max-width: 767px) {
  .prod--copy {
    margin: 24px auto 18px;
    font-size: 3.733334vw;
    letter-spacing: .07em;
    line-height: 1.5; } }

@media screen and (min-width: 768px) {
  .prod--name {
    margin-bottom: 9px;
    font-size: 1rem;
    letter-spacing: .09em;
    line-height: 28px; } }
@media screen and (max-width: 767px) {
  .prod--name {
    margin-bottom: 3vw;
    font-size: 4.26667vw;
    line-height: 26px; } }

@media screen and (min-width: 768px) {
  .prod--price {
    margin-bottom: 36px; } }
@media screen and (max-width: 767px) {
  .prod--price {
    margin-bottom: 7vw;
    font-size: 3.73334vw; } }

@media screen and (min-width: 768px) {
  .ontime .prod--price {
    margin-bottom: 72px; } }
@media screen and (max-width: 767px) {
  .ontime .prod--price {
    margin-bottom: 8.8vw; } }

.prod--limited {
  border: 1px solid #878782;
  box-sizing: border-box;
  color: #878782;
  text-align: center;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .prod--limited {
      width: 182px;
      margin-bottom: 31px;
      padding: 4px 0;
      border-radius: 15px;
      font-size: .75rem;
      letter-spacing: .16em; } }
  @media screen and (max-width: 767px) {
    .prod--limited {
      width: 45.86667vw;
      margin: 0 auto 8vw;
      padding: 1vw 0;
      border-radius: 2.4vw;
      font-size: 3.2vw;
      letter-spacing: .1em; } }

@media screen and (min-width: 768px) {
  .cart-in {
    margin-bottom: 20px; } }
@media screen and (max-width: 767px) {
  .cart-in {
    margin-bottom: 5vw; } }

.cart-in a {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  background-color: #878782;
  box-sizing: border-box;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  @media screen and (min-width: 768px) {
    .cart-in a {
      width: 380px;
      height: 50px;
      border-radius: 2px;
      font-size: 1.125rem; } }
  @media screen and (max-width: 767px) {
    .cart-in a {
      width: 80vw;
      border-radius: .53334vw;
      /*padding: 3.6vw 0;*/
      margin: 0 auto; } }
  .cart-in a:hover {
    color: #fff;
    background-color: #c8c8c8; }

.cart-in.reserve a {
  font-weight: bold; }
  @media screen and (max-width: 767px) {
    .cart-in.reserve a {
      padding: 0.5vw 0; } }

.l-main .cart-in a svg,
.l-main .cart-in a img {
  fill: #fff;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  @media screen and (min-width: 768px) {
    .l-main .cart-in a svg,
    .l-main .cart-in a img {
      width: 30px;
      height: 30px; } }
  @media screen and (max-width: 767px) {
    .l-main .cart-in a svg,
    .l-main .cart-in a img {
      width: 7.46667vw;
      height: 7.46667vw;
      padding-right: 1.2vw; } }

.cart-in a:hover svg,
.cart-in a:hover img {
  fill: #fff; }

@media screen and (max-width: 767px) {
  .prod__notes {
    margin: 0 10vw; } }

.prod__notes li {
  padding-left: 1em;
  color: #878782;
  text-indent: -1em; }
  @media screen and (min-width: 768px) {
    .prod__notes li {
      font-size: .6875rem;
      letter-spacing: -0.3px;
      line-height: 1.8; } }
  @media screen and (max-width: 767px) {
    .prod__notes li {
      font-size: 2.66667vw;
      text-align: left;
      letter-spacing: .04em;
      line-height: 2; } }

.prod__notes li:before {
  content: "※"; }

.prod__notes li a {
  color: #878782;
  text-decoration: underline;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; }

.prod__notes li a:hover {
  opacity: .5; }

/*
* .anchor
*/
.anchor--copy {
  color: #677CB6;
  font-family: "Noto Serif JP", serif;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .anchor--copy {
      padding: 70px 0 40px;
      font-size: 1.5rem;
      line-height: 1.8;
      letter-spacing: 0.02em; } }
  @media screen and (max-width: 767px) {
    .anchor--copy {
      margin: 10.4vw 0;
      font-size: 4.8vw;
      line-height: 1.6; } }

.anchor__col {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .anchor__col {
      width: 605px;
      padding-right: 7px; } }
  @media screen and (max-width: 767px) {
    .anchor__col {
      width: 61.13334vw; } }

.anchor__col-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-items: baseline; }
  @media screen and (min-width: 768px) {
    .anchor__col-inner {
      width: 100%; } }
  @media screen and (max-width: 767px) {
    .anchor__col-inner {
      width: 86.93334vw; } }

.anchor--category {
  order: 3;
  border: 1px solid #e7e5e6;
  text-align: center;
  box-sizing: border-box;
  background-color: #deebf7; }
  @media screen and (min-width: 768px) {
    .anchor--category {
      width: 100px;
      margin: 0 75px;
      padding: 7px 0;
      font-size: .75rem;
      border-radius: 2px; } }
  @media screen and (max-width: 767px) {
    .anchor--category {
      width: 18.66667vw;
      margin: 0 5.86667vw;
      padding: 1vw 0;
      font-size: 2.4vw; } }

.anchor--prod {
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  @media screen and (min-width: 768px) {
    .anchor--prod {
      margin-bottom: 32px;
      cursor: pointer; } }
  @media screen and (max-width: 767px) {
    .anchor--prod {
      /*width: 25.733334vw;*/
      margin-bottom: 4vw; } }
  .anchor--prod:hover {
    opacity: .6; }

.anchor--prod:after {
  display: block;
  margin: 0 auto;
  background: url("../images/anchor_arrow.svg") no-repeat 50% 0;
  background-size: 100% auto;
  content: ""; }
  @media screen and (min-width: 768px) {
    .anchor--prod:after {
      width: 18px;
      height: 12px;
      margin-top: 34px; } }
  @media screen and (max-width: 767px) {
    .anchor--prod:after {
      width: 2.66667vw;
      height: 1.86667vw;
      margin-top: 5.8vw; } }

/*
* .detail
*/
@media screen and (min-width: 768px) {
  .detail {
    /*margin-bottom: 145px;*/
    padding: 125px 0; } }
@media screen and (max-width: 767px) {
  .detail {
    margin-bottom: 6vw;
    padding: 21.2vw 4.8vw 7vw; } }

@media screen and (min-width: 768px) {
  .ontime .detail {
    margin-bottom: 100px; } }

.detail--title {
  color: #878782;
  font-family: "Noto Serif JP", serif;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .detail--title {
      margin-bottom: 65px;
      font-size: 1.625rem;
      letter-spacing: .08em; } }
  @media screen and (max-width: 767px) {
    .detail--title {
      margin-bottom: 15vw;
      font-size: 4.8vw;
      letter-spacing: .05em; } }

.detail__inner {
  margin: 0 auto;
  background-color: #fff;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .detail__inner {
      width: 1100px;
      margin-bottom: 19px;
      padding: 110px 150px 78px;
      border-radius: 10px; } }
  @media screen and (max-width: 767px) {
    .detail__inner {
      margin-bottom: 4.26667vw;
      width: 90.66667vw;
      padding: 20vw 0 11.2vw;
      border-radius: 2.66667vw; } }

@media screen and (min-width: 768px) {
  .detail__item {
    margin-bottom: 80px; } }
@media screen and (max-width: 767px) {
  .detail__item {
    margin-bottom: 9vw; } }

@media screen and (min-width: 768px) {
  .detail__item .item-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center; } }

.detail__description {
  order: 2; }
  @media screen and (min-width: 768px) {
    .detail__description {
      padding-top: 9px;
      width: 50%; } }
  @media screen and (max-width: 767px) {
    .detail__description {
      margin-bottom: 9.2vw;
      width: 100%; } }

@media screen and (min-width: 768px) {
  .detail--item-name {
    margin-bottom: 12px;
    font-size: 1rem;
    letter-spacing: .08em; } }
@media screen and (max-width: 767px) {
  .detail--item-name {
    margin-bottom: 3vw;
    text-align: center;
    font-size: 4.26667vw;
    letter-spacing: .08em;
    white-space: nowrap; } }

@media screen and (min-width: 768px) {
  .detail--item-type {
    margin-bottom: 35px;
    font-size: 1rem;
    letter-spacing: .08em; } }
@media screen and (max-width: 767px) {
  .detail--item-type {
    font-size: 4.26667vw;
    text-align: center;
    letter-spacing: .08em; } }
.detail--item-type span {
  color: #fff;
  text-align: center;
  background-color: #878782;
  margin-top: 10px; }
  @media screen and (min-width: 768px) {
    .detail--item-type span {
      display: inline-block;
      padding: 4.5px 10px;
      font-size: .6875rem;
      letter-spacing: .08em;
      vertical-align: 2px; } }
  @media screen and (max-width: 767px) {
    .detail--item-type span {
      display: table;
      min-width: 14.66667vw;
      width: auto;
      margin: 3.2vw auto 9vw;
      padding: 1vw 2.66667vw;
      font-size: 2.93334vw;
      letter-spacing: .14em;
      box-sizing: border-box; } }

@media screen and (max-width: 767px) {
  .detail--item-type02 {
    margin-top: 9vw !important; } }

@media screen and (min-width: 768px) {
  .detail--item-copy {
    font-size: .875rem;
    line-height: 1.8;
    letter-spacing: .15em; } }
@media screen and (max-width: 767px) {
  .detail--item-copy {
    font-size: 3.73334vw;
    line-height: 1.64286;
    text-align: center;
    letter-spacing: .06em;
    margin: 10px auto 5.4vw; } }

.detail--item-feature {
  margin-bottom: 50px; }
  @media screen and (max-width: 767px) {
    .detail--item-feature {
      width: 75vw;
      margin-left: 4vw;
      padding: 0 4vw 0; } }

.detail--item-feature li {
  padding-left: 1.6em;
  text-indent: -1.6em; }
  @media screen and (min-width: 768px) {
    .detail--item-feature li {
      margin-top: 8px;
      font-size: .8125rem;
      line-height: 1.69231;
      letter-spacing: .08em; } }
  @media screen and (max-width: 767px) {
    .detail--item-feature li {
      margin-top: 1.2vw;
      font-size: 3.2vw;
      line-height: 1.8;
      letter-spacing: .04em; } }
  .detail--item-feature li:before {
    content: "○"; }
    @media screen and (min-width: 768px) {
      .detail--item-feature li:before {
        margin-right: 6px; } }
    @media screen and (max-width: 767px) {
      .detail--item-feature li:before {
        margin-right: 1.8vw; } }
  .detail--item-feature li:first-child {
    margin-top: 0; }

.detail__picture {
  order: 1;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .detail__picture {
      width: 50%; } }
  @media screen and (max-width: 767px) {
    .detail__picture {
      width: 100%;
      margin-bottom: 8.2vw; } }

@media screen and (min-width: 768px) {
  .detail--item-picture {
    margin-bottom: 27px; } }
@media screen and (max-width: 767px) {
  .detail--item-picture {
    width: 42vw;
    height: auto;
    margin: 0 auto 9.4vw; } }

.detail--item-capa {
  letter-spacing: .04em; }
  @media screen and (min-width: 768px) {
    .detail--item-capa {
      margin-bottom: 13px;
      font-size: .875rem; } }
  @media screen and (max-width: 767px) {
    .detail--item-capa {
      margin-bottom: 3vw;
      font-size: 3.73334vw; } }

.detail__usage {
  order: 3;
  border: 1px solid #c8c8c8;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .detail__usage {
      width: 100%;
      padding: 37px 45px 43px; } }
  @media screen and (max-width: 767px) {
    .detail__usage {
      width: 82.66667vw;
      margin: 0 auto;
      padding: 5.4vw 4vw 7vw; } }

.detail__usage .copy_txt {
  margin-bottom: 20px;
  font-size: .875rem;
  line-height: 1.8;
  letter-spacing: .15em;
  padding-left: 0px;
  text-align: justify; }

@media screen and (min-width: 768px) {
  .item1 .detail__usage {
    padding-right: 95px;
    padding-left: 95px; } }

.detail--usage-title {
  text-align: center; }
  @media screen and (min-width: 768px) {
    .detail--usage-title {
      margin-bottom: 27px;
      font-size: 1.125rem;
      letter-spacing: .08em; } }
  @media screen and (max-width: 767px) {
    .detail--usage-title {
      margin-bottom: 3.8vw; } }

.detail__usage-list li {
  padding-left: 1.4em;
  text-indent: -1.4em;
  letter-spacing: .04em; }
  @media screen and (min-width: 768px) {
    .detail__usage-list li {
      margin-top: 6px;
      font-size: .875rem;
      line-height: 1.71429;
      /*hite-space: nowrap;*/ } }
  @media screen and (max-width: 767px) {
    .detail__usage-list li {
      margin-top: 1vw;
      font-size: 3.2vw;
      line-height: 1.8;
      text-align: justify; } }
  .detail__usage-list li:before {
    content: "○\00A0"; }
  .detail__usage-list li:first-child {
    margin-top: 0; }

.detail__usage-list li a {
  　　color: #3c3c3c;
  text-decoration: underline; }

.detail__usage-list li a {
  text-decoration: underline;
  color: #3c3c3c;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; }

.detail__usage-list li a:hover {
  opacity: 0.5; }

.detail hr {
  height: 2px;
  margin: 0 auto;
  border: 0;
  background-color: #e5e5e5; }
  @media screen and (min-width: 768px) {
    .detail hr {
      width: 1030px;
      margin: 0 0 80px -115px; } }
  @media screen and (max-width: 767px) {
    .detail hr {
      width: 85.33334vw;
      margin-bottom: 18vw; } }

.detail--notes {
  color: #878782;
  letter-spacing: .04em; }
  @media screen and (min-width: 768px) {
    .detail--notes {
      /*width: 1100px;*/
      margin: 0 auto;
      padding-left: 6px;
      font-size: .6875rem;
      line-height: 1.81819;
      box-sizing: border-box; } }
  @media screen and (max-width: 767px) {
    .detail--notes {
      padding-left: 1vw;
      font-size: 2.66667vw;
      line-height: 2; } }

.m--ingredients-btn {
  display: table;
  margin: 0 auto;
  color: #878782;
  cursor: pointer;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  @media screen and (min-width: 768px) {
    .m--ingredients-btn {
      font-size: .8125rem; } }
  @media screen and (max-width: 767px) {
    .m--ingredients-btn {
      font-size: 3.2vw; } }
  .m--ingredients-btn span {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid #fff; }
  .m--ingredients-btn:hover {
    opacity: .6; }
  .m--ingredients-btn:after {
    display: inline-block;
    background: url("../images/icon_ingredients_btn.svg") no-repeat 0 0;
    background-size: 100% 100%;
    content: ""; }
    @media screen and (min-width: 768px) {
      .m--ingredients-btn:after {
        width: 16px;
        height: 16px;
        margin-left: 4px;
        vertical-align: -3px; } }
    @media screen and (max-width: 767px) {
      .m--ingredients-btn:after {
        width: 4vw;
        height: 4vw;
        margin-left: 1.06667vw;
        vertical-align: -1vw; } }

.m__ingredients-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  overflow: auto;
  margin: auto;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
  opacity: 0; }
  .m__ingredients-modal:after {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: ""; }
    @media screen and (min-width: 768px) {
      .m__ingredients-modal:after {
        margin-left: -0.05em; } }
    @media screen and (max-width: 767px) {
      .m__ingredients-modal:after {
        margin-left: -0.3em; } }

.m__ingredients-modal.is-opened {
  display: block;
  animation: fadeIn 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s 1 normal forwards; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  99% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  1% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.m__ingredients-modal-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2001;
  width: 100%;
  height: 100%;
  background-color: rgba(135, 135, 130, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px); }

.m__ingredients-modal-warp {
  display: inline-block;
  position: relative;
  z-index: 2002;
  margin: auto;
  vertical-align: middle;
  background-color: #fff;
  box-sizing: border-box;
  transform: translate3d(0, 0, 0); }
  @media screen and (min-width: 768px) {
    .m__ingredients-modal-warp {
      width: 800px;
      padding: 77px 102px 70px;
      border-radius: 2px; } }
  @media screen and (max-width: 767px) {
    .m__ingredients-modal-warp {
      width: 93.06667vw;
      padding: 13.33334vw 9.33334vw 11.33334vw; } }

.is-opened .m__ingredients-modal-warp {
  animation: zoomOut 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s 1 normal forwards; }

@keyframes zoomOut {
  0% {
    transform: scale(1.04); }
  100% {
    transform: scale(1); } }
.m--ingredients-modal-title {
  color: #c8c8c8;
  font-weight: bold;
  text-align: left; }
  @media screen and (min-width: 768px) {
    .m--ingredients-modal-title {
      font-size: .875rem;
      line-height: 1.5715; } }
  @media screen and (max-width: 767px) {
    .m--ingredients-modal-title {
      font-size: 3.73334vw; } }

.m--ingredients-modal-text {
  color: #2b2e38;
  text-align: left; }
  @media screen and (min-width: 768px) {
    .m--ingredients-modal-text {
      margin-top: 20px;
      font-size: .8125rem;
      line-height: 1.69231; } }
  @media screen and (max-width: 767px) {
    .m--ingredients-modal-text {
      margin-top: 5.33334vw;
      font-size: 3.46667vw;
      line-height: 1.69231; } }

.m--ingredients-modal-close {
  display: block;
  position: absolute;
  z-index: 2002;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("/contents/shared/images/icon_ingredients_close_btn.svg") no-repeat 0 0;
  background-size: 100% 100%;
  cursor: pointer;
  outline: 0;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  @media screen and (min-width: 768px) {
    .m--ingredients-modal-close {
      top: 16px;
      right: 16px;
      width: 16px;
      height: 16px; } }
  @media screen and (max-width: 767px) {
    .m--ingredients-modal-close {
      top: 4.26667vw;
      right: 4.26667vw;
      width: 4.8vw;
      height: 4.8vw; } }
  .m--ingredients-modal-close:hover {
    opacity: .6; }

/*
* .delivery
*/
.delivery {
  position: relative;
  margin: 0 auto;
  border: 1px solid #c1e6f4;
  text-align: center;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .delivery {
      width: 800px;
      margin-bottom: 102px;
      padding: 172px 0 56px;
      border-radius: 50px; } }
  @media screen and (max-width: 767px) {
    .delivery {
      width: 90.66667vw;
      margin-bottom: 14.8vw;
      padding: 32vw 0 8.4vw;
      border-radius: 6.66667vw; } }
  .delivery:before {
    display: inline-block;
    position: absolute;
    background: url("../images/delivery_car.svg") no-repeat 50% 50%;
    background-size: 100%;
    content: ""; }
    @media screen and (min-width: 768px) {
      .delivery:before {
        top: 70px;
        left: 256px;
        width: 90px;
        height: 64px; } }
    @media screen and (max-width: 767px) {
      .delivery:before {
        top: 12.2vw;
        left: 25vw;
        width: 17.2vw;
        height: 15.2vw; } }
  .delivery:after {
    display: inline-block;
    position: absolute;
    background: url("../images/delivery_gift.svg") no-repeat 50% 50%;
    background-size: 100%;
    content: ""; }
    @media screen and (min-width: 768px) {
      .delivery:after {
        top: 70px;
        right: 239px;
        width: 92px;
        height: 62px; } }
    @media screen and (max-width: 767px) {
      .delivery:after {
        top: 11vw;
        right: 25vw;
        width: 17.2vw;
        height: 15.2vw; } }

.delivery--title {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 1;
  margin: 0 auto;
  text-align: center;
  letter-spacing: .15em;
  background-color: #fff; }
  @media screen and (min-width: 768px) {
    .delivery--title {
      top: -9px;
      width: 300px;
      font-size: 1.125rem; } }
  @media screen and (max-width: 767px) {
    .delivery--title {
      top: -1vw;
      width: 65.33334vw;
      font-size: 3.2vw; } }
  .delivery--title span:before,
  .delivery--title span:after {
    display: inline-block;
    background: url("../images/delivery_snow.svg") no-repeat 50% 50%;
    background-size: 100%;
    content: ""; }
    @media screen and (min-width: 768px) {
      .delivery--title span:before,
      .delivery--title span:after {
        width: 18px;
        height: 18px;
        vertical-align: -2px; } }
    @media screen and (max-width: 767px) {
      .delivery--title span:before,
      .delivery--title span:after {
        width: 2.93334vw;
        height: 2.93334vw;
        vertical-align: -.5vw; } }
  @media screen and (min-width: 768px) {
    .delivery--title span:before {
      margin-right: 5px; } }
  @media screen and (max-width: 767px) {
    .delivery--title span:before {
      margin-right: 2vw; } }
  @media screen and (min-width: 768px) {
    .delivery--title span:after {
      margin-left: 5px; } }
  @media screen and (max-width: 767px) {
    .delivery--title span:after {
      margin-left: 2vw; } }

.delivery--studio-title {
  letter-spacing: .15em; }
  @media screen and (min-width: 768px) {
    .delivery--studio-title {
      margin-bottom: 25px;
      font-size: 1rem; } }
  @media screen and (max-width: 767px) {
    .delivery--studio-title {
      margin-bottom: 5vw;
      font-size: 4vw; } }

@media screen and (min-width: 768px) {
  .delivery--studio-number {
    margin-bottom: 17px; } }
@media screen and (max-width: 767px) {
  .delivery--studio-number {
    margin-bottom: 4.4vw; } }
.delivery--studio-number a {
  color: #3c3c3c;
  text-decoration: none;
  letter-spacing: .15em; }
  @media screen and (min-width: 768px) {
    .delivery--studio-number a {
      font-size: 1.75rem;
      pointer-events: none; } }
  @media screen and (max-width: 767px) {
    .delivery--studio-number a {
      font-size: 6.66667vw; } }
  .delivery--studio-number a:before {
    display: inline-block;
    background: url("../images/delivery_freedial.svg") no-repeat 50% 50%;
    background-size: 100% auto;
    content: ""; }
    @media screen and (min-width: 768px) {
      .delivery--studio-number a:before {
        width: 42px;
        height: 27px;
        margin-right: 14px;
        vertical-align: -3px; } }
    @media screen and (max-width: 767px) {
      .delivery--studio-number a:before {
        width: 10.13333vw;
        height: 6.66667vw;
        margin-right: 2vw;
        vertical-align: -1vw; } }

@media screen and (min-width: 768px) {
  .delivery--studio-business-day {
    margin-bottom: 39px;
    font-size: .875rem;
    letter-spacing: .04em; } }
@media screen and (max-width: 767px) {
  .delivery--studio-business-day {
    margin-bottom: 7vw;
    font-size: 3.2vw; } }

.delivery--text {
  letter-spacing: .04em; }
  @media screen and (min-width: 768px) {
    .delivery--text {
      font-size: .875rem;
      line-height: 2.14286; } }
  @media screen and (max-width: 767px) {
    .delivery--text {
      font-size: 2.66667vw;
      line-height: 2; } }

/*
* .coffret--notes
*/
.coffret--notes {
  margin: 0 auto;
  border-top: 1px solid #e3e3e3;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .coffret--notes {
      width: 1100px;
      margin-bottom: 100px;
      padding: 34px 0 0 5px; } }
  @media screen and (max-width: 767px) {
    .coffret--notes {
      border-bottom: 1px solid #e3e3e3;
      width: 93.3334vw;
      margin-bottom: 1vw;
      padding: 9.2vw 4vw 14.6667vw 2vw; } }

.coffret--notes li {
  letter-spacing: .04em; }
  @media screen and (min-width: 768px) {
    .coffret--notes li {
      font-size: .6875rem;
      line-height: 1.81819; } }
  @media screen and (max-width: 767px) {
    .coffret--notes li {
      margin-top: 1vw;
      padding-left: 1em;
      text-indent: -1em;
      font-size: 2.66667vw;
      line-height: 1.8; } }
  .coffret--notes li:before {
    content: "※"; }
  .coffret--notes li:first-child {
    margin-top: 0; }

/****/
.entrance__description .entrance__description__title {
  font-family: "Noto Serif JP", serif;
  line-height: 1.7; }

@media screen and (min-width: 768px) {
  .entrance__description .entrance__description__title {
    font-size: 30px;
    margin-bottom: 40px;
    letter-spacing: 0.04em; } }
@media screen and (max-width: 767px) {
  .entrance__description .entrance__description__title {
    margin: 0 auto 20px;
    font-size: 20px;
    letter-spacing: -0.02em;
    text-indent: 3vw; } }
@media screen and (min-width: 768px) {
  .entrance__description__title span {
    display: block;
    margin-top: 1.5625vw;
    font-size: 1.40625vw; } }
@media screen and (max-width: 767px) {
  .entrance__description__title span {
    text-indent: -1.4vw;
    display: inline-block;
    letter-spacing: 0.02em;
    margin-top: 2.93333vw;
    font-size: 4.26667vw; } }
.btn__more a {
  width: 340px;
  text-align: center;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid #c8c8c8;
  border-radius: 25px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  box-sizing: border-box; }

@media screen and (max-width: 767px) {
  .btn__more a {
    width: 80vw;
    border-radius: 7.33333vw; } }
.btn__more a, .btn__more a span {
  display: inline-block;
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; }

.btn__more a span {
  color: #3c3c3c;
  font-size: 14px;
  line-height: 48px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; }

.btn__more a:before {
  content: "";
  display: block;
  width: 6px;
  height: 48px;
  background-image: url(../images/icon-arrow-gray.svg);
  background-size: 6px auto;
  background-position: center;
  position: absolute;
  right: 26px;
  top: 0;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; }

@media screen and (max-width: 767px) {
  .btn__more a:before {
    width: 1.73333vw;
    height: 13.6vw;
    background-size: 1.73333vw auto;
    right: 6.93333vw;
    top: 0.1vw; } }
@media screen and (min-width: 768px) {
  .btn__more a:hover {
    color: #fff;
    background-color: #c8c8c8; } }
@media screen and (min-width: 768px) {
  .btn__more a:hover:before {
    background-image: url(../images/icon-arrow-white.svg); } }
@media screen and (min-width: 768px) {
  .btn__more a:hover span {
    color: #fff; } }
.btn__more {
  margin-bottom: 20px; }

.first02 {
  align-items: center;
  justify-content: center;
  margin-top: -60px; }
  @media screen and (max-width: 767px) {
    .first02 {
      margin-top: -60px; } }

@media screen and (min-width: 768px) {
  .first02 .prod--picture {
    margin: 0 95px 0 185px; } }
@media screen and (max-width: 767px) {
  .first02 .prod--picture {
    margin: 0 auto 20px;
    width: 150px !important; } }

@media screen and (min-width: 768px) {
  .first02 .prod--picture img {
    width: 220px;
    height: auto; } }
@media screen and (max-width: 767px) {
  .first02 .prod--picture img {
    width: 150px !important;
    margin: 0 auto; } }

@media screen and (min-width: 768px) {
  .first02 .prod__description {
    width: 50%; } }

.cart-in a {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  background-color: #878782;
  box-sizing: border-box;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  font-weight: bold; }

@media screen and (min-width: 768px) {
  .cart-in a {
    width: 340px;
    height: 50px;
    border-radius: 2px;
    font-size: 1.125rem;
    margin-top: 20px; } }
@media screen and (max-width: 767px) {
  .cart-in a {
    width: 80vw;
    border-radius: 0.53334vw;
    margin: 4.8vw auto 0;
    font-weight: 700;
    line-height: 14.66667vw; } }
@media screen and (min-width: 768px) {
  .cart-in a:hover {
    color: #fff;
    background-color: #c8c8c8; } }
.cart-in a svg, .cart-in a img {
  fill: #fff;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }

@media screen and (min-width: 768px) {
  .cart-in a svg, .cart-in a img {
    width: 30px;
    height: 30px;
    margin-right: 5px; } }
@media screen and (max-width: 767px) {
  .cart-in a svg, .cart-in a img {
    width: 7.46667vw;
    height: 7.46667vw;
    padding-right: 1.2vw; } }
.product__description__sold-out {
  font-size: 13px;
  line-height: 1.4;
  color: #fca4cc;
  width: 340px;
  border-radius: 2px;
  background-color: white;
  padding: 6px 20px;
  box-sizing: border-box;
  margin-top: -20px;
  margin-bottom: 10px;
  padding-left: 0; }
  @media screen and (max-width: 767px) {
    .product__description__sold-out {
      width: 100%;
      text-align: center;
      padding: 6px 0;
      margin: -10px auto 20px; } }

.products.wideInner.cbox .product__description__sold-out {
  border: none;
  padding: 0; }

sup {
  font-size: 10px;
  vertical-align: text-bottom; }

/**ここから2025用**/
.prod {
  padding-top: 0 !important;
  background-color: inherit !important; }

.first-wrap {
  background: linear-gradient(to bottom, #394162 0%, #677CB6 100%);
  width: 100%;
  padding: 0px 0 70px; }
  @media screen and (max-width: 767px) {
    .first-wrap {
      padding: 0px 0 60px; } }

.first-wrap .prod-boxwrap {
  position: relative;
  border-radius: 10px;
  z-index: 1;
  width: 1100px;
  margin: 0 auto;
  padding: 70px 0 0;
  box-sizing: border-box; }
  @media screen and (max-width: 767px) {
    .first-wrap .prod-boxwrap {
      width: 85%;
      padding: 70px 0 70px; } }

.first-wrap .prod-boxwrap:before {
  content: "";
  position: absolute;
  inset: 0;
  /* 外に広がる量 */
  z-index: -1;
  filter: blur(5px);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px; }

.prod-box01 {
  width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
  @media screen and (max-width: 767px) {
    .prod-box01 {
      width: 100%; } }
  .prod-box01 .prod-img {
    width: 50%;
    text-align: center; }
    @media screen and (max-width: 767px) {
      .prod-box01 .prod-img {
        width: 85%;
        margin: 0 auto; } }
    .prod-box01 .prod-img img {
      width: 100%;
      max-width: 312px; }
      @media screen and (max-width: 767px) {
        .prod-box01 .prod-img img {
          max-width: 216px; } }
  .prod-box01 .prod-txtbox {
    width: 50%; }
    @media screen and (max-width: 767px) {
      .prod-box01 .prod-txtbox {
        width: 100%; } }
  @media screen and (max-width: 767px) {
    .prod-box01 a {
      width: 70vw; } }

.prod-title {
  margin: 0 auto;
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  line-height: 160%;
  color: #fff;
  text-align: center;
  padding: 74px 0;
  background: url("../images/star.png") left 25px center no-repeat, url("../images/moon.png") right center no-repeat;
  background-size: 109px; }
  @media screen and (min-width: 768px) {
    .prod-title {
      width: 770px; } }
  @media screen and (max-width: 767px) {
    .prod-title {
      padding: 80px 0;
      background: url("../images/star.png") left 25px top 25px no-repeat, url("../images/moon.png") right 30px bottom 45px no-repeat;
      background-size: 58px; } }

.anchor_item01 {
  display: block;
  max-width: 98px; }
  @media screen and (max-width: 767px) {
    .anchor_item01 {
      max-width: 45px; } }

.anchor_item02 {
  display: block;
  max-width: 130px; }
  @media screen and (max-width: 767px) {
    .anchor_item02 {
      max-width: 59px; } }

.anchor_item03 {
  display: block;
  max-width: 117px; }
  @media screen and (max-width: 767px) {
    .anchor_item03 {
      max-width: 54px; } }

.anchor_item04 {
  display: block;
  max-width: 38px; }
  @media screen and (max-width: 767px) {
    .anchor_item04 {
      max-width: 17px; } }

/***/
.second {
  position: relative;
  padding: 70px 0 100px;
  z-index: 1;
  /*	background-image: linear-gradient(
  	  180deg,
  	  rgba(103,124,182,1) 5%,
  	  rgba(170,176,206,1) 10%,
  	  rgba(176,181,208,1) 15%,
  	  rgba(166,191,219,1) 20%,
  	  rgba(162,194,223,1) 32%,
  	  rgba(255,255,255,1) 32%
  	);*/ }
  @media screen and (max-width: 767px) {
    .second {
      padding: 0 0 70px;
      /*		background-image: linear-gradient(
      		  180deg,
      		  rgba(103,124,182,1) 5%,
      		  rgba(170,176,206,1) 10%,
      		  rgba(176,181,208,1) 15%,
      		  rgba(166,191,219,1) 20%,
      		  rgba(162,194,223,1) 28%,
      		  rgba(255,255,255,1) 28%
      		);*/ } }

.bg_item {
  position: absolute;
  z-index: -1; }
  @media screen and (max-width: 767px) {
    .bg_item {
      width: 88px !important;
      display: block; } }

.bg_moon1 {
  top: 10%;
  left: 10%; }
  @media screen and (max-width: 767px) {
    .bg_moon1 {
      top: 2.5%;
      left: 10%; } }

.bg_star1 {
  top: 40%;
  right: 10%; }
  @media screen and (max-width: 767px) {
    .bg_star1 {
      width: 79px !important;
      top: 30%;
      right: 3%; } }

.bg_moon2 {
  top: 64%;
  left: 10%; }
  @media screen and (max-width: 767px) {
    .bg_moon2 {
      top: 55.5%;
      left: 6%; } }

.bg_star2 {
  top: 86%;
  right: 10%; }
  @media screen and (max-width: 767px) {
    .bg_star2 {
      top: 79%; } }

.second .second-wrap {
  width: 890px;
  margin: 0 auto; }
  @media screen and (max-width: 767px) {
    .second .second-wrap {
      width: 100%; } }
  .second .second-wrap .box01.item-area {
    display: flex; }
    @media screen and (max-width: 767px) {
      .second .second-wrap .box01.item-area {
        flex-wrap: wrap; } }
    .second .second-wrap .box01.item-area .detail__description {
      position: relative;
      padding: 45px;
      z-index: 0;
      border-radius: 3px; }
      @media screen and (max-width: 767px) {
        .second .second-wrap .box01.item-area .detail__description {
          width: 70%;
          margin: 0 auto;
          padding: 30px 20px 30px; } }
    .second .second-wrap .box01.item-area .detail__description:before {
      content: "";
      position: absolute;
      inset: 0px;
      z-index: -1;
      background: rgba(255, 255, 255, 0.9);
      filter: blur(5px);
      border-radius: 3px; }
    @media screen and (max-width: 767px) {
      .second .second-wrap .box01.item-area .detail--item-copy {
        margin: 10px auto 10px;
        letter-spacing: .04em; } }
    .second .second-wrap .box01.item-area .detail--item-capa {
      color: #fff; }
    .second .second-wrap .box01.item-area .m--ingredients-btn {
      color: #fff; }
    @media screen and (max-width: 767px) {
      .second .second-wrap .box01.item-area .detail--item-name {
        line-height: 160%; } }
    .second .second-wrap .box01.item-area .detail--notes {
      margin: 10px auto 19px;
      font-size: .6875rem;
      letter-spacing: -0.3px;
      line-height: 1.8; }
    .second .second-wrap .box01.item-area .detail--item-feature {
      margin: 15px auto; }
      @media screen and (max-width: 767px) {
        .second .second-wrap .box01.item-area .detail--item-feature {
          width: 100%;
          padding: 0; } }
      .second .second-wrap .box01.item-area .detail--item-feature:last-child {
        margin: 15px auto 0; }
    .second .second-wrap .box01.item-area .detail--item-picture {
      margin-top: 30px; }
      @media screen and (max-width: 767px) {
        .second .second-wrap .box01.item-area .detail--item-picture {
          margin: 0 auto 30px; } }
    .second .second-wrap .box01.item-area .detail--item-picture.prod1 img {
      width: 118px; }
      @media screen and (max-width: 767px) {
        .second .second-wrap .box01.item-area .detail--item-picture.prod1 img {
          width: 89px; } }
    .second .second-wrap .box01.item-area .detail--item-picture.prod2 img {
      width: 226px; }
      @media screen and (max-width: 767px) {
        .second .second-wrap .box01.item-area .detail--item-picture.prod2 img {
          width: 168px; } }
    .second .second-wrap .box01.item-area .detail--item-picture.prod3 img {
      width: 201px; }
      @media screen and (max-width: 767px) {
        .second .second-wrap .box01.item-area .detail--item-picture.prod3 img {
          width: 148px; } }
    .second .second-wrap .box01.item-area .detail--item-picture.prod4 img {
      width: 66px; }
      @media screen and (max-width: 767px) {
        .second .second-wrap .box01.item-area .detail--item-picture.prod4 img {
          width: 47px; } }
    .second .second-wrap .box01.item-area .component-img {
      text-align: center;
      display: block;
      margin: 0 auto; }
      @media screen and (max-width: 767px) {
        .second .second-wrap .box01.item-area .component-img {
          width: 65%;
          margin-top: 30px; } }
  .second .second-wrap .box02.detail__usage {
    border: none;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 45px;
    z-index: 0;
    border-radius: 3px;
    margin: 50px auto 100px; }
    @media screen and (max-width: 767px) {
      .second .second-wrap .box02.detail__usage {
        width: 80%;
        padding: 30px 20px 25px;
        margin: 40px auto 60px; } }
    .second .second-wrap .box02.detail__usage:last-of-type {
      margin: 50px auto 0; }
  .second .second-wrap .box02:before {
    content: "";
    position: absolute;
    inset: 0px;
    z-index: -1;
    background: rgba(255, 255, 255, 0.9);
    filter: blur(5px);
    border-radius: 3px; }
  .second .second-wrap .box02.detail__usage ul {
    width: 608px;
    margin: 0 auto 10px; }
    @media screen and (max-width: 767px) {
      .second .second-wrap .box02.detail__usage ul {
        width: 100%; } }

@media screen and (min-width: 768px) {
  .detail .prod-box01 .prod-img img {
    max-width: 290px; } }

/*背景固定*/
.sticky-bg-box {
  position: relative;
  z-index: 1; }
  @media screen and (max-width: 767px) {
    .sticky-bg-box {
      margin-top: -2px; } }

.sticky-bg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 0; }
  .sticky-bg::before {
    content: "";
    position: sticky;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /*background-image:linear-gradient(180deg, #677cb6 23%, #aab0ce 60%, #b0b5d0 75%, #a6bfdb 85%, #a2c2df 92%);*/
    background-image: linear-gradient(180deg, #677CB6 0%, #B0B5D0 50%, #A2C2DF 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1; }