@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700&display=swap");
@use './base/base' as *;
/**/
html, body, main div, main span, main applet, main object, main iframe, main h1, main h2, main h3, main h4, main h5, main h6, main p, main blockquote, main pre, main a, main abbr, main acronym, main address, main big, main cite, main code, main del, main dfn, main em, main img, main ins, main kbd, main q, main s, main samp, main small, main strike, main strong, main sub, main sup, main tt, main var, main b, main u, main i, main center, main dl, main dt, main dd, main ol, main ul, main li, main fieldset, main form, main label, main legend, main table, main caption, main tbody, main tfoot, main thead, main tr, main th, main td, main article, main aside, main canvas, main details, main embed, main figure, main figcaption, main footer, main header, main hgroup, main menu, main nav, main output, main ruby, main section, main summary, main time, main mark, main audio, main video {
  margin: 0;
  padding: 0;
  border: none;
  font-style: normal; }

main article, main aside, main details, main figcaption, main figure, main footer, main header, main hgroup, main menu, main nav, main section {
  display: block; }

main table {
  border-collapse: collapse;
  font-family: inherit; }

main h1, main h2, main h3, main h4, main h5 {
  font-size: 100%;
  font-weight: normal;
  line-height: 1; }

main input, main textarea, main select {
  font-family: inherit;
  font-size: 16px; }

main ul, main ol {
  list-style-type: none; }

* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

body {
  -webkit-print-color-adjust: exact;
  width: 100%;
  height: auto;
  position: relative;
  background-color: #ffffff;
  overflow-x: hidden; }

img {
  display: block;
  width: 100%;
  vertical-align: bottom; }

a {
  text-decoration: none; }

@media screen and (min-width: 769px) {
  a.hover:hover {
    opacity: 0.8;
    -webkit-transition: all ease-in 0.4s;
    -o-transition: all ease-in 0.4s;
    transition: all ease-in 0.4s; }

  a [href^='tel:'] {
    cursor: default; } }
main img {
  height: auto; }

/**/
@media screen and (min-width: 769px) {
  main .pcv {
    display: block; } }
@media screen and (max-width: 768px) {
  main .pcv {
    display: none; } }

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

main {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif; }
  @media screen and (max-width: 768px) {
    main {
      overflow: hidden; } }

main section {
  position: relative;
  width: 100%; }

main #kv {
  position: relative;
  width: 100%;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    main #kv {
      height: min(69vw, 1035px);
      background: url("../images/pc/kv_img.jpg") center center no-repeat;
      background-size: cover; } }
  @media screen and (max-width: 768px) {
    main #kv {
      height: 177.3vw;
      background: url("../images/sp/kv_img.jpg") center center no-repeat;
      background-size: cover; } }

main #kv::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none; }
  @media screen and (min-width: 769px) {
    main #kv::after {
      background: url("../images/pc/kv_btm.png") center bottom no-repeat;
      background-size: 100% min(8vw, 120px); } }
  @media screen and (max-width: 768px) {
    main #kv::after {
      background: url("../images/sp/kv_btm.png") center bottom no-repeat;
      background-size: 100% auto; } }

main #kv .kv_inner {
  position: relative;
  height: 100%;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    main #kv .kv_inner {
      width: min(100vw, 1500px); } }
  @media screen and (max-width: 768px) {
    main #kv .kv_inner {
      /*width: 92vw;*/
      width: 100%; } }

main #kv .kv_inner h1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  opacity: 0; }
  @media screen and (min-width: 769px) {
    main #kv .kv_inner h1 {
      transform: translate(-80px, 30px); } }
  @media screen and (max-width: 768px) {
    main #kv .kv_inner h1 {
      transform: translate(-8%, 2%); } }

main #kv.active .kv_inner h1 {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 900ms cubic-bezier(0.555, 0.81, 0, 0.97);
  transition-timing-function: cubic-bezier(0.555, 0.81, 0, 0.97); }

main #kv.active .kv_inner h1:nth-of-type(2) {
  transition-delay: .25s; }

main #kv.active .kv_inner h1:nth-of-type(3) {
  transition-delay: .5s; }

main #kv .kv_inner a {
  position: absolute;
  z-index: 20; }
  @media screen and (min-width: 769px) {
    main #kv .kv_inner a {
      bottom: min(5.3vw, 80px);
      right: min(4vw, 60px);
      width: min(15.3vw, 230px); } }
  @media screen and (max-width: 768px) {
    main #kv .kv_inner a {
      bottom: 2vw;
      right: 4vw;
      width: 34.6vw; } }

main #kv .kv_inner a {
  transform: scale(1.2);
  opacity: 0; }

main #kv.active .kv_inner a {
  transform: scale(1);
  opacity: 1;
  transition: all 1200ms cubic-bezier(0.555, 0.81, 0, 0.97);
  transition-timing-function: cubic-bezier(0.555, 0.81, 0, 0.97);
  transition-delay: .6s;
  cursor: pointer; }

main #kv .kv_inner a .arrow {
  position: absolute;
  display: block;
  left: 50%;
  transform: translate(-50%, 0);
  background: url("../images/arrow.png") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 769px) {
    main #kv .kv_inner a .arrow {
      bottom: min(2vw, 30px);
      width: min(1.6vw, 25px);
      height: min(1vw, 15px); } }
  @media screen and (max-width: 768px) {
    main #kv .kv_inner a .arrow {
      bottom: 5.3vw;
      width: 4vw;
      height: 2vw; } }

main #kv.active .kv_inner a .arrow {
  animation: arrow_animation 6s infinite; }

@keyframes arrow_animation {
  0% {
    transform: translate(-50%, 0); }
  25% {
    transform: translate(-50%, -60%); }
  50% {
    transform: translate(-50%, 0); }
  75% {
    transform: translate(-50%, -60%); }
  100% {
    transform: translate(-50%, 0); } }
@media screen and (min-width: 769px) {
  main section a img {
    transition: ease-out .9s all; } }

@media screen and (min-width: 769px) {
  main section a:hover img {
    opacity: .6; } }

main .bg_area_1 {
  position: relative;
  background: #d8ecad;
  z-index: 3; }

main .bg_area_1::before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }
  @media screen and (min-width: 769px) {
    main .bg_area_1::before {
      background: url("../images/pc/movie_bg.png") center bottom no-repeat;
      background-size: min(260vw, 2600px) auto;
      bottom: -80px; } }
  @media screen and (max-width: 768px) {
    main .bg_area_1::before {
      background: url("../images/sp/movie_bg.png") center bottom no-repeat;
      background-size: 100% auto;
      bottom: 0; } }

main .slide_in {
  opacity: 0;
  transform: translateY(50px); }

main .slide_in.active {
  transform: translateY(0);
  opacity: 1;
  transition: all 1200ms cubic-bezier(0.555, 0.81, 0, 0.97);
  transition-timing-function: cubic-bezier(0.555, 0.81, 0, 0.97);
  transition-delay: .2s; }

main section .inner {
  position: relative;
  height: 100%;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    main section .inner {
      width: min(100vw, 1000px); } }
  @media screen and (max-width: 768px) {
    main section .inner {
      width: 92vw; } }

@media screen and (min-width: 769px) {
  #movie {
    padding-bottom: min(12vw, 120px); } }
@media screen and (max-width: 768px) {
  #movie {
    padding-bottom: 18vw; } }

#movie .movie_btn {
  position: relative;
  display: block;
  margin: 0 auto;
  cursor: pointer;
  background: #000; }
  @media screen and (min-width: 769px) {
    #movie .movie_btn {
      width: min(64vw, 640px); } }
  @media screen and (max-width: 768px) {
    #movie .movie_btn {
      width: 85.3vw; } }

#movie h2 {
  position: relative; }
  @media screen and (max-width: 768px) {
    #movie h2 {
      padding-bottom: 2vw; } }

#movie .movie_btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url("../images/movie_arrow.png") center center no-repeat; }
  @media screen and (min-width: 769px) {
    #movie .movie_btn::after {
      background-size: min(9vw, 90px); } }
  @media screen and (max-width: 768px) {
    #movie .movie_btn::after {
      background-size: min(9vw, 90px); } }

.movie-dialog {
  display: none;
  height: 100vh;
  width: 100%;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 99999;
  pointer-events: none; }

.movie-dialog.is-show {
  align-items: center;
  display: flex;
  justify-content: center; }

.movie-dialog-close {
  cursor: pointer;
  position: absolute;
  right: 4rem;
  top: 4rem;
  background: url("../images/modal_close.png") center center no-repeat;
  background-size: contain;
  pointer-events: auto; }
  @media screen and (min-width: 769px) {
    .movie-dialog-close {
      width: min(5vw, 50px);
      height: min(5vw, 50px); } }
  @media screen and (max-width: 768px) {
    .movie-dialog-close {
      width: 6.6vw;
      height: 6.6vw; } }

.movie-dialog-background {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
  pointer-events: auto; }

.movie-dialog-background.is-show {
  display: block; }

.movie-dialog iframe {
  height: 100%;
  width: 100%;
  pointer-events: auto; }

.movie-trigger {
  color: #585858;
  pointer-events: none; }

.movie-trigger.is-ready {
  cursor: pointer;
  pointer-events: initial; }

.movie-container {
  width: 96%;
  max-width: 1000px;
  aspect-ratio: 16/9;
  position: relative; }

.movie-iframe-container {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16/9;
  position: relative; }

.movie-iframe-container iframe {
  height: 100%;
  position: absolute;
  width: 100%;
  pointer-events: auto; }

.movie-trigger {
  text-decoration: none; }

main .bg_area_2 {
  position: relative;
  z-index: 2; }
  @media screen and (min-width: 769px) {
    main .bg_area_2 {
      padding-bottom: min(30vw, 300px);
      background: #d8ecad url("../images/pc/table.png") center bottom no-repeat;
      background-size: 100% min(19vw, 190px); } }
  @media screen and (max-width: 768px) {
    main .bg_area_2 {
      padding-bottom: 40vw;
      background: #d8ecad; } }

main .bg_area_2::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }
  @media screen and (min-width: 769px) {
    main .bg_area_2::after {
      background: url("../images/pc/table_1_cover.png") center bottom no-repeat;
      background-size: min(300vw, 3000px) min(40vw, 400px); } }
  @media screen and (max-width: 768px) {
    main .bg_area_2::after {
      background: url("../images/sp/table_1_cover.png") center bottom no-repeat;
      background-size: 100% auto; } }

#introduction .inner {
  background: #fffeed; }
  @media screen and (min-width: 769px) {
    #introduction .inner {
      border-radius: 35px; } }
  @media screen and (max-width: 768px) {
    #introduction .inner {
      border-radius: 4vw; } }

.txt_caption p {
  position: relative;
  line-height: 1.7;
  font-weight: 400; }
  @media screen and (min-width: 769px) {
    .txt_caption p {
      font-size: min(1.4vw, 14px); } }
  @media screen and (max-width: 768px) {
    .txt_caption p {
      font-size: 2.5vw; } }

.txt_caption.type1 {
  position: relative; }
  @media screen and (min-width: 769px) {
    .txt_caption.type1 {
      padding-bottom: min(4vw, 40px);
      text-align: center; } }
  @media screen and (max-width: 768px) {
    .txt_caption.type1 {
      padding: 0 6vw 4vw; } }

@media screen and (max-width: 768px) {
  .txt_caption.type1 p,
  .txt_caption.type3 p {
    padding-left: 2.66vw;
    text-indent: -2.66vw; } }

.txt_caption.type2 {
  position: relative; }
  @media screen and (min-width: 769px) {
    .txt_caption.type2 {
      padding-top: min(2vw, 20px);
      padding-bottom: min(4vw, 40px);
      width: min(88vw, 880px);
      margin: 0 auto; } }
  @media screen and (max-width: 768px) {
    .txt_caption.type2 {
      padding: 3vw 6vw 8vw; } }

.txt_caption.type3 {
  position: relative; }
  @media screen and (min-width: 769px) {
    .txt_caption.type3 {
      padding-top: min(2vw, 20px);
      padding-bottom: min(8vw, 80px);
      width: min(88vw, 880px);
      margin: 0 auto; } }
  @media screen and (max-width: 768px) {
    .txt_caption.type3 {
      padding: 3vw 6vw 12vw; } }

@media screen and (min-width: 769px) {
  #pc_slide {
    display: block; } }
@media screen and (max-width: 768px) {
  #pc_slide {
    display: none; } }

@media screen and (min-width: 769px) {
  #sp_slide {
    display: none; } }
@media screen and (max-width: 768px) {
  #sp_slide {
    display: block; } }

#introduction .slide_set {
  position: relative;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    #introduction .slide_set {
      width: min(88vw, 880px); } }
  @media screen and (max-width: 768px) {
    #introduction .slide_set {
      width: 77.3vw;
      border-radius: 4vw;
      background: #fef9ab; } }

@media screen and (min-width: 769px) {
  #introduction .slider {
    width: 100%;
    display: flex;
    justify-content: space-between;
    opacity: 1 !important; } }

@media screen and (max-width: 768px) {
  #introduction .slider_set div {
    width: 100%;
    height: 100%; } }

@media screen and (min-width: 769px) {
  #introduction .slider_set .slide_item {
    width: min(28.3vw, 283px); } }
@media screen and (max-width: 768px) {
  #introduction .slider_set .slide_item {
    width: 100%; } }

#introduction .slick-prev,
#introduction .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute !important;
  top: 18vw;
  display: block !important;
  width: 7.6vw;
  height: 7.6vw;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 20 !important;
  transition: .8s; }

#introduction .slick-next {
  right: -3.8vw;
  background: url("../images/slide_arrow.png") center center no-repeat;
  background-size: 100%; }

#introduction .slick-prev {
  left: -3.8vw;
  background: url("../images/slide_arrow.png") center center no-repeat;
  background-size: 100%;
  transform: scale(-1, 1); }

#introduction .slick-dots {
  position: absolute;
  bottom: 3vw;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center; }

#introduction .slick-dots li {
  position: relative;
  display: inline-block;
  width: 2vw;
  height: 2vw;
  margin: 0 2vw;
  padding: 0;
  cursor: pointer; }

#introduction .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 2vw;
  height: 2vw;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: #d0d0d0;
  border-radius: 50%; }

#introduction .slick-dots li.slick-active button {
  color: black;
  background: #80b72c; }

main .bg_area_3 {
  position: relative;
  z-index: 3; }
  @media screen and (min-width: 769px) {
    main .bg_area_3 {
      background: #fffeed;
      padding-bottom: min(9.6vw, 96px); } }
  @media screen and (max-width: 768px) {
    main .bg_area_3 {
      padding-bottom: 26.6vw;
      background: #fffeed url("../images/sp/product_bg.png") center top no-repeat;
      background-size: 100% auto; } }

main .bg_area_3::after,
main .bg_area_3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 1500px;
  height: 100%;
  min-height: min(134.8vw, 1348px);
  pointer-events: none; }

@media screen and (min-width: 769px) {
  main .bg_area_3::before {
    background: url("../images/pc/product_bg_left.png") left top no-repeat;
    background-size: min(25.4vw, 254px) auto; } }

@media screen and (min-width: 769px) {
  main .bg_area_3::after {
    background: url("../images/pc/product_bg_right.png") right top no-repeat;
    background-size: min(25.4vw, 254px) auto; } }

main .bg_area_3 .btm_table {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; }
  @media screen and (min-width: 769px) {
    main .bg_area_3 .btm_table {
      bottom: -350px;
      background: url("../images/pc/product_bg_btm.png") center bottom no-repeat;
      background-size: min(220vw, 2200px) auto; } }
  @media screen and (max-width: 768px) {
    main .bg_area_3 .btm_table {
      bottom: -42.4vw;
      background: url("../images/sp/product_bg_btm.png") center bottom no-repeat;
      background-size: 100% auto; } }

main #product {
  z-index: 3; }

@media screen and (max-width: 768px) {
  main #product .inner {
    width: 100% !important; } }

main #product .item_set {
  position: relative;
  width: 100%;
  display: flex; }
  @media screen and (min-width: 769px) {
    main #product .item_set {
      justify-content: space-between; } }
  @media screen and (max-width: 768px) {
    main #product .item_set {
      flex-direction: column; } }

main #product .item_set > div {
  position: relative;
  text-align: center;
  color: #505050; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div {
      width: 50%; } }
  @media screen and (max-width: 768px) {
    main #product .item_set > div {
      width: 100%;
      padding-bottom: 13vw; } }

@media screen and (min-width: 769px) {
  main #product .item_set > div.item_1.active {
    transition-delay: .3s; } }

@media screen and (min-width: 769px) {
  main #product .item_set > div.item_2.active {
    transition-delay: .6s; } }

main #product .item_set > div figure {
  position: relative; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div figure {
      width: min(55vw, 550px); } }
  @media screen and (max-width: 768px) {
    main #product .item_set > div figure {
      width: 100%; } }

main #product .item_set > div.item_1 figure {
  position: relative; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div.item_1 figure {
      transform: translateX(-11%); } }

main #product .item_set > div.item_2 figure {
  position: relative; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div.item_2 figure {
      transform: translateX(11%); } }

main #product .item_set > div h3 {
  position: relative;
  line-height: 1.7;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div h3 {
      padding-top: min(3vw, 30px);
      font-size: min(3vw, 30px); } }
  @media screen and (max-width: 768px) {
    main #product .item_set > div h3 {
      font-size: 4.8vw;
      margin-top: -10vw; } }

main #product .item_set > div .ml {
  position: relative;
  line-height: 1.4;
  font-weight: 600; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div .ml {
      font-size: min(1.2vw, 12px); } }
  @media screen and (max-width: 768px) {
    main #product .item_set > div .ml {
      font-size: 3.2vw; } }

main #product .item_set > div .item_txt {
  position: relative;
  line-height: 1.75;
  font-weight: 700;
  letter-spacing: 0.07em; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div .item_txt {
      padding-top: min(1.5vw, 15px);
      font-size: min(2vw, 20px); } }
  @media screen and (max-width: 768px) {
    main #product .item_set > div .item_txt {
      padding-top: 2vw;
      font-size: 3.73vw; } }

main #product .item_set > div .item_txt span {
  color: #df7e41; }

main #product .item_set > div a {
  position: relative;
  display: inline-block;
  text-align: center;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: #505050; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div a {
      margin-top: min(4vw, 40px);
      padding-top: min(2.2vw, 22px);
      padding-bottom: min(2.2vw, 22px);
      padding-right: min(4vw, 40px);
      padding-left: min(1vw, 10px);
      font-size: min(2vw, 20px); } }
  @media screen and (max-width: 768px) {
    main #product .item_set > div a {
      margin-top: 6vw;
      padding-top: 4vw;
      padding-bottom: 5vw;
      padding-right: 9vw;
      padding-left: 1vw;
      font-size: 3.73vw; } }

main #product .item_set > div a::after,
main #product .item_set > div a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }

main #product .item_set > div a::before {
  background: url("../images/dot_line.png") left top repeat-x; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div a::before {
      background-size: auto min(0.4vw, 4px); } }
  @media screen and (max-width: 768px) {
    main #product .item_set > div a::before {
      background-size: auto 0.7vw; } }

main #product .item_set > div a::after {
  background: url("../images/dot_line.png") left bottom repeat-x; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div a::after {
      background-size: auto min(0.4vw, 4px); } }
  @media screen and (max-width: 768px) {
    main #product .item_set > div a::after {
      background-size: auto 0.7vw; } }

main #product .item_set > div a .arrow {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 50%;
  background: #80b72c url("../images/btn_arrow.svg") center center no-repeat; }
  @media screen and (min-width: 769px) {
    main #product .item_set > div a .arrow {
      right: min(0.5vw, 5px);
      width: min(2.3vw, 23px);
      height: min(2.3vw, 23px);
      background-size: min(0.5vw, 5px) auto; } }
  @media screen and (max-width: 768px) {
    main #product .item_set > div a .arrow {
      right: 2vw;
      width: 5.3vw;
      height: 5.3vw;
      background-size: 1.2vw auto; } }

@media screen and (min-width: 769px) {
  main #product .item_set > div a p {
    transition: ease-out .9s all; } }

@media screen and (min-width: 769px) {
  main #product .item_set > div a:hover p {
    color: #80b72c; } }

main #product .line_up_btn a {
  position: relative;
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background: #fffeed; }
  @media screen and (min-width: 769px) {
    main #product .line_up_btn a {
      margin-top: min(7.5vw, 75px);
      width: min(35.2vw, 352px);
      height: min(10vw, 100px);
      border-radius: min(5vw, 50px); } }
  @media screen and (max-width: 768px) {
    main #product .line_up_btn a {
      width: 55.7vw;
      height: 15.8vw;
      border-radius: 7.9vw; } }

main #product .line_up_btn a p {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url("../images/btn_1.png") center center repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.07em; }
  @media screen and (min-width: 769px) {
    main #product .line_up_btn a p {
      font-size: min(2.4vw, 24px); } }
  @media screen and (max-width: 768px) {
    main #product .line_up_btn a p {
      font-size: 4vw; } }

main #product .line_up_btn a .arrow {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 50%;
  background: url("../images/btn_arrow.svg") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 769px) {
    main #product .line_up_btn a .arrow {
      right: min(3vw, 30px);
      width: min(1.2vw, 12px);
      height: min(1.2vw, 12px); } }
  @media screen and (max-width: 768px) {
    main #product .line_up_btn a .arrow {
      right: 5.3vw;
      width: 2.5vw;
      height: 2.5vw; } }

@media screen and (min-width: 769px) {
  main #product .line_up_btn a p {
    transition: ease-out .9s all; } }

@media screen and (min-width: 769px) {
  main #product .line_up_btn a:hover p {
    opacity: .6; } }

main .bg_area_4 {
  position: relative;
  z-index: 2; }
  @media screen and (min-width: 769px) {
    main .bg_area_4 {
      padding-bottom: min(33vw, 330px);
      background: #f6f6c3 url("../images/pc/table.png") center bottom repeat-x;
      background-size: min(150vw, 1500px) auto; } }
  @media screen and (max-width: 768px) {
    main .bg_area_4 {
      padding-bottom: 70vw;
      background: #f6f6c3; } }

main .bg_area_4::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }
  @media screen and (min-width: 769px) {
    main .bg_area_4::after {
      background: url("../images/pc/table_2_cover.png") center bottom no-repeat;
      background-size: min(150vw, 1500px) auto; } }
  @media screen and (max-width: 768px) {
    main .bg_area_4::after {
      background: url("../images/sp/table_2_cover.png") center bottom no-repeat;
      background-size: 100% auto; } }

main #recipe .banner_set {
  position: relative;
  width: 100%;
  display: flex; }
  @media screen and (min-width: 769px) {
    main #recipe .banner_set {
      justify-content: space-between; } }
  @media screen and (max-width: 768px) {
    main #recipe .banner_set {
      flex-direction: column;
      gap: 5.3vw; } }

main #recipe .banner_set a {
  position: relative;
  display: block; }
  @media screen and (min-width: 769px) {
    main #recipe .banner_set a {
      background: #fff;
      width: min(32.4vw, 324px); } }
  @media screen and (max-width: 768px) {
    main #recipe .banner_set a {
      width: 100%; } }

main .bg_area_5 {
  position: relative;
  background: #fffeed;
  z-index: 3; }

main .bg_area_5 .btm_table {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2; }
  @media screen and (min-width: 769px) {
    main .bg_area_5 .btm_table {
      bottom: -300px;
      background: url("../images/pc/cmpaign_bg_btm.png") center bottom no-repeat;
      background-size: min(200vw, 2000px) auto; } }
  @media screen and (max-width: 768px) {
    main .bg_area_5 .btm_table {
      bottom: -42.4vw;
      background: url("../images/sp/cmpaign_bg_btm.png") center bottom no-repeat;
      background-size: 100% auto; } }

main #campaign .inner {
  z-index: 3; }

main #campaign .img_set {
  position: relative;
  width: 100%;
  display: flex; }
  @media screen and (min-width: 769px) {
    main #campaign .img_set {
      justify-content: space-between;
      margin-top: min(8vw, 80px); } }
  @media screen and (max-width: 768px) {
    main #campaign .img_set {
      flex-direction: column;
      gap: 5.3vw;
      margin-top: 12vw; } }

main #campaign .img_set a {
  position: relative;
  display: block; }
  @media screen and (min-width: 769px) {
    main #campaign .img_set a {
      background: #fff;
      width: min(31.6vw, 316px); } }
  @media screen and (max-width: 768px) {
    main #campaign .img_set a {
      width: 100%; } }

main .campaign_btn a {
  position: relative;
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background: #fffeed; }
  @media screen and (min-width: 769px) {
    main .campaign_btn a {
      width: min(66vw, 660px);
      height: min(11vw, 110px);
      border-radius: min(5.5vw, 55px); } }
  @media screen and (max-width: 768px) {
    main .campaign_btn a {
      width: 77.3vw;
      height: 23.2vw;
      border-radius: 11.6vw; } }

main .campaign_btn a p {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url("../images/btn_2.png") center center repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  line-height: 1.53;
  font-weight: 700;
  letter-spacing: 0.07em; }
  @media screen and (min-width: 769px) {
    main .campaign_btn a p {
      font-size: min(2.4vw, 24px); } }
  @media screen and (max-width: 768px) {
    main .campaign_btn a p {
      font-size: 4vw; } }

main .campaign_btn a .arrow {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  border-radius: 50%;
  background: url("../images/btn_arrow.svg") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 769px) {
    main .campaign_btn a .arrow {
      right: min(6vw, 60px);
      width: min(1.2vw, 12px);
      height: min(1.2vw, 12px); } }
  @media screen and (max-width: 768px) {
    main .campaign_btn a .arrow {
      right: 5.3vw;
      width: 2.5vw;
      height: 2.5vw; } }

@media screen and (min-width: 769px) {
  main .campaign_btn a p {
    transition: ease-out .9s all; } }

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

@media screen and (min-width: 769px) {
  .txt_caption.type4 p {
    padding-left: 14px;
    text-indent: -14px; } }
@media screen and (max-width: 768px) {
  .txt_caption.type4 p {
    padding-left: 2.66vw;
    text-indent: -2.66vw; } }

.txt_caption.type4 {
  position: relative;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    .txt_caption.type4 {
      width: min(54vw, 540px); } }
  @media screen and (max-width: 768px) {
    .txt_caption.type4 {
      width: 69.3vw; } }

main .bg_area_6 {
  position: relative;
  z-index: 2; }
  @media screen and (min-width: 769px) {
    main .bg_area_6 {
      padding-bottom: min(30vw, 300px);
      background: #e2ebe1 url("../images/pc/table.png") center bottom repeat-x;
      background-size: min(150vw, 1500px) auto; } }
  @media screen and (max-width: 768px) {
    main .bg_area_6 {
      padding-bottom: 46.6vw;
      background: #e2ebe1; } }

main .bg_area_6::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; }
  @media screen and (min-width: 769px) {
    main .bg_area_6::after {
      background: url("../images/pc/table_3_cover.png") center bottom no-repeat;
      background-size: min(300vw, 3000px) auto; } }
  @media screen and (max-width: 768px) {
    main .bg_area_6::after {
      background: url("../images/sp/table_3_cover.png") center bottom no-repeat;
      background-size: 100% auto; } }

main #apply {
  position: relative; }
  @media screen and (min-width: 769px) {
    main #apply {
      padding-top: min(30vw, 300px); } }
  @media screen and (max-width: 768px) {
    main #apply {
      padding-top: 40vw; } }

main #apply .block_set {
  position: relative;
  width: 100%;
  display: flex; }
  @media screen and (min-width: 769px) {
    main #apply .block_set {
      justify-content: space-between;
      flex-wrap: wrap;
      padding-bottom: min(5vw, 50px); } }
  @media screen and (max-width: 768px) {
    main #apply .block_set {
      flex-direction: column;
      gap: 5.3vw;
      padding-bottom: 10vw; } }

main #apply .block_set .block_1,
main #apply .block_set .block_2 {
  position: relative; }
  @media screen and (min-width: 769px) {
    main #apply .block_set .block_1,
    main #apply .block_set .block_2 {
      width: min(48vw, 480px); } }
  @media screen and (max-width: 768px) {
    main #apply .block_set .block_1,
    main #apply .block_set .block_2 {
      width: 100%; } }

main #apply .block_set .block_3 {
  position: relative; }
  @media screen and (min-width: 769px) {
    main #apply .block_set .block_3 {
      width: 100%;
      margin-top: min(5vw, 50px); } }
  @media screen and (max-width: 768px) {
    main #apply .block_set .block_3 {
      width: 100%; } }

main #shop {
  position: relative;
  background: #fffeed; }
  @media screen and (min-width: 769px) {
    main #shop {
      padding-bottom: min(9vw, 90px); } }
  @media screen and (max-width: 768px) {
    main #shop {
      padding-bottom: 33.33vw; } }

main #shop .banner_set {
  position: relative;
  display: flex;
  justify-content: space-between; }
  @media screen and (min-width: 769px) {
    main #shop .banner_set {
      width: min(78vw, 780px);
      margin: 0 auto; } }
  @media screen and (max-width: 768px) {
    main #shop .banner_set {
      width: 100%; } }

main #shop .banner_set a {
  position: relative;
  display: block;
  background: #fff;
  border: #d7d7d7 1px solid; }
  @media screen and (min-width: 769px) {
    main #shop .banner_set a {
      width: min(38vw, 380px); } }
  @media screen and (max-width: 768px) {
    main #shop .banner_set a {
      width: 44vw; } }

main .content_btm {
  position: relative;
  background: #fffeed;
  width: 100%;
  border-radius: 0 0 50% 50%; }
  @media screen and (min-width: 769px) {
    main .content_btm {
      height: min(5vw, 50px); } }
  @media screen and (max-width: 768px) {
    main .content_btm {
      height: 8vw; } }

#comparison {
  position: relative;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    #comparison {
      width: min(64vw, 640px); } }
  @media screen and (max-width: 768px) {
    #comparison {
      width: 81.3vw; } }

#comparison p {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none; }
  @media screen and (min-width: 769px) {
    #comparison p {
      height: min(36vw, 360px); } }
  @media screen and (max-width: 768px) {
    #comparison p {
      height: 57.3vw; } }

#comparison .graph {
  transform: scaleY(0);
  transform-origin: center bottom; }

#comparison.active .graph {
  transition: all 1500ms cubic-bezier(0.785, 0.37, 0, 0.99);
  transition-timing-function: cubic-bezier(0.785, 0.37, 0, 0.99);
  transform: scaleY(1); }

#comparison.active .graph_1 {
  transition-delay: .6s; }

#comparison.active .graph_2 {
  transition-delay: .8s; }

#comparison .comparison_num {
  opacity: 0; }

#comparison.active .comparison_num {
  transition: all 1800ms cubic-bezier(0.785, 0.37, 0, 0.99);
  transition-timing-function: cubic-bezier(0.785, 0.37, 0, 0.99);
  opacity: 1; }

#comparison.active .comparison_num {
  transition-delay: 1.5s; }

#comparison .comparison_line {
  opacity: 0;
  transform: translateX(-10%); }

#comparison.active .comparison_line {
  transition: ease-out .9s all;
  opacity: 1;
  transform: translateX(0); }

#comparison.active .comparison_line {
  transition-delay: 2.1s; }

#comparison .comparison_item {
  opacity: 0;
  transform: translateY(5%); }

#comparison.active .comparison_item {
  transition: ease-out .9s all;
  opacity: 1;
  transform: translateX(0); }

#comparison.active .comparison_item {
  transition-delay: 2.4s; }