/* MV */
.mv{ background-color: #161519; background-image: url(https://www.arcsystemworks.jp/lor/images/mv-bg.jpg); background-size: cover; background-position: center center; width: 100%; height: calc(100vh - 135px); min-height: 1000px; position: relative; overflow: hidden;}
.mv .platform{ width: 234px; aspect-ratio: 234 / 57; background-image: url(https://www.arcsystemworks.jp/lor/images/mv-item01.png); background-size: 100%; background-position: center center; position: absolute; top: 10px; left: 10px; margin: auto; z-index: 1;}
.mv .main{ width: 100%; height: 100%; max-width: 1500px; margin: auto; position: relative;}
.mv .main .character{ position: absolute; top: 0; left: -6%; bottom: 0; margin: auto; width: 100%; max-width: 1155px; background-image: url(https://www.arcsystemworks.jp/lor/images/mv-item02.png); background-size: 100%; background-repeat: no-repeat; background-position: center top;}
.mv .main .text{ position: absolute; top: 0; right: -6%; bottom: 0; margin: auto; width: 100%; max-width: 1016px; background-image: url(https://www.arcsystemworks.jp/lor/images/mv-item03.png); background-size: 100%; background-repeat: no-repeat; background-position: center top 150px; transition: .3s ease-in-out;}
@media screen and (max-width:1550px){
	.mv .main .character{ left: 0%;}
	.mv .main .text{ top: -6%; right: 0%; width: 100%; max-width: 800px;}
}
@media screen and (max-width:1350px){
	.mv .main .character{ left: 0%;}
	.mv .main .text{ top: -14%; right: 0%; width: 100%; max-width: 630px;}
}

/* news */
.news{ width: 100%; max-width: 1380px; margin: 0 auto 0; padding: 80px 20px 0; box-sizing: border-box;}
.news .news-wrapper{ width: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
.news .news-wrapper .left{ width: 100%; max-width: 327px; padding-right: 20px; box-sizing: border-box;}
.news .news-wrapper .left .htitle h2::before{ top: 10px; left: -60px; bottom: inherit;}
.news .news-wrapper .left .htitle h2::after{ top: inherit; right: -60px; bottom: 0;}
.news .news-wrapper .right{ width: 100%; height: 290px; display: block; overflow-y: scroll; scrollbar-color: #fff #161519; padding: 10px; box-sizing: border-box;}
.news .news-wrapper .right ul{ list-style: none;}
.news .news-wrapper .right ul li{ padding: 20px; box-sizing: border-box; border-bottom: 1px solid #edc080; box-sizing: border-box;}
.news .news-wrapper .right ul li .date{ font-size: 14px; font-weight: bold; color: #83e3ed;}
.news .news-wrapper .right ul li p{ font-size: 18px; color: #edc080; font-weight: 500;}
.news .slide-wrapper{ width: 100%; margin-top: 80px;}
.news .slide-wrapper .slider{ position: relative;}
.news .slide-wrapper .slider .bnr{ width: 449px; aspect-ratio: 449 / 181; padding: 30px; box-sizing: border-box; background-image: url(https://www.arcsystemworks.jp/lor/images/news-item01.png); background-size: 100%; background-repeat: no-repeat; background-position: center center; display: flex; justify-content: center; align-items: center;}
.news .slide-wrapper .slider .bnr a:hover{ opacity: .6;}
.news .slide-wrapper .slider .slick-prev{ position: absolute; bottom: -6px; right: 300px; left: 0; margin: auto; font-size: 0px; width: 64px; height: 34px; background-image: url(https://www.arcsystemworks.jp/lor/images/arrow01.svg); background-size: 100%; background-repeat: no-repeat; background-position: center center;}
.news .slide-wrapper .slider .slick-next{ position: absolute; bottom: -6px; right: 0; left: 300px; margin: auto; font-size: 0px; width: 64px; height: 34px; background-image: url(https://www.arcsystemworks.jp/lor/images/arrow02.svg); background-size: 100%; background-repeat: no-repeat; background-position: center center;}
.news .slide-wrapper .slider .slick-prev:hover,
.news .slide-wrapper .slider .slick-next:hover{ opacity: .6;}
.news .slide-wrapper .slider .slick-dots{ list-style: none; display: flex; justify-content: center; align-items: center; margin-top: 20px;}
.news .slide-wrapper .slider .slick-dots li{ width: 19px; height: 21px; display: inline-block; font-size: 0px; background-image: url(https://www.arcsystemworks.jp/lor/images/news-item03.png); background-size: 19px; background-repeat: no-repeat; background-position: center center; margin: 0 5px;}
.news .slide-wrapper .slider .slick-dots li.slick-active{ background-image: url(https://www.arcsystemworks.jp/lor/images/news-item02.png);}

/* trailet */
.trailet{ width: 100%; height: 800px; margin: 110px auto 0; position: relative;}
.trailet #youtube-wrapper{ width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; margin: auto; z-index: 1; background-image: url(https://img.youtube.com/vi/ofmYqXfjFs8/maxresdefault.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;}/*背景画像youtubeサムネ指定*/
.trailet .obi01{ width: 100%; height: 30px; background-image: url(https://www.arcsystemworks.jp/lor/images/obi.png); background-repeat: repeat-x; background-position: center center; position: absolute; top: -24px; margin: auto; z-index: 10;}
.trailet .obi02{ width: 100%; height: 30px; background-image: url(https://www.arcsystemworks.jp/lor/images/obi.png); background-repeat: repeat-x; background-position: center center; position: absolute; bottom: -24px; margin: auto; z-index: 10;}
.trailet .movie{ width: 100%; height: 100%; background-image: url(https://www.arcsystemworks.jp/lor/images/sample02.jpg); background-position: center center; background-size: cover; overflow: hidden;}
.trailet .movie a{ display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: relative; z-index: 2; cursor: pointer;}
.trailet .movie a .left{ position: absolute; top: 0; left: 0; bottom: 0; margin: auto; width: 721px; height: 100%; background-image: url(https://www.arcsystemworks.jp/lor/images/trailet-item01.png); background-size: cover; background-repeat: no-repeat; background-position: right center; opacity: 0; transition: .3s ease-in-out;}
.trailet .movie a .left.anime-left{ animation: fadeIn-left 1.5s ease-in-out 1s forwards;}
@keyframes fadeIn-left {
  from { opacity: 0; transform: translateX(-40px);}
  to { opacity: 1; transform: translateX(0);}
}
.trailet .movie a .right{ position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 721px; height: 100%; background-image: url(https://www.arcsystemworks.jp/lor/images/trailet-item02.png); background-size: cover; background-repeat: no-repeat; background-position: left center; opacity: 0; transition: .3s ease-in-out;}
.trailet .movie a .right.anime-right{ animation: fadeIn-right 1.5s ease-in-out 1s forwards;}
@keyframes fadeIn-right {
  from { opacity: 0; transform: translateX(40px);}
  to { opacity: 1; transform: translateX(0);}
}
@media screen and (max-width:1550px){
	.trailet .movie a .left{ left: -10%;}
	.trailet .movie a .right{ right: -10%;}
}
.trailet .movie a .main{ width: 100%; max-width: 585px; height: 315px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 11;}
.trailet .movie a .main .start-btn{ width: 150px; height: 150px; border-radius: 100px; background-color: #000; background-image: url(https://www.arcsystemworks.jp/lor/images/arrow02.svg); background-size: 61px; background-repeat: no-repeat; background-position: center center; margin: auto auto auto; opacity: .9;}
.trailet .movie a:hover .main .start-btn{ opacity: .6;}

/* character */
.character .character-wrapper ul{ width: 100%; list-style: none; display: flex; justify-content: space-between; align-items: flex-start; margin: 80px auto auto;}
.character .character-wrapper ul li.chara{ width: 100%; max-width: 48%; aspect-ratio: 670 / 747; padding: 40px 30px; box-sizing: border-box; background-image: url(https://www.arcsystemworks.jp/lor/images/character-item02.png), url(https://www.arcsystemworks.jp/lor/images/character-item01.png); background-size: 90%, 100%; background-repeat: no-repeat, no-repeat; background-position: center top 26px, center center; display: flex; justify-content: space-between; align-items: flex-end;}
.character .character-wrapper ul li.chara .text-box{ width: 100%; max-width: 285px; margin-bottom: 60px;}
.character .character-wrapper ul li.chara .text-box .name{ padding: 0 10px 20px; border-bottom: 1px solid #edc080; box-sizing: border-box;}
.character .character-wrapper ul li.chara .text-box .name .huri{ font-size: 16px; font-weight: bold; text-align: center; color: #83e3ed;}
.character .character-wrapper ul li.chara .text-box .name .en{ font-size: 43px; font-weight: bold; text-align: center; color: #edc080; font-family: var(--font_Garamond);}
.character .character-wrapper ul li.chara .text-box .voice{ width: 100%; padding: 20px 10px; border-bottom: 1px solid #edc080; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
.character .character-wrapper ul li.chara .text-box .voice .cv-box{ width: 37px; height: 37px; border-radius: 50px; background-color: #edc080; font-size: 16px; font-weight: bold; display: flex; justify-content: center; line-height: 33px;}
.character .character-wrapper ul li.chara .text-box .voice .actor-box{ padding-left: 20px; box-sizing: border-box;}
.character .character-wrapper ul li.chara .text-box .voice .actor-box .box{ width: 100%; display: flex; justify-content: flex-start; align-items: center;}
.character .character-wrapper ul li.chara .text-box .voice .actor-box .box:nth-child(n + 2){ margin-top: 10px;}
.character .character-wrapper ul li.chara .text-box .voice .actor-box .box .country{ display: inline-block; padding: 0 10px; box-sizing: border-box; background-color: #83e3ed; text-align: center; font-size: 14px; font-weight: 500;}
.character .character-wrapper ul li.chara .text-box .voice .actor-box .box .actor{ padding-left: 10px; box-sizing: border-box; font-size: 16px; font-weight: 500; color: #fff;}
.character .character-wrapper ul li.chara .text-box .text{ padding: 20px 10px 0; box-sizing: border-box;}
.character .character-wrapper ul li.chara .text-box .text p{ font-size: 16px; font-weight: 500; color: #edc080;}
.character .character-wrapper ul li.chara .images-box{ width: 100%; max-width: 343px; aspect-ratio: 343 / 658; background-size: 100%; background-repeat: no-repeat; background-position: center top; transition: .3s ease-in-out;}
.character .character-wrapper ul li.chara.angela .images-box{ background-image: url(https://www.arcsystemworks.jp/lor/images/character/character-angela.png);}
.character .character-wrapper ul li.chara.roland .images-box{ background-image: url(https://www.arcsystemworks.jp/lor/images/character/character-roland.png);}
.character .character-wrapper .btn-more{ margin-top: 80px;}