@import url("https://www.arcsystemworks.jp/lor/css/reset.css");
@import url("https://www.arcsystemworks.jp/lor/css/nav.css");
@import url("https://www.arcsystemworks.jp/lor/css/slick.css");
/* LANGUAGE */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');/*日本*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');/*英語*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');/*韓国*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&display=swap');/*繫体字*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;200;300;400;500;600;700;800;900&display=swap');/*簡体字*/
:root{
	/*フォント指定*/
	--font_Garamond:'EB Garamond', serif;
	--font_jp:'Noto Sans JP', sans-serif;/*日本*/
	--font_en:'Noto Sans', sans-serif;/*英語*/
	--font_kr:'Noto Sans KR', sans-serif;/*韓国*/
	--font_tc:'Noto Sans TC', sans-serif;/*繫体字*/
	--font_sc:'Noto Sans SC', sans-serif;/*簡体字*/
}
html, body{ overflow-x: hidden;}
body{ width: 100%; height: auto; margin: auto; background-color: #161519; font-family: var(--font_jp); color: #000; background-image: url(https://www.arcsystemworks.jp/lor/images/bg01.png), url(https://www.arcsystemworks.jp/lor/images/bg02.png); background-size: 292px; background-repeat: no-repeat; background-position: left top, right top;}

.clearfix { *zoom: 1;}
.clearfix:before,
.clearfix:after { display: table; line-height: 0; content: "";}
.clearfix:after { clear: both;}

.forPC{ display: block;}
.forSP{ display: none;}
.temporary{ display: none !important;}
.none{ pointer-events: none; opacity: .3;}
/*h1,h2,h3,h4,h5,li{ letter-spacing: 0.1em;}*/

p{ font-size: 14px; font-weight: normal; letter-spacing: 0.1em; text-align: left; color: #000;}
p.indent-1 { padding-left:1em; text-indent:-1em;}
p.indent-15 { padding-left:1.5em; text-indent:-1.5em;}
a{ text-decoration: none; transition: .1s ease-in-out; outline: none; color: #000; font-size: 14px;}
a:hover{ transition: .1s ease-in-out;}

.htitle{ width: 100%; text-align: center; transition: .3s ease-in-out;}
.htitle h2{ display: inline-block; font-size: 58px; font-weight: 400; font-family: var(--font_Garamond); color: #edc080; text-align: center; position: relative; transition: .3s ease-in-out;}
.htitle h2::before{ content: ""; width: 144px; aspect-ratio: 144 / 11; background-image: url(https://www.arcsystemworks.jp/lor/images/htitle-item01.png); background-repeat: no-repeat; background-position: center center; background-size: 100%; position: absolute; top: 0; left: -140px; bottom: 0; margin: auto; transition: .3s ease-in-out;}
.htitle h2::after{ content: ""; width: 144px; aspect-ratio: 144 / 11; background-image: url(https://www.arcsystemworks.jp/lor/images/htitle-item02.png); background-repeat: no-repeat; background-position: center center; background-size: 100%; position: absolute; top: 0; right: -140px; bottom: 0; margin: auto; transition: .3s ease-in-out;}
.htitle h2 span{ font-size: 80px; transition: .3s ease-in-out;}

a.btn-more{ display: block; margin: auto auto auto; width: 100%; max-width: 355px; aspect-ratio: 355 / 88;}
a.btn-more img{ width: 100%;}

.blur{ opacity: 0;}
.anime-blur{ animation: blur 1s both ease-in;}
@-webkit-keyframes blur {
  from { opacity: 0;filter: blur(10px);}
  to { opacity: 1;filter: blur(0);}
}
@keyframes blur {
  from { opacity: 0;filter: blur(10px);}
  to { opacity: 1;filter: blur(0);}
}

.last-con{ background-image: url(https://www.arcsystemworks.jp/lor/images/bg03.png), url(https://www.arcsystemworks.jp/lor/images/bg04.png); background-size: 200px; background-repeat: no-repeat; background-position: left bottom, right bottom;}
/* header */
header{ width: 100%; transition: .3s ease-in-out; z-index: 20; position: relative;}
header .wrapper{ width: 100%; max-width: 1250px; margin: auto;}
header .wrapper #language{ width: 100%; max-width: 1250px; margin: 0; padding: 0; display: flex; justify-content: flex-end; list-style: none; transition: .3s ease-in-out;}
header .wrapper #language > li{ list-style: none; width: 134px; height: 25px; background: #83e3ed; text-align: center; font-size: 14px; padding: 0 10px; box-sizing: border-box; position: relative; margin-right: 5%;}
header .wrapper #language > li > div{ width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center;}
header .wrapper #language > li > div > p{ font-size: 14px; line-height: 1.2; font-weight: 500;}
header .wrapper #language > li > div > span{ width: 7px; height: 12px; background-image: url(https://www.arcsystemworks.jp/lor/images/language-item.png); background-position: center center; background-repeat: no-repeat;}
header .wrapper #language > li > ul{ display: none; margin: auto; position: absolute; left: 0; width: 100%; z-index: 2; list-style: none;}
header .wrapper #language > li > ul > li{ width: 100%; margin-top: 0; border-top: 2px solid #000;}
header .wrapper #language > li > ul > li > a{ text-decoration: none; color: #000; width: 100%; display: block; background-color: #fff; padding: 10px; box-sizing: border-box;}
header .wrapper #language > li > ul > li > a:hover{ background-color: #83e3ed;}

header.fixed{ position: fixed; top: 0; left: 0; right: 0; z-index: 20; background-color: #000;}
header.fixed #language{ display: none;}
header.fixed nav{ padding: 10px 0;}
/* footer */
footer{ width: 100%; height: auto; margin: auto; background-color: #161519; position: relative; padding: 0 10px; box-sizing: border-box; z-index: 3;}
footer #pageTop{ width: 121px; height: 42px; position: absolute; margin: auto auto; top: -80px; left: 0; right: 0; background-image: url(https://www.arcsystemworks.jp/lor/images/footer-item06.png); background-size: 100%; background-repeat: no-repeat; background-position: center top; display: block !important; text-align: center; cursor: pointer;}
footer #pageTop img{ width: 100%; max-width: 15px; margin-top: 18px; animation: move-Y .5s infinite alternate ease-in-out;}
footer #pageTop:hover img{ opacity: .6;}
@keyframes move-Y {
  from { transform: translateY(0);}
  to { transform: translateY(10px);}
}
footer .footer-wrapper{ width: 100%; max-width: 1350px; height: auto; margin: 40px auto;}
footer .footer-wrapper.flex{ display: flex; justify-content: space-between; align-items: center;}
footer .footer-wrapper.flex ul.logo{ display: flex; justify-content: space-between; align-items: center; list-style: none;}
footer .footer-wrapper.flex ul.logo li{ width: 90px; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-position: center center;}
footer .footer-wrapper.flex ul.logo li:nth-child(n + 2){ margin-left: 20px;}
footer .footer-wrapper.flex ul.logo li.arc{ width: 70px; background-image: url(https://www.arcsystemworks.jp/lor/images/footer-logo/logo-arcsystemworks.png); background-size: 100%;}
footer .footer-wrapper.flex ul.logo li.pro{ background-image: url(https://www.arcsystemworks.jp/lor/images/footer-logo/logo-project-moon.png); background-size: 100%;}
footer .footer-wrapper.flex ul.logo li.ps4{ background-image: url(https://www.arcsystemworks.jp/lor/images/footer-logo/logo-ps4.png); background-size: 100%;}
footer .footer-wrapper.flex ul.logo li.switch{ background-image: url(https://www.arcsystemworks.jp/lor/images/footer-logo/logo-switch.png); background-size: 100%;}
footer .footer-wrapper.flex ul.logo li.arc:hover,
footer .footer-wrapper.flex ul.logo li.pro:hover{ opacity: .6;}
footer .footer-wrapper.flex ul.logo li a{ display: block; width: 100%; height: 100%;}
footer .footer-wrapper.flex .btn-box{ width: 100%; max-width: 390px;}
footer .footer-wrapper.flex .btn-box > ul.information-btn{ display: flex; justify-content: space-between; align-items: center; list-style: none; margin-bottom: 20px;}
footer .footer-wrapper.flex .btn-box > ul.information-btn > li{ display: block; width: 100%; max-width: 190px;}
footer .footer-wrapper.flex .btn-box > ul.information-btn > li > a{ display: block; width: 100%; height: 100%; background-color: #edc080; padding: 10px; box-sizing: border-box; font-size: 16px; font-weight: bold; text-align: center;}
footer .footer-wrapper.flex .btn-box > ul.information-btn > li > a:hover{ opacity: .6;}
footer .footer-wrapper.flex .btn-box > ul.sns-btn{ display: flex; justify-content: flex-end; align-items: center; list-style: none; width: 100%;}
footer .footer-wrapper.flex .btn-box > ul.sns-btn li:nth-child(n + 2){ margin-left: 20px;}
footer .footer-wrapper.flex .btn-box > ul.sns-btn li.title{ width: 106px; background-image: url(https://www.arcsystemworks.jp/lor/images/footer-item01.png), url(https://www.arcsystemworks.jp/lor/images/footer-item01.png); background-size: 100%, 100%; background-repeat: no-repeat, no-repeat; background-position: center top, center bottom; font-size: 16px; font-weight: bold; color: #edc080; text-align: center; padding: 10px; box-sizing: border-box;}
footer .footer-wrapper.flex .btn-box > ul.sns-btn li.sns{ width: 55px; aspect-ratio: 1 / 1;}
footer .footer-wrapper.flex .btn-box > ul.sns-btn li.sns a:hover{ opacity: .6;}
footer .footer-wrapper p{ font-size: 14px; text-align: center; color: #fff;}
footer .footer-wrapper p .ps-logo01{ width: 20px; height: 17px; background-image: url(https://www.arcsystemworks.jp/lor/images/footer-item05.svg); background-size: 100%; background-repeat: no-repeat; background-position: center center; display: inline-block;}
footer .footer-wrapper p .ps-logo02{ width: 60px; height: 13px; background-image: url(https://www.arcsystemworks.jp/lor/images/footer-item04.svg); background-size: 100%; background-repeat: no-repeat; background-position: center center; display: inline-block;}
#pagefix{ position: fixed; bottom: 10px; right: 10px; z-index: 10; width: 100%; max-width: 200px;}
#pagefix a:hover{ opacity: .6;}
@media screen and (max-width:1730px){
	footer{ padding-bottom: 50px;}
}


/* about */
.about{ width: 100%; padding: 80px 20px 100px; box-sizing: border-box; background-image: url(https://www.arcsystemworks.jp/lor/images/about-bg.jpg); background-size: cover; background-position: center bottom; position: relative;}
.about .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; left: 0; right: 0; bottom: -24px; margin: auto; z-index: 10;}
.about .about-wrapper{ width: 100%; max-width: 1085px; margin: auto;}
.about .about-wrapper .box{ width: 100%; max-width: 772px; aspect-ratio: 772 / 1053; margin: 80px auto auto; position: relative; transition: .3s ease-in-out;}
.about .about-wrapper .box .bg01{ width: 100%; max-width: 772px; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
	z-index: 1; animation: rotation 3s infinite alternate ease-in-out;}
@keyframes rotation{
  0%{ transform:rotate(3deg);}
  100%{ transform:rotate(6deg);}
}
.about .about-wrapper .box .bg01.h-bg,
.about .about-wrapper .box .bg01 .f-bg{ width: 100%;}
.about .about-wrapper .box .bg01 .c-bg{ width: 100%; background-image: url(https://www.arcsystemworks.jp/lor/images/about-item02-05.png); background-size: 100%; height: 100%;}
.about .about-wrapper .box .bg02{ width: 100%; max-width: 772px; position: relative; margin: auto; z-index: 2;}
.about .about-wrapper .box .bg02 .h-bg,
.about .about-wrapper .box .bg02 .f-bg{ width: 100%;}
.about .about-wrapper .box .bg02 .c-bg{ width: 100%; background-image: url(https://www.arcsystemworks.jp/lor/images/about-item02-02.png); background-size: 100%; display: flex; justify-content: center; align-items: center;}
.about .about-wrapper .box .bg02 .img-text{ width: 80%; text-align: center; transition: .3s ease-in-out;}
.about .about-wrapper .box .bg02 .img-text img:nth-child(2){ margin-top: -20px; transition: .3s ease-in-out;}
.about .about-wrapper .box .bg02 .img-text p{ font-size: clamp(16px, 2.5vw, 22px);; text-align: center; font-weight: 500; color: #edc080; line-height: 3; transition: .3s ease-in-out;}

/* character */
.character{ width: 100%; padding: 80px 20px; box-sizing: border-box; background-image: url(https://www.arcsystemworks.jp/lor/images/character-bg.jpg); background-size: cover; background-position: center top; position: relative;}
.character .character-wrapper{ width: 100%; max-width: 1350px; margin: auto;}

/* products */
.products{ width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: #000; position: relative;}
.products .products-wrapper{ width: 100%; max-width: 1350px; margin: auto;}
.products .products-wrapper .products-box{ width: 100%; display: flex; justify-content: space-around; align-items: center; margin: 80px auto auto;}
.products .products-wrapper .images-box{ width: 100%; max-width: 435px; aspect-ratio: 435 / 657; background-image: url(https://www.arcsystemworks.jp/lor/images/products-item01.png); background-size: 100%; background-repeat: no-repeat; background-position: center center;}
.products .products-wrapper .text-box{ width: 100%; max-width: 820px;}
.products .products-wrapper .text-box table{ width: 100%;}
.products .products-wrapper .text-box table tr{ width: 100%}
.products .products-wrapper .text-box table tr th{ width: 183px; font-size: 18px; font-weight: 500; color: #edc080; text-align: left; padding: 18px 20px 18px 20px; border-bottom: 1px solid #edc080; box-sizing: border-box;}
.products .products-wrapper .text-box table tr td{ width: calc(100% - 183px); font-size: 18px; font-weight: 500; color: #edc080; padding: 18px 20px 18px 40px; border-bottom: 1px solid #edc080; box-sizing: border-box;}
.products .products-wrapper .links-box{ text-align: center; margin: 80px auto auto;}
.products .products-wrapper .links-box a.swith{ background-image: url(https://www.arcsystemworks.jp/lor/images/btn-switch-off.png);}
.products .products-wrapper .links-box a.swith:hover{ background-image: url(https://www.arcsystemworks.jp/lor/images/btn-switch-on.png);}
.products .products-wrapper .links-box a.ps4{ background-image: url(https://www.arcsystemworks.jp/lor/images/btn-ps4-off.png);}
.products .products-wrapper .links-box a.ps4:hover{ background-image: url(https://www.arcsystemworks.jp/lor/images/btn-ps4-on.png);}
.products .products-wrapper .links-box a.special{ background-image: url(https://www.arcsystemworks.jp/lor/images/btn-special-off.png);}
.products .products-wrapper .links-box a.special:hover{ background-image: url(https://www.arcsystemworks.jp/lor/images/btn-special-on.png);}