@charset "UTF-8";

@import url("_common.css");
@import url("_utility.css");

body.p-news{
  & .l-lowerrecommend{
    background-color: var(--color-gray-primary);
  }
  & .l-contents.--01{
    & .c-tab{
      & .c-tab-list{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 4px;
        & .c-tab-item{
          display: grid;
          place-items: center;
          aspect-ratio: 320/75;
          background-color: var(--color-gray-primary);
          font-size: clamp(1rem, 0.823rem + 0.75vw, 1.625rem); /* 16px 26px */
          font-weight: 400;
          text-align: center;
          transition: font-weight 0.4s ease-in-out;
          &.active{
            background-color: var(--color-green-primary);
          }
          @media (any-hover: hover) {
            &:hover{
              font-weight: 600;
            }
          }
        }
      }
      & .c-tab-content{
        margin-block-start: clamp(1.75rem, 1.255rem + 2.11vw, 3.5rem); /* 28px 56px */
        & .c-tab-panel{
          & > ul{
            & > li{
              display: grid;
              align-items: center;
              grid-template-columns: 3em 100px 1fr 20px;
              gap: 1em;
              padding-block: clamp(1.25rem, 0.896rem + 1.51vw, 2.5rem); /* 20px 40px */
              padding-inline-end: clamp(1.25rem, 0.896rem + 1.51vw, 2.5rem); /* 20px 40px */
              border-bottom: 1px solid color-mix(in srgb, var(--color-gray-quinary) 75%, transparent);
              position: relative;
              @media (max-width: 750px) {
                grid-template-columns: 1fr;
              }
              & > .release{
                line-height: 1.1;
                & > .year{
                  font-size: clamp(0.625rem, 0.607rem + 0.08vw, 0.688rem); /* 10px 11px */
                  @media not all and (max-width: 750px) {
                    display: block;
                  }
                  @media (max-width: 750px) {
                    margin-inline-end: 1em;
                  }
                }
                & > .day{
                  font-size: clamp(2rem, 1.929rem + 0.3vw, 2.25rem); /* 32px 36px */
                }
              }
              & > .category__list{
                @media (max-width: 750px) {
                  display: flex;
                  gap: 10px;
                  flex-wrap: wrap;
                }
                & .category{
                  display: grid;
                  place-items: center;
                  padding-inline: 1em;
                  border-radius: 50vw;
                  background-color: var(--color-newscat-news);
                  color: var(--color-white);
                  font-size: 12px;
                  text-align: center;
                  &.--junior{
                    background-color: var(--color-newscat-junior);
                  }
                  &.--high{
                    background-color: var(--color-newscat-high);
                  }
                  &.--news{
                    background-color: var(--color-newscat-news);
                  }
                  &.--letter{
                    background-color: var(--color-newscat-letter);
                  }
                  &.--blog{
                    background-color: var(--color-newscat-blog);
                  }
                  &.--briefing{
                    background-color: var(--color-newscat-briefing);
                  }
                  & + &{
                    @media not all and (max-width: 750px) {
                      margin-block-start: .25em;
                    }
                  }
                }
              }
              & > .title{
                @media (max-width: 750px) {
                  display: -webkit-box;             
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  padding-inline-end: 10px;
                }
              }
              & > .arrow{
                position: relative;
                right: 0;
                transition: right 0.4s ease-in-out;
                @media (max-width: 750px) {
                  width: 20px;
                  height: 20px;
                  position: absolute;
                  bottom: 0;
                  right: 0;
                  translate: 0 calc(-50% - 1lh);
                  & img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    object-position: center;
                  }
                }
                & .desvg polyline{
                  stroke: var(--color-gray-senary);
                }
              }
              & > a{
                width: 100%;
                height: 100%;
                position: absolute;
                inset: 0;
                margin: auto;
                &::after{
                  display: block;
                  content: "";
                  width: 100%;
                  height: 100%;
                  background-color: color-mix(in srgb, var(--color-gray-primary) 00%, transparent);
                  position: absolute;
                  inset: 0;
                  margin: auto;
                  z-index: -1;
                  transition: background-color 0.4s ease-in-out;
                }
                @media (any-hover: hover) {
                  &:hover{
                    &::after{
                      background-color: color-mix(in srgb, var(--color-gray-primary) 60%, transparent);
                    }
                    & ~ .arrow{
                      right: -.25em;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    & .pagination{
      width: fit-content;
      margin-block-start: clamp(3.125rem, 2.241rem + 3.77vw, 6.25rem); /* 50px 100px */
      margin-inline: auto;
      & > ul{
        display: flex;
        flex-wrap: wrap;
        gap: clamp(0.5rem, 0.358rem + 0.6vw, 1rem); /* 8px 16px */
        & > li a{
          display: grid;
          place-items: center;
          width: clamp(2.188rem, 1.568rem + 2.64vw, 4.375rem); /* 35px 70px */
          aspect-ratio: 1;
          background-color: var(--color-gray-primary);
          font-size: clamp(0.938rem, 0.672rem + 1.13vw, 1.875rem); /* 15px 30px */
          font-weight: 400;
          line-height: 1;
          text-align: center;
          transition: font-weight 0.4s ease-in-out;
          &.active{
            background-color: var(--color-green-primary);
          }
          @media (any-hover: hover) {
            &:hover{
              font-weight: 500;
            }
          }
        }
      }
    }
  } /* 01 */

  /* single page */
  &.--lower{
    & .informationarea{
      display: inline grid;
      align-items: center;
      grid-template-columns: auto auto;
      gap: 1em;
      width: fit-content;
      & .category{
        display: inline grid;
        place-items: center;
        width: fit-content;
        padding-inline: .5em;
        background-color: var(--color-green-primary);
        &.--newsletter{
          background-color: var(--color-green-primary);
        }
      }
      & .date{
        margin-block-start: 0;
      }
    }
    & .contentarea{
      margin-block-start: clamp(1.25rem, 0.896rem + 1.51vw, 2.5rem); /* 20px 40px */
      & > * + *{
        margin-block-start: 1em;
      }
      & > ol,
      & > ul{
        all: revert;
      }
      & > img{
        max-width: 40%;
      }
      & a{
        color: var(--color-blue-primary);
        font-weight: inherit;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        transition: 
          text-decoration 0.4s ease-in-out,
          font-weight 0.4s ease-in-out;
        @media (any-hover: hover) {
          &:hover{
            text-decoration-thickness: 2px;
            font-weight: 700;
          }
        }
      }
      & + a.c-button{
        margin-block-start: clamp(3.75rem, 2.689rem + 4.53vw, 7.5rem); /* 60px 120px */
        margin-inline: auto;
        background-color: var(--color-green-primary);
        @media not all and (max-width: 750px) {
          width: fit-content;
        }
        @media (max-width: 750px) {
          width: 100%;
        }
        & .desvg polyline{
          stroke: var(--color-black-primary);
        }
      }
    }
  }
}