@charset "UTF-8";
/*==================================================*/
/* 前提css */
/*==================================================*/
@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Condensed:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Roboto+Condensed:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
a, article, blockquote, body, caption, dd, div, dl, dt, footer, h1, h2, h3, h4, h5, h6, header, html, iframe, img, li, nav, ol, p, pre, section, small, span, strong, table, td, th, tr, ul, figure {
  background: 0;
  border: 0;
  font-size: 100%;
  line-height: 1;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: bottom; }

a, small, span, strong {
  vertical-align: baseline; }

article, footer, header, nav, section {
  display: block; }

li {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

address, th {
  font-style: normal; }

:focus, a:focus {
  outline: 0; }

br {
  letter-spacing: normal; }

img {
  height: auto;
  max-width: 100%; }

textarea {
  resize: none; }

a {
  text-decoration: none; }

/*==================================================*/
/* レスポンシブ用css */
/*==================================================*/
.pc {
  display: block; }
  .pc.inline {
    display: inline; }
  .pc.flex {
    display: flex; }

.sp {
  display: none; }
  .sp.inline {
    display: none; }
  .sp.flex {
    display: none; }

@media (max-width: 480px) {
  .pc {
    display: none; }
    .pc.inline {
      display: none; }
    .pc.flex {
      display: none; }

  .sp {
    display: block; }
    .sp.inline {
      display: inline; }
    .sp.flex {
      display: flex; } }
/*==================================================*/
/* fonts */
/*==================================================*/
.kr {
  font-family: "Noto Sans KR", sans-serif !important; }

.sc {
  font-family: "Noto Sans SC", sans-serif !important; }

.tc {
  font-family: "Noto Sans TC", sans-serif !important; }

/*==================================================*/
/* common */
/*==================================================*/
.pc {
  display: block; }
  @media (max-width: 768px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media (max-width: 768px) {
    .sp {
      display: block; } }

a {
  color: #fff;
  text-decoration: none;
  cursor: pointer; }

img {
  object-fit: contain;
  height: auto;
  max-width: 100%; }

body {
  background: #060606;
  background-size: cover;
  font-family: 'Noto Sans JP', 'Koulen', cursive, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  position: relative; }

/*==================================================*/
/* utility */
/*==================================================*/
.pc-flex {
  display: flex; }
  @media (max-width: 1100px) {
    .pc-flex {
      display: block; } }

/*==================================================*/
/* bg */
/*==================================================*/
.parallax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: 770px;
  z-index: -2;
  overflow: hidden; }
  .parallax-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 120vh;
    min-height: 800px;
    transform: translate(-50%, -50%);
    -webkit-filter: brightness(90%) blur(2px);
    -moz-filter: brightness(90%) blur(2px);
    filter: brightness(90%) blur(2px); }
  @media (max-width: 1100px) {
    .parallax-item {
      width: 200vw;
      height: 200vh; } }
  @media (max-width: 768px) {
    .parallax-item {
      width: 300vw;
      height: 300vh; } }

.overlay {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 800px;
  background: url("https://www.arcsystemworks.jp/dd_collection/assets/img/bg_dot.png") repeat;
  z-index: 0;
  opacity: 1; }

/*==================================================*/
/* container */
/*==================================================*/
.contents-container {
  position: relative;
  height: 100vh;
  text-align: center;
  color: #fff;
  z-index: 0; }

/*
.wrapper{
  position: relative;
  width: 100%;
  overflow: hidden;
}*/
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1; }

/*==================================================*/
/* header */
/*==================================================*/
.header {
  display: block;
  position: relative;
  color: #000; }
  .header .main-area {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    min-height: 800px; }
    @media (max-width: 768px) {
      .header .main-area {
        height: auto;
        min-height: 720px; } }
  .header .lang-area {
    position: absolute;
    top: 24px;
    right: 20px;
    font-size: 16px;
    cursor: pointer; }
    .header .lang-area #lang-nav {
      width: 140px;
      color: #000;
      background-color: #fff;
      padding: 12px 0 14px;
      border: 1px solid #000; }
    .header .lang-area .arrow {
      margin-left: 8px; }
    .header .lang-area .lang-list {
      display: none;
      position: relative;
      z-index: 20; }
      .header .lang-area .lang-list.open {
        display: block; }
      .header .lang-area .lang-list li {
        width: calc(100% - 2px);
        margin: 0 auto;
        background-color: #fff;
        transition: .3s; }
        .header .lang-area .lang-list li a {
          display: block;
          color: #000;
          font-size: 18px;
          padding: 12px 24px;
          box-sizing: border-box; }
        .header .lang-area .lang-list li:hover {
          opacity: .84; }
  .header .pl-area {
    position: absolute;
    top: 0;
    left: 0; }
    .header .pl-area .sw {
      max-width: 100px; }
      @media (max-width: 768px) {
        .header .pl-area .sw {
          width: 24vw; } }
  .header .mv-area {
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: 45%;
    max-width: 350px; }
    .header .mv-area a {
      transition: .3s; }
      .header .mv-area a:hover {
        opacity: .7; }
  .header .topics-area {
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 43%;
    max-width: 450px; }
    .header .topics-area a {
      transition: .3s; }
      .header .topics-area a:hover {
        opacity: .7; }
  .header .kv-area {
    position: relative;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%; }
    @media (max-width: 768px) {
      .header .kv-area {
        position: absolute;
        top: 50%; } }
    .header .kv-area .ttl_logo img {
      filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.5)); }

.ttl_logo {
  width: 50%;
  max-width: 674px;
  margin: 0 auto;
  margin-bottom: 40px; }
  @media (max-width: 768px) {
    .ttl_logo {
      width: 90%;
      max-width: 470px;
      margin-bottom: 5.33vw; } }
  @media (max-width: 480px) {
    .ttl_logo {
      margin-bottom: 4.166666666666666vh; } }

.release {
  width: 50%;
  max-width: 643px;
  margin: 0 auto; }
  @media (max-width: 768px) {
    .release {
      width: 78%;
      max-width: 500px;
      margin-bottom: 13.333333333333334vw; } }
  @media (max-width: 480px) {
    .release {
      margin-bottom: 4.166666666666666vh; } }

/*==================================================*/
/* footer */
/*==================================================*/
.footer {
  background: #060606;
  text-align: center;
  padding: 40px 0 16px; }
  .footer .logo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px; }
    .footer .logo-area li {
      margin-right: 30px; }
      .footer .logo-area li:last-of-type {
        margin-right: 0; }
      .footer .logo-area li:hover a {
        opacity: .7;
        transition: .3s; }
    .footer .logo-area img {
      max-width: 60px; }
  .footer .copyright {
    color: #fff;
    font-size: 12px;
    line-height: 1.5; }
  .footer .space {
    margin-right: 4px; }

/*==================================================*/
/* about */
/*==================================================*/
#about {
  background: rgba(0, 0, 0, 0.92);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color: #fff; }
  #about .wrapper {
    padding: 100px 0 .1px; }
    @media (max-width: 768px) {
      #about .wrapper {
        padding: 9.09vw 0 10.91vw; } }
  #about .ttl {
    font-size: 2.1875vw;
    letter-spacing: 0.03em;
    margin-bottom: 6.25vw; }
    @media (max-width: 768px) {
      #about .ttl {
        font-size: 3.2vw;
        margin-bottom: 7.27vw; } }
    #about .ttl p {
      line-height: 1.6; }
    #about .ttl .strong {
      color: #f4ec3a;
      font-size: 2.34375vw; }
      @media (max-width: 768px) {
        #about .ttl .strong {
          font-size: 3.5999999999999996vw; } }
  #about .cont-box {
    margin: 0 auto;
    margin-bottom: -0.01em; }
    @media (max-width: 768px) {
      #about .cont-box {
        padding: 0 5.333333333333334vw; } }
    #about .cont-box li {
      background: #2e499d; }
      #about .cont-box li:nth-child(odd) {
        flex-direction: row-reverse;
        background: #a11622; }
      @media (max-width: 768px) {
        #about .cont-box li {
          margin-bottom: 10.91vw; }
          #about .cont-box li:last-of-type {
            margin-bottom: 0; } }
    #about .cont-box .cont-l {
      width: 64%; }
      @media (max-width: 1100px) {
        #about .cont-box .cont-l {
          width: 100%; } }
    #about .cont-box .cont-r {
      width: 36%;
      padding: 3.90625vw 3.125vw;
      text-align: left;
      box-sizing: border-box; }
      #about .cont-box .cont-r:first-of-type {
        margin-left: 0; }
      @media (max-width: 1100px) {
        #about .cont-box .cont-r {
          width: 100%;
          margin-left: 0; } }
      #about .cont-box .cont-r h3 {
        color: #fff;
        font-size: 1.875vw;
        margin-bottom: 2.8125vw; }
        @media (max-width: 1100px) {
          #about .cont-box .cont-r h3 {
            font-size: 2.8000000000000003vw; } }
        @media (max-width: 768px) {
          #about .cont-box .cont-r h3 {
            font-size: 3.733333333333334vw; } }
      #about .cont-box .cont-r .txt {
        font-size: 1.40625vw;
        line-height: 1.75; }
        @media (max-width: 1100px) {
          #about .cont-box .cont-r .txt {
            font-size: 2.1333333333333333vw; } }
        @media (max-width: 768px) {
          #about .cont-box .cont-r .txt {
            font-size: 3.2vw; } }

/*==================================================*/
/* titles */
/*==================================================*/
#titles {
  background: url("https://www.arcsystemworks.jp/dd_collection/assets/img/kv_bg.jpg");
  background-size: cover;
  background-position: center;
  color: #fff;
  /*Swiper*/ }
  #titles .wrapper {
    padding: 100px 20px 80px; }
    @media (max-width: 768px) {
      #titles .wrapper {
        padding: 16vw 1.82vw 10.91vw; } }
  #titles .ttl {
    margin-bottom: 80px; }
    @media (max-width: 768px) {
      #titles .ttl {
        width: 90%;
        margin-bottom: 13.333333333333334vw; } }
    #titles .ttl p {
      font-size: 20px;
      margin-top: -10px;
      letter-spacing: .05em;
      font-weight: 500;
      color: #f4e439; }
  #titles .swiper {
    max-width: 840px; }
  #titles .swiper-slide {
    --add-bottom: 50px;
    padding-bottom: var(--add-bottom); }
    #titles .swiper-slide img {
      border: solid 1px #2b2b2b; }
  #titles .swiper-slide [class^="swiper-button-"] {
    top: calc(50% - var(--add-bottom) / 2); }
  #titles .swiper-button-prev, #titles .swiper-button-next {
    color: #fff; }
  #titles .swiper-pagination-bullet {
    border-radius: 0;
    background: #e5e5e5; }
  #titles .swiper-pagination-bullet-active {
    background: #f4e439; }
  #titles .ttl-txt {
    font-size: 20px;
    margin-top: 20px;
    line-height: 2; }
    #titles .ttl-txt span {
      background: #000;
      padding: 2px 4px; }

/*==================================================*/
/* spec */
/*==================================================*/
#spec {
  background: rgba(5, 10, 28, 0.8);
  color: #fff; }
  #spec .wrapper {
    padding: 100px 20px 80px; }
    @media (max-width: 768px) {
      #spec .wrapper {
        padding: 16vw 1.82vw 10.91vw; } }
  #spec .ttl {
    margin-bottom: 80px; }
    @media (max-width: 768px) {
      #spec .ttl {
        width: 90%;
        margin-bottom: 13.333333333333334vw; } }
    #spec .ttl p {
      font-size: 20px;
      margin-top: -10px;
      letter-spacing: .05em;
      font-weight: 500;
      color: #f4e439; }
  #spec .cont-box {
    display: flex;
    max-width: 900px;
    margin: 0 auto; }
    @media (max-width: 1100px) {
      #spec .cont-box {
        display: block; } }
    #spec .cont-box .cont-l {
      width: 30%;
      margin-right: 5%; }
      #spec .cont-box .cont-l img {
        border: 1px solid #fff; }
      #spec .cont-box .cont-l .attention {
        display: inline-block;
        font-size: 14px;
        line-height: 1.35;
        margin-top: 10px;
        text-align: left; }
        @media (max-width: 1100px) {
          #spec .cont-box .cont-l .attention {
            width: 100%;
            max-width: 375px;
            margin: 0 auto;
            margin-top: 1.6vw; } }
        #spec .cont-box .cont-l .attention.asia {
          font-size: 12px; }
          @media (max-width: 1100px) {
            #spec .cont-box .cont-l .attention.asia {
              font-size: 14px; } }
      @media (max-width: 1100px) {
        #spec .cont-box .cont-l {
          width: 70%;
          margin: 0 auto;
          margin-bottom: 50px; } }
    #spec .cont-box .cont-r {
      width: 65%; }
      #spec .cont-box .cont-r .spec-ttl {
        display: flex;
        font-size: 16px;
        margin-bottom: 16px; }
        @media (max-width: 768px) {
          #spec .cont-box .cont-r .spec-ttl {
            display: block; } }
        #spec .cont-box .cont-r .spec-ttl dt {
          width: 140px;
          padding: 12px;
          margin-right: 24px;
          background-color: #071437; }
          @media (max-width: 768px) {
            #spec .cont-box .cont-r .spec-ttl dt {
              width: auto;
              font-size: 18px;
              margin-right: 0; } }
        #spec .cont-box .cont-r .spec-ttl dd {
          font-size: 20px;
          line-height: 40px; }
      @media (max-width: 1100px) {
        #spec .cont-box .cont-r {
          width: 90%;
          max-width: 560px;
          margin: 0 auto; } }