@charset "UTF-8";

/* ========================================
mainArea
======================================== */
.mainArea {
  background: #0c121c;
  padding: 0 0 64px;
}
.mainArea .imgTxtBlk {
  position: relative;
  display: flex;
  flex-flow: wrap;
  margin: 0 auto;
  max-width: 1600px;
  height: 840px;
}
.mainArea .imgTxtBlk .mainImg {
  display: block;
  width: 71%;
  /* background: url("../img/kv.webp") no-repeat; */
  background-size: cover;
  background-position: center;
}
.mainArea .imgTxtBlk .mainImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
.mainArea .imgTxtBlk .txtGlp {
  position: absolute;
  right: 3%;
  top: 18%;
}
.mainArea .imgTxtBlk .txtGlp .logoObj {
  width: 474px;
  margin: 0;
}
.mainArea .imgTxtBlk .txtGlp .subTtlObj {
  text-align: right;
  margin: 64px 0 0;
  line-height: 1;
}
.mainArea .imgTxtBlk .txtSet {
  position: absolute;
  bottom: 11%;
  right: 3%;
}
.mainArea .imgTxtBlk .txtSet .txtObj {
  background: #0c121c;
  padding: 0 0.5em;
  margin: 0;
}

@media (width <=900px) {
  .mainArea {
    padding: 0 0 30px;
  }
  .mainArea .imgTxtBlk {
    justify-content: center;
    height: auto;
  }
  .mainArea .imgTxtBlk .mainImg {
    order: 2;
    width: 100%;
  }
  .mainArea .imgTxtBlk .txtGlp {
    position: relative;
    order: 1;
    right: 0;
    top: 0;
    margin: 56px 7% 32px auto;
    padding: 0;
  }
  .mainArea .imgTxtBlk .txtGlp .logoObj {
    width: 75vw;
  }
  .mainArea .imgTxtBlk .txtGlp .subTtlObj {
    margin: 36px -0.15em 0 0;
    font-size: 5.1vw;
  }
  .mainArea .imgTxtBlk .txtSet {
    order: 3;
    position: relative;
    bottom: 0;
    right: 0;
    margin: 32px auto 0;
    width: 85%;
  }
  .mainArea .imgTxtBlk .txtSet .txtObj {
    line-height: 2;
  }
}

/* ========================================
informationArea
======================================== */
.informationArea {
  width: min(90%, 1100px);
  margin: 0 auto;
  padding: 72px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.informationArea .ttlObj {
  margin: 0 auto 0 0;
}
.informationArea .infoLists {
  width: min(80%, 800px);
  background: #f8f9f9;
  margin: 0 0 0 50px;
  padding: 24px 32px;
}
.informationArea .infoLists .infoList {
  list-style: none;
  text-align: left;
  position: relative;
  padding: 0 0 0 1.5em;
}
.informationArea .infoLists .infoList::before {
  content: "";
  background: url("../img/svg/trigger.svg");
  background-size: cover;
  position: relative;
  width: 0.6em;
  display: block;
  height: 1em;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.informationArea .infoLists .infoList + .infoList {
  margin: 1em 0 0;
}
.informationArea .infoLists .infoList a {
  text-decoration: none;
  color: var(--clrGr);
  transition: var(--transition1);
}
.informationArea .infoLists .infoList a:hover {
  color: var(--clrRed);
  transition: var(--transition1);
}

@media (width <=900px) {
  .informationArea {
    flex-flow: wrap;
    padding: 48px 0;
  }
  .informationArea .ttlObj {
    margin: 0 auto;
    text-align: center;
  }
  .informationArea .infoLists {
    width: 100%;
    margin: 32px auto 0;
    padding: 20px;
  }
  .informationArea .infoLists .infoList {
  }
  .informationArea .infoLists .infoList + .infoList {
  }
  .informationArea .infoLists .infoList::before {
    top: 0.35em;
    transform: translate(0, 0);
  }
  .informationArea .infoLists .infoList a {
  }
  .informationArea .infoLists .infoList a:hover {
  }
}

/* ========================================
archiveArea
======================================== */
.archiveArea {
}
.archiveArea .bnrBlk {
  background: url(../img/bnr_bg.webp) no-repeat;
  min(10vh,260px): ;
  background-size: cover;
  height: min(25vh, 260px);
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
}
.archiveArea .bnrBlk .bnrObj {
}
.archiveArea .bnrBlk .bnrObj a {
  transition: var(--transition1);
}
.archiveArea .bnrBlk .bnrObj a:hover {
  opacity: 0.7;
  transition: var(--transition1);
}
.archiveArea .linkLists {
  padding: 96px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(100%, 1100px);
  margin: 0 auto;
  flex-flow: wrap;
}
.archiveArea .linkLists .linkList {
  width: 50%;
}
.archiveArea .linkLists .linkList + .linkList {
}
.archiveArea .linkLists .linkList .ttlObj {
  margin-bottom: 40px;
  text-align: center;
}
.archiveArea .linkLists .linkList .ttlObj .btnObj {
}
.archiveArea .linkLists .linkList .ttlObj .btnObj a {
}

@media (width <=900px) {
  .archiveArea {
  }
  .archiveArea .bnrBlk {
  }
  .archiveArea .bnrBlk .bnrObj {
  }
  .archiveArea .bnrBlk .bnrObj a {
  }
  .archiveArea .linkLists {
    padding: 72px 0;
  }
  .archiveArea .linkLists .linkList {
    width: 90%;
  }
  .archiveArea .linkLists .linkList + .linkList {
    margin: 64px 0 0;
  }
  .archiveArea .linkLists .linkList .ttlObj {
    margin-bottom: 32px;
  }
  .archiveArea .linkLists .linkList .ttlObj .btnObj {
  }
  .archiveArea .linkLists .linkList .ttlObj .btnObj a {
  }
}
/* ========================================
snsArea
======================================== */
.snsArea {
  background: var(--clrBk);
  padding: 96px 0;
}
.snsArea .spotifyBlk {
  width: min(80%, 800px);
  margin: 0 auto;
}
.snsArea .spotifyBlk iframe {
}
.snsArea .xBlk {
  margin: 64px auto 0;
}
.snsArea .xBlk .timeline {
  display: flex;
  justify-content: center;
}

@media (width <=900px) {
  .snsArea {
    padding: 64px 0;
  }
  .snsArea .spotifyBlk {
    width: 90%;
  }
  .snsArea .spotifyBlk iframe {
  }
  .snsArea .xBlk {
  }
  .snsArea .xBlk .timeline {
    width: 90%;
    margin: 0 auto;
  }
}
/* ========================================
aboutArea
======================================== */
.aboutArea {
  width: min(100%, 1100px);
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  padding: 96px 0 80px;
}
.aboutArea .imgObj {
  width: min(40%, 440px);
}
.aboutArea .txtGlp {
  width: 50%;
  text-align: left;
  margin: 0 0 0 80px;
}
.aboutArea .txtGlp .ttlObj {
  margin: 0 0 76px;
}
.aboutArea .txtGlp .subTtlObj {
  margin: 0 0 40px;
}
.aboutArea .txtGlp .txtObj {
  line-height: 1.8;
  color: var(--clrGr);
}
.aboutArea .txtGlp .txtObj.navigator {
  margin: 2em 0 0;
}

@media (width <=900px) {
  .aboutArea {
    padding: 72px 0 50px;
  }
  .aboutArea .imgObj {
    order: 2;
    width: 65%;
  }
  .aboutArea .txtGlp {
    order: 1;
    width: 90%;
    margin: 0 auto 48px;
    text-align: center;
  }
  .aboutArea .txtGlp .ttlObj {
    margin: 0 0 40px;
  }
  .aboutArea .txtGlp .subTtlObj {
  }
  .aboutArea .txtGlp .txtObj {
    text-align: left;
  }
  .aboutArea .txtGlp .txtObj.navigator {
    margin: 1.5em 0 0;
  }
}
/* ========================================
======================================== */

@media (width <=900px) {
}
/* ========================================
======================================== */

@media (width <=900px) {
}