@charset "utf-8";

:root {}

/***********コース共通*************/

#course_top_image{
  aspect-ratio: 2 / 1;
	position:relative;
	overflow: hidden;
  border-radius: 20px;
	img{
		min-width:100%;
		min-height:100%;
		object-fit: cover;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

section.class_prf {
  /*クラス紹介*/
  --class_Color: #ff2b2b;
  margin: 20px auto 0 auto;

  hgroup {
    display: flex;
    flex-direction: column-reverse;
    gap: 5px;

    h1 {
      color: var(--class_Color);
      font-size: 2em;
      font-weight: 600;

      inline-size: fit-content;
      margin-inline: auto;
      text-align: left;

      span {
        font-size: .7em;
        display: inline-block;
        padding: .2em .5em;
        border-radius: 5px;
        background: red;
        color: white;
        font-weight: 500;
        margin: 0 .5em 0 0;
      }
    }

    p {
      color: var(--class_Color);
      font-size: 1.1em;
      inline-size: fit-content;
      margin-inline: auto;
      text-align: left;
    }

  }

  >aside {
    margin: 1em auto 0 auto;
    font-size: 1.5em;
    font-weight: 500;
    color: red;
  }

  >dl {
    margin: 30px auto 0 auto;

    >div {
      display: grid;
      grid-template-columns: 6em 1fr;
      font-size: 1.4em;
      padding: .3em 0;

      dt {
        font-weight: 500;
      }

      dd {
        font-weight: 500;
        text-align: left;

        aside {
          font-weight: normal;
          font-size: .7em;
        }
      }
    }

    @media (max-width: 600px) {
      >div {
        display: block;
        text-align: left;
      }
    }
  }

  .point {
    /*ポイント*/
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 10px;
    margin: 30px auto 0 auto;
    background: url(../../img/pages/course/course1/matinami.png) bottom center repeat-x;

    div {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      gap: 0px;

      p {
        border: 1px solid var(--class_Color);
        padding: 10px 10px 25px 10px;
        border-radius: 10px;
        text-align: left;
      }

      figure {
        margin: -20px auto 0 auto;
      }
    }

    @media (max-width: 600px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .mokuhyou {

    /*訓練目標*/
    >P {
      color: #2c5496;
      font-size: 1.1em;
      font-weight: 500;
    }
  }

  .curriculum {

    /*訓練内容*/
    >div {
      --cur_Color: gray;

      h5 {
        color: var(--cur_Color);
        font-weight: 500;
        font-size: 1.1em;
        letter-spacing: 1em;
      }

      ul {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
        border: 2px solid var(--cur_Color);
        border-left: 3px solid var(--cur_Color);
        border-top: 3px solid var(--cur_Color);
        background: #eee;
        margin: .5em auto 0 auto;

        li {
          display: flex;
          flex-wrap: wrap;
          background: white;
          justify-content: space-between;
          align-items: center;
          border-right: 1px solid var(--cur_Color);
          border-bottom: 1px solid var(--cur_Color);
          padding: 10px;

          p {
            span {
              font-size: .8em;
              font-weight: normal;
            }

            &:nth-of-type(2) {
              font-weight: 500;
              font-size: 1.1em;
            }
          }
        }
      }

      &:nth-of-type(1) {
        --cur_Color: #498617;
      }

      &:nth-of-type(2) {
        --cur_Color: #ff8515;
      }

      &:nth-of-type(3) {
        --cur_Color: #e62060;
      }
    }

    >p {
      display: flex;
      flex-wrap: wrap;
      justify-content: end;
      gap: .3em 2em;
      font-size: 1.1em;
      font-weight: 500;
    }
  }

  .license {

    /*資格*/
    >div {
      ul {
        >*+* {
          border-top: 1px dotted silver;
        }

        li {
          padding: 7px;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          align-items: flex-start;
          /* 上寄せ */

          h5 {
            flex: 1 1 auto;
            /* 項目名をできるだけ広げる */
            margin: 0;

            /* 余白調整 */
            &::before {
              content: "■";
              margin: 0 .3em 0 0;
            }
          }

          p {
            text-align: right;
            white-space: nowrap;
            /* 金額を折り返さない */
            flex: 0 0 auto;
            /* 初期状態では折り返さない */
          }

          /* 項目名が長すぎて金額とぶつかった場合、金額を下へ */
          @supports (width: min-content) {
            h5 {
              min-width: min-content;
              /* 必要な最小幅にする */
            }

            p {
              flex-basis: 100%;
              /* 下に回る */
              text-align: right;
              /* 右寄せ */
            }
          }
        }
      }
    }
  }

  .taishou {

    /*主な対象者*/
    >div {
      >ul {
        text-align-last: left;

        >*+* {
          margin-top: .3em;
        }

        >li {
          margin-left: 2em;
          list-style: disc;
          font-size: 1.1em;
          text-align: left;
        }
      }

      >aside {
        margin: 1em auto 0 auto;
        inline-size: fit-content;
        margin-inline: auto;
        text-align: left;

        a {
          display: inline-block;

        }
      }
    }
  }

  .houhou {

    /*受講方法*/
    p {
      text-align: left;
      font-weight: 500;
      font-size: 1.3em;

      strong {
        color: red;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: .2em;
      }
    }
  }

  &:nth-of-type(2) {
    --class_Color: #237ad1;
  }
}

.class_wrap {
  /*アコーディオン 廃止バージョン*/
  border: 1px solid #000;
  margin-bottom: 20px;
  text-align: left;
  /*クリックするとコンテンツ表示*/

  /*コンテンツ初めは非表示*/
  .content {
    >* {
      margin: 0;
      padding: 20px;
    }
  }

  /*チェックボックスを非表示にする*/
  input {
    display: none;
  }

  label {
    padding: 10px;
    background: #eee;
    display: block;
    font-weight: 500;
    font-size: 1.1em;
    position: relative;
    cursor: default;
  }

  /*三角矢印アイコン*/
  .icon {
    display: none;
  }
}

.class_wrap2 {
  /*アコーディオン*/
  border: 1px solid #000;
  margin-bottom: 10px;
  text-align: left;
  /*クリックするとコンテンツ表示*/

  /*コンテンツ初めは非表示*/
  .content {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    /*transition: 0.5s;*/
    overflow: hidden;

    >* {
      margin: 0;
      padding: 10px;
    }
  }

  input:checked~.content {
    max-height: 100%;
    opacity: 1;
    visibility: visible;
  }

  /* アコーディオン表示の際に三角回転 */
  input:checked~label .icon {
    transform: rotate(180deg);
  }

  /*チェックボックスを非表示にする*/
  input {
    display: none;
  }

  label {
    padding: 10px;
    background: #eee;
    display: block;
    font-weight: 500;
    font-size: 1.1em;
    position: relative;
    cursor: pointer;
  }

  /*三角矢印アイコン*/
  .icon {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 24px;
    margin-left: 6px;
    flex-shrink: 0;
    transform-origin: center 43%;
    transition: transform 0.5s;

    &::before,
    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 15px;
      height: 3px;
      background-color: #000;
    }

    &::before {
      left: 0;
      transform: rotate(45deg);
    }

    &::after {
      right: 0;
      transform: rotate(-45deg);
    }
  }
}

/* 小田・追加コード------------------------小田・追加コード------------------------小田・追加コード */

/* 募集期間・訓練期間・選考日時のレイアウト調整 */
.schedule{
  margin: 0 auto;
  width:fit-content;
}

/* コース詳細の表示オンオフ -----訓練中-----*/
section.class_prf{
  >dl{
    >div.isTraining{
      display: none;
    }
  }
}

/* コース詳細の表示オンオフ -----開講前-----*/
/* .detail_hide{
  display: none;
}
section.class_prf{
  .curriculum{
    >p{
      display: none;
    }
  }
} */