@charset "UTF-8";
/*
$serif: 'Shippori Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
$roman: 'Shippori Mincho', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
*/
@import url("global.css");
ul.syubetsutab {
  margin-bottom: 80px;
  display: flex;
  border-top: #252122 2px solid;
  border-bottom: #252122 2px solid; }
  ul.syubetsutab li {
    width: calc( 100% / 3 );
    border-right: #252122 2px solid;
    border-left: #252122 2px solid;
    box-sizing: border-box; }
    ul.syubetsutab li a {
      display: block;
      text-align: center;
      padding: 12px 7px 12px 10px;
      font-weight: bold;
      font-size: 19px;
      letter-spacing: 3px;
      position: relative;
      color: #fff;
      background-color: #252122;
      overflow: hidden;
      box-sizing: border-box; }
      ul.syubetsutab li a::before {
        content: "\f0d7";
        font-family: "Font Awesome 5 free";
        font-size: 32px;
        line-height: 32px;
        width: 32px;
        position: absolute;
        color: #fff;
        left: 50%;
        margin-left: -16px;
        transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
        -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        bottom: -10px;
        opacity: 0; }
      ul.syubetsutab li a:hover {
        padding: 4px 7px 20px 10px; }
        ul.syubetsutab li a:hover::before {
          opacity: .5;
          bottom: 0; }
    .new ul.syubetsutab li#tab-new a, .reform ul.syubetsutab li#tab-reform a, .genba ul.syubetsutab li#tab-genba a {
      color: #252122;
      background-color: #fff;
      padding: 4px 7px 20px 10px;
      cursor: default; }
      .new ul.syubetsutab li#tab-new a::before, .reform ul.syubetsutab li#tab-reform a::before, .genba ul.syubetsutab li#tab-genba a::before {
        color: #F08803;
        bottom: 0;
        opacity: 1; }

/* ------------------------------
 Index-Page
------------------------------ */
.list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -6px; }
  .list li {
    width: calc( 100% / 4 );
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 6px;
    position: relative;
    margin-bottom: 50px; }
    .list li a {
      display: block;
      height: 100%; }
      .list li a .thumbarea {
        margin-bottom: 15px; }
        .list li a .thumbarea .thumb {
          height: 0;
          padding-top: 70%;
          overflow: hidden;
          position: relative; }
          .list li a .thumbarea .thumb > img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
            -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
          .list li a .thumbarea .thumb::after {
            content: "";
            width: 100%;
            height: 100%;
            /*background: rgba($color-black, 0.2);*/
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
            -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1) 0s;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden; }
          .list li a .thumbarea .thumb .cat {
            display: block;
            height: 60px;
            position: absolute;
            right: 10px;
            bottom: 10px;
            z-index: 4; }
            .list li a .thumbarea .thumb .cat img {
              width: auto;
              max-height: 60px; }
        .list li a .thumbarea .voiceicon {
          width: 80px;
          position: absolute;
          right: 10px;
          top: -30px;
          z-index: 4; }
        .list li a .thumbarea .new {
          position: absolute;
          z-index: 2;
          left: 0;
          top: -30px;
          width: 80px; }
      .list li a .text {
        padding: 0 10px; }
        .list li a .text .entrytitle {
          text-align: justify;
          line-height: 1.5;
          margin-bottom: 10px;
          font-size: 18px;
          font-weight: bold; }
        .list li a .text .add {
          line-height: 1.5;
          font-size: 16px; }
      .list li a:hover .thumbarea .thumb > img {
        transform: scale(1.05);
        -webkit-transform: scale(1.05); }
      .list li a:hover .thumbarea .thumb::after {
        opacity: 0; }

/* ------------------------------
 Entry-Page
------------------------------ */
.entry {
  margin-bottom: 60px; }
  .entry .entrytitle {
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 32px;
    font-weight: bold; }
  .entry .add {
    text-align: center;
    margin-bottom: 60px;
    line-height: 1.4;
    font-size: 18px; }
  .entry .slidearea {
    margin-bottom: 40px; }
  .entry .fotorama__caption__wrap {
    display: block;
    text-align: center;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px 10px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
    font-size: 14px; }
  .entry .dataarea {
    width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; }
    .entry .dataarea .data {
      width: 47%; }
      .entry .dataarea .data dl {
        display: flex;
        justify-content: space-between;
        border-bottom: 2px solid #252122;
        margin-bottom: 20px; }
        .entry .dataarea .data dl dt {
          width: 30%;
          padding: 15px;
          box-sizing: border-box;
          font-weight: bold; }
        .entry .dataarea .data dl dd {
          flex: 1;
          padding: 15px 5px;
          box-sizing: border-box; }
          .entry .dataarea .data dl dd a:hover {
            color: #EF8718; }
          .entry .dataarea .data dl dd a.lineup_btn {
            padding: 2px 6px;
            margin-left: 10px;
            letter-spacing: -1px;
            background: #A9AAAA;
            color: #fff;
            border-radius: 5px; }
            .entry .dataarea .data dl dd a.lineup_btn:hover {
              background: #EF8718;
              color: #fff; }
  .entry .voicearea {
    background: #eee;
    margin: 80px 0; }
    .entry .voicearea .wrapper {
      padding-top: 90px;
      padding-bottom: 90px;
      position: relative; }
      .entry .voicearea .wrapper .hd {
        position: absolute;
        left: 0;
        top: -60px;
        font-size: 70px;
        font-family: "Poppins", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
        font-weight: 600;
        letter-spacing: -1px;
        transform: rotate(-5deg);
        -webkit-transform: rotate(-5deg); }
      .entry .voicearea .wrapper .entrybody {
        width: 85%;
        margin: 0 auto; }
        .entry .voicearea .wrapper .entrybody .block {
          margin-bottom: 50px; }
          .entry .voicearea .wrapper .entrybody .block:last-of-type {
            margin-bottom: 0; }
        .entry .voicearea .wrapper .entrybody .img {
          margin: 0 auto 30px;
          text-align: center; }
        .entry .voicearea .wrapper .entrybody .lead {
          text-align: left;
          margin-bottom: 20px;
          font-family: "Zen Old Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
          font-size: 24px; }
        .entry .voicearea .wrapper .entrybody strong {
          font-weight: bold; }
        .entry .voicearea .wrapper .entrybody p:not([class]) {
          text-align: justify; }
        .entry .voicearea .wrapper .entrybody dl.enquete dt {
          font-size: 19px;
          font-weight: bold;
          margin: 30px 0 10px;
          line-height: 1.4; }
          .entry .voicearea .wrapper .entrybody dl.enquete dt span {
            font-size: 1.4em;
            font-family: "Poppins", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "游ゴシック Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
            padding-right: 10px;
            color: #a9aaaa; }
          .entry .voicearea .wrapper .entrybody dl.enquete dt.reply::before, .entry .voicearea .wrapper .entrybody dl.enquete dt.reply::after {
            content: "◆";
            color: #a9aaaa; }
          .entry .voicearea .wrapper .entrybody dl.enquete dt.reply::before {
            padding-right: 5px; }
          .entry .voicearea .wrapper .entrybody dl.enquete dt.reply::after {
            padding-left: 5px; }
        .entry .voicearea .wrapper .entrybody dl.enquete p {
          margin: 1em 0; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1300px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1300px) {
  /* ------------------------------
   Index
  ------------------------------ */
  .list li {
    width: calc( 100% / 3 ); }

  /* ------------------------------
   Entry
  ------------------------------ */
  .entry .dataarea {
    width: 100%; }
  .entry .voicearea .wrapper .hd {
    left: 3vw; }
  .entry .voicearea .wrapper .entrybody {
    width: 90%; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  ul.syubetsutab li a {
    font-size: 18px; }
    ul.syubetsutab li a:hover {
      padding: 12px 7px 12px 10px; }
      ul.syubetsutab li a:hover::before {
        opacity: 0; }

  /* ------------------------------
   Index
  ------------------------------ */
  .list li {
    width: calc( 100% / 2 );
    margin-bottom: 50px; }
    .list li a .thumbarea .thumb .cat {
      height: 50px; }
      .list li a .thumbarea .thumb .cat img {
        max-height: 50px; }
    .list li a .thumbarea .voiceicon {
      width: 70px; }
    .list li a .text .entrytitle {
      font-size: 18px; }

  /* ------------------------------
   Entry
  ------------------------------ */
  .entry {
    margin-bottom: 50px; }
    .entry .entrytitle {
      margin-bottom: 20px;
      font-size: 28px; }
    .entry .add {
      margin-bottom: 40px;
      font-size: 16px; }
    .entry .dataarea {
      display: block; }
      .entry .dataarea .data {
        width: 100%; }
    .entry .voicearea {
      margin: 80px 0; }
      .entry .voicearea .wrapper {
        padding-top: 80px;
        padding-bottom: 80px; }
        .entry .voicearea .wrapper .hd {
          font-size: 54px;
          top: -50px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  ul.syubetsutab {
    margin: 0 -20px 60px; }
    ul.syubetsutab li a {
      font-size: calc(93.75% + 3 * (100vw - 360px) / 280);
      letter-spacing: 0; }

  /* ------------------------------
   Index
  ------------------------------ */
  .list {
    display: block;
    margin: 0; }
    .list li {
      width: 100%;
      padding: 0;
      margin-bottom: 40px; }
      .list li a .thumbarea {
        margin-bottom: 15px; }
        .list li a .thumbarea .new {
          left: -10px;
          top: -20px;
          width: 60px; }
      .list li a .text {
        padding: 0; }

  /* ------------------------------
   Entry
  ------------------------------ */
  .entry {
    margin-bottom: 30px; }
    .entry .entrytitle {
      margin-bottom: 15px;
      font-size: 22px; }
    .entry .add {
      margin-bottom: 30px; }
    .entry .slidearea {
      margin: 0 -20px 30px; }
    .entry .fotorama__caption__wrap {
      font-size: 12px;
      font-letter-spacing: 0; }
    .entry .dataarea .data dl {
      display: block; }
      .entry .dataarea .data dl dt {
        width: 100%;
        padding: 10px 10px 0; }
      .entry .dataarea .data dl dd {
        padding: 6px 10px 10px; }
        .entry .dataarea .data dl dd a.lineup_btn {
          padding: 2px 5px;
          margin-left: 5px; }
    .entry .voicearea {
      margin: 60px 0; }
      .entry .voicearea .wrapper {
        padding-top: 60px;
        padding-bottom: 60px; }
        .entry .voicearea .wrapper .hd {
          font-size: 44px;
          top: -40px; }
        .entry .voicearea .wrapper .entrybody {
          width: 100%; }
          .entry .voicearea .wrapper .entrybody .block {
            margin-bottom: 40px; }
          .entry .voicearea .wrapper .entrybody .img {
            margin: 0 auto 20px; }
          .entry .voicearea .wrapper .entrybody .lead {
            margin-bottom: 15px;
            font-size: 20px; }
          .entry .voicearea .wrapper .entrybody dl.enquete dt {
            font-size: 18px; }
            .entry .voicearea .wrapper .entrybody dl.enquete dt.reply {
              text-align: center;
              font-size: 19px; }

  .pageback a {
    background-color: #fff; } }