/* -----------------------------------------------------
	variables
----------------------------------------------------- */
/* -----------------------------------------------------
	page_ttl
----------------------------------------------------- */
#page_ttl {
  text-align: center; }
  #page_ttl h1 {
    font-size: 4.0rem; }

/* -----------------------------------------------------
	list
----------------------------------------------------- */
#list {
  padding: 60px 50px 90px;
  background-color: #f8f6f7; }
  @media screen and (max-width: 768px) {
    #list {
      padding: 13.02083vw 4.55729vw 23.4375vw; } }
  #list .inner .sub_ttl {
    margin: 0 0 40px; }
    @media screen and (max-width: 768px) {
      #list .inner .sub_ttl {
        margin: 0 0 4.6875vw; } }
    #list .inner .sub_ttl span {
      min-width: 362px; }
      @media screen and (max-width: 768px) {
        #list .inner .sub_ttl span {
          min-width: 59.375vw; } }
    #list .inner .sub_ttl:nth-of-type(n+2) {
      margin: 60px 0 40px; }
      @media screen and (max-width: 768px) {
        #list .inner .sub_ttl:nth-of-type(n+2) {
          margin: 13.02083vw 0 4.6875vw; } }
  #list .inner .article_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
    @media screen and (max-width: 768px) {
      #list .inner .article_wrap {
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch; } }
    #list .inner .article_wrap article {
      width: calc(94.54545454545455% / 4);
      margin-left: 1.8181818181818181%;
      background-color: #FFFFFF;
      -webkit-box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3);
      box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3); }
      @media screen and (max-width: 768px) {
        #list .inner .article_wrap article {
          width: calc(94.11764705882352% / 2);
          margin-left: 5.88235294117647%; } }
      #list .inner .article_wrap article a {
        display: block;
        padding: 0 0 25px 0;
        height: 100%; }
        @media screen and (max-width: 768px) {
          #list .inner .article_wrap article a {
            padding: 0 0 2.60417vw 0; } }
        #list .inner .article_wrap article a picture {
          display: block;
          width: 100%;
          aspect-ratio: 10 / 7;
          overflow: hidden; }
          #list .inner .article_wrap article a picture img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover; }
        #list .inner .article_wrap article a .title {
          font-size: 2rem;
          font-weight: 700;
          margin: 20px 10px 0; }
          @media screen and (max-width: 768px) {
            #list .inner .article_wrap article a .title {
              font-size: 3.38542vw;
              margin: 2.60417vw 2.60417vw 0; } }
      @media screen and (max-width: 768px) {
        #list .inner .article_wrap article:nth-child(2n+1) {
          margin-left: 0; } }
      @media screen and (min-width: 769px) {
        #list .inner .article_wrap article:nth-child(4n+1) {
          margin-left: 0; } }
      @media screen and (max-width: 768px) {
        #list .inner .article_wrap article:nth-child(n+3) {
          margin-top: 5.20833vw; } }
      @media screen and (min-width: 769px) {
        #list .inner .article_wrap article:nth-child(n+5) {
          margin-top: 1.8181818181818181%; } }