@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
両サイド　縦文字ループ
---------------------------------------------------------------------------------------------------------------------
*/
.side-loop {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  top: 0; }
  .side-loop.left {
    left: 5px; }
    @media (min-width: 768px) {
      .side-loop.left {
        left: 10px; } }
    @media (min-width: 1024px) {
      .side-loop.left {
        left: 20px; } }
  .side-loop.right {
    right: 5px; }
    @media (min-width: 768px) {
      .side-loop.right {
        right: 10px; } }
    @media (min-width: 1024px) {
      .side-loop.right {
        right: 20px; } }
  .side-loop .back-txt .YokoScroll {
    overflow: hidden; }
    .side-loop .back-txt .YokoScroll .slideshow figure {
      width: 18px; }
      @media (min-width: 768px) {
        .side-loop .back-txt .YokoScroll .slideshow figure {
          width: 30px; } }
      @media (min-width: 1024px) {
        .side-loop .back-txt .YokoScroll .slideshow figure {
          width: 40px; } }
      @media (min-width: 1250px) {
        .side-loop .back-txt .YokoScroll .slideshow figure {
          width: 60px; } }
    .side-loop .back-txt .YokoScroll .slideshow.show-tate1 {
      animation: loop-side1 300s infinite linear 1s both; }
    .side-loop .back-txt .YokoScroll .slideshow.show-tate2 {
      animation: loop-side2 300s infinite linear 1s both; }
@keyframes loop-side2 {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0); } }
@keyframes loop-side1 {
  from {
    transform: translateY(0); }
  to {
    transform: translateY(-100%); } }
/*
---------------------------------------------------------------------------------------------------------------------
月刊ビリビリ図鑑　アーカイブ　ヘッダー
---------------------------------------------------------------------------------------------------------------------
*/
#feature-header {
  position: relative;
  margin-top: 80px; }
  @media (min-width: 1024px) {
    #feature-header {
      margin-top: 100px; } }
  #feature-header .loop-area {
    opacity: 0.3;
    overflow: hidden; }
    #feature-header .loop-area .back-txt {
      margin-bottom: 20px; }
      #feature-header .loop-area .back-txt:last-child {
        margin-bottom: 0; }
      #feature-header .loop-area .back-txt .YokoScroll {
        display: flex;
        align-items: center; }
        #feature-header .loop-area .back-txt .YokoScroll .slideshow {
          display: flex; }
          #feature-header .loop-area .back-txt .YokoScroll .slideshow figure {
            margin-right: 10px; }
            @media (min-width: 768px) {
              #feature-header .loop-area .back-txt .YokoScroll .slideshow figure {
                margin-right: 15px; } }
            #feature-header .loop-area .back-txt .YokoScroll .slideshow figure img {
              width: 140px;
              border-radius: 10px; }
              @media (min-width: 768px) {
                #feature-header .loop-area .back-txt .YokoScroll .slideshow figure img {
                  width: 200px;
                  border-radius: 15px; } }
              @media (min-width: 1250px) {
                #feature-header .loop-area .back-txt .YokoScroll .slideshow figure img {
                  width: 260px; } }
          #feature-header .loop-area .back-txt .YokoScroll .slideshow.show1 {
            animation: loop-slide1 100s infinite linear 1s both; }
@keyframes loop-slide1 {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
  #feature-header .feature-title {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -10%;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: auto;
    width: 70%; }
    @media (min-width: 768px) {
      #feature-header .feature-title {
        top: -20%; } }

/*
---------------------------------------------------------------------------------------------------------------------
月刊ビリビリ図鑑　アーカイブ
---------------------------------------------------------------------------------------------------------------------
*/
.feature-copy {
  max-width: 600px;
  width: 90%;
  margin: 30px auto 0;
  padding: 0 20px; }
  @media (min-width: 768px) {
    .feature-copy {
      padding: 0; } }
  @media (min-width: 1024px) {
    .feature-copy {
      margin: 60px auto 0; } }
  .feature-copy h2 {
    font-size: 1.5em;
    line-height: 1.5em;
    text-align: center; }
    @media (min-width: 1024px) {
      .feature-copy h2 {
        font-size: 2.5em; } }
  .feature-copy p {
    font-size: 0.9em;
    line-height: 1.8em;
    text-align: justify;
    margin: 20px auto 0; }
    @media (min-width: 1024px) {
      .feature-copy p {
        font-size: 1.125em;
        margin: 40px auto 0; } }

ul.feature-archive {
  max-width: 1600px;
  padding: 0 40px;
  margin: 60px auto 0; }
  @media (min-width: 768px) {
    ul.feature-archive {
      padding: 0 60px;
      margin: 120px auto 0; } }
  @media (min-width: 1024px) {
    ul.feature-archive {
      padding: 0 100px; } }
  @media (min-width: 1250px) {
    ul.feature-archive {
      padding: 0 140px; } }
  ul.feature-archive li {
    border-bottom: 1px solid #979BA0;
    padding: 20px 0; }
    @media (min-width: 768px) {
      ul.feature-archive li {
        display: flex;
        padding: 30px 0; } }
    @media (min-width: 1250px) {
      ul.feature-archive li {
        padding: 60px 0; } }
    ul.feature-archive li:first-child {
      border-top: 1px solid #979BA0; }
    @media (min-width: 768px) {
      ul.feature-archive li .thumbnail {
        width: 40%; } }
    ul.feature-archive li .thumbnail a:hover .imgWrap > img {
      transform: scale(1.04); }
    ul.feature-archive li .thumbnail a .imgWrap {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      z-index: 1;
      width: 80%;
      margin: auto; }
      @media (min-width: 768px) {
        ul.feature-archive li .thumbnail a .imgWrap {
          width: 100%; } }
      @media (min-width: 1024px) {
        ul.feature-archive li .thumbnail a .imgWrap {
          border-radius: 20px; } }
      ul.feature-archive li .thumbnail a .imgWrap img {
        transition-duration: 0.8s;
        transform: scale(1);
        border-radius: 10px; }
        @media (min-width: 1024px) {
          ul.feature-archive li .thumbnail a .imgWrap img {
            border-radius: 20px; } }
    @media (min-width: 768px) {
      ul.feature-archive li .contents {
        width: 60%;
        padding-left: 5%;
        display: flex;
        align-items: center; } }
    ul.feature-archive li .contents .contents-in .txt {
      margin-top: 20px; }
      @media (min-width: 768px) {
        ul.feature-archive li .contents .contents-in .txt {
          margin-top: 0; } }
      ul.feature-archive li .contents .contents-in .txt h4 {
        font-size: 0.9em; }
        @media (min-width: 1024px) {
          ul.feature-archive li .contents .contents-in .txt h4 {
            font-size: 1.125em; } }
      ul.feature-archive li .contents .contents-in .txt h3 {
        font-size: 1.6em;
        margin-top: 10px; }
        @media (min-width: 768px) {
          ul.feature-archive li .contents .contents-in .txt h3 {
            font-size: 3.2vw;
            margin-top: 20px; } }
        @media (min-width: 1600px) {
          ul.feature-archive li .contents .contents-in .txt h3 {
            font-size: 3.6em; } }
      ul.feature-archive li .contents .contents-in .txt p {
        font-size: 0.9em;
        margin-top: 10px; }
        @media (min-width: 1024px) {
          ul.feature-archive li .contents .contents-in .txt p {
            font-size: 1.125em;
            margin-top: 20px; } }
    ul.feature-archive li .contents .contents-in .common-btn-type1 {
      margin-top: 20px; }
      @media (min-width: 1024px) {
        ul.feature-archive li .contents .contents-in .common-btn-type1 {
          margin-top: 40px; } }

/*
---------------------------------------------------------------------------------------------------------------------
月刊ビリビリ図鑑　投稿
---------------------------------------------------------------------------------------------------------------------
*/
#single-header {
  max-width: 1800px;
  padding: 0 40px;
  margin: 80px auto 0; }
  @media (min-width: 768px) {
    #single-header {
      padding: 0 60px;
      margin: 100px auto 0; } }
  @media (min-width: 1024px) {
    #single-header {
      padding: 0 80px; } }
  @media (min-width: 1250px) {
    #single-header {
      padding: 0 140px; } }
  #single-header .thumbnail img {
    border-radius: 10px; }
    @media (min-width: 1024px) {
      #single-header .thumbnail img {
        border-radius: 20px; } }
  #single-header .title {
    margin: 40px auto 0;
    text-align: center; }
    @media (min-width: 1024px) {
      #single-header .title {
        margin: 80px auto 0; } }
    #single-header .title p {
      font-size: 1.0em;
      font-weight: bold; }
      @media (min-width: 1024px) {
        #single-header .title p {
          font-size: 1.25em; } }
    #single-header .title .title-in {
      position: relative; }
      #single-header .title .title-in h1 {
        font-size: 2.4em;
        font-feature-settings: "palt";
        letter-spacing: 0.04em;
        margin-top: 20px; }
        @media (min-width: 1024px) {
          #single-header .title .title-in h1 {
            font-size: 4.0em; } }
        #single-header .title .title-in h1 .yellow {
          color: #F1FF4E; }
      #single-header .title .title-in img {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 140px;
        margin: auto;
        z-index: -1;
        animation: rotate-anime 120s linear infinite; }
@keyframes rotate-anime {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
        @media (min-width: 768px) {
          #single-header .title .title-in img {
            right: 10%; } }
        @media (min-width: 1024px) {
          #single-header .title .title-in img {
            width: 240px; } }
  #single-header .txt {
    max-width: 800px;
    margin: 60px auto 0;
    width: 100%; }
    @media (min-width: 1024px) {
      #single-header .txt {
        margin: 80px auto 0; } }
    #single-header .txt h3 {
      font-size: 1.25em;
      line-height: 1.4em;
      font-feature-settings: "palt";
      letter-spacing: 0.04em;
      text-align: center; }
      @media (min-width: 1024px) {
        #single-header .txt h3 {
          font-size: 1.75em; } }
      #single-header .txt h3 .yellow {
        color: #F1FF4E; }
    #single-header .txt p {
      font-size: 0.9em;
      line-height: 1.8em;
      text-align: justify;
      margin-top: 20px; }
      @media (min-width: 1024px) {
        #single-header .txt p {
          font-size: 1.125em;
          margin-top: 30px; } }
      #single-header .txt p.center {
        text-align: center; }
  #single-header .biribiri-radio {
    margin: 60px auto 0;
    text-align: center; }
    #single-header .biribiri-radio h2 {
      font-family: "Dela Gothic One", sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 1.5em; }
      @media (min-width: 1024px) {
        #single-header .biribiri-radio h2 {
          font-size: 2.0em; } }
    #single-header .biribiri-radio iframe {
      max-width: 600px;
      margin-top: 10px; }

#entry {
  padding-top: 120px;
  padding: 0 40px;
  margin: 60px auto 0; }
  @media (min-width: 768px) {
    #entry {
      margin: 120px auto 0;
      padding: 0 60px; } }
  @media (min-width: 1024px) {
    #entry {
      padding: 0 80px; } }
  @media (min-width: 1250px) {
    #entry {
      padding: 0 120px;
      margin: 160px auto 0; } }

#news {
  padding: 80px 30px 0; }
  @media (min-width: 768px) {
    #news {
      padding: 160px 40px 0; } }
  @media (min-width: 1024px) {
    #news {
      padding: 160px 60px 0; } }
  @media (min-width: 1250px) {
    #news {
      padding: 160px 80px 0; } }