@charset "UTF-8";

/* ========================================
common
======================================== */

.ttlTypeA {
  width: 100%;
  text-align: center;
  margin: 0 auto 48px;
}
.ttlTypeA::before {
  content: "";
  background: url(../img/shadow.webp) no-repeat;
  width: 600px;
  height: 80px;
  position: absolute;
  left: 0;
  right: 0;
  background-size: cover;
  margin: 0 auto;
}
.ttlTypeA .ttlObj {
  margin: 0 auto 0 0;
  padding: 80px 0 0;
  letter-spacing: 0.2em;
  line-height: 1.2;
}
.ttlTypeA .txtObj {
  margin: 48px auto 0;
  background: var(--clrNv);
  display: inline-block;
}
@media (width <=900px) {
  .ttlTypeA {
  }
  .ttlTypeA::before {
    width: 100%;
    height: 60px;
    background-position: center;
  }
  .ttlTypeA .ttlObj {
    padding: 40px 0 0;
  }
  .ttlTypeA .txtObj {
  }
}
/* ========================================
mainArea
======================================== */
.mainArea {
  background: url(../img/hdr_top.webp) no-repeat;
  width: 100%;
  height: 850px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  flex-flow: column;
}
.mainArea .ttlGlp {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.mainArea .ttlGlp .sTtlObj {
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.mainArea .ttlGlp .ttlObj {
  font-size: 120px;
  margin: 0 0 32px;
  font-weight: 300;
  line-height: 1.2;
}
.mainArea .ttlGlp .txtObj {
  font-size: 40px;
  letter-spacing: 0.16em;
  line-height: 1.2;
}
.mainArea .conceptBlk {
  width: auto;
  text-align: center;
  margin: 64px auto;
  padding: 0;
  width: auto;
}

.mainArea .conceptBlk .line {
}
.mainArea .conceptBlk .line.top {
  width: 320px;
}
.mainArea .conceptBlk .line.bottom {
  width: 460px;
  margin: 0 0 0 auto;
}
.mainArea .conceptBlk .conceptObj {
  padding: 12px 64px;
  letter-spacing: 0.2em;
}
.mainArea .navigatorBlk {
}
.mainArea .navigatorBlk .txtGlp {
  text-align: center;
}
.mainArea .navigatorBlk .txtGlp .ttlObj {
  font-size: 32px;
  letter-spacing: 0.2em;
}
.mainArea .navigatorBlk .txtGlp .txtObj {
  font-size: 32px;
  letter-spacing: 0.2em;
}
.mainArea .navigatorBlk .bnrBlk {
  width: 238px;
  margin: 16px auto 0;
}
.mainArea .navigatorBlk .bnrBlk a {
}
.mainArea .navigatorBlk .bnrBlk a:hover {
}

@media (width <=900px) {
  .mainArea {
    min-height: 570px;
    height: auto;
    padding: 56px 0 40px;
  }
  .mainArea .ttlGlp {
  }
  .mainArea .ttlGlp .sTtlObj {
    font-size: 24px;
    font-size: 6vw;
  }
  .mainArea .ttlGlp .ttlObj {
    font-size: 52px;
    font-size: 13vw;
    margin: 0 0 20px;
  }
  .mainArea .ttlGlp .txtObj {
    font-size: 20px;
    font-size: 5vw;
  }
  .mainArea .conceptBlk {
    margin: 40px auto;
    width: auto;
  }

  .mainArea .conceptBlk .line {
  }
  .mainArea .conceptBlk .line.top {
    width: 54%;
  }
  .mainArea .conceptBlk .line.bottom {
    width: 76%;
  }
  .mainArea .conceptBlk .conceptObj {
    font-size: 15px;
    font-size: 3.75vw;
    padding: 14px 20px;
    margin: 0 auto;
    display: inline-block;
  }
  .mainArea .navigatorBlk {
  }
  .mainArea .navigatorBlk .txtGlp {
  }
  .mainArea .navigatorBlk .txtGlp .ttlObj {
    font-size: 24px;
  }
  .mainArea .navigatorBlk .txtGlp .txtObj {
    font-size: 24px;
  }
  .mainArea .navigatorBlk .bnrBlk {
  }
  .mainArea .navigatorBlk .bnrBlk {
    margin: 16px auto 0;
  }
  .mainArea .navigatorBlk .bnrBlk a {
  }
  .mainArea .navigatorBlk .bnrBlk a:hover {
  }
}

/* ========================================
informationArea
======================================== */
.informationArea {
  margin: 0 auto 96px;
}
.informationArea .ttlObj {
}
.informationArea .infoLists {
  width: min(80%, 800px);
  margin: 0 auto;
  padding: 24px 32px;
  border: 1px solid var(--clrGr);
}
.informationArea .infoLists .infoList {
  list-style: none;
  text-align: left;
  position: relative;
  padding: 0 0 0 2em;
}
.informationArea .infoLists .infoList::before {
  content: "";
  background: url("../img/svg/info_point.svg");
  background-size: cover;
  position: relative;
  width: 1em;
  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(--clrWh);
  transition: var(--transition1);
}
.informationArea .infoLists .infoList a:hover {
  color: var(--clrBl);
  transition: var(--transition1);
}

@media (width <=900px) {
  .informationArea {
    margin: 0 auto 56px;
  }
  .informationArea .ttlObj {
  }
  .informationArea .infoLists {
    width: 90%;
    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 {
  }
}

/* ========================================
snsArea
======================================== */
.snsArea {
  background: var(--clrBk);
  padding: 96px 0;
}
.snsArea .podcastBlk {
  width: min(80%, 800px);
  margin: 0 auto 64px;
}
.snsArea .podcastBlk iframe {
}

@media (width <=900px) {
  .snsArea {
    padding: 64px 0;
  }
  .snsArea .podcastBlk {
    width: 90%;
  }
  .snsArea .podcastBlk iframe {
  }
}
/* ========================================
messageArea
======================================== */
.messageArea {
  margin: 0 auto;
  background: url(../img/message_bg.webp) no-repeat;
  padding: 0 0 120px;
  background-size: cover;
  background-position: center;
}
.messageArea .imgTxtBlk {
  width: min(90%, 1100px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.messageArea .imgObj {
  width: min(51%, 560px);
  aspect-ratio: 16 / 9;
}
.messageArea .imgObj iframe {
  width: 100%;
  height: 100%;
}

.messageArea .txtGlp {
  width: 49%;
  text-align: left;
  margin: 0 0 0 64px;
}
.messageArea .txtGlp .txtObj {
  line-height: 2.2;
  color: var(--clrWh);
}
.messageArea .txtGlp .btnObj {
  width: 300px;
  margin: 64px auto 0 0;
}
.messageArea .ttlTypeA .txtObj {
}
@media (width <=900px) {
  .messageArea {
  }
  .messageArea .ttlTypeA .txtObj {
    background: none;
    line-height: 1.4;
  }
  .messageArea .ttlTypeA .txtObj span {
    background: var(--clrNv);
  }
  .messageArea .imgTxtBlk {
    flex-flow: wrap;
  }
  .messageArea .imgObj {
    width: 95%;
  }
  .messageArea .imgObj iframe {
  }

  .messageArea .txtGlp {
    width: 95%;
    margin: 2em auto 0;
  }
  .messageArea .txtGlp .txtObj {
  }
  .messageArea .txtGlp .btnObj {
    margin: 40px auto 0;
  }
}
/* ========================================
archiveArea
======================================== */
.archiveArea {
}
#archive-wrap {
  margin: 0 auto 64px;
}
#archive-wrap .archive-page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(90%, 1000px);
  margin: 24px auto 0;
  flex-flow: wrap;
}
#archive-wrap .archive-page li {
}
#archive-wrap .archive-page li + li {
}
#archive-wrap .archive-page li a {
  font-size: 13px;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  color: #8c8c8c;
  border: 1px solid;
  line-height: 1;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  margin: 0 12px 12px;
  transition: var(--transition1);
}
#archive-wrap .archive-page li a.active {
  background: var(--clrWh);
  color: var(--clrBk);
}
#archive-wrap .archive-page li a:hover {
  border-color: var(--clrWh);
  transition: var(--transition1);
  color: var(--clrWh);
}

/* #archive-info { */
#archive-info ul {
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: min(90%, 1000px);
}
#archive-info li {
  display: flex;
  align-items: flex-start;
  flex-flow: wrap;
  margin: 0 24px 56px;
  width: calc(100% / 3 - 48px);
}
#archive-info li + li {
  /* margin: 0; */
}
#archive-info li .archive-image {
  width: 100%;
  overflow: hidden;
}
#archive-info li .archive-image a {
  transition: var(--transition2);
}
#archive-info li .archive-image a:hover {
  transform: scale(1.06);
  transition: var(--transition2);
}
#archive-info li .archive-credit {
  width: 100%;
  padding: 1em 0 0;
}
#archive-info li .archive-credit .archive-date {
  font-family: "bebas-neue-pro", sans-serif;
  font-weight: 300; /*300 or 400 or 600*/
  letter-spacing: 0.12em;
  font-size: 15px;
  /* color: var(--clrGr); */
}
#archive-info li .archive-credit .archive-date::after {
  content: "";
}
#archive-info li .archive-credit .archive-ttl {
  margin: 8px auto 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.6;
}
#archive-info li .archive-credit .archive-comment {
  letter-spacing: 0.06em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--clrGr);
}
#archive-info li .archive-credit > a {
  margin: 36px 0 0;
  background: var(--clrBk);
  color: var(--clrWh);
  line-height: 1;
  padding: 7px 0 8px;
  font-size: 13px;
  font-weight: 500;
  width: min(40%, 160px);
  text-align: center;
  transition: var(--transition1);
  border: 1px solid var(--clrBk);
}
#archive-info li .archive-credit > a:hover {
  background: var(--clrWh);
  color: var(--clrBk);
  transition: var(--transition1);
}
#archive-info li .archive-credit > a span {
}
@media (width <=900px) {
  .onair-list-wrap {
  }
  #archive-wrap {
  }
  #archive-wrap .archive-page {
    justify-content: center;
    margin: 22px auto 0;
  }
  #archive-wrap .archive-page li {
  }
  #archive-wrap .archive-page li + li {
  }
  #archive-wrap .archive-page li a {
    margin: 0 8px 8px;
  }
  #archive-wrap .archive-page li a:hover {
  }

  #archive-info {
  }
  #archive-info li {
    width: 100%;
    margin: 0 auto 26px;
  }
  #archive-info li .archive-image {
    width: 45%;
  }
  #archive-info li .archive-image a {
  }
  #archive-info li .archive-image a:hover {
  }
  #archive-info li .archive-credit {
    width: 48%;
    padding: 0;
    margin: 0 auto 0;
  }
  #archive-info li .archive-credit .archive-date {
  }
  #archive-info li .archive-credit .archive-ttl {
  }
  #archive-info li .archive-credit > a {
    margin: 24px auto 0;
  }
  #archive-info li .archive-credit > a:hover {
  }
  #archive-info li .archive-credit > a span {
  }
}