@charset "UTF-8";
@media print, screen and (min-width: 768.1px) {
  .sp {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

:root {
  --font-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif;
  --font-jp: "FOT-Öþ×Ï¥´¥·¥Ã¥¯ Pro M", "FOT-Öþ×Ï¥´¥·¥Ã¥¯ Pro B", FOT-TsukuGo Pro, var(--font-default);
  --font-en: "din-2014", sans-serif;
  --black: #111111;
  --white: #f8f8f8;
  --gray: #a8a8a8;
  --red: #E7161A;
  --upwhite: #f9f9f9;
  --basewhite: #eaeaea;
  --concept-color: #CCF100;
  --main-color: var(--black);
  --nega-color: var(--white);
  --pale-color: var(--basewhite);
  --clear-color: rgba(249, 249, 249, 0.35);
  --vanish-color: rgba(249, 249, 249, 0.15);
  --text-color: var(--black);
  --bg-color: #ffffff;
}

body[data-page=top] {
  --main-color: var(--concept-color);
}

body[data-page=md] {
  --main-color: #E60025;
  --pale-color: rgba(230, 0, 37, 0.15);
  --bg-color: var(--upwhite);
}

body[data-page=ac] {
  --main-color: #397db1;
  --pale-color: rgba(57, 125, 177, 0.15);
}

body[data-page=gc] {
  --main-color: #6FBA2C;
  --pale-color: rgba(111, 186, 44, 0.15);
}

body[data-page=vv] {
  --main-color: #3C558A;
  --pale-color: rgba(60, 85, 138, 0.1);
  --bg-color: var(--upwhite);
}

body[data-page=gd] {
  --main-color: #6E6E6E;
  --pale-color: rgba(110, 110, 110, 0.15);
}

body[data-page=ia] {
  --main-color: #40A08B;
  --pale-color: rgba(64, 160, 139, 0.15);
}

body[data-page=fc] {
  --main-color: #FDCD00;
  --pale-color: rgba(228, 184, 44, 0.15);
  --text-color: var(--white);
  --nega-color: #111111;
  --bg-color: var(--black);
}

body[data-page=ai] {
  --main-color: #ED7100;
  --pale-color: rgba(237, 114, 0, 0.15);
}

@media print, screen and (min-width: 768.1px) {
  #kv h1 {
    padding-left: 238px;
  }
}
@media print, screen and (min-width: 768.1px) {
  #intro ul {
    margin-top: 110px;
  }
}
#catch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media print, screen and (min-width: 768.1px) {
  #catch {
    gap: 10px;
    padding: 58px 0 68px;
  }
}
@media screen and (max-width: 768px) {
  #catch {
    gap: 2.6666666667vw;
    padding: 8vw 0 13.3333333333vw;
  }
}
#catch p {
  leading-trim: both;
  text-edge: cap;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-style: normal;
  font-weight: 800;
  line-height: 145%;
}
#catch p .new {
  margin-right: 0.75em;
  color: var(--red);
}
@media screen and (max-width: 768px) {
  #catch p .new {
    display: block;
    text-align: center;
  }
}
#catch p:nth-child(1) {
  color: var(--main-color);
  font-family: var(--font-en);
  letter-spacing: 0.025em;
}
@media print, screen and (min-width: 768.1px) {
  #catch p:nth-child(1) {
    margin-bottom: 4px;
    font-size: 29px;
  }
}
@media screen and (max-width: 768px) {
  #catch p:nth-child(1) {
    font-size: 4.8vw;
  }
}
#catch p:nth-child(2) {
  letter-spacing: 0.1em;
}
@media print, screen and (min-width: 768.1px) {
  #catch p:nth-child(2) {
    font-size: 48px;
  }
}
@media screen and (max-width: 768px) {
  #catch p:nth-child(2) {
    font-size: 6.9333333333vw;
  }
}
#catch p:nth-child(3) {
  padding: 0.14em 0;
  border-top: solid var(--black);
  border-bottom: solid var(--black);
  letter-spacing: 0.1em;
}
@media print, screen and (min-width: 768.1px) {
  #catch p:nth-child(3) {
    border-width: 4px;
    font-size: 68px;
  }
}
@media screen and (max-width: 768px) {
  #catch p:nth-child(3) {
    font-size: 7.7333333333vw;
  }
}
#catch video {
  margin-top: 3.5em;
}
@media print, screen and (min-width: 768.1px) {
  #catch video {
    width: calc(100% - 120px);
    max-width: 1200px;
  }
}
@media screen and (max-width: 768px) {
  #catch video {
    width: 86%;
  }
}

#field {
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  #field {
    padding: 8vw 0 16vw;
  }
}
#field .section-title .back {
  color: var(--upwhite);
}
#field::before, #field::after {
  content: "";
  width: 100vw;
  height: 100%;
  background-color: var(--pale-color);
  z-index: -1;
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
@media print, screen and (min-width: 768.1px) {
  #field::after {
    background-color: var(--main-color);
    height: 713px;
  }
}
@media print, screen and (min-width: 768.1px) {
  #field {
    padding-top: 88px;
    padding-bottom: 117px;
  }
}
@media print, screen and (min-width: 768.1px) {
  #field .field01 {
    margin-bottom: 100px;
  }
}
#field .field01 .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media print, screen and (min-width: 768.1px) {
  #field .field01 .content figure {
    margin-top: auto;
  }
}
@media screen and (max-width: 768px) {
  #field .field01 .content figure {
    margin-top: 5.3333333333vw;
  }
}
#field .field01 .content figure figcaption {
  position: absolute;
  margin-top: 0.5em;
}
@media print, screen and (min-width: 768.1px) {
  #field .field01 .content figure figcaption {
    margin-left: 150px;
  }
}
@media screen and (max-width: 768px) {
  #field .field01 .content figure figcaption {
    margin-left: 5.3333333333vw;
  }
}
#field .field01 .image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media print, screen and (min-width: 768.1px) {
  #field .field01 .image {
    max-width: 610px;
    gap: 45px 20px;
  }
}
@media screen and (max-width: 768px) {
  #field .field01 .image {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    row-gap: 2.6666666667vw;
  }
  #field .field01 .image figure:nth-child(n+2) {
    width: calc((100% - 2.6666666667vw) / 2);
  }
}
#field .field01 .image figure {
  position: relative;
}
#field .field01 .image figure figcaption {
  position: absolute;
  margin-top: 0.5em;
  text-align: right;
  width: 100%;
}
#field .field02 figure,
#field .field03 figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  position: relative;
}
@media print, screen and (min-width: 768.1px) {
  #field .field02 figure,
  #field .field03 figure {
    margin-top: 46px;
  }
}
#field .field02 figure figcaption,
#field .field03 figure figcaption {
  position: absolute;
}
@media print, screen and (min-width: 768.1px) {
  #field .field02 figure figcaption,
  #field .field03 figure figcaption {
    color: var(--white);
  }
}
@media screen and (max-width: 768px) {
  #field .field02 figure figcaption,
  #field .field03 figure figcaption {
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  #field .field02 {
    margin-top: 17.3333333333vw;
  }
}
@media screen and (max-width: 768px) {
  #field .field02 figure {
    margin-top: 5.3333333333vw;
  }
}
@media screen and (max-width: 768px) {
  #field .field02 figure img:nth-child(2) {
    width: 53.3333333333vw;
    height: auto;
  }
}
#field .field02 figure figcaption {
  bottom: 0;
}
@media print, screen and (min-width: 768.1px) {
  #field .field02 figure figcaption {
    left: 292px;
    bottom: 33%;
  }
}
@media screen and (max-width: 768px) {
  #field .field02 figure figcaption {
    left: 56vw;
  }
}
#field .field03 figure {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  #field .field03 figure {
    margin-top: 5.3333333333vw;
  }
}
#field .field03 figure figcaption {
  top: 101.5%;
}
#field .field03 figure .is-jumpout {
  position: absolute;
  left: -18%;
  bottom: -6.2%;
}

#feature {
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 768.1px) {
  #feature {
    padding-top: 90px;
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 768px) {
  #feature {
    padding-top: 12vw;
    padding-bottom: 16vw;
  }
}
#feature::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background-color: var(--upwhite);
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}
#feature .section-title .back {
  color: var(--basewhite);
}
#feature .year1-2 .head,
#feature .year3-4 .head {
  background-color: var(--pale-color);
}
@media print, screen and (min-width: 768.1px) {
  #feature .year1-2 .head,
  #feature .year3-4 .head {
    margin-top: 105px;
    height: 50px;
  }
}
@media screen and (max-width: 768px) {
  #feature .year1-2 .head,
  #feature .year3-4 .head {
    height: 6.6666666667vw;
  }
}
#feature .year1-2 .head h3,
#feature .year3-4 .head h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.7em;
  color: var(--main-color);
  -webkit-transform: translateY(-51%);
          transform: translateY(-51%);
}
#feature .year1-2 .head h3 b,
#feature .year3-4 .head h3 b {
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1;
}
@media print, screen and (min-width: 768.1px) {
  #feature .year1-2 .head h3 b,
  #feature .year3-4 .head h3 b {
    font-size: 120px;
  }
}
@media screen and (max-width: 768px) {
  #feature .year1-2 .head h3 b,
  #feature .year3-4 .head h3 b {
    font-size: 16vw;
  }
}
#feature .year1-2 .head h3 small,
#feature .year3-4 .head h3 small {
  display: inline-block;
  font-family: var(--font-jp);
  font-weight: 700;
  -webkit-transform: translate(0, 0.6em);
          transform: translate(0, 0.6em);
}
@media print, screen and (min-width: 768.1px) {
  #feature .year1-2 .head h3 small,
  #feature .year3-4 .head h3 small {
    font-size: 42px;
  }
}
@media screen and (max-width: 768px) {
  #feature .year1-2 .head h3 small,
  #feature .year3-4 .head h3 small {
    font-size: 5.6vw;
  }
}
#feature .flex-box-center {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media print, screen and (min-width: 768.1px) {
  #feature .flex-box-center {
    margin-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  #feature .flex-box-center {
    margin-top: 6.6666666667vw;
  }
}
@media print, screen and (min-width: 768.1px) {
  #feature .flex-box-center + .flex-box-center {
    margin-top: 70px;
  }
}
@media screen and (max-width: 768px) {
  #feature .flex-box-center + .flex-box-center {
    margin-top: 13.3333333333vw;
  }
}
#feature .content dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media print, screen and (min-width: 768.1px) {
  #feature .content dl {
    margin-top: 40px;
    gap: 24px;
  }
}
@media screen and (max-width: 768px) {
  #feature .content dl {
    margin-top: 5.3333333333vw;
    gap: 3.2vw;
  }
}
#feature .content dl dd {
  line-height: 150%;
}
@media print, screen and (min-width: 768.1px) {
  #feature .year3-4 .head {
    margin-top: 132px;
  }
}
@media screen and (max-width: 768px) {
  #feature .year3-4 .head {
    margin-top: 20vw;
  }
}
@media print, screen and (min-width: 768.1px) {
  #feature .message {
    margin-top: 70px;
  }
}
@media screen and (max-width: 768px) {
  #feature .message {
    margin-top: 13.3333333333vw;
  }
}
#feature .message .message-box-c .head {
  position: relative;
}
@media print, screen and (min-width: 768.1px) {
  #feature .message .message-box-c .head {
    padding: 18px 120px 20px 66px;
  }
}
#feature .message .message-box-c .body figure {
  margin-top: 2.1em;
}
#feature .message .message-box-c .body figure figcaption {
  margin-top: 1em;
}

#topics {
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 768.1px) {
  #topics {
    padding-top: 90px;
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 768px) {
  #topics {
    padding-top: 12vw;
    padding-bottom: 16vw;
  }
}
#topics::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background-color: var(--basewhite);
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}
#topics .section-title .back {
  color: var(--upwhite);
}
@media print, screen and (min-width: 768.1px) {
  #topics .line-catch-L {
    margin-top: 66px;
    margin-bottom: 43px;
  }
}
@media screen and (max-width: 768px) {
  #topics .line-catch-L {
    margin-top: 11.2vw;
    margin-bottom: 7.2vw;
  }
  #topics .line-catch-L span {
    font-size: 6.4vw;
    line-height: 11.2vw;
  }
}
#topics .studio01,
#topics .studio02,
#topics .studio03 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
  background-color: var(--main-color);
  color: var(--white);
}
@media print, screen and (min-width: 768.1px) {
  #topics .studio01,
  #topics .studio02,
  #topics .studio03 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
#topics .studio01 .content,
#topics .studio02 .content,
#topics .studio03 .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media print, screen and (min-width: 768.1px) {
  #topics .studio01 .content,
  #topics .studio02 .content,
  #topics .studio03 .content {
    gap: 1em;
    padding: 10px 40px;
    width: 260px;
  }
}
@media screen and (max-width: 768px) {
  #topics .studio01 .content,
  #topics .studio02 .content,
  #topics .studio03 .content {
    gap: 0.5em;
    padding: 0 4vw;
    width: 50%;
  }
}
#topics .studio01 .content .combine-number-S,
#topics .studio02 .content .combine-number-S,
#topics .studio03 .content .combine-number-S {
  color: var(--white);
}
@media print, screen and (min-width: 768.1px) {
  #topics .studio01 .content .combine-number-S,
  #topics .studio02 .content .combine-number-S,
  #topics .studio03 .content .combine-number-S {
    margin-bottom: 1em;
  }
}
@media screen and (max-width: 768px) {
  #topics .studio01 .content .combine-number-S,
  #topics .studio02 .content .combine-number-S,
  #topics .studio03 .content .combine-number-S {
    margin-bottom: 0.2em;
  }
}
#topics .studio01 .content h4,
#topics .studio02 .content h4,
#topics .studio03 .content h4 {
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-en);
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}
@media print, screen and (min-width: 768.1px) {
  #topics .studio01 .content h4,
  #topics .studio02 .content h4,
  #topics .studio03 .content h4 {
    font-size: 32px;
  }
}
@media screen and (max-width: 768px) {
  #topics .studio01 .content p,
  #topics .studio02 .content p,
  #topics .studio03 .content p {
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
    font-size: 3.2vw;
    letter-spacing: 0.05em;
  }
}
#topics .studio01 .use-image,
#topics .studio02 .use-image,
#topics .studio03 .use-image {
  margin-right: 20px;
}
#topics .equipment {
  margin-top: 4em;
}
#topics .equipment .items {
  margin-top: 1em;
}
@media screen and (max-width: 768px) {
  #topics .equipment .items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 5.3333333333vw;
  }
}
@media print, screen and (min-width: 768.1px) {
  #topics .equipment .items .item {
    max-width: 270px;
  }
}
@media screen and (max-width: 768px) {
  #topics .equipment .items .item {
    width: calc((100% - 5.3333333333vw) / 2);
  }
}
#topics .equipment .items .item picture {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  overflow: visible;
  position: relative;
}
@media print, screen and (min-width: 768.1px) {
  #topics .equipment .items .item picture {
    height: 240px;
  }
}
@media screen and (max-width: 768px) {
  #topics .equipment .items .item picture {
    height: 34.6666666667vw;
  }
}
#topics .equipment .items .item picture img {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #topics .equipment .items .item picture img {
    max-height: 34.6666666667vw;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
#topics .equipment .items .item .headline-S {
  margin-top: 1em;
}
#topics .teacher-message {
  margin-top: 4em;
}

#works {
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 768.1px) {
  #works {
    padding-top: 90px;
    padding-bottom: 120px;
  }
}
@media screen and (max-width: 768px) {
  #works {
    padding-top: 12vw;
    padding-bottom: 16vw;
  }
}
#works::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}
#works .section-title .back {
  color: var(--upwhite);
}
@media print, screen and (min-width: 768.1px) {
  #works .student01 {
    margin-top: 63px;
  }
}
#works .lead {
  position: relative;
}
@media print, screen and (min-width: 768.1px) {
  #works .lead {
    padding-left: calc(50% + 30px);
  }
}
#works .lead .line-catch-L {
  letter-spacing: 0.15em;
}
#works .lead .line-catch-L + p {
  margin-top: 2.4em;
}
@media print, screen and (min-width: 768.1px) {
  #works .lead .film-image {
    margin-top: 2em;
    margin-left: -70px;
    height: 200px;
  }
}
@media screen and (max-width: 768px) {
  #works .lead .film-image {
    margin-top: 1em;
    margin-left: -5.3333333333vw;
    margin-right: -5.3333333333vw;
    height: 26.6666666667vw;
  }
}
#works .lead .film-image img {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #works .lead .film-image img {
    max-width: 100vw;
    height: 26.6666666667vw;
  }
}
#works .contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}
@media print, screen and (min-width: 768.1px) {
  #works .contents {
    gap: 90px;
    margin-top: 1em;
    padding-top: 60px;
    padding-bottom: 56px;
  }
  #works .contents > div:nth-child(2) {
    margin-top: 24px;
  }
}
@media screen and (max-width: 768px) {
  #works .contents {
    gap: 12vw;
  }
}
#works .contents::before {
  content: "";
  height: 100%;
  background-color: var(--pale-color);
  position: absolute;
  top: 0;
}
@media print, screen and (min-width: 768.1px) {
  #works .contents::before {
    width: calc(100% + 120px);
    left: -60px;
  }
}
@media screen and (max-width: 768px) {
  #works .contents::before {
    width: 100vw;
    left: -5.3333333333vw;
  }
}
@media print, screen and (min-width: 768.1px) {
  #works .contents > div {
    gap: 60px;
  }
}
#works .contents > div > div {
  position: relative;
}
#works .contents .cover {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  background-color: var(--main-color);
  color: var(--white);
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .cover {
    width: calc(100% + 150px);
    height: 1116px;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 12px;
    padding-bottom: 70px;
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(62px);
            transform: translateY(62px);
  }
}
@media screen and (max-width: 768px) {
  #works .contents .cover {
    margin-right: -5.3333333333vw;
  }
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .cover picture {
    position: absolute;
    right: 0;
    bottom: 216px;
  }
}
#works .contents .cover picture img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
#works .contents .cover .combine-number-L {
  color: var(--white);
  position: absolute;
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .cover .combine-number-L {
    top: 0;
    right: 10px;
  }
}
#works .contents .cover h3 {
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-en);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.252em;
  white-space: nowrap;
  position: relative;
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .cover h3 {
    font-size: 60px;
    line-height: 70px;
  }
}
@media screen and (max-width: 768px) {
  #works .contents .cover h3 {
    font-size: 8vw;
    line-height: 9.3333333333vw;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
#works .contents .cover .name {
  leading-trim: both;
  text-edge: cap;
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .cover .name {
    font-size: 32px;
  }
}
@media screen and (max-width: 768px) {
  #works .contents .cover .name {
    font-size: 4.2666666667vw;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
#works .contents .cover .name small {
  display: block;
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font-en);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.28px;
}
#works .contents .size-ML {
  position: relative;
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .size-ML .film-image {
    width: 100vw;
    height: 200px;
    position: absolute;
    right: 30px;
    bottom: -200px;
  }
}
@media screen and (max-width: 768px) {
  #works .contents .size-ML .film-image {
    margin-left: -16vw;
    height: 24vw;
  }
}
#works .contents .size-ML .film-image img {
  -o-object-fit: contain;
     object-fit: contain;
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .size-ML .film-image img {
    width: 100%;
    height: 200px;
    -o-object-position: right;
       object-position: right;
  }
}
@media screen and (max-width: 768px) {
  #works .contents .size-ML .film-image img {
    max-width: 150vw;
    height: 26.6666666667vw;
  }
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .work {
    -webkit-transform: translateY(-52px);
            transform: translateY(-52px);
  }
}
#works .contents .work figure {
  position: relative;
}
#works .contents .work figure figcaption {
  margin-top: 1em;
  padding-right: 1em;
  width: 100%;
  text-align: right;
  position: absolute;
}
#works .contents .work dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.25em;
  line-height: 150%;
  background-color: var(--pale-color);
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .work dl {
    padding: 30px 40px 20px;
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  #works .contents .work dl {
    padding: 5.3333333333vw;
  }
}
#works .contents .work dl dt {
  font-weight: 600;
}
#works .contents .column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1em;
  line-height: 150%;
  background-color: var(--upwhite);
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .column {
    margin-top: 8px;
    padding: 28px 40px;
  }
}
@media screen and (max-width: 768px) {
  #works .contents .column {
    margin-top: 8vw;
    padding: 5.3333333333vw;
  }
}
#works .contents .column dt {
  color: var(--main-color);
  font-weight: 700;
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .column dt {
    font-size: 20px;
  }
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .column dd {
    font-size: 14px;
  }
}
#works .contents .film-image {
  margin-top: 30px;
  height: 150px;
}
#works .contents .film-image img {
  position: absolute;
  -webkit-transform: rotate(2deg);
          transform: rotate(2deg);
}
#works .contents .festival .subtitle {
  margin-bottom: 1.9em;
}
#works .contents .festival .flex-box-top {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media print, screen and (min-width: 768.1px) {
  #works .contents .festival .flex-box-top {
    gap: 60px;
  }
}
#works .contents .festival .headline-S + p {
  margin-top: 1em;
}
#works .contents .festival .image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
#works .contents .festival .image img {
  width: calc((100% - 10px) / 2);
}

#achievements {
  position: relative;
  z-index: 1;
}
@media print, screen and (min-width: 768.1px) {
  #achievements {
    padding-top: 90px;
  }
}
@media screen and (max-width: 768px) {
  #achievements {
    padding-top: 12vw;
    padding-bottom: 16vw;
  }
}
#achievements::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100%;
  background-color: var(--upwhite);
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}
#achievements .section-title .back {
  color: var(--basewhite);
}
@media print, screen and (min-width: 768.1px) {
  #achievements .pickup {
    margin-top: 60px;
    gap: 90px;
  }
}
@media screen and (max-width: 768px) {
  #achievements .pickup {
    margin-top: 8vw;
    gap: 12vw;
  }
}
@media print, screen and (min-width: 768.1px) {
  #achievements .pickup + .pickup {
    margin-top: 66px;
  }
}
@media screen and (max-width: 768px) {
  #achievements .pickup + .pickup {
    margin-top: 16vw;
  }
}
#achievements .pickup .image {
  width: 100%;
}
@media print, screen and (min-width: 768.1px) {
  #achievements .pickup .image {
    max-width: 590px;
  }
}
#achievements .pickup .image figure:nth-child(1) {
  width: 100%;
  text-align: center;
  position: relative;
}
#achievements .pickup .image figure:nth-child(1) figcaption {
  position: absolute;
  top: 80%;
  text-align: left;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}
@media print, screen and (min-width: 768.1px) {
  #achievements .pickup .image figure:nth-child(1) figcaption {
    left: 20px;
  }
}
@media screen and (max-width: 768px) {
  #achievements .pickup .image figure:nth-child(1) figcaption {
    left: 4%;
  }
}
#achievements .pickup .image figure:nth-child(2) {
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
#achievements .pickup .image figure:nth-child(2) img {
  width: calc((100% - 10px) / 2);
}
#achievements .pickup .color-box {
  margin-top: 1.2em;
}
@media print, screen and (min-width: 768.1px) {
  #achievements .pickup .message-box-a {
    margin-top: 40px;
  }
}
@media screen and (max-width: 768px) {
  #achievements .pickup .message-box-a {
    margin-top: 6.6666666667vw;
  }
}
#achievements .pickup .message-box-a picture {
  top: -2px;
}
@media print, screen and (min-width: 768.1px) {
  #achievements .pickup .message-box-a .body {
    margin-top: 4px;
  }
}
#achievements .teacher-message {
  margin-top: 4em;
}
#achievements > .annotation:last-child {
  margin-top: 4.4em;
}
@media print, screen and (min-width: 768.1px) {
  #achievements > .annotation:last-child {
    text-align: right;
  }
}
@media screen and (max-width: 768px) {
  #achievements > .annotation:last-child {
    text-align: left;
  }
}