/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
  }
  body {
    margin: 0
  }
  main {
    display: block
  }
  h1 {
    font-size: 2em;
    margin: 0.67em 0
  }
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
  }
  pre {
    font-family: monospace, monospace;
    font-size: 1em
  }
  a {
    background-color: transparent
  }
  abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
  }
  b, strong {
    font-weight: bolder
  }
  code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em
  }
  small {
    font-size: 80%
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
  }
  sub {
    bottom: -0.25em
  }
  sup {
    top: -0.5em
  }
  img {
    border-style: none
  }
  button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
  }
  button, input {
    overflow: visible
  }
  button, select {
    text-transform: none
  }
  button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button
  }
  button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
  }
  button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
  }
  fieldset {
    padding: 0.35em 0.75em 0.625em
  }
  legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
  }
  progress {
    vertical-align: baseline
  }
  textarea {
    overflow: auto
  }
  [type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0
  }
  [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto
  }
  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
  }
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
  }
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
  }
  details {
    display: block
  }
  summary {
    display: list-item
  }
  template {
    display: none
  }
  [hidden] {
    display: none
  }
  *, *::before, *::after {
    box-sizing: border-box
  }
  html {
    box-sizing: border-box
  }
  body, button, input, select, optgroup, textarea {
    color: #404040;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.5
  }
  h1, h2, h3, h4, h5, h6 {
    clear: both
  }
  p {
    margin-bottom: 1em
  }
  dfn, cite, em, i {
    font-style: italic
  }
  blockquote {
    margin: 0 1.5em
  }
  address {
    margin: 0 0 1.5em
  }
  pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em
  }
  code, kbd, tt, var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace
  }
  abbr, acronym {
    border-bottom: 1px dotted #666;
    cursor: help
  }
  mark, ins {
    background: #fff9c0;
    text-decoration: none
  }
  big {
    font-size: 125%
  }
  body {
    background: #fff
  }
  hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em
  }
  ul, ol {
    margin: 0 0 1.5em 3em
  }
  ul {
    list-style: disc
  }
  ol {
    list-style: decimal
  }
  li > ul, li > ol {
    margin-bottom: 0;
    margin-left: 1.5em
  }
  dt {
    font-weight: 700
  }
  dd {
    margin: 0 1.5em 1.5em
  }
  embed, iframe, object {
    max-width: 100%
  }
  img {
    height: auto;
    max-width: 100%
  }
  figure, .picture {
    margin: 0 0 1em 0
  }
  table {
    margin: 0 0 1.5em;
    width: 100%
  }
  a {
    color: #4169e1
  }
  a:visited {
    color: purple
  }
  a:hover, a:focus, a:active {
    color: #191970
  }
  a:focus {
    outline: thin dotted
  }
  a:hover, a:active {
    outline: 0
  }
  button, input[type="button"], input[type="reset"], input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em
  }
  button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa
  }
  button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus {
    border-color: #aaa #bbb #bbb
  }
  .txt-link {
    text-align: right
  }
  .txt-link a {
    position: relative;
    display: inline-block;
    margin: 0;
    padding-bottom: 10px;
    color: #000;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    transition: .3s
  }
  .txt-link a::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #000;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    transition: .3s
  }
  .txt-link a::after {
    content: "";
    display: block;
    position: absolute;
    right: 4px;
    bottom: 0;
    width: calc(100% - 4px);
    height: 3px;
    background: #000;
    transition: .3s
  }
  .txt-link a:hover {
    color: #ff0072;
    transform: translateX(-10px)
  }
  .txt-link a:hover::before {
    right: -10px;
    background: #ff0072
  }
  .txt-link a:hover::after {
    right: -6px;
    width: calc(100% + 1em);
    background: #ff0072
  }
  .btn a {
    position: relative;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    background: #ddd;
    border-radius: 25px;
    transition: .3s
  }
  .btn.btn-contact a {
    width: 280px;
    padding: 0 0 0 1em;
    color: #ff0;
    background: #000
  }
  .btn.btn-contact a::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 4.5em;
    width: 16px;
    height: 12px;
    margin: auto;
    border: #ff0 1px solid;
    transition: .3s
  }
  .btn.btn-contact a::after {
    content: "";
    position: absolute;
    top: 15px;
    left: calc(4.5em + 3px);
    width: 10px;
    height: 10px;
    margin: auto;
    border-right: #ff0 1px solid;
    border-bottom: #ff0 1px solid;
    transform-origin: center;
    transform: rotate(45deg);
    transition: .3s
  }
  .btn.btn-contact a:hover {
    color: #000;
    background: #fff
  }
  .btn.btn-contact a:hover::before, .btn.btn-contact a:hover::after {
    border-color: #000
  }
  @media screen and (min-width: 768px) {
    .txt-link a {
      font-size: 16px
    }
    .btn.btn-contact a {
      width: 200px;
      line-height: 44px
    }
    .btn.btn-contact a::before {
      top: 16px;
      left: 2em
    }
    .btn.btn-contact a::after {
      top: 12px;
      left: calc(2em + 3px)
    }
  }
  input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px
  }
  input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus {
    color: #111
  }
  select {
    border: 1px solid #ccc
  }
  textarea {
    width: 100%
  }
  header {
    margin: 0
  }
  main {
    position: relative;
    margin: 0
  }
  @media screen and (min-width: 1024px) {
    main {
      background: url("../../assets/img/main_bg.png") repeat-y top left;
      background-size: 264px auto
    }
  }
  footer {
    position: relative;
    padding: 0;
    text-align: center;
    background: #ff0
  }
  @media screen and (min-width: 1024px) {
    footer {
      margin-top: -76px
    }
    footer::before {
      content: "";
      display: block;
      position: absolute;
      top: -66px;
      left: 265px;
      right: auto;
      width: 125px;
      height: 67px;
      margin: auto;
      background: url("../../assets/img/footer-decor.svg") no-repeat center top;
      background-size: 125px auto;
      transform: translateX(-50%)
    }
    footer::after {
      content: "";
      display: block;
      position: absolute;
      top: -76px;
      left: 265px;
      width: 1px;
      height: 20px;
      background: #bfbfbf;
      background: -webkit-linear-gradient(170deg, #bfbfbf 0%, #ff0 100%);
      background: -moz-linear-gradient(170deg, #bfbfbf 0%, #ff0 100%);
      background: linear-gradient(170deg, #bfbfbf 0%, #ff0 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#BFBFBF", endColorstr="#FFFF00", GradientType=0)
    }
  }

  nav .entry-btn {
    position: relative;
    display: flex;
    height: 100%;
    justify-content: center;
  }
  nav .entry-btn .entry {
    position: relative;
    margin: 0;
  }
  nav .entry-btn .entry::after {
    content: "";
    display: block;
    padding-top: 48%
  }
  nav .entry-btn .entry a {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../../assets/img/nav_v2.png") no-repeat;
    background-size: auto 100%;
    overflow: hidden
  }
  nav .entry-btn .entry a::after {
    content: "";
    display: block;
    position: absolute;
    left: 3px;
    bottom: 4px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background: #ff0;
    border: #9b0087 solid 3px;
    border-radius: 10px;
    box-shadow: 0px 3px 0px 0px #9b0087;
    z-index: -1
  }
  nav .entry-btn .entry a:hover::after {
    bottom: 0;
    transition: 0.3s;
    box-shadow: none
  }
  nav .entry-btn .entry.ao-adm {
	  display: none;
    width: 39%
  }
  nav .entry-btn .entry.ao-adm a::after {
    background: #ff0072
  }
  nav .entry-btn .entry.ao-adm:hover a {
    background-position: left 4px;
    transition: 0.3s
  }
  nav .entry-btn .entry.open-cp {
    width: 39%
  }
  nav .entry-btn .entry.open-cp a {
    background-position: 67.6% top
  }
  nav .entry-btn .entry.open-cp:hover a {
    background-position: 67.6% 4px;
    transition: 0.3s
  }
  nav .entry-btn .entry.req-info {
    width: 19%
  }
  nav .entry-btn .entry.req-info a {
    background-position: right top
  }
  nav .entry-btn .entry.req-info:hover a {
    background-position: right 4px;
    transition: 0.3s
  }
  @media screen and (min-width: 1200px) {
    nav .entry-btn .entry a::after {
      border-radius: 20px
    }
  }
  .floating-area {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    z-index: 10
  }
  .floating-area.scrollend {
    position: static
  }
  .floating-area .entry-btn {
    position: relative;
    display: flex;
    height: 80px;
    justify-content: center;
    align-content: center;
    align-items: flex-end;
    overflow: hidden
  }
  .floating-area .entry-btn::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 10px;
    box-shadow: 0px -6px 20px 0px rgba(0, 0, 0, 0.6)
  }
  .floating-area .entry-btn .entry {
    position: relative;
    margin: 0 2px;
    z-index: 1
  }
  .floating-area .entry-btn .entry a {
    position: relative;
    display: block;
    height: 80px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url("../../assets/img/entry-btn_sp_v2.png") no-repeat;
    background-size: 349px auto
  }
  .floating-area .entry-btn .entry::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 70px;
    background: #ff0;
    border: #fff solid 2px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0px 6px 10px -6px rgba(0, 0, 0, 0.6);
    z-index: -1
  }
  .floating-area .entry-btn .entry.ao-adm {
	 display: none;
    width: 145px
  }
  .floating-area .entry-btn .entry.ao-adm::after {
    background: #ff0072
  }
  .floating-area .entry-btn .entry.open-cp {
    width: 136px
  }
  .floating-area .entry-btn .entry.open-cp a {
    background-position: -145px top
  }
  .floating-area .entry-btn .entry.req-info {
    width: 68px
  }
  .floating-area .entry-btn .entry.req-info a {
    background-position: -281px top
  }
  @media screen and (min-width: 1024px) {
    .floating-area {
      position: absolute;
      left: 0;
      top: 0;
      bottom: auto;
      width: 220px;
      height: 450px
    }
    .floating-area.active {
      position: fixed;
      left: 0;
      top: 0;
      bottom: auto
    }
    .floating-area.scrollend {
      position: absolute;
      top: auto;
      bottom: 120px
    }
    .floating-area .entry-btn {
      display: block;
      height: auto;
      padding-top: 45px
    }
    .floating-area .entry-btn::after {
      display: none
    }
    .floating-area .entry-btn .entry {
      margin: 0 0 13px 0
    }
    .floating-area .entry-btn .entry a {
      position: relative;
      display: block;
      width: 200px;
      height: 100%;
      background: url("../../assets/img/entry-btn_v2.png") no-repeat;
      background-position: top right;
      background-size: 200px auto
    }
    .floating-area .entry-btn .entry::before {
      content: "";
      display: block;
      position: absolute;
      right: 0;
      bottom: 0;
      width: 220px;
      height: calc(100% - 4px);
      background: #9b0087;
      border: #9b0087 solid 3px;
      border-radius: 0 22px 22px 0;
      box-shadow: 0px 6px 10px -6px rgba(0, 0, 0, 0.6);
      z-index: -2
    }
    .floating-area .entry-btn .entry::after {
      left: auto;
      right: 0;
      bottom: 4px;
      width: 220px;
      height: calc(100% - 4px);
      border: #9b0087 solid 3px;
      border-radius: 0 22px 22px 0;
      box-shadow: none;
      z-index: -1
    }
    .floating-area .entry-btn .entry:hover::after {
      bottom: 0;
      transition: 0.3s
    }
    .floating-area .entry-btn .entry.ao-adm {
		display: none;
      width: 200px;
      height: 160px
    }
    .floating-area .entry-btn .entry.ao-adm::before {
      height: calc(100% - 29px)
    }
    .floating-area .entry-btn .entry.ao-adm::after {
      background: #ff0072;
      height: calc(100% - 29px)
    }
    .floating-area .entry-btn .entry.ao-adm:hover a {
      background-position: right 4px;
      transition: 0.3s
    }
    .floating-area .entry-btn .entry.open-cp {
      width: 200px;
      height: 134px
    }
    .floating-area .entry-btn .entry.open-cp a {
      background-position: right -160px
    }
    .floating-area .entry-btn .entry.open-cp:hover a {
      background-position: right -156px;
      transition: 0.3s
    }
    .floating-area .entry-btn .entry.req-info {
      width: 200px;
      height: 74px
    }
    .floating-area .entry-btn .entry.req-info a {
      background-position: right -294px
    }
    .floating-area .entry-btn .entry.req-info:hover a {
      background-position: right -290px;
      transition: 0.3s
    }
  }
  #hero {
    position: relative
  }
  #hero .inner {
    position: relative;
    background: url("../../assets/img/hero_sp.webp") no-repeat;
    background-size: 100% auto
  }
  #hero .inner::after {
    content: "";
    display: block;
    padding-top: 192.666%
  }
  #hero .header-brand-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
  }
  #hero .header-brand-area::after {
    content: "";
    display: block;
    padding-top: 20%
  }
  #hero .header-brand-area .tca-logo {
    position: absolute;
    top: 10%;
    left: 7.7%;
    width: 24.666%;
    line-height: 0
  }
  #hero .header-brand-area .school-name {
    position: absolute;
    top: 18%;
    right: 6%;
    width: 59.2%;
    line-height: 0
  }
  #hero h1 {
    position: absolute;
    top: 16%;
    left: 8.666%;
    display: block;
    width: 46.8%;
    margin: 0;
    line-height: 0;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../../assets/img/h1_sp.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden
  }
  #hero h1::after {
    content: "";
    display: block;
    padding-top: 57.5%
  }
  #hero .tagline {
    position: absolute;
    top: 55%;
    left: 0;
    right: 0;
    width: 85%;
    margin: 0 auto;
    line-height: 0;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../../assets/img/tagline_sp.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden
  }
  #hero .tagline::after {
    content: "";
    display: block;
    padding-top: 27%
  }
  #hero nav {
    display: none
  }
  @media screen and (min-width: 768px) {
    #hero .inner {
      background: url("../../assets/img/hero.webp") no-repeat;
      background-size: 100% auto
    }
    /*#hero .inner::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: url("../../assets/img/splash.png") no-repeat;
      background-size: 100% auto;
      z-index: 1
    }*/
    #hero .inner::after {
      padding-top: 55.902%
    }
    #hero .header-brand-area {
      position: absolute;
      top: 2.173%;
      left: 2.777%;
      width: 35.69%;
      z-index: 2
    }
    #hero .header-brand-area::after {
      padding-top: 24.554%
    }
    #hero .header-brand-area .tca-logo {
      top: 0;
      left: 0;
      width: 35.445%
    }
    #hero .header-brand-area .school-name {
      top: 34%;
      right: 0;
      width: 59.4%
    }
    #hero h1 {
      top: 34%;
      left: 42.188%;
      width: 30%;
      background: url("../../assets/img/h1.png") no-repeat;
      background-size: 100% auto;
      z-index: 2
    }
    #hero .tagline {
      top: 63%;
      left: auto;
      right: 8.47%;
      width: 45%;
      margin: 0;
      background: url("../../assets/img/tagline.png") no-repeat;
      background-size: 100% auto;
      z-index: 2
    }
    #hero .tagline::after {
      padding-top: 17%
    }
  }
  @media screen and (min-width: 768px) {
    .mask {
      position: relative;
      width: 37.815%;
      height: 50px;
      overflow: hidden;
      background: url("../../assets/img/mask_bg.jpg") no-repeat left top;
      background-size: 100% auto;
      z-index: 10
    }
    .mask::before {
      content: "";
      display: block;
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background: url("../../assets/img/hero-under-mask_sm.png") no-repeat left top;
      background-size: auto 50px
    }
  }
  @media screen and (min-width: 1024px) {
    .mask {
      height: 66px
    }
    .mask::before {
      height: 66px;
      background: url("../../assets/img/hero-under-mask.png") no-repeat left top;
      background-size: auto 66px
    }
    .mask::after {
      content: "";
      display: block;
      position: absolute;
      bottom: 0;
      left: 265px;
      width: 1px;
      height: 10px;
      background: #bfbfbf;
      z-index: 3
    }
  }
  @media screen and (min-width: 1025px) and (orientation: landscape) {
    #hero nav {
      position: absolute;
      top: 76.149%;
      right: 8.47%;
      display: block;
      width: 50%;
      max-width: 840px;
      z-index: 3
    }
  }
  #cpt1 {
    position: relative
  }
  #cpt1::after {
    content: "";
    display: block;
    clear: both
  }
  #cpt1 .container {
    position: relative;
    margin: 0 auto;
    padding: 0
  }
  #cpt1 .container .inner {
    position: relative;
    margin: 0 auto;
    background: url("../../assets/img/cpt1_bg_sp.jpg") no-repeat bottom left;
    background-size: 100% auto
  }
  #cpt1 .container .inner::after {
    content: "";
    display: block;
    padding-top: 300%
  }
  #cpt1 figure {
    position: absolute;
    margin: 0;
    line-height: 0;
    border-radius: 45px;
    overflow: hidden
  }
  #cpt1 figure.ph1 {
    top: -1.5%;
    left: 8%;
    width: 84%
  }
  #cpt1 figure.ph2 {
    position: absolute;
    left: 4%;
    top: 45%;
    width: 63%;
    border-radius: 30px
  }
  #cpt1 figure.ph3 {
    position: absolute;
    right: 4%;
    top: 52%;
    width: 33.333%;
    border-radius: 30px
  }
  #cpt1 figure.ph4 {
    position: absolute;
    left: 35%;
    top: 63%;
    width: 30%;
    border-radius: 30px
  }
  #cpt1 figure.ph5 {
    display: none
  }
  #cpt1 .lead {
    display: block;
    position: absolute;
    top: 20%;
    left: 8%;
    width: 85%;
    margin: 0;
    text-indent: 100%;
    white-space: nowrap;
    background: url("../../assets/img/cpt1_lead.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden
  }
  #cpt1 .lead::after {
    content: "";
    display: block;
    padding-top: 73.846%
  }
  @media screen and (min-width: 768px) {
    #cpt1 .container {
      width: 80%
    }
    #cpt1 .container .inner {
      background: none
    }
    #cpt1 .container .inner::after {
      padding-top: 93%
    }
    #cpt1 figure {
      border-radius: 30px;
      overflow: hidden
    }
    #cpt1 figure.ph1 {
      top: 0;
      left: 50.79%;
      width: 33.674%
    }
    #cpt1 figure.ph2 {
      left: 59.81%;
      top: 45%;
      width: 33.674%
    }
    #cpt1 figure.ph3 {
      right: 2.79%;
      top: 18%;
      width: 18.79%
    }
    #cpt1 figure.ph4 {
      left: 77.209%;
      top: 80%;
      width: 16%;
      border-radius: 25px
    }
    #cpt1 figure.ph5 {
      display: block;
      left: 35%;
      top: 65%;
      width: 33.674%
    }
    #cpt1 .lead {
      top: 12%;
      left: 2.3%;
      width: 54%
    }
  }
  @media screen and (min-width: 1024px) {
    #cpt1 {
      position: relative
    }
    #cpt1::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 265px;
      width: 1px;
      height: 100%;
      background: #bfbfbf
    }
    #cpt1 .container {
      margin-left: 280px;
      width: calc(100% - 280px)
    }
  }
  @media screen and (min-width: 1200px) {
    #cpt1 .container {
      margin-left: 365px;
      width: calc(100% - 365px)
    }
  }
  @media screen and (min-width: 1365px) {
    #cpt1 .container .inner {
      width: 1080px
    }
    #cpt1 .container .inner .lead {
      left: 0
    }
  }
  @media screen and (min-width: 1800px) {
    #cpt1 .container .inner {
      margin: 0 0 0 12%
    }
  }
  #cpt2 {
    padding-bottom: 60px
  }
  #cpt2 .container > .header {
    width: 84%;
    margin: 0 auto
  }
  #cpt2 .container > .header h2 {
    display: block;
    width: 80%;
    margin: 0;
    text-indent: 100%;
    white-space: nowrap;
    line-height: 1;
    background: url("../../assets/img/cpt2_h2.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden
  }
  #cpt2 .container > .header h2::after {
    content: "";
    display: block;
    padding-top: 43.098%
  }
  #cpt2 .point {
    position: relative;
    margin: 0
  }
  #cpt2 .point .point-header {
    position: relative
  }
  #cpt2 .point .point-header::before {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    right: 0;
    width: 100%;
    height: 47px;
    background-color: #fff;
    border-radius: 0 0 45px 0
  }
  #cpt2 .point .point-header .inner {
    position: relative;
    margin: 0 auto;
    padding: 65px 0 0 0
  }
  #cpt2 .point .point-header .inner * {
    text-indent: 100%;
    white-space: nowrap;
    line-height: 0;
    overflow: hidden
  }
  #cpt2 .point .point-header .inner .point-numb {
    position: absolute;
    top: -20px;
    right: 8%;
    width: 170px;
    background: url("../../assets/img/cpt2_numb_point1.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point .point-header .inner .point-numb::after {
    content: "";
    display: block;
    padding-top: 40%
  }
  #cpt2 .point .point-header .inner h3 {
    width: 280px;
    margin: 0 0 20px 8%;
    background: url("../../assets/img/cpt2_h3_point1.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point .point-header .inner h3::after {
    content: "";
    display: block;
    padding-top: 12.5%
  }
  #cpt2 .point .point-detail {
    padding: 0 8% 60px
  }
  #cpt2 .point .point-detail figure {
    margin: 0 0 25px 0;
    overflow: hidden
  }
  #cpt2 .point .point-detail figure img {
    line-height: 0;
    border-radius: 50px 0 50px 0
  }
  #cpt2 .point .point-detail p {
    font-size: 19px
  }
  #cpt2 .point .point-detail .picture {
    max-width: 420px
  }
  #cpt2 .point .curricula {
    margin: -20px auto 0 auto;
    padding: 0 8% 60px
  }
  #cpt2 .point .curricula h4 {
    margin: 0 0 10px 0;
    padding: 0.6em 0;
    font-size: 15px;
    text-align: center;
    line-height: 1.3;
    background: #fff;
    border-radius: 30px
  }
  #cpt2 .point2 .point-header, #cpt2 .point4 .point-header {
    position: relative
  }
  #cpt2 .point2 .point-header::before, #cpt2 .point4 .point-header::before {
    transform: scale(-1, 1)
  }
  #cpt2 .point1 {
    background: #ffd6e4;
    background: -webkit-linear-gradient(180deg, #ffd6e4 0%, #fff 100%);
    background: -moz-linear-gradient(180deg, #ffd6e4 0%, #fff 100%);
    background: linear-gradient(180deg, #ffd6e4 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFD6E4", endColorstr="#FFFFFF", GradientType=0)
  }
  #cpt2 .point2 {
    background: #ffc7db;
    background: -webkit-linear-gradient(180deg, #ffc7da 0%, #fff 100%);
    background: -moz-linear-gradient(180deg, #ffc7da 0%, #fff 100%);
    background: linear-gradient(180deg, #ffc7da 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffc7db", endColorstr="#FFFFFF", GradientType=0)
  }
  #cpt2 .point2 .point-header .inner .point-numb {
    background: url("../../assets/img/cpt2_numb_point2.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point2 .point-header .inner h3 {
    margin: 0 0 20px 8%;
    background: url("../../assets/img/cpt2_h3_point2.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point2 .point-header .inner h3::after {
    padding-top: 21.25%
  }
  #cpt2 .point3 {
    background: #f4c7fb;
    background: -webkit-linear-gradient(180deg, #f4c7fb 0%, #fff 100%);
    background: -moz-linear-gradient(180deg, #f4c7fb 0%, #fff 100%);
    background: linear-gradient(180deg, #f4c7fb 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4c7fb", endColorstr="#FFFFFF", GradientType=0)
  }
  #cpt2 .point3 .point-header .inner .point-numb {
    background: url("../../assets/img/cpt2_numb_point3.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point3 .point-header .inner h3 {
    margin: 0 0 20px 8%;
    background: url("../../assets/img/cpt2_h3_point3.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point3 .point-header .inner h3::after {
    padding-top: 21.25%
  }
  #cpt2 .point4 {
    background: #cebff8;
    background: -webkit-linear-gradient(180deg, #cebff8 0%, #fff 100%);
    background: -moz-linear-gradient(180deg, #cebff8 0%, #fff 100%);
    background: linear-gradient(180deg, #cebff8 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cebff8", endColorstr="#FFFFFF", GradientType=0)
  }
  #cpt2 .point4 .point-header .inner .point-numb {
    background: url("../../assets/img/cpt2_numb_point4.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point4 .point-header .inner h3 {
    margin: 0 0 20px 8%;
    background: url("../../assets/img/cpt2_h3_point4.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point4 .point-header .inner h3::after {
    padding-top: 10.25%
  }
  #cpt2 .point5 {
    background: #a5d0fd;
    background: -webkit-linear-gradient(180deg, #a5d0fd 0%, #fff 100%);
    background: -moz-linear-gradient(180deg, #a5d0fd 0%, #fff 100%);
    background: linear-gradient(180deg, #a5d0fd 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a5d0fd", endColorstr="#FFFFFF", GradientType=0)
  }
  #cpt2 .point5::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 60px;
    width: 4px;
    height: 60px;
    background: #a5d0fd;
    background: -webkit-linear-gradient(180deg, rgba(165, 208, 253, 0) 0%, #a5d0fd 100%);
    background: -moz-linear-gradient(180deg, rgba(165, 208, 253, 0) 0%, #a5d0fd 100%);
    background: linear-gradient(180deg, rgba(165, 208, 253, 0) 0%, #a5d0fd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a5d0fd", endColorstr="#a5d0fd", GradientType=0)
  }
  #cpt2 .point5::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 60px;
    border-left: #a5d0fd solid 4px;
    border-bottom: #a5d0fd solid 4px;
    border-radius: 0 0 0 60px;
    z-index: 9
  }
  #cpt2 .point5 .point-header .inner .point-numb {
    background: url("../../assets/img/cpt2_numb_point5.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point5 .point-header .inner h3 {
    margin: 0 0 20px 8%;
    background: url("../../assets/img/cpt2_h3_point5.png") no-repeat;
    background-size: 100% auto
  }
  #cpt2 .point5 .point-header .inner h3::after {
    padding-top: 10.25%
  }
  .curricula-detail {
    margin: 0 auto
  }
  .curricula-detail .detail-figure {
    max-width: 320px;
    margin: 0 auto 20px
  }
  .curricula-detail .detail-figure > div {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center
  }
  .curricula-detail .detail-figure > div .ph {
    width: 80px;
    order: 1
  }
  .curricula-detail .detail-figure > div .header {
    width: calc(100% - 90px);
    margin-left: 5px;
    text-align: center;
    order: 2
  }
  .curricula-detail .detail-figure .majorclass .header {
    font-size: 17px
  }
  .curricula-detail .detail-figure .majorclass .header br {
    display: none
  }
  .curricula-detail .detail-figure .plus {
    position: relative;
    width: 90px;
    height: 50px
  }
  .curricula-detail .detail-figure .plus::before, .curricula-detail .detail-figure .plus:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #856ad1
  }
  .curricula-detail .detail-figure .plus::before {
    width: 6px;
    height: 33px
  }
  .curricula-detail .detail-figure .plus::after {
    width: 33px;
    height: 6px
  }
  .curricula-detail .detail-figure .w-majorclass .header {
    font-size: 13px
  }
  .curricula-detail .detail-figure .w-majorclass .header strong {
    display: block;
    width: 12em;
    margin: 0 auto;
    padding: 3px 0;
    font-size: 17px;
    line-height: 1.2;
    background: #ffff00
  }
  .curricula-detail .detail-figure .w-majorclass .header span {
    display: block;
    font-size: 10px
  }
  .curricula-detail .detail-txt {
    position: relative;
    max-width: 320px;
    margin: 0 auto;
    padding: 8px;
    background: #cebff8;
    border-radius: 12px
  }
  .curricula-detail .detail-txt::before {
    content: "";
    display: block;
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    margin: auto;
    width: 34px;
    height: 24px;
    background: #cebff8;
    clip-path: polygon(0 100%, 50% 0, 100% 100%)
  }
  .curricula-detail .detail-txt .frame {
    position: relative;
    padding: 1em 0 1em 1.5em;
    background: #fff;
    border-radius: 8px
  }
  .curricula-detail .detail-txt .frame::before {
    content: "";
    display: block;
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin: auto;
    width: 30px;
    height: 20px;
    background: #fff;
    clip-path: polygon(0 100%, 50% 0, 100% 100%)
  }
  .curricula-detail .detail-txt h5 {
    margin: 0 0 0.6em;
    font-size: 18px;
    line-height: 1.3
  }
  .curricula-detail .detail-txt ul {
    margin: 0;
    padding: 0
  }
  .curricula-detail .detail-txt ul li {
    position: relative;
    list-style: none;
    margin: 0 0 10px 0;
    padding: 0 0 0 28px;
    font-size: 16px;
    line-height: 1.3
  }
  .curricula-detail .detail-txt ul li::before, .curricula-detail .detail-txt ul li::after {
    content: "";
    display: block;
    position: absolute
  }
  .curricula-detail .detail-txt ul li::before {
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: #eee9fd
  }
  .curricula-detail .detail-txt ul li::after {
    top: 0;
    left: 8px;
    width: 10px;
    height: 16px;
    border-right: #856ad1 solid 4px;
    border-bottom: #856ad1 solid 4px;
    transform: rotate(40deg)
  }
  .career {
    position: relative;
    margin: 0 auto;
    padding: 54px 4% 0
  }
  .career::before {
    content: "";
    display: block;
    position: absolute;
    left: 60px;
    top: -4px;
    width: calc(50% - 60px);
    height: 60px;
    border-right: #a5d0fd solid 4px;
    border-top: #a5d0fd solid 4px;
    border-radius: 0 60px 0 0;
    z-index: 9
  }
  .career .frame-outside {
    margin: 0 auto;
    padding: 4px;
    border: #a5d0fd solid 4px;
    border-radius: 48px
  }
  .career .frame-inside {
    padding: 1em 0;
    border: #aee8e3 solid 6px;
    border-radius: 40px
  }
  .career h3 {
    margin: 0 0 1em 0;
    font-size: 20px;
    font-weight: normal;
    text-align: center
  }
  .career h4 {
    margin: 0 0 0.5em 0;
    padding: 0.4em 0.3em 0.3em;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.3;
    background: #aee8e3
  }
  .career ul {
    margin: 0;
    padding: 0
  }
  .career ul li {
    margin: 0 0 4px 1.5em;
    font-size: 15px;
    line-height: 1.4
  }
  .career .employer-list {
    width: calc(100% - 15px);
    margin: 0 auto
  }
  .career .employer-list .biz-type {
    margin: 0 0 20px 0
  }
  @media screen and (min-width: 768px) {
    #cpt2 {
      padding-bottom: 80px
    }
    #cpt2 .container > .header {
      width: 76%;
      margin-bottom: 30px
    }
    #cpt2 .container > .header h2 {
      width: 360px
    }
    #cpt2 .point .point-header::before {
      height: 52px;
      background-color: #fff;
      border-radius: 0 0 50px 0
    }
    #cpt2 .point .point-header .inner .point-numb {
      top: -36px;
      right: 50%;
      width: 220px
    }
    #cpt2 .point .point-header .inner h3 {
      position: absolute;
      top: 3px;
      left: calc(50% + 20px);
      width: 300px;
      margin-left: 0
    }
    #cpt2 .point .point-detail {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      width: 90%;
      margin: 0 auto;
      padding: 0 0 60px
    }
    #cpt2 .point .point-detail .ph-area {
      width: 50%
    }
    #cpt2 .point .point-detail .txt-area {
      width: calc(50% - 20px)
    }
    #cpt2 .point .curricula {
      width: 90%;
      margin-top: -40px;
      padding: 0 0 60px
    }
    #cpt2 .point .curricula h4 {
      margin-bottom: 1em;
      font-size: 20px;
      border-radius: 40px
    }
    #cpt2 .point2 .point-header .inner h3 {
      top: -20px
    }
    #cpt2 .point3 .point-header .inner h3 {
      top: -20px
    }
    .curricula-detail {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      width: 98%
    }
    .curricula-detail .detail-figure {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      width: 60%;
      max-width: none;
      margin: 0
    }
    .curricula-detail .detail-figure > div {
      display: block
    }
    .curricula-detail .detail-figure > div .ph {
      width: 100px;
      margin: 0 auto
    }
    .curricula-detail .detail-figure > div .header {
      width: 100%;
      height: 80px;
      margin: 0
    }
    .curricula-detail .detail-figure .majorclass {
      width: 140px
    }
    .curricula-detail .detail-figure .majorclass .header {
      padding-top: 0.8em;
      font-size: 16px;
      line-height: 1.4
    }
    .curricula-detail .detail-figure .majorclass .header br {
      display: block
    }
    .curricula-detail .detail-figure .plus {
      width: 40px;
      height: 40px;
      transform: translateX(50%)
    }
    .curricula-detail .detail-figure .w-majorclass {
      width: calc(100% - 180px)
    }
    .curricula-detail .detail-figure .w-majorclass .header {
      font-size: 13px
    }
    .curricula-detail .detail-figure .w-majorclass .header strong {
      font-size: 17px
    }
    .curricula-detail .detail-figure .w-majorclass .header span {
      font-size: 10px
    }
    .curricula-detail .detail-txt {
      width: 40%;
      margin: 0;
      padding: 4px
    }
    .curricula-detail .detail-txt::before {
      top: 0;
      left: -14px;
      right: auto;
      bottom: 0;
      width: 15px;
      height: 24px;
      clip-path: polygon(100% 0, 0 50%, 100% 100%)
    }
    .curricula-detail .detail-txt .frame {
      padding: 1em
    }
    .curricula-detail .detail-txt .frame::before {
      top: 0;
      left: -11px;
      right: auto;
      bottom: 0;
      width: 12px;
      height: 20px;
      clip-path: polygon(100% 0, 0 50%, 100% 100%)
    }
    .curricula-detail .detail-txt ul li {
      font-size: 15px;
      white-space: nowrap
    }
    .career {
      padding-left: 0;
      padding-right: 0
    }
    .career .frame-outside {
      width: 90%
    }
    .career ul {
      list-style: none
    }
    .career ul li {
      margin: 0 0 4px 0
    }
    .career .employer-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 90%
    }
    .career .employer-list .biz-type {
      width: 48%
    }
  }
  @media screen and (min-width: 1024px) {
    #cpt2 {
      position: relative
    }
    #cpt2::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 265px;
      width: 1px;
      height: 100%;
      background: #bfbfbf
    }
    #cpt2 .container {
      margin-left: 266px;
      width: calc(100% - 266px)
    }
    #cpt2 .container > .header {
      width: 90%;
      margin-bottom: 50px
    }
  }
  @media screen and (min-width: 1200px) {
    #cpt2 .container > .header {
      width: 80%;
      max-width: 940px;
      margin-bottom: 0
    }
    #cpt2 .container > .header h2 {
      width: 55%;
      max-width: 505px;
      margin: 0
    }
    #cpt2 .point .point-header::before {
      height: 102px;
      background-color: #fff;
      border-radius: 0 0 100px 0
    }
    #cpt2 .point .point-header .inner {
      width: 80%;
      padding-top: 125px
    }
    #cpt2 .point .point-header .inner .point-numb {
      top: 2px;
      width: 250px
    }
    #cpt2 .point .point-header .inner h3 {
      top: 40px;
      left: calc(50% + 35px);
      width: 400px;
      margin-left: 0
    }
    #cpt2 .point .point-detail {
      width: 80%
    }
    #cpt2 .point .point-detail figure img {
      border-radius: 90px 0 90px 0
    }
    #cpt2 .point .point-detail .ph-area {
      width: 50%
    }
    #cpt2 .point .point-detail .txt-area {
      width: calc(50% - 35px)
    }
    #cpt2 .point .curricula {
      width: 80%
    }
    #cpt2 .point2 .point-header .inner h3 {
      top: 8px
    }
    #cpt2 .point3 .point-header .inner h3 {
      top: 8px
    }
    #cpt2 .point5::before {
      left: 0;
      bottom: 100px
    }
    #cpt2 .point5::after {
      width: 100px;
      height: 100px;
      border-radius: 0 0 0 100px;
      z-index: 9
    }
    .curricula-detail .detail-figure {
      width: 480px
    }
    .curricula-detail .detail-figure > div {
      display: block
    }
    .curricula-detail .detail-figure > div .ph {
      width: 130px;
      margin: 0 auto
    }
    .curricula-detail .detail-figure .majorclass {
      width: 170px
    }
    .curricula-detail .detail-figure .majorclass .header {
      font-size: 18px
    }
    .curricula-detail .detail-figure .plus {
      width: 40px;
      height: 40px
    }
    .curricula-detail .detail-figure .w-majorclass {
      width: 270px
    }
    .curricula-detail .detail-figure .w-majorclass .header {
      font-size: 17px
    }
    .curricula-detail .detail-figure .w-majorclass .header strong {
      font-size: 20px
    }
    .curricula-detail .detail-figure .w-majorclass .header span {
      font-size: 11px
    }
    .curricula-detail .detail-txt {
      width: calc(100% - 480px);
      max-width: 480px;
      padding: 4px
    }
    .curricula-detail .detail-txt ul li {
      font-size: 18px;
      white-space: normal
    }
    .career {
      padding: 94px 0 0
    }
    .career::before {
      left: 100px;
      top: -4px;
      width: calc(50% - 100px);
      height: 100px;
      border-radius: 0 100px 0 0
    }
    .career .frame-outside {
      width: 80%;
      max-width: 980px;
      border-radius: 100px
    }
    .career .frame-inside {
      padding: 2em 0;
      border-radius: 93px
    }
    .career h3 {
      font-size: 30px
    }
    .career ul li {
      margin-bottom: 0.5em;
      font-size: 18px
    }
    .career .employer-list {
      max-width: 840px
    }
  }
  @media screen and (min-width: 1800px) {
    #cpt2 .container > .header {
      margin: 0 0 0 17%
    }
    #cpt2 .point .point-header {
      padding: 0
    }
    #cpt2 .point .point-header .inner {
      max-width: 1200px;
      margin: 0 0 0 15%
    }
    #cpt2 .point .point-detail {
      max-width: 1200px;
      margin: 0 0 0 15%
    }
    #cpt2 .point .point-detail figure img {
      border-radius: 110px 0 110px 0
    }
    #cpt2 .point .curricula {
      max-width: 1200px;
      margin-left: 15%
    }
    .curricula-detail .detail-figure {
      width: 520px
    }
    .curricula-detail .detail-figure .majorclass {
      width: 200px
    }
    .curricula-detail .detail-figure .plus {
      width: 40px
    }
    .curricula-detail .detail-figure .w-majorclass {
      width: 280px
    }
    .curricula-detail .detail-txt {
      width: 700px
    }
    .curricula-detail .detail-txt ul li {
      font-size: 20px;
      white-space: normal
    }
    .career .frame-outside {
      margin: 0 0 0 20%
    }
  }
  #cpt3 .container > .header {
    width: 84%;
    margin: 0 auto
  }
  #cpt3 .container > .header h2 {
    display: block;
    width: 98%;
    margin: 0;
    text-indent: 100%;
    white-space: nowrap;
    line-height: 1;
    background: url("../../assets/img/cpt3_h2.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden
  }
  #cpt3 .container > .header h2::after {
    content: "";
    display: block;
    padding-top: 22.796%
  }
  .course-list {
    position: relative;
    z-index: 2
  }
  .course-list .course {
    margin: 0 0 6px 0
  }
  .course-list .course .course-visual {
    position: relative;
    height: 160px;
    background: #ddd;
    overflow: hidden
  }
  .course-list .course .course-name {
    position: relative;
    padding: 1em 4% 1em 8%;
    background: #fff
  }
  .course-list .course .course-name h4 {
    margin: 0 0 0.3em 0;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.3
  }
  .course-list .course .course-name ul {
    margin: 0;
    padding: 0;
    list-style: none
  }
  .course-list .course .course-name ul li {
    position: relative;
    margin-bottom: 3px;
    padding: 0 0 0 1.2em;
    font-size: 14px;
    line-height: 1.4
  }
  .course-list .course .course-name ul li::before {
    content: "●";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0
  }
  .course-list .course.course1 .course-visual {
    background: url("../../assets/img/cpt3_course1.webp") no-repeat center left;
    background-size: 100% auto;
    border-radius: 0 45px 0 0
  }
  .course-list .course.course2 .course-visual {
    background:url("../../assets/img/cpt3_course2.webp") no-repeat top left;
    background-size: 100% auto
  }
  .course-list .course.course3 .course-visual {
    background: url("../../assets/img/cpt3_course3.webp") no-repeat top left;
    background-size: 100% auto
  }
  .course-list .course.course4 .course-visual {
    background: url("../../assets/img/cpt3_course4.webp") no-repeat top left;
    background-size: 100% auto;
  }
  .course-list .course.course5 .course-visual {
    background: url("../../assets/img/cpt3_course5.webp") no-repeat top left;
    background-size: 100% auto
  }
  .course-list .course.course5 .course-name {
    border-radius: 0 0 45px 0
  }
  .course-list .course.course6 .course-visual {
    background: url("../../assets/img/cpt3_course6.webp") no-repeat top right;
    background-size: 100% auto;
	border-radius:45px 0 0 0 
  }
  .course-list .course.course7 .course-visual {
    background: url("../../assets/img/cpt3_course7.webp") no-repeat top right;
    background-size: 100% auto
  }
  .course-list .course.course8 .course-visual {
    background: url("../../assets/img/cpt3_course8.webp") no-repeat top right;
    background-size: 100% auto
  }
  .course-list .course.course8 .course-name {
    border-radius: 0 0 0 45px
  }
  .fourth-year {
    position: relative;
    width: 96%;
    margin: 0 0 20px 0;
    padding-bottom: 20px;
    border-radius: 0 60px 60px 0;
    background: #ffafcc;
    background: -webkit-linear-gradient(190deg, #ffafcc 30%, #daaad7 90%);
    background: -moz-linear-gradient(190deg, #ffafcc 30%, #daaad7 90%);
    background: linear-gradient(190deg, #ffafcc 30%, #daaad7 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFAFCC", endColorstr="#DAAAD7", GradientType=0)
  }
  .fourth-year::before {
    content: "";
    position: absolute;
    top: -120px;
    left: 0;
    display: block;
    width: 120px;
    height: 120px;
    background-color: transparent;
    border-radius: 60px;
    box-shadow: -60px 60px 0 0 #ffafcc;
    z-index: -1
  }
  .fourth-year::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: 0;
    display: block;
    width: 120px;
    height: 120px;
    background-color: transparent;
    border-radius: 60px;
    box-shadow: -60px -60px 0 0 #daaad7;
    z-index: -1
  }
  .fourth-year .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../../assets/img/cpt3_fourth.png") no-repeat top right;
    background-size: 70% auto;
    overflow: hidden;
    z-index: 1
  }
  .fourth-year .course-list {
    padding: 0 20px 0 0
  }
  .fourth-year .course-list h4 {
    color: #df1e60
  }
  .third-year {
    position: relative;
    width: 96%;
    margin: 0 0 20px 4%;
    padding-bottom: 20px;
    border-radius: 60px 0 0 60px;
    background: #c9b7de;
    background: -webkit-linear-gradient(170deg, #c9b7df 30%, #a6cffb 90%);
    background: -moz-linear-gradient(170deg, #c9b7df 30%, #a6cffb 90%);
    background: linear-gradient(170deg, #c9b7df 30%, #a6cffb 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9b7de", endColorstr="#a6cffb", GradientType=0)
  }
  .third-year::before {
    content: "";
    position: absolute;
    top: -120px;
    right: 0;
    display: block;
    width: 120px;
    height: 120px;
    background-color: transparent;
    border-radius: 60px;
    box-shadow: 60px 60px 0 0 #c9b7df;
    z-index: -1
  }
  .third-year::after {
    content: "";
    position: absolute;
    bottom: -120px;
    right: 0;
    display: block;
    width: 120px;
    height: 120px;
    background-color: transparent;
    border-radius: 60px;
    box-shadow: 60px -60px 0 0 #a6cffb;
    z-index: -1
  }
  .third-year .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../../assets/img/cpt3_third.png") no-repeat top left;
    background-size: 80% auto;
    overflow: hidden;
    z-index: 1
  }
  .third-year .course-list {
    padding: 0 0 0 20px
  }
  .third-year .course-list h4 {
    color: #914897
  }
  .fourth-year, .third-year {
    padding-top: 15px
  }
  .fourth-year h3, .third-year h3 {
    position: relative;
    display: block;
    width: 270px;
    margin: 0 0 15px 8%;
    text-indent: 100%;
    white-space: nowrap;
    line-height: 0;
    overflow: hidden;
    background: url("../../assets/img/cpt3_h3_1.png") no-repeat;
    background-size: 100% auto;
    z-index: 2
  }
  .fourth-year h3::after, .third-year h3::after {
    content: "";
    display: block;
    padding-top: 23.119%
  }
  .third-year h3 {
    background: url("../../assets/img/cpt3_h3_2.png") no-repeat;
    background-size: 100% auto
  }
  @media screen and (min-width: 768px) {
    #cpt3 .container > .header {
      width: 76%;
      margin-bottom: 30px
    }
    #cpt3 .container > .header h2 {
      width: 432px
    }
    .course-list .course {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch
    }
    .course-list .course .course-visual {
      width: 300px;
      height: auto;
      min-height: 240px
    }
    .course-list .course .course-name {
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      width: calc(100% - 300px);
      padding: 1em 2em
    }
    .course-list .course .course-name h4 {
      width: 100%;
      font-size: 20px
    }
    .course-list .course .course-name ul {
      width: 100%
    }
    .course-list .course .course-name ul li {
      font-size: 14px;
      line-height: 1.4
    }
    .course-list .course.course1 {
      background: #fff url("../../assets/img/cpt3_course1_l.webp") no-repeat top left;
      background-size: auto 100%;
      border-radius: 0 45px 0 0;
      overflow: hidden
    }
    .course-list .course.course1 .course-visual {
      background: none;
      border-radius: 0
    }
    .course-list .course.course2 .course-visual {
      background: #fff url("../../assets/img/cpt3_course2_l.webp") no-repeat top left;
      background-size: auto 100%
    }
    .course-list .course.course3 .course-visual {
      background: #fff url("../../assets/img/cpt3_course3_l.webp") no-repeat top left;
      background-size: auto 100%
    }
    .course-list .course.course4 .course-visual {
      background: #fff url("../../assets/img/cpt3_course4_l.webp") no-repeat top left;
      background-size: auto 100%
    }
    .course-list .course.course5 .course-visual {
      background: #fff url("../../assets/img/cpt3_course5_l.webp") no-repeat top left;
      background-size: auto 100%
    }
    .course-list .course.course6 .course-visual {
      background: #fff url("../../assets/img/cpt3_course6_l.webp") no-repeat top left;
      background-size: auto 110%;
      border-radius: 45px 0 0 0
    }
    .course-list .course.course7 .course-visual {
      background: #fff url("../../assets/img/cpt3_course7_l.webp") no-repeat top left;
      background-size: auto 100%
    }
    .course-list .course.course8 .course-visual {
      background: #fff url("../../assets/img/cpt3_course8_l.webp") no-repeat top left;
      background-size: auto 100%;
      border-radius: 0 0 0 45px
    }
    .course-list .course.course8 .course-name {
      border-radius: 0
    }
    .fourth-year, .third-year {
      padding-top: 15px
    }
    .fourth-year h3, .third-year h3 {
      width: 320px;
      margin: 0 0 15px 8%
    }
    .fourth-year {
      margin-bottom: 40px
    }
    .third-year {
      margin-bottom: 60px
    }
  }
  @media screen and (min-width: 1024px) {
    #cpt3 .container > .header {
      width: 90%
    }
    #cpt3 {
      position: relative
    }
    #cpt3::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 265px;
      width: 1px;
      height: 100%;
      background: #bfbfbf
    }
    #cpt3 .container {
      margin-left: 266px;
      width: calc(100% - 266px);
      overflow: hidden
    }
    #cpt3 .container > .header {
      width: 90%;
      margin-bottom: 50px
    }
  }
  @media screen and (min-width: 1200px) {
    #cpt3 .container > .header {
      width: 80%;
      max-width: 940px;
      margin-bottom: 0
    }
    #cpt3 .container > .header h2 {
      width: 67%;
      max-width: 658px;
      margin: 0
    }
    .course-list .course .course-visual {
      width: 45%;
      min-height: 300px
    }
    .course-list .course .course-name {
      width: 55%
    }
    .course-list .course .course-name h4 {
      font-size: 24px
    }
    .course-list .course .course-name ul li {
      font-size: 18px
    }
    .course-list .course.course1 .course-visual {
      background-size: 680px auto
    }
    .course-list .course.course2 .course-visual {
      background-size: 680px auto
    }
    .course-list .course.course3 .course-visual {
     background-size: 680px auto
    }
    .course-list .course.course4 .course-visual {
      background-size: 680px auto
    }
    .course-list .course.course5 .course-visual {
      background-size: 680px auto;
	border-radius: 0 0 0 80px
    }
    .course-list .course.course6 .course-visual {
      background-size: 680px auto;
    }
    .course-list .course.course7 .course-visual {
      background-size: 680px auto
    }
    .course-list .course.course8 .course-visual {
      background-size: 490px auto;
      border-radius: 0 0 0 80px
    }
    .fourth-year {
      width: 94%;
      margin-bottom: 60px;
      padding-bottom: 30px;
      border-radius: 0 100px 100px 0
    }
    .fourth-year::before {
      top: -200px;
      width: 200px;
      height: 200px;
      border-radius: 100px;
      box-shadow: -100px 100px 0 0 #ffafcc
    }
    .fourth-year::after {
      bottom: -200px;
      width: 200px;
      height: 200px;
      border-radius: 100px;
      box-shadow: -100px -100px 0 0 #daaad7
    }
    .fourth-year .frame {
      background-size: 60% auto
    }
    .fourth-year .course-list {
      padding: 0 3% 0 0
    }
    .third-year {
      width: 94%;
      margin: 0 0 100px 6%;
      padding-bottom: 30px;
      border-radius: 100px 0 0 100px
    }
    .third-year::before {
      top: -200px;
      width: 200px;
      height: 200px;
      border-radius: 100px;
      box-shadow: 100px 100px 0 0 #c9b7df
    }
    .third-year::after {
      bottom: -200px;
      display: block;
      width: 200px;
      height: 200px;
      background-color: transparent;
      border-radius: 100px;
      box-shadow: 100px -100px 0 0 #a6cffb
    }
    .third-year .frame {
      background-size: 80% auto
    }
    .third-year .course-list {
      padding: 0 0 0 3%
    }
    .fourth-year, .third-year {
      padding-top: 30px
    }
    .fourth-year h3, .third-year h3 {
      width: 520px;
      margin: 0 0 15px 9%
    }
  }
  @media screen and (min-width: 1365px) {
    .course-list .course .course-visual {
      width: 460px
    }
    .course-list .course .course-name {
      width: calc(100% - 460px)
    }
  }
  @media screen and (min-width: 1800px) {
    #cpt3 .container > .header {
      margin: 0 0 0 17%
    }
    .fourth-year {
      width: 94%;
      border-radius: 0 60px 60px 0
    }
    .fourth-year::before {
      top: -120px;
      width: 120px;
      height: 120px;
      border-radius: 60px;
      box-shadow: -60px 60px 0 0 #ffafcc
    }
    .fourth-year::after {
      bottom: -120px;
      width: 120px;
      height: 120px;
      border-radius: 60px;
      box-shadow: -60px -60px 0 0 #daaad7
    }
    .fourth-year .course-list {
      padding: 0 6% 0 0
    }
    .third-year {
      width: 94%;
      margin: 0 0 0 6%;
      border-radius: 60px 0 0 60px
    }
    .third-year::before {
      top: -120px;
      width: 120px;
      height: 120px;
      border-radius: 60px;
      box-shadow: 60px 60px 0 0 #c9b7df
    }
    .third-year::after {
      bottom: -120px;
      display: block;
      background-color: transparent;
      border-radius: 60px;
      box-shadow: 60px -60px 0 0 #a6cffb
    }
    .third-year .course-list {
      padding: 0 0 0 6%
    }
  }
  #cpt4 .container {
    position: relative
  }
  #cpt4 .container > .header {
    position: absolute;
    width: 96%;
    margin: 0 auto;
    padding: 0 0 0 8%;
    z-index: 2
  }
  #cpt4 .container > .header::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    border-radius: 0 0 0 60px;
    background: #fff;
    z-index: -1
  }
  #cpt4 .container > .header::after {
    content: "";
    position: absolute;
    top: 59px;
    right: -1px;
    display: block;
    width: 61px;
    height: 61px;
    background: url("../../assets/img/rounded-corner.png") no-repeat;
    background-size: 100% auto;
    z-index: -1
  }
  #cpt4 .container > .header h2 {
    display: block;
    width: 100%;
    max-width: 295px;
    margin: 0 0 0 15px;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    line-height: 0;
    background: url("../../assets/img/cpt4_h2.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    transform: translateY(16px)
  }
  #cpt4 .container > .header h2::after {
    content: "";
    display: block;
    padding-top: 12.2557%
  }
  .artwork-slide {
    position: relative;
    width: 96%;
    height: 550px;
    z-index: 1;
    overflow: hidden
  }
  .artwork-slide::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 60px;
    background: #fff;
    border-radius: 60px 0 0 0;
    z-index: 2
  }
  .artwork-slide::after {
    content: "";
    position: absolute;
    bottom: 60px;
    right: -1px;
    display: block;
    width: 61px;
    height: 61px;
    background: url("../../assets/img/rounded-corner.png") no-repeat;
    transform: scale(1, -1);
    background-size: 100% auto;
    z-index: 1
  }
  .artwork-slide .slick-slide {
    position: relative;
    min-height: 550px
  }
  .artwork {
    position: relative;
    display: flex;
    align-content: center
  }
  .artwork .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 160% auto;
    opacity: 0.8;
    z-index: -1
  }
  .artwork img {
    width: 76.7%;
    max-width: 280px;
    margin: -50px auto 0
  }
  .artwork.angle-port img {
    width: 58.9%;
    max-width: 215px
  }
  @media screen and (min-width: 768px) {
    #cpt4 .container > .header h2 {
      max-width: 400px;
      transform: translateY(4px)
    }
    .artwork-slide {
      height: 800px
    }
    .artwork-slide .slick-slide {
      min-height: 800px
    }
    .artwork .bg::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 40%;
      height: 100%;
      background: #fff;
      background: -webkit-linear-gradient(90deg, #fff 10%, rgba(255, 255, 255, 0) 50%);
      background: -moz-linear-gradient(90deg, #fff 10%, rgba(255, 255, 255, 0) 50%);
      background: linear-gradient(90deg, #fff 10%, rgba(255, 255, 255, 0) 50%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=1);
      z-index: 1
    }
    .artwork img {
      width: 66%;
      max-width: 600px;
      margin: -100px auto 0
    }
    .artwork.angle-port img {
      width: 45%;
      max-width: 410px
    }
  }
  @media screen and (min-width: 1024px) {
    #cpt4 {
      position: relative
    }
    #cpt4 .container {
      margin-left: 265px;
      width: calc(100% - 265px)
    }
    #cpt4 .container > .header::before {
      border-left: #bfbfbf solid 1px
    }
    .artwork-slide::before {
      border-left: #bfbfbf solid 1px
    }
  }
  @media screen and (min-width: 1200px) {
    #cpt4 {
      position: relative
    }
    #cpt4 .container > .header {
      width: 94%
    }
    #cpt4 .container > .header::before {
      height: 100px;
      border-radius: 0 0 0 100px
    }
    #cpt4 .container > .header::after {
      top: 99px;
      width: 101px;
      height: 101px
    }
    #cpt4 .container > .header h2 {
      max-width: 563px;
      transform: translateY(20px)
    }
    .artwork-slide {
      width: 94%;
      height: 900px
    }
    .artwork-slide::before {
      bottom: -1px;
      width: 100%;
      height: 101px;
      border-radius: 100px 0 0 0;
      z-index: 2
    }
    .artwork-slide::after {
      content: "";
      position: absolute;
      bottom: 99px;
      width: 101px;
      height: 101px
    }
    .artwork-slide .slick-slide {
      min-height: 900px
    }
    .artwork {
      align-content: center
    }
    .artwork img {
      width: 55%;
      margin: 0 0 0 10%
    }
    .artwork.angle-port img {
      width: 37.5%;
      transform: translateX(20%)
    }
  }
  @media screen and (min-width: 1800px) {
    #cpt4 .container > .header {
      padding-left: 12%
    }
    .artwork img {
      margin: 0 0 0 15%
    }
  }
  #cpt5 .container {
    position: relative
  }
  #cpt5 .container > .header {
    position: absolute;
    width: 96%;
    margin: 0 0 0 4%;
    padding: 0 0 0 6%;
    z-index: 2
  }
  #cpt5 .container > .header::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    border-radius: 0 0 60px 0;
    background: #fff;
    z-index: -1
  }
  #cpt5 .container > .header::after {
    content: "";
    position: absolute;
    top: 59px;
    left: -1px;
    display: block;
    width: 61px;
    height: 61px;
    background: url("../../assets/img/rounded-corner.png") no-repeat;
    background-size: 100% auto;
    transform: scale(-1, 1);
    z-index: -1
  }
  #cpt5 .container > .header h2 {
    display: block;
    width: 100%;
    max-width: 295px;
    margin: 0 0 0 15px;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    line-height: 0;
    background: url("../../assets/img/cpt5_h2.png") no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    transform: translateY(16px)
  }
  #cpt5 .container > .header h2::after {
    content: "";
    display: block;
    padding-top: 12.2557%
  }
  .interview-slide {
    position: relative;
    width: 96%;
    margin: 0 0 0 4%;
    z-index: 1;
    overflow: hidden
  }
  .interview-slide::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 60px;
    background: #fff;
    border-radius: 0 60px 0 0;
    z-index: 2
  }
  .interview-slide::after {
    content: "";
    position: absolute;
    bottom: 60px;
    left: -1px;
    display: block;
    width: 61px;
    height: 61px;
    background: url("../../assets/img/rounded-corner.png") no-repeat;
    transform: scale(-1, -1);
    background-size: 100% auto;
    z-index: 1
  }
  .intv {
    position: relative;
    padding-bottom: 140px
  }
  .intv .intv-detail {
    padding: 80px 34px 0
  }
  .intv .intv-detail .header {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
  }
  .intv .intv-detail .header .student-ph {
    position: relative;
    width: 120px;
    overflow: hidden
  }
  .intv .intv-detail .header .student-ph::after {
    content: "";
    display: block;
    padding-top: 100%
  }
  .intv .intv-detail .header .student-ph img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
  }
  .intv .intv-detail .header .message {
    width: calc(100% - 120px);
    margin: 0 0 1em 0;
    font-size: 12px;
    line-height: 1.3;
    color: #fff
  }
  .intv .intv-detail .header .message strong {
    font-size: 18px;
    font-weight: normal
  }
  .intv .intv-detail .txt-area {
    padding: 1.5em 1.5em 1em;
    background: #fff;
    border-radius: 17px
  }
  .intv .intv-detail .txt-area .student-name {
    margin: 0 0 1em 0;
    font-size: 12px;
    line-height: 1.3
  }
  .intv .intv-detail .txt-area .student-name strong {
    font-size: 16px;
    font-weight: normal
  }
  .intv.intv01 {
    background: #ee679b
  }
  .intv.intv01 .intv-detail .header .student-ph {
    background: url("../../assets/img/cpt5_intv_01.webp") no-repeat;
    background-size: 100% auto
  }
  .intv.intv01 .intv-detail .txt-area > p strong {
    color: #ee679b
  }
  .intv.intv02 {
    background: #3a794e
  }
  .intv.intv02 .intv-detail .header .student-ph {
    background: url("../../assets/img/cpt5_intv_02.webp") no-repeat;
    background-size: 100% auto
  }
  .intv.intv02 .intv-detail .txt-area > p strong {
    color: #3a794e
  }
  .intv.intv03 {
    background: #9b5698
  }
  .intv.intv03 .intv-detail .header .student-ph {
    background: url("../../assets/img/cpt5_intv_03.webp") no-repeat;
    background-size: 100% auto
  }
  .intv.intv03 .intv-detail .txt-area > p strong {
    color: #9b5698
  }
  .intv.intv04 {
    background: #2b840c
  }
  .intv.intv04 .intv-detail .header .student-ph {
    background: url("../../assets/img/cpt5_intv_04.webp") no-repeat;
    background-size: 100% auto
  }
  .intv.intv04 .intv-detail .txt-area > p strong {
    color: #2b840c
  }
  .intv.intv05 {
    background: #bc4e3c
  }
  .intv.intv05 .intv-detail .header .student-ph {
    background: url("../../assets/img/cpt5_intv_05.webp") no-repeat;
    background-size: 100% auto
  }
  .intv.intv05 .intv-detail .txt-area > p strong {
    color: #bc4e3c
  }
  .intv.intv06 {
    background: #2727e5
  }
  .intv.intv06 .intv-detail .header .student-ph {
    background: url("../../assets/img/cpt5_intv_06.webp") no-repeat;
    background-size: 100% auto
  }
  .intv.intv06 .intv-detail .txt-area > p strong {
    color: #2727e5
  }
  @media screen and (min-width: 768px) {
    #cpt5 .container > .header h2 {
      max-width: 400px;
      transform: translateY(4px)
    }
    .intv .intv-detail {
      max-width: 468px;
      margin: 0 auto;
      padding: 100px 0 0
    }
    .intv .intv-detail .header .student-ph {
      width: 140px
    }
    .intv .intv-detail .header .student-ph img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%
    }
    .intv .intv-detail .header .message {
      width: calc(100% - 140px);
      font-size: 12px
    }
    .intv .intv-detail .header .message strong {
      font-size: 18px
    }
  }
  @media screen and (min-width: 1024px) {
    #cpt5 {
      position: relative
    }
    #cpt5::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 265px;
      width: 1px;
      height: 100%;
      background: #bfbfbf
    }
    #cpt5 .container {
      margin-left: 266px;
      width: calc(100% - 266px)
    }
  }
  @media screen and (min-width: 1200px) {
    #cpt5 {
      position: relative
    }
    #cpt5 .container > .header {
      width: 94%;
      margin-left: 6%
    }
    #cpt5 .container > .header::before {
      height: 100px;
      border-radius: 0 0 100px 0
    }
    #cpt5 .container > .header::after {
      top: 99px;
      width: 101px;
      height: 101px
    }
    #cpt5 .container > .header h2 {
      max-width: 563px;
      transform: translateY(20px)
    }
    .interview-slide {
      width: 94%;
      margin-left: 6%
    }
    .interview-slide::before {
      bottom: -1px;
      width: 100%;
      height: 101px;
      border-radius: 0 100px 0 0;
      z-index: 2
    }
    .interview-slide::after {
      content: "";
      position: absolute;
      bottom: 99px;
      width: 101px;
      height: 101px
    }
    .intv .intv-detail {
      max-width: 500px;
      margin: 0 0 0 8%;
      padding: 140px 0 40px
    }
    .intv .intv-detail .header .student-ph {
      width: 230px
    }
    .intv .intv-detail .header .message {
      width: calc(100% - 240px);
      font-size: 16px
    }
    .intv .intv-detail .header .message strong {
      font-size: 22px
    }
    .intv .intv-detail .txt-area {
      padding: 2em 2em 1.5em;
      border-radius: 40px
    }
    .intv .intv-detail .txt-area .student-name {
      font-size: 14px
    }
    .intv .intv-detail .txt-area .student-name strong {
      font-size: 20px;
      font-weight: normal
    }
  }
  @media screen and (min-width: 1800px) {
    #cpt5 .container > .header {
      padding-left: 12%
    }
    .intv .intv-detail {
      max-width: 560px;
      margin: 0 0 0 10%
    }
    .intv .intv-detail .header .student-ph {
      width: 320px
    }
    .intv .intv-detail .header .message {
      width: calc(100% - 320px);
      font-size: 18px
    }
    .intv .intv-detail .header .message strong {
      font-size: 26px
    }
  }
  #cpt6 {
    position: relative
  }
  #cpt6 .container {
    position: relative
  }
  #cpt6 .container::before {
    content: "";
    position: absolute;
    bottom: 59px;
    right: calc(4% - 1px);
    display: block;
    width: 61px;
    height: 61px;
    background: url("../../assets/img/rounded-corner.png") no-repeat;
    background-size: 100% auto;
    transform: scale(1, -1);
    z-index: 1
  }
  #cpt6 .container > .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 96%;
    margin: 0;
    padding-top: 8%;
    z-index: 2
  }
  #cpt6 .container > .header::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 61px;
    border-radius: 0 0 0 60px;
    background: #fff;
    z-index: -1
  }
  #cpt6 .container > .header::after {
    content: "";
    position: absolute;
    top: 59px;
    right: -1px;
    display: block;
    width: 61px;
    height: 61px;
    background: url("../../assets/img/rounded-corner.png") no-repeat;
    background-size: 100% auto;
    z-index: -1
  }
  #cpt6 .container > .header h2 {
    display: block;
    width: 84.2%;
    max-width: 315px;
    margin: 0 auto 6px;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    line-height: 0;
    overflow: hidden;
    background: url("../../assets/img/cpt6_h2.png") no-repeat;
    background-size: 100% auto
  }
  #cpt6 .container > .header h2::after {
    content: "";
    display: block;
    padding-top: 29.702%
  }
  #cpt6 .container > .header .lead {
    display: block;
    width: 78.666%;
    max-width: 295px;
    margin: 0 auto;
    padding: 0;
    text-indent: 100%;
    white-space: nowrap;
    line-height: 0;
    overflow: hidden;
    background: url("../../assets/img/cpt6_lead_sp.png") no-repeat;
    background-size: 100% auto
  }
  #cpt6 .container > .header .lead::after {
    content: "";
    display: block;
    padding-top: 21.052%
  }
  .oa-info {
    position: relative;
    width: 96%;
    margin: 0;
    padding: 53% 0 120px 0;
    background: #ffafcc;
    background: -webkit-linear-gradient(170deg, #ffafcc 10%, #e0abd5 90%);
    background: -moz-linear-gradient(170deg, #ffafcc 10%, #e0abd5 90%);
    background: linear-gradient(170deg, #ffafcc 10%, #e0abd5 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFAFCC", endColorstr="#E0ABD5", GradientType=0);
    border-radius: 0 0 60px 0
  }
  .oa-info::before, .oa-info::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    height: 61px;
    background: #fff;
    z-index: 2
  }
  .oa-info::before {
    left: -1px;
    width: calc(54% + 1px);
    border-radius: 0 60px 0 0
  }
  .oa-info::after {
    right: -1px;
    width: calc(46% + 1px);
    border-radius: 60px 0 0 0
  }
  .oa-info .ph-area {
    position: relative;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    z-index: 2
  }
  .oa-info .ph-area figure {
    position: relative;
    width: 50%;
    margin: 0;
    padding: 0;
    line-height: 0
  }
  .oa-info .ph-area figure figcaption {
    display: inline-block;
    position: absolute;
    bottom: 10px;
    left: 50%;
    line-height: 1;
    margin: auto;
    padding: 0.3em 0.5em;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    background: #fff;
    transform: translateX(-50%)
  }
  .oa-info .txt-area {
    position: relative;
    margin-bottom: 1em;
    z-index: 2
  }
  .oa-info .txt-area ul {
    margin: 0;
    padding: 0 8% 0 0;
    list-style: none
  }
  .oa-info .txt-area ul li {
    margin: 0 0 6px 0;
    padding: 0
  }
  .oa-info .txt-area ul li span {
    display: inline-block;
    padding: 0.4em 1.5em 0.4em 8%;
    line-height: 1.2;
    background: #fff;
    border-radius: 0 20px 20px 0
  }
  .oa-info .txt-area .oa-visual {
    position: relative;
    background: url("../../assets/img/cpt6_oa-info_sp.webp") no-repeat;
    background-size: 100% auto
  }
  .oa-info .txt-area .oa-visual::after {
    content: "";
    display: block;
    padding-top: 100%
  }
  .oa-info .link-area {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 8%;
    z-index: 2;
    line-height: 0
  }
  .oa-info .link-area a {
    display: block;
    transition: 0.3s
  }
  .oa-info .link-area a:hover {
    opacity: 0.8
  }
  @media screen and (min-width: 768px) {
    #cpt6 {
      position: relative
    }
    #cpt6 .container > .header {
      padding-top: 20px
    }
    #cpt6 .container > .header h2 {
      max-width: 420px;
      margin: 0 auto 6px
    }
    #cpt6 .container > .header .lead {
      max-width: 400px;
      background: url("../../assets/img/cpt6_lead.png") no-repeat;
      background-size: 100% auto
    }
    #cpt6 .container > .header .lead::after {
      padding-top: 7.844%
    }
    .oa-info {
      padding-top: 200px;
      overflow: hidden
    }
    .oa-info .ph-area figure {
      width: 25%
    }
    .oa-info .txt-area {
      display: flex;
      flex-wrap: nowrap;
      align-items: center
    }
    .oa-info .txt-area ul {
      width: 55%;
      margin-bottom: 1em;
      padding: 0
    }
    .oa-info .txt-area ul li span {
      padding-left: 4%
    }
    .oa-info .txt-area .oa-visual {
      width: 45%;
      background: url("../../assets/img/cpt6_oa-info.webp") no-repeat;
      background-size: 100% auto
    }
    .oa-info .txt-area .oa-visual::after {
      padding-top: 100%
    }
    .oa-info .link-area {
      max-width: 640px;
      padding: 0
    }
  }
  @media screen and (min-width: 1024px) {
    #cpt6 {
      padding-bottom: 146px
    }
    #cpt6 {
      position: relative
    }
    #cpt6 .container {
      margin-left: 265px;
      width: calc(100% - 265px);
      overflow: hidden
    }
    #cpt6 .container > .header::before {
      border-left: #bfbfbf solid 1px
    }
    .oa-info::before {
      top: 0;
      left: -1px;
      width: 40%;
      height: 100%;
      background: #fff;
      background: -webkit-linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
      background: -moz-linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=1);
      z-index: 1
    }
    .oa-info::after {
      right: -1px;
      width: calc(100% + 1px);
      border-radius: 60px 0 0 0;
      border-left: #bfbfbf solid 1px
    }
    .oa-info .txt-area ul li span {
      padding-left: 8%;
      background: rgba(255, 255, 255, 0.7)
    }
  }
  @media screen and (min-width: 1200px) {
    #cpt6 {
      position: relative
    }
    #cpt6 .container::before {
      bottom: 99px;
      right: calc(6% - 1px);
      width: 101px;
      height: 101px
    }
    #cpt6 .container > .header {
      width: 94%;
      padding-top: 45px
    }
    #cpt6 .container > .header::before {
      height: 101px;
      border-radius: 0 0 0 100px
    }
    #cpt6 .container > .header::after {
      top: 99px;
      width: 101px;
      height: 101px
    }
    #cpt6 .container > .header h2 {
      width: 56%;
      max-width: none;
      margin: 0 auto 6px
    }
    #cpt6 .container > .header .lead {
      width: 54.5%;
      max-width: none
    }
    .oa-info {
      width: 94%;
      padding: 28% 0 180px 0
    }
    .oa-info::after {
      right: -1px;
      height: 101px;
      border-radius: 100px 0 0 0
    }
    .oa-info .txt-area ul li {
      font-size: 18px
    }
  }
  @media screen and (min-width: 1365px) {
    #cpt6 .container > .header h2 {
      width: 615px;
      margin: 0 auto 10px
    }
    #cpt6 .container > .header .lead {
      width: 600px
    }
    .oa-info {
      padding: 320px 0 180px 0
    }
    .oa-info .txt-area ul {
      width: 50%
    }
    .oa-info .txt-area ul li span {
      padding: 0.8em 2em 0.8em 14%;
      border-radius: 0 30px 30px 0
    }
    .oa-info .txt-area .oa-visual {
      width: 50%;
      height: 500px;
      background-size: 500px auto
    }
    .oa-info .txt-area .oa-visual::after {
      display: none
    }
  }
  @media screen and (min-width: 1800px) {
    .oa-info .inner {
      max-width: 1480px;
      background: url("../../assets/img/cpt6_oa-info.webp") no-repeat top right;
      background-size: auto 100%
    }
    .oa-info .txt-area ul {
      width: 100%
    }
    .oa-info .txt-area ul li span {
      padding-left: 15%
    }
    .oa-info .txt-area .oa-visual {
      display: none
    }
    .oa-info .link-area {
      margin: 0 0 0 15%
    }
  }
  .tca-info {
    max-width: 1800px;
    margin: 0 auto;
    padding: 25px 0 60px
  }
  .footer-brand-area {
    margin: 0 auto 40px
  }
  .footer-brand-area .tca-logo {
    width: 160px;
    margin: 0 auto 30px
  }
  .footer-brand-area .school-name {
    width: 290px;
    margin: -10px auto 0
  }
  .address {
    margin: 0 auto 40px;
    padding: 0 0 75% 0;
    background: url("../../assets/img/map.png") no-repeat center bottom;
    background-size: 96% auto
  }
  .address .tel {
    width: 290px;
    margin: 0 auto 0.5em
  }
  .address address {
    margin: 0;
    font-size: 14px;
    font-style: normal;
    line-height: 1
  }
  .footer-bottom-area {
    padding: 0 0 20px 0;
    background: #fff
  }
  .footer-bottom-area .social-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    padding: 40px 0
  }
  .footer-bottom-area .social-list .sns {
    width: 50px;
    margin: 0 8px;
    padding: 0
  }
  .footer-bottom-area .social-list .sns a {
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: #ddd;
    border-radius: 25px
  }
  .footer-bottom-area .social-list .sns.x a {
    background: url(../../assets/img/sns-x.webp) no-repeat;
    background-size: 100% auto
  }
  .footer-bottom-area .social-list .sns.instagram a {
    background: url(../../assets/img/sns-insta.webp) no-repeat;
    background-size: 100% auto
  }
  .footer-bottom-area .social-list .sns.youtube a {
    background: url(../../assets/img/sns-youtube.webp) no-repeat;
    background-size: 100% auto
  }
  .footer-bottom-area .social-list .sns.line a {
    background: url(../../assets/img/sns-line.webp) no-repeat;
    background-size: 100% auto
  }
  .footer-bottom-area p.copy-right {
    margin: 0;
    font-size: 10px;
    line-height: 1
  }
  @media screen and (min-width: 576px) {
    .address {
      padding: 0 0 430px 0;
      background-size: 553px auto
    }
  }
  @media screen and (min-width: 768px) {
    .tca-info {
      min-height: 340px;
      padding: 0 20px 40px;
      text-align: left;
      background: #ff0 url("../../assets/img/map.png") no-repeat right center;
      background-size: 46% auto
    }
    .footer-brand-area {
      position: relative;
      margin: 0 0 30px;
      padding-top: 20px
    }
    .footer-brand-area .tca-logo {
      width: 140px;
      margin: 0 0 15px
    }
    .footer-brand-area .school-name {
      margin: 0
    }
    .address {
      margin: 0 auto 20px;
      padding: 0;
      background: none
    }
    .address .tel {
      margin: 0 0 0.5em
    }
  }
  @media screen and (min-width: 1024px) {
    .tca-info {
      padding-left: 40px;
      background-size: auto 100%
    }
    .footer-brand-area {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      width: 500px
    }
    .footer-brand-area .tca-logo {
      width: 170px;
      margin: 0
    }
    .footer-brand-area .school-name {
      width: 300px
    }
    .address .tel {
      width: 325px
    }
  }
  .slick-loading .slick-list {
    background: #fff "../../assets/img/ajax-loader.gif"center center no-repeat
  }
  @font-face {
    font-family: "slick";
    src: url("./fonts/slick.eot");
    src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
    font-weight: normal;
    font-style: normal
  }
  .slick-prev, .slick-next {
    position: absolute;
    display: block;
    height: 50px;
    width: 28px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: #fff;
    color: transparent;
    top: 50%;
    z-index: 10;
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    transform: translate(0, -100%);
    padding: 0;
    border: none !important;
    border-radius: 0;
    outline: none
  }
  .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.6);
    color: transparent
  }
  .slick-prev.slick-disabled::before, .slick-next.slick-disabled::before {
    opacity: .25
  }
  .slick-prev::before, .slick-next::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    margin: auto;
    aspect-ratio: cos(45deg);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #8b8b8b
  }
  .slick-prev {
    left: 0;
    border-radius: 0 25px 25px 0
  }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: 0
  }
  .slick-prev::before {
    transform: rotate(180deg)
  }
  .slick-next {
    right: 0;
    border-radius: 25px 0 0 25px
  }
  [dir="rtl"] .slick-next {
    left: 0;
    right: auto
  }
  .slick-dotted.slick-slider {
    margin-bottom: 0
  }
  .slick-dots {
    position: absolute;
    bottom: 90px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%
  }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 2px;
    padding: 0;
    cursor: pointer
  }
  .slick-dots li button {
    border: 0;
    background: transparent;
    display: block;
    height: 20px;
    width: 20px;
    outline: none;
    line-height: 0px;
    font-size: 0px;
    color: transparent;
    cursor: pointer
  }
  .slick-dots li button:hover, .slick-dots li button:focus {
    outline: none
  }
  .slick-dots li button:hover::before, .slick-dots li button:focus::before {
    opacity: 1
  }
  .slick-dots li button::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: auto;
    line-height: 12px;
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    border: #999 solid 1px;
    border-radius: 6px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
  }
  .slick-dots li.slick-active button:before {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 8px
  }
  @media screen and (min-width: 768px) {
    .slick-prev, .slick-next {
      height: 75px;
      width: 75px
    }
    ¥ .slick-prev::before, ¥ .slick-next::before {
      height: 13px
    }
    .slick-prev {
      left: -8px;
      border-radius: 0 38px 38px 0
    }
    .slick-next {
      right: -8px;
      border-radius: 38px 0 0 38px
    }
  }
  @media screen and (min-width: 1200px) {
    .slick-prev, .slick-next {
      top: 200px;
      transform: translate(0, 0)
    }
    .slick-prev {
      left: auto;
      right: calc(5% + 76px);
      border-radius: 38px 0 0 38px
    }
    .slick-next {
      right: 5%;
      border-radius: 0 38px 38px 0
    }
    .slick-dots {
      top: 300px;
      right: calc(6% - 10px);
      bottom: auto;
      text-align: right
    }
    #cpt5 .slick-prev {
      right: calc(11.5% + 76px)
    }
    #cpt5 .slick-next {
      right: 11.5%
    }
    #cpt5 .slick-dots {
      right: calc(12.5% - 10px)
    }
  }
  @media screen and (min-width: 1800px) {
    .slick-prev {
      right: calc(8% + 76px)
    }
    .slick-next {
      right: 8%
    }
    .slick-dots {
      right: calc(9% - 10px)
    }
    #cpt5 .slick-prev {
      right: calc(15% + 76px)
    }
    #cpt5 .slick-next {
      right: 15%
    }
    #cpt5 .slick-dots {
      right: calc(16% - 10px)
    }
  }
  .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important
  }
  .screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
  }
  #primary[tabindex="-1"]:focus {
    outline: 0
  }
  .alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em
  }
  .alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em
  }
  .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em
  }