/*
$newsColor: (
  col01: #238561,
  col02: #67a2b7,
  col03: #d2843e,
  col04: #cf775b,
  col05: #cf9942,
  col06: #926c28,
  col07: #cc7175,
  col08: #608ea1,
  col09: #5b609a,
  col10: #487390,
  col11: #4e9386,
  col12: #79a153,
  col13: #817499
);
*/
main {
  position: relative;
  width: 100%;
  overflow: hidden;
  /*
  @include mq(pc) {
  background: url("../img/index/bg.jpg") center divceil(662, 10, rem) no-repeat;
  background-size: 100% auto;
  }
  */
}

main #stage {
  position: relative;
}
@media screen and (min-width: 769px) {
  main #stage {
    width: 192rem;
    margin-left: 50%;
    transform: translateX(-50%);
    background: url("../img/index/bg.jpg") center 0 no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  main #stage {
    width: 100%;
    background: url("../img/index/bg_sp.jpg") center 0 no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 1921px) {
  main #stage::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
    pointer-events: none;
    background: url("../img/index/bg_cover.png") 0 0 repeat-y;
    background-size: 100% auto;
  }
}
main #stage .cap {
  color: #727272;
  font-weight: 400;
}
@media screen and (min-width: 769px) {
  main #stage .cap {
    line-height: 1em;
    font-size: 1.4rem;
    letter-spacing: 0em;
  }
}
@media screen and (max-width: 768px) {
  main #stage .cap {
    line-height: 1em;
    font-size: 2.2rem;
    letter-spacing: 0em;
  }
}

main #stage .abs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

main #stage .abs .abs_inner {
  position: relative;
}
@media screen and (min-width: 769px) {
  main #stage .abs .abs_inner {
    width: 128rem;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  main #stage .abs .abs_inner {
    width: 100%;
  }
}

main #stage .note {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

main #stage .note1 {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@media screen and (min-width: 769px) {
  main #stage .note1 {
    animation: note_animation1 5.6s ease-in-out infinite;
  }
}
@media screen and (max-width: 768px) {
  main #stage .note1 {
    animation: note_animation1_sp 5.6s ease-in-out infinite;
  }
}

@keyframes note_animation1 {
  0% {
    transform: translateY(0rem) rotate(0deg);
  }
  50% {
    transform: translateY(-0.3rem) rotate(2deg);
  }
  100% {
    transform: translateY(0rem) rotate(0deg);
  }
}
@keyframes note_animation1_sp {
  0% {
    transform: translateY(0rem) rotate(0deg);
  }
  50% {
    transform: translateY(-0.6rem) rotate(0.5deg);
  }
  100% {
    transform: translateY(0rem) rotate(0deg);
  }
}
main #stage .note2 {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@media screen and (min-width: 769px) {
  main #stage .note2 {
    animation: note_animation2 5.6s ease-in-out infinite;
  }
}
@media screen and (max-width: 768px) {
  main #stage .note2 {
    animation: note_animation2_sp 5.6s ease-in-out infinite;
  }
}

@keyframes note_animation2 {
  0% {
    transform: translateY(0rem) rotate(0deg);
  }
  50% {
    transform: translateY(-0.8rem) rotate(-2deg);
  }
  100% {
    transform: translateY(0rem) rotate(0deg);
  }
}
@keyframes note_animation2_sp {
  0% {
    transform: translateY(0rem) rotate(0deg);
  }
  50% {
    transform: translateY(-1.6rem) rotate(-2deg);
  }
  100% {
    transform: translateY(0rem) rotate(0deg);
  }
}
main #stage .note3 {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@media screen and (min-width: 769px) {
  main #stage .note3 {
    animation: note_animation3 5.6s ease-in-out infinite;
  }
}
@media screen and (max-width: 768px) {
  main #stage .note3 {
    animation: note_animation3_sp 5.6s ease-in-out infinite;
  }
}

@keyframes note_animation3 {
  0% {
    transform: translateY(0rem) rotate(0deg);
  }
  50% {
    transform: translateY(-0.7rem) rotate(1deg);
  }
  100% {
    transform: translateY(0rem) rotate(0deg);
  }
}
@keyframes note_animation3_sp {
  0% {
    transform: translateY(0rem) rotate(0deg);
  }
  50% {
    transform: translateY(-1.4rem) rotate(1deg);
  }
  100% {
    transform: translateY(0rem) rotate(0deg);
  }
}
main #stage .note4 {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@media screen and (min-width: 769px) {
  main #stage .note4 {
    animation: note_animation2 5.6s ease-in-out infinite;
  }
}
@media screen and (max-width: 768px) {
  main #stage .note4 {
    animation: note_animation4_sp 5.6s ease-in-out infinite;
  }
}

@keyframes note_animation4_sp {
  0% {
    transform: translateY(0rem) rotate(0deg);
  }
  50% {
    transform: translateY(-1rem) rotate(-0.5deg);
  }
  100% {
    transform: translateY(0rem) rotate(0deg);
  }
}
main #stage .note5 {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
@media screen and (min-width: 769px) {
  main #stage .note5 {
    animation: note_animation3 5.6s ease-in-out infinite;
  }
}
@media screen and (max-width: 768px) {
  main #stage .note5 {
    animation: note_animation5_sp 5.6s ease-in-out infinite;
  }
}

@keyframes note_animation5_sp {
  0% {
    transform: translateY(0rem) rotate(0deg);
  }
  50% {
    transform: translateY(-0.6rem) rotate(0.5deg);
  }
  100% {
    transform: translateY(0rem) rotate(0deg);
  }
}
main #stage .set {
  position: relative;
  width: 100%;
  height: 100%;
}

#kv {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  #kv {
    width: 100%;
    height: 115.7rem;
  }
}
@media screen and (max-width: 768px) {
  #kv {
    width: 100%;
    height: 112rem;
  }
}

#kv .cap1 {
  position: absolute;
  display: block;
}
@media screen and (min-width: 769px) {
  #kv .cap1 {
    top: 94rem;
    right: 22.3rem;
  }
}
@media screen and (max-width: 768px) {
  #kv .cap1 {
    top: 93rem;
    right: 2rem;
    font-size: 1.8rem;
  }
}

main #kv .cap2 {
  position: absolute;
  display: block;
  font-weight: 900;
  text-align: center;
  color: #e60013;
}
@media screen and (min-width: 769px) {
  main #kv .cap2 {
    top: 96.1rem;
    right: 28.7rem;
    line-height: 1.25em;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  main #kv .cap2 {
    top: 98rem;
    right: 6rem;
    line-height: 1.182em;
    font-size: 2.2rem;
  }
}

main #kv .cap3 {
  position: absolute;
  display: block;
  font-weight: 900;
  text-align: center;
  color: #e60013;
}
@media screen and (min-width: 769px) {
  main #kv .cap3 {
    top: 96.1rem;
    right: 23.1rem;
    line-height: 1.25em;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  main #kv .cap3 {
    top: 96rem;
    right: 19.6rem;
    line-height: 1.182em;
    font-size: 2.2rem;
  }
}

@media screen and (min-width: 769px) {
  #kv .note1 {
    background: url("../img/index/kv_note1.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #kv .note1 {
    background: url("../img/index/kv_note1_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #kv .note2 {
    background: url("../img/index/kv_note2.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #kv .note2 {
    background: url("../img/index/kv_note2_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #kv .note3 {
    background: url("../img/index/kv_note3.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #kv .note3 {
    background: url("../img/index/kv_note3_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

#kv h1 {
  transition: ease-out 0.6s all;
  opacity: 0;
}

#kv h1.start {
  opacity: 1;
}

#kv #kv_line1 {
  transform-origin: center left;
}
@media screen and (min-width: 769px) {
  #kv #kv_line1 {
    transition: ease-out 0.9s all;
    opacity: 0;
    transform: scaleX(0.95);
  }
}
@media screen and (max-width: 768px) {
  #kv #kv_line1 {
    transition: ease-out 1.2s all;
    opacity: 0;
    transform: scaleX(0.95);
  }
}

#kv #kv_line1.start {
  opacity: 1;
  transform: scaleX(1);
}

#kv #kv_line2 {
  transform-origin: center right;
}
@media screen and (min-width: 769px) {
  #kv #kv_line2 {
    transition: ease-out 0.9s all;
    opacity: 0;
    transform: scaleX(0.95);
  }
}
@media screen and (max-width: 768px) {
  #kv #kv_line2 {
    transition: ease-out 1.2s all;
    opacity: 0;
    transform: scaleX(0.95);
  }
}

#kv #kv_line2.start {
  opacity: 1;
  transform: scaleX(1);
}

#kv .note {
  opacity: 0;
}

#kv .note.start {
  transition: ease-out 0.9s all;
  opacity: 1;
}

#kv .cap {
  transition: ease-out 0.9s all;
  opacity: 0;
  /*transform: translateY(10px);*/
}

#kv .cap.start {
  transform: translateY(0);
  opacity: 1;
}

#kv .product {
  transition: ease-out 0.6s all;
  opacity: 0;
}
@media screen and (min-width: 769px) {
  #kv .product {
    transform: translateY(-2rem);
  }
}
@media screen and (max-width: 768px) {
  #kv .product {
    transform: translateY(-4rem);
  }
}

#kv .product.start {
  transform: translateY(0rem);
  opacity: 1;
}

#label {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  #label {
    width: 100%;
    height: 77rem;
    margin-top: -14.5rem;
  }
}
@media screen and (max-width: 768px) {
  #label {
    width: 100%;
    height: 92rem;
    margin-top: -8rem;
  }
}

@media screen and (min-width: 769px) {
  #label .note1 {
    background: url("../img/index/label_note1.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #label .note1 {
    background: url("../img/index/label_note1_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #label .note3 {
    background: url("../img/index/label_note2.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #label .note3 {
    background: url("../img/index/label_note2_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

#movie {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  #movie {
    width: 100%;
    height: 97rem;
    margin-top: -7rem;
  }
}
@media screen and (max-width: 768px) {
  #movie {
    width: 100%;
    height: 83rem;
  }
}

@media screen and (min-width: 769px) {
  #movie .note1 {
    background: url("../img/index/movie_note1.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #movie .note1 {
    background: url("../img/index/movie_note1_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #movie .note2 {
    background: url("../img/index/movie_note2.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #movie .note2 {
    background: url("../img/index/movie_note2_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #movie .note3 {
    background: url("../img/index/movie_note3.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #movie .note3 {
    background: url("../img/index/movie_note3_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

#about {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  #about {
    width: 100%;
    min-height: 132.3rem;
  }
}
@media screen and (max-width: 768px) {
  #about {
    width: 100%;
    min-height: 165rem;
  }
}

@media screen and (min-width: 769px) {
  #about .note1 {
    height: 132.3rem !important;
    background: url("../img/index/about_note1.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #about .note1 {
    height: 165rem !important;
    background: url("../img/index/about_note1_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #about .note3 {
    height: 132.3rem !important;
    background: url("../img/index/about_note2.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #about .note3 {
    height: 165rem !important;
    opacity: 0;
  }
}

#about .about_cont {
  position: relative;
  overflow: hidden;
  z-index: 20;
}
@media screen and (min-width: 769px) {
  #about .about_cont {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  #about .about_cont {
    width: 100%;
  }
}

#open_block {
  position: relative;
}

#open_block figure {
  position: relative;
  overflow: hidden;
  transition: 0.6s ease-out;
}
@media screen and (min-width: 769px) {
  #open_block figure {
    height: 39.6rem;
  }
}
@media screen and (max-width: 768px) {
  #open_block figure {
    height: 44.4rem;
  }
}

@media screen and (min-width: 769px) {
  #open_block.open figure {
    height: 210.5rem !important;
  }
}
@media screen and (max-width: 768px) {
  #open_block.open figure {
    height: 433.6rem !important;
  }
}

#open_btm {
  position: relative;
}
@media screen and (max-width: 768px) {
  #open_btm {
    /*transform: translateY(divceil(-2, 10, rem));*/
  }
}

.open_btn {
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../img/btn_bg.jpg") center center no-repeat;
  background-size: 120% auto;
  margin: 0 auto;
  z-index: 30;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .open_btn {
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12rem;
    height: 6.8rem;
    border-radius: 3.4rem;
  }
}
@media screen and (max-width: 768px) {
  .open_btn {
    top: 41%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16rem;
    height: 9rem;
    border-radius: 4.5rem;
  }
}

.open_btn span {
  position: absolute;
  display: block;
  transition: 0.6s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
}
@media screen and (min-width: 769px) {
  .open_btn span {
    width: 1.3rem;
  }
}
@media screen and (max-width: 768px) {
  .open_btn span {
    width: 1.8rem;
  }
}

@media screen and (min-width: 769px) {
  .open_btn:hover p {
    opacity: 0.6;
  }
}

@media screen and (min-width: 769px) {
  .open_btn:hover span {
    transform: translate(-50%, -25%) rotate(-90deg);
  }
}

#open_block.open .open_btn span {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media screen and (min-width: 769px) {
  #open_block.open .open_btn:hover span {
    transform: translate(-50%, -75%) rotate(90deg);
  }
}

#product {
  position: relative;
}
@media screen and (min-width: 769px) {
  #product {
    width: 100%;
    height: 177.6rem;
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  #product {
    width: 100%;
    height: 338.7rem;
  }
}

#product .abs > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 769px) {
  #product .note1 {
    background: url("../img/index/product_note1.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #product .note1 {
    background: url("../img/index/product_note1_sp.png") center bottom no-repeat;
    background-size: 100% auto;
    height: 110%;
  }
}

@media screen and (min-width: 769px) {
  #product .note4 {
    background: url("../img/index/product_note2.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #product .note4 {
    background: url("../img/index/product_note2_sp.png") center bottom no-repeat;
    background-size: 100% auto;
    height: 110%;
  }
}

@media screen and (min-width: 769px) {
  #product .note5 {
    background: url("../img/index/product_note3.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #product .note5 {
    background: url("../img/index/product_note3_sp.png") center bottom no-repeat;
    background-size: 100% auto;
    height: 110%;
  }
}

@media screen and (min-width: 769px) {
  #product_btn_set {
    padding-top: 24.8rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  #product_btn_set {
    padding-top: 26.5rem;
  }
}

.product_btn {
  position: relative !important;
  display: block;
  overflow: hidden;
  background: url("../img/index/product_bg.png") center center no-repeat;
  background-size: 100% auto;
}
@media screen and (min-width: 769px) {
  .product_btn {
    width: 49rem;
    height: 49rem;
  }
}
@media screen and (max-width: 768px) {
  .product_btn {
    width: 60rem;
    height: 60rem;
  }
}
.product_btn:empty {
  visibility: hidden;
}

@media screen and (max-width: 768px) {
  #product_btn1 {
    margin-left: 4rem;
  }
}

@media screen and (max-width: 768px) {
  #product_btn2 {
    margin-left: 15.5rem;
  }
}

@media screen and (min-width: 769px) {
  #product_btn4 {
    background: url("../img/index/product_bg2.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #product_btn4 {
    margin-left: 4rem;
    background: url("../img/index/product_bg4.png") center top no-repeat;
    background-size: 100% 100%;
  }
}

@media screen and (max-width: 768px) {
  #product_btn3 {
    margin-left: 9.5rem;
    height: 85.7rem !important;
    background: url("../img/index/product_bg3.png") center center no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #product_btn2,
  #product_btn5 {
    transform: translateY(9.5rem);
  }
}
@media screen and (max-width: 768px) {
  #product_btn5 {
    margin-left: 9.5rem;
  }
}

.product_btn > a img {
  position: relative;
}
@media screen and (min-width: 769px) {
  .product_btn > a img {
    width: 45.5rem;
    height: 45.5rem;
  }
}
@media screen and (max-width: 768px) {
  .product_btn > a img {
    width: 55.7rem;
    height: 55.7rem;
  }
}

.product_btn a > span {
  position: relative;
  display: block;
  color: #644c42;
  text-align: justify;
  font-weight: 400;
}
@media screen and (min-width: 769px) {
  .product_btn a > span {
    line-height: 1.5em;
    font-size: 1.2rem;
    letter-spacing: 0em;
    width: 45.5rem;
    padding: 0 2rem 0rem;
    transform: translateY(-2.3rem);
  }
}
@media screen and (max-width: 768px) {
  .product_btn a > span {
    line-height: 1.4em;
    font-size: 2rem;
    letter-spacing: 0em;
    width: 55.7rem;
    padding: 0 2rem 0rem;
    transform: translateY(-2.8rem);
  }
}

@media screen and (min-width: 769px) {
  #product_btn4 {
    height: 63rem;
  }
}
@media screen and (max-width: 768px) {
  #product_btn4 {
    height: 87rem;
  }
}

.product_btn > a img {
  transition: 0.6s ease-out;
}

@media screen and (min-width: 769px) {
  .product_btn > a:hover > img {
    opacity: 0.5;
  }
}

.more_btn {
  position: absolute;
  overflow: hidden;
  background: url("../img/index/more_bg.png") center center no-repeat;
  background-size: contain;
}
@media screen and (min-width: 769px) {
  .more_btn {
    top: 71rem;
    left: 12rem;
    width: 17.5rem;
    height: 13.5rem;
  }
}
@media screen and (max-width: 768px) {
  .more_btn {
    top: 201rem;
    left: 24rem;
    width: 28rem;
    height: 22rem;
  }
}

.more_btn span {
  position: absolute;
  display: block;
  transition: 0.6s ease-in-out;
  transform: translateY(0rem) rotate(-90deg);
}
@media screen and (min-width: 769px) {
  .more_btn span {
    bottom: 2.5rem;
    left: 6.5rem;
    width: 1rem;
  }
}
@media screen and (max-width: 768px) {
  .more_btn span {
    bottom: 3.7rem;
    left: 10.5rem;
    width: 1.8rem;
  }
}

@media screen and (min-width: 769px) {
  .more_btn:hover span {
    transform: translateY(0.5rem) rotate(-90deg);
  }
}

#recipe {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  #recipe {
    width: 100%;
    height: 105.5rem;
    margin-top: -38rem;
  }
}
@media screen and (max-width: 768px) {
  #recipe {
    width: 100%;
    height: 134rem;
    margin-top: -23rem;
  }
}

@media screen and (min-width: 769px) {
  #recipe.commentout_blank {
    height: 96.5rem !important;
  }
}
@media screen and (max-width: 768px) {
  #recipe.commentout_blank {
    height: 142rem !important;
  }
}

@media screen and (min-width: 769px) {
  #recipe .note1 {
    background: url("../img/index/recipe_note1.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #recipe .note1 {
    background: url("../img/index/recipe_note1_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #recipe .note2 {
    background: url("../img/index/recipe_note2.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #recipe .note2 {
    background: url("../img/index/recipe_note2_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

#recipe .cap1 {
  position: absolute;
  display: block;
}
@media screen and (min-width: 769px) {
  #recipe .cap1 {
    top: 79rem;
    left: 140rem;
  }
}
@media screen and (max-width: 768px) {
  #recipe .cap1 {
    top: 110rem;
    right: 4rem;
  }
}

#recipe_btn a {
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../img/btn_bg.jpg") center center no-repeat;
  background-size: 120% auto;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  #recipe_btn a {
    top: 77.5rem;
    left: 79.8rem;
    width: 32.4rem;
    height: 6.8rem;
    border-radius: 3.4rem;
  }
}
@media screen and (max-width: 768px) {
  #recipe_btn a {
    top: 117.2rem;
    left: 16.5rem;
    width: 42rem;
    height: 9rem;
    border-radius: 4.5rem;
  }
}

#recipe_btn a p {
  position: relative;
  color: #fff;
  transition: 0.6s ease-in-out;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  #recipe_btn a p {
    line-height: 1em;
    font-size: 2.1rem;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 768px) {
  #recipe_btn a p {
    line-height: 1em;
    font-size: 3rem;
    letter-spacing: 0.05em;
  }
}

#recipe_btn a span {
  position: absolute;
  display: block;
  transition: 0.6s ease-in-out;
  transform: translateX(0rem) rotate(180deg);
}
@media screen and (min-width: 769px) {
  #recipe_btn a span {
    top: 2.2rem;
    right: 3rem;
    width: 1.3rem;
  }
}
@media screen and (max-width: 768px) {
  #recipe_btn a span {
    top: 3rem;
    right: 4rem;
    width: 1.8rem;
  }
}

@media screen and (min-width: 769px) {
  #recipe_btn a:hover p {
    opacity: 0.6;
  }
}

@media screen and (min-width: 769px) {
  #recipe_btn a:hover span {
    transform: translateX(1rem) rotate(180deg);
  }
}

#recipe .btn_set {
  position: relative;
  z-index: 20;
}
@media screen and (min-width: 769px) {
  #recipe .btn_set {
    padding-top: 42rem;
    width: 103rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 768px) {
  #recipe .btn_set {
    padding-top: 50rem;
    width: 63rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
}

#recipe .btn_set a {
  position: relative;
  display: block;
  transition: 0.6s ease-out;
}
@media screen and (min-width: 769px) {
  #recipe .btn_set a {
    width: 34.3rem;
  }
}
@media screen and (max-width: 768px) {
  #recipe .btn_set a {
    width: 31.5rem;
  }
}

#recipe .btn_set a img {
  position: relative;
  display: block;
  transition: 0.4s ease-in-out;
  transform-origin: center center;
}

@media screen and (min-width: 769px) {
  #recipe .btn_set a:hover img {
    transform: scale(1.1);
  }
}

#shop {
  position: relative;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  #shop {
    width: 100%;
    height: 130.4rem;
    margin-top: -12rem;
  }
}
@media screen and (max-width: 768px) {
  #shop {
    width: 100%;
    height: 217.8rem;
  }
}

@media screen and (min-width: 769px) {
  #shop .note1 {
    background: url("../img/index/shop_note1.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #shop .note1 {
    background: url("../img/index/shop_note1_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #shop .note2 {
    background: url("../img/index/shop_note2.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #shop .note2 {
    background: url("../img/index/shop_note2_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 769px) {
  #shop .note3 {
    background: url("../img/index/shop_note3.png") center top no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #shop .note3 {
    background: url("../img/index/shop_note3_sp.png") center top no-repeat;
    background-size: 100% auto;
  }
}

#shop_btn .btn {
  position: absolute;
  display: block;
}
#shop_btn .btn a {
  transition: 0.6s ease-out;
}
#shop_btn .btn a:hover {
  opacity: 0.6;
}
@media screen and (min-width: 769px) {
  #shop_btn .btn_amazon {
    top: 65.5rem;
    left: 87rem;
    width: 36rem;
  }
}
@media screen and (max-width: 768px) {
  #shop_btn .btn_amazon {
    top: 98rem;
    left: 16.4rem;
    width: 42.2rem;
  }
}
@media screen and (min-width: 769px) {
  #shop_btn .btn_amazon_fresh {
    top: 81.6rem;
    left: 87rem;
    width: 36rem;
  }
}
@media screen and (max-width: 768px) {
  #shop_btn .btn_amazon_fresh {
    top: 142rem;
    left: 16.4rem;
    width: 42.2rem;
  }
}
@media screen and (min-width: 769px) {
  #shop_btn .btn_greenbeens {
    top: 92rem;
    left: 87rem;
    width: 36rem;
  }
}
@media screen and (max-width: 768px) {
  #shop_btn .btn_greenbeens {
    top: 156.5rem;
    left: 16.4rem;
    width: 42.2rem;
  }
}
#shop_btn .txt {
  text-align: center;
}
@media screen and (min-width: 769px) {
  #shop_btn .txt {
    margin-top: 1rem;
    line-height: 1em;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  #shop_btn .txt {
    margin-top: 1.6rem;
    line-height: 1em;
    font-size: 1.8rem;
  }
}
#shop_btn .txt a {
  text-decoration: underline;
}

#movie_area {
  position: absolute;
  display: block;
  overflow: hidden;
  transition: 0.6s ease-in-out;
}
@media screen and (min-width: 769px) {
  #movie_area {
    top: 20.8rem;
    left: 58.6rem;
    width: 75rem;
    height: 42.2rem;
  }
}
@media screen and (max-width: 768px) {
  #movie_area {
    top: 24.9rem;
    left: 9rem;
    width: 57.6rem;
    height: 32.4rem;
  }
}

.movie_cont {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.movie_cont iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.movie_cont figure {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.movie_cont figure::after {
  position: absolute;
  background-image: url(../img/index/movie_play.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  inset: 0;
  margin: auto;
  transition: opacity 0.2s linear 0s;
  pointer-events: none;
}
@media screen and (min-width: 769px) {
  .movie_cont figure::after {
    width: 13rem;
    height: 10.5rem;
    filter: drop-shadow(1.04rem 0.96rem 0.16rem rgba(114, 114, 114, 0.5));
  }
}
@media screen and (max-width: 768px) {
  .movie_cont figure::after {
    width: 10.5rem;
    height: 8.4rem;
    filter: drop-shadow(0.83rem 0.76rem 0.12rem rgba(114, 114, 114, 0.5));
  }
}

@media screen and (min-width: 769px) {
  .sp_spacer {
    display: none;
    width: 1px;
    height: 1px;
  }
}
@media screen and (max-width: 768px) {
  .sp_spacer {
    display: block;
  }
}

/*modal*/
#modal {
  position: fixed;
  z-index: 99990;
  /*background:#fff;*/
  border: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  transition: 0.6s ease-out;
  pointer-events: none;
  opacity: 0;
}
@media screen and (min-width: 769px) {
  #modal {
    padding: 8rem 0;
    background: url("../img/index/bg.jpg") center bottom no-repeat;
    background-size: 100% auto;
  }
}
@media screen and (max-width: 768px) {
  #modal {
    padding: 8rem 0;
    background: url("../img/index/bg_sp.jpg") center bottom no-repeat;
    background-size: 100% auto;
  }
}

#modal_bg {
  position: fixed;
  z-index: 99990;
  border: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  opacity: 0;
  /*cursor: pointer;*/
}

.slider_set {
  z-index: 99995;
}

#modal.open {
  pointer-events: auto;
  opacity: 1;
}

#modal .slider_set {
  position: relative;
  margin: 0 auto;
  background: url("../img/modal/bg.jpg") 0 0 repeat-y;
  background-size: 100% auto;
}
@media screen and (min-width: 769px) {
  #modal .slider_set {
    width: 100rem;
  }
}
@media screen and (max-width: 768px) {
  #modal .slider_set {
    width: 66rem;
  }
}

#modal .modal_img_cap {
  position: relative;
  color: #644c42;
  font-weight: 400;
  text-align: right;
}
@media screen and (min-width: 769px) {
  #modal .modal_img_cap {
    line-height: 1em;
    font-size: 1.4rem;
    letter-spacing: 0em;
    padding: 1.5rem 5rem 0;
  }
}
@media screen and (max-width: 768px) {
  #modal .modal_img_cap {
    line-height: 1em;
    font-size: 2.2rem;
    letter-spacing: 0em;
    padding: 2rem 3rem 0;
  }
}

#modal .modal_btm_cap {
  position: relative;
}
@media screen and (min-width: 769px) {
  #modal .modal_btm_cap {
    padding: 0 6rem 0;
  }
}
@media screen and (max-width: 768px) {
  #modal .modal_btm_cap {
    padding: 0 3.5rem 0;
  }
}

#modal .modal_btm_cap p {
  position: relative;
  color: #644c42;
  font-weight: 400;
  text-align: justify;
}
@media screen and (min-width: 769px) {
  #modal .modal_btm_cap p {
    line-height: 1.429em;
    font-size: 1.4rem;
    letter-spacing: 0em;
    padding-left: 2.8rem;
    text-indent: -2.8rem;
  }
}
@media screen and (max-width: 768px) {
  #modal .modal_btm_cap p {
    line-height: 1.5em;
    font-size: 1.8rem;
    letter-spacing: 0em;
  }
}

#modal .modal_btm_cap p span {
  position: relative;
}
@media screen and (min-width: 769px) {
  #modal .modal_btm_cap p span {
    line-height: 1.819em;
    font-size: 1.1rem;
    transform: translateY(0.6rem);
  }
}
@media screen and (max-width: 768px) {
  #modal .modal_btm_cap p span {
    line-height: 1.929em;
    font-size: 1.4rem;
    transform: translateY(0.6rem);
  }
}

#modal .modal_btm_cap2 {
  position: relative;
}
@media screen and (min-width: 769px) {
  #modal .modal_btm_cap2 {
    padding: 2rem 6rem 0;
  }
}
@media screen and (max-width: 768px) {
  #modal .modal_btm_cap2 {
    padding: 3rem 3.5rem 0;
  }
}

#modal .modal_btm_cap2 p {
  position: relative;
  color: #644c42;
  font-weight: 400;
  text-align: justify;
}
@media screen and (min-width: 769px) {
  #modal .modal_btm_cap2 p {
    line-height: 1.429em;
    font-size: 1.4rem;
    letter-spacing: 0em;
  }
}
@media screen and (max-width: 768px) {
  #modal .modal_btm_cap2 p {
    line-height: 1.5em;
    font-size: 1.8rem;
    letter-spacing: 0em;
  }
}

.i {
  font-style: italic !important;
}

#modal .modal_btm_cap3 {
  position: relative;
  text-align: right;
}
@media screen and (min-width: 769px) {
  #modal .modal_btm_cap3 {
    padding: 3rem 4rem 0;
  }
}
@media screen and (max-width: 768px) {
  #modal .modal_btm_cap3 {
    padding: 4rem 3rem 0;
  }
}

#modal .modal_btm_cap3 p {
  position: relative;
  color: #ff467b;
  font-weight: 900;
}
@media screen and (min-width: 769px) {
  #modal .modal_btm_cap3 p {
    line-height: 1em;
    font-size: 2.6rem;
    letter-spacing: 0em;
  }
}
@media screen and (max-width: 768px) {
  #modal .modal_btm_cap3 p {
    line-height: 1em;
    font-size: 2.8rem;
    letter-spacing: 0em;
  }
}

.modal_main,
.modal_mark {
  position: relative;
  width: 100%;
  height: auto !important;
}

.modal_main a {
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .modal_main a {
    bottom: 0rem;
    right: 14rem;
    width: 32.4rem;
    height: 6.8rem;
    border-radius: 3.4rem;
    border: #43ae37 solid 0.2rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_main a {
    bottom: 0rem;
    left: 12rem;
    width: 42rem;
    height: 9rem;
    border-radius: 4.5rem;
    border: #43ae37 solid 0.2rem;
  }
}

.modal_main a p {
  position: relative;
  color: #644c42;
  transition: 0.6s ease-in-out;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .modal_main a p {
    line-height: 1em;
    font-size: 2.1rem;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 768px) {
  .modal_main a p {
    line-height: 1em;
    font-size: 2.8rem;
    letter-spacing: 0.05em;
  }
}

.modal_main a span {
  position: absolute;
  display: block;
  transition: 0.6s ease-in-out;
  transform: translateX(0rem);
}
@media screen and (min-width: 769px) {
  .modal_main a span {
    top: 2.1rem;
    right: 3rem;
    width: 1.3rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_main a span {
    top: 2.6rem;
    right: 4rem;
    width: 1.8rem;
  }
}

@media screen and (min-width: 769px) {
  .modal_main a:hover p {
    opacity: 0.6;
  }
}

@media screen and (min-width: 769px) {
  .modal_main a:hover span {
    transform: translateX(1rem);
  }
}

.modal_btn_more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 769px) {
  .modal_btn_more {
    padding-bottom: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_more {
    padding-bottom: 3rem;
  }
}

.modal_btn_more a {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebe3d3;
}
@media screen and (min-width: 769px) {
  .modal_btn_more a {
    width: 37rem;
    height: 6.8rem;
    border-radius: 3.4rem;
    border: #644c42 solid 0.2rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_more a {
    width: 48rem;
    height: 9rem;
    border-radius: 4.5rem;
    border: #644c42 solid 0.2rem;
  }
}

.modal_btn_more a p {
  position: relative;
  color: #644c42;
  transition: 0.6s ease-in-out;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .modal_btn_more a p {
    line-height: 1em;
    font-size: 2.1rem;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_more a p {
    line-height: 1em;
    font-size: 2.6rem;
    letter-spacing: 0.05em;
  }
}

.modal_btn_more a span {
  position: absolute;
  display: block;
  transition: 0.6s ease-in-out;
  transform: translateX(0rem);
}
@media screen and (min-width: 769px) {
  .modal_btn_more a span {
    top: 2.1rem;
    right: 2.3rem;
    width: 2.3rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_more a span {
    top: 2.8rem;
    right: 3rem;
    width: 3rem;
  }
}

@media screen and (min-width: 769px) {
  .modal_btn_more a:hover p {
    opacity: 0.6;
  }
}

.modal_btn_set {
  position: relative;
}
@media screen and (min-width: 769px) {
  .modal_btn_set {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    gap: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set {
    gap: 4rem;
  }
}

@media screen and (min-width: 769px) {
  .modal_btn_set + .modal_btn_set {
    margin-top: 3.6rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set + .modal_btn_set {
    margin-top: 4.4rem;
  }
}

.modal_btn_set a.btn1 {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../img/btn_bg.jpg") center center no-repeat;
  background-size: 120% auto;
}
@media screen and (min-width: 769px) {
  .modal_btn_set a.btn1 {
    width: 37rem;
    height: 6.8rem;
    border-radius: 3.4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set a.btn1 {
    width: 48rem;
    height: 9rem;
    border-radius: 4.5rem;
    margin: 0 auto 3rem;
  }
}

.modal_btn_set a.btn1 p {
  position: relative;
  color: #ffffff;
  transition: 0.6s ease-in-out;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .modal_btn_set a.btn1 p {
    line-height: 1.286em;
    font-size: 2.1rem;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set a.btn1 p {
    line-height: 1.231em;
    font-size: 2.6rem;
    letter-spacing: 0.05em;
  }
}

.modal_btn_set a.btn1.font_s p {
  text-align: center;
}

.modal_btn_set a.btn1 span {
  position: absolute;
  display: block;
  transition: 0.6s ease-in-out;
  transform: translateX(0rem);
}
@media screen and (min-width: 769px) {
  .modal_btn_set a.btn1 span {
    top: 2.3rem;
    right: 2.3rem;
    width: 2.3rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set a.btn1 span {
    top: 2.9rem;
    right: 3rem;
    width: 3rem;
  }
}

@media screen and (min-width: 769px) {
  .modal_btn_set a.btn1:hover p {
    opacity: 0.6;
  }
}

.modal_btn_set a.btn2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .modal_btn_set a.btn2 {
    width: 32.4rem;
    height: 6.8rem;
    border-radius: 3.4rem;
    border: #43ae37 solid 0.2rem;
    margin-right: 4.6rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set a.btn2 {
    width: 42rem;
    height: 9rem;
    border-radius: 4.5rem;
    border: #43ae37 solid 0.2rem;
    margin: 0 auto 0;
  }
}

@media screen and (min-width: 769px) {
  .modal_btn_set a.btn2.long1 {
    width: 35.8rem;
    margin-right: 0;
    padding-left: 4.4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set a.btn2.long1 {
    width: 48.3rem;
    padding-left: 2rem;
  }
}

@media screen and (min-width: 769px) {
  .modal_btn_set a.btn2.long2 {
    width: 40.8rem;
    margin-right: 0;
    padding-left: 4.4rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set a.btn2.long2 {
    width: 53.4rem;
    margin-top: 3.6rem;
    padding-left: 3.8rem;
  }
}

.modal_btn_set a.btn2 figure {
  position: absolute;
}
@media screen and (min-width: 769px) {
  .modal_btn_set a.btn2 figure {
    width: 5.6rem;
    height: 8.9rem;
    left: 2.6rem;
    bottom: 0.6rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set a.btn2 figure {
    width: 8.8rem;
    height: 10.6rem;
    left: 1.4rem;
    bottom: 0.8rem;
  }
}

.modal_btn_set a.btn2 p {
  position: relative;
  color: #644c42;
  transition: 0.6s ease-in-out;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .modal_btn_set a.btn2 p {
    line-height: 1em;
    font-size: 2.1rem;
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set a.btn2 p {
    line-height: 1em;
    font-size: 3rem;
    letter-spacing: 0.05em;
  }
}

.modal_btn_set a.btn2 span {
  position: absolute;
  display: block;
  transition: 0.6s ease-in-out;
  transform: translateX(0rem);
}
@media screen and (min-width: 769px) {
  .modal_btn_set a.btn2 span {
    top: 2.1rem;
    right: 3rem;
    width: 1.3rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_btn_set a.btn2 span {
    top: 2.6rem;
    right: 4rem;
    width: 1.8rem;
  }
}

@media screen and (min-width: 769px) {
  .modal_btn_set a.btn2:hover p {
    opacity: 0.6;
  }
}

@media screen and (min-width: 769px) {
  .modal_btn_set a.btn2:hover span {
    transform: translateX(1rem);
  }
}

.modal_mark a {
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .modal_mark a {
    top: 35rem;
    left: 36.8rem;
    width: 26.5rem;
    height: 4.8rem;
    border-radius: 2.4rem;
    border: #43ae37 solid 0.2rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_mark a {
    top: 64.6rem;
    left: 11.5rem;
    width: 43rem;
    height: 7rem;
    border-radius: 3.5rem;
    border: #43ae37 solid 0.2rem;
  }
}

.modal_mark a p {
  position: relative;
  color: #644c42;
  transition: 0.6s ease-in-out;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .modal_mark a p {
    line-height: 1em;
    font-size: 1.4rem;
    letter-spacing: 0em;
  }
}
@media screen and (max-width: 768px) {
  .modal_mark a p {
    line-height: 1em;
    font-size: 2.3rem;
    letter-spacing: 0em;
  }
}

.modal_mark a span {
  position: absolute;
  display: block;
  transition: 0.6s ease-in-out;
  transform: translateX(0rem);
}
@media screen and (min-width: 769px) {
  .modal_mark a span {
    top: 1.4rem;
    right: 1rem;
    width: 1.6rem;
  }
}
@media screen and (max-width: 768px) {
  .modal_mark a span {
    top: 2.1rem;
    right: 2rem;
    width: 2.4rem;
  }
}

@media screen and (min-width: 769px) {
  .modal_mark a:hover p {
    opacity: 0.6;
  }
}

.slide_inner {
  position: relative;
}
@media screen and (min-width: 769px) {
  .slide_inner {
    width: 100rem;
    padding-bottom: 8rem;
  }
}
@media screen and (max-width: 768px) {
  .slide_inner {
    width: 66rem;
    padding-bottom: 8rem;
  }
}

#slide4 .slide_inner::after {
  pointer-events: none;
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}
@media screen and (min-width: 769px) {
  #slide4 .slide_inner::after {
    border: #00773b solid 0.2rem;
  }
}
@media screen and (max-width: 768px) {
  #slide4 .slide_inner::after {
    border: #00773b solid 0.4rem;
  }
}

#modal .close {
  display: block;
  position: absolute;
  background: url("../img/modal/close.png") center center no-repeat;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.6s ease-out;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  #modal .close {
    top: -2rem;
    right: -4rem;
    width: 11rem;
    height: 8.8rem;
    z-index: 99999;
  }
}
@media screen and (max-width: 768px) {
  #modal .close {
    top: -7rem;
    right: -2rem;
    width: 14.4rem;
    height: 14.4rem;
    z-index: 99999;
  }
}

#modal .close span {
  position: absolute;
  display: block;
}
@media screen and (min-width: 769px) {
  #modal .close span {
    width: 4.5rem;
  }
}
@media screen and (max-width: 768px) {
  #modal .close span {
    width: 4.5rem;
  }
}

@media screen and (min-width: 769px) {
  #modal .close:hover {
    opacity: 0.6;
  }
}

#modal .slick-prev,
#modal .slick-next {
  font-size: 0;
  line-height: 0;
  display: block;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  z-index: 99999;
  transition: 0.6s ease-out;
}
@media screen and (min-width: 769px) {
  #modal .slick-prev,
  #modal .slick-next {
    position: absolute;
    top: 38rem;
    width: 8rem;
    height: 6.4rem;
  }
}
@media screen and (max-width: 768px) {
  #modal .slick-prev,
  #modal .slick-next {
    position: fixed;
    top: 50vh;
    width: 10rem;
    height: 8rem;
  }
}

@media screen and (min-width: 769px) {
  #modal .slick-prev:hover,
  #modal .slick-next:hover {
    opacity: 0.6;
  }
}

#modal .slick-prev {
  background: url("../img/modal/close.png") center center no-repeat;
  background-size: contain;
  transform: translateY(-50%) scale(-1, 1);
}
@media screen and (min-width: 769px) {
  #modal .slick-prev {
    left: -4rem;
  }
}
@media screen and (max-width: 768px) {
  #modal .slick-prev {
    left: 0.5rem;
  }
}

#modal .slick-next {
  background: url("../img/modal/close.png") center center no-repeat;
  background-size: contain;
  transform: translateY(-50%);
}
@media screen and (min-width: 769px) {
  #modal .slick-next {
    right: -4rem;
  }
}
@media screen and (max-width: 768px) {
  #modal .slick-next {
    right: 0.5rem;
  }
}

#modal .slick-prev::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 99999;
  background: url("../img/arrow_w_back.svg") center center no-repeat;
  transform: scale(-1, 1);
}
@media screen and (min-width: 769px) {
  #modal .slick-prev::after {
    top: 0;
    left: 10%;
    width: 90%;
    height: 100%;
    background-size: 1.4rem auto;
  }
}
@media screen and (max-width: 768px) {
  #modal .slick-prev::after {
    top: 0;
    left: 10%;
    width: 90%;
    height: 100%;
    background-size: 2rem auto;
  }
}

#modal .slick-next::after {
  display: block;
  content: "";
  position: absolute;
  z-index: 99999;
  background: url("../img/arrow_w_back.svg") center center no-repeat;
  transform: scale(-1, 1);
}
@media screen and (min-width: 769px) {
  #modal .slick-next::after {
    top: 0;
    left: 10%;
    width: 90%;
    height: 100%;
    background-size: 1.4rem auto;
  }
}
@media screen and (max-width: 768px) {
  #modal .slick-next::after {
    top: 0;
    left: 10%;
    width: 90%;
    height: 100%;
    background-size: 2rem auto;
  }
}

.slide_in .set {
  transition: ease-out 0.9s all;
  opacity: 0;
  transform: translateY(30px);
  transition-delay: 0.3s;
}

.slide_in.active .set {
  opacity: 1;
  transform: translateY(0);
}

#float_cap {
  position: fixed;
  z-index: 8000;
  left: 0;
  width: 100%;
  pointer-events: none;
  transition: ease-out 0.4s all;
  opacity: 0;
}
@media screen and (min-width: 769px) {
  #float_cap {
    bottom: 3rem;
    padding: 1rem;
  }
}
@media screen and (max-width: 768px) {
  #float_cap {
    bottom: 3rem;
    /*padding:divceil(10, 10, rem) divceil(80, 10, rem);*/
    padding: 0 3.5rem;
  }
}

#float_cap.active {
  opacity: 1;
}

#float_cap p {
  color: #727272;
  text-align: right;
  font-weight: 400;
  text-shadow: 0px 0px 10px rgb(255, 255, 255);
}
@media screen and (min-width: 769px) {
  #float_cap p {
    max-width: 120rem;
    margin: 0 auto;
    line-height: 1em;
    font-size: 1.4rem;
    letter-spacing: 0em;
  }
}
@media screen and (max-width: 768px) {
  #float_cap p {
    line-height: 1em;
    font-size: 2.2rem;
    letter-spacing: 0em;
  }
}

@media screen and (min-width: 769px) {
  #float_cap p img {
    width: 14.4rem;
  }
}
@media screen and (max-width: 768px) {
  #float_cap p img {
    width: 22rem;
  }
}

@media screen and (max-width: 768px) {
  #totop {
    padding-bottom: 7rem;
  }
}   width: 14.4rem;
  }
}

@media screen and (max-width: 768px) {
  #float_cap p img {
    width: 22rem;
  }
}

@media screen and (max-width: 768px) {
  #totop {
    padding-bottom: 7rem;
  }
}