/* MV */
.mv_area{ width: 100%; height: 100vh; /*max-height: 1280px;*/ position: relative; overflow: hidden; background-image: url(https://www.arcsystemworks.jp/ddrev/images/mv_bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; padding: 0 10px; box-sizing: border-box;}
.mv_area .top{ position: absolute; top: 0; left: 0; width: 100%; z-index: 3;}
.mv_area .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-color: var(--color__black); animation: flash_bg_black 3s infinite; opacity: 0.5;}
.mv_area .fog{ width: 100%; height: 100%; opacity: 0.9; position: absolute; z-index: 2; top: 0; left: 0; display: flex; justify-content: flex-end;align-items: flex-end; mix-blend-mode: screen;}
.mv_area .fog div{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end;}
.mv_area .fog div canvas{ width: 100%; height: 100%;}
.mv_area .mv_content{ width: 100%; max-width: 1730px; height: 100%; margin: auto; position: relative; z-index: 4;}
.mv_area .mv_content ul{ width: 100%; max-width: 1060px; list-style: none; display: flex; justify-content: space-around; align-items: center; position: absolute; top: 15px; left: 0; right: 0; margin: auto auto; z-index: 4;}
.mv_area .mv_content ul li{ margin: 0 10px; width: 100%;}
.mv_area .mv_content ul li:nth-child(1){ max-width: 242px;}
.mv_area .mv_content ul li:nth-child(2){ max-width: 124px;}
.mv_area .mv_content ul li:nth-child(3){ max-width: 252px;}
.mv_area .mv_content ul li:nth-child(4){ max-width: 160px;}
.mv_area .mv_content .text_box{ width: 100%; max-width: 720px; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; right: -50%; margin: auto auto; display: flex; justify-content: center; align-items: center;}
.mv_area .mv_content .text_box > div{ width: 100%; overflow: hidden;}
.mv_area .mv_content .text_box .logo{ width: 100%;}
.mv_area .mv_content .text_box .logo img:nth-child(2){ margin-top: 60px;}
.mv_area .mv_content .text_box .mv_swiper{ width: 100%; position: relative;}
.mv_area .mv_content .text_box .mv_swiper .swiper-container{ width: calc(100% - 30px); overflow: hidden;}
.mv_area .mv_content .text_box .mv_swiper .swiper-container .swiper-slide{ width: 100%;}
.mv_area .mv_content .text_box .mv_swiper .swiper-container .swiper-slide a{ transition: .1s ease-in-out;}
.mv_area .mv_content .text_box .mv_swiper .swiper-container .swiper-slide a:hover{ opacity: .6}
.mv_area .mv_content .text_box .mv_swiper .swiper-pagination{ position: absolute; top: 0; left: inherit; right: 0; margin: auto; display: flex; flex-flow: column; justify-content: center; width: 20px; height: 100%:}
.mv_area .mv_content .text_box .mv_swiper .swiper-pagination .swiper-pagination-bullet{ width: 12px; height: 12px !important; border-radius: 100px; background-color: var(--color__black); border: 1px solid var(--color__white); box-sizing: border-box; margin: 5px 0; opacity: 1;}
.mv_area .mv_content .text_box .mv_swiper .swiper-pagination .swiper-pagination-bullet-active{ border: 1px solid var(--color__green);}
.mv_area .mv_content .chara_box{ width: 100%; max-width: 1030px; height: 100%; position: relative; z-index: 2; margin: auto auto; right: 20%;}
.mv_area .mv_content .chara_box img{ position: relative; bottom: -2px; left: 0; right: 0; margin: auto;}
.mv_area .mv_content .chara_box #mv_chara01{ z-index: 5; position: absolute;}
.mv_area .mv_content .chara_box #mv_chara01_s{ z-index: 4; position: absolute; opacity: .3 !important; filter: blur(6px);}
.mv_area .mv_content .chara_box #mv_chara02{ z-index: 3; position: absolute;}
.mv_area .mv_content .chara_box #mv_chara02_s{ z-index: 2; position: absolute; opacity: .3 !important; filter: blur(6px);}
.mv_area .mv_content .chara_box #mv_chara03{ z-index: 1; position: absolute;}
@media screen and (max-height:1240px){
	.mv_area .mv_content .chara_box{ max-width: 780px;}
	.mv_area .mv_content .text_box{ max-width: 610px;}
}
@media screen and (max-height:980px) and (min-width: 800px){
	.mv_area{ min-height: 1000px;}
}

@keyframes flash_bg_black{
  0%{ opacity: 0.3;}
  50%{ opacity: 0.8;}
  100%{ opacity: 0.3;}
}


/* news_list */
.news_list_area{ width: 100%; background-image: url(https://www.arcsystemworks.jp/ddrev/images/top_news_bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; border-top: 1px solid var(--color__white); box-sizing: border-box;}
.news_list_area *{ backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.news_list_area .news_bg01{ position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: .8s 1s ease-in-out;}
.news_list_area .news_bg01.active{ clip-path: polygon(30% 0, 100% 0, 100% 100%, 70% 100%);}
.news_list_area .news_bg02{ position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; right: 0; background-color: rgba(0, 0, 0, 0.4); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: 1s 1.4s ease-in-out;}
.news_list_area .news_bg02.active{ clip-path: polygon(90% 0, 100% 0, 100% 100%, 50% 100%);}
.news_list_area .container{ position: relative; z-index: 3; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; padding: 200px 0; overflow: hidden;}
.news_list_area .container .title{ width: 100%; max-width: 30%; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.news_list_area .container .title p{ font-size: 82px; font-family: var(--font_Barlow); font-weight: bold; color: var(--color__white); display: inline-block; margin: auto; letter-spacing: 0;}
.news_list_area .container .title p > span{ font-size: 92px;}
.news_list_area .container .title .swiper-news-box{ width: 100%; max-width: 200px; margin: auto auto; display: flex; justify-content: space-around; align-items: center;}
.news_list_area .container .title .swiper-news-button-prev{ width: 68px; aspect-ratio: 1 / 1; background-color: rgba(0, 0, 0, 0.7); position: relative; cursor: pointer;}
.news_list_area .container .title .swiper-news-button-prev::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background-image: url(https://www.arcsystemworks.jp/ddrev/images/arrow06.png); background-size: 15px; background-repeat: no-repeat; background-position: center center;}
.news_list_area .container .title .swiper-news-button-next{ width: 68px; aspect-ratio: 1 / 1; background-color: rgba(0, 0, 0, 0.7); position: relative; cursor: pointer;}
.news_list_area .container .title .swiper-news-button-next::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background-image: url(https://www.arcsystemworks.jp/ddrev/images/arrow07.png); background-size: 15px; background-repeat: no-repeat; background-position: center center;}
.news_list_area .container .news_swiper{ width: 70%; overflow: hidden;}
.news_list_area .news_swiper .swiper-news-container .swiper-slide{ width: 100%; height: auto; padding: 3% 2%; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.7); border-right: 1px solid var(--color__white); box-sizing: border-box;}
.news_list_area .news_swiper .swiper-news-container .swiper-slide a{ width: 100%; height: 100%; display: block;}
.news_list_area .news_swiper .swiper-news-container .swiper-slide:hover a{ opacity: .4;}
.news_list_area .news_swiper .swiper-news-container .swiper-slide .date{ font-size: 12px; font-family: var(--font_Barlow); color: var(--color__white); margin-top: 10px;}
.news_list_area .news_swiper .swiper-news-container .swiper-slide .text{ font-size: 16px; color: var(--color__white);}


/* movie_area */
.movie_area{ width: 100%; height: auto; position: relative; display: flex; justify-content: space-between; align-items: stretch;}
.movie_area .title{ width: 100%; max-width: 30%; text-align: center; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden;}
.movie_area .title .lottie-obj{ width: 100%; height: 100%; position: absolute; z-index: 0; bottom: -10%; left: -30%; margin: auto;}
/*.movie_area .title .lottie-obj::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; mix-blend-mode: overlay; background-image: url(../images/overlay-img01.jpg); background-size: cover;}*/
.movie_area .title > div{ margin: auto; position: relative; z-index: 1;}
.movie_area .title > div p{ text-align: center; font-size: 108px; font-family: var(--font_Barlow); font-weight: bold; color: var(--color__white); display: block; margin: auto; letter-spacing: 0; line-height: 1;}
.movie_area .title > div p > span{ font-size: 128px;}
.movie_area .title > div .fadeInUp-Once:nth-child(1) p{ color: transparent !important; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3); animation: movie_flash1 .3s infinite;}
.movie_area .title > div .fadeInUp-Once:nth-child(2) p{ color: transparent !important; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3); animation: movie_flash1 .6s infinite;}
.movie_area .title > div .fadeInDown-Once:nth-child(4) p{ color: transparent !important; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3); animation: movie_flash1 .2s infinite;}
@keyframes movie_flash1{
  50%{ -webkit-text-stroke: 1px var(--color__white);}
}
.movie_area .movie{ width: 70%; max-height: 650px; aspect-ratio: 16 / 9; overflow: hidden; position: relative; border-top: 10px solid var(--color__black); border-bottom: 10px solid var(--color__black);}
.movie_area .movie a{ position: absolute; z-index: 2; content: ""; width: 100%; height: 100%; background-image: url(https://www.arcsystemworks.jp/ddrev/images/top_movie_obj03.png); background-size: cover; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.movie_area .movie a::before{ content: ""; width: 80px; height: 80px; position: absolute; top: 0; left: 0; background-image: url(https://www.arcsystemworks.jp/ddrev/images/top_movie_obj01.png); background-size: 100%; opacity: 1;}
.movie_area .movie a::after{ content: ""; width: 80px; height: 80px; position: absolute; bottom: 0; right: 0; background-image: url(https://www.arcsystemworks.jp/ddrev/images/top_movie_obj02.png); background-size: 100%; opacity: 1;}
.movie_area .movie a .btn{ width: 80px; aspect-ratio: 1 / 1; background-color: var(--color__white); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0% 30%); background-image: url(https://www.arcsystemworks.jp/ddrev/images/arrow01.png); background-size: 20px; background-repeat: no-repeat; background-position: center center; transition: .3s ease-in-out;}
.movie_area .movie a:hover .btn{ clip-path: polygon(100% 0, 100% 70%, 70% 100%, 0 100%, 0 0);}
.movie_area .movie #youtube-wrapper{ width: 100%; aspect-ratio: 16 / 9; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; z-index: 1; background-image: url(https://img.youtube.com/vi/8n_BX_N_zZU/maxresdefault.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;}/*背景画像youtubeサムネ指定*/
.movie_area .movie #youtube-wrapper #iframe_youtube{ width: 100% !important; height: auto !important; margin: auto !important; aspect-ratio: 16 / 9;}


/* about_area */
.about_area{ width: 100%; height: 1000px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: .6s 2s ease-in-out; position: relative;}
.about_area.active{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 90%);}
.about_area .luxy-el.bg{ width: 100%; height: 1720px; background-image: url(https://www.arcsystemworks.jp/ddrev/images/top_about_bg.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; margin: auto;}
.about_area #container{ width: 100%; max-width: 1600px; height: 100%; position: relative; margin: auto; padding: 0 10px; box-sizing: border-box;}
.about_area #container .chara{ width: 100%; max-width: 820px; position: absolute; z-index: 1; top: -240px; left: 0; }
.about_area #container .text{ width: 100%; max-width: 760px; height: 100%; position: absolute; z-index: 2; top: 0; right: 20px; bottom: 0; margin: auto; display: flex; justify-content: center; align-items: center;}
.about_area #container .text .title{ width: 100%;}
.about_area #container .text .title p{ font-size: 82px; font-family: var(--font_Barlow); font-weight: bold; color: var(--color__white); display: inline-block; margin: auto; letter-spacing: 0;}
.about_area #container .text .title p > span{ font-size: 92px;}
.about_area #container .text h2{ background-color: var(--color__red); font-size: 22px; font-weight: bold; color: var(--color__white); padding: 4px; box-sizing: border-box; display: inline-block;}
.about_area #container .text > div > p{ font-size: 16px; font-weight: bold; color: var(--color__white); line-height: 2.5; padding-top: 32px; text-shadow: 0px 0px 4px var(--color__black);}
.about_area #container .text .more_btn{ padding-top: 32px; text-align: right;}


/* story_area */
.story_area{ width: 100%; height: 1000px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: .6s 2s ease-in-out; position: relative;}
.story_area.active{ clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%); margin-top: -90px;}
.story_area .luxy-el.bg{ width: 100%; height: 1720px; background-image: url(https://www.arcsystemworks.jp/ddrev/images/top_story_bg.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; left: 0; top: 0; margin: auto;}
.story_area #container{ width: 100%; max-width: 1600px; height: 100%; position: relative; margin: auto; padding: 0 10px; box-sizing: border-box;}
.story_area #container .chara{ width: 100%; max-width: 730px; position: absolute; z-index: 1; top: -240px; right: 0; }
.story_area #container .text{ width: 100%; max-width: 760px; height: 100%; position: absolute; z-index: 2; top: 0; left: 20px; bottom: 0; margin: auto; display: flex; justify-content: center; align-items: center;}
.story_area #container .text .title{ width: 100%; left: 0;}
.story_area #container .text .title p{ font-size: 82px; font-family: var(--font_Barlow); font-weight: bold; color: var(--color__white); display: inline-block; margin: auto; letter-spacing: 0;}
.story_area #container .text .title p > span{ font-size: 92px;}
.story_area #container .text h2{ background-color: var(--color__red); font-size: 22px; font-weight: bold; color: var(--color__white); padding: 4px; box-sizing: border-box; display: inline-block;}
.story_area #container .text > div > p{ font-size: 16px; font-weight: bold; color: var(--color__white); line-height: 2.5; text-shadow: 0px 0px 4px var(--color__black);}
.story_area #container .text .more_btn{ padding-top: 32px; text-align: left;}


/* product_area */
.product_area{ width: 100%; height: auto; overflow: hidden; transition: .6s 2s ease-in-out; position: relative; border-top: 10px solid var(--color__black); box-sizing: border-box; padding: 200px 0;}
.product_area .luxy-el.bg{ width: 100%; height: 1720px; background-image: url(https://www.arcsystemworks.jp/ddrev/images/top_product_bg.jpg); background-position: center top; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; margin: auto;}
.product_area #container{ width: 100%; max-width: 1180px; margin: auto; position: relative;}
.product_area #container .title{ width: 100%; text-align: left;}
.product_area #container .title p{ font-size: 82px; font-family: var(--font_Barlow); font-weight: bold; color: var(--color__white); display: inline-block; margin: auto; letter-spacing: 0;}
.product_area #container .title p > span{ font-size: 92px;}
.product_area #container .platform_link{ width: 100%; max-width: 960px; display: flex; justify-content: space-around; align-items: center; margin: 32px auto auto;}
.product_area #container .platform_link .shadow{ width: 100%; filter: drop-shadow(-1px 1px 0px #fff) drop-shadow(1px -1px 0px #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(1px 1px 0 #fff);}
.product_area #container .platform_link .shadow a{ position: relative; display: flex; justify-content: center; align-items: center; margin: auto auto; width: 100%; height: 76px; clip-path: polygon(20px 0%, 100% 0%, 100% 100%, 0 100%, 0 20px); background-color: rgba(4, 24, 50, 1); padding: 20px; box-sizing: border-box; font-size: 20px; color: #fff; font-weight: 400; letter-spacing: 0.0em; transition: .1s ease-in-out;}
.product_area #container .platform_link .shadow a.steam_link{ width: 273px;}
.product_area #container .platform_link .shadow a.ps_link{ width: 273px; background-color: #00439C;}
.product_area #container .platform_link .shadow a.xbox_link{ width: 273px; background-color: #117111;}
.product_area #container .platform_link .shadow a:hover{ transform: scale(1.1,1.1);}
.product_area #container .platform_link .shadow a.steam_link img{ width: 100%; max-width: 113px; margin: 2px 0 0 0;}
.product_area #container .platform_link .shadow a.ps_link img{ width: 100%; max-width: 221px; margin: 2px 0 0 0;}
.product_area #container .platform_link .shadow a.xbox_link img{ width: 100%; max-width: 113px; margin: 2px 0 0 0;}


/* character */
.character_area{ width: 100%; height: auto; position: relative; box-sizing: border-box; padding: 10px 0 0;}
.character_area .title{ position: absolute; top: 0; left: 0; width: 100%; max-width: 410px; height: 100%; z-index: 10;}
.character_area .title .bg{ position: relative; clip-path: polygon(0 0, 73% 0, 100% 100%, 0% 100%); background-color: rgba(0, 0, 0, 0.9); height: 100%; width: 100%;}/*334px*/
.character_area .title .box{ position: absolute; top: 0; left: 40px; bottom: 0; margin: auto; width: 100%; height: 190px; z-index: 1;}
.character_area .title p{ font-size: 82px; font-family: var(--font_Barlow); font-weight: bold; color: var(--color__white); display: inline-block; margin: auto; letter-spacing: 0;}
.character_area .title p > span{ font-size: 92px;}
.character_area .title .swiper-character-box{ width: 100%; max-width: 150px; display: flex; justify-content: space-around; align-items: center;}
.character_area .title .swiper-character-box .swiper-character-pagination{ width: 100px; font-size: 26px; font-family: var(--font_Barlow); font-weight: bold; color: var(--color__white); text-align: center;}
.character_area .title .swiper-character-button-prev{ width: 30px; aspect-ratio: 1 / 1; position: relative; cursor: pointer;}
.character_area .title .swiper-character-button-prev::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background-image: url(https://www.arcsystemworks.jp/ddrev/images/arrow06.png); background-size: 15px; background-repeat: no-repeat; background-position: center center;}
.character_area .title .swiper-character-button-next{ width: 30px; aspect-ratio: 1 / 1; position: relative; cursor: pointer;}
.character_area .title .swiper-character-button-next::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background-image: url(https://www.arcsystemworks.jp/ddrev/images/arrow07.png); background-size: 15px; background-repeat: no-repeat; background-position: center center;}
.character_area .swiper-slide{ transform: skewX(-10deg) !important; overflow: hidden; margin: 0 .3%; border: 2px solid var(--color__white); box-sizing: border-box; transition: .1s ease-in-out; z-index: 1;}
.character_area .swiper-slide:hover{ z-index: 2; border: 3px solid var(--color__green);}
.character_area .swiper-slide img{ transform: skewX(10deg) scale(1.25);}