/* .stn-innerに#sru-xxxで区別 */
#school-page {
  #st-area {
    #st-main {
      /* お知らせ一覧 */
      #sru-news-achi {
        .school-archive-list {
          display: flex;
          flex-direction: column;
          gap: 20px;
          max-width: 700px;
          margin: 0 auto;

          li {
            a {
              padding: 5px 0;

              align-items: center;
              position: relative;

              .na-time {
                display: block;
                font-size: 0.75rem;
                white-space: nowrap;
                width: 80px;
                color: var(--lblack);
              }

              .na-title {
                font-size: 1rem;
                white-space: nowrap;
                transition: all 0.3s;
                display: inline-block;
              }

              &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background-color: var(--morange);
                transition: all 0.4s;
                height: 2px;
              }

              &:hover {
                .na-title {
                  color: #747677;
                }
              }

              &:hover::after {
                width: 0;
              }

              .news-title-sp {
                display: none;
              }

              @media screen and (max-width: 670px) {
                .news-title-pc {
                  display: none;
                }
                .news-title-sp {
                  display: block;
                }
              }
            }
          }
        }
      }
      /* お知らせ一覧ここまで */

      /* 体験記一覧 */

      #sru-voice-achi {
        .sr-v-wrap {
          max-width: 700px;
          margin: 0 auto;
          margin-bottom: 30px;
          padding-bottom: 20px;
          border-bottom: 2px solid var(--lblue);

          .voice-year-filter {
            border: 2px solid var(--lblue);
            background-color: var(--lblue);
            width: fit-content;
            padding: 2px 4px;
            font-size: 1rem;
            transition: all 0.3s;
            cursor: pointer;
            margin: 0 0 20px auto;
            border-radius: 4px;
            select {
              cursor: pointer;
            }
            &:hover {
              background-color: white;
            }
          }

          .voice-filter-buttons {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            gap: 5px 10px;
            justify-content: right;

            a {
              font-size: 1rem;
              padding: 3px 5px;
              border: 2px solid var(--lblue);
              background-color: var(--lblue);
              border-radius: 4px;
              transition: all 0.3s;

              &.posi {
                background-color: var(--borange);
                border: 2px solid var(--orange);
              }

              &:hover {
                background-color: white;
              }
            }
          }
        }

        .school-archive-list {
          display: flex;
          flex-direction: column;
          gap: 20px;
          max-width: 700px;
          margin: 0 auto;

          li {
            a {
              background-color: white;
              border-radius: 0 0 20px 0;
              corner-shape: bevel;
              border: 2px solid var(--orange);
              padding: 20px;
              transition: all 0.3s;

              h2 {
                margin-bottom: 10px;
                font-size: 1.1rem;
                border-bottom: none;
              }

              p {
                font-size: 0.9rem;
                color: var(--lblack);
              }

              &:hover {
                background-color: var(--bblue);
                border: 2px solid var(--lorange);
              }
            }
          }
        }
      }
      /* 体験記一覧ここまで */
    }
    /* お知らせと体験記single */
    #st-main.nv-single {
      .post {
        max-width: 600px;
        margin: 0 auto;
      }
      .date {
        max-width: 600px;
        margin: 30px auto;
        font-size: 0.85rem;
        color: var(--lblack);
      }
      img {
        width: 100%;
        height: auto;
        max-width: 600px;
        margin: 30px auto;
      }

      p {
        font-size: 1.1rem;
        line-height: 170%;
      }

      strong, em{
        color: inherit;
      }

      h2 {
        margin-block: 50px;
        font-size: 1.6rem;
        max-width: unset;
      }

      h3 {
        margin-block: 30px;
        font-size: 1.3rem;
        padding-left: 20px;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          width: 8px;
          aspect-ratio: 1/1;
          background-color: var(--orange);
          display: block;
          left: 0;
          top: calc(0.565rem - 4px);
        }
      }

      .nv-re-btn {
        width: fit-content;
        font-size: 1.1rem;
        margin: 50px auto;
        transition: all 0.3s;

        &:hover {
          color: var(--lblack);
        }
      }

      /* テンプレ使用のスタイル */
      .cf-area{
        container-type: inline-size;
        container-name: cfa;

        .cf-box{
          width: 100%;
          margin: 75px auto;
        }
        dl{
          display: flex;
          margin-bottom: 25px;
          padding-bottom: 25px;
          border-bottom: 2px solid var(--lblue);
          gap: 20px;
          align-items: center;

          dt{
            width: 120px;
            font-size: 1.1rem;
          }
          dd{
            font-size: 1rem;
            line-height: 170%;
          }
        }

        .n-s-school{
          dl{
            dd{
              span{
                display: inline-block;
                margin: 10px;
                padding: 5px 12px;
                background-color: var(--morange);
                border-radius: 5px;
              }
            }
          }
        }

        .n-s-copy {
          h2{
          font-size: 1.2rem;
          color: var(--orange);
          margin-bottom: 20px;
        }

        p{
          margin-left: 25px;
          font-size: 1rem;
          margin-bottom: 20px;
          position: relative;

          &::before{
            content: "";
            position: absolute;
            top: calc(0.85rem - 5px);
            left: -20px;
            width: 10px;
            aspect-ratio: 1/1;
            display: block;
            background-color: var(--orange);
          }
        }
      }

      .n-t-img{
        max-width: 400px;
        margin: 20px auto;
      }

      .n-t-head{
        h2{
          margin-bottom: 10px;
        }

        p{
          font-size: .9rem;
          margin-bottom: 30px;
          color: var(--lblack);
        }
      }

      .n-s-other p{
        font-size: .9rem;
        color: var(--lblack);
      }

      .v-school{
        margin-bottom: 30px;
        p{
          font-size: 1.4rem;
          color: var(--orange);
          text-align: right;

          span{
            margin-left: 10px;
            color: #c30d23;
            font-size: 1.1rem;
          }
        }
      }

      .v-sub{
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--lblue);
        p{
          font-size: 1.2rem;
        }
      }

      .v-main{
        p{
          font-size: .9rem;
        }
      }

      .v-com{
        margin-block:50px 30px;
        h2{
          margin-bottom: 20px;
        }

        p{
          padding: 15px;
          border: 3px solid var(--morange);
          max-width: 500px;
          font-size: .9rem;
          color: var(--lblack);
          margin: 0 auto;
          border-radius: 10px;
        }
      }
      }

      @container cfa (max-width:450px){
        .cf-area{
          dl{
            flex-direction: column;
            align-items: start;
            margin-bottom: 15px;
          padding-bottom: 15px;
            dt{
              width: fit-content;
              padding: 5px 12px;
              background-color: var(--blue);
              border-radius: 5px;
              color: white;
            }
          }
        }
      }
    }
    /* お知らせと体験記singleここまで */

    /* 実績 */
    #results {
      .sr-v-wrap {
        max-width: 700px;
        margin: 0 auto;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 2px solid var(--lblue);
        .school-result-filter {
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          gap: 5px 10px;
          justify-content: right;

          a {
            font-size: 1rem;
            padding: 3px 5px;
            border: 2px solid var(--lblue);
            background-color: var(--lblue);
            border-radius: 4px;
            transition: all 0.3s;

            &.posi {
              background-color: var(--borange);
              border: 2px solid var(--orange);
            }

            &:hover {
              background-color: white;
            }
          }
        }
      }

      .school-results {
        max-width: 700px;
        margin: 0 auto;
      }

      .school-results-block {
        margin: 30px auto;
        padding: 20px;
        border-radius: 15px;
        background-color: var(--blorange);
      }

      .school-results-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;

        .school-result-card {
          width: 300px;
          padding: 10px;
          background-color: white;
          border: 2px solid var(--morange);
          border-radius: 5px;

          .src-1 {
            gap: 10px;
            margin-bottom: 10px;
            justify-content: right;

            p {
              font-size: 1rem;
              color: var(--lblack);
            }
          }

          h3 {
            font-size: 1.4rem;
            margin-bottom: 10px;
            span {
              font-size: 85%;
              color: #c30d23;
              margin-left: 5px;
            }
          }

          .result-sub {
            font-size: 1.2rem;
          }

          .result-note {
            font-size: 1rem;
            color: var(--lblack);
          }
        }
        .result-test,
        .result-grade {
          h3 {
            font-size: 1.1rem;
            text-align: center;
          }

          .result-score {
            text-align: center;
            font-size: 1.6rem;
          }
        }
      }
    }
    /* 実績ここまで */

    /* 募集状況 */
    #st-avail {
      .school-static-availability {
        .avt-box {
          width: 100%;
          container-type: inline-size;
          container-name: avt-box;
        }

        .availability-table-wrap {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
        }

        .slive-front-table {
          width: max-content;
          min-width: 100%;
          border-collapse: collapse;
          background: #fff;
          table-layout: auto;

          

          th,
          td {
            border: 1px solid #ddd;
            padding: 14px 10px;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
            min-width: 110px;
          }

          tr{
            position: relative;
          }

          th:first-child {
            min-width: 180px;
            position: sticky;
                        top: 0;
                        left: 0;
                        
          }

          thead {
            th {
              background: var(--navy);
              color: #fff;
              font-weight: bold;
              font-size: 1.1rem;
            }
          }

          tbody {
            th {
              background: #faf3e5;
              font-weight: bold;
            }

            
          }

          .time-header {
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: center;
            justify-content: center;
            line-height: 1.4;
          }

          .target-label {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            background: #fff;
            color: var(--blue);
            font-size: 0.8rem;
            font-weight: bold;
          }

          .time-label {
            font-weight: bold;
            font-size: 1.1rem;
          }

          td {
            span {
              display: inline-block;
              min-width: 80px;
              padding: 6px 10px;
              border-radius: 999px;
              font-size: 1rem;
            }
          }

          .status-open,
          .status-remain {
            span {
              background: #e7f7ed;
              color: #176b35;
            }
          }

          .status-full {
            span {
              background: #fdeaea;
              color: #9f1c1f;
            }
          }

          .status-closed,
          .status-none {
            span {
              background: #eee;
              color: #666;
            }
          }
        }

        .pre-text {
          margin-top: 18px;
          font-size: 0.9rem;
          color: #666;
          text-align: center;

          span {
            display: inline-block;
          }
        }

        .no-data-message {
          text-align: center;
          padding: 30px 15px;
          background: #faf3e5;
          border-radius: 12px;
        }
      }

      @container avt-box (max-width: 760px) {
        .school-static-availability {
          .slive-front-table {
            min-width: 720px;

            th,
            td {
              min-width: 90px;
              padding: 10px 8px;
            }

            

            th:first-child {
                        min-width: 110px;
                        

                    }
            
            .time-label{
              font-size: .9rem;
            }

            td{
              span{
                font-size: .85rem;
                padding: 4px 7px;
                min-width:70px ;
              }
            }
          }
        }
      }

      .pre-text {
        text-align: center;
        font-size: 1rem;
        max-width: 600px;
        margin: 0 auto;
        margin-top: 20px;
        color: var(--lblack);
        span {
          color: inherit;
        }
      }
    }
    /* 募集状況ここまで */
  }
}