/*$break_width1: 1280px;
$break_width2: 1280px;
$break_width3: 1920px;
$break_width4: 1024px;
*/
@keyframes loop { 0% { transform: translateX(80%); }
  to { transform: translateX(-120%); } }
@keyframes loop2 { 0% { transform: translateX(-20%); }
  to { transform: translateX(-220%); } }
#contents { overflow: auto; }
#contents section { overflow: hidden; }

.top .kv { background-image: url("/wp-content/themes/with/img/bg_tile01.jpg"); background-repeat: repeat; background-size: 9.375vw 9.375vw; padding: 3.125vw 0 5.859vw 9.18vw; position: relative; }
.top .kv:before { content: ""; width: 100%; height: 39.063vw; background: #f44336; position: absolute; left: 0; bottom: 0; z-index: 1; }
.top .kv h1 { width: 22.461vw; height: 22.461vw; position: absolute; left: 0; top: -1vw; z-index: 10; }
.top .kv h1 img { width: 100%; }
.top .kv .menu_layout { display: none; }
.top .kv .visual { position: relative; z-index: 5; }
.top .kv .visual picture img { width: 100%; height: 100%; object-fit: cover; }
.top .kv .visual .cs_logos { position: absolute; right: 0; top: 0; }
.top .kv .visual .cs_logos .ps { width: 33.496vw; position: absolute; top: 2.637vw; right: 12.109vw; }
.top .kv .visual .cs_logos .switch { width: 8.691vw; position: absolute; top: 0; right: 0; }
.top .kv .visual .btn_order_circle { position: absolute; width: 22.266vw; height: 22.266vw; padding: 7.91vw 0 0; bottom: 15.828vw; left: 1.953vw; }
.top .kv .visual .btn_order_circle img { width: 16.992vw; }
.top .kv .visual .catch { width: 55.078vw; height: 12.988vw; position: absolute; top: 23.242vw; left: 0; }
.top .kv .visual .catch span { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.top .kv .visual .catch span img { width: 55.078vw; max-width: inherit; }
.top .kv .visual .release { width: 74.902vw; position: absolute; left: 2.93vw; bottom: 2.395vw; }
.top .kv .btn_x { position: absolute; left: 0; bottom: 72.2vw; display: block; width: 9.277vw; height: 39.355vw; color: #fff; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; background: #f44336; z-index: 10; background: url("/wp-content/themes/with/img/btn_x_bg.png") no-repeat left top/100% auto; }
.top .kv .btn_x i { display: block; width: 3.125vw; position: absolute; top: 7.52vw; left: 2.93vw; }
.top .kv .btn_x span { font-size: 2.246vw; font-family: "Josefin Sans", sans-serif; position: absolute; top: 12.695vw; left: 2.93vw; }
.top .kv .swiper-kv { position: absolute; bottom: 0; left: 0; z-index: 15; width: 100vw; padding: 0 0 7.91vw; }
.top .kv .swiper-kv .swiper-slide { width: 43.359vw; height: 23.633vw; padding: 0 0.781vw; }
.top .kv .swiper-kv .swiper-slide a { display: block; width: 100%; height: 100%; position: relative; border-radius: 0.977vw; overflow: hidden; }
.top .kv .swiper-kv .swiper-slide a:before { content: ""; width: 100%; height: 100%; border: 2px solid #ff9100; border-radius: 0.977vw; position: absolute; left: 0; top: 0; z-index: 10; }
.top .kv .swiper-kv .swiper-slide a span { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; }
.top .kv .swiper-kv .swiper-slide a .text { position: absolute; left: 0; bottom: 0; background: #ff9100; height: 5.273vw; padding: 1.563vw 1.953vw 0 1.758vw; }
.top .kv .swiper-kv .swiper-slide a .text span { display: block; width: auto; height: 2.246vw; }
.top .kv .swiper-kv .swiper-slide a .text span img { width: auto; height: 100%; max-width: inherit; }
.top .kv .swiper-kv .swiper-slide a .text:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 5.176vw 0 0 3.223vw; border-color: transparent transparent transparent #ff9100; position: absolute; bottom: 0; right: -3.125vw; }
.top .kv .swiper-kv .swiper-slide.slide02 a:before { border: 2px solid #06b197; }
.top .kv .swiper-kv .swiper-slide.slide02 a .text { background: #06b197; }
.top .kv .swiper-kv .swiper-slide.slide02 a .text:before { border-color: transparent transparent transparent #06b197; }
.top .kv .swiper-kv .swiper-slide.slide03 a:before { border: 2px solid #03a9f4; }
.top .kv .swiper-kv .swiper-slide.slide03 a .text { background: #03a9f4; }
.top .kv .swiper-kv .swiper-slide.slide03 a .text:before { border-color: transparent transparent transparent #03a9f4; }
.top .kv .swiper-kv .swiper-slide.slide04 a:before { border: 2px solid #caa600; }
.top .kv .swiper-kv .swiper-slide.slide04 a .text { background: #caa600; }
.top .kv .swiper-kv .swiper-slide.slide04 a .text:before { border-color: transparent transparent transparent #caa600; }
.top .kv .swiper-kv .swiper-pagination { bottom: 2.344vw; }
.top .kv .swiper-kv .swiper-pagination-bullet { background: #fff; width: 1.172vw; height: 1.172vw; margin: 0 0.488vw !important; }
.top h2.title { font-family: "Poppins", sans-serif; font-weight: 700; }
.top .news { background: #f44336; position: relative; padding: 2.93vw 0 0; box-shadow: 0px 1.563vw 3.711vw 0px rgba(0, 0, 0, 0.23); }
.top .news h2.title { width: 31.641vw; margin: 0.977vw 0 0 5.566vw; }
.top .news .btn_more { display: block; width: 34.961vw; height: 7.813vw; background: url("/wp-content/themes/with/img/btn_more.png") no-repeat left bottom/100% auto; position: absolute; right: 0; top: 2.93vw; padding: 2.93vw 0 0 11.621vw; z-index: 99; }
.top .news .btn_more span { display: block; font-size: 3.027vw; font-weight: 600; font-family: "Josefin Sans", sans-serif; color: #fff; position: relative; }
.top .news .btn_more span:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.83vw 1.367vw 0.83vw 0; border-color: transparent #ffffff transparent transparent; position: absolute; left: -3.613vw; top: 0.488vw; }
.top .news .archives { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 0 8.789vw; }
.top .news .archives .item { width: 41.406vw; display: block; margin: 5.273vw 2.93vw 0; }
.top .news .archives .item .thumb { width: 100%; height: 23.535vw; box-shadow: 0.781vw 0.781vw 0px 0px rgba(0, 0, 0, 0.06); border-radius: 0.977vw; overflow: hidden; }
.top .news .archives .item .thumb span { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center; }
.top .news .archives .item .top { display: flex; justify-content: space-between; margin: 2.344vw 0 0; }
.top .news .archives .item .date { font-family: "Josefin Sans", sans-serif; color: #fff; font-size: 2.344vw; letter-spacing: 0.04em; padding-left: 0.449vw; }
.top .news .archives .item .category { font-family: "Josefin Sans", sans-serif; background: #ffe23f; font-size: 2.002vw; letter-spacing: -0.1em; display: inline-block; line-height: 1; padding: 0.586vw 1.172vw 0; }
.top .news .archives .item .title { color: #fff; font-size: 2.441vw; font-weight: 700; line-height: 1.32; margin: 1.465vw 0 0; padding-left: 0.449vw; word-break: break-all; }
.top .about { position: relative; }
.top .about:before { content: ""; width: 62.109vw; height: 114.648vw; background-repeat: no-repeat; background-size: cover; background-position: right top; background-image: url("/wp-content/themes/with/img/top/about/bg_parts01.png"); position: absolute; right: 0; top: 10.352vw; }
.top .about h2.title { width: 11.426vw; position: absolute; right: 0; top: 53.516vw; }
.top .about .box01 { padding: 11.328vw 5.371vw 11.5vw; position: relative; z-index: 5; }
.top .about .box01 .catch { width: 80.762vw; }
.top .about .box01 .text { margin: 5.273vw 0 0; }
.top .about .box01 .text p { font-size: 3.76vw; font-weight: 700; line-height: 1.84; letter-spacing: -0.02em; }
.top .about .box01 .visual { width: 100vw; height: auto; position: relative; margin: -6.2vw 0 0 -5.31vw; }
.top .about .box01 .visual .img02 { width: 100%; position: absolute; left: 0; top: 0; }
.top .about .box01 .slide { height: 33.008vw; display: flex; overflow: hidden; position: absolute; left: 0; bottom: 0; filter: drop-shadow(0px 0px 1.563vw rgba(0, 0, 0, 0.32)); }
.top .about .box01 .slide .img { width: 150.438vw; position: relative; }
.top .about .box01 .slide .img img { width: 164.45vw; max-width: inherit; vertical-align: baseline; position: absolute; left: 0; bottom: 0; }
.top .about .box01 .slide .img:first-child { animation: loop 50s -25s linear infinite; }
.top .about .box01 .slide .img:last-child { animation: loop2 50s linear infinite; }
.top .about .box02 { padding: 11.23vw 0 0; }
.top .about .box02 .catch { width: 77.93vw; margin: 0 auto; }
.top .about .box02 .catch_ribbon { position: relative; padding: 2.539vw 0 0 18.164vw; height: 9.473vw; margin: 3.809vw 0 0; }
.top .about .box02 .catch_ribbon i, .top .about .box02 .catch_ribbon img, .top .about .box02 .catch_ribbon span { position: relative; z-index: 5; }
.top .about .box02 .catch_ribbon i { display: block; width: 4.59vw; height: 8.594vw; position: absolute; left: 8.984vw; bottom: 1.855vw; }
.top .about .box02 .catch_ribbon span { display: block; width: 71.973vw; }
.top .about .box02 .catch_ribbon:before { content: ""; width: 100vw; height: 9.473vw; background: #ffe23f; position: absolute; left: 2.344vw; bottom: 0; transform: skewX(-33deg); box-shadow: 0.781vw 0.781vw 0 0 rgba(0, 0, 0, 0.06); transform-origin: left bottom; }
.top .about .box02 .text { padding: 3.1vw 8.301vw 0; }
.top .about .box02 .text p { font-size: 3.418vw; font-weight: 700; line-height: 2.03; }
.top .about .box02 .visual01 { position: relative; margin: 4.395vw 0 0; }
.top .about .box02 .visual01 .img03 { width: 84.668vw; margin-left: 3.883vw; }
.top .about .box02 .visual01 .img04 { width: 47.703vw; position: absolute; right: -2vw; top: 29.832vw; }
.top .about .box02 .visual01 .img05 { width: 21.973vw; position: absolute; left: 35.254vw; top: 46.5vw; }
.top .about .box02 .visual02 { margin: 9.859vw 0 0; position: relative; }
.top .about .box02 .visual02 .img07 { width: 25.879vw; position: absolute; top: 0.977vw; left: 40.723vw; }
.top .system { position: relative; margin-top: -3vw; }
.top .system h2.title { width: 52.246vw; margin-left: 5.566vw; position: relative; z-index: 999; padding-top: 6vw; user-select: none; }
.top .system .wrap { position: relative; z-index: 10; }
.top .system .wrap .visual { width: 44.629vw; position: absolute; right: 0; top: -5vw; user-select: none; }
.top .system .slider_wrap { position: relative; padding: 0 0 0 0; }
.top .system .slider_wrap:before { content: ""; width: 100%; height: calc(100% - 36.273vw); background-image: url("/wp-content/themes/with/img/bg_cross.jpg"); background-repeat: repeat; background-size: 2.93vw 2.93vw; position: absolute; left: 0; bottom: 0; box-shadow: 0px 1.563vw 3.711vw 0px rgba(0, 0, 0, 0.23); }
.top .system .slider_wrap .swiper.btns { padding: 4.883vw 0 0 5.371vw; user-select: none; }
.top .system .slider_wrap .swiper.btns .swiper-wrapper { display: block; }
.top .system .slider_wrap .swiper.btns .swiper-slide { width: 63.379vw !important; height: 8.301vw; overflow: hidden; position: relative; box-shadow: 0.781vw 0.781vw 0px 0px rgba(0, 0, 0, 0.06); display: block; cursor: pointer; }
.top .system .slider_wrap .swiper.btns .swiper-slide .inner { height: 100%; background: #ffe23f; border-radius: 0.977vw; padding: 0 0 0 4.883vw; overflow: hidden; }
.top .system .slider_wrap .swiper.btns .swiper-slide .inner:before { content: ""; width: 1.855vw; height: 100%; position: absolute; left: 0; top: 0; background: #06b197; border-radius: 0.977vw 0 0 0.977vw; }
.top .system .slider_wrap .swiper.btns .swiper-slide p { display: flex; align-items: center; padding: 0.488vw 0 0; }
.top .system .slider_wrap .swiper.btns .swiper-slide span.num { display: block; font-family: "Poppins", sans-serif; font-style: italic; padding: 0.488vw 0 0; font-size: 4.883vw; }
.top .system .slider_wrap .swiper.btns .swiper-slide span.text { display: block; font-size: 3.613vw; padding-left: 1.855vw; line-height: 1; letter-spacing: -0.06em; }
.top .system .slider_wrap .swiper.btns .swiper-slide + .swiper-slide { margin: 2.148vw 0 0; }
.top .system .slider_wrap .swiper.btns .swiper-slide:nth-of-type(2) .inner:before { background: #3d5afe; }
.top .system .slider_wrap .swiper.btns .swiper-slide:nth-of-type(3) .inner:before { background: #03a9f4; }
.top .system .slider_wrap .swiper.btns .swiper-slide:nth-of-type(4) .inner:before { background: #ff9100; }
.top .system .slider_wrap .swiper.btns .swiper-slide-thumb-active span.num { font-weight: 700; }
.top .system .slider_wrap .swiper.btns .swiper-slide-thumb-active span.text { font-weight: 800; }
.top .system .slider_wrap .swiper_system { margin: 3.906vw 0 0; user-select: none; }
.top .system .slider_wrap .swiper_system .thumb { width: 100%; position: relative; padding: 0 5.273vw; }
.top .system .slider_wrap .swiper_system .thumb span { display: block; height: 52.637vw; border: 0.977vw solid #ffe23f; border-radius: 2.051vw; box-shadow: 0.781vw 0.781vw 0px 0px rgba(0, 0, 0, 0.06); background: #ffe23f; }
.top .system .slider_wrap .swiper_system .thumb span img { width: 100%; height: 100%; object-fit: cover; border-radius: 2.051vw; }
.top .system .slider_wrap .swiper_system .swiper-slide { opacity: 0 !important; padding-bottom: 7.422vw; }
.top .system .slider_wrap .swiper_system .swiper-slide .text { opacity: 0; }
.top .system .slider_wrap .swiper_system .swiper-slide.swiper-slide-active { opacity: 1 !important; }
.top .system .slider_wrap .swiper_system .swiper-slide.swiper-slide-active .text { opacity: 1; }
.top .system .slider_wrap .swiper_system .swiper-slide .moviemodal { display: block; width: 100%; height: 100%; margin: 0 auto; overflow: hidden; border-radius: 2.051vw; }
.top .system .slider_wrap .swiper_system .swiper-slide .moviemodal img { display: block; width: calc(100% + 0.977vw); height: calc(100% + 0.977vw); object-fit: cover; position: absolute; left: -0.488vw; top: -0.488vw; max-width: inherit; vertical-align: baseline; }
.top .system .slider_wrap .swiper_system .swiper-slide .moviemodal i { display: block; overflow: hidden; white-space: nowrap; text-indent: 200%; width: 12.402vw; height: 12.402vw; background: url("/wp-content/themes/with/img/icon_movie.png") no-repeat center center/contain; position: absolute; left: 50%; top: 50%; margin: -6.201vw 0 0 -6.201vw; }
.top .system .slider_wrap .swiper_system .text { margin: 3.906vw 0 0; position: relative; padding: 3.906vw 6.641vw 4.395vw 23.926vw; min-height: 9.766vw; }
.top .system .slider_wrap .swiper_system .text:before { content: ""; width: 100vw; height: 100%; background: #fff; position: absolute; left: 5.664vw; top: 0; border-radius: 1.953vw 0 0 1.953vw; box-shadow: 0.83vw 0.83vw 0 0 rgba(0, 0, 0, 0.06); }
.top .system .slider_wrap .swiper_system .text .ribbon { width: 16.406vw; height: 12.988vw; background-repeat: no-repeat; background-size: contain; background-position: right top; background-image: url("/wp-content/themes/with/img/top/system/ribbon01.png"); position: absolute; left: 0; top: 0; font-size: 8.008vw; font-weight: 200; font-style: italic; font-family: "Poppins", sans-serif; color: #fff; text-align: center; padding: 0.488vw 0 0 1.465vw; position: absolute; top: 2.93vw; left: 1.563vw; }
.top .system .slider_wrap .swiper_system .text p { font-size: 3.125vw; font-weight: 700; line-height: 1.84; }
.top .system .slider_wrap .swiper_system .slide02 .text .ribbon { background-image: url("/wp-content/themes/with/img/top/system/ribbon02.png"); }
.top .system .slider_wrap .swiper_system .slide03 .text .ribbon { background-image: url("/wp-content/themes/with/img/top/system/ribbon03.png"); }
.top .system .slider_wrap .swiper_system .slide04 .text .ribbon { background-image: url("/wp-content/themes/with/img/top/system/ribbon04.png"); }
.top .system .slider_wrap .swiper_system .swiper-pagination.system { opacity: 0; position: absolute; }
.top .system .community { padding: 0 3.906vw 9.766vw; margin: 9.766vw 0 0; }
.top .system .community .wrap { background: #fff; position: relative; overflow: hidden; box-shadow: 1.172vw 1.172vw 0px 0px rgba(0, 0, 0, 0.06); border-radius: 2.148vw; border: 1.27vw solid #ffe23f; }
.top .system .community .title_bg { width: 100%; height: 21.387vw; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url("/wp-content/themes/with/img/top/system/bg.jpg"); display: flex; align-items: center; justify-content: center; padding: 1.977vw 0 0 0; }
.top .system .community .title_bg h3 { width: 79.785vw; }
.top .system .community .community_visual { margin: 4.883vw 0 0; }
.top .system .community .community_visual .box { display: flex; align-items: center; justify-content: center; position: relative; }
.top .system .community .community_visual .box:before { content: ""; width: 8.008vw; height: 8.105vw; background: url("/wp-content/themes/with/img/parts_plus.png") no-repeat center center/contain; position: absolute; left: 0; right: 0; top: 14.258vw; margin: auto; }
.top .system .community .community_visual .text01, .top .system .community .community_visual .text02 { width: 32.227vw; height: 32.031vw; background: url("/wp-content/themes/with/img/parts_circle02.png") no-repeat center center/contain; margin: 0 4.883vw; }
.top .system .community .community_visual .text03 { width: 69.727vw; margin: 2.883vw auto 0; }
.top .system .community .text { padding: 0 5.957vw 7.5vw; margin: 5.8vw 0 0; }
.top .system .community .text p { font-size: 3.125vw; font-weight: 700; line-height: 1.84; letter-spacing: -0.08em; }
.top .system .community .text .dl { margin: 3.8vw 0 0; }
.top .system .community .text .dl h3 { background: #ffe23f; font-size: 3.516vw; font-weight: 700; line-height: 1.22; letter-spacing: -0.08em; position: relative; transform: rotate(0deg); white-space: nowrap; height: 13.574vw; display: flex; align-items: center; }
.top .system .community .text .dl h3 span { display: block; position: relative; padding: 0 0 0 6.543vw; transform: rotate(0.05deg); }
.top .system .community .text .dl h3 span:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.879vw 0 0.879vw 1.855vw; border-color: transparent transparent transparent #000000; position: absolute; top: 0; bottom: 0; left: 2.344vw; margin: auto; }
.top .system .community .text .dl p { font-size: 2.734vw; font-weight: 700; line-height: 1.88; white-space: nowrap; letter-spacing: 0; margin: 1.177vw 0 0; }
.top .system .community .text .dl p a { text-decoration: underline; }
.top .system .community .text .dl p a sup { font-size: 60%; }
.top .faq { padding: 26.1vw 0 0; position: relative; z-index: 10; }
.top .faq .wrap { position: relative; }
.top .faq .wrap:before { content: ""; width: 100%; height: 100%; background: #09c8b2; position: absolute; right: 0; bottom: 0; box-shadow: 0px 1.563vw 3.711vw 0px rgba(0, 0, 0, 0.23); }
.top .faq .wrap:after { content: ""; width: 39.453vw; height: 6.641vw; background: url("/wp-content/themes/with/img/top/faq/bg_title.png") no-repeat center bottom/contain; position: absolute; left: 0; right: 0; top: -6.641vw; margin: auto; }
.top .faq .wrap .bg { position: relative; z-index: 10; position: absolute; left: 0; top: -14.16vw; pointer-events: none; }
.top .faq .wrap h2.title { width: 15.82vw; margin: -3.32vw auto 0; position: relative; z-index: 10; }
.top .faq .wrap h2.title span { display: block; transform: translate(0.977vw, -2.953vw); }
.top .faq .wrap .questions { padding: 3.543vw 2.93vw 9.473vw; position: relative; z-index: 15; }
.top .faq .wrap .questions .item { background: #cdefea; border-radius: 0.977vw; border-radius: 0.977vw; overflow: hidden; }
.top .faq .wrap .questions .item h3 { background: #fff; display: flex; cursor: pointer; user-select: none; transform: rotate(0); }
.top .faq .wrap .questions .item h3 .num { display: flex; width: 14.16vw; background: #ffe23f; font-size: 4.199vw; font-family: "Poppins", sans-serif; font-weight: 500; align-items: center; justify-content: center; transform: rotate(0.05deg); }
.top .faq .wrap .questions .item h3 .num i { display: block; }
.top .faq .wrap .questions .item h3 .num i:nth-of-type(1) { padding-right: 0.6vw; }
.top .faq .wrap .questions .item h3 .text { display: block; width: calc(100% - 14.16vw); font-size: 3.223vw; font-weight: 700; padding: 3.4vw 6.836vw 2.93vw 4.488vw; letter-spacing: -0.08em; transform: rotate(0.05deg); }
.top .faq .wrap .questions .item h3 i.icon { display: block; width: 2.93vw; height: 2.93vw; position: absolute; right: 2.246vw; top: 0; bottom: 0; margin: auto; }
.top .faq .wrap .questions .item h3 i.icon:before, .top .faq .wrap .questions .item h3 i.icon:after { content: ""; background: #06b197; position: absolute; transition: transform 0.3s; }
.top .faq .wrap .questions .item h3 i.icon:before { width: 0.391vw; height: 100%; left: 1.27vw; top: 0; }
.top .faq .wrap .questions .item h3 i.icon:after { width: 100%; height: 0.391vw; left: 0; top: 1.27vw; }
.top .faq .wrap .questions .item .answer { font-size: 2.93vw; font-weight: 700; line-height: 1.77; padding: 4.883vw 4.297vw 5.664vw 5.664vw; display: none; letter-spacing: -0.05em; transform: rotate(0.1deg); }
.top .faq .wrap .questions .item + .item { margin: 2.734vw 0 0; }
.top .faq .wrap .questions .item.active .answer { display: block; }
.top .faq .wrap .questions .item.active i.icon:before { transform: rotate(90deg); }
.top .product { position: relative; background-image: url("/wp-content/themes/with/img/top/product/bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left bottom; position: relative; z-index: 5; padding: 15.137vw 0 14.648vw; }
.top .product .bg { width: 100%; height: 100%; position: absolute; left: 0; top: 8.301vw; pointer-events: none; }
.top .product h2.title { width: 48.438vw; margin: 0 auto; }
.top .product .img { width: 50.684vw; margin: 7.715vw auto 0; }
.top .product dl { padding: 0 20.117vw; display: flex; flex-wrap: wrap; align-items: flex-start; margin: 8.203vw 0 0; }
.top .product dl dt { width: 18.848vw; min-height: 4.395vw; background: #ffe23f; font-size: 2.148vw; line-height: 1; font-weight: 700; border-radius: 0.488vw; padding: 1.1vw 0 0.391vw 0.488vw; transform: rotate(0.05deg); }
.top .product dl dt:nth-of-type(n + 2) { margin-top: 1.465vw; }
.top .product dl dd { width: calc(100% - 18.848vw); font-size: 2.734vw; font-weight: 700; line-height: 1.5; padding: 0 0 0 2.637vw; white-space: nowrap; transform: rotate(0.05deg); letter-spacing: -0.055em; padding-top: 0.195vw; }
.top .product dl dd small { font-size: 2.051vw; }
.top .product dl dd:nth-of-type(n + 2) { margin-top: 1.465vw; }
.top .product .btn_order_square + .btn_order_square { margin-top: 2.734vw; }
.top footer:before { width: 100%; height: 56.152vw; background-image: url("/wp-content/themes/with/img/footer_character_toppage.png"); }

.bnr_beginner { display: block; width: 41.016vw; }

.kv .visual .bnr_beginner { position: absolute; right: 2.246vw; bottom: 20vw; width: 34.18vw; }

.bnr_beginner_fix { position: fixed; right: 2.246vw; bottom: 4.98vw; z-index: 100; transition: opacity 0.3s; }
.bnr_beginner_fix.off { opacity: 0; pointer-events: none; }
.bnr_beginner_fix img { transition: filter 0.3s; }

.btn_out footer .btn_order_fix { opacity: 0; pointer-events: none; }
.btn_out footer .bnr_beginner { opacity: 0; pointer-events: none; }

@media screen and (max-width: 1024px) { .animated .btn_order_fix { opacity: 0; pointer-events: none; } }
@media screen and (min-width: 1025px) { #sitemenu .menu_btn { pointer-events: none; }
  #sitemenu .menu_btn.fixed { pointer-events: auto; }
  .top .kv { height: 793.75px; background-size: 59.375px 59.375px; padding: 0; z-index: 11; }
  .top .kv .wrap { width: 100%; height: 100%; padding: 0; }
  .top .kv:before { width: 100%; height: 41.25px; }
  .top .kv h1 { width: 218.75px; height: 218.75px; left: 18.75px; top: 18.75px; }
  .top .kv .menu_layout { display: block; padding: 273.125px 0 0; }
  .top .kv .menu_layout li { height: 36.875px; line-height: 36.875px; }
  .top .kv .menu_layout li a { font-size: 17.5px; padding: 2.5px 0 0 26.25px; }
  .top .kv .menu_layout li:before { width: 10px; height: 100%; }
  .top .kv .menu_layout li:nth-child(6n + 1):before { background: #ffe23f; }
  .top .kv .menu_layout li:nth-child(6n + 2):before { background: #06b197; }
  .top .kv .menu_layout li:nth-child(6n + 3):before { background: #f44336; }
  .top .kv .menu_layout li:nth-child(6n + 4):before { background: #ff9100; }
  .top .kv .menu_layout li:nth-child(6n + 5):before { background: #3d5afe; }
  .top .kv .menu_layout li:nth-child(6n + 6):before { background: #03a9f4; }
  .top .kv .visual { width: calc(100% - 256.25px); height: 775.625px; position: absolute; right: 0; top: auto; bottom: auto; top: 18.125px; border-radius: 15.625px 0 0 15.625px; overflow: hidden; }
  .top .kv .visual .cs_logos { position: absolute; right: 0; top: 0; }
  .top .kv .visual .cs_logos .ps { width: 214.375px; top: 16.875px; right: 77.5px; }
  .top .kv .visual .cs_logos .switch { width: 55.625px; }
  .top .kv .visual .btn_order_circle { position: absolute; width: 165px; height: 165px; top: 150px; bottom: auto; left: 31.25px; right: auto; padding: 58.125px 0 0; }
  .top .kv .visual .btn_order_circle img { width: 126.875px; }
  .top .kv .visual .catch { width: 411.25px; height: 96.875px; top: 23.125px; }
  .top .kv .visual .catch span { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
  .top .kv .visual .catch span img { width: 411.25px; }
  .top .kv .visual .release { width: 138.75px; position: absolute; left: auto; right: 0; top: 78.75px; bottom: auto; }
  .top .kv .btn_x { bottom: 1.25px; width: 223.75px; height: 71.875px; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; background: url("/wp-content/themes/with/img/btn_x_bg@pc.png") no-repeat right top/100% auto; }
  .top .kv .btn_x i { width: 20px; top: 26.875px; left: 25.625px; transition: opacity 0.3s; }
  .top .kv .btn_x span { font-size: 13.125px; top: 31.25px; left: 56.25px; transition: opacity 0.3s; }
  .top .kv .btn_x:hover i, .top .kv .btn_x:hover span { opacity: 0.7; }
  .top .kv .swiper-kv { bottom: 41.25px; right: auto; left: 365px; width: auto; padding: 0; }
  .top .kv .swiper-kv .swiper-slide { width: 200px; height: 112.5px; padding: 0; }
  .top .kv .swiper-kv .swiper-slide + .swiper-slide { margin-left: 6.25px; }
  .top .kv .swiper-kv .swiper-slide a { border-radius: 6.25px; }
  .top .kv .swiper-kv .swiper-slide a:before { border: 1.875px solid #ff9100; border-radius: 6.25px; }
  .top .kv .swiper-kv .swiper-slide a .text { height: 26.25px; padding: 8.75px 13.125px 0 10px; }
  .top .kv .swiper-kv .swiper-slide a .text span { height: 10px; }
  .top .kv .swiper-kv .swiper-slide a .text:before { border-width: 26.25px 0 0 15px; right: -13.75px; }
  .top .kv .swiper-kv .swiper-slide.slide02 a:before { border: 1.875px solid #06b197; }
  .top .kv .swiper-kv .swiper-slide.slide03 a:before { border: 1.875px solid #03a9f4; }
  .top .kv .swiper-kv .swiper-slide.slide04 a:before { border: 1.875px solid #caa600; }
  .top .kv .swiper-kv .swiper-pagination { display: none; }
  .top .swiper-kv .swiper-slide span.thumb { transition: transform 0.3s; }
  .top .swiper-kv .swiper-slide:hover span.thumb { transform: scale(1.1); }
  .top h2.title img { width: 100%; }
  .top .news { position: relative; padding: 0 0 0; margin: -3.125px 0 0; z-index: 10; box-shadow: 0px 10px 23.75px 0px rgba(0, 0, 0, 0.23); }
  .top .news h2.title { width: 38.75px; margin: 0 0 0 40px; position: absolute; top: 46.875px; left: 0; }
  .top .news .btn_more { width: 38.75px; height: 181.875px; background: none; position: absolute; right: 0; top: 0; padding: 27.5px 8.5px 0 0; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
  .top .news .btn_more:before { content: ""; width: 100%; height: 100%; background: url("/wp-content/themes/with/img/btn_more@pc.png") no-repeat right top/100% 100%; position: absolute; left: 0; top: 0; }
  .top .news .btn_more span { font-size: 15.625px; display: inline-block; }
  .top .news .btn_more span:before { border-width: 7.5px 4.375px 0 4.375px; border-color: #fff transparent transparent transparent; position: absolute; left: 6.25px; top: auto; bottom: -16.875px; }
  .top .news .btn_more:hover { opacity: 0.7; }
  .top .news .archives { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 0 0 33.125px 120.625px; }
  .top .news .archives .item { width: 226.25px; display: block; margin: 45px 0 0; }
  .top .news .archives .item + .item { margin-left: 33.125px; }
  .top .news .archives .item .thumb { height: 128.125px; box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.06); border-radius: 6.25px; }
  .top .news .archives .item .thumb span { transition: transform 0.3s; }
  .top .news .archives .item .top { margin: 12.5px 0 0; }
  .top .news .archives .item .date { letter-spacing: 0.04em; font-size: 10.625px; padding-top: 1.875px; padding-left: 2.5px; }
  .top .news .archives .item .category { font-size: 11.25px; padding: 2.5px 6.25px 0; letter-spacing: -0.06em; }
  .top .news .archives .item .title { font-size: 12.5px; line-height: 1.45; margin: 5px 0 0; padding-left: 2.5px; }
  .top .news .archives .item .text { transition: opacity 0.3s; }
  .top .news .archives .item:hover .thumb span { transform: scale(1.1); }
  .top .news .archives .item:hover .text { opacity: 0.7; }
  .top .about { z-index: 5; }
  .top .about:before { width: 100%; height: 696.25px; background-image: url("/wp-content/themes/with/img/top/about/bg_parts01@pc.png"); top: 0; right: 0; background-size: 100% auto; }
  .top .about h2.title { width: 72.5px; position: absolute; right: 0; top: 25px; }
  .top .about .box01 { padding: 91.25px 0 326.875px 71.25px; position: relative; z-index: 5; }
  .top .about .box01 .catch { width: 630.625px; }
  .top .about .box01 .text { margin: 33.75px 0 0; width: 481.25px; }
  .top .about .box01 .text p { font-size: 20px; letter-spacing: -0.02em; }
  .top .about .box01 .visual { width: 724.375px; height: auto; position: absolute; right: 56.25px; top: 65.625px; margin: 0; }
  .top .about .box01 .visual .img02 { width: 100%; position: absolute; left: 0; top: 0; }
  .top .about .box01 .slide { height: 262.5px; dfilter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.32)); }
  .top .about .box01 .slide .img { width: 1433.125px; }
  .top .about .box01 .slide .img img { width: 1566.25px; }
  .top .about .box01 .slide .img:first-child { animation: loop 50s -25s linear infinite; }
  .top .about .box01 .slide .img:last-child { animation: loop2 50s linear infinite; }
  .top .about .box02 { padding: 103.75px 0 12.5px; position: relative; }
  .top .about .box02:before, .top .about .box02:after { content: ""; width: 117.5px; height: 584.375px; background-repeat: no-repeat; background-size: cover; position: absolute; top: 16.875px; z-index: 1; }
  .top .about .box02:before { left: 0; background-image: url("/wp-content/themes/with/img/top/about/bg_parts-set_left.png"); background-position: left top; }
  .top .about .box02:after { right: 0; background-image: url("/wp-content/themes/with/img/top/about/bg_parts-set_right.png"); background-position: right top; }
  .top .about .box02 .wrap { padding-left: 556.25px; position: relative; z-index: 10; }
  .top .about .box02 .catch { width: 389.375px; margin: 0 0 0 84.375px; position: relative; z-index: 10; }
  .top .about .box02 .catch_ribbon { padding: 18.75px 0 0 83.75px; height: 60.625px; margin: 20.625px 0 0; position: relative; z-index: 10; }
  .top .about .box02 .catch_ribbon i { width: 29.375px; height: 55px; left: 42.5px; bottom: 11.875px; }
  .top .about .box02 .catch_ribbon span { width: 406.25px; }
  .top .about .box02 .catch_ribbon:before { width: 1250px; height: 60.625px; position: absolute; left: 0; bottom: 0; transform: skewX(-33deg); box-shadow: 5.313px 5.313px 0 0 rgba(0, 0, 0, 0.06); transform-origin: left bottom; }
  .top .about .box02 .text { padding: 21.875px 162.5px 0px 82.5px; }
  .top .about .box02 .text p { font-size: 18.125px; line-height: 2.03; letter-spacing: -0.02em; }
  .top .about .box02 .visual01 { position: absolute; left: -46.875px; top: -56.25px; z-index: 10; }
  .top .about .box02 .visual01 .img03 { width: 541.875px; position: absolute; left: 25px; top: 93.75px; }
  .top .about .box02 .visual01 .img04 { width: 309.375px; position: absolute; right: auto; left: 396.875px; top: 284.375px; }
  .top .about .box02 .visual01 .img05 { width: 140.625px; left: 275.625px; top: 391.875px; }
  .top .about .box02 .visual02 { margin: 90.625px 0 0; position: relative; z-index: 10; }
  .top .about .box02 .visual02 .img07 { width: 193.125px; top: 15px; left: 395px; }
  .top .system { position: relative; margin-top: 0; }
  .top .system h2.title { width: 334.375px; margin-left: 52.5px; padding: 29.375px 0 0; }
  .top .system .wrap { position: relative; z-index: 10; }
  .top .system .wrap .visual { width: 448.125px; position: absolute; right: auto; left: 0; top: 363.125px; }
  .top .system .wrap .visual img { width: 100%; }
  .top .system .slider_wrap:before { height: calc(100% - 163.75px); background-size: 18.75px 18.75px; box-shadow: 5.313px 5.313px 0 0 rgba(0, 0, 0, 0.06); }
  .top .system .slider_wrap .swiper.btns { padding: 29.375px 0 22.5px 52.5px; position: relative; z-index: 999; pointer-events: none; }
  .top .system .slider_wrap .swiper.btns .swiper-wrapper { display: block; }
  .top .system .slider_wrap .swiper.btns .swiper-slide { width: 343.125px !important; height: 45px; border-radius: 6.25px; box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.06); display: block; overflow: inherit; pointer-events: auto !important; }
  .top .system .slider_wrap .swiper.btns .swiper-slide .inner { background: #ffe23f; border-radius: 6.25px; padding: 0 0 0 26.25px; transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .system .slider_wrap .swiper.btns .swiper-slide .inner:before { width: 9.375px; border-radius: 6.25px 0 0 6.25px; }
  .top .system .slider_wrap .swiper.btns .swiper-slide:before { width: 9.375px; }
  .top .system .slider_wrap .swiper.btns .swiper-slide p { display: flex; align-items: center; padding: 3.125px 0 0; }
  .top .system .slider_wrap .swiper.btns .swiper-slide span.num { padding: 0 0 0; font-size: 26.25px; transform: translateY(0); }
  .top .system .slider_wrap .swiper.btns .swiper-slide span.text { font-size: 19.375px; padding-left: 10px; }
  .top .system .slider_wrap .swiper.btns .swiper-slide + .swiper-slide { margin: 11.875px 0 0; }
  .top .system .slider_wrap .swiper.btns .swiper-slide:hover .inner { transform: translate(5px, 5px); }
  .top .system .slider_wrap .swiper_system { margin: -362.5px 0 0; }
  .top .system .slider_wrap .swiper_system .thumb { padding: 0 0 0 456.875px; height: 420.625px; position: relative; z-index: 10; }
  .top .system .slider_wrap .swiper_system .thumb span { display: block; width: 718.75px; height: 100%; border: 8.125px solid #ffe23f; border-radius: 13.125px; box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.06); }
  .top .system .slider_wrap .swiper_system .thumb span img { border-radius: 5px; }
  .top .system .slider_wrap .swiper_system .swiper-slide { opacity: 0; padding-bottom: 171.875px; }
  .top .system .slider_wrap .swiper_system .swiper-slide .text { opacity: 0; }
  .top .system .slider_wrap .swiper_system .swiper-slide.swiper-slide-active { opacity: 1; }
  .top .system .slider_wrap .swiper_system .swiper-slide.swiper-slide-active .text { opacity: 1; }
  .top .system .slider_wrap .swiper_system .swiper-slide .moviemodal { border-radius: 5px; }
  .top .system .slider_wrap .swiper_system .swiper-slide .moviemodal img { display: block; width: calc(100% + 6.25px); height: calc(100% + 6.25px); object-fit: cover; position: absolute; left: -3.125px; top: -3.125px; transform-origin: center center; transition: transform 0.3s; max-width: inherit; }
  .top .system .slider_wrap .swiper_system .swiper-slide .moviemodal i { display: block; overflow: hidden; white-space: nowrap; text-indent: 200%; width: 107.5px; height: 107.5px; margin: -53.75px 0 0 -53.75px; }
  .top .system .slider_wrap .swiper_system .swiper-slide .moviemodal:hover img { transform: scale(1.05); }
  .top .system .slider_wrap .swiper_system .text { margin: -39.375px 0 0; padding: 68.75px 47.5px 37.5px 476.25px; min-height: 218.75px; }
  .top .system .slider_wrap .swiper_system .text:before { width: 100vw; min-width: 500px; left: 403.75px; top: 0px; border-radius: 12.5px 0 0 12.5px; box-shadow: 5.313px 5.313px 0 0 rgba(0, 0, 0, 0.06); }
  .top .system .slider_wrap .swiper_system .text .ribbon { width: 119.375px; height: 94.375px; font-size: 58.75px; padding: 0.488vw 0 0 9.375px; position: absolute; top: 75.625px; left: 328.125px; }
  .top .system .slider_wrap .swiper_system .text p { font-size: 20px; }
  .top .system .community { padding: 0 66.25px 66.25px; margin: -78.125px 0 0; }
  .top .system .community .wrap { border-radius: 6.25px; overflow: inherit; box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.06); position: relative; border-radius: 13.125px; border: 8.125px solid #ffe23f; }
  .top .system .community .title_bg { height: 136.875px; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url("/wp-content/themes/with/img/top/system/bg@pc.jpg"); padding: 6.25px 0 0 44.375px; justify-content: flex-start; overflow: hidden; border-radius: 6.25px 6.25px 0 0; }
  .top .system .community .title_bg h3 { width: 521.875px; }
  .top .system .community .title_bg h3 img { width: 100%; }
  .top .system .community .community_visual { margin: 0; position: absolute; right: -14.375px; top: 98.125px; }
  .top .system .community .community_visual .box:before { width: 51.25px; height: 51.875px; top: 91.25px; }
  .top .system .community .community_visual img { width: 100%; }
  .top .system .community .community_visual .text01, .top .system .community .community_visual .text02 { width: 206.25px; height: 205px; margin: 0; }
  .top .system .community .community_visual .text01 { margin-right: 32.813px; }
  .top .system .community .community_visual .text02 { margin-left: 32.813px; }
  .top .system .community .community_visual .text03 { width: 327.5px; margin: 21.875px auto 0; }
  .top .system .community .community_visual .text03 img { transform: translateX(-6.25px); }
  .top .system .community .text { padding: 0 512.5px 26.25px 49.375px; margin: 21.25px 0 0; }
  .top .system .community .text p { font-size: 16.25px; line-height: 1.77; letter-spacing: -0.04em; }
  .top .system .community .text .dl { margin: 12.5px 0 0; }
  .top .system .community .text .dl > a { transition: opacity 0.3s; }
  .top .system .community .text .dl > a:hover { opacity: 0.7; }
  .top .system .community .text .dl h3 { font-size: 16.875px; padding: 0; letter-spacing: -0.04em; position: relative; width: 358.75px; height: 63.75px; }
  .top .system .community .text .dl h3 span { padding: 0 0 0 28.125px; }
  .top .system .community .text .dl h3 span:before { border-width: 4.063px 0 4.063px 8.75px; left: 8.75px; }
  .top .system .community .text .dl p { font-size: 16.25px; margin: 6.25px 0 0; }
  .top .system .community .text .dl p a { text-decoration: underline; }
  .top .system .community .text .dl p a:hover { text-decoration: none; }
  .top .faq { padding: 105px 0 0; min-height: 375px; }
  .top .faq .wrap:before { box-shadow: 0px 1.563vw 3.711vw 0px rgba(0, 0, 0, 0.23); }
  .top .faq .wrap:after { width: 252.5px; height: 42.5px; top: -41.25px; }
  .top .faq .wrap .bg { width: 100%; position: absolute; left: 0; top: 6.25px; }
  .top .faq .wrap .bg img { width: 100%; }
  .top .faq .wrap h2.title { width: 101.25px; margin: 0 auto 0; }
  .top .faq .wrap h2.title span { display: block; transform: translate(6.25px, -18.75px); }
  .top .faq .wrap .questions { padding: 8.125px 256.25px 50px; position: relative; z-index: 15; min-height: 487.5px; }
  .top .faq .wrap .questions .item { background: #cdefea; border-radius: 6.25px; border-radius: 6.25px; overflow: hidden; }
  .top .faq .wrap .questions .item h3 { position: relative; transition: opacity 0.3s; }
  .top .faq .wrap .questions .item h3 .num { width: 60.625px; font-size: 18.125px; padding: 3.125px 0 0; }
  .top .faq .wrap .questions .item h3 .num i { display: block; }
  .top .faq .wrap .questions .item h3 .num i:nth-of-type(1) { padding-right: 3.125px; }
  .top .faq .wrap .questions .item h3 .text { width: calc(100% - 60.625px); font-size: 13.75px; padding: 13.125px 62.5px 10.625px 20px; transform: rotate(0.1deg); }
  .top .faq .wrap .questions .item h3 i.icon { width: 18.75px; height: 18.75px; right: 14.375px; }
  .top .faq .wrap .questions .item h3 i.icon:before { width: 2.5px; left: 8.125px; }
  .top .faq .wrap .questions .item h3 i.icon:after { height: 2.5px; left: 0; top: 8.125px; }
  .top .faq .wrap .questions .item h3:hover { opacity: 0.7; }
  .top .faq .wrap .questions .item .answer { font-size: 11.875px; padding: 16.875px 22.5px 25px 23.75px; line-height: 2.01; }
  .top .faq .wrap .questions .item + .item { margin: 12.5px 0 0; }
  .top .faq .wrap .questions .item.active i.icon:before { transform: rotate(90deg); }
  .top .product { background-image: url("/wp-content/themes/with/img/top/product/bg@pc.jpg"); padding: 60.625px 0 93.75px; min-height: 523.75px; }
  .top .product .bg { width: 481.25px; height: 100%; position: absolute; left: 678.125px; right: auto; top: 56.25px; }
  .top .product .bg img { width: 100%; }
  .top .product h2.title { font-size: 55px; text-align: left; padding: 0 0 0 345px; width: auto; margin: 1.25px 0 0; }
  .top .product h2.title img { width: 244.375px; }
  .top .product .img { width: 273.125px; margin: 0; position: absolute; left: 50px; top: 61.25px; }
  .top .product dl { padding: 0 0 0 343.125px; margin: 35.625px 0 0; }
  .top .product dl dt { width: 110.625px; font-size: 9.375px; border-radius: 3.125px; padding: 5.625px 0 0 3.125px; min-height: 19.375px; }
  .top .product dl dt:nth-of-type(n + 2) { margin-top: 6.875px; }
  .top .product dl dd { width: calc(100% - 110.625px); font-size: 11.875px; padding: 1.875px 0 0 18.125px; }
  .top .product dl dd small { font-size: 9.375px; }
  .top .product dl dd:nth-of-type(n + 2) { margin-top: 6.875px; }
  .top .product .btn_order_square { margin: 50.625px 0 0 50px; }
  .top .product .btn_order_square:before { width: 12.5px; }
  .top .product .btn_order_square img { width: 258.75px; }
  .top .product .btn_order_square + .btn_order_square { margin-top: 12.5px; }
  .top footer:before { width: 100%; height: 549.375px; background-image: url("/wp-content/themes/with/img/footer_character_toppage@pc.png"); }
  .bnr_beginner { width: 219.375px; }
  .bnr_beginner img { transition: filter 0.3s; }
  .bnr_beginner:hover img { filter: brightness(1.1); }
  .kv .visual .bnr_beginner { right: 14.375px; bottom: 329.375px; width: 218.75px; display: none; }
  .bnr_beginner_fix { position: fixed; width: 219.375px; right: 15px; bottom: 31.875px; } }
@media screen and (min-width: 1201px) { .top .kv { height: 66.146vw; background-size: 4.948vw 4.948vw; padding: 0; z-index: 11; }
  .top .kv .wrap { width: 100%; height: 100%; padding: 0; }
  .top .kv:before { width: 100%; height: 3.438vw; }
  .top .kv h1 { width: 18.229vw; height: 18.229vw; left: 1.563vw; top: 1.563vw; }
  .top .kv .menu_layout { display: block; padding: 22.76vw 0 0; }
  .top .kv .menu_layout li { height: 3.073vw; line-height: 3.073vw; }
  .top .kv .menu_layout li a { font-size: 1.458vw; padding: 0.208vw 0 0 2.188vw; }
  .top .kv .menu_layout li:before { width: 0.833vw; height: 100%; }
  .top .kv .visual { width: calc(100% - 21.354vw); height: 64.635vw; top: 1.51vw; border-radius: 1.302vw 0 0 1.302vw; }
  .top .kv .visual .cs_logos { position: absolute; right: 0; top: 0; }
  .top .kv .visual .cs_logos .ps { width: 17.865vw; top: 1.406vw; right: 6.458vw; }
  .top .kv .visual .cs_logos .switch { width: 4.635vw; }
  .top .kv .visual .btn_order_circle { width: 13.75vw; height: 13.75vw; top: 12.5vw; bottom: auto; left: 2.604vw; right: auto; padding: 4.844vw 0 0; }
  .top .kv .visual .btn_order_circle img { width: 10.573vw; }
  .top .kv .visual .catch { width: 34.271vw; height: 8.073vw; top: 1.927vw; }
  .top .kv .visual .catch span { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
  .top .kv .visual .catch span img { width: 34.271vw; }
  .top .kv .visual .release { width: 11.563vw; top: 6.563vw; right: 0; left: auto; }
  .top .kv .btn_x { bottom: 0.104vw; width: 18.646vw; height: 5.99vw; -ms-writing-mode: horizontal-tb; writing-mode: horizontal-tb; background: url("/wp-content/themes/with/img/btn_x_bg@pc.png") no-repeat right top/100% auto; }
  .top .kv .btn_x i { width: 1.667vw; top: 2.24vw; left: 2.135vw; }
  .top .kv .btn_x span { font-size: 1.094vw; top: 2.604vw; left: 4.688vw; }
  .top .kv .swiper-kv { bottom: 3.438vw; left: 30.417vw; }
  .top .kv .swiper-kv .swiper-slide { width: 16.667vw; height: 9.375vw; padding: 0; }
  .top .kv .swiper-kv .swiper-slide + .swiper-slide { margin-left: 0.521vw; }
  .top .kv .swiper-kv .swiper-slide a { border-radius: 0.521vw; }
  .top .kv .swiper-kv .swiper-slide a:before { border: 0.156vw solid #ff9100; border-radius: 0.521vw; }
  .top .kv .swiper-kv .swiper-slide a .text { height: 2.188vw; padding: 0.729vw 1.094vw 0 0.833vw; }
  .top .kv .swiper-kv .swiper-slide a .text span { height: 0.833vw; }
  .top .kv .swiper-kv .swiper-slide a .text:before { border-width: 2.188vw 0 0 1.25vw; right: -1.172vw; }
  .top .kv .swiper-kv .swiper-slide.slide02 a:before { border: 0.156vw solid #06b197; }
  .top .kv .swiper-kv .swiper-slide.slide03 a:before { border: 0.156vw solid #03a9f4; }
  .top .kv .swiper-kv .swiper-slide.slide04 a:before { border: 0.156vw solid #caa600; }
  .top .kv .swiper-kv .swiper-pagination { display: none; }
  .top .news { position: relative; padding: 0 0 0; margin: -0.26vw 0 0; z-index: 10; box-shadow: 0px 0.833vw 1.979vw 0px rgba(0, 0, 0, 0.23); }
  .top .news h2.title { width: 3.229vw; margin: 0 0 0 3.333vw; top: 3.906vw; }
  .top .news .btn_more { width: 3.229vw; height: 15.156vw; background: none; position: absolute; right: 0; top: 0; padding: 2.292vw 1.042vw 0 0; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
  .top .news .btn_more:before { content: ""; width: 100%; height: 100%; background: url("/wp-content/themes/with/img/btn_more@pc.png") no-repeat right top/100% 100%; position: absolute; left: 0; top: 0; }
  .top .news .btn_more span { font-size: 1.302vw; display: inline-block; }
  .top .news .btn_more span:before { border-width: 0.625vw 0.365vw 0 0.365vw; border-color: #fff transparent transparent transparent; position: absolute; left: 0.521vw; top: auto; bottom: -1.406vw; }
  .top .news .archives { display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 0 0 2.76vw 10.052vw; }
  .top .news .archives .item { width: 18.854vw; display: block; margin: 3.75vw 0 0; }
  .top .news .archives .item + .item { margin-left: 2.76vw; }
  .top .news .archives .item .thumb { height: 10.677vw; box-shadow: 0.417vw 0.417vw 0px 0px rgba(0, 0, 0, 0.06); border-radius: 0.521vw; }
  .top .news .archives .item .top { margin: 1.042vw 0 0; }
  .top .news .archives .item .date { letter-spacing: 0.04em; font-size: 0.885vw; padding-top: 0.156vw; padding-left: 0.208vw; }
  .top .news .archives .item .category { font-size: 0.938vw; padding: 0.208vw 0.521vw 0; }
  .top .news .archives .item .title { font-size: 1.042vw; line-height: 1.45; margin: 0.417vw 0 0; padding-left: 0.208vw; }
  .top .about { z-index: 5; }
  .top .about:before { width: 100%; height: 58.021vw; background-image: url("/wp-content/themes/with/img/top/about/bg_parts01@pc.png"); top: 0; right: 0; background-size: 100% auto; }
  .top .about h2.title { width: 6.042vw; top: 2.083vw; }
  .top .about .box01 { padding: 7.604vw 0 27.24vw 5.938vw; position: relative; z-index: 5; }
  .top .about .box01 .catch { width: 52.552vw; }
  .top .about .box01 .text { margin: 2.813vw 0 0; width: 40.104vw; }
  .top .about .box01 .text p { font-size: 1.667vw; letter-spacing: -0.02em; }
  .top .about .box01 .visual { width: 60.365vw; height: auto; position: absolute; right: 4.688vw; top: 5.469vw; margin: 0; }
  .top .about .box01 .visual img { width: 100%; }
  .top .about .box01 .visual .img02 { width: 100%; position: absolute; left: 0; top: 0; }
  .top .about .box01 .slide { height: 21.875vw; dfilter: drop-shadow(0px 0px 0.833vw rgba(0, 0, 0, 0.32)); }
  .top .about .box01 .slide .img { width: 119.427vw; }
  .top .about .box01 .slide .img img { width: 130.521vw; }
  .top .about .box01 .slide .img:first-child { animation: loop 50s -25s linear infinite; }
  .top .about .box01 .slide .img:last-child { animation: loop2 50s linear infinite; }
  .top .about .box02 { padding: 8.646vw 0 1.042vw; position: relative; }
  .top .about .box02:before, .top .about .box02:after { content: ""; width: 9.792vw; height: 48.698vw; background-repeat: no-repeat; background-size: cover; position: absolute; top: 1.406vw; }
  .top .about .box02 .wrap { padding-left: 46.354vw; }
  .top .about .box02 .catch { width: 32.448vw; margin: 0 0 0 7.031vw; position: relative; z-index: 10; }
  .top .about .box02 .catch_ribbon { padding: 1.563vw 0 0 6.979vw; height: 5.052vw; margin: 1.719vw 0 0; position: relative; z-index: 10; }
  .top .about .box02 .catch_ribbon i { width: 2.448vw; height: 4.583vw; left: 3.542vw; bottom: 0.99vw; }
  .top .about .box02 .catch_ribbon span { width: 33.854vw; }
  .top .about .box02 .catch_ribbon:before { width: 104.167vw; height: 5.052vw; position: absolute; left: 0; bottom: 0; box-shadow: 0.443vw 0.443vw 0 0 rgba(0, 0, 0, 0.06); transform-origin: left bottom; }
  .top .about .box02 .text { padding: 1.823vw 13.542vw 0vw 6.875vw; }
  .top .about .box02 .text p { font-size: 1.51vw; line-height: 2.03; }
  .top .about .box02 .visual01 { position: absolute; left: -3.906vw; top: -4.688vw; z-index: 10; }
  .top .about .box02 .visual01 img { width: 100%; }
  .top .about .box02 .visual01 .img03 { width: 45.156vw; position: absolute; left: 2.083vw; top: 7.813vw; }
  .top .about .box02 .visual01 .img04 { width: 25.781vw; position: absolute; right: auto; left: 33.073vw; top: 23.698vw; }
  .top .about .box02 .visual01 .img05 { width: 11.719vw; left: 22.969vw; top: 32.656vw; }
  .top .about .box02 .visual02 { margin: 7.552vw 0 0; }
  .top .about .box02 .visual02 img { width: 100%; }
  .top .about .box02 .visual02 .img07 { width: 16.094vw; top: 1.25vw; left: 32.917vw; }
  .top .system h2.title { width: 27.865vw; margin-left: 4.375vw; padding: 2.448vw 0 0; }
  .top .system .wrap { position: relative; z-index: 10; }
  .top .system .wrap .visual { width: 37.344vw; position: absolute; right: auto; left: 0; top: 30.26vw; }
  .top .system .slider_wrap:before { height: calc(100% - 13.646vw); background-size: 1.563vw 1.563vw; box-shadow: 0.443vw 0.443vw 0 0 rgba(0, 0, 0, 0.06); }
  .top .system .slider_wrap .swiper.btns { padding: 2.448vw 0 1.875vw 4.375vw; position: relative; z-index: 999; }
  .top .system .slider_wrap .swiper.btns .swiper-wrapper { display: block; }
  .top .system .slider_wrap .swiper.btns .swiper-slide { width: 28.594vw !important; height: 3.75vw; border-radius: 0.521vw; box-shadow: 0.417vw 0.417vw 0px 0px rgba(0, 0, 0, 0.06); display: block; }
  .top .system .slider_wrap .swiper.btns .swiper-slide .inner { border-radius: 0.521vw; padding: 0 0 0 2.188vw; }
  .top .system .slider_wrap .swiper.btns .swiper-slide .inner:before { width: 0.781vw; border-radius: 0.521vw 0 0 0.521vw; }
  .top .system .slider_wrap .swiper.btns .swiper-slide p { display: flex; align-items: center; padding: 0.26vw 0 0; }
  .top .system .slider_wrap .swiper.btns .swiper-slide span.num { padding: 0 0 0; font-size: 2.188vw; transform: translateY(0); }
  .top .system .slider_wrap .swiper.btns .swiper-slide span.text { font-size: 1.615vw; padding-left: 0.833vw; }
  .top .system .slider_wrap .swiper.btns .swiper-slide + .swiper-slide { margin: 0.99vw 0 0; }
  .top .system .slider_wrap .swiper.btns .swiper-slide:hover .inner { transform: translate(5px, 5px); }
  .top .system .slider_wrap .swiper_system { margin: -30.208vw 0 0; }
  .top .system .slider_wrap .swiper_system .thumb { padding: 0 0 0 38.073vw; height: 35.052vw; position: relative; z-index: 10; }
  .top .system .slider_wrap .swiper_system .thumb span { display: block; width: 59.896vw; height: 100%; border: 0.677vw solid #ffe23f; border-radius: 1.094vw; box-shadow: 0.417vw 0.417vw 0px 0px rgba(0, 0, 0, 0.06); }
  .top .system .slider_wrap .swiper_system .thumb span img { border-radius: 0.417vw; }
  .top .system .slider_wrap .swiper_system .swiper-slide { opacity: 0; padding-bottom: 14.323vw; }
  .top .system .slider_wrap .swiper_system .swiper-slide .text { opacity: 0; }
  .top .system .slider_wrap .swiper_system .swiper-slide.swiper-slide-active { opacity: 1; }
  .top .system .slider_wrap .swiper_system .swiper-slide.swiper-slide-active .text { opacity: 1; }
  .top .system .slider_wrap .swiper_system .swiper-slide .moviemodal { border-radius: 0.417vw; }
  .top .system .slider_wrap .swiper_system .swiper-slide .moviemodal img { width: calc(100% + 0.521vw); height: calc(100% + 0.521vw); left: -0.26vw; top: -0.26vw; }
  .top .system .slider_wrap .swiper_system .swiper-slide .moviemodal i { width: 8.958vw; height: 8.958vw; margin: -4.479vw 0 0 -4.479vw; }
  .top .system .slider_wrap .swiper_system .text { margin: -3.281vw 0 0; padding: 5.729vw 3.958vw 3.125vw 39.688vw; min-height: 18.229vw; }
  .top .system .slider_wrap .swiper_system .text:before { width: 100vw; min-width: 500px; left: 33.646vw; top: 0vw; border-radius: 1.042vw 0 0 1.042vw; box-shadow: 0.443vw 0.443vw 0 0 rgba(0, 0, 0, 0.06); }
  .top .system .slider_wrap .swiper_system .text .ribbon { width: 9.948vw; height: 7.865vw; font-size: 4.896vw; padding: 0.488vw 0 0 0.781vw; position: absolute; top: 6.302vw; left: 27.344vw; }
  .top .system .slider_wrap .swiper_system .text p { font-size: 1.667vw; }
  .top .system .community { padding: 0 5.521vw 5.521vw; margin: -6.51vw 0 0; }
  .top .system .community .wrap { border-radius: 0.521vw; overflow: inherit; box-shadow: 0.417vw 0.417vw 0px 0px rgba(0, 0, 0, 0.06); position: relative; border-radius: 1.094vw; border: 0.677vw solid #ffe23f; }
  .top .system .community .title_bg { height: 11.406vw; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url("/wp-content/themes/with/img/top/system/bg@pc.jpg"); padding: 0.521vw 0 0 3.698vw; justify-content: flex-start; border-radius: 0.521vw 0.521vw 0 0; }
  .top .system .community .title_bg h3 { width: 43.49vw; }
  .top .system .community .community_visual { margin: 0; position: absolute; right: -1.198vw; top: 8.177vw; }
  .top .system .community .community_visual .box:before { width: 4.271vw; height: 4.323vw; top: 7.604vw; }
  .top .system .community .community_visual .text01, .top .system .community .community_visual .text02 { width: 17.188vw; height: 17.083vw; margin: 0; }
  .top .system .community .community_visual .text01 { margin-right: 2.734vw; }
  .top .system .community .community_visual .text02 { margin-left: 2.734vw; }
  .top .system .community .community_visual .text03 { width: 27.292vw; margin: 1.823vw auto 0; }
  .top .system .community .community_visual .text03 img { transform: translateX(-0.521vw); }
  .top .system .community .text { padding: 0 42.708vw 2.188vw 4.115vw; margin: 1.771vw 0 0; }
  .top .system .community .text p { font-size: 1.354vw; }
  .top .system .community .text .dl { margin: 1.042vw 0 0; }
  .top .system .community .text .dl h3 { font-size: 1.406vw; width: 29.896vw; height: 5.313vw; }
  .top .system .community .text .dl h3 span { padding: 0 0 0 2.344vw; }
  .top .system .community .text .dl h3 span:before { border-width: 0.339vw 0 0.339vw 0.729vw; left: 0.729vw; }
  .top .system .community .text .dl p { font-size: 1.354vw; margin: 0.521vw 0 0; }
  .top .system .community .text .dl p a { text-decoration: underline; }
  .top .system .community .text .dl p a:hover { text-decoration: none; }
  .top .system .community .text .dl.single h3 { font-size: 1.406vw; padding: 0.677vw 1.302vw 0.573vw 0.938vw; letter-spacing: -0.04em; position: relative; transform: rotate(0.05deg); display: inline-block; }
  .top .system .community .text .dl.single h3 span { position: relative; padding: 0 0 0 1.25vw; }
  .top .system .community .text .dl.single h3 span:before { border-width: 0.365vw 0 0.365vw 0.625vw; border-color: transparent transparent transparent #000; right: auto; left: 0; top: 0; bottom: 0; margin: auto; }
  .top .faq { padding: 8.75vw 0 0; min-height: 31.25vw; }
  .top .faq .wrap { height: 100%; }
  .top .faq .wrap:before { box-shadow: 0px 1.563vw 3.711vw 0px rgba(0, 0, 0, 0.23); }
  .top .faq .wrap:after { width: 21.042vw; height: 3.542vw; top: -3.438vw; }
  .top .faq .wrap .bg { position: absolute; left: 0; top: 0.521vw; }
  .top .faq .wrap h2.title { width: 8.438vw; margin: 0 auto 0; }
  .top .faq .wrap h2.title span { display: block; transform: translate(0.521vw, -1.563vw); }
  .top .faq .wrap .questions { padding: 0.677vw 21.354vw 4.167vw; position: relative; z-index: 15; min-height: 40.625vw; }
  .top .faq .wrap .questions .item { background: #cdefea; border-radius: 0.977vw; border-radius: 0.521vw; overflow: hidden; }
  .top .faq .wrap .questions .item h3 .num { width: 5.052vw; font-size: 1.51vw; padding: 0.26vw 0 0; }
  .top .faq .wrap .questions .item h3 .num i { display: block; }
  .top .faq .wrap .questions .item h3 .num i:nth-of-type(1) { padding-right: 0.26vw; }
  .top .faq .wrap .questions .item h3 .text { display: block; width: calc(100% - 5.052vw); font-size: 1.146vw; padding: 1.094vw 5.208vw 0.885vw 1.667vw; letter-spacing: -0.08em; }
  .top .faq .wrap .questions .item h3 i.icon { width: 1.563vw; height: 1.563vw; right: 1.198vw; }
  .top .faq .wrap .questions .item h3 i.icon:before { width: 0.208vw; height: 100%; left: 0.677vw; top: 0; }
  .top .faq .wrap .questions .item h3 i.icon:after { width: 100%; height: 0.208vw; left: 0; top: 0.677vw; }
  .top .faq .wrap .questions .item .answer { font-size: 0.99vw; padding: 1.406vw 1.875vw 2.083vw 1.979vw; }
  .top .faq .wrap .questions .item + .item { margin: 1.042vw 0 0; }
  .top .product { background-image: url("/wp-content/themes/with/img/top/product/bg@pc.jpg"); padding: 5.052vw 0 7.813vw; min-height: 43.646vw; }
  .top .product .bg { width: 40.104vw; height: 100%; position: absolute; left: 56.51vw; right: 0; top: 4.688vw; }
  .top .product h2.title { text-align: left; padding: 0 0 0 28.75vw; width: auto; margin: 0.104vw 0 0; }
  .top .product h2.title img { width: 20.365vw; }
  .top .product .img { width: 22.76vw; margin: 0; position: absolute; left: 4.167vw; top: 5.104vw; }
  .top .product dl { padding: 0 0 0 28.594vw; margin: 2.969vw 0 0; }
  .top .product dl dt { width: 9.219vw; font-size: 0.781vw; border-radius: 0.26vw; padding: 0.469vw 0 0 0.26vw; min-height: 1.615vw; }
  .top .product dl dt:nth-of-type(n + 2) { margin-top: 0.573vw; }
  .top .product dl dd { width: calc(100% - 9.219vw); font-size: 0.99vw; padding: 0.156vw 0 0 1.51vw; }
  .top .product dl dd small { font-size: 0.781vw; }
  .top .product dl dd:nth-of-type(n + 2) { margin-top: 0.573vw; }
  .top .product .btn_order_square { margin: 4.219vw 0 0 4.167vw; }
  .top .product .btn_order_square:before { width: 1.042vw; }
  .top .product .btn_order_square img { width: 21.563vw; }
  .top .product .btn_order_square + .btn_order_square { margin-top: 1.042vw; }
  .top footer:before { width: 100%; height: 45.781vw; }
  .bnr_beginner { width: 18.281vw; }
  .kv .visual .bnr_beginner { right: 1.198vw; bottom: 27.448vw; width: 18.229vw; }
  .bnr_beginner_fix { right: 1.25vw; bottom: 2.656vw; } }
@media screen and (min-width: 1201px) and (max-width: 1400px) { .top .news .btn_more { padding: 2.292vw 0.85vw 0 0; } }
.top .kv .visual .catch .text01 { opacity: 0; width: 0; overflow: hidden; transition: 2s 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
.top .kv .visual .catch .text02 { opacity: 0; width: 0; overflow: hidden; transition: 2s 1s cubic-bezier(0.19, 1, 0.22, 1); }

.top .kv .visual .release, .top .kv .visual .btn_order_circle, .swiper-kv, .movie, .kv .bnr_beginner { opacity: 0; transform: translateY(1vw); transition: 2s 2s cubic-bezier(0.19, 1, 0.22, 1); }

.loaderend .top .kv .visual .catch span { width: 100%; opacity: 1; }
.loaderend .top .kv .visual .release { opacity: 1; transform: translateY(0); }
.loaderend .top .kv .visual .btn_order_circle { opacity: 1; transform: translateY(0); }
.loaderend .swiper-kv, .loaderend .movie, .loaderend .kv .bnr_beginner { opacity: 1; transform: translateY(0); }

.top .news .archives, .top .news h2.title, .top .news .btn_more { opacity: 1; transform: translateY(0); }
.top .news.animated .archives, .top .news.animated h2.title, .top .news.animated .btn_more { opacity: 1; transform: translateY(0); }
.top .about:before { height: 0; transition: 2s 0s cubic-bezier(0.19, 1, 0.22, 1); }
.top .about h2.title { opacity: 0; transition: 1s 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
.top .about .box01 .catch { opacity: 0; transform: translateY(1vw); transition: 1s 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.top .about .box01 .text { opacity: 0; transform: translateY(1vw); transition: 1s 1.5s cubic-bezier(0.19, 1, 0.22, 1); }
.top .about .box01 .visual .img01 { opacity: 0; transform: translateX(-5vw); transition: 1.2s 1.9s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s 1.9s; }
.top .about .box01 .visual .img02 { opacity: 0; transform: translateX(5vw); transition: 1.2s 1.9s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s 1.9s; }
.top .about.animated:before { height: 114.648vw; }
.top .about.animated h2.title { opacity: 1; }
.top .about.animated .box01 .catch, .top .about.animated .box01 .text { opacity: 1; transform: translateY(0); }
.top .about.animated .box01 .visual .img01, .top .about.animated .box01 .visual .img02 { opacity: 1; transform: translateX(0); }
.top .about .box02 .catch { opacity: 0; transform: translateY(1vw); transition: 1s 0s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.top .about .box02 .catch_ribbon:before { width: 0; transition: 1s 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
.top .about .box02 .catch_ribbon i, .top .about .box02 .catch_ribbon span { opacity: 0; transition: 1s 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.top .about .box02 .text { opacity: 0; transform: translateY(1vw); transition: 1s 1.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.top .about .box02 .visual01 .img03, .top .about .box02 .visual01 .img04 { opacity: 0; transform: translateY(1vw); transition: 1s 2.1s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.top .about .box02 .visual01 .img05 { opacity: 0; transform: scale(1.12); transition: 0.5s 2.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s 2.6s; }
.top .about .box02.animated .catch, .top .about .box02.animated .text { opacity: 1; transform: translateY(0); }
.top .about .box02.animated .catch_ribbon:before { width: 100%; }
.top .about .box02.animated .catch_ribbon i, .top .about .box02.animated .catch_ribbon span { opacity: 1; }
.top .about .box02.animated .visual01 .img03, .top .about .box02.animated .visual01 .img04, .top .about .box02.animated .visual01 .img05 { opacity: 1; transform: translateY(0) scale(1); }
.top .about .visual02 .img06 { opacity: 0; transform: translateY(1vw); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
.top .about .visual02 .img07 { opacity: 0; transform: scale(1.12); transition: 0.5s 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s 0.5s; }
.top .about .visual02.animated .img06 { opacity: 1; transform: translateY(0); }
.top .about .visual02.animated .img07 { opacity: 1; transform: scale(1); }
.top .system { overflow: inherit !important; }
.top .system h2.title { opacity: 0; transform: translateY(1vw); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
.top .system .swiper.btns, .top .system .swiper_system { opacity: 0; transform: translateY(1vw); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
.top .system .visual { opacity: 0; transform: translateY(1vw); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
.top .system.animated h2.title, .top .system.animated .swiper.btns, .top .system.animated .swiper_system, .top .system.animated .visual { opacity: 1; transform: translateY(0); }
.top .system .community .title_bg h3 { overflow: hidden; }
.top .system .community .title_bg h3 img { transform: translateY(100%); transition: 0.8s 0s cubic-bezier(0.19, 1, 0.22, 1); }
.top .system .community .community_visual .text01, .top .system .community .community_visual .text02 { opacity: 0; transform: scale(1.08); }
.top .system .community .community_visual .text01 { transition: 0.6s 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s 0.5s; }
.top .system .community .community_visual .box:before { opacity: 0; transform: scale(1); transition: opacity 0.4s 0.85s; }
.top .system .community .community_visual .text02 { transition: 0.6s 1.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s 1.2s; }
.top .system .community .community_visual .text03 { opacity: 0; transform: translateY(1vw); transition: 1s 1.7s cubic-bezier(0.19, 1, 0.22, 1); }
.top .system .community .text { opacity: 0; transform: translateY(1vw); transition: 1.5s 2.1s cubic-bezier(0.19, 1, 0.22, 1); }
.top .system .community.animated .title_bg h3 img { opacity: 1; transform: translateX(0); }
.top .system .community.animated .text { opacity: 1; transform: translateY(0); }
.top .system .community.animated .community_visual .text01, .top .system .community.animated .community_visual .text02, .top .system .community.animated .community_visual .text03 { opacity: 1; transform: scale(1) translateY(0); }
.top .system .community.animated .community_visual .box:before { opacity: 1; transform: scale(1); }
.top .faq h2.title { opacity: 0; transform: translateY(1vw); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
.top .faq .questions { opacity: 0; transform: translateY(1vw); transition: 1s 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
.top .faq.animated h2.title { opacity: 1; transform: translateY(0); }
.top .faq.animated .questions { opacity: 1; transform: translateY(0); }
.top .product h2.title { opacity: 0; transform: translateY(1vw); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
.top .product .img { opacity: 0; transform: translateY(1vw); transition: 1s 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
.top .product dl { opacity: 0; transform: translateY(1vw); transition: 1s 0.8s cubic-bezier(0.19, 1, 0.22, 1); }
.top .product .btn_order_square { opacity: 0; transform: translateY(1vw); transition: 1s 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.top .product.animated h2.title, .top .product.animated .img, .top .product.animated dl, .top .product.animated .btn_order_square { opacity: 1; transform: translateY(0); }

@media screen and (min-width: 1025px) { .top .kv .visual .catch .text01 { opacity: 0; width: 0; overflow: hidden; transition: 2s 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .kv .visual .catch .text02 { opacity: 0; width: 0; overflow: hidden; transition: 2s 1s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .kv .visual .release { opacity: 0; transform: translateX(18.75px); transition: 2s 2.3s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .kv .visual .btn_order_circle, .swiper-kv, .movie, .kv .bnr_beginner { opacity: 0; transform: translateY(18.75px); transition: 2s 2.3s cubic-bezier(0.19, 1, 0.22, 1); }
  .loaderend .top .kv .visual .catch span { width: 100%; opacity: 1; }
  .loaderend .top .kv .visual .release { opacity: 1; transform: translateY(0); }
  .loaderend .top .kv .visual .btn_order_circle { opacity: 1; transform: translateY(0); }
  .loaderend .swiper-kv, .loaderend .movie, .loaderend .kv .bnr_beginner { opacity: 1; transform: translateY(0); }
  .top .news .btn_more { transform: translateY(0); transition: opacity 0.3s; }
  .top .news .btn_more:hover { opacity: 0.7; }
  .top .news .archives, .top .news h2.title { opacity: 0; transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .news.animated .archives, .top .news.animated h2.title { opacity: 1; transform: translateY(0); }
  .top .about:before { height: 0; transition: 2s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about h2.title { opacity: 0; transition: 1s 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about .box01 .catch { opacity: 0; transform: translateY(18.75px); transition: 1s 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about .text { opacity: 0; transform: translateY(18.75px); transition: 1s 1.8s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about .visual .img01 { opacity: 0; transform: translateX(-31.25px); transition: 1.5s 2.4s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about .visual .img02 { opacity: 0; transform: translateX(31.25px); transition: 1.5s 2.4s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about.animated:before { height: 696.25px; }
  .top .about .box02 .catch { opacity: 0; transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about .box02 .catch_ribbon:before { transition: 1s 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about .box02 .catch_ribbon i, .top .about .box02 .catch_ribbon span { transition: 1s 0.9s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about .box02 .text { transition: 1s 1.6s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .about .visual01 .img03, .top .about .visual01 .img04, .top .about .visual01 .img05 { opacity: 1 !important; transform: translateY(0) !important; transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1) !important; }
  .top .about .visual02 .img06 { transform: translateY(18.75px); }
  .top .about .visual02.animated .img06 { transform: translateY(0); }
  .top .system h2.title { opacity: 0; transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .system .swiper.btns, .top .system .swiper_system { opacity: 0; transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .system .visual { opacity: 0; transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .system.animated h2.title, .top .system.animated .swiper.btns, .top .system.animated .swiper_system, .top .system.animated .visual { opacity: 1; transform: translateY(0); }
  .top .system .community .community_visual .text03 { transform: translateY(18.75px); }
  .top .system .community .text { transform: translateY(18.75px); transition: 0.6s 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .system .community.animated .title_bg h3 img { opacity: 1; transform: translateX(0); }
  .top .system .community.animated .text { opacity: 1; transform: translateY(0); }
  .top .system .community.animated .community_visual .text01, .top .system .community.animated .community_visual .text02, .top .system .community.animated .community_visual .text03 { opacity: 1; transform: scale(1) translateY(0); }
  .top .faq h2.title { transform: translateY(18.75px); }
  .top .faq .questions { transform: translateY(18.75px); }
  .top .faq.animated h2.title { transform: translateY(0); }
  .top .faq.animated .questions { transform: translateY(0); }
  .top .product h2.title { transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .product .img { transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .product dl { transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .product .bg { opacity: 0; transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .product .btn_order_square { transform: translateY(18.75px); transition: 1s 0s cubic-bezier(0.19, 1, 0.22, 1); }
  .top .product.animated h2.title, .top .product.animated .img, .top .product.animated dl, .top .product.animated .btn_order_square, .top .product.animated .bg { opacity: 1; transform: translateY(0); } }
@media screen and (min-width: 1201px) { .top .kv .visual .release { transform: translateX(1.563vw); }
  .top .kv .visual .btn_order_circle, .swiper-kv, .movie, .kv .bnr_beginner { transform: translateY(1.563vw); }
  .loaderend .top .kv .visual .catch span { width: 100%; }
  .loaderend .top .kv .visual .release { transform: translateY(0); }
  .loaderend .top .kv .visual .btn_order_circle { transform: translateY(0); }
  .loaderend .swiper-kv, .loaderend .movie, .loaderend .kv .bnr_beginner { transform: translateY(0); }
  .top .news .archives, .top .news h2.title { transform: translateY(1.563vw); }
  .top .news.animated .archives, .top .news.animated h2.title { transform: translateY(0); }
  .top .about:before { height: 0; }
  .top .about h2.title { opacity: 0; }
  .top .about .box01 .catch { opacity: 0; transform: translateY(1.563vw); }
  .top .about .text { opacity: 0; transform: translateY(1.563vw); }
  .top .about .visual .img01 { opacity: 0; transform: translateX(-2.604vw); }
  .top .about .visual .img02 { opacity: 0; transform: translateX(2.604vw); }
  .top .about.animated:before { height: 58.021vw; }
  .top .about .box02 .catch { opacity: 0; transform: translateY(1.563vw); }
  .top .about .visual01 .img03, .top .about .visual01 .img04, .top .about .visual01 .img05 { opacity: 1; transform: translateY(0); }
  .top .about .visual02 .img06 { transform: translateY(1.563vw); }
  .top .about .visual02.animated .img06 { transform: translateY(0); }
  .top .system h2.title { transform: translateY(1.563vw); }
  .top .system .swiper.btns, .top .system .swiper_system { opacity: 0; transform: translateY(1.563vw); }
  .top .system .visual { transform: translateY(1.563vw); }
  .top .system.animated h2.title, .top .system.animated .swiper.btns, .top .system.animated .swiper_system, .top .system.animated .visual { transform: translateY(0); }
  .top .system .community .community_visual .text03 { transform: translateY(1.563vw); }
  .top .system .community .text { transform: translateY(1.563vw); }
  .top .system .community.animated .title_bg h3 img { opacity: 1; transform: translateX(0); }
  .top .system .community.animated .text { opacity: 1; transform: translateY(0); }
  .top .system .community.animated .community_visual .text01, .top .system .community.animated .community_visual .text02, .top .system .community.animated .community_visual .text03 { opacity: 1; transform: scale(1) translateY(0); }
  .top .faq h2.title { transform: translateY(1.563vw); }
  .top .faq .questions { transform: translateY(1.563vw); }
  .top .faq.animated h2.title { transform: translateY(0); }
  .top .faq.animated .questions { transform: translateY(0); }
  .top .product h2.title { transform: translateY(1.563vw); }
  .top .product .img { transform: translateY(1.563vw); }
  .top .product dl { transform: translateY(1.563vw); }
  .top .product .bg { opacity: 0; transform: translateY(1.563vw); }
  .top .product .btn_order_square { transform: translateY(1.563vw); }
  .top .product.animated h2.title, .top .product.animated .img, .top .product.animated dl, .top .product.animated .btn_order_square, .top .product.animated .bg { opacity: 1; transform: translateY(0); } }
/*$break_width1: 1280px;
$break_width2: 1280px;
$break_width3: 1920px;
$break_width4: 1024px;
*/
@media screen and (max-width: 1024px) { .top.hasmovie .kv { padding-bottom: 4.176vw; }
  .top.hasmovie .kv:before { height: 97.656vw; }
  .top.hasmovie .kv .btn_x { bottom: 73.2vw; }
  .top.hasmovie .kv .swiper-kv { bottom: 55.691vw; }
  .top.hasmovie .kv .movie { width: 100vw; margin-left: -9.18vw; position: relative; z-index: 10; margin-top: 10vw; /*has slider 24.5vw*/ }
  .top.hasmovie .kv .movie a { display: block; width: 74.512vw; height: 42.48vw; margin: 0 auto; box-shadow: 0.781vw 0.781vw 0px 0px rgba(0, 0, 0, 0.06); border: 0.488vw solid #3f3f3f; border-radius: 1.367vw; overflow: hidden; }
  .top.hasmovie .kv .movie a img { display: block; width: calc(100% + 0.977vw); height: calc(100% + 0.977vw); object-fit: cover; position: absolute; left: -0.488vw; top: -0.488vw; max-width: inherit; vertical-align: baseline; }
  .top.hasmovie .kv .movie a i { display: block; overflow: hidden; white-space: nowrap; text-indent: 200%; width: 12.402vw; height: 12.402vw; background: url("/wp-content/themes/with/img/icon_movie.png") no-repeat center center/contain; position: absolute; left: 50%; top: 50%; margin: -6.201vw 0 0 -6.201vw; }
  .top.hasmovie .kv .movie p.title { font-size: 3.125vw; line-height: 1.5; letter-spacing: 0.04em; color: #fff; width: 74.512vw; margin: 1.953vw auto 0; } }
@media screen and (min-width: 1025px) { .top.hasmovie .kv { height: 948.75px; }
  .top.hasmovie .kv .visual { height: 930px; }
  .top.hasmovie .kv .visual .btn_order_circle { top: 150px; bottom: auto; left: 31.25px; right: auto; }
  .top.hasmovie .kv:before { height: 257.5px; }
  .top.hasmovie .kv .btn_x { bottom: 218.125px; }
  .top.hasmovie .kv .btn_x i { top: 25px; }
  .top.hasmovie .kv .btn_x span { top: 29.375px; }
  .top.hasmovie .kv .movie { width: 323.125px; height: 184.375px; margin: 0; position: absolute; left: 18.75px; bottom: 42.5px; z-index: 10; }
  .top.hasmovie .kv .movie a { display: block; width: 100%; height: 100%; margin: 0 auto; box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.06); border: 3.125px solid #3f3f3f; border-radius: 8.75px; overflow: hidden; }
  .top.hasmovie .kv .movie a img { display: block; width: calc(100% + 6.25px); height: calc(100% + 6.25px); object-fit: cover; position: absolute; left: -3.125px; top: -3.125px; transform-origin: center center; transition: transform 0.3s; max-width: inherit; }
  .top.hasmovie .kv .movie a i { display: block; overflow: hidden; white-space: nowrap; text-indent: 200%; width: 53.75px; height: 53.75px; background: url("/wp-content/themes/with/img/icon_movie.png") no-repeat center center/contain; position: absolute; left: 50%; top: 50%; margin: -26.875px 0 0 -26.875px; }
  .top.hasmovie .kv .movie a:hover img { transform: scale(1.1); }
  .top.hasmovie .kv .movie p.title { font-size: 13.75px; line-height: 1.5; letter-spacing: 0.04em; color: #fff; margin: 6.25px auto 0; } }
@media screen and (min-width: 1201px) { .top.hasmovie .kv { height: 79.063vw; }
  .top.hasmovie .kv .visual { height: 77.5vw; }
  .top.hasmovie .kv .visual .btn_order_circle { top: 12.5vw; bottom: auto; left: 2.604vw; right: auto; }
  .top.hasmovie .kv:before { height: 21.458vw; }
  .top.hasmovie .kv .btn_x { bottom: 18.177vw; }
  .top.hasmovie .kv .btn_x i { top: 2.083vw; }
  .top.hasmovie .kv .btn_x span { top: 2.448vw; }
  .top.hasmovie .kv .movie { width: 26.927vw; height: 15.365vw; left: 1.563vw; bottom: 3.542vw; }
  .top.hasmovie .kv .movie a { box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.06); border: 0.26vw solid #3f3f3f; border-radius: 0.729vw; }
  .top.hasmovie .kv .movie a img { width: calc(100% + 0.521vw); height: calc(100% + 0.521vw); left: -0.26vw; top: -0.26vw; }
  .top.hasmovie .kv .movie a i { width: 4.479vw; height: 4.479vw; margin: -2.24vw 0 0 -2.24vw; }
  .top.hasmovie .kv .movie p.title { font-size: 1.146vw; margin: 0.521vw auto 0; } }