@import url("https://www.arcsystemworks.jp/ddrev/css/reset.css");
@import url("https://www.arcsystemworks.jp/ddrev/css/animate.css");
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed: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&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	/*フォント指定*/
	--font_Barlow:'Barlow Condensed', 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;/*簡体字*/
	
	/*カラー指定*/
	--color__white:#ffffff;
	--color__black:#000000;
	--color__blue:#4F91C3;
	--color__red:#A62322;
	--color__green:#19B4A8;
}

html{ scroll-behavior: smooth; overflow-x: hidden;}
body{ width: 100%; margin: auto; background-color: var(--color__black); font-family: var(--font_jp);}

*,
*::before,
*::after {
    will-change: all;
}

*{ perspective: 1000;}

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

/*開始までの時間*/
.op{ opacity: 0;}
.op01{ opacity: 1;}
.delay-time01{ animation-delay: .1s;}
.delay-time02{ animation-delay: .2s;}
.delay-time03{ animation-delay: .3s;}
.delay-time04{ animation-delay: .4s;}
.delay-time05{ animation-delay: .5s;}
.delay-time06{ animation-delay: .6s;}
.delay-time07{ animation-delay: .7s;}
.delay-time08{ animation-delay: .8s;}
.delay-time09{ animation-delay: .9s;}
.delay-time10{ animation-delay: 1.0s;}
.delay-time11{ animation-delay: 1.1s;}
.delay-time12{ animation-delay: 1.2s;}
.delay-time13{ animation-delay: 1.3s;}
.delay-time14{ animation-delay: 1.4s;}
.delay-time15{ animation-delay: 1.5s;}
.delay-time16{ animation-delay: 1.6s;}
.delay-time17{ animation-delay: 1.7s;}
.delay-time18{ animation-delay: 1.8s;}
.delay-time19{ animation-delay: 1.9s;}
.delay-time20{ animation-delay: 2.0s;}
.delay-time21{ animation-delay: 2.1s;}
.delay-time22{ animation-delay: 2.2s;}
.delay-time23{ animation-delay: 2.3s;}
.delay-time24{ animation-delay: 2.4s;}
.delay-time25{ animation-delay: 2.5s;}
.delay-time26{ animation-delay: 2.6s;}
.delay-time27{ animation-delay: 2.7s;}
.delay-time28{ animation-delay: 2.8s;}
.delay-time29{ animation-delay: 2.9s;}
.delay-time30{ animation-delay: 3.0s;}
/*アニメーションのスピード*/
.delay-speed01{ animation-duration: .1s;}
.delay-speed02{ animation-duration: .2s;}
.delay-speed03{ animation-duration: .3s;}
.delay-speed04{ animation-duration: .4s;}
.delay-speed05{ animation-duration: .5s;}
.delay-speed06{ animation-duration: .6s;}
.delay-speed07{ animation-duration: .7s;}
.delay-speed08{ animation-duration: .8s;}
.delay-speed09{ animation-duration: .9s;}
.delay-speed10{ animation-duration: 1.0s;}
.delay-speed11{ animation-duration: 1.1s;}
.delay-speed12{ animation-duration: 1.2s;}
.delay-speed13{ animation-duration: 1.3s;}
.delay-speed14{ animation-duration: 1.4s;}
.delay-speed15{ animation-duration: 1.5s;}
.delay-speed16{ animation-duration: 1.6s;}
.delay-speed17{ animation-duration: 1.7s;}
.delay-speed18{ animation-duration: 1.8s;}

.forPC{ display: block;}
.forSP{ display: none;}


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: var(--color__black);}
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: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; outline: none; color: #595757; font-size: 14px;}
a:hover{ transition: .1s ease-in-out; -moz-transition: .1s ease-in-out; -webkit-transition: .1s ease-in-out; -o-transition: .1s ease-in-out; -ms-transition: .1s ease-in-out;}
a.non{ opacity: .2; pointer-events: none;}

/* nav */
.nav_box{ position: fixed; top: calc(100vh - 90px); left: 0; width: 100%; height: 90px; z-index: 9999;}
.nav_box.fixed{ position: fixed; top: 0; bottom: auto; height: 77px;}
.nav .nav_bg{ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: absolute; top: 0; left: 0; z-index: 0;}
.nav ul{ width: 100%; max-width: 1140px; margin: auto; display: flex; justify-content: space-around; align-items: center; position: relative; z-index: 1; list-style: none; padding: 20px 0;}
.nav ul li a{ font-family: var(--font_Barlow); color: var(--color__white); font-size: 18px;}
.nav ul li a:hover{ opacity: .6;}
.nav ul li.btn a{ clip-path: polygon(15% 0%, 100% 0, 100% 70%, 85% 100%, 0 100%, 0% 30%); background-color: var(--color__green); display: block; width: 100%; font-family: var(--font_jp); font-size: 14px; color: var(--color__black); font-weight: bold; padding: 14px 18px; box-sizing: border-box;}
.nav_box.fixed ul li.btn{ display: none;}
#main{ position: relative; z-index: 1;}

/* btn */
.more_btn.btn01 a{ display: inline-block; width: 100%; max-width: 210px; background-color: var(--color__white); clip-path: polygon(20px 0, 100% 0%, 100% 100%, 0 100%, 0% 20px); text-align: center; padding: 10px; box-sizing: border-box;}
.more_btn.btn01 a:hover{ opacity: .6; transform: scale(1.1,1.1);}
.more_btn.btn01 a span{ font-family: var(--font_Barlow); font-size: 24px; font-weight: bold; color: var(--color__black); position: relative; padding-right: 30px; display: inline-block;}
.more_btn.btn01 a span::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 20px; aspect-ratio: 1 / 1; background-image: url(https://www.arcsystemworks.jp/ddrev/images/arrow08.png); background-size: 100%; background-repeat: no-repeat; background-position: center center;}

/* language */
#language{ width: 100%; margin: 0; padding: 0; display: flex; justify-content: flex-end; list-style: none; transition: .3s ease-in-out; position: fixed; z-index: 99999;}
#language > li{ list-style: none; width: 165px; aspect-ratio: 584 / 213; text-align: center; font-size: 14px; padding: 0 10px; box-sizing: border-box; position: relative; margin: 10px 0 0 0;}
#language > li:nth-child(1){ background-image: url(https://www.arcsystemworks.jp/ddrev/images/language_bg01.png); background-size: 100%;}
#language > li > div{ width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center;}
#language > li > div > p{ font-size: 14px; line-height: 1.2; font-weight: 500; color: var(--color__white); font-family: var(--font_Barlow);}
#language > li > div > span{ width: 7px; height: 12px; background-image: url(https://www.arcsystemworks.jp/ddrev/images/arrow05.png); background-size: 100%; background-position: center center; background-repeat: no-repeat;}
#language > li > ul{ display: none; margin: auto; position: absolute; left: 0; width: 100%; z-index: 2; list-style: none;}
#language > li > ul > li{ width: 100%; max-width: calc(100% - 40px); margin: 0 auto ; border-top: 1px solid var(--color__black);}
#language > li > ul > li:nth-child(1){ border-top: 0px none;}
#language > li > ul > li > a{ text-decoration: none; color: var(--color__black); width: 100%; display: block; background-color: var(--color__white); padding: 5px 10px; box-sizing: border-box; font-size: 12px;}
#language > li > ul > li > a:hover{ background-color: #4F91C3; color: var(--color__white);}
#language.fixed{ display: none;}

/* product_area */
.product_area .box{ width: 100%; max-width: 1180px; display: flex; justify-content: space-between; align-items: flex-start; margin: 10px auto 0; padding: 0 20px; box-sizing: border-box;}
.product_area .box .list-box{ list-style: none; width: 48%; padding: 5px; box-sizing: border-box;}
.product_area .box .list-box li{ width: 100%; position: relative;}
.product_area .box .list-box li:nth-child(even){ margin: 20px 0;}
.product_area .box .list-box li .line{ position: absolute; top: -5px; left: -5px; width: 160px; height: 50px; background-color: var(--color__green); clip-path: polygon(20px 0, 100% 0%, 100% 100%, 0 100%, 0% 20px);}
.product_area .box .list-box li .text{ width: 100%; background-color: var(--color__black); padding: 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; clip-path: polygon(20px 0, 100% 0%, 100% 100%, 0 100%, 0% 20px); position: relative; z-index: 1;}
.product_area .box .list-box li .text .title{ width: 100%; max-width: 170px; font-size: 14px; font-weight: bold; color: var(--color__white); text-align: left; padding-left: 10px; box-sizing: border-box;}
.product_area .box .list-box li .text .detail{ width: 100%; max-width: calc(100% - 170px); font-size: 14px; font-weight: bold; color: var(--color__white); text-align: left; display: flex; align-items: center; flex-grow: 1;}


footer{ width: 100%; padding: 100px 20px; box-sizing: border-box; position: relative; z-index: 1; border-top: 1px solid var(--color__white);}
footer #backtop{ width: 60px; aspect-ratio: 1 / 1; position: absolute; top: -30px; right: 30px; margin: auto; background-image: url(https://www.arcsystemworks.jp/ddrev/images/backtop.png); background-size: 100%; background-repeat: no-repeat; background-position: center center;}
footer #backtop:hover{ transform: scale(1.1,1.1);}
footer .wrap{ width: 100%; max-width: 1300px; margin: auto; display: flex; justify-content: center; align-items: flex-start;}
footer .wrap .left{ width: 100%; max-width: 1000px; margin-right: 80px;}
footer .wrap .left .f_logo_area{ padding: 0 0 20px; box-sizing: border-box; border-bottom: 1px solid var(--color__white);}
footer .wrap .left .f_logo_area ul{ list-style: none; display: flex; justify-content: space-between; align-items: center;}
footer .wrap .left .f_logo_area ul li:nth-child(1){ max-width: 50px;}
footer .wrap .left .f_logo_area ul li:nth-child(2){ max-width: 48px;}
footer .wrap .left .f_logo_area ul li:nth-child(3){ max-width: 217px;}
footer .wrap .left .f_logo_area ul li:nth-child(4){ max-width: 92px;}
footer .wrap .left .f_logo_area ul li:nth-child(5){ max-width: 222px;}
footer .wrap .left .f_logo_area ul li:nth-child(6){ max-width: 139px;}
footer .wrap .left p{ font-size: 12px; color: var(--color__white); padding-top: 20px; font-weight: lighter;}
footer .wrap .left p img{ vertical-align: middle; margin: 0 5px;}
footer .wrap .right{ width: 100%; max-width: 290px;}
footer .wrap .right p.title{ font-size: 20px; font-weight: 800; color: var(--color__white); font-family: var(--font_Barlow);}
footer .wrap .right p.title span{ font-size: 24px;}
footer .wrap .right ul{ list-style: none; margin-top: 20px; width: 100%;}
footer .wrap .right ul li{ width: 100%;}
footer .wrap .right ul li a{ width: auto; display: inline-block; position: relative; font-size: 14px; color: var(--color__white); font-family: var(--font_Barlow); font-weight: lighter; padding-right: 20px; box-sizing: border-box;}
footer .wrap .right ul li a.jp{ font-family: var(--font_jp);}
footer .wrap .right ul li a::after{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 13px; aspect-ratio: 1 / 1; background-image: url(https://www.arcsystemworks.jp/ddrev/images/arrow03.png); background-size: 100%; background-repeat: no-repeat; background-position: center center;}
footer .wrap .right ul li a:hover::after{ background-image: url(https://www.arcsystemworks.jp/ddrev/images/arrow04.png);}
footer #copy{ font-size: 12px; color: var(--color__white); font-family: var(--font_Barlow); text-align: center; margin-top: 100px; padding: 0 10px; box-sizing: border-box;}
@media screen and (max-width:2000px){
	footer{ width: 100%; padding: 100px 20px 200px;}
}
@media screen and (max-width:1320px){
	footer .wrap .left{ margin-right: 50px;}
}

#footer_link{ width: 100%; max-width: 400px; position: fixed; bottom: 5px; right: 5px; opacity: 1; transition: all .3s ease; z-index: 99;}
#footer_link.animate__flipInY{ display: inline;}
#footer_link .bottom01{ position: relative; z-index: 1; width: 100%; opacity: .5; animation: blinking 1.5s ease-in-out infinite alternate;}
#footer_link .bottom02{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 2; width: 77%;}
#footer_link .bottom03{ position: absolute; left: 0; right: 0; bottom: 60px; margin: auto; z-index: 2; width: 60%;}
#footer_link:hover .bottom03{ animation: blinkingTxt .2s ease-in-out infinite alternate;}
#footer_link p{ font-size: 20px; font-weight: bold; text-align: center; color: var(--color__white); position: absolute; left: 0; right: 0; bottom: 35px; margin: auto; z-index: 2;}
@keyframes blinking {
	0% { opacity: .5;}
	100% { opacity: .7;}
}
@keyframes blinkingTxt {
	0% { opacity: 1;}
	100% { opacity: .5;}
}