body {
  background-color: #000; }

.header-sp ul li a {
  color: #fff; }

#page-header {
  padding-top: 100px; }
  @media (min-width: 1200px) {
    #page-header {
      padding-top: 140px; } }
  #page-header .logo-page-title {
    max-width: 760px;
    width: 85%;
    margin: auto; }
  #page-header .page-copy {
    padding: 0 5%;
    margin: 10px 0 0 0;
    text-align: center;
    color: #fff; }
    @media (min-width: 1200px) {
      #page-header .page-copy {
        margin: 20px 0 0 0; } }
    #page-header .page-copy h2 {
      font-size: 1.125em;
      line-height: 1.4em;
      font-feature-settings: "palt";
      letter-spacing: 0.04em; }
      @media (min-width: 768px) {
        #page-header .page-copy h2 {
          font-size: 1.35em; } }
      @media (min-width: 1200px) {
        #page-header .page-copy h2 {
          font-size: 1.625em; } }
  #page-header .prologue {
    max-width: 1400px;
    width: 90%;
    margin: 60px auto 0; }
    @media (min-width: 768px) {
      #page-header .prologue {
        display: flex; } }
    @media (min-width: 1200px) {
      #page-header .prologue {
        margin: 100px auto 0; } }
    #page-header .prologue.post {
      margin: 0 auto; }
    #page-header .prologue .logo-hear {
      width: 80%;
      margin-bottom: 30px; }
      @media (min-width: 768px) {
        #page-header .prologue .logo-hear {
          width: 50%;
          padding-right: 5%;
          margin-bottom: 0; } }
    #page-header .prologue .txt-area {
      color: #fff; }
      @media (min-width: 768px) {
        #page-header .prologue .txt-area {
          width: 50%; } }
      #page-header .prologue .txt-area h3 {
        font-size: 1.125em;
        line-height: 1.3em;
        font-feature-settings: "palt";
        letter-spacing: 0.04em; }
        @media (min-width: 768px) {
          #page-header .prologue .txt-area h3 {
            font-size: 1.35em; } }
        @media (min-width: 1200px) {
          #page-header .prologue .txt-area h3 {
            font-size: 1.625em; } }
      #page-header .prologue .txt-area p {
        font-size: 0.9em;
        line-height: 1.6em;
        font-feature-settings: "palt";
        letter-spacing: 0.04em;
        text-align: justify;
        margin: 10px 0 0 0; }
        @media (min-width: 768px) {
          #page-header .prologue .txt-area p {
            font-size: 1.0em; } }
        @media (min-width: 1200px) {
          #page-header .prologue .txt-area p {
            font-size: 1.125em;
            margin: 20px 0 0 0; } }

#archive {
  max-width: 1600px;
  width: 90%;
  margin: 80px auto 0; }
  @media (min-width: 1200px) {
    #archive {
      margin: 140px auto 0; } }
  #archive .row .contents-box {
    margin-bottom: 60px; }
    @media (min-width: 768px) {
      #archive .row .contents-box:nth-child(even) {
        margin-top: 40px; } }
    @media (min-width: 1200px) {
      #archive .row .contents-box {
        margin-bottom: 60px; } }
  @media (min-width: 1200px) {
    #archive .o-6column .col-lg-6 {
      padding: 0 20px; }
    #archive .o-6column {
      margin: 0 -20px; } }
  @media (min-width: 1200px) {
    #archive .o-6column .col-lg-4 {
      padding: 0 20px; }
    #archive .o-6column {
      margin: 0 -20px; } }

.archive-grid {
  display: none; }
  @media (min-width: 1024px) {
    .archive-grid {
      display: block; } }

.archive-card {
  padding: 60px 0 0 5%;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 20px; }
  @media (min-width: 1024px) {
    .archive-card {
      display: none; } }
  .archive-card .swiper-slide {
    width: 320px;
    margin: 0 15px 0 0; }
    @media (min-width: 768px) {
      .archive-card .swiper-slide {
        width: 450px;
        margin: 0 20px 0 0; } }
    .archive-card .swiper-slide:last-child {
      margin-right: 5%; }
  .archive-card .swiper-button-prev, .archive-card .swiper-button-next {
    top: 30px;
    right: 20px; }
  .archive-card .swiper-button-prev {
    right: 56px;
    left: inherit; }
    @media (min-width: 1024px) {
      .archive-card .swiper-button-prev {
        right: 70px; } }

.pickup-contents {
  position: relative; }
  .pickup-contents .logo-hear {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    max-width: 360px;
    margin: auto;
    width: 80%;
    z-index: 11; }
    @media (min-width: 1200px) {
      .pickup-contents .logo-hear {
        top: -20px; } }
  .pickup-contents a {
    position: relative; }
    .pickup-contents a:hover .imgWrap > video {
      transform: scale(1.02); }
    .pickup-contents a:hover .imgWrap > img {
      transform: scale(1.02); }
    .pickup-contents a .imgWrap {
      position: relative;
      border-radius: 15px;
      overflow: hidden;
      display: block;
      z-index: 10;
      border: 2px solid #00FF0A; }
      .pickup-contents a .imgWrap img, .pickup-contents a .imgWrap video {
        transition-duration: 0.8s;
        transform: scale(1); }
    .pickup-contents a .back {
      background-color: #00FF0A;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px; }
    .pickup-contents a h3 {
      font-size: 1.125em;
      line-height: 1.4em;
      text-align: justify;
      font-feature-settings: "palt";
      letter-spacing: 0.04em;
      display: inline-block;
      color: #000; }
      @media (min-width: 768px) {
        .pickup-contents a h3 {
          font-size: 1.25em; } }
      @media (min-width: 1200px) {
        .pickup-contents a h3 {
          font-size: 1.5em; } }
      .pickup-contents a h3 u {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%, #00FF0A 0%, #00FF0A 100%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
        text-decoration: none;
        padding: 0 5px; }

ul.tag {
  display: flex;
  align-items: center;
  margin-top: 15px;
  padding: 0; }
  ul.tag li {
    font-size: 0.6em;
    line-height: 1.2em;
    text-align: center;
    display: inline-block;
    border: 1px solid #00FF0A;
    border-radius: 40px;
    margin: 0 10px 0 0;
    color: #00FF0A;
    padding: 3px 8px 4px; }
    @media (min-width: 768px) {
      ul.tag li {
        font-size: 0.7em; } }
    @media (min-width: 1200px) {
      ul.tag li {
        font-size: 0.8em; } }
    ul.tag li:last-child {
      margin: 0; }