@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500&display=swap');



/*body_common*/
body{
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 0;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #000;
	}

body.appear,body#Contents.appear{background:#000!important;}

body.appear:before{
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: url("../images/arc/RAC_background.jpg");
	background-position: top 20% center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	}


body#Contents.appear:before{
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: url("../images/arc/RAC_contents_background.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	}


@media only screen and (max-width: 860px) {
    body.appear:before{background-size: cover; background-color: #000;}
    body#Contents.appear:before{background-size: cover; background-color: #000;}
    }

@media only screen and (max-width: 860px) {body#Contents.appear:before{background-size: cover; background-position: top right -80px;}}



/*Loading*/
#splash {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background:#000;
  text-align:center;
  color:#fff;
}

/* Loadingバー中央配置　*/
#splash_text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 100%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    }

    /*animation*/
    .splashbg1,.splashbg2{display: none;}
    body.appear .splashbg1,body.appear .splashbg2{display:block;}

    /*right*/
    body.appear .splashbg1{
        animation-name:PageAnime;
        animation-duration:1.2s;
        animation-timing-function:ease-in-out;
        animation-fill-mode:forwards;
        content: "";
        position:fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        top: 0;
        left:50%;
        transform: scaleX(1);
        background-color: #000;
        }

    @keyframes PageAnime{
        0% {transform-origin:left; transform:scaleX(1);}
        50% {transform-origin:right;}
        100% {transform-origin:right; transform:scaleX(0);}
        }
        
    /*left*/
    body.appear .splashbg2{
        animation-name:PageAnime2;
        animation-duration:1.2s;
        animation-timing-function:ease-in-out;
        animation-fill-mode:forwards;
        content: "";
        position:fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        top: 0;
        right:50%;
        transform: scaleX(1);
        background-color: #000;
        }

    @keyframes PageAnime2{
        0% {transform-origin:right; transform:scaleX(1);}
        50% {transform-origin:left;}
        100% {transform-origin:left; transform:scaleX(0);}
        }

    /*display*/
    #container{opacity: 0;}

    body.appear #container{
        animation-name:PageAnimeAppear;
        animation-duration:1s;
        animation-delay:0.2s;
        animation-fill-mode:forwards;
        opacity: 0;
        }

    @keyframes PageAnimeAppear{
        0% {opacity: 0;}
        100% {opacity: 1;}
        }


/*Category_common*/
img{max-width: 100%;}

p,li,th,td{
	font-size: 1em;
	line-height: 1.4em;
	color: #eeeeee;
	}

.small{font-size: 0.8em!important;}

a{outline: none; text-decoration: none;}

:hover{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}

@media only screen and (max-width: 480px) {p,li{font-size: 0.9em;}}
    
    

/*----------NAVI------------*/
header{
    width: 100%;
    background: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    z-index: 999;
    }

header ul{padding: 0;}
header ul,header li{list-style: none;}

#nav {margin: auto 2%;}

#nav > a {display: none;}
#nav li {position: relative;}

#nav li a{
	color: #FFF;
	display: block;
	}

#nav li a:active {}
#nav li span{font-size: 0.8em;}

/*first level*/
#nav .small{font-size: 0.8em!important;}

#nav > ul {
    margin: 0;
    padding: 0;
	display: flex;
	align-items: center;
	}

#nav > ul > li:first-child {flex: 0 1 50%;}
#nav > ul > li {flex: 0 1 10%;}


#nav > ul > li:first-child > a {max-width: 230px; padding: 0 0.5em;}
#nav > ul > li > a {
	padding: 1.5em 0.5em;
	font-size: 0.9em;
    font-weight: 500;
	line-height: 1.4em;
    letter-spacing: 1px;
    font-family: 'Orbitron', sans-serif;
	text-align: center;
    display: block;
	}

#nav > ul > li > a:hover {box-shadow: 0px 0px 29px 1px rgba(12,220,227,0.8) inset;}
#nav > ul > li:first-child > a:hover {box-shadow: none;}


@media only screen and (max-width: 1400px) {#nav > ul > li:first-child {flex: 0 1 40%;} #nav > ul > li {flex: 0 1 12%;}}
@media only screen and (max-width: 860px) {
    header{background: none; top: 0; bottom: auto;}
	
    #nav > a {
    	width: 3.125em;
    	height: 3.125em;
    	margin: 0 auto 0 -12px;
    	text-align: left;
    	text-indent: -9999px;
    	background-color: rgba(12,220,227,0.5);
    	box-shadow: 0px 0px 15px 1px rgba(12,220,227,0.8) inset;
    	position: relative;
    	z-index: 999;
    	}
	
    #nav > a:before, #nav > a:after {
    	position: absolute;
    	border: 2px solid #fff;
    	top: 35%;
    	left: 25%;
    	right: 25%;
    	content: '';
    	}
	
    #nav > a:after {top: 60%;}
    #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display: block;}
	
    /*first level*/
    #nav > ul {
	    margin-top: -3.125em;
	    padding-top: 8vh;
	    height: 100vh;
	    display: none;
	    position: absolute;
	    left: 0;
	    right: 0;
	    background: rgba(0,0,0,0.9);
	    }
	
    #nav:target > ul {display: block;}

    #nav > ul > li {width: 94%; margin: auto; border-bottom: dotted 2px #626262;}
    #nav > ul > li:first-child{padding: 5%;}
    #nav > ul > li:first-child > a{max-width: 300px; margin: auto;}
    #nav > ul > li:last-child {border-bottom: none;}
	
    #nav > ul > li > a {
	    line-height: 1.4em;
	    height: auto;
	    text-align: center;
	    padding: 1.5em 0.25em;
	    }

    #nav > ul > li:not( :last-child ) > a {border-right: none;}
    }



    /*pv_page*/
    .pv_page header{background: rgba(0,0,0,0.8);}
    
    .pv_page h3 + p{font-size: 0.9em; margin: 0.5em 0 2em 1.5em;}

    .pv_page header div{
        max-width: 1480px;
        margin: 0 auto;
        padding: 1em;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        }

    .pv_page header p{margin: 0; padding: 0;}
        .logo{flex: 0 1 230px;}
        .corp{flex: 0 1 100px; margin-left: auto!important;}
    
    .textArea{margin: 1em auto!important; padding: 0.5em 1.5em; background: rgba(0,0,0,0.5);}
        
    p.en{font-size: 0.9em;}
    p.note{font-size: 0.8em;}
        
    @media only screen and (max-width: 480px) {.logo{flex: 0 1 180px;} .corp{flex: 0 1 80px;}}


/*----------mainVisual----------*/
#mainVisual{
    padding: 90px 0 18%;
    background-image: url("../images/arc/RAC_top_mainvisual_L.png");
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: top -40px left;
    }

#mainVisual div{width: 55%; margin: 0 3% 0 auto;}

#mainVisual .logo{max-width: 380px; margin: 0 0 0 auto;}

#mainVisual h1{
	width: 100%;
    margin: 16% 0 0;
	height: 0;
	padding-top: 50%;
	background-repeat: no-repeat;
	background-size: contain!important;

	overflow: hidden;
	display: block;
    background-image: url("../images/arc/RAC_top_release202402a.png");
	background-position: top center;
    }

    .soon{background-image: url("../images/arc/RAC_top_comingsoon04.png")!important;}
    .on{background-image: url("../images/arc/RAC_top_release202309.png")!important;}


    @media only screen and (max-width: 860px) {
        #mainVisual{
            padding: 25px 0 25%;
            background-image: url("../images/arc/RAC_top_mainvisual_S.png");
            background-repeat: no-repeat;
            background-size: 105%;
            background-position: top left -10px;
            }
    
            #mainVisual div{width: 100%; margin: 0 3% 0 auto;}
            #mainVisual .logo{width: 40%; max-width: 280px; margin: 0 25px 0 auto;}
    
            #mainVisual h1{margin: 110% 0 0; padding-top: 38%;}
        }




/*----------mainContents----------*/
#mainContents{background: rgba(0,0,0,0.75); padding-bottom: 10%;}

#mainContents > div{width: 100%; max-width: 1580px; margin: 0 auto; padding: 1.5em;}
.pv_page #mainContents > div{width: 100%; max-width: 1380px; margin: 0 auto; padding: 1.5em;}

h2{
    margin: 0;
    padding: 0.2em 0;
    color: #FFF;
    position: relative;
    font-family: 'Orbitron', sans-serif;
    font-weight: 500;
    }

h2 span{
    margin: 8px 0 0 160px;
    padding: 0 0 0.2em 1em;
    color: #0cdce3;
    font-size: 0.55em;
    font-weight: normal;
    letter-spacing: 3px;
    position: absolute;
    border-left: solid 1px #0cdce3;
    font-family: 'Noto Sans JP', sans-serif;
    }

h2 span::before{
    content: '';
    width: 140px;
    height: 1px;
    display: block;
    background-color: #0cdce3;    
    position: absolute;
    top: 45%;
    left: -140px;
    transform: translateY(-50%);
    }

    @media only screen and (max-width: 480px) {
        h2 span,h2 span::before{position: relative;}
        h2 span{margin: 0; border-left: none;}
        h2 span::before{width: 100%; height: 1px; top: 5px; left: 0;}
    }


.FlexBox{display: flex;}
.block02 div{flex: 0 1 46%; margin: 0 2%;}

ul.notes{
    margin: 1em 0;
    padding: 0;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 1.2em;
    }

    ul.notes li{padding-bottom: 0.5em;}


/*TOP_TITLE*/
.t_title{display: flex;}
.t_title p{flex: 0 1 19%; margin: 0 0.5%;}


/*--Contents animation--*/
.box,.fadeLeftTrigger{opacity: 0;}

.fadeUp {
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
    }

    @keyframes fadeUpAnime{
        from {opacity: 0; transform: translateY(100px);}
        to {opacity: 1; transform: translateY(0);}
        }

.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }

    @keyframes fadeLeftAnime{
        from {opacity: 0; transform: translateX(-100px);}
        to {opacity: 1; transform: translateX(0);}
        }



/*NEWS*/
#NEWS{
    margin: 10% 0;
    padding: 1.5em;
    position: relative;
    border-top: solid 2px rgba(255,255,255,0.5);
    border-bottom: solid 2px rgba(255,255,255,0.5);
    }


#NEWS::before, #NEWS::after,#NEWS ul::before, #NEWS ul::after {
	content: '';
	height: 10px;
	position: absolute;
	border-left: solid 2px rgba(255,255,255,0.5);
    }

    #NEWS::before{top: 0; left: 0;}
    #NEWS::after {top: 0; right: 0;}
    #NEWS ul::before {bottom: 0; left: 0;}
    #NEWS ul::after {bottom: 0;	right: 0;}


#NEWS ul{margin: 0.5em 0; height: 200px; overflow-y: scroll; padding: 0; list-style: none;}
#NEWS li{padding: 0 0 0.5em 0; margin-right: 1em; margin-bottom: 0.5em; border-bottom: dotted 1px rgba(255,255,255,0.5);}
#NEWS li > a{padding: 0.35em 1em; display: block; color: #eee;}
#NEWS li > a:hover{background: rgba(12,220,227,0.15);}

#NEWS li br{display: none;}
@media only screen and (max-width: 480px) {#NEWS li{margin: 0.35em 0.5em 0.35em 0;} #NEWS li br{display: block;}}


/*MOVIE*/
#MOVIE{margin: 10% 0; padding: 0 1em;}
#MOVIE div{max-width: 1100px; margin: auto;}
.pv_page #MOVIE{margin: 10% 0 0; padding: 0;}
.pv_page #MOVIE div{max-width: 1380px;}

.pv {
    width: 100% !important;
    margin: 0 !important;
    padding-bottom: 56.25%;
    position: relative;
    }

.pv iframe {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    }

    .rayforce{max-width: 526px !important; padding-bottom: 0!important; aspect-ratio: 4 / 6; margin: 0 auto !important;}
    .playMovie{max-width: 860px !important; padding-bottom: 0!important; aspect-ratio: 5.75 / 4; margin: 0 auto !important;}
    .raycrisis{max-width: 860px !important; padding-bottom: 0!important; aspect-ratio: 5.32 / 4; margin: 0 auto !important;}

@media only screen and (max-width: 1200px) {}
@media only screen and (max-width: 480px) {.pv_page #MOVIE{margin: 30% 0 5%; padding: 0;}}
    

/*EVENT*/
#EVENT{margin: 10% 0; padding: 0 1em;}
.eventInfo{display: flex;}
.eventInfo h3{margin-top: 2em;}
.eventInfo p{line-height: 1.8em;}
.eventInfo div{flex: 0 1 48%; margin: 0 1%;}
.eventInfo .LinkButton{margin: 2em 0 3em;}

@media only screen and (max-width: 860px) {
    #EVENT{margin: 20% 0; padding: 0;}
    .eventInfo{display: block;}
    }

@media only screen and (max-width: 480px) {#EVENT{margin: 25% 0;}}


/*PRODUCT*/
#PRODUCT{display: flex; margin-bottom: 10%;}
#PRODUCT div{flex: 0 1 47%; margin: 0 1.5%;}
#PRODUCT div:first-child{padding-top: 10%;}
#PRODUCT p{line-height: 2.4em;}

.container {position: relative;}

.image {
    position: absolute;
    width: 100%;
    opacity: 0;
    animation: change-img-anim 30s infinite;
    }

.image:nth-of-type(1) {animation: change-img-anim-first 30s infinite; animation-delay: 0s;}
.image:nth-of-type(2) {animation-delay: 10s;}
.image:nth-of-type(3) {animation-delay: 20s;}

@keyframes change-img-anim-first {
  0%{ opacity: 1;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}

@keyframes change-img-anim {
  0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}

@media only screen and (max-width: 1400px) {#PRODUCT div:first-child{padding-top: 5%;}}
@media only screen and (max-width: 860px) {#PRODUCT{display: block;}}


/*ITEM*/
#SHOP{padding-top: 10%;}

.RAC_item{
    width: 96%;
    margin: 1em auto;
    padding-top: 10%;
    }

.RAC_item ul{list-style:none;}

@media only screen and (max-width: 860px) {
    #SHOP{padding-top: 85%;}
    #PRODUCT_items #SHOP{padding-top: 20%;}
    .RAC_item{width: 100%;}
    }


/*tab*/
.tab{display: flex; flex-wrap: wrap;}

ul.tab {margin: 2em 0 0 0; padding: 0;}
ul.tab li{flex: 0 1 20%;}

.tab li a{
    color: #FFF;
    display: block;
    background: #2d2d2d;
    margin: 0 2px 0 0;
    padding: 13px 20px;
    text-align: center;
    }

    .tab li.active a{background: #660202;}
    .tab li a > br{display: none;}

@media only screen and (max-width: 1400px) {ul.tab li{flex: 0 1 25%;}}
@media only screen and (max-width: 860px) {.tab li a{padding: 13px 10px; font-size: 0.8em;}}
@media only screen and (max-width: 480px) {
    .tab li a{font-size: 0.7em; line-height: 1.4em;}
    .tab li:first-child a{padding: 21px 10px;}
    .tab li:nth-child(2) a,.tab li:nth-child(3) a{padding: 28px 10px;}
    .tab li a > br{display: block;}
    }


/*area*/
.area {
    display: none;
    opacity: 0;
    padding: 20px 2em;
    background: rgba(0,0,0,0.5);
    }

    .area.is-active {
        display: block;
        animation-name: displayAnime;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        }

    @keyframes displayAnime{
        from {opacity: 0;}
        to {opacity: 1;}
        }

/*area_layout*/
.area h3,.eventInfo h3,#SETTING h4{
    padding: 0.15em 0.5em 0.25em;
    font-size: 1.0em;
    line-height: 1.6em;
    color: #eee;
    border-left: solid 8px #860606;
    border-bottom: solid 1px #860606;
    }

    #SETTING h4{border-left: solid 8px #068286; border-bottom: solid 1px #068286;}


.area h4, #PRODUCT_items h4,.eventInfo h4,#UPDATEinfo h4, #DL h4 {
    padding: 0 0.5em;
    color: #eee;
    border-left: solid 8px #068286;
    font-weight: normal;
    }

    #UPDATEinfo h4{font-weight: bold!important;}

h5{
    margin: 0;
    padding: 0 0.5em 0 1.5em;
    font-size: 1em;
    color: #eee;
    background: url("../images/arc/RAC_h5maker.png") no-repeat left top;
    background-size: contain;
    }

    .gadget h5{background: url("../images/arc/RAC_h5maker.png") no-repeat left center; background-size: 15px auto;}

    @media only screen and (max-width: 480px) {h5{background-size: 19px 20px;}}


.itemList{display: flex; flex-wrap: wrap;}
.itemList article{flex: 0 1 46%; margin: 0 2% 2em;}
.itemList ul, .PI_info ul, .eventInfo ul, #UPDATEinfo ul{margin: 0; padding: 0 0 0 1.8em;}
.itemList ul li > ul, .PI_info ul li > ul, .eventInfo ul li > ul, #UPDATEinfo ul li > ul{margin: 0.5em 0 0; padding: 0 0 0 0.8em;}

.itemList ul li, .PI_info ul li, .eventInfo ul li, #UPDATEinfo ul li {
    margin-bottom: 0.5em;
    padding: 0.1em 0.5em;
	position: relative;
	list-style-type: none;
    } 

.itemList ul li:before, .PI_info ul li:before, .eventInfo ul li:before, #UPDATEinfo ul li:before{
	width: 8px;
	height: 8px;
	content: '';
	position: absolute;
	top: 0.65em;
	left: -0.5em;
	background-color: #068286;
    }

    .itemList ul li > ul li:before, .PI_info ul li > ul li:before, .eventInfo ul li > ul li:before, #UPDATEinfo ul li > ul li:before{background-color: rgba(0,0,0,1.00); border: solid 2px #068286;}

.LinkButton a{
    padding: 0.5em;
    text-align: center;
    display: block;
    color: #0cdce3;
    border: solid 1px #0cdce3;
    background: rgba(12,220,227,0.1);
    box-shadow: 0px 0px 25px -6px rgba(12,220,227,0.6) inset;
    }

    .LinkButton a:hover{background: rgba(12,220,227,0.2); box-shadow: 0px 0px 25px -7px rgba(12,220,227,0.8) inset;}
    .DLinfo .LinkButton a{max-width: 600px;}
    .pv_page .LinkButton a{max-width: 480px;}

    .none a{background: none; color: #959595; border: solid 1px #959595; box-shadow: none;}
    .none a:hover{background: none; box-shadow: none;}

.sticker{display: flex; padding-bottom: 3em;}
.DLinfo{display: flex; padding: 2em; background: rgba(0,0,0,0.5);}
.sticker div:first-child,.DLinfo div:first-child{flex: 0 1 30%; margin: 0 1%;}
.sticker div:last-child,.DLinfo div:last-child{flex: 0 1 68%; margin: 0 1%;}

.details{padding: 2em; font-size: 0.9em!important;} 

@media only screen and (max-width: 860px) {
    .itemList{display: block;}
    .itemList article{margin: 0 2% 4em;}
    .itemList article:last-child{margin: 0 2% 2em;}
    .details{padding: 2em 1em;}
    .sticker{display: block;}
    }
    
@media only screen and (max-width: 480px) {.DLinfo{display: block;} .DLinfo div:first-child{width: 80%; margin: 0 auto 2em;}}

/*TITLE_PRODUCT page*/
#TITLE, #PRODUCT_items{padding: 10% 2em 0!important;}

.PDF_Link{max-width: 860px; margin: 2em auto 4em;}
.PDF_Link .LinkButton{font-size: 120%; font-weight: bold;}
.PDF_Link .LinkButton span{font-size: 0.8em;}

.PI_info{
    padding: 0!important;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    }

.PI_info div{flex: 0 1 48%; margin: 0 1% 2em;}
.special div{flex: 0 1 48%; margin: 0 1% 3em;}

h3.shopTitle, .titleList h3, .pv_page h3, #UPDATEinfo h3{
    padding: 0.5em;
    color: #FFF;
    font-weight: normal;
    background: url("../images/arc/RAC_h3maker.png") no-repeat right bottom;
    }

    h3.shopTitle{background: url("../images/arc/RAC_h3maker_long02.png") no-repeat right bottom;}
    #SETTING .titleList h3, #UPDATEinfo h3{background: url("../images/arc/RAC_h3maker_long.png") no-repeat right bottom;}
    #PRODUCT_items .titleList h3{background: url("../images/arc/RAC_h3maker_long.png") no-repeat right bottom;}
    .pv_page h3{margin: 0; background: url("../images/arc/RAC_h3maker_long.png") no-repeat left bottom;}
    

.titleList p{margin: 0.75em; font-size: 0.9em; line-height: 1.8em;}
.titleList article > div:first-child p{margin: 0.75em 0 0!important;}

/*frame*/
.titleList{margin: 2em 2em 5em;}

.titleList,.detail{position: relative;}

.titleList > .detail{padding: 1.5em;}
.titleList article{
    padding: 2.5% 0 2.5% 3%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    }

    #SETTING .titleList article{padding: 1.5% 2.5% 2.5%; display: block!important;}
    #PRODUCT_items .titleList article{padding: 1.5% 2.5% 2.5%; display: block!important;}
    .titleList article > div:first-child{flex: 0 1 30%; padding: 0;}
    .titleList article > div:last-child{flex: 0 1 65%; padding: 0 1% 0 4%;}

.titleList::before, .titleList::after, .detail::before, .detail::after {
	content: '';
	width: 50px;
	height: 50px;
	position: absolute;
    }

.titleList::before{border-top: solid 2px rgba(255,255,255,0.25); border-left: solid 2px rgba(255,255,255,0.25); top: 0; left: 0;}
.titleList::after{border-top: solid 2px rgba(255,255,255,0.25); border-right: solid 2px rgba(255,255,255,0.25); top: 0; right: 0;}
.detail::before{border-bottom: solid 2px rgba(255,255,255,0.25); border-left: solid 2px rgba(255,255,255,0.25); bottom: 0; left: 0;}
.detail::after{border-bottom: solid 2px rgba(255,255,255,0.25); border-right: solid 2px rgba(255,255,255,0.25); bottom: 0; right: 0;}

.gadgetList{padding: 0!important;}
.gadget{display: flex; padding: 0 0 3em;}
.gadget div:first-child{flex: 0 1 57%; margin: 0 1%;}
.gadget div:last-child{flex: 0 1 39%; margin: 0 1%;}

.gadget div:first-child p{margin: 0;}

@media only screen and (max-width: 1300px) {
    .gadget{display: block;}
    .gadget div:first-child, .gadget div:last-child{margin: 0.5em 0;}
    }

@media only screen and (max-width: 1000px) {
    #PRODUCT_items .titleList h3, #UPDATEinfo h3{background: url("../images/arc/RAC_h3maker_long.png") no-repeat left -500px bottom;}
    }

@media only screen and (max-width: 980px) {
    #PRODUCT_items .titleList h3, #UPDATEinfo h3{padding-right: 50px; background: url("../images/arc/RAC_h3maker_long.png") no-repeat left -650px bottom;}
    }

@media only screen and (max-width: 860px) {
    #PRODUCT_items .titleList article{padding: 1.5% 3% 5% 3%;}
    .PI_info{display: block;}
    .PI_info div:last-child{margin: 0.75em;}
    .special div{flex: 0 1 48%; margin: 0 1% 15%;}
    
    .titleList article{padding: 1.5em; display: block;}
    .titleList article > div:first-child{width: 85%; margin: 1em auto;}
    .titleList article > div:last-child{flex: 0 1 65%; padding: 0;}
    }
    
@media only screen and (max-width: 480px) {
    #TITLE h3{background: url("../images/arc/RAC_h3maker.png") no-repeat left -360px bottom;}
    #SETTING .titleList h3{background: url("../images/arc/RAC_h3maker.png") no-repeat left -320px bottom;}
    #PRODUCT_items .titleList h3, #UPDATEinfo h3{background: url("../images/arc/RAC_h3maker_long.png") no-repeat left -800px bottom;}
    #UPDATEinfo h3{padding-right: 0;}
    
    .titleList article{padding: 1em 1.5em 2em;}
    .titleList article > div:first-child{width: 100%; margin: 1em auto;}
    .titleList{margin: 2em 0 5em;}
    }


/*PRODUCT INFORMATION*/
#PRODUCT_INFO{padding-top: 20%;}

#PRODUCT_INFO h2{margin-left: 1em;}

table{
    width: 100%;
    max-width: 960px;
    margin: 2em auto 0;
    border: solid 1px #eee;
    }

th,td{
    padding: 1em;
    border-bottom: solid 1px #eee;
    }

    th{width: 180px; font-weight: normal; border-right: solid 1px #eee; background: rgba(255,255,255,0.15);}
    td > p{margin: 0;}

table ul{margin: 0.25em 0 0.25em 1em; padding: 0;}
table ul > li:first-child{padding-bottom: 0.75em;}

.gadget table{margin: 0 auto;}
.gadget table p{margin: 0;}

.BGM td{border-right: solid 1px #eee;}


@media only screen and (max-width: 860px) {
    #TITLE #PRODUCT_INFO{padding-top: 20%;}
    #PRODUCT_INFO h2{margin-left: 0;}
    }


@media only screen and (max-width: 480px) {
    #PRODUCT_INFO th, #PRODUCT_INFO td, .gadget th, .gadget td{display: block;}
    th{width: 100%; padding: 0.75em 1em; border-right:none; border-bottom: dotted 1px #eee;}
    td{padding: 1.25em 1em;}
    tr:last-child > td{border-bottom: none;}
    
    .BGM th:first-child{width: 25%;}
    .BGM th:nth-child(2){width: 37.5%;}
    .BGM th:last-child{width: 37.5%;}
    }


/*UPDATE*/
#UPDATEinfo > div{max-width: 1280px; margin: auto; padding-top: 5em;}
#UPDATEinfo article{margin: 2em 0; padding: 2em; background: rgba(0,0,0,0.5);}
#UPDATEinfo article > div:first-child{display: flex; justify-content: flex-start; align-items: center;}
#UPDATEinfo article > div:first-child > p:last-child {margin: 0 0 0 auto;}
#UPDATEinfo article p{margin: 1.5em 0;}
#UPDATEinfo article p,#UPDATEinfo article li{line-height: 1.8em;}
#UPDATEinfo article li{margin-bottom: 1em;}
#UPDATEinfo article li span{line-height: 0.15em;}

p.Nintendo,p.PS4{width: 180px; margin: 0 0.35em 0!important; padding: 0.35em 0.75em; text-align: center;}
.Nintendo{border:solid 1px rgba(230,0,18,0.5); background: rgba(230,0,18,0.35);}
.PS4{border:solid 1px rgba(0,114,206,0.5); background: rgba(0,114,206,0.45);}

#UPDATEinfo article a{color: #0cdce3;}
#UPDATEinfo article a:hover{color: #0ac1c7;}

@media only screen and (max-width: 480px) {
    #UPDATEinfo article > div:first-child{display: block;}
    p.Nintendo,p.PS4{width: auto; margin: 0.25em 0!important;}
    #UPDATEinfo article > div:first-child > p:last-child {text-align: right;}
    }

/*----------SNS----------*/
#shareBox {
	width: 100%!important;
    margin: 10% 0!important;
	text-align: center;
	position: relative;
	}

	.shareButtons {
		position: absolute;
        top: 0;
		bottom: 0;
		left: calc(49% - 75px);
		display: flex;
		justify-content: space-between;
		width: 240px!important;
		height: auto;
		margin: 0px auto!important;
		padding: 0 0 35px!important;
		clear: none;
		z-index: 888;
		}

    .mainVisual #shareBox {margin-top: 3em;}
    .mainVisual .shareButtons{left: calc(43% - 75px);}

	.shareButtons > div> a {
		display: block;
		width: 45px!important;
		height: 45px!important;
        margin: 0 1em;
		background-size: contain;
		background: no-repeat top center;
		}

	.shareButtons>div.fbBtn a {background-image: url("../images/sns_ico_01_fb.svg");}
	.shareButtons>div.tweetBtn a {background-image: url("../images/sns_ico_02_tw.svg");}
	.shareButtons>div.lineBtn a {background-image: url("../images/sns_ico_03_line.svg");}

@media only screen and (max-width: 860px) {#shareBox {margin: 15% 0 30%;} .mainVisual #shareBox{display: none;} .shareButtons {left: calc(44% - 75px);}}
@media only screen and (max-width: 480px) {#shareBox {margin: 30% 0 50%;} .shareButtons {left: calc(40% - 75px);}}



/*----------FOOTER------------*/
footer{
	padding: 2em 0 7em;
	color: #FFF;
	display: block;
	background: rgba(0,0,0,0.75);
    }

footer > div{
	width: 100%;
	max-width: 1540px;
	margin: auto;
	padding: 0 1em 1em;
	}

   
    footer p:first-child{font-size: 0.8em; margin-bottom: 3em;}


	ul.taitoLink{margin: 1em 0 0; padding: 0 0 2em; border-bottom: solid 1px #828282;}
	
	ul.taitoLink li{
		font-size: 1.0em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #FFF;}
	ul.taitoLink a:hover{color: #7ecef4;}

footer p:last-child{
	margin-top: 2em;
	font-size:0.8em;
	color: #FFF;
	text-align: center;
	}

@media only screen and (max-width: 480px) {
    footer{padding: 10% 0;}
    ul.taitoLink li{font-size: 0.9em;}
    }