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

* {box-sizing:border-box;}

body {
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", 游ゴシック体, "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #FFFFFF;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background-color:#000;
    letter-spacing: 0.15em;
}

/*背景*/
/*body::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index: -1;
	width:100vw;
	height: 100vh;
	background-color:#000;
	background:url(../images/darius_revelation_bg.gif) center center;
	background-size: cover;
}*/

.video-wrap {position: relative;}
.video-wrap img, .video-wrap video {
    width: 100%;
	height: 100%;
	height: 100vh;
    margin: auto;
    min-width: 100%;
	min-height: 100vh;
	position:fixed;
	top: 0;
    bottom: 0;
	left: 0;
    right: 0;
	z-index: -1;
    object-fit: cover;
    background: url("../images/darius_revelation_bg.jpg") no-repeat;
    background-size: cover;
}

 .bg_darius {
    margin: auto;
    padding: 0;
    min-width: 100%;
	min-height: 100%;
	position: absolute;
	top: 0;
    bottom: 0;
	left: 0;
    right: 0;
    object-fit: cover;
}

.bg_grid {
    content: "";
    width: 100%;
	height: 100%;
    background-color : rgba(0,0,0,0.40);
    background-image:
        repeating-linear-gradient( 90deg,rgba(255,255,255,0.12) 0px 1px, transparent 1px 6px),
        repeating-linear-gradient( 0deg,rgba(255,255,255,0.12) 0px 1px,	transparent 1px 6px);
	position: absolute;
	top: 0;
    bottom: 0;
	left: 0;
    right: 0;
}
/*背景*/


[data-emergence=hidden] {
    opacity: 0;
    transform: translateY(100px); }
[data-emergence=visible] {
    opacity: 1;
    transform: translateY(0px);
    transition: all .5s; }

/*.fade[data-emergence=hidden] {
    opacity: 0;
    transform: translateY(0px);}

.fade[data-emergence=visible] {
    opacity: 0.8;
    transition: all 1.0s;}
@media only screen and (min-width: 960px) {
.fade[data-emergence=hidden] {
    opacity: 0;
    transform: translateY(0px);}

.fade[data-emergence=visible] {
    opacity: 0.8;
    transition: all 2s;}
}*/

article {
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0;
    position: relative;
}

section {
	box-sizing: border-box;
	padding: 0px;
	margin:0px auto 0px;
}

p {
	font-size: 1em;
	line-height: 1.6em;
	margin: 0;
}
p+p {margin: 0.5em 0 0;}

a {
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

a:hover {
	opacity: 0.8;
}

a.disable {
	pointer-events: none;
	opacity: 0.5;
}

ul {
	list-style: none;
	margin: auto;
	padding: 0;
}

ol {
	margin: auto;
    padding-left: 1.5em;
}

dd {
	margin: auto;
    padding: 0px;
}

img {
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border-style: none;
	-ms-interpolation-mode: bicubic;
}

/*記事用*/
.small	{font-size: 0.8em;}
.Small	{font-size: 0.9em;}
.large	{font-size: 1.1em;}
.Large	{font-size: 1.2em;}
.big	{font-weight: bold; font-size: 1.4em;}
.date	{font-weight: bold; color: #FF4444;}
.spaced {padding: 1em;}
.center	{text-align: center;}
.left	{text-align: left;}
.right	{text-align: right;}
.attention {color: #FF0000;}
.clear {clear: both;}
/*.url {color: #1a0dab;}
.url:hover {color: #609;}*/
.url {color: #776CF3;}
.url:hover {color: #CC68FF;}
.bold {font-weight: bold;}
.normal {font-weight: normal;}
.yellow {color: #FFED00;}
.e70 {color: #E70;}
.hide {display: none;}
.sun {color: #f00;}
.sat {color: #008FEB;}
.gray {color: #888888;}
.mgnT {margin-top: 20px;}
.pconly {display: none;}
@media only screen and (min-width: 960px) {
.sponly {display: none;}
.pconly {display: block;}
}

.flexBox {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
}
.boxset2>div {flex: 0 0 100%;}
.boxset3>div {flex: 0 0 100%;}
.boxset3_1>div:first-child {flex: 0 0 100%;}
.boxset3_1>div:last-child {flex: 0 0 100%;}
.boxset1_3>div:first-child {flex: 0 0 100%;}
.boxset1_3>div:last-child {flex: 0 0 100%;}

.basis100 {flex: 0 0 100% !important}
.boxsetThumbnail>div:first-child {flex: 0 0 70%;}
.boxsetThumbnail>div:last-child {flex: 0 0 30%;}

@media only screen and (min-width: 960px) {
.boxset2>div {flex: 0 0 calc(100% / 2);}
.boxset3>div {flex: 0 0 calc(100% / 3);}
.boxset3_1>div:first-child {flex: 0 0 calc(100% / 1.5);}
.boxset3_1>div:last-child {flex: 0 0 calc(100% / 3);}
.boxset1_3>div:first-child {flex: 0 0 calc(100% / 3);}
.boxset1_3>div:last-child {flex: 0 0 calc(100% / 1.5);}
}


/*動画エリア*/
div.movie {
    display: block;
    width: 100%;
    height: 0;
    margin: auto;
    padding: 56.25% 0 0;
    position: relative;
}

div.movie iframe {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 25px 10px rgba(255,255,255,0.20);
}


/*header*/
header {
    width: 100%;
    height: auto;
    margin: auto;
	padding: 0;
    position: relative;
    background-image:url("../images/darius_revelation_bg_kv_sp.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#TITLE header {background-position: center -80px;}
#PRODUCTS header {background-position: center 50%;}
#SPECIAL header {background-position: center bottom;}

header > div {
    width: 100%;
    height: 100%;
	padding: 80px 0;
    background-color: rgba(0,0,0,0.30);
}

header h1 {
	display: block;
	width: 95%;
	height: auto;
	margin: 0 auto;
	/*padding: calc(95% * calc(373 / 1001)) 0 0;*/
	padding: 0;
    background-image: none;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 900;
    font-size: 2.4em;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 1px 1px 10px rgba(0,0,0,0.60), 1px -1px 10px  rgba(0,0,0,0.60), -1px 1px 10px  rgba(0,0,0,0.60), -1px -1px 10px  rgba(0,0,0,0.60);
}

header p {
	width: 95%;
	margin: 30px auto 0;
	text-align: center;
	font-size: 1em;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 900;
}
/*header p:last-of-type {font-size: 1.8em; line-height: 1.2em}*/
.en header p:last-of-type {font-size: 1.6em; line-height: 1.4em}

#TOP header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    margin: auto;
	padding: 100px 0;
	background-image:url("../images/darius_revelation_bg_kv_sp.jpg");
	background-size: cover;
	background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    /*position: sticky;
    top: 0;*/
}

#TOP header > div {width: 100%; height: auto; padding: 0; background: none;}

#TOP header h1 {
	display: block;
	width: 95%;
	height:0;
	margin: 0 auto;
	padding: calc(95% * calc(373 / 1001)) 0 0;
	background-image:url("../images/darius_revelation_h1_201006.png");
	background-size:100%;
	background-repeat: no-repeat;
	overflow:hidden;
	z-index:50;
}

#TOP header p {
	width: 95%;
	margin: 30px auto 0;
	text-align: center;
	font-size: 0.9em;
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 900;
    text-shadow: 1px 1px 10px rgba(0,0,0,0.60), 1px -1px 10px  rgba(0,0,0,0.60), -1px 1px 10px  rgba(0,0,0,0.60), -1px -1px 10px  rgba(0,0,0,0.60);
}
/*#TOP header p:nth-of-type(2) {font-size: 1.8em; line-height: 1.2em}*/
#TOP header p.big {font-size: 1.8em; line-height: 1.2em}
#TOP header p:nth-of-type(3) {margin: 10px auto 0;}
/*#TOP header p:last-of-type {font-size: 1.8em; line-height: 1.2em}*/
#TOP .en header p:last-of-type {font-size: 1.6em; line-height: 1.4em}

#TOP header p:nth-of-type(2) span {
	font-size: clamp(16px, 4vw, 25px);
	line-height: 1.8em;
}

#TOP header .logo {
	width: 150px;
	margin: auto;
	text-align: center;
    position: absolute;
    top: 20px;
    left: 20px;
}

header .dariusCC {
	display: block;
	width: calc(100% - 20px);
	margin: 50px auto;
}

header .dariusCC img {
	display: block;
	width: calc(100% - 20px);
	margin: auto;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.60);
}

header .dariusCC > p {
	margin: 0px auto 0 !important;
	font-size: clamp(14px, 3.4vw, 36px) !important;
}

@media only screen and (min-width: 560px) {
header h1 {font-size: 2.6em;}

#TOP header h1 {
	width: 480px;
	padding: calc(480px * calc(437 / 1280)) 0 0;
}
#TOP header p {
	width: 90%;
	margin: 50px auto 0;
	font-size: 1.1em;
    text-shadow: 0px 0px 10px #000, 0px 0px 10px #000;
}
/*#TOP header p:nth-of-type(2) {font-size: 3em; line-height: 1.2em;}*/
#TOP header p.big {font-size: 3em; line-height: 1.2em;}
/*#TOP header p:nth-of-type(3) {margin: 100px auto 0; font-size: 1.4em;}*/
/*#TOP header p:nth-of-type(4) {font-size: 2.1em; margin-top: 30px;}*/
/*#TOP header p:last-of-type {font-size: 3em; line-height: 1.2em}*/
}

@media only screen and (min-width: 960px) {
#TOP header {
    width: 100%;
    height: auto;
    margin: auto;
	padding: 150px 0 100px;
	background-image:url("../images/darius_revelation_bg_kv.jpg");
}
#TOP header > div { margin: auto;}
#TOP header .logo {
	width: 150px;
    top: 100px;
    left: 40px;
}
header > div {padding: 110px 0 50px;}
#TOP header p:nth-of-type(3) {font-size: 1.8em;}
}
/*―--------- topページ Content ----------*/


/*#Content section {
    margin-top: 100px;
}*/

#Content h2 {
    position: relative;
    margin: auto;
    font-family: 'Oswald', sans-serif;
    font-size: 2em;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
    /*background: url("../images/darius_revelation_bg.jpg");
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;*/
   /* letter-spacing: -0.1em;
    -webkit-text-stroke-width: 0.08rem;
    -webkit-text-stroke-color: rgba(201,95,255,0.70);
    text-shadow: 2px 2px 0px #FFF, 2px 1px 0px #FFF, 1px 2px 0px #FFF;*/
}
#Content h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    margin: 10px auto 0;
    background-color: #AB8AFF;
    border-radius: 10px;
}

/*#Content h2::after {
    position: absolute;
    content: attr(data-text);
    color: #FFF;
    text-shadow: 0 0 10px #000;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
}*/

#Content section {
    width: 100%;
    /*min-height: 100vh;*/
	padding: 100px 0 10px;
    /*display: flex;
    justify-content: center;
    align-items: center;*/
    position: relative;
    overflow: hidden;
    /*background-color: rgba(0,0,0,1.00);*/
}
#Content section:last-of-type {
	padding: 100px 0 100px;
}
#Content section#Titles {
	box-sizing: border-box;
	padding-top: 0px;
	margin:0px auto 0px;
}


/*#Content section > div:first-of-type { margin-top: 50px;}*/

/*#Lieup {
    position: relative;
    background-color: transparent;
    padding-bottom: 0;
    position: sticky;
    top:0;
}
#Lieup::before{
    content: "";
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: url("../images/darius_revelation_bg_darius.jpg") no-repeat;
    background-size: cover;
}*/

@media only screen and (min-width: 560px) {
#Content h2 {font-size: 2.5em; line-height: 1.4em;}
#Content h2::after {margin: 20px auto 0;}
}
@media only screen and (min-width: 960px) {
#Content section {padding: 100px 0;}
}


/*--------- topページ ---------*/
#NEWS h2 {margin: 100px auto 0;}
#NEWS > div {width: 90%; max-width: 960px; margin: 50px auto 0; text-shadow: 0 0 5px #000, 0 0 5px #000;}
#NEWS .flexBox > div:first-of-type {flex: 0 0 70%; margin: auto; text-align: center;}
#NEWS .flexBox > div:last-of-type {flex: 1 1 100%; padding-top: 20px;}
:is(#NEWS div > ul >li, .modaal-wrapper div > ul >li) +li {margin-top: 30px;}
/*#NEWS div > ul > li+li {margin-top: 30px;}*/
:is(#NEWS li, .modaal-wrapper li) ul {list-style-type: circle; margin: 10px 0 0 1em;}
/*#NEWS li > ul, .modaal-wrapper li > ul {list-style-type: circle; margin: 10px 0 0 1em;}*/
:is(##NEWS, .modaal-wrapper) time {font-weight: bold;}
/*#NEWS time {font-weight: bold;}*/
#NEWS ul li p {margin-top: 5px;}
#NEWS ul li p a {border-bottom: 1px solid #FFF; padding-bottom: 2px;}
#NEWS .reservation { text-align: center; font-size: 1.4em; font-weight: bold; margin-top: 100px;}
#NEWS .reservation a { padding-bottom: 2px; border-bottom: 2px solid #FFF;}
#NEWS a.modal {
    display: block;
    width: 150px;
    margin: 50px auto 0;
    padding: 5px;
    background: rgba(0,0,0,0.30);
    border: 2px solid #FFF;
    border-radius: 50px;
    text-align: center;
    font-family: 'Oswald', sans-serif;
}

#NEWS .download { text-align: center; font-size: 1.2em; font-weight: bold;}
#NEWS .download p.eShop_G a, #NEWS .download p.eShop_B a {
    display: block;
    width: 400px;
    margin: 20px auto 0;
    padding: 10px;
    background: rgba(0,0,0,0.70);
    border: 2px solid #FFF;
    border-radius: 10px;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    line-height: 1.4em;
}
#NEWS .download p:first-of-type {
    position: relative;
    margin: auto;
    font-size: 1.4em;
    font-weight: 700;
    color: #FFFFFF;
    text-align: center;
}
#NEWS .download p:first-of-type::after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    margin: 10px auto 0;
    background-color: #AB8AFF;
    border-radius: 10px;
}
#NEWS .download .consumer {
    display: block;
    margin: 50px auto 0;
}


@media only screen and (min-width: 560px) {
}
@media only screen and (min-width: 960px) {
#NEWS h2 {margin: 200px auto 0;}
#NEWS .flexBox > div:first-of-type {flex: 0 0 30%; margin: auto; text-align: center;}
#NEWS .flexBox > div:last-of-type {flex: 0 0 70%; padding-top: 20px;}
#NEWS ul {max-width: 640px; }
#NEWS .reservation {font-size: 2.4em;}
#TOP #Content #Product {padding-bottom: 200px;}
}


#About > div {width: 90%; max-width: 960px; margin: 50px auto 0; text-shadow: 0 0 5px #000, 0 0 5px #000;}
#About p {font-size: 0.9em; margin-top: 15px;}
@media only screen and (min-width: 960px) {
}


#TOP #Product .content {width: 90%; max-width: 560px; margin: 50px auto 0; text-shadow: 0 0 5px #000, 0 0 5px #000;}
#TOP #Product dt {font-weight: bold;}
#TOP #Product dd {padding-top: 5px; padding-left: 0.5em; font-size: 0.9em;}
@media only screen and (min-width: 960px) {
#TOP #Product .content {max-width: 400px;}
}


/*--------- TITLEページ ---------*/
#Titles #LINK {width: 90%; max-width: 960px; margin: 100px auto; z-index: 100;}
#Titles h2 {margin: 0px auto 50px;}
#Titles h3 {width: 100%; max-width: 960px; margin: 50px auto 0; padding: 5px 0 5px 18px; font-size: 1.4em; line-height: 1.4em; text-shadow: 0 0 5px #000; position: relative;}
#Titles h3::before {
	content: "";
	width: 8px;
	height: 100%;
	background-color: #14b5a8;
	position: absolute;
	top: 1px;
	left: 0;
}
#Titles > div .flexBox > div {margin-top: 30px;}
#Titles > div > div {width: 90%; max-width: 960px; margin: 50px auto 0; text-shadow: 0 0 5px #000, 0 0 5px #000; font-size: 0.9em; z-index: 100;}
#Titles > div#GDARIUS > div:first-of-type,
#Titles > div#DBACEX > div:first-of-type {
    width: 100%;
    max-width: 960px;
    margin: 50px auto 0;
    padding: 100px 20px;
    text-shadow: 0 0 5px #000, 0 0 5px #000;
    font-size: 1em;
    overflow: hidden;
}
#Titles > div#DBACEX > div {
	border: none;
	background: none;
}
#Titles ul {margin: 30px auto 0; list-style: disc; padding-left: 1em;}
#Titles li+li {margin-top: 20px;}
#Titles p {margin: 30px auto 0; text-shadow: 0 0 5px #000; position: relative; z-index: 50;}
#Titles .gdarius {width: 70%; margin: auto;}
#Titles .dbacex {width: 95%; margin: 50px auto 0;}

/*20/12/11 更新*/
#Titles > div#DBACEX .eventList table {
    margin-top: 40px;
    border-collapse: collapse;
    background-color: rgba(0,0,0,0.40);
}
#Titles > div#DBACEX .eventList th, #Titles > div#DBACEX .eventList td {
    border: 1px solid #FFF;
    padding: 5px 10px;
    box-sizing: border-box;
}
#Titles > div#DBACEX .eventList th {width: 16%;}
#Titles > div#DBACEX .eventList th.story {width: 50%;}
#TITLE a.modal.eventList {
    display: block;
    width: 250px;
    margin: 0px auto 0;
    padding: 3px 5px 5px;
    background: rgba(0,0,0,0.30);
    border: 2px solid #FFF;
    border-radius: 50px;
    text-align: center;
    /*font-family: 'M PLUS 1p', sans-serif;*/
}
#TITLE .modaal-container {max-width: 1280px;}
#TITLE .modaal-content-container {padding: 0px;}

/*21/3/15 更新*/
#Titles > div#GDARIUS > div:first-of-type a,
#Titles > div#DBACEX > div:first-of-type a {
    display: block;
    width: 90%;
    max-width: 260px;
    margin: 50px auto 0;
    padding: 5px 0px 5px 10px;
    text-align: center;
    font-size: 1em;
    color: #222;
    font-weight: bold;
    text-shadow: none;
    background-color: #FFF;
    border: solid 2px #666;
    border-radius: 50px;
    box-shadow: 0px 0px 20px 0px #FFF;
    position: relative;
    z-index: 10px;
}

/*22/3/23 更新*/
/*#Titles .flexBox > div {flex: 0 0 calc(calc(100% / 2) - 20px);}*/

@media only screen and (min-width: 960px) {
#Titles .flexBox {justify-content: center; align-items: center;}
#Titles > div .flexBox {justify-content: space-between; align-items: stretch;}
#Titles .flexBox > div {flex: 0 0 calc(calc(100% / 2) - 20px);}
#Titles .gdarius {width: 38%; margin: auto;}
#Titles .dbacex {width: 50%; margin: 0 auto 0;}
#Titles > div#GDARIUS > div:first-of-type p,
#Titles > div#DBACEX > div:first-of-type p {
    max-width: 540px;
    margin: 50px auto 0;
}
}
@media only screen and (max-width: 800px) {
#Titles > div#DBACEX .eventList { overflow-x: scroll; -webkit-overflow-scrolling: touch;}
/*#Titles > div#DBACEX .eventList tr {width: 640px;}*/
#Titles > div#DBACEX .eventList table {width: 640px;}
#Titles > div#DBACEX .eventList th {width: auto;}
#Titles > div#DBACEX .eventList td {width: 100px; font-size: 0.8em;}
#Titles > div#DBACEX .eventList td.story {width: 300px !important;}
}


/*--------- Productページ ---------*/
#PRODUCTS .bg_grid {background-color : rgba(0,0,0,0.50);}
#Product .content {width: 90%; max-width: 560px; margin: 50px auto 0; text-shadow: 0 0 5px #000, 0 0 5px #000;}
#Product dt {font-weight: bold;}
#Product dd {padding-top: 5px; padding-left: 0.5em; font-size: 0.9em;}
@media only screen and (min-width: 960px) {
/*#PRODUCTS #Content #Product {padding-bottom: 0;}*/
#PRODUCTS #Content #Product {padding-bottom: 200px;}
#Product .content {max-width: 960px; margin: auto; justify-content: space-between; align-items: center;}
#Product .content > div:first-of-type {flex: 0 0 40%;}
#Product .content > div:last-of-type {flex: 0 0 calc(60% - 20px); padding: 0 0 0 20px;}
}

#PRODUCTS #lineUp {
    display: block;
    width: 100%;
    height: 0;
    padding: 100px 0;
    text-align: center;
    position: relative;
    z-index: 100;
}
#PRODUCTS #lineUp a {
    display: block;
    width: 90%;
    max-width: 450px;
    padding: 10px 0;
    margin: auto;
    background-color: rgba(0,0,0,0.60);
    border: 1px solid #DDD;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 2em;
    font-weight: 700;
}
#PRODUCTS #lineUp small {display: block; font-size: 0.5em;}

#Products > div {width: 90%; max-width: 960px; margin: 50px auto 0; text-shadow: 0 0 5px #000, 0 0 5px #000;}
#Products > div+div {margin: 100px auto 0;}
#Products .flexBox > div {flex: 0 0 100%; max-width: 640px; margin: auto;}
#Products .flexBox > div:first-of-type {text-align: center;}
#Products .Privilege {max-width: 640px; margin: auto;}
#Products h2,
#Products h3 {width: 100%; margin: 50px auto; line-height: 1.4em;}
#Products h2 {font-size: 1.5em;}
#Products h3 {padding: 5px 0 5px 18px;}
#Products h3::before {
	content: "";
	width: 8px;
	height: 100%;
	background-color: #14b5a8;
	position: absolute;
	top: 1px;
	left: 0;
}
#Products h4 {font-size: 1.1em; margin: 0px auto; text-align: center;}
#Products h4::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin: 10px auto 0 0;
    background-color: #FF5353;
    border-radius: 10px;
}
#Products .flexBox.special h4::after {background-color: #5577FF;}
#Products p,
#Products li {font-size: 0.9em; line-height: 1.6em;}
#Products p+p {margin: 10px auto 0;}
#Products ul {padding-left: 1em;}
#Products li {list-style-type: disc;}
#Products li+li {margin-top: 5px;}

#Products dt {font-size: 1.1em; font-weight: bold;}
#Products dd {font-size: 0.9em; margin-top: 5px;}

#Products .linkbox > div {margin: 50px auto 0;}
#Products .link {margin: 30px auto 0px; width: 90%;}
#Products .Privilege .link {margin-top: 10px;}
#Products .link a {
    display: block;
    width: 100%;
    padding: 5px 0;
    background-color: rgba(0,0,0,0.60);
    border: 1px solid #DDD;
    text-align: center;
}
#Products .link a+a {margin-top: 20px;}

#Products .flexBox.special {width: 95%; margin: auto;}
#Products .flexBox.special > div > div:first-of-type {width: 90%; margin: auto;}
#Products .flexBox.special > div > div:last-of-type {text-align: left;}
#Products .flexBox.special h4 {margin: 20px auto;}
#Products .flexBox.special > div+div {margin: 50px auto 0;}

/*#Products #specialEdition .flexBox+.flexBox {margin-top: 50px;}
#Products #specialEdition .flexBox div:first-of-type {flex: 0 0 80%; margin: auto;}
#Products #specialEdition .flexBox:first-of-type div:first-of-type {flex: 0 0 100%; margin: auto;}*/

#Products .flexBox.boxset7-3 {align-items: flex-start;}
#Products .flexBox.boxset7-3 > div:first-of-type {flex: 0 0 100%; text-align: left;}
#Products .flexBox.boxset7-3 > div:last-of-type {flex: 0 0 100%; padding-top: 30px;}

#Products .dlEdition+.dlEdition {margin-top: 100px;}
#Products .dlEdition .flexBox div {flex: 0 0 100%;}
#Products .dlEdition .link {margin-top: 50px;}

#Products .Privilege h3 { margin: 60px auto 20px;}

/*20.12.07 追記*/
#Products details {margin: 20px auto;}
#Products details summary {
    padding: 3px 10px 5px;
    border: solid #FFF 1px;
    font-size: 0.9em;
    cursor: pointer;
}
#Products details[open] .details-content {
	-webkit-transition: fadeIn 0.5s ease;
	-moz-transition: fadeIn 0.5s ease;
	-o-transition: fadeIn 0.5s ease;
	transition: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {opacity: 0; transform: translateY(-10px);}
  100% {opacity: 1; transform: none;}
}
#Products details ol {margin-top: 10px;}
#Products details ol li {list-style-type: decimal-leading-zero;}
#Products details ol li+li {margin-top: 10px;}
#Products details ol li p {font-size: 1em;}
#Products details ol li small {font-size: 0.8em;}

#Products details div {margin-top: 20px;}
#Products details div p {font-weight: bold; margin-top: 20px;}
#Products details div p span {color: #AB8AFF;}
#Products details div p small {font-weight: normal; line-height: 1em; padding-top: 10px;}

@media only screen and (min-width: 560px) {
#Products .flexBox.special {width: 80%; margin: auto;}
#Products .flexBox.boxset7-3 > div:last-of-type {flex: 0 0 80%; margin: auto; padding-top: 40px;}
}
@media only screen and (min-width: 960px) {
#Products .flexBox > div {max-width: none;}
#Products .flexBox.mainItems div:first-of-type {flex: 0 0 40%; margin: auto;}
#Products .flexBox.mainItems div:last-of-type {flex: 0 0 55%; margin: auto;}
#Products h2 {font-size: 1.7em; text-align: left; margin-top: 0;}
#Products h2::after {width: 120px; height: 5px; margin: 15px 0 0;}
#Products h3.special {margin-bottom: 0;}
#Products .flexBox.special {width: 100%;}
#Products .flexBox.special > div {flex: 0 0 45%; margin: 50px auto 0;}
#Products .flexBox.special > div > div:first-of-type {width: auto; height: 270px; margin: auto; text-align: center;}
#Products .flexBox.special > div > div:first-of-type img {max-height: 100%; margin: auto;}
/*#Products .flexBox.special {width: 100%; margin: auto;}
#Products .flexBox.special > div {flex: 0 0 45%; margin: 50px auto 0;}
#Products .flexBox.special > div > div:first-of-type {width: auto; height: 270px; margin: auto; text-align: center;}
#Products .flexBox.special > div > div:first-of-type img {max-height: 100%; margin: auto;}*/
#Products .Privilege {max-width: 960px;}
#Products .Privilege .pconly {display: inline;}

#Products .linkbox {justify-content: space-between;}
#Products .linkbox > div {flex: 0 0 48%;}
#Products #dlEdition .flexBox.mainItems .link {margin: 40px auto 0px;}

#Products .flexBox.boxset7-3 > div:first-of-type {flex: 0 0 70%;}
#Products .flexBox.boxset7-3 > div:last-of-type {flex: 0 0 30%; padding: 0 0 0 10px; margin-top: 0;}
}


/*--------- SPECIALページ ---------*/
#MOVIE .boxset2 > div {margin: 50px auto 0;}
#MOVIE .boxset2 > div p {width: 95%; max-width: 960px; margin: 0px auto 0; font-family: 'M PLUS 1p', sans-serif; font-weight: 900; font-size: 1.2em;}
#MOVIE div.movie {width: 95%; max-width: 960px; margin: 20px auto 0; padding: calc(95% * 0.5625) 0 0; position: relative; overflow: hidden;}
#MOVIE div.movie iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

#Board > div:first-of-type {
    width: 95%;
    max-width: 640px;
    margin: 50px auto 0;
}
#Board .boxset2 > div {margin: 50px auto 0;}
#Board .boxset2 > div p {width: 95%; max-width: 960px; margin: 0px auto 0; font-family: 'M PLUS 1p', sans-serif; font-weight: 900; font-size: 1.2em;}
#Board div.thumbnail {width: 95%; max-width: 960px; margin: 20px auto 0; position: relative; overflow: hidden;}
#Board a.button {display: block; width: 90%; max-width: 250px; margin: 20px auto 0; padding: 10px;
    background: rgba(0,0,0,0.70);
    border: 2px solid #FFF;
    border-radius: 50px;
    text-align: center;
    /*font-family: 'Oswald', sans-serif;*/
    font-weight: bold;
    font-size: 1em;
    line-height: 1em;
}

#Message > div.message {
    display: flex;
    flex-flow: row wrap;
    width: 95%;
    max-width: 960px;
    margin: 50px auto 0;
    padding: 20px 0;
    background-color: rgba(0,0,0,0.50);
}
#Message > div.message h3 {
    margin: auto;
    padding: 20px 0;
    text-align: center;
    font-size: 1em;
}
#Message > div.message small {font-size: 0.7em;}
#Message > div.message > div:first-of-type {
    order: 2;
    max-width: 200px;
    margin: auto;
    padding: 20px;
    text-align: center;
}
#Message > div.message > div:last-of-type {
    padding: 20px 10px;
    font-size: 0.9em;
}
@media only screen and (min-width: 560px) {
#Message > div.message {display: block; overflow: hidden; margin: 100px auto 0;}
#Message > div.message h3 {font-size: 1.4em;}
#Message > div.message small {font-size: 0.8em;}
#Message > div.message > div:first-of-type {
    width: calc(100% / 2.5);
    max-width: 300px;
    padding: 20px 20px 10px;
    float: left;
}
#Message > div.message > div:last-of-type {padding: 20px;}
}
@media only screen and (min-width: 960px) {
}
@media only screen and (min-width: 1010px) {
#MOVIE > div.movie {padding: calc(1010px * 0.5625) 0 0;}
}


#UPDATE > div {
    display: block;
    width: calc(100% - 40px);
    max-width: 960px;
    margin: 100px auto 0;
}
#UPDATE h3 {
    padding: 5px 0 5px 18px;
    position: relative;
}
#UPDATE h3::before {
	content: "";
	width: 8px;
	height: 100%;
	background-color: #14b5a8;
	position: absolute;
	top: 1px;
	left: 0;
}
#UPDATE h5 {
	font-size: 1em;
	font-weight: bold;
	margin: 20px 0 0;
}
#UPDATE > a {
    width: calc(100% - 40px);
    max-width: 560px;
    display: block;
    margin: 50px auto 0;
    padding: 5px 10px;
    background-color: rgba(0,0,0,0.50);
    border: solid 1px #FFF;
    border-radius: 10px;
    text-align: center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#UPDATE ul {
	list-style: disc;
	padding-left: 1em;
	margin: 10px 0 0;
	font-size: 0.9em;
}

#UPDATE li:nth-of-type(n+2) {
	margin: 10px 0 0;
}

#UPDATE #GDARIUSHD div,
#UPDATE #DBACEX div {
    display: block;
    margin-top: -50px;
    padding-top: 50px;
}
#UPDATE #GDARIUSHD div,
#UPDATE #DBACEX div {
    display: block;
    margin: 30px auto 0;
    padding: 20px;
    background-color: rgba(0,0,0,0.50);
    border: solid 1px #FFF;
}
#UPDATE #GDARIUSHD h4,
#UPDATE #DBACEX h4 {
    display: block;
    margin: 0px auto 0;
    font-size: 1.2em;
}
#UPDATE #GDARIUSHD time,
#UPDATE #DBACEX time {
    display: block;
    margin: 20px 0 0;
    text-align: right;
}
#UPDATE .postscript time {
	display: inline-block;
    margin: 0;
    text-align: left;
}
#UPDATE #GDARIUSHD p:first-of-type,
#UPDATE #DBACEX p:first-of-type {
    margin-top: 20px;
}
@media only screen and (min-width: 560px) {

.sponly {display: none;}

}
@media only screen and (min-width: 960px) {

}

/*―--------- topページ Content ----------*/


/*フッター*/
footer {
    width: 100%;
    padding: 100px 20px;
    background-color: #231815;
    position: relative;
    z-index: 25;
    color: #FFF;
    font-size: 0.8em;
    text-align: center;
    letter-spacing: 0.2em; }
footer>p, footer>small {display: block; margin: 50px auto 0;}
footer ul {
    padding: 0;
    margin: 50px auto 0;
    text-align: center;
    font-size: 0.9em; }
footer ul li {
    display: inline-block;
    list-style-type: none;
    border-right: 1px #eee solid;
    padding: 0 10px;
    text-align: center;
    line-height: 1; }
footer ul li:last-child {border: none; }
footer ul li a {
    color: #FFF;
    text-decoration: none;
    cursor: pointer; }
footer ul li a:visited {color: #FFF; }
footer ul li a:hover {color: #FFF; }
footer ul li a:focus {outline: none; }
footer .logo {
    max-width: 150px;
    margin: 50px auto 0;
    text-align: center; }
footer .copyright {
    margin: 20px auto 0;
    font-size: 0.8em;
    text-align: center; }



/*SNS ボタン*/
.shareBox {
	width: 230px;
	margin: 0 auto 0;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: flex-start;
}

.shareButtons {flex: 0 0 auto;}

.shareButtons a {
	display: block;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	background-size: 50px;
}

/*.tweetBtn {background: url(../images/svg_logo_tw_wob.svg) no-repeat;}
.fbBtn {background: url(../images/svg_logo_fb_color.svg) no-repeat;}
.lineBtn {background: url(../images/svg_logo_line_fc.svg) no-repeat;}*/
.instBtn {background: url("../images/svg_logo_inst_wt.svg") no-repeat; }
.tweetBtn {background: url(../images/sns_ico_02_tw.svg) no-repeat;}
.fbBtn {background: url(../images/sns_ico_01_fb.svg) no-repeat;}
.lineBtn {background: url(../images/sns_ico_03_line.svg) no-repeat;}

/*nav*/
#global-nav {
	width: 100%;
	display: block;
	position: fixed;
	top: 0;
	z-index: 999;
	text-align: center;
	margin: 0;
	box-sizing: border-box;
}

#global-nav .menu {
	display: none;
	width: 100%;
}

#global-nav .menu li {
	display: block;
	width: 100%;
	border-top: 1px #aaaaaa solid;
	background-color: rgba(0,0,0,0.80);
}

#global-nav .menu li a {
	display: block;
	width: 100%;
	padding: 20px 5px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.4em;
    font-weight: 700;
}

#global-nav .menu li.none a {
	pointer-events: none;
	color: #888;
}

#global-nav .menu li span {
	display: block;
	font-size: 0.8em;
	margin-top: -2px;
}

@media only screen and (min-width: 960px) {

#global-nav {
	background-color: rgba(0,0,0,0.60);
	padding-top: 85px;
	margin-top: -85px;
}

#global-nav .inner {
	width: 100%;
	max-width: 1280px;
	margin: auto;
}

#global-nav ul.menu {
	display: flex;
	width: 100%;
	margin: auto;
	padding: 10px;
	border: none;
	justify-content:space-between;
}

#global-nav .menu li {
	border: none;
	background-color: transparent;
	font-weight: bold;
}

#global-nav .menu li a {
	color: #FFF;
	padding: 10px 5px;
    font-size: 1.0em;
	position: relative;
}

#global-nav .menu li span {
	display: block;
	font-size: 0.8em;
}

#global-nav .menu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  background-color: #FFFFFF;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
	
#global-nav .menu li a:hover::after {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
}

.menu-trigger {
	display: none;
}

}

/*ハンバーガー*/
.menu-trigger,
.menu-trigger span {
	display: block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger {
	position: absolute;
	width: 50px;
	height: 45px;
	top: 20px;
	right: 10px;
	background-color: rgba(0,0,0,0.50);
	padding: 10px;
	border: 2px solid #FFF;
	border-radius: 5px;
}
.menu-trigger span {
	position: absolute;
	left: 15%;
	width: 70%;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
}

.menu-trigger span:nth-of-type(1) {
	top: 20%;
}
.menu-trigger span:nth-of-type(2) {
	top: 45%;
}
.menu-trigger span:nth-of-type(3) {
	bottom: 20%;
}

.menu-trigger.active span:nth-of-type(1) {
	transform: translateY(260%) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
	transform: translateY(-250%) rotate(45deg);
}

@media only screen and (min-width: 960px) {

.menu-trigger {display: none;}

}

.YouTube {
	width: 100%;
	height: auto;
	margin: 0px auto;
	position: relative;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.YouTube iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}