/* ========================================
   目指せる仕事と資格ページ - 最適化版CSS
   ======================================== */

/* CSS変数定義 */
:root {
  --primary-color: #28c27f;
  --secondary-color: #4bbcdf;
  --accent-color: #2577d6;
  --text-color: #363535;
  --bg-light: #eefbff;
  --bg-lighter: #d2f4ff;
  --border-radius: 8px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --font-size-base: 16px;
  --font-size-title: 25px;
  --line-height-base: 1.5;
  --max-width: 960px;
}

/* ========================================
   共通レイアウト
   ======================================== */
#aim-work {
  /* タイトル */
  .school-com-parts-title {
    color: var(--primary-color);
    display: block;
    font-size: var(--font-size-title);
    font-weight: 700;
    margin: 34px 0 0;
    text-align: center;
  }
  /* ナビゲーションリスト */
  .school-com-parts-item-list {
    padding: 20px 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    max-width: var(--max-width);
    margin: auto;
    justify-content: center;

    a {
      display: flex;
      align-items: end;
      justify-content: left;
      margin-right: 12px;

      span img {
        padding: 10px;
        background-image: url(/img/site_new/school/school-com-parts/arrow-blue.svg);
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: auto;
        width: 12px;
        height: 13px;
      }

      p {
        color: var(--text-color);
        font-size: var(--font-size-base);
        font-weight: 700;
      }
    }
  }
  /* メインエリア */
  .school-com-parts-Erea {
    display: flex;
    justify-content: center;

    .school-com-parts-Eria-list {
      width: var(--max-width);

      section {
        font-size: var(--font-size-base);
        font-weight: 700;
        text-align: left;
        padding: var(--spacing-xl) 0;

        /* セクションタイトル */
        .school-com-parts-Eria-list-title {
          border-top-left-radius: var(--border-radius);
          border-top-right-radius: var(--border-radius);
          background-color: var(--secondary-color);
          color: #ffffff;
          padding: 12px;
        }

        /* セクションコンテンツ */
        .school-com-parts-Eria-list-content {
          background-color: var(--bg-light);
          color: var(--text-color);
          padding: var(--spacing-md);

          /* 詳細エリア */
          .detail {
            div {
              text-align: center;
            }

            p {
              text-align: left;
              margin-left: 12px;
            }

            /* 画像ブロック */
            .image-block {
              margin-bottom: var(--spacing-md);

              img {
                height: 300px;
                width: 100%;
                object-fit: contain;
              }
            }

            /* 表示/非表示エリア */
            .collapse {
              display: -webkit-box;
              display: -ms-flexbox;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              height: auto;
              max-height: calc(16px * var(--line-height-base) * 3);
              overflow: hidden;

              &.show {
                max-height: unset;
                -webkit-line-clamp: unset;
              }
            }

            .collapsing {
              height: calc(16px * var(--line-height-base) * 3);
              min-height: calc(16px * var(--line-height-base) * 3);
            }

            /* 切り替えボタン */
            .btn-collapse-block {
              padding-top: var(--spacing-md);
            }

            /* コンテンツラッパー */
            .content_wrap {
              > p {
                height: 4.5em;
                overflow: hidden;
              }

              &.toggle > p {
                height: auto;
              }

              .toggle-btn {
                display: flex;
                justify-content: center;
                padding: var(--spacing-md) 0 var(--spacing-sm);

                img:first-child {
                  display: block;
                }

                img:nth-child(2) {
                  display: none;
                }
              }

              &.toggle .toggle-btn {
                img:first-child {
                  display: none;
                }

                img:nth-child(2) {
                  display: block;
                }
              }

              .btn-block .moreknow .u-pc {
                color: var(--accent-color);
                padding: var(--spacing-md) 0;
              }
            }
          }

          /* 詳細フレックスレイアウト */
          .detail-flex {
            display: flex;
            justify-content: left;
            padding-bottom: var(--spacing-xl);

            div {
              padding: var(--spacing-md);

              p {
                font-size: var(--font-size-base);
                padding-bottom: var(--spacing-md);
              }
            }

            p {
              text-align: left;
              margin-left: 12px;
            }
          }

          /* エントリーブロック */
          .entry-block {
            padding-bottom: var(--spacing-xl);

            .title {
              display: flex;
              justify-content: left;

              .title-margin {
                width: var(--spacing-sm);
                background-color: var(--secondary-color);
              }

              p {
                background-color: var(--bg-lighter);
                padding: 6px;
                width: 100%;
              }
            }

            .period {
              margin: 12px 0 0 var(--spacing-md);
            }
          }

          /* ボタンブロック */
          .btn-block {
            margin-top: var(--spacing-lg);
            text-align: center;

            > div {
              text-align: center;

              &:first-child {
                margin-bottom: 12px;
              }
            }

            div {
              padding-bottom: var(--spacing-md);

              p {
                color: var(--accent-color);
                font-size: var(--font-size-base);
                line-height: var(--line-height-base);
                font-weight: bold;
              }

              a {
                color: var(--accent-color);
                text-decoration: none;
              }
            }

            /* リクエストボタン */
            .request-btn {
              display: none;
            }
          }

          /* トグルラッパー */
          .toggle-wrap {
            .detail {
              height: 4em;
              overflow: hidden;
              margin-bottom: var(--spacing-md);
            }

            .btn-block {
              > div {
                display: flex;
                justify-content: center;

                img.u-pc:first-child {
                  display: block;
                }

                img.u-pc:last-child {
                  display: none;
                }
              }

              .request-btn {
                display: none;
              }
            }

            &.toggle {
              .detail {
                height: auto;
              }

              .btn-block {
                > div {
                  img.u-pc:first-child {
                    display: none;
                  }

                  img.u-pc:last-child {
                    display: block;
                  }
                }

                .request-btn {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* ========================================
   レスポンシブ対応
   ======================================== */
@media (max-width: 768px) {
  #aim-work {
    .school-com-parts-title {
      padding: 0 50px;
      font-size: 17px;
    }
    .school-com-parts-item-list {
      display: block;
      margin-left: 12px;
      a {
        align-items: center;
        span {
          display: flex;
          align-items: center;
        }
        p {
          font-size: 15px;
        }
      }
    }
    .school-com-parts-Erea {
      padding: 0 10px;
      .school-com-parts-Eria-list {
        padding: 0 10px;
        width: 100%;
        section .school-com-parts-Eria-list-content {
          margin-left: 0;
          .detail {
            div > img {
              display: none;
            }
            p {
              margin-left: 0;
            }
            .collapse {
              -webkit-line-clamp: 10;
              max-height: calc(10px * 1.5 * 1.8 * 10);
            }
            .collapsing {
              height: calc(10px * 1.5 * 1.8 * 10);
              min-height: calc(10px * 1.5 * 1.8 * 10);
            }
            .content_wrap > p {
              height: 18.5em;
            }
          }
          .detail-flex {
            display: block;
            div {
              padding: 0;
            }
            p {
              margin-left: 0;
            }
            .detail-img {
              padding-bottom: var(--spacing-md);
              text-align: center;
              img {
                object-fit: cover;
                width: 50%;
              }
            }
          }

          .entry-block {
            margin-left: 0;
            .period {
              margin-left: 0;
            }
          }

          .btn-block {
            div {
              p {
                line-height: 1.8;
                font-weight: 400;
              }
              .disp-table {
                margin: auto;
                padding: var(--spacing-sm) 0;
                display: table;
                img {
                  display: table-cell;
                }
                p {
                  text-align: center;
                  color: var(--accent-color);
                  display: table-cell;
                  font-size: 11px;
                  vertical-align: middle;
                  padding: 0;
                }
              }
            }

            > div .sp-display {
              display: flex;
              position: relative;
              p {
                padding: 0 5%;
              }
              div {
                display: flex;
                align-items: center;
                position: absolute;
                top: 50%;

                &:first-child {
                  top: 50%;
                }

                &:last-child {
                  top: 50%;
                  right: 0;
                }

                hr {
                  width: 42px;
                  border: 0;
                  border-top: solid 1px #2578d7;
                }

                &:first-child hr {
                  transform: rotate(45deg);
                }

                &:last-child hr {
                  transform: rotate(-45deg);
                }
              }
            }
          }
        }
      }
    }
  }
}