@charset "UTF-8";
/* CSS Document */
#com_backnumber {
  padding-top: 6rem; }
  @media screen and (max-width: 575px) {
    #com_backnumber {
      padding-top: 5rem; } }
  #com_backnumber h2 {
    font-size: 20px;
    font-size: 2rem;
    color: #01723D;
    border-bottom: 1px solid #01723D;
    text-align: center;
    margin: 0 auto 2rem;
    padding-bottom: 0.5rem;
    display: inline-block;
    letter-spacing: 2px; }
    #com_backnumber h2 + p {
      text-align: center;
      margin-bottom: 5rem;
      letter-spacing: 1px; }
      @media screen and (max-width: 575px) {
        #com_backnumber h2 + p {
          text-align: justify;
          margin: 0 2rem 4rem;
          letter-spacing: 0; } }
  #com_backnumber .com_record {
    background-color: #F9F6EF;
    padding-bottom: 6rem; }
    @media screen and (max-width: 767px) {
      #com_backnumber .com_record div.d-flex {
        flex-wrap: wrap; } }
    #com_backnumber .com_record ul {
      align-items: flex-end;
      justify-content: space-around;
      margin: 4rem 0 10rem;
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px 25px; }
      @media screen and (max-width: 1399px) {
        #com_backnumber .com_record ul {
          gap: 40px 0;
          margin: 2rem 0 8rem; } }
      @media screen and (max-width: 1199px) {
        #com_backnumber .com_record ul {
          margin: 1rem 0 6rem; } }
      @media screen and (max-width: 767px) {
        #com_backnumber .com_record ul {
          width: 100%; } }
      @media screen and (max-width: 575px) {
        #com_backnumber .com_record ul {
          margin: 1rem 0 3rem; } }
      #com_backnumber .com_record ul::after {
        content: '';
        display: block;
        width: 100%;
        height: 50px;
        background-image: url("../img/top-img.png");
        background-repeat: no-repeat;
        background-position: bottom left;
        background-size: auto;
        position: absolute;
        bottom: -40px; }
        @media screen and (max-width: 767px) {
          #com_backnumber .com_record ul::after {
            background-image: url("../img/top-sm-img.png");
            background-position: bottom center;
            background-size: contain;
            bottom: -32px; } }
        @media screen and (max-width: 575px) {
          #com_backnumber .com_record ul::after {
            bottom: -20px; } }
      #com_backnumber .com_record ul + ul::after {
        background-position: bottom right; }
        @media screen and (max-width: 767px) {
          #com_backnumber .com_record ul + ul::after {
            background-image: url("../img/top-sm-img.png");
            background-position: bottom center;
            background-size: contain;
            bottom: -32px; } }
        @media screen and (max-width: 575px) {
          #com_backnumber .com_record ul + ul::after {
            bottom: -20px; } }
      #com_backnumber .com_record ul li {
        width: 80%;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-end; }
        @media screen and (max-width: 575px) {
          #com_backnumber .com_record ul li {
            width: 90%; } }
        #com_backnumber .com_record ul li p {
          text-align: center; }
          @media screen and (max-width: 991px) {
            #com_backnumber .com_record ul li p {
              font-size: 13px;
              font-size: 1.3rem; } }
          @media screen and (max-width: 767px) {
            #com_backnumber .com_record ul li p {
              font-size: 16px;
              font-size: 1.6rem; } }
          @media screen and (max-width: 575px) {
            #com_backnumber .com_record ul li p {
              line-height: normal; } }
      #com_backnumber .com_record ul li.new {
        width: 100%; }
        #com_backnumber .com_record ul li.new::before {
          content: '';
          background-image: url("../img/new-decoration.svg");
          background-repeat: no-repeat;
          background-position: center;
          background-size: auto;
          width: 68px;
          height: 68px;
          display: block;
          position: absolute;
          z-index: 1;
          top: -3%;
          left: -20%; }
          @media screen and (max-width: 1199px) {
            #com_backnumber .com_record ul li.new::before {
              top: -8%; } }
          @media screen and (max-width: 991px) {
            #com_backnumber .com_record ul li.new::before {
              width: 55px;
              height: 55px; } }
          @media screen and (max-width: 767px) {
            #com_backnumber .com_record ul li.new::before {
              top: -3%;
              left: -15%; } }
          @media screen and (max-width: 575px) {
            #com_backnumber .com_record ul li.new::before {
              content: none; } }
        #com_backnumber .com_record ul li.new::after {
          content: '';
          background-image: url("../img/latest-issue.svg");
          background-repeat: no-repeat;
          background-position: center;
          background-size: auto;
          width: 80px;
          height: 80px;
          display: block;
          position: absolute;
          z-index: 1;
          bottom: -2%;
          left: -18%; }
          @media screen and (max-width: 991px) {
            #com_backnumber .com_record ul li.new::after {
              width: 70px;
              height: 70px; } }
          @media screen and (max-width: 767px) {
            #com_backnumber .com_record ul li.new::after {
              left: -10%; } }
        #com_backnumber .com_record ul li.new p {
          color: #01723D;
          text-align: center; }
        #com_backnumber .com_record ul li.new .hover-card img {
          filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.2)); }
    #com_backnumber .com_record ul.two_group {
      grid-template-columns: repeat(4, 1fr); }
      @media screen and (max-width: 767px) {
        #com_backnumber .com_record ul.two_group {
          grid-template-columns: repeat(2, 1fr); } }
      #com_backnumber .com_record ul.two_group::after {
        background-position: bottom center; }
        @media screen and (max-width: 767px) {
          #com_backnumber .com_record ul.two_group::after {
            background-image: url("../img/top-sm-img.png");
            background-position: bottom center;
            background-size: contain;
            bottom: -32px; } }
        @media screen and (max-width: 575px) {
          #com_backnumber .com_record ul.two_group::after {
            bottom: -20px; } }
  #com_backnumber .hover-card {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    /* ボタンを載せるエリア */ }
    #com_backnumber .hover-card:hover img {
      opacity: 0.5; }
    #com_backnumber .hover-card img {
      display: block;
      width: 100%;
      height: auto;
      transition: opacity 0.3s ease; }
    #com_backnumber .hover-card .hover-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none; }
      #com_backnumber .hover-card .hover-overlay div {
        width: 80%; }
        #com_backnumber .hover-card .hover-overlay div .hover-button {
          display: block;
          width: 100%;
          padding: 1rem 1rem;
          margin: 1rem auto;
          background-color: #01723D;
          border: 2px solid #01723D;
          color: #fff;
          text-decoration: none;
          border-radius: 1rem;
          font-size: 14px;
          font-size: 1.4rem;
          line-height: normal;
          font-weight: bold;
          transition: background-color 0.3s ease; }
          #com_backnumber .hover-card .hover-overlay div .hover-button + .hover-button {
            background-color: #C33033;
            border: 2px solid #C33033; }
            #com_backnumber .hover-card .hover-overlay div .hover-button + .hover-button:hover {
              background-color: #fff;
              color: #C33033; }
          #com_backnumber .hover-card .hover-overlay div .hover-button:hover {
            background-color: #fff;
            color: #01723D; }
          #com_backnumber .hover-card .hover-overlay div .hover-button i {
            padding-right: 2px; }
    #com_backnumber .hover-card:hover .hover-overlay {
      opacity: 1;
      pointer-events: auto; }

/*タブ切り替え全体のスタイル*/
.tabs {
  margin: 0 auto;
  text-align: center;
  padding-top: 5rem;
  /*タブのスタイル*/
  /*タブ切り替えの中身のスタイル*/ }
  @media screen and (max-width: 575px) {
    .tabs {
      padding-top: 3.5rem; } }
  .tabs .tab-button {
    display: flex;
    justify-content: center; }
  .tabs .tab_item {
    width: 238px;
    background-color: #DCDCDC;
    padding: 1rem 0;
    border-radius: 1rem;
    text-align: center;
    color: #808080;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    transition: all 0.2s ease;
    margin: 0 0.5rem; }
    @media screen and (max-width: 575px) {
      .tabs .tab_item {
        margin: 0.5rem 0; } }
    .tabs .tab_item:hover {
      opacity: 0.75; }
  .tabs .tab_content {
    display: none;
    padding: 4rem 4rem 0;
    clear: both; }
    @media screen and (max-width: 991px) {
      .tabs .tab_content {
        padding: 4rem 2rem 0; } }

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none; }

/*選択されているタブのコンテンツのみを表示*/
#com_2026:checked ~ #com_2026_content,
#com_2025:checked ~ #com_2025_content {
  display: block; }

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #01723D;
  color: #fff; }