@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap");
main {
  line-height: 1;
  /* change colours to suit your needs */
  /* change colours to suit your needs */
  /* change border colour to suit your needs */
}
main body, main main, main div, main span, main object, main iframe,
main h1, main h2, main h3, main h4, main h5, main h6, main p, main blockquote, main pre,
main abbr, main address, main cite, main code,
main del, main dfn, main em, main img, main ins, main kbd, main q, main samp,
main small, main strong, main sub, main sup, main var,
main b, main i,
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 figcaption, main figure,
main hgroup, main menu, main nav, main section, main summary,
main time, main mark, main audio, main video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
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 nav ul {
  list-style: none;
}
main blockquote, main q {
  quotes: none;
}
main blockquote:before, main blockquote:after,
main q:before, main q:after {
  content: "";
  content: none;
}
main a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
main ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
main mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
main del {
  text-decoration: line-through;
}
main abbr[title], main dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
main table {
  border-collapse: collapse;
  border-spacing: 0;
}
main hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
main input, main select {
  vertical-align: middle;
}

main input,
main button,
main select,
main textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}
main textarea {
  resize: vertical;
}
main input[type=checkbox],
main input[type=radio] {
  display: none;
}
main input[type=submit],
main input[type=button],
main label,
main button,
main select {
  cursor: pointer;
}
main select::-ms-expand {
  display: none;
}
main ul, main li {
  list-style: none;
}
main * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
}

:root {
  --vw: 1vw;
}

header.open nav ul, header.open nav:before, header.open nav {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) rotate(0deg) !important;
}

header {
  position: relative;
  z-index: 8000;
}
header .lotte {
  position: absolute;
  width: 90px;
  top: 15px;
  left: 20px;
}
header .sns_wrap {
  position: absolute;
  top: 15px;
  right: 100px;
}
header .sns_wrap ul {
  display: flex;
  list-style: none;
}
header .sns_wrap ul li {
  width: 33px;
  height: 33px;
  margin: 0 6px;
  border-radius: 18.5px;
}
header .sns_wrap ul li a {
  display: block;
  transition: all 1s ease-out;
  opacity: 1;
  cursor: pointer;
}
header .sns_wrap ul li a:hover {
  opacity: 0.6;
}
header .toggle {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
  width: 56px;
  height: 50px;
  top: 10px;
  right: 20px;
}
header .toggle span.bar, header .toggle:before, header .toggle:after {
  content: "";
  position: absolute;
  z-index: 1;
  background-color: #ffe100;
  border-radius: 2px;
  width: 22px;
  height: 3px;
  left: calc(50% - 11px);
}
header .toggle:before {
  top: 10px;
}
header .toggle span.bar {
  top: 18px;
}
header .toggle:after {
  top: 26px;
}
header .toggle em {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  text-align: center;
  color: #ffe100;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 0.5px;
  bottom: 5px;
  font-size: 7px;
}
header .toggle span.hex {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url(../img/header/hex.png);
  background-repeat: no-repeat;
  background-size: contain;
}
header nav {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #3d0a0d;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
header nav:before {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-image: url("../img/header/leaf_pc.png");
  background-position: 50% 100%;
}
@media screen and (max-width: 767.98px) {
  header nav:before {
    height: 15vw;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
@media screen and (min-width: 768px) {
  header nav:before {
    height: 147px;
    background-size: contain;
    background-repeat: repeat-x;
  }
}
@media screen and (max-width: 767.98px) {
  header nav ul {
    margin-top: -22.5vw;
  }
}
@media screen and (min-width: 768px) {
  header nav ul {
    margin-top: -50px;
  }
}
header nav li {
  text-align: center;
}
@media screen and (max-width: 767.98px) {
  header nav li {
    margin: 2vw 0;
  }
}
@media screen and (min-width: 768px) {
  header nav li {
    margin: 5px 0;
  }
}
header nav a {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-family: heisei-maru-gothic-std, sans-serif;
  font-weight: 800;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 767.98px) {
  header nav a {
    font-size: 4vw;
  }
}
@media screen and (min-width: 768px) {
  header nav a {
    font-size: 26px;
  }
}
header .toggle span.hex {
  transition: all 0.3s ease;
}
header .toggle:hover span.hex {
  transform: scale(1.1);
}
header nav a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 10%;
  left: 0;
  bottom: 5px;
  background-color: #ffe100;
  border-radius: 2px;
  opacity: 0;
  transition: all 0.4s ease-out;
}
header nav a:hover:before {
  opacity: 1;
  transform: translateY(5px);
}
header .campaign {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
header .campaign:hover {
  transform: scale(1.2);
}
header .toggle span.bar, header .toggle:before, header .toggle:after {
  transition: all 0.2s ease;
}
header.open .toggle span.bar {
  opacity: 0;
}
header.open .toggle:before {
  transform: translateY(8px) rotate(-45deg);
}
header.open .toggle:after {
  transform: translateY(-8px) rotate(45deg);
}
header nav {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.2s linear, transform 0s 0.2s;
}
header nav:before {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s linear, transform 0.2s ease;
}
header nav ul {
  opacity: 0;
  transform: translateY(50px);
}
header.open nav {
  transition: opacity 0.6s linear, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
header.open nav:before {
  transition: opacity 0.2s linear 0.8s, transform 0.4s ease 0.8s;
}
header.open nav ul {
  transition: opacity 0.6s linear 0.4s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
}

body main {
  position: relative;
  z-index: 1;
  color: #040000;
  line-height: 1.8;
  letter-spacing: 0.05em;
  background-color: #fff;
  font-family: heisei-maru-gothic-std, sans-serif;
  font-weight: 400;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 767.98px) {
  body main {
    width: 100%;
    min-width: inherit;
    letter-spacing: 0;
  }
}
body sup {
  font-size: 0.7em;
  vertical-align: top;
}
body a {
  text-decoration: none;
  color: #333;
}
body img {
  width: 100%;
}
body #wrap {
  background: #efefef;
  z-index: 1;
  position: relative;
}
@media screen and (min-width: 768px) {
  body #wrap {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
}
body #wrap #lft {
  display: none;
  width: calc((100% - 500px) / 2);
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  background: url(../img/lft.png) 0 0/cover no-repeat;
}
@media screen and (min-width: 768px) {
  body #wrap #lft {
    display: block;
  }
}
body #wrap #rgt {
  display: none;
  width: calc((100% - 500px) / 2);
  position: sticky;
  top: 0;
  right: 0;
  height: 100vh;
  background: url(../img/rgt.png) 0 0/cover no-repeat;
}
body #wrap #rgt .floating_btn {
  display: block;
  width: 209px;
  position: absolute;
  bottom: 16px;
  left: 10px;
  opacity: 1;
  transition: all 0.5s ease-out;
  transform: scale(1);
  opacity: 0;
  visibility: hidden;
}
body #wrap #rgt .floating_btn:hover {
  transform: scale(1.05);
}
body #wrap #rgt .floating_btn.scrolled {
  opacity: 1;
  visibility: visible;
}
body #wrap #rgt .floating_btn.scrolled:hover {
  opacity: 0.8;
  transition: 0.4s;
}
@media screen and (min-width: 768px) {
  body #wrap #rgt {
    display: block;
  }
}
body #wrap #rgt .nav {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 15.32%;
  padding-left: 14.12%;
  padding-left: 54px;
}
@media screen and (min-width: 1200px) {
  body #wrap #rgt .nav {
    padding-top: 80px;
    padding-left: 60px;
  }
}
body #wrap #rgt .nav .nav_ttl img {
  max-width: 353px;
  width: 32.4%;
  width: 14vw;
  margin-left: -0.6em;
}
body #wrap #mid {
  background: #fff;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  body #wrap #mid {
    max-width: 500px;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .inner {
    container-type: inline-size;
    contain-intrinsic-inline-size: 500px; /* 新しい設計幅に合わせる */
    --scale: calc(100% / 500);
    /* contain-intrinsic-inline-size は 500px のままでOK */
  }
}
body #wrap #mid .risu_btn {
  position: relative;
  display: table;
  margin: 0 auto;
  width: calc(430 * var(--scale));
  opacity: 1;
  transition: 0.4s;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .risu_btn {
    width: calc(var(--vw) * 430 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .risu_btn {
    width: calc(389.838 * var(--scale));
  }
}
body #wrap #mid .risu_btn:hover {
  opacity: 0.8;
  transition: 0.4s;
}
body #wrap #mid .risu_btn .risu {
  display: inline-block;
  position: absolute;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .risu_btn .risu {
    top: calc(var(--vw) * -22 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .risu_btn .risu {
    top: -2.9333333333cqw;
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .risu_btn .risu {
    right: calc(var(--vw) * -16 / 750 * 130);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .risu_btn .risu {
    right: calc(-14.5056 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .risu_btn .risu {
    width: calc(var(--vw) * 137 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .risu_btn .risu {
    width: calc(124.2042 * var(--scale));
  }
}
body #wrap #mid .kv {
  background: url(../img/kv_bg.png) 0 0/100% auto no-repeat;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .kv {
    padding-top: calc(var(--vw) * 172 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .kv {
    padding-top: calc(155.9352 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .kv {
    padding-bottom: calc(var(--vw) * 45 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .kv {
    padding-bottom: calc(40.797 * var(--scale));
  }
}
body #wrap #mid .kv .kv_btn {
  transition: all 0.5s ease-out;
  transform: scale(1);
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .kv .kv_btn {
    margin-top: calc(var(--vw) * 80 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .kv .kv_btn {
    margin-top: calc(72.528 * var(--scale));
  }
}
body #wrap #mid .kv .kv_btn:hover {
  transform: scale(1.05);
}
body #wrap #mid .about {
  background: url(../img/bg01.png) 0 0/cover no-repeat;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about {
    padding-top: calc(var(--vw) * 110 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about {
    padding-top: calc(99.726 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about {
    padding-bottom: calc(var(--vw) * 268 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about {
    padding-bottom: calc(242.9688 * var(--scale));
  }
}
body #wrap #mid .about .about_box {
  line-height: 1;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about .about_box {
    width: calc(var(--vw) * 490 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about .about_box {
    width: calc(444.234 * var(--scale));
  }
}
body #wrap #mid .about .about_box:before {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  background: #559527;
  position: absolute;
  z-index: -1;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about .about_box:before {
    top: calc(var(--vw) * 20 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about .about_box:before {
    top: 2.6666666667cqw;
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about .about_box:before {
    right: calc(var(--vw) * -20 / 750 * 130);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about .about_box:before {
    right: calc(-18.132 * var(--scale));
  }
}
body #wrap #mid .about .remix_ttl {
  margin: 0 auto;
  line-height: 1;
  z-index: 2;
  position: relative;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about .remix_ttl {
    margin-top: calc(var(--vw) * 100 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about .remix_ttl {
    margin-top: calc(90.66 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about .remix_ttl {
    width: calc(var(--vw) * 490 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about .remix_ttl {
    width: calc(444.234 * var(--scale));
  }
}
body #wrap #mid .about .remix_img {
  line-height: 1;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about .remix_img {
    margin-top: calc(var(--vw) * -47 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about .remix_img {
    margin-top: calc(-42.6102 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about .remix_img {
    width: calc(var(--vw) * 420 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about .remix_img {
    width: calc(380.772 * var(--scale));
  }
}
body #wrap #mid .about .remix_img .youtube_wrap {
  /* 幅は親に合わせる、最大幅はお好みで */
  /* aspect-ratio 対応ブラウザならこれだけでOK */
  aspect-ratio: 9/16;
  position: relative;
}
@supports not (aspect-ratio: 1/1) {
  body #wrap #mid .about .remix_img .youtube_wrap {
    height: 0;
    padding-bottom: 177.78%; /* 16/9 の逆= 9:16 → 100 * 16/9 = 177.78% */
  }
}
body #wrap #mid .about .remix_img .youtube_wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body #wrap #mid .about .remix_img:before {
  content: "";
  width: 100%;
  height: 100%;
  display: inline-block;
  background: #ffba00;
  position: absolute;
  z-index: -1;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about .remix_img:before {
    top: calc(var(--vw) * 20 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about .remix_img:before {
    top: 2.6666666667cqw;
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .about .remix_img:before {
    right: calc(var(--vw) * -20 / 750 * 130);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .about .remix_img:before {
    right: calc(-18.132 * var(--scale));
  }
}
body #wrap #mid .check {
  position: relative;
  background: url(../img/bg_y.png) 0 0/2.1% auto repeat;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check {
    padding-top: calc(var(--vw) * 190 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check {
    padding-top: calc(172.254 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check {
    padding-bottom: calc(var(--vw) * 130 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check {
    padding-bottom: calc(117.858 * var(--scale));
  }
}
body #wrap #mid .check .check_ttl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .check_ttl {
    top: calc(var(--vw) * -116 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .check_ttl {
    top: -15.4666666667cqw;
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .check_ttl {
    width: calc(var(--vw) * 480 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .check_ttl {
    width: calc(435.168 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .check_slider .swiper-slide {
    width: calc(var(--vw) * 320 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .check_slider .swiper-slide {
    width: calc(290.112 * var(--scale));
  }
}
body #wrap #mid .check .slide_box a {
  display: block;
  opacity: 1;
  transition: 0.4s;
}
body #wrap #mid .check .slide_box a:hover {
  opacity: 0.8;
  transition: 0.4s;
}
body #wrap #mid .check .slide_box a:after {
  content: "";
  pointer-events: none;
  display: inline-block;
  position: absolute;
  top: 52%;
  left: 50%;
  background: url(../img/play.png) 0 0/cover no-repeat;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .slide_box a:after {
    width: calc(var(--vw) * 88 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .slide_box a:after {
    width: calc(79.7808 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .slide_box a:after {
    height: calc(var(--vw) * 88 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .slide_box a:after {
    height: 11.7333333333cqh;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .slide_box a:after {
    width: 60px;
    height: 60px;
  }
}
body #wrap #mid .check .slide_box {
  /* 縦型 9:16（ショート等）のレスポンシブ埋め込み */
  /* 互換性のためのフォールバック（aspect-ratio未対応向け） */
}
body #wrap #mid .check .slide_box .yt-vertical {
  /* 幅は親に合わせる、最大幅はお好みで */
  /* aspect-ratio 対応ブラウザならこれだけでOK */
  aspect-ratio: 9/16;
  position: relative;
}
@supports not (aspect-ratio: 1/1) {
  body #wrap #mid .check .slide_box .yt-vertical {
    height: 0;
    padding-bottom: 177.78%; /* 16/9 の逆= 9:16 → 100 * 16/9 = 177.78% */
  }
}
body #wrap #mid .check .slide_box .yt-vertical iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body #wrap #mid .check .slide_box .pink-shadow {
  --pink: #f8a6c8; /* ピンクの色（お好みで） */
  --offset: 8px; /* 右下へのズレ量（例の画像っぽくやや太め） */
  --radius: 0px; /* 角丸。yt-verticalのborder-radiusと合わせる */
  isolation: isolate; /* これがあると背面レイヤーを確実に後ろへ */
}
body #wrap #mid .check .slide_box .pink-shadow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--pink);
  transform: translate(var(--offset), var(--offset)); /* 右下にズラす */
  z-index: -1; /* 背面へ（isolationで確実に背面に入る） */
  pointer-events: none;
}
body #wrap #mid .check .swiper-pagination {
  position: static;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .swiper-pagination {
    margin-top: calc(var(--vw) * 40 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .swiper-pagination {
    margin-top: calc(36.264 * var(--scale));
  }
}
body #wrap #mid .check .swiper-button-prev::after, body #wrap #mid .check .swiper-button-next::after {
  color: #fff;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .swiper-button-prev::after, body #wrap #mid .check .swiper-button-next::after {
    font-size: calc(var(--vw) * 100 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .swiper-button-prev::after, body #wrap #mid .check .swiper-button-next::after {
    font-size: 85px;
  }
}
body #wrap #mid .check .swiper-button-prev, body #wrap #mid .check .swiper-button-next {
  transform: translateY(-50%);
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .swiper-button-prev, body #wrap #mid .check .swiper-button-next {
    width: calc(var(--vw) * 100 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .swiper-button-prev, body #wrap #mid .check .swiper-button-next {
    width: calc(90.66 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .swiper-button-prev, body #wrap #mid .check .swiper-button-next {
    height: calc(var(--vw) * 100 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .swiper-button-prev, body #wrap #mid .check .swiper-button-next {
    height: 13.3333333333cqh;
  }
}
body #wrap #mid .check .swiper-button-next {
  right: 8%;
}
body #wrap #mid .check .swiper-button-prev {
  left: 8%;
}
body #wrap #mid .check .swiper-pagination-bullet {
  border-radius: 0;
  opacity: 1;
  background: transparent url(../img/pagenation.svg) 0 0/contain no-repeat;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .swiper-pagination-bullet {
    width: calc(var(--vw) * 20 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .swiper-pagination-bullet {
    width: calc(18.132 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .swiper-pagination-bullet {
    height: calc(var(--vw) * 20 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .swiper-pagination-bullet {
    height: 2.6666666667cqh;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .swiper-pagination-bullet {
    width: 15px;
    height: 16px;
  }
}
body #wrap #mid .check .swiper-pagination-bullet-active {
  border-radius: 0;
  opacity: 1;
  background: transparent url(../img/pagenation_act.svg) 0 0/contain no-repeat;
}
body #wrap #mid .check .check_attention {
  margin: 0 auto;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .check_attention {
    width: calc(var(--vw) * 400 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .check_attention {
    width: calc(362.64 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .check .check_attention {
    margin-top: calc(var(--vw) * 20 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .check .check_attention {
    margin-top: calc(18.132 * var(--scale));
  }
}
body #wrap #mid .join {
  position: relative;
  background: url(../img/bg02.png) 0 0/cover no-repeat;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .join {
    padding-top: calc(var(--vw) * 260 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .join {
    padding-top: calc(235.716 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .join {
    padding-bottom: calc(var(--vw) * 80 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .join {
    padding-bottom: calc(72.528 * var(--scale));
  }
}
body #wrap #mid .join .join_ttl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .join .join_ttl {
    top: calc(var(--vw) * -103 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .join .join_ttl {
    top: -13.7333333333cqw;
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .join .join_ttl {
    width: calc(var(--vw) * 490 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .join .join_ttl {
    width: calc(444.234 * var(--scale));
  }
}
body #wrap #mid .join .join_howto {
  margin-left: auto;
  margin-right: 0;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .join .join_howto {
    margin-top: calc(var(--vw) * -70 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .join .join_howto {
    margin-top: calc(-63.462 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .join .join_howto {
    width: calc(var(--vw) * 520 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .join .join_howto {
    width: calc(471.432 * var(--scale));
  }
}
body #wrap #mid .join .join_btn {
  transition: all 0.5s ease-out;
  transform: scale(1);
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .join .join_btn {
    margin-top: calc(var(--vw) * 40 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .join .join_btn {
    margin-top: calc(36.264 * var(--scale));
  }
}
body #wrap #mid .join .join_btn:hover {
  transform: scale(1.05);
}
body #wrap #mid .item {
  position: relative;
  background: url(../img/bg_y.png) 0 0/2.1% auto repeat;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item {
    padding-top: calc(var(--vw) * 70 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item {
    padding-top: calc(63.462 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item {
    padding-bottom: calc(var(--vw) * 150 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item {
    padding-bottom: calc(135.99 * var(--scale));
  }
}
body #wrap #mid .item .item_ttl {
  margin: 0 auto;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item_ttl {
    width: calc(var(--vw) * 400 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item_ttl {
    width: calc(362.64 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item01_block {
    margin-top: calc(var(--vw) * 20 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item01_block {
    margin-top: calc(18.132 * var(--scale));
  }
}
body #wrap #mid .item .item01, body #wrap #mid .item .item02 {
  margin: 0 auto;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item01, body #wrap #mid .item .item02 {
    margin-bottom: calc(var(--vw) * 38 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item01, body #wrap #mid .item .item02 {
    margin-bottom: calc(34.4508 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item01, body #wrap #mid .item .item02 {
    width: calc(var(--vw) * 370 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item01, body #wrap #mid .item .item02 {
    width: calc(335.442 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item02 {
    margin-top: calc(var(--vw) * 92 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item02 {
    margin-top: calc(83.4072 * var(--scale));
  }
}
body #wrap #mid .item .item01_name {
  margin: 0 auto;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item01_name {
    width: calc(var(--vw) * 130 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item01_name {
    width: calc(117.858 * var(--scale));
  }
}
body #wrap #mid .item .item02_name {
  margin: 0 auto;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item02_name {
    width: calc(var(--vw) * 300 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item02_name {
    width: calc(271.98 * var(--scale));
  }
}
body #wrap #mid .item .item_txt {
  color: #3d0a0d;
  line-height: 1.7;
  text-align: center;
  font-weight: 700;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item_txt {
    margin-top: calc(var(--vw) * 32 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item_txt {
    margin-top: calc(29.0112 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item_txt {
    font-size: calc(var(--vw) * 22 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item_txt {
    font-size: 18.7px;
  }
}
body #wrap #mid .item .item_attention {
  color: #3d0a0d;
  line-height: 1.7;
  text-align: center;
  font-weight: 700;
  text-box: trim-both cap alphabetic;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item_attention {
    margin-top: calc(var(--vw) * 44 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item_attention {
    margin-top: calc(39.8904 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item_attention {
    font-size: calc(var(--vw) * 14 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item_attention {
    font-size: 11.9px;
  }
}
body #wrap #mid .item .item_char {
  position: absolute;
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item_char {
    width: calc(var(--vw) * 250 / 750 * 130);
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item_char {
    width: calc(226.65 * var(--scale));
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item_char {
    bottom: calc(var(--vw) * -60 / 750 * 100);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item_char {
    bottom: -8cqw;
  }
}
@media screen and (max-width: 767.98px) {
  body #wrap #mid .item .item_char {
    left: calc(var(--vw) * -74 / 750 * 130);
  }
}
@media screen and (min-width: 768px) {
  body #wrap #mid .item .item_char {
    left: calc(-67.0884 * var(--scale));
  }
}

.reveal {
  opacity: 0;
}
.reveal.is-shown {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.reveal_zoom {
  opacity: 0;
}
.reveal_zoom.is-shown {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.reveal_fade {
  opacity: 0;
}
.reveal_fade.is-shown {
  animation: fadeIn 1.2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (max-width: 767.98px) {
  .tbpc-only {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}