@media (max-width: 1200px) {
  html {
    font-size: 52.5%;
  }
  /*** 共通 ***/
  .tb-only {
    display: block;
  }
  /*** 一般的なWebデザインスクールと何が違うの？ ***/
  .differene-text__list--this {
    padding-bottom: 6rem;
  }
  /*** FLOW ***/
  .flow__title {
    font-size: 13rem;
  }
}

@media (max-width: 950px) {
  html {
    font-size: 47.5%;
  }

  /*** COMMIT ***/
  .commit__inner {
    min-width: auto;
    padding: 8rem 8rem 8rem 3rem;
  }
}

@media (max-width: 768px) {
  /*** 共通 ***/
  html {
    font-size: 62.5%;
  }
  .pc-only {
    display: none;
  }
  .tb-only {
    display: none;
  }
  .sp-only {
    display: block;
  }

  /*** 共通：ボタン ***/
  .common-button__background {
    max-width: 45rem;
  }
  .common-button {
    padding: 1.4rem 1.3rem 2.7rem;
    width: 100%;
  }
  .common-button::before {
    bottom: 0.8rem;
    right: 0.8rem;
    width: 3.5rem;
    /* bottom: 1.732rem;
    right: 1.3rem; */
  }
  .common-button::after {
    bottom: 1.8rem;
    right: 1.7rem;
    width: 1.8rem;
    /* bottom: 2.7rem;
    right: 2.4rem; */
  }
  .common-button__session {
    font-size: 2.5rem;
    line-height: 3.2rem;
    padding: 1rem 0;
  }
  .common-button__text {
    flex-direction: column;
    /* line-height: 1.8rem;*/
    line-height: 1rem;
    padding-top: 2rem;
  }
  .common-button__easy {
    font-size: 2.5rem;
    /* line-height: 3.3rem; */
    line-height: 2rem;
  }
  .common-button__brackets {
    margin-left: 0;
  }
  .common-button__brackets::before {
    font-size: 2.5rem;
    left: -2.9rem;
    top: -0.4rem;
  }
  .common-button__brackets::after {
    bottom: 0.4rem;
    font-size: 2.5rem;
    right: -2.9rem;
    /* bottom: -0.4rem; */
  }
  .common-button__line {
    /*font-size: 3.5rem;*/
    font-size: 2.8rem;
    /* line-height: 1.5; */
    line-height: 1.2;
  }
  .common-button__image {
    margin-left: 1rem;
    width: 3rem;
  }
  .common-button__regist {
    font-size: 3rem;
    margin-left: 1rem;
  }
  .common-button__hither {
    font-size: 2.5rem;
    margin-left: 0;
    /* line-height: 3.3rem; */
    line-height: 2rem;
  }

  /*** ヘッダー ***/
  .header__menu {
    height: 6.6rem;
    padding-inline: 2.4rem;
    position: fixed;
  }
  .header__inner {
    margin-top: 1.3rem;
  }
  .header__company {
    align-items: flex-start;
    flex-direction: column;
  }
  .header__logo {
    width: 15rem;
  }
  .header__name {
    font-size: 1rem;
    margin-left: 0;
    margin-top: 0.5rem;
  }
  .header-line__text--small {
    font-size: 1rem;
  }
  .header-line__text--large {
    font-size: 1.5rem;
  }
  .header-line__image {
    width: 2.6rem;
  }
  .header-line__image.--header {
    margin-inline: 0.2rem 0.05rem;
    width: 1.2rem;
  }
  .header-line__text--medium {
    font-size: 1rem;
  }
  .header-line__text--very-small {
    font-size: 1rem;
  }
  .header__overwrap {
    z-index: 101;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 6.6rem;
    background: #000;
    display: grid;
    place-items: center;
  }
  .header__overwrap-text {
    padding-inline: 1.5rem;
    max-width: calc(40.4rem + 1.5rem * 2);
    width: 100%;
    height: auto;
    aspect-ratio: 1010 / 113;
  }
  .header__overwrap-text img {
    width: 100%;
  }
  .header__overwrap-image {
    position: absolute;
    bottom: calc(-10rem / 192rem * 100vw);
    right: calc(5.9rem / 192rem * 100vw);
    width: calc(32.7rem / 192rem * 100vw);
    height: auto;
  }

  /*** ヘッダー ビジュアル ***/
  .header-visual {
    background-color: #f8f8f8;
    position: relative;
    background: url(../images/fv-bg.webp) no-repeat center / cover;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1092;
    margin-top: -6.6rem;
  }
  .header-visual__book {
    position: absolute;
    top: 7.3rem;
    left: 50%;
    transform: translateX(-50%);
    /* width: 91%; */
    width: calc(174.7rem / 192rem * 100vw);
    height: auto;
    aspect-ratio: 1747 / 935;
  }
  .header-visual__book img {
  }
  .header-visual__worry {
    position: absolute;
    top: calc(-6.5rem / 192rem * 100vw);
    left: calc(-4rem / 192rem * 100vw);
    width: calc(62rem / 192rem * 100vw);
    height: auto;
    aspect-ratio: 670 / 197;
  }
  .header-visual__designer {
    position: absolute;
    top: calc(8.1rem / 192rem * 100vw);
    left: calc(0.4rem / 192rem * 100vw);
    width: calc(29rem / 192rem * 100vw);
    height: auto;
    aspect-ratio: 280 / 677;
  }
  .header-visual__quotation {
    position: absolute;
    top: calc(19.2rem / 192rem * 100vw);
    right: calc(9rem / 192rem * 100vw);
    width: calc(16.5rem / 192rem * 100vw);
    height: auto;
    aspect-ratio: 173 / 107;
  }

  /*** ヘッダーボタン ***/

  .header-button__outer {
    top: calc(-2rem / 76.8rem * 100vw);
  }

  /*** VOICE ***/
  .voice {
    padding: 3rem 1.5rem 0;
  }
  .voice::before {
    height: 14.2rem;
    width: 6rem;
  }
  .voice::after {
    height: 32.2rem;
    width: 6rem;
  }
  .voice__inner {
    flex-direction: column;
    padding-top: 24rem;
  }
  .voice__item:nth-child(1) {
    margin-left: 0;
    padding: 0 1.5rem 0;
  }
  .voice__image {
    max-width: 45rem;
    width: 100%;
  }
  .voice__item:nth-child(2) {
    margin-left: 0;
    padding: 6rem 1.5rem 4rem 1.5rem;
  }
  .voice__item:nth-child(2)::before {
    display: none;
  }
  .voice__item:nth-child(2)::after {
    display: none;
  }
  .voice__title {
    font-size: 7rem;
  }
  .voice__subtitle {
    font-size: 1.8rem;
    margin-top: 0.5rem;
  }
  .voice__text {
    font-size: 1.4rem;
    line-height: 2.5rem;
    margin-top: 3rem;
  }

  /*** 10デザ研究所 Lab. ***/
  .lab {
    padding: 4rem 2rem 5rem;
  }
  .lab::before {
    height: 7.5rem;
  }
  .lab__icon {
    margin-right: 1rem;
    vertical-align: baseline;
    width: 4rem;
  }
  .lab__title {
    font-size: 3rem;
  }
  .lab__title--big {
    font-size: 4rem;
  }
  .lab__block {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 3rem;
  }
  .lab__text {
    font-size: 1.3rem;
    line-height: 2rem;
  }
  .lab__name {
    align-self: flex-end;
    font-size: 2.5rem;
    margin-top: 2rem;
  }
  .lab__background {
    margin-top: 2.7rem;
    padding: 1.5rem;
  }
  .lab__background::before,
  .lab__background::after {
    font-size: 1rem;
    white-space: nowrap;
  }
  .lab__background::before {
    left: -1.2rem;
  }
  .lab__background::after {
    right: -1.2rem;
  }
  .lab__movie {
    max-width: 45rem;
    width: 100%;
  }

  /*** このようなお悩みはありませんか？ ***/
  .problem {
    height: auto;
    padding: 7.5rem 1.5rem 10rem;
  }
  .problem__title {
    font-size: 1.8rem;
    padding-bottom: 1.5rem;
  }
  .problem__title::after {
    font-size: 18.5rem;
    right: -4.3rem;
    top: -6rem;
  }
  .problem__list {
    flex-direction: column;
    margin-top: 9rem;
  }
  .problem__item:nth-child(2) {
    margin-top: 5rem;
    padding-top: 0;
  }
  .problem__text {
    font-size: 1.8rem;
    line-height: 3rem;
    max-width: 30rem;
    padding: 3rem;
    width: 100%;
  }
  .problem__text::before {
    content: none;
  }
  .problem__text::after {
    content: none;
  }
  .problem__message {
    font-size: 3.7rem;
    margin-top: 7rem;
  }
  .problem__message::before,
  .problem__message::after {
    font-size: 6.5rem;
    top: -2.5rem;
  }
  .problem__message::before {
    left: -3.3rem;
  }
  .problem__message::after {
    right: -3.3rem;
  }

  /*** COMMIT ***/
  .commit {
    margin-top: -9rem;
    padding: 0 1.5rem;
  }
  .commit__inner {
    padding: 5rem 1.5rem 3rem;
  }
  .commit__title {
    font-size: 7rem;
  }
  .commit__subtitle {
    font-size: 1.8rem;
    margin-top: 0;
  }
  .commit__list {
    margin-top: 4.5rem;
  }
  .commit__item {
    flex-direction: column;
    gap: 0;
    min-width: auto;
    padding: 1.5rem;
    width: 100%;
  }
  .commit__item:nth-of-type(n + 2) {
    margin-top: 2.5rem;
  }
  .commit__number {
    border-bottom: 1px solid var(--color-gold);
    font-size: 5rem;
    padding-top: 0;
  }
  .commit__number--line::after {
    content: none;
  }
  .commit__text {
    font-size: 1.75rem; /**/
    line-height: 3rem;
    padding: 1.5rem 0 0;
  }

  /*** 一般的なWebデザインスクールと何が違うの？ ***/
  .difference {
    padding: 5rem 1.5rem 0;
  }
  .difference::after {
    aspect-ratio: auto;
    bottom: -35rem;
    height: 70rem;
  }

  /*** FLOW ***/
  .flow {
    border-top-left-radius: 12rem;
    margin-top: 10rem;
    padding: 6rem 1.5rem 5rem;
  }
  .flow::before {
    font-size: 18rem;
    left: 0;
    top: -10rem;
  }
  .flow::after {
    font-size: 5rem;
    left: 0.5rem;
    top: -7.5rem;
  }
  .flow__inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .flow__header {
    margin-left: 2rem;
  }
  .flow__name {
    font-size: 2rem;
  }
  .flow__title {
    font-size: 7rem;
    margin-top: 2rem;
  }
  .flow__subtitle {
    font-size: 2rem;
  }
  .flow__list {
    margin: 0 auto;
  }
  .flow__item {
    align-items: flex-start;
    flex-direction: column;
    padding: 5.1rem 0 2rem;
  }
  .flow-image {
    align-self: center;
    width: auto;
  }
  .flow-text__title {
    font-size: 2.4rem;
    margin-top: 2rem;
  }
  .flow-text__text {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  /*** FAQ ***/
  .faq {
    padding: 4rem 1.5rem 5rem;
  }
  .faq__title {
    font-size: 7rem;
  }
  .faq__subtitle {
    font-size: 2rem;
    margin-top: 0;
  }
  .faq__list {
    margin-top: 2rem;
  }
  .faq__item {
    padding-left: 4rem;
  }
  .faq__item::before {
    font-size: 4rem;
    left: 0;
    top: 2.2rem;
  }
  .faq__question {
    font-size: 1.6rem;
    line-height: 2.5rem;
    padding: 3rem 2.5rem 2rem 0;
  }
  .faq__question.open {
    padding-bottom: 2rem;
  }
  .faq__question::before,
  .faq__question::after {
    right: 0;
    top: 3.7rem;
  }
  .faq__answer {
    font-size: 1.4rem;
    line-height: 2.1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
  }

  /*** フッター ***/
  .footer-button__outer {
    height: 25.4rem;
  }
  .footer-button__background {
    top: -4rem;
  }
  .footer__money {
    font-size: 4.5rem;
    top: 3rem;
    right: 3.6rem;
  }
  .footer__font {
    margin-top: 1.5rem;
  }
  .footer__topic1 {
    max-width: 45rem;
    width: 50%;
  }
  .footer__topic2 {
    width: 70%;
    max-width: 65rem;
  }
  .footer-nav {
    flex-direction: column;
    font-size: 1.3rem;
    margin: 5rem auto 0;
    width: fit-content;
  }
  .footer-nav__item:nth-child(n + 2) {
    border-left: none;
    margin: 0.5rem 0 0 0;
    padding: 1rem 0 0 0;
  }
  .footer__block {
    margin-top: 3rem;
    padding: 1.2rem 0;
  }
  .footer__copyright {
    font-size: 1.1rem;
  }
  .footer__copyright--small {
    font-size: 1rem;
  }
  .footer__top {
    font-size: 1.1rem;
    padding: 1.2rem 0 0 0.5rem;
    text-align: left;
    width: 7.5rem;
  }
  .footer__top::after {
    width: 0.8rem;
  }

  /*** プライバシー共通 ***/
  .privacy__background::before {
    height: 32rem;
  }
  .privacy__design10::before {
    font-size: 19.3rem;
    left: -4.5rem;
    top: -9.6rem;
  }
  .privacy__design10::after {
    font-size: 5rem;
    left: -4rem;
    top: -6.5rem;
  }
  .privacy__title {
    font-size: 2rem;
  }

  /*** 特定商取引法に基づく表記 ***/
  .scta {
    padding: 14rem 5rem 2.8rem;
  }
  .scta__list {
    margin-top: 3rem;
    padding: 2.5rem 8%;
  }
  .scta__item {
    flex-direction: column;
  }
  .scta__name {
    width: 100%;
  }
  .scta__text {
    margin-top: 1rem;
    width: 100%;
  }
  .scta-environment {
    flex-direction: column;
    margin-top: 1rem;
  }
  .scta-environment__item:nth-of-type(2) {
    margin-left: 0;
    margin-top: 0.8rem;
  }

  /*** プライバシーポリシー ***/
  .policy {
    padding: 14rem 5rem 6.75rem;
  }
  .policy__text {
    margin-top: 3rem;
    padding: 2.5rem 8%;
    word-break: break-all;
  }
}

@media (max-width: 580px) {
  .header-visual {
    aspect-ratio: 1920 / 1145;
  }
  .header-button__outer {
    top: 0;
  }
}

@media (max-width: 410px) {
  .header-button__outer {
    top: calc(2rem / 76.8rem * 100vw);
  }
}

@media (max-width: 375px) {
  .common-button__session {
    font-size: calc(25 / 395 * 100vw);
  }
  .common-button__easy {
    font-size: calc(25 / 395 * 100vw);
  }

  .common-button__brackets::before {
    font-size: calc(25 / 395 * 100vw);
  }
  .common-button__brackets::after {
    font-size: calc(25 / 395 * 100vw);
    bottom: 0.2rem;
  }
  .common-button__line {
    /*font-size: calc(35 / 395 * 100vw);*/
    font-size: calc(28 / 395 * 100vw);
    line-height: 1.2;
    /* line-height: 1.5; */
  }
  .common-button__regist {
    font-size: calc(30 / 395 * 100vw);
  }
  .common-button__hither {
    font-size: calc(25 / 395 * 100vw);
  }

  .header-visual {
    aspect-ratio: auto;
    height: calc(1200 / 1920 * 100vw);
  }
  .header-button__outer {
    top: calc(4rem / 76.8rem * 100vw);
  }
}