@charset "UTF-8";

/* ========================================
common
======================================== */
/*mainArea*/
.mainArea {
  background: url(../img/hdr_subpage.webp) no-repeat;
  width: 100%;
  height: 200px;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mainArea .imgTxtBlk .txtGlp {
}
.mainArea .imgTxtBlk .txtGlp a {
  color: var(--clrWh);
  text-align: center;
}
.mainArea .imgTxtBlk .txtGlp .sTtlObj {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.mainArea .imgTxtBlk .txtGlp .ttlObj {
  font-size: 60px;
  margin: 0 0 16px;
  font-weight: 300;
  line-height: 1.2;
}
.mainArea .imgTxtBlk .txtGlp .txtObj {
  font-size: 20px;
  letter-spacing: 0.16em;
  line-height: 1.2;
}

@media (width <=900px) {
  .mainArea {
    height: auto;
    padding: 25px 0;
  }
  .mainArea .imgTxtBlk {
  }
  .mainArea .imgTxtBlk .mainImg {
    height: 100%;
  }
  .mainArea .imgTxtBlk .txtGlp {
    width: 100%;
    right: 3%;
  }
  .mainArea .imgTxtBlk .txtGlp .sTtlObj {
    font-size: 22px;
    font-size: 5.5vw;
  }
  .mainArea .imgTxtBlk .txtGlp .ttlObj {
    font-size: 40px;
    font-size: 10vw;
  }
  .mainArea .imgTxtBlk .txtGlp .txtObj {
    font-size: 16px;
    font-size: 4vw;
  }
}

.ttlTypeA {
  width: 100%;
  text-align: center;
  margin: 0 auto 64px;
}
.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;
  display: inline-block;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--clrLGr);
}
.ttlTypeA .btnObj {
  margin: 48px auto 0;
}
@media (width <=900px) {
  .ttlTypeA {
  }
  .ttlTypeA::before {
    width: 100%;
    height: 60px;
    background-position: center;
  }
  .ttlTypeA .ttlObj {
    padding: 40px 0 0;
  }
  .ttlTypeA .txtObj {
    margin: 32px auto 0;
  }
  .ttlTypeA .btnObj {
    margin: 32px auto 0;
  }
}

/*titleArea*/
.titleArea {
  margin: 64px auto 60px;
  text-align: center;
}
.titleArea .ttlObj {
}
.titleArea .txtObj {
  margin: 24px auto 0;
  letter-spacing: 0.06em;
}
.titleArea .subTtlObj {
  font-weight: 500;
  color: var(--clrWh);
  background: var(--clrBk);
  display: block;
  width: 380px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  margin: 24px auto 0;
}
.titleArea .btnObj {
  margin: 24px auto 0;
}
@media (width <=900px) {
  .titleArea {
    margin: 40px auto 48px;
  }
  .titleArea .ttlObj {
  }
  .titleArea .txtObj {
  }
  .titleArea .subTtlObj {
    width: 80%;
  }
}

#contents {
  margin-bottom: 120px;
}

#contents .btnObj {
  width: min(80%, 300px);
}
@media (width <=900px) {
  #contents {
    margin-bottom: 80px;
  }
}
@media (width <=900px) {
}

/* ========================================
information
======================================== */
.info-note {
  width: min(90%, 834px);
  margin: 0 auto;
}
.info-note .info-head {
  margin: 0 auto 40px;
}
.info-note .info-head .info-date {
  letter-spacing: 0.12em;
}
.info-note .info-title {
  margin: 32px auto;
  line-height: 1.6;
  padding: 0;
}
.info-note .info-body {
}
.info-note .info-body p {
  line-height: 1.8;
  margin: 0 0 24px;
}
.info-note .info-body p a {
  color: var(--clrBl);
}
.info-note .info-body img {
  margin: 0 auto 24px;
}
.linksArea {
  margin: 64px auto 100px;
  width: min(90%, 834px);
  background: var(--clrBk1);
  width: 100%;
  padding: 56px 0;
}
.linksArea .ttlObj {
  text-align: center;
}
.linksArea .infoLists {
  width: min(100%, 836px);
  margin: 0 auto;
  padding: 24px 32px;
  border: 1px solid var(--clrGr);
}
.linksArea .infoLists .infoList {
  list-style: none;
  text-align: left;
  position: relative;
  padding: 0 0 0 2em;
}
.linksArea .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%);
}
.linksArea .infoLists .infoList + .infoList {
  margin: 1em 0 0;
}
.linksArea .infoLists .infoList a {
  text-decoration: none;
  color: var(--clrWh);
  transition: var(--transition1);
}
.linksArea .infoLists .infoList a:hover {
  color: var(--clrBl);
  transition: var(--transition1);
}

@media (width <=900px) {
  .info-note {
  }
  .info-note .info-head {
    margin: 0 auto 24px;
  }
  .info-note .info-head .info-date {
  }
  .info-note .info-head .info-title {
    margin: 18px auto 0;
    padding: 0 0 24px;
  }
  .info-note .info-body {
  }
  .info-note .info-body p {
  }
  .info-note .info-body img {
  }

  .linksArea .ttlObj {
  }
  .linksArea {
    flex-flow: wrap;
    margin: 56px auto 80px;
    padding: 56px 0;
  }
  .linksArea .ttlObj {
    margin: 0 auto;
    text-align: center;
  }
  .linksArea .infoLists {
    width: 90%;
    margin: 0 auto;
    padding: 20px;
  }
  .linksArea .infoLists .infoList {
  }
  .linksArea .infoLists .infoList + .infoList {
  }
  .linksArea .infoLists .infoList::before {
    top: 0.35em;
    transform: translate(0, 0);
  }
  .linksArea .infoLists .infoList a {
  }
  .linksArea .infoLists .infoList a:hover {
  }
}

/* ========================================
entry
======================================== */
.onair-list-wrap {
}
#archive-wrap {
  margin: 0 auto 64px;
}
#archive-wrap .archive-page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(90%, 1000px);
  margin: 0 auto;
  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: var(--clrBk);
  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(--clrBk);
  color: var(--clrWh);
}
#archive-wrap .archive-page li a:hover {
  background: var(--clrLGr);
  transition: var(--transition1);
}

#archive-info {
  margin: 48px auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: min(90%, 1000px);
}
#archive-info li {
  display: flex;
  align-items: flex-start;
  flex-flow: wrap;
  margin: 0 auto;
}
#archive-info li + li {
  margin: 56px auto 0;
}
#archive-info li .archive-image {
  width: min(32%, 320px);
  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: min(68%, 680px);
  padding: 0 0 0 24px;
}
#archive-info li .archive-credit .archive-date {
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  color: var(--clrGr);
}
#archive-info li .archive-credit .archive-date::after {
  content: " ON AIR";
}
#archive-info li .archive-credit .archive-ttl {
  margin: 8px auto 16px;
  font-size: 15px;
  font-weight: 500;
  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: flex-start;
  }
  #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 {
  }
  #archive-info li .archive-image {
    width: 100%;
  }
  #archive-info li .archive-image a {
  }
  #archive-info li .archive-image a:hover {
  }
  #archive-info li .archive-credit {
    width: 100%;
    padding: 0;
    margin: 24px 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 {
  }
}
/* ========================================
archive deatail
======================================== */
.articleArea {
  /* width: min(100%, 800px); */
  margin: 0 auto 120px;
  background: var(--clrBk1);
  text-align: center;
  padding: 48px 0 64px;
}
.articleArea .ttlObj {
  text-align: center;
  font-weight: 500;
  background: var(--clrWh);
  margin: 0 auto;
  display: inline-block;
  margin: 0 auto 32px;
}
.articleArea .ttlObj span {
}
.articleArea .imgTxtSet {
  width: min(90%, 836px);
  text-align: left;
  margin: 0 auto;
}
.articleArea .imgTxtSet .sTtlObj {
  margin: 32px 0;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
.articleArea .imgTxtSet .txtObj {
  margin: 0 auto 24px;
  line-height: 2;
}
.articleArea .imgTxtSet .imgObj {
  margin: 24px 0;
}
.articleArea .imgTxtSet .txtObj a {
  color: var(--clrBl);
}
@media (width <=900px) {
  .articleArea {
    padding: 32px 0 40px;
    margin: 0 auto 80px;
  }
  .articleArea .ttlObj {
    margin: 0 auto;
  }
  .articleArea .ttlObj span {
  }
  .articleArea .imgTxtSet {
    padding: 0;
  }
  .articleArea .imgTxtSet .sTtlObj {
  }
  .articleArea .imgTxtSet .txtObj {
  }
  .articleArea .imgTxtSet .imgObj {
  }
}
/* ========================================
======================================== */
#contents .btnObj + .btnObj {
  margin: 32px auto 0;
}
@media (width <=900px) {
  #contents .btnObj + .btnObj {
  }
}
/* ========================================
======================================== */
@media (width <=900px) {
}
/* ========================================
======================================== */
@media (width <=900px) {
}