* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --width: 1470;
    --Black: #353535;
    --gray50: #808080;
    --white: #ffffff;
    --red: #B82727;
    --BG: #EBE7E1;
    --fw-L: 300;
    --fw-R: 400;
    --fw-m: 500;
}

@media (max-width: 1023px) {
    :root {
        --width: 1023;
    }
}

@media (max-width: 430px) {
    :root {
        --width: 430;
    }
}

html.wf-loading body {
    visibility: hidden;
}

html.wf-active body {
    visibility: visible;
    transition: opacity 0.3s ease, background-color 0.5s cubic-bezier(.4, .6, .23, 1);
    opacity: 1;
}

body {
    font-family: "Outfit", "ryo-gothic-plusn", sans-serif;
    letter-spacing: 0.05rem;
    background-color: var(--BG);
    color: var(--Black);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'palt' on;
    /* Firefox用 */
}

body.menu-open {
    overflow: hidden;
    width: 100%;
    height: 100%;
    touch-action: none;
}

body.is-fixed {
    overflow: hidden;
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

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

li {
    list-style: none;
}

html,
body {
    height: 100%;
}

.br-tab {
    display: none;
}

.br-sp {
    display: block;
}

.br-sp-break {
    display: none;
}

.pre-loader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    z-index: 9999;
}

.loader {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--Black);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(32 / var(--width) * 100vw);
    z-index: 9999;
    color: var(--white);
}

.count {
    font-size: calc(16 / var(--width) * 100vw);
    text-align: right;
    line-height: 100%;
    padding: 0 calc(32 / var(--width) * 100vw);
}

.copy {
    font-size: calc(32 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 100%;
}

/* .copy span{
    font-weight: var(--fw-L);
    padding-left: calc(16 / var(--width) * 100vw);
} */

.copy__wrapper {
    overflow: hidden;
    white-space: nowrap;
}

.copy__wrapper .letter {
    display: inline-block;
    line-height: 100%;
}

.copy__wrapper .letter:nth-child(9) {
    margin-right: calc(16 / var(--width) * 100vw);
}

.copy__wrapper .letter:nth-child(n+10):nth-child(-n+14) {
    font-weight: var(--fw-L)
}

.CC-home {
    display: flex;
    flex-direction: column;
    gap: calc(80 / var(--width) * 100vw);
}

.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    transition: transform 0.3s ease;
}

.l-header__inner {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    padding: calc(64 / var(--width) * 100vw) calc(80 / var(--width) * 100vw);
    transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.logo-default {
    position: absolute;
    top: calc(64 / var(--width) * 100vw);
    left: calc(80 / var(--width) * 100vw);
}

.logo-horizontal {
    position: absolute;
    top: calc(24 / var(--width) * 100vw);
    left: calc(24 / var(--width) * 100vw);
}

.logo-default {
    width: calc(230 / var(--width) * 100vw);
    fill: var(--Black);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(1);
}

.menu-open .logo-default,
.menu-open .logo-horizontal {
    fill: var(--white);
}

.program-page .logo-default {
    fill: var(--white);
}

.program-page .sp-menu-btn {
    color: var(--white);
}

.menu-open .l-header__txt {
    color: var(--white);
}

.program-page .l-header__txt {
    color: var(--white);
}

.program-page .l-header__list a {
    color: var(--white);
}

.program-page .is-scrolled .l-header__list a {
    color: var(--Black);
}

.program-page .is-scrolled .sp-menu-btn {
    color: var(--Black);
}

.l-header__ul {
    display: flex;
    gap: calc(64 / var(--width) * 100vw);
}

.l-header__list {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-m);
}

.l-header__list a,
.l-footer__list a {
    position: relative;
    display: inline-block;
    color: inherit;
    overflow: hidden;
    line-height: 150%;
}

.l-header__list a span,
.l-footer__list a span {
    display: inline-block;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.14, 1, 0.34, 1);
}

.l-header__list a::before,
.l-footer__list a::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.14, 1, 0.34, 1);
    color: inherit;
}

.l-header__list a:hover span,
.l-footer__list a:hover span {
    transform: translateY(-100%);
}

.l-header__list a:hover::before,
.l-footer__list a:hover::before {
    transform: translateY(-100%);
}

.sp-menu {
    display: none;
}

.logo-horizontal {
    width: calc(200 / var(--width) * 100vw);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(0.95);
}

.is-scrolled .l-header__inner {
    padding: calc(24 / var(--width) * 100vw);
    transition: padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-scrolled .logo-default {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.05);
}

.is-scrolled .logo-horizontal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition-delay: 0.5s;
}

.is-view .logo-horizontal {
    fill: var(--white);
}

.is-view .l-header__list a {
    color: var(--white);
}

.CC-home-mv {
    padding: 0 calc(80 / var(--width) * 100vw) calc(32 / var(--width) * 100vw) calc(80 / var(--width) * 100vw);
    width: 100%;
    height: 100vh;
    min-height: calc(640 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(160 / var(--width) * 100vw);
    align-items: flex-end;
}

.CC-home-mv__wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(32 / var(--width) * 100vw);
}

.CC-home-mv__title {
    font-size: calc(88 / var(--width) * 100vw);
    line-height: 150%;
    font-weight: var(--fw-m);
    font-feature-settings: 'halt' on;
}

.CC-home-mv__txt {
    font-size: calc(24 / var(--width) * 100vw);
    line-height: 180%;
    font-weight: var(--fw-m);
    font-feature-settings: 'halt' on;
    letter-spacing: 0.1rem;
    padding-left: calc(4 / var(--width) * 100vw);
}

.CC-home-foot__wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.CC-home-scroll {
    font-size: calc(14 / var(--width) * 100vw);
    text-transform: uppercase;
    font-weight: var(--fw-L);
}

.CC-home-cr {
    font-size: calc(12 / var(--width) * 100vw);
    text-transform: uppercase;
    font-weight: var(--fw-L);
}

.trail-img {
    position: absolute;
    width: calc(200 / var(--width) * 100vw);
    transform-origin: center;
    pointer-events: none;
    will-change: transform;
    z-index: -1;
}


.CC-home-project__inner {
    padding: 0 calc(24 / var(--width) * 100vw);
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
    /* margin-top: calc(100 / var(--width) * 100vw); */
}

.CC-home-title__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
    flex: none;
}

.title-en {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-R);
    overflow: hidden;
}

.CC-home-title {
    font-size: calc(48 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 150%;
}

.CC-home-project__container__inner {
    display: flex;
    /* gap: calc(80 / var(--width) * 100vw); */
    padding-right: calc(24 / var(--width) * 100vw);
    user-select: none;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
}

.CC-home-project__unit {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
    justify-content: center;
    padding-right: calc(24 / var(--width) * 100vw);
    scroll-snap-align: start;
}

.CC-home-project__unit:last-child {
    padding-right: 0;
}

.CC-home-project__wrapper {
    width: calc(440 / var(--width) * 100vw);
    position: relative;
}

.project-img__wrapper {
    width: calc(440 / var(--width) * 100vw);
    height: calc(440 / var(--width) * 100vw);
    overflow: hidden;
}

.project-img__wrapper::after {
    content: "";
    display: flex;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22.29%, rgba(0, 0, 0, 0.5) 100%);
    position: absolute;
    inset: 0;
}

.project-img__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 900ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.CC-home-project__wrapper:hover .project-img__wrapper img {
    transform: scale(1.1);
}

.project-title__wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: calc(24 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: calc(16 / var(--width) * 100vw);
}

.status__wrappwer {
    width: 100%;
    transform: translateY(calc(8 / var(--width) * 100vw));
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(24 / var(--width) * 100vw);
}

.status-period {
    color: var(--white);
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 150%;
}

.status {
    overflow: hidden;
    width: calc(160 / var(--width) * 100vw);
    position: relative;
}

.status__inner {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    display: flex;
}


.status span {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    color: var(--white);
    display: flex;
    align-items: center;
    line-height: 150%;
    flex: 0 0 auto;
    margin-right: calc(16 / var(--width) * 100vw);
}

.project-title {
    color: var(--white);
    font-size: calc(28 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 150%;
}

.tag__ul {
    display: flex;
    gap: calc(8 / var(--width) * 100vw);
}

.tag__list {
    color: var(--white);
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(calc(5 / var(--width) * 100vw));
    font-size: calc(10 / var(--width) * 100vw);
    font-weight: var(--fw-L);
    line-height: 150%;
    border: calc(1 / var(--width) * 100vw) solid var(--white);
    display: block;
    padding: calc(2 / var(--width) * 100vw) calc(8 / var(--width) * 100vw);
    border-radius: calc(32 / var(--width) * 100vw);
}

.home-project-name__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(8 / var(--width) * 100vw);
    padding: 0 calc(24 / var(--width) * 100vw);
}

.hidden {
    display: none;
}

.number {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-L);
    line-height: 150%;
    overflow: hidden;
    flex: 0 0 auto;
}

.project-masters {
    font-size: calc(20 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 150%;
}

.masters-role__wrapper {
    display: flex;
    flex-direction: column;
}

.masters-role {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-R);
    line-height: 150%;
    position: relative;
    white-space: normal;
}

/* .masters-role:not(:first-child)::before {
    content: "";
    width: calc(1 / var(--width) * 100vw);
    height: calc(11 / var(--width) * 100vw);
    background-color: var(--gray50);
    position: absolute;
    top: calc(5 / var(--width) * 100vw);
    left: calc(-8 / var(--width) * 100vw);
} */

.is-accepting {
    width: calc(103 / var(--width) * 100vw);
    height: calc(103 / var(--width) * 100vw);
    position: absolute;
    top: calc(-20 / var(--width) * 100vw);
    right: calc(-20 / var(--width) * 100vw);
}

.is-accepting p {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 150%;
    color: var(--white);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.is-accepting img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    animation: rotateLoop 12s linear infinite;
}

@keyframes rotateLoop {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.is-preparing,
.is-closed {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 150%;
    color: var(--white);
    position: absolute;
    top: calc(8 / var(--width) * 100vw);
    right: calc(8 / var(--width) * 100vw);
    padding: calc(6 / var(--width) * 100vw) calc(16 / var(--width) * 100vw);
    border-radius: calc(40 / var(--width) * 100vw);
    ;
}

.is-preparing {
    background-color: #2E9E73;
}

.is-closed {
    background-color: var(--gray50);
}


.timeline {
    width: 100%;
    height: calc(16 / var(--width) * 100vw);
    display: flex;
    justify-content: space-around;
    position: relative;
    margin: calc(12 / var(--width) * 100vw) 0;
}

.marker {
    width: calc(1 / var(--width) * 100vw);
    height: 100%;
    background-color: var(--gray50);
    will-change: transform;
}

.scroller {
    position: absolute;
    z-index: 1;
    top: calc(-2 / var(--width) * 100vw);
    left: 0;
    width: fit-content;
}

.scroller-svg {
    width: calc(100 / var(--width) * 100vw);
    height: calc(20 / var(--width) * 100vw);
    display: flex;
    justify-content: space-between;
    background-color: var(--BG);
}

.scroller-svg svg {
    width: auto;
}

.scroller span {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(12 / var(--width) * 100vw);
}

.cursor-circle {
    width: calc(128 / var(--width) * 100vw);
    height: calc(128 / var(--width) * 100vw);
    border-radius: 50%;
    background: rgba(187, 187, 187, 0.4);
    backdrop-filter: blur(calc(10 / var(--width) * 100vw));
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: calc(14 / var(--width) * 100vw);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-spacer {
    width: 100%;
    height: auto;
    display: block;
    /* JSで上書きする */
    pointer-events: none;
}

.CC-home-masters {
    padding: 0 calc(24 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
    width: 100%;
    overflow: hidden;
    position: relative;
}

.CC-home-masters__container {
    display: inline-flex;
    white-space: nowrap;
}

.CC-home-masters__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(32 / var(--width) * 100vw);
    padding: calc(12 / var(--width) * 100vw) calc(12 / var(--width) * 100vw) calc(32 / var(--width) * 100vw) calc(12 / var(--width) * 100vw);
    width: calc(300 / var(--width) * 100vw);
    flex: 0 0 auto;
    margin-right: calc(24 / var(--width) * 100vw);
    transition: background-color 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.CC-home-masters__unit:last-child {
    margin-right: 0;
}

.CC-home-masters__wrapper {
    display: flex;
    flex-direction: column;
}

.masters-img__wrapper {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.masters-img__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 900ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

body.is-view .CC-home-masters__unit:hover {
    color: var(--Black);
}

.CC-home-masters__unit:hover .masters-img__wrapper img {
    transform: scale(1.1);
}

.CC-home-masters__unit:hover {
    background-color: var(--white);
}

.home-masters-name__wrapper {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: calc(8 / var(--width) * 100vw);
}

.masters-name {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-m);
}

.home-masters-name__wrapper .masters-role__wrapper {
    flex-direction: column;
    gap: 0;
}

.home-masters-name__wrapper .masters-role {
    font-size: calc(12 / var(--width) * 100vw);
}

.home-masters-name__wrapper .masters-role:not(:first-child) {
    color: var(--gray50);
}

.home-masters-name__wrapper .masters-role:not(:first-child)::before {
    display: none;
}

.CC-home-project__container,
.CC-home-masters__container {
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(.4, 0, .2, 1);
}

body.gsap-init .CC-home-project__container,
body.gsap-init .CC-home-masters__container {
    opacity: 1;
}

.CC-home-masters .CC-home-title__wrapper {
    align-items: center;
}

.CC-home-masters .CC-home-title {
    text-align: center;
}

.master-modal {
    width: 100%;
    height: 100%;
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.modal-overlay {
    width: 100%;
    height: 100%;
    background-color: var(--Black);
    position: absolute;
    inset: 0;
}

.modal-detail__wrapper {
    width: 100%;
    height: 90dvh;
    padding: calc(32 / var(--width) * 100vw);
    overflow-y: scroll;
    background-color: var(--BG);
    scrollbar-color: rgba(0, 0, 0, .2) transparent;
    scrollbar-width: thin;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    color: var(--Black);
}

.masters-profile__modal {
    width: 100%;
    height: max-content;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: calc(160 / var(--width) * 100vw);
    padding: calc(80 / var(--width) * 100vw) calc(104 / var(--width) * 100vw);
}

.masters-profile__modal .masters-profile__wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: sticky;
    top: calc(80 / var(--width) * 100vw);
    left: 0;
}

.masters-profile__modal .masters-img__outer {
    width: calc(320 / var(--width) * 100vw);
    height: calc(320 / var(--width) * 100vw);
}

.masters-profile__modal .masters-name {
    font-size: calc(20 / var(--width) * 100vw);
}

.modal-masters-portfolio img {
    width: 100%;
    height: 100%;
}

.modal-masters-profile__txt__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.modal-btn {
    position: sticky;
    top: 0;
    right: 0;
    z-index: 1000;
    cursor: pointer;
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    flex: 0 0 auto;
}

.modal-btn span {
    display: inline-block;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.14, 1, 0.34, 1);
    position: relative;
    width: 100%;
}

.modal-btn::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.14, 1, 0.34, 1);
    color: inherit;
}

.modal-btn:hover span {
    transform: translateY(-100%);
}

.modal-btn:hover::before {
    transform: translateY(-100%);
}

body.modal-open {
    overflow: hidden;
    height: 100vh;
    touch-action: none;
}

.master-modal.is-active {
    visibility: visible;
}


.bg_black {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.CC-home-whatwedo {
    padding: calc(160 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(152 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(80 / var(--width) * 100vw);
    width: 100%;
    transition: color 0.5s cubic-bezier(.4, .6, .23, 1);
    color: var(--Black);
}

.whatwedo-txt__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(40 / var(--width) * 100vw);
}

.whatwedo-txt {
    font-size: calc(24 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}


.char {
    opacity: 0.2;
    display: inline-block;
    transition: opacity .4s cubic-bezier(.165, .84, .44, 1);
}

.CC-home-features {
    width: 100%;
}

.CC-home-features__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 calc(160 / var(--width) * 100vw);
}

.CC-home-features__wrapper .CC-home-title__wrapper {
    position: sticky;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100svh;
    z-index: -1;
    color: var(--white);
}

.CC-home-features__wrapper .CC-home-title {
    text-align: center;
}

.features-contents__wrapper {
    width: 100%;
}

.features-contents__wrapper {
    display: flex;
    width: 100%;
    padding-bottom: calc(160 / var(--width) * 100vw);
}

.features-right {
    justify-content: flex-end;
}

.features-contents__unit {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
    width: calc(560 / var(--width) * 100vw);
    background-color: var(--white);
    padding: calc(64 / var(--width) * 100vw);
}

.features-contents__title__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
}

.features-contents__title {
    font-size: calc(32 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.features-contents__txt {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 230%;
}

.features__block {
    height: 50vh;
}

.CC-home-flow {
    width: 100%;
    height: calc(700 / var(--width) * 100vw);
    color: var(--Black);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    transition: color 0.5s cubic-bezier(.4, .6, .23, 1);
    overflow-x: hidden;
}

.CC-home-flow__wrapper {
    padding: 0 calc(24 / var(--width) * 100vw);
    display: flex;
    justify-content: space-between;
}

.flow-menu__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
    width: calc(480 / var(--width) * 100vw);
}

.flow-menu__ul {
    display: flex;
    flex-direction: column;
    width: fit-content;
    width: 100%;
}


.flow-menu__list {
    display: flex;
    gap: calc(32 / var(--width) * 100vw);
    align-items: center;
    padding: calc(32 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) calc(32 / var(--width) * 100vw) 0;
    border-bottom: solid calc(1 / var(--width) * 100vw) rgba(50, 50, 50, 0.2);
    cursor: pointer;
    justify-content: space-between;
    transition: color 0.5s cubic-bezier(.4, .6, .23, 1);
}

.flow-menu__outer {
    display: flex;
    gap: calc(32 / var(--width) * 100vw);
}

.flow-menu__list .number {
    width: calc(80 / var(--width) * 100vw);
    opacity: 0.2;
    transition: opacity 0.3s;
}

.flow-menu__list .number.is-active {
    opacity: 1;
}

.flow-menu {
    font-size: calc(24 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    opacity: 0.2;
    transition: opacity 0.3s;
}

.flow-menu.is-active {
    opacity: 1;
}

.flow-menu__btn {
    width: calc(32 / var(--width) * 100vw);
    height: calc(32 / var(--width) * 100vw);
    border: solid calc(1 / var(--width) * 100vw) var(--Black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}


.flow-menu__btn svg {
    width: calc(16 / var(--width) * 100vw);
    height: calc(16 / var(--width) * 100vw);
    display: flex;
    fill: var(--Black);
    transition: fill 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.overlay-flow-contents__wrapper {
    padding: calc(80 / var(--width) * 100vw);
    width: calc(800 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
    opacity: 0;
    transform: scale(1.05);
    transition: none;
    border: solid calc(1 / var(--width) * 100vw) #CCCCCC;
}

.flow-contents__headding__wrapper {
    display: flex;
    justify-content: space-between;
}

.flow-contents__title__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.flow-contents__title {
    font-size: calc(40 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.close-btn {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-R);
    cursor: pointer
}

.flow-contents__txt {
    font-size: calc(20 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 230%;
    letter-spacing: 0.1rem;
}

body.is-view {
    background-color: var(--Black);
}

body.is-view .CC-home-masters {
    color: var(--white);
}

body.is-view .CC-home-whatwedo {
    color: var(--white);
}

body.is-view .CC-home-flow {
    color: var(--white);
}

body.is-view .sp-menu-btn {
    color: var(--white);
}

.flow-menu__list:hover .flow-menu__btn {
    background-color: var(--Black);
}

.flow-menu__list:hover .flow-menu__btn {
    background-color: var(--Black);
    border-color: var(--Black);
}

.flow-menu__list:hover .flow-menu__btn svg {
    fill: var(--white);
}


.flow-menu__list:hover .flow-menu__btn svg {
    fill: var(--white);
}


.CC-home-faq {
    padding: calc(160 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
}

.CC-home-faq__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
    align-items: center;
}

.CC-home-faq .CC-home-title__wrapper {
    align-items: center;
}

.CC-home-faq-contents__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: calc(24 / var(--width) * 100vw);
}

.CC-home-faq__unit {
    background-color: var(--white);
    padding: calc(16 / var(--width) * 100vw);
}

.faq-contents__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(40 / var(--width) * 100vw);
    padding: calc(80 / var(--width) * 100vw);
}

.faq-contents__title {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
}

.faq-item {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
}

.faq-q,
.faq-a {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-R);
    line-height: 180%;
    display: flex;
    gap: calc(32 / var(--width) * 100vw);
}

.btn {
    display: flex;
    width: fit-content;
}

.btn-inner {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    display: inline-flex;
    position: relative;
    overflow: hidden;
    vertical-align: bottom;
    color: inherit;
    line-height: 230%;
    align-items: center;
    gap: calc(16 / var(--width) * 100vw);
}

.btn-inner span {
    display: inline-block;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.14, 1, 0.34, 1);
    position: relative;
    z-index: 1;
}

.btn-inner::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.14, 1, 0.34, 1);
    color: inherit;
    z-index: 1;
    line-height: 230%;
}

.btn-inner:hover span,
.btn-inner:hover::before {
    transform: translateY(-100%);
}

.btn-inner::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(1 / var(--width) * 100vw);
    background-color: currentColor;
    z-index: 0;
}

.btn-inner:hover::after {
    animation: underline-animate 1s ease-in-out forwards;
}

@keyframes underline-animate {
    0% {
        width: 100%;
        left: 0;
    }

    25% {
        width: 0;
        left: 100%;
    }

    50% {
        width: 0;
        left: 0;
    }

    100% {
        width: 100%;
        left: 0;
    }
}

.btn svg {
    width: calc(16 / var(--width) * 100vw);
    height: calc(16 / var(--width) * 100vw);
}

.CC-home-news {
    padding: calc(160 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
}

.CC-home-news__wrapper {
    display: flex;
    gap: calc(128 / var(--width) * 100vw);
    padding-left: calc(104 / var(--width) * 100vw);

}

.news-btn {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    border-bottom: solid calc(1 / var(--width) * 100vw) var(--Black);
    padding-bottom: calc(8 / var(--width) * 100vw);
    width: fit-content;
}

.news-contents__wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.news-unit {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    line-height: 230%;
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    padding: calc(32 / var(--width) * 100vw) calc(16 / var(--width) * 100vw);
    justify-content: space-between;
    border-top: solid calc(1 / var(--width) * 100vw) #cccccc;
    align-items: center;
}

.news-unit::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scaleX(0);
    transform-origin: left;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.03);
    transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: 0;
}

.news-unit:hover::before {
    transform: translateX(-50%) scaleX(1);
}

.news-unit>* {
    position: relative;
    z-index: 1;
}

.news-title {
    display: flex;
    gap: calc(64 / var(--width) * 100vw);
    align-items: center;

}

.news-title p {
    font-size: calc(20 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.news__icon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: calc(32 / var(--width) * 100vw);
    height: calc(32 / var(--width) * 100vw);
    border: solid calc(1 / var(--width) * 100vw) var(--Black);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: calc(32 / var(--width) * 100vw);
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);

}

.news-unit:hover .news__icon {
    background-color: var(--Black);
}

.news-unit:hover .news__icon svg {
    fill: var(--white);
}

.news__icon svg:first-child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    fill: var(--Black);
    width: calc(16 / var(--width) * 100vw);
    height: calc(16 / var(--width) * 100vw);
    display: flex;
}

.news__icon svg:last-child {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translate(-50%, -50%);
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    fill: var(--Black);
    width: calc(16 / var(--width) * 100vw);
    height: calc(16 / var(--width) * 100vw);
    display: flex;
}

.news-unit:hover .news__icon svg:first-child {
    transform: translate(100%, -100%);
    top: 0;
}

.news-unit:hover .news__icon svg:last-child {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.l-footer {
    width: 100%;
    padding-top: calc(160 / var(--width) * 100vw);
    overflow: hidden;
}

.l-footer__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(80 / var(--width) * 100vw);
}

.marquee__outer {
    width: 100%;
    padding: calc(16 / var(--width) * 100vw);
    border-width: calc(1 / var(--width) * 100vw) 0;
    border-style: solid;
    border-color: var(--Black);
}

.marquee__wrapper {
    display: inline-block;
    gap: calc(64 / var(--width) * 100vw);
    white-space: nowrap;
    will-change: transform;
}

.marquee {
    display: inline-block;
}

.marquee span {
    display: inline-block;
    margin-right: calc(64 / var(--width) * 100vw);
    font-size: calc(24 / var(--width) * 100vw);
    font-weight: var(--fw-L);
    white-space: nowrap;
    text-transform: uppercase;
}

.footer-contents__wrapper {
    padding: 0 calc(24 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.sitemap-wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
}

.sitemap__ul {
    display: flex;
    flex-direction: column;
    gap: calc(8 / var(--width) * 100vw);
}

.sitemap__list {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
}

.l-footer__list {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
}

.footer-info {
    display: flex;
    justify-content: space-between;

}

.site-operator a,
.terms__ul a {
    position: relative;
    display: inline-block;
    color: inherit;
    overflow: hidden;
    line-height: 150%;
    vertical-align: bottom;
}

.site-operator a span,
.terms__ul a span {
    display: inline-block;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.14, 1, 0.34, 1);
}

.site-operator a::before,
.terms__ul a::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(0);
    transition: transform 1.2s cubic-bezier(0.14, 1, 0.34, 1);
    display: inline-block;
    line-height: 150%;
}

.site-operator a:hover span,
.terms__ul a:hover span {
    transform: translateY(-100%);
}

.site-operator a:hover::before,
.terms__ul a:hover::before {
    transform: translateY(-100%);
}

.site-operator {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-L);
    line-height: 150%;
}

.site-operator a::after,
.terms__ul a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(1 / var(--width) * 100vw);
    background-color: currentColor;
}

.operator-link {
    text-decoration: underline;
}

.copyright {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-L);
}

.terms__ul {
    display: flex;
    gap: calc(32 / var(--width) * 100vw);
}

.terms__list {
    font-size: calc(12 / var(--width) * 100vw);
    font-weight: var(--fw-L);
    text-decoration: underline;
}

.tabpc-nav {
    display: none;
}


@media (max-width: 1023px) {

    .sp-menu {
        display: block;
        transition: opacity 0.3s ease;
    }

    .sp-menu-btn.fade-out {
        opacity: 0;
    }

    .menu-open .sp-menu-btn {
        color: var(--white);
    }

    .tabpc-nav {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-color: var(--Black);
        position: fixed;
        z-index: 30;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    .tabpc-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .tabpc-nav__ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(64 / var(--width) * 100vw);
    }

    .tabpc-nav__list {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .tabpc-nav__list a {
        color: var(--white);
        font-size: calc(64 / var(--width) * 100vw);
        font-weight: var(--fw-m);
        display: block;
        text-align: center;
    }

    .br-tab {
        display: block;
    }

    .l-header__nav {
        display: none;
    }

    .sp-menu-btn {
        font-size: calc(20 / var(--width) * 100vw);
        font-weight: var(--fw-m);
        line-height: 180%;
    }

    .CC-home-mv {
        padding: 0 calc(64 / var(--width) * 100vw) calc(32 / var(--width) * 100vw) calc(64 / var(--width) * 100vw);
        align-items: flex-start;
        height: 100dvh;
    }

    .CC-home-mv__txt {
        font-size: calc(32 / var(--width) * 100vw);
    }

    .masters-profile__modal {
        gap: calc(64 / var(--width) * 100vw);
        padding: calc(32 / var(--width) * 100vw) 0;
    }

    .modal-btn {
        font-size: calc(20 / var(--width) * 100vw);
    }

    .CC-home-features__wrapper {
        padding: calc(24 / var(--width) * 100vw);
    }

    .CC-home-whatwedo {
        padding: calc(80 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) calc(160 / var(--width) * 100vw) calc(24 / var(--width) * 100vw);
        flex-direction: column;
    }

    .whatwedo-txt__wrapper {
        margin-top: 0;
    }

    .CC-home-flow {
        justify-content: flex-start;
        height: auto;
    }

    .CC-home-flow__wrapper {
        flex-direction: column;
        gap: calc(32 / var(--width) * 100vw);
    }

    .flow-menu__wrapper {
        flex-direction: row;
        width: 100%;
    }

    .flow-menu__list {
        padding: calc(16 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) calc(16 / var(--width) * 100vw) 0;
    }

    .overlay-flow-contents__wrapper {
        height: auto;
        width: 100%;
    }

    .flow-menu__btn {
        rotate: 135deg;
    }

    .faq-contents__wrapper {
        padding: calc(24 / var(--width) * 100vw);
    }

    .CC-home-news__wrapper {
        padding-left: 0;
        flex-direction: column;
        gap: calc(64 / var(--width) * 100vw);
    }

}

@media (max-width: 430px) {

    .br-sp {
        display: none;
    }

    .br-sp-break {
        display: block;
    }

    .l-header__inner {
        padding: calc(32 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
    }

    .logo-default {
        width: calc(180 / var(--width) * 100vw);
        position: absolute;
        top: calc(40 / var(--width) * 100vw);
        left: calc(24 / var(--width) * 100vw);
    }

    .logo-horizontal {
        top: calc(32 / var(--width) * 100vw);
    }

    .sp-menu-btn {
        font-size: calc(16 / var(--width) * 100vw);
    }

    .tabpc-nav__ul {
        gap: calc(32 / var(--width) * 100vw);
    }

    .tabpc-nav__list a {
        font-size: calc(32 / var(--width) * 100vw);
    }

    .CC-home-mv {
        padding: 0 calc(24 / var(--width) * 100vw) calc(64 / var(--width) * 100vw) calc(24 / var(--width) * 100vw);
        gap: calc(64 / var(--width) * 100vw);
        max-height: 100dvh;
        overflow: hidden;
    }

    .CC-home-mv__title {
        font-size: calc(43 / var(--width) * 100vw);
    }

    .CC-home-mv__txt {
        font-size: calc(16 / var(--width) * 100vw);
    }

    .CC-home-project__wrapper {
        width: calc(320 / var(--width) * 100vw);
    }

    .CC-home-project__unit {
        padding-right: calc(16 / var(--width) * 100vw);
    }

    .project-img__wrapper {
        width: calc(320 / var(--width) * 100vw);
        height: calc(320 / var(--width) * 100vw);
    }

    .project-title {
        font-size: calc(20 / var(--width) * 100vw);
    }

    .project-masters {
        font-size: calc(18 / var(--width) * 100vw);
    }

    .timeline {
        display: none;
    }

    .CC-home-project__container {
        /* 既存のスタイルに加えて以下を追加 */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE, Edge */
    }

    .CC-home-project__container::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Edge */
    }


    .project-indicator-numbers {
        font-size: calc(14 / var(--width) * 100vw);
        font-weight: var(--fw-R);
        display: flex;
        gap: calc(8 / var(--width) * 100vw);
        justify-content: center;
        align-items: center;
        color: var(--gray50);
        transition: color 0.4s ease;
    }

    .project-indicator-numbers .project-index.is-active {
        font-weight: var(--fw-m);
        color: var(--Black);
        transition: color 0.4s ease;
    }

    .CC-home-title {
        font-size: calc(32 / var(--width) * 100vw);
    }

    .CC-home-project__container {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-top: calc(32 / var(--width) * 100vw);
    }

    .CC-home-features__wrapper .CC-home-title__wrapper {
        position: relative;
        height: auto;
        padding-bottom: calc(64 / var(--width) * 100vw);
    }

    .features-contents__wrapper {
        padding-bottom: calc(32 / var(--width) * 100vw);
    }

    .CC-home-masters .CC-home-title__wrapper {
        align-items: flex-start;
    }

    .CC-home-masters .CC-home-title {
        text-align: left;
    }

    .CC-home-title {
        font-size: calc(28 / var(--width) * 100vw);
    }


    .CC-home-masters__unit {
        width: calc(220 / var(--width) * 100vw);
        will-change: transform;
        margin-right: 0;
    }

    .features__block {
        display: none;
    }

    .modal-detail__wrapper {
        padding: calc(24 / var(--width) * 100vw) calc(24 / var(--width) * 100vw);
    }

    .masters-profile__modal {
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 900;
        padding: calc(64 / var(--width) * 100vw) calc(24 / var(--width) * 100vw);
        width: 100%;
    }

    .masters-profile__modal .masters-img__outer {
        width: 100%;
        height: 100%;
    }

    .masters-profile__modal .masters-profile__wrapper {
        position: relative;
        top: 0;
    }

    .modal-btn {
        font-size: calc(16 / var(--width) * 100vw);
    }

    .features-contents__unit {
        width: 100%;
        padding: calc(32 / var(--width) * 100vw);
    }

    .whatwedo-txt {
        font-size: calc(20 / var(--width) * 100vw);
    }

    .flow-menu__wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(24 / var(--width) * 100vw);
    }

    .flow-menu {
        font-size: calc(20 / var(--width) * 100vw);
    }

    .overlay-flow-contents__wrapper {
        padding: calc(24 / var(--width) * 100vw);
        gap: calc(24 / var(--width) * 100vw);
    }

    .flow-contents__title__wrapper {
        gap: calc(8 / var(--width) * 100vw);
    }

    .flow-contents__title {
        font-size: calc(24 / var(--width) * 100vw);
    }

    .flow-contents__txt {
        font-size: calc(16 / var(--width) * 100vw);
        line-height: 180%;
    }

    .flow-title {
        font-size: calc(24 / var(--width) * 100vw);
    }

    .CC-home-faq-contents__wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto;

    }

    .faq-contents__wrapper {
        padding: calc(24 / var(--width) * 100vw) 0 0 0;
    }

    .news-title {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(16 / var(--width) * 100vw);
    }

    .sitemap__ul {
        gap: calc(16 / var(--width) * 100vw);
    }

    .l-header__list {
        font-size: calc(16 / var(--width) * 100vw);
    }

    .site-operator {
        font-size: calc(16 / var(--width) * 100vw);
    }

    .footer-contents__wrapper {
        gap: calc(64 / var(--width) * 100vw);
    }

    .footer-info {
        flex-direction: column-reverse;
        gap: calc(64 / var(--width) * 100vw);
    }

    .terms__ul {
        flex-direction: column;
        gap: calc(16 / var(--width) * 100vw);

    }

    .terms__list {
        font-size: calc(14 / var(--width) * 100vw);
    }




}



/* project-page */

.loader {
    width: 100%;
    height: 100svh;
    background: var(--Black);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}

.page-container {
    display: flex;
    flex-direction: column;
    gap: calc(160 / var(--width) * 100vw);
    width: 100%;
}

.project-hero {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.project-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 22.29%, rgba(0, 0, 0, 0.5) 100%),
        rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.page-container .project-title__wrapper {
    padding: calc(80 / var(--width) * 100vw);
    z-index: 2;
}

.page-container .project-title {
    font-size: calc(48 / var(--width) * 100vw);
    overflow: hidden;
}

.page-container .project-title .letter {
    display: inline-block;
}

.page-container .project-masters {
    font-size: calc(24 / var(--width) * 100vw);
    color: var(--white);
}

.page-container .tag__ul {
    padding-top: calc(16 / var(--width) * 100vw);
}

.page-container .is-accepting {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: calc(32 / var(--width) * 100vw);
}

.page-container .is-preparing,
.page-container .is-closed {
    position: relative;
    width: fit-content;
    margin-bottom: calc(32 / var(--width) * 100vw);
}


/* .page-container .is-accepting p{
    font-size: calc(20 / var(--width) * 100vw);
} */

.scroll-txt {
    font-size: calc(14 / var(--width) * 100vw);
    color: var(--white);
    position: absolute;
    bottom: calc(32 / var(--width) * 100vw);
    right: calc(80 / var(--width) * 100vw);
    z-index: 2;
    text-transform: uppercase;
}

.masters-profile {
    display: flex;
    padding: 0 calc(24 / var(--width) * 100vw);
    gap: calc(80 / var(--width) * 100vw);
    width: 100%;
}

.masters-profile__left {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
    flex: 1;
}

.masters-title {
    font-size: calc(24 / var(--width) * 100vw);
}

.masters-profile__wrapper {
    display: flex;
    align-items: center;
    gap: calc(32 / var(--width) * 100vw);
}

.masters-img__outer {
    width: calc(200 / var(--width) * 100vw);
    height: calc(200 / var(--width) * 100vw);
    overflow: hidden;
}

.masters-profile__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.masters-profile__outer {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.masters-profile__inner {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
}

.page-container .masters-name {
    font-size: calc(24 / var(--width) * 100vw);
}

.sns__warapper {
    display: flex;
    gap: calc(16 / var(--width) * 100vw);
}

.sns {
    font-size: calc(16 / var(--width) * 100vw);
    text-decoration: underline;
    font-weight: var(--fw-R);
}

.masters-profile__txt__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
}

.masters-profile__txt {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 230%;
}

.masters-profile__txt a {
    text-decoration: underline;
}

.sns__warapper a {
    transition: all 0.5s ease;
}

.sns__warapper a:hover {
    color: var(--gray50);
}


.masters-profile__txt a {
    transition: all 0.5s ease;
}

.masters-profile__txt a:hover {
    color: var(--gray50);
}

.masters-portfolio__wrapper {
    position: relative;
    overflow: hidden;
    width: calc(680 / var(--width) * 100vw);
    height: calc(680 / var(--width) * 100vw);
}

.masters-portfolio {
    width: 100%;
    height: 100%;
}

.masters-portfolio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.slideshow .masters-portfolio {
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slideshow .masters-portfolio.active {
    opacity: 1;
    position: relative;
}

.masters-portfolio__slideshow {
    position: relative;
    height: 100%;
}

.slideshow-indicators {
    display: flex;
    justify-content: center;
    gap: calc(8 / var(--width) * 100vw);
    position: absolute;
    bottom: calc(16 / var(--width) * 100vw);
    width: 100%;
}

.indicator-dot {
    width: calc(4 / var(--width) * 100vw);
    height: calc(4 / var(--width) * 100vw);
    border-radius: calc(8 / var(--width) * 100vw);
    background-color: rgba(0, 0, 0, 0.2);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator-dot.active {
    background-color: var(--Black);
    width: calc(16 / var(--width) * 100vw);
}


.program-main {
    padding: 0 calc(24 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(80 / var(--width) * 100vw);
}

.program-overview {
    padding: 0 calc(320 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
}

.page-title__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.page-title {
    font-size: calc(48 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 150%;
    overflow: hidden;
}

.title-center {
    align-items: center;
}

.page-title .letter {
    display: inline-block;
    line-height: 100%;
}

.program-overview__txt__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.program-overview__txt__wrapper p {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 230%;
}

.program-features--2col__wrapper {
    display: flex;
    align-items: center;
}

.program-features--1col__wrapper {
    padding: 0 calc(320 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.program-img__outer {
    flex: 1;
    width: 100%;
    height: 100%;
}

.program-img__outer img {
    width: 100%;
    height: 100%;
}

.program-features--2col__right {
    flex: 1;
}

.program-features__right__inner {
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
    padding: calc(64 / var(--width) * 100vw);
}

.program-features__txt {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.program-features-title {
    font-size: calc(32 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.program-features-title__small {
    font-size: calc(24 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.program-features p {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 230%;
}

.program-features__ul {
    border: solid calc(1 / var(--width) * 100vw) var(--gray50);
    padding: calc(24 / var(--width) * 100vw) calc(32 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) calc(50 / var(--width) * 100vw);
}

.program-features__ul li {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 230%;
    list-style-type: disc;
}

.program-features--img .program-img__outer {
    padding: 0 calc(320 / var(--width) * 100vw);
    width: 100%;
    overflow: hidden;
}

.program-features--img .program-img__outer img {
    aspect-ratio: 3/2;
    object-fit: cover;
}

.course-outline {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 calc(160 / var(--width) * 100vw);
    gap: calc(64 / var(--width) * 100vw);
}

.info-table {
    width: 100%;
}

.info-table {
    border-spacing: 0 calc(1 / var(--width) * 100vw);
    border-collapse: collapse;
}

.info-table th {
    width: calc(200 / var(--width) * 100vw);
    background-color: var(--Black);
    color: var(--white);
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    padding: calc(8 / var(--width) * 100vw) calc(16 / var(--width) * 100vw);
    border-bottom: calc(1 / var(--width) * 100vw) solid var(--white);
}


.info-table td {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    padding: calc(16 / var(--width) * 100vw) calc(32 / var(--width) * 100vw);
    display: flex;
    align-items: center;
    gap: calc(32 / var(--width) * 100vw);
    background: var(--white);
    border-bottom: calc(1 / var(--width) * 100vw) solid #CCCCCC;
}

.info-table td .text-small {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    padding-left: calc(4 / var(--width) * 100vw);
}

.info-table tr:last-child th,
.info-table tr:last-child td {
    border: none;
}

.open-campaign__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(8 / var(--width) * 100vw);
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-m);
}

.open-campaign {
    text-decoration: line-through;
    font-size: calc(14 / var(--width) * 100vw);
}

.outline-title {
    font-size: calc(24 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    text-align: center;
}

.day-title {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    width: calc(100 / var(--width) * 100vw);
}

.day {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    width: calc(240 / var(--width) * 100vw);
}


.schedule {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.schedule__unit {
    display: flex;
    gap: calc(32 / var(--width) * 100vw);
    padding: calc(32 / var(--width) * 100vw) 0;
    border-bottom: solid calc(1 / var(--width) * 100vw) var(--gray50);
    align-items: center;
}

.schedule__unit:first-of-type {
    padding: 0 0 calc(32 / var(--width) * 100vw) 0;
}


.schedule-title {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    flex: 1;
}

.requirements {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
}

.requirements p {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.program-terms__ul {
    padding: calc(24 / var(--width) * 100vw) calc(32 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) calc(50 / var(--width) * 100vw);
}

.program-terms__ul li {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 230%;
    list-style-type: disc;
}

.program-note__ul {
    border: solid calc(1 / var(--width) * 100vw) var(--gray50);
    padding: calc(24 / var(--width) * 100vw) calc(32 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) calc(50 / var(--width) * 100vw);
}

.program-note__ul li {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 230%;
    list-style-type: disc;
}

.apply {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 / var(--width) * 100vw);
}

.apply .page-title__wrapper {
    align-items: center;
}

.apply p {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    text-align: center;
}

.apply-btn {
    padding: calc(16 / var(--width) * 100vw) calc(48 / var(--width) * 100vw);
    border: solid calc(1 / var(--width) * 100vw) var(--Black);
    border-radius: calc(60 / var(--width) * 100vw);
    margin-top: calc(16 / var(--width) * 100vw);
    font-size: calc(20 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    width: fit-content;
    transition: background-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.apply-btn:hover {
    background-color: var(--Black);
    color: var(--white);
}

@media (max-width: 1023px) {
    .project-hero {
        height: calc(750 / var(--width) * 100vw);
    }

    .masters-profile {
        flex-direction: column;
    }

    .masters-portfolio__wrapper {
        width: 100%;
        aspect-ratio: 1/1;
        height: auto;
    }

    .program-overview {
        padding: 0;
    }

    .program-features__right__inner {
        padding: calc(24 / var(--width) * 100vw);
        gap: calc(32 / var(--width) * 100vw);
    }

    .program-features--1col__wrapper {
        padding: 0;
    }

    .program-features--img .program-img__outer {
        padding: 0;
    }

    .program-features--img .program-img__outer img {
        width: 100%;
    }

    .course-outline {
        padding: 0 calc(24 / var(--width) * 100vw);
    }
}

@media (max-width: 430px) {
    .page-container .project-title__wrapper {
        padding: calc(80 / var(--width) * 100vw) calc(24 / var(--width) * 100vw);
    }

    .page-container .status{
            width: calc(120 / var(--width) * 100vw);
    }

    .page-container .project-title {
        font-size: calc(32 / var(--width) * 100vw);
    }

    .scroll-txt {
        right: auto;
        left: calc(24 / var(--width) * 100vw);
        bottom: calc(24 / var(--width) * 100vw);
    }

    .masters-profile__wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-title {
        font-size: calc(32 / var(--width) * 100vw);
    }

    .program-features--2col__wrapper {
        flex-direction: column;
    }

    .program-features__right__inner {
        padding: calc(24 / var(--width) * 100vw) 0;
    }

    .course-outline {
        padding: 0;
    }

    .info-table tr {
        display: flex;
        flex-direction: column;
    }

    .info-table th {
        width: 100%;
        padding: calc(16 / var(--width) * 100vw) calc(16 / var(--width) * 100vw);
    }

    .info-table td {
        justify-content: center;
        flex-direction: column;
        text-align: center;
        gap: calc(16 / var(--width) * 100vw);
    }

    .schedule__unit {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(16 / var(--width) * 100vw);
    }

    .apply {
        padding: 0 calc(24 / var(--width) * 100vw);
    }

    .apply-btn {
        width: 100%;
        text-align: center;
    }

}

.member-main {
    padding: calc(320 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
}

.member__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(128 / var(--width) * 100vw);
    padding-left: calc(160 / var(--width) * 100vw);
}

.member-layout__wrapper {
    display: flex;
    gap: calc(128 / var(--width) * 100vw);
    overflow: visible;
    position: relative;
}

.sidemenu {
    position: sticky;
    top: calc(128 / var(--width) * 100vw);
    height: fit-content;
    flex: 0 0 auto;
}

.sidemenu__ul {
    position: sticky;
    top: calc(128 / var(--width) * 100vw);
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
    flex: 0 0 auto;
}


.sidemenu__outer {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
    flex: 0 0 auto;
}

.sidemenu a {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 150%;
    color: var(--Black);
    display: flex;
    gap: calc(16 / var(--width) * 100vw);
    align-items: center;
    justify-content: space-between;
}

.sidemenu__list {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 150%;
    color: var(--Black);
    display: flex;
    gap: calc(16 / var(--width) * 100vw);
    align-items: center;
    justify-content: space-between;
}

.sidemenu a:not(.active) {
    color: var(--gray50);
}

.sidemenu__list:not(.active) {
    color: var(--gray50);
}


.sidemenu a::after {
    content: "";
    width: calc(8 / var(--width) * 100vw);
    height: calc(8 / var(--width) * 100vw);
    background-color: var(--Black);
    border-radius: 50%;
    display: flex;
    visibility: visible;
}

.sidemenu__list::after {
    content: "";
    width: calc(8 / var(--width) * 100vw);
    height: calc(8 / var(--width) * 100vw);
    background-color: var(--Black);
    border-radius: 50%;
    display: flex;
    visibility: visible;
}

.sidemenu a:not(.active)::after {
    visibility: hidden;
}

.sidemenu__list:not(.active)::after {
    visibility: hidden;
}

.member-layout__outer {
    display: flex;
    flex-direction: column;
    gap: calc(80 / var(--width) * 100vw);
}

.masters,
.members {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(24 / var(--width) * 100vw);
    row-gap: calc(48 / var(--width) * 100vw);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.members {
    grid-template-columns: repeat(4, 1fr);
}

.masters__unit {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--width) * 100vw);
    width: 100%;
    box-sizing: border-box;
}

.masters-img__wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.masters-name__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(8 / var(--width) * 100vw);
}

.member-main .masters-role__wrapper {
    flex-direction: column;
    gap: 0;
}

.member-main .masters-role:not(:first-child)::before {
    content: none;
}

.member-main .masters-name {
    font-size: calc(20 / var(--width) * 100vw);
}



@media (max-width: 1023px) {
    .member__wrapper {
        padding-left: 0;
        gap: calc(64 / var(--width) * 100vw);
    }

    .masters {
        grid-template-columns: repeat(2, 1fr);
    }

    .members {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 430px) {
    .member-main {
        padding: calc(240 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
    }

    .member-layout__wrapper {
        flex-direction: column;
        gap: calc(32 / var(--width) * 100vw);
    }

    .sidemenu,
    .sidemenu__ul {
        flex-direction: row;
        gap: calc(32 / var(--width) * 100vw);
        z-index: 10;
        /* background-color: var(--BG); */
        top: 0;
        width: 100%;
        position: relative;

    }

    .sidemenu__ul {
        flex-direction: column;
        gap: 0;
    }

    .sidemenu__outer {
        gap: 0;
    }

    .sidemenu a,
    .sidemenu__list {
        padding: calc(12 / var(--width) * 100vw) 0;
        border-bottom: calc(1 / var(--width) * 100vw) solid #CCCCCC;
    }

    .masters {
        grid-template-columns: repeat(1, 1fr);
    }

    .members {
        grid-template-columns: repeat(1, 1fr);
    }


}

.faq-main {
    padding: calc(320 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
}

.page-faq-contents__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.faq__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(128 / var(--width) * 100vw);
    padding-left: calc(160 / var(--width) * 100vw);
}


.faq-main .faq__unit {
    background-color: var(--white);
    padding: calc(64 / var(--width) * 100vw);
}

.faq-main .faq-contents__wrapper {
    gap: calc(32 / var(--width) * 100vw);
    padding: 0;
}

.faq-main .faq-contents__title {
    font-size: calc(24 / var(--width) * 100vw);
}

.faq-main .faq-item {
    padding-bottom: calc(32 / var(--width) * 100vw);
    border-bottom: calc(1 / var(--width) * 100vw) dashed #CCCCCC;
}

@media (max-width: 1023px) {
    .faq__wrapper {
        padding-left: 0;
        gap: calc(64 / var(--width) * 100vw);
    }
}

@media (max-width: 430px) {
    .faq-main {
        padding: calc(240 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
    }

    .faq-main .sidemenu {
        flex-direction: column;
        gap: calc(16 / var(--width) * 100vw);
    }

    .faq-main .faq__unit {
        padding: calc(32 / var(--width) * 100vw) calc(24 / var(--width) * 100vw);
    }
}

.apply-main {
    padding: calc(320 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
}

.apply__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(128 / var(--width) * 100vw);
    padding-left: calc(160 / var(--width) * 100vw);
}

.apply-desc__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(8 / var(--width) * 100vw);
}

.apply-desc__wrapper p {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.apply-title {
    font-size: calc(24 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.apply-layout__wrapper {
    display: flex;
    gap: calc(230 / var(--width) * 100vw);
}

.contact-form {
    width: calc(800 / var(--width) * 100vw);
}

.wpcf7 {
    width: 100%;
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(80 / var(--width) * 100vw);
}

.wpcf7-form p {
    width: 100%;
}

.form-list {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
    width: 100%;
}

.form-row {
    display: flex;
    gap: calc(32 / var(--width) * 100vw);
    align-items: center;
}

.confirm-list.form-list {
    gap: 0;
}

.confirm-list .form-row {
    padding: calc(32 / var(--width) * 100vw) 0;
    border-bottom: calc(1 / var(--width) * 100vw) solid #cccccc;
}


.form-label {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    flex: 0 0 auto;
    width: calc(150 / var(--width) * 100vw);
}

.form-value {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    width: 100%;
    display: flex;
    gap: calc(16 / var(--width) * 100vw);
    align-items: center;
}

.form-value.form-noinput p {
    display: block;
}

.form-value.form-noinput p span {
    display: inline;
}

.form-value.form-noinput p .course-teacher {
    margin-left: calc(16 / var(--width) * 100vw);
    display: inline-block;
}

.form-mail,
.form-portfolio {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8 / var(--width) * 100vw);
}

.form-mail p,
.form-portfolio p {
    font-size: calc(14 / var(--width) * 100vw);
    font-weight: var(--fw-R);
}

.form-value input,
.form-value select {
    padding: calc(16 / var(--width) * 100vw) calc(32 / var(--width) * 100vw);
    width: 100%;
    border: calc(2 / var(--width) * 100vw) solid #cccccc;
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    background-color: var(--white);
}

.form-value textarea {
    padding: calc(16 / var(--width) * 100vw) calc(32 / var(--width) * 100vw);
    width: 100%;
    border: calc(2 / var(--width) * 100vw) solid #cccccc;
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    background-color: var(--white);
    height: calc(4.6 * 1.8 * 16 / var(--width) * 100vw);
    resize: vertical; 
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border: calc(2 / var(--width) * 100vw) solid var(--Black);
}

input:-webkit-autofill,
textarea:-webkit-autofill {
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    color: #333 !important;
}

input::placeholder,
textarea::placeholder {
    color: #b1b1b1;
}

.noinput {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

select {
    appearance: none;
    /* Chrome, Safari */
    -webkit-appearance: none;
    /* Safari */
    -moz-appearance: none;
    /* Firefox */
    background: url('/assets/img/down.svg') no-repeat calc(100% - calc(16 / var(--width) * 100vw)) center;
    background-size: calc(24 / var(--width) * 100vw);
}

.required-mark {
    color: var(--red);
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
}


.agreement-label {
    display: flex;
}

input[type="checkbox"] {
    display: none;
}

.wpcf7-acceptance .wpcf7-list-item-label,
.checkbox-group .wpcf7-list-item-label {
    position: relative;
    padding-left: calc(32 / var(--width) * 100vw);
    cursor: pointer;
    user-select: none;
    display: inline-block;
    font-size: calc(14 / var(--width) * 100vw);
    white-space: nowrap;
}

.wpcf7-list-item-label a {
    text-decoration: underline;
}

.checkbox-group span {
    font-size: calc(16 / var(--width) * 100vw);
}

.wpcf7-acceptance .wpcf7-list-item-label::before,
.checkbox-group .wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(4 / var(--width) * 100vw);
    width: calc(20 / var(--width) * 100vw);
    height: calc(20 / var(--width) * 100vw);
    border: calc(1 / var(--width) * 100vw) solid #666;
    background: var(--white);
}

.grecaptcha-badge {
    display: none;
}

label {
    display: flex;
    flex: 0 0 auto;
}

input[type="checkbox"]:checked+.wpcf7-list-item-label::before {
    background: var(--Black);
    border-color: var(--Black);
}

.wpcf7-acceptance .wpcf7-list-item-label::after,
.checkbox-group .wpcf7-list-item-label::after {
    content: "";
    display: none;
    position: absolute;
    left: calc(7 / var(--width) * 100vw);
    top: calc(5 / var(--width) * 100vw);
    width: calc(6 / var(--width) * 100vw);
    height: calc(12 / var(--width) * 100vw);
    border: solid var(--white);
    border-width: 0 calc(2 / var(--width) * 100vw) calc(2 / var(--width) * 100vw) 0;
    transform: rotate(45deg);
}

input[type="checkbox"]:checked+.wpcf7-list-item-label::after {
    display: block;
}

.agreement-label span a {
    text-decoration: underline;
}


.wpcf7-form-control {
    display: flex;
    flex-wrap: wrap;
    gap: calc(8 / var(--width) * 100vw);
}

.wpcf7-form-control .wpcf7-list-item {
    width: 25%;
    display: block!important;
    margin: 0!important;
    position: relative;
}

.work-type .wpcf7-list-item {
    width: 36%;
}

.wpcf7-acceptance .wpcf7-list-item {
    width: 100%;
}

/* Custom radio button styles */
.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    position: relative;
    padding-left: calc(32 / var(--width) * 100vw);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: calc(16 / var(--width) * 100vw);
}

.radio-group label span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(20 / var(--width) * 100vw);
    height: calc(20 / var(--width) * 100vw);
    border: calc(1 / var(--width) * 100vw) solid var(--Black);
    border-radius: 50%;
    background: var(--white);
}

.radio-group input[type="radio"]:checked+span::before {
    /* background-color: var(--Black); */
    border-color: var(--Black);
}

.radio-group label span::after {
    content: "";
    position: absolute;
    left: calc(5 / var(--width) * 100vw);
    top: calc(8 / var(--width) * 100vw);
    /* transform: translateY(-50%); */
    width: calc(12 / var(--width) * 100vw);
    height: calc(12 / var(--width) * 100vw);
    background-color: var(--Black);
    border-radius: 50%;
    display: none;
}

.radio-group input[type="radio"]:checked+span::after {
    display: block;
}

input[type="radio"]:focus+span::before {
    outline: none;
    border-color: var(--Black);
}

.agreement-row .form-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.agreement-row p {
    font-size: calc(14 / var(--width) * 100vw);
}

.form-submit {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
    background-color: transparent;
    padding: calc(16 / var(--width) * 100vw) calc(48 / var(--width) * 100vw);
    cursor: pointer;
    border-radius: calc(60 / var(--width) * 100vw);
    border: solid calc(1 / var(--width) * 100vw) var(--Black);
    width: calc(260 / var(--width) * 100vw);
    transition: background-color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    position: relative;
    overflow: hidden;
}

.form-submit:hover {
    background-color: var(--Black);
    color: var(--white);
}

.form-submit .wpcf7-spinner {
    display: none;
}

.form-submit .submit-btn,
.form-submit .back-btn {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    display: block!important;
}

.form-actions {
    display: flex;
    gap: calc(16 / var(--width) * 100vw);
}

.form-actions > p {
    width: initial;
}

.wpcf7-not-valid-tip {
    border: none!important;
    margin: calc(8 / var(--width) * 100vw) 0 0 0!important;
    padding: 0!important;
    color: var(--red)!important;
    font-weight: var(--fw-m)!important;
    font-size: calc(16 / var(--width) * 100vw)!important;
}

.wpcf7-response-output {
    border: none!important;
    padding: 0!important;
    margin: 0!important;
    color: var(--red)!important;
    font-weight: var(--fw-m)!important;
    font-size: calc(16 / var(--width) * 100vw)!important;
}

.complete__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(32 / var(--width) * 100vw);
}

.complete-message {
    font-size: calc(32 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.complete__wrapper p {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

@media (max-width: 1023px) {
    .apply__wrapper {
        padding-left: 0;
        gap: calc(64 / var(--width) * 100vw);
    }

    .checkbox-group label,
    .radio-group label {
        width: 100%;
    }

}

@media (max-width: 430px) {
    .apply-main {
        padding: calc(240 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
    }

    .apply-layout__wrapper {
        flex-direction: column;
        gap: calc(64 / var(--width) * 100vw);
    }

    .contact-form {
        width: 100%;
    }

    .form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(16 / var(--width) * 100vw);
    }

    .form-value input {
        padding: calc(16 / var(--width) * 100vw);
    }

    .checkbox-group .wpcf7-list-item,
    .radio-group .wpcf7-list-item {
        width: 100%;
    }

    .checkbox-group,
    .radio-group {
        gap: calc(16 / var(--width) * 100vw);
    }

    .form-actions {
        flex-direction: column-reverse;
        width: 100%;
    }

    .form-submit {
        width: 100%;
    }
}

.news-main {
    padding: calc(320 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
}

.news__wrapper {
    padding-left: calc(160 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(128 / var(--width) * 100vw);
}

.news__outer {
    display: flex;
    flex-direction: column;
    padding: 0 calc(240 / var(--width) * 100vw) 0 calc(80 / var(--width) * 100vw);
    gap: calc(64 / var(--width) * 100vw);
}

.pager {
    display: flex;
    justify-content: space-between;
}

.pager a {
    display: flex;
    font-size: calc(14 / var(--width) * 100vw);
    align-items: center;
    gap: calc(16 / var(--width) * 100vw);
}

.pager a span {
    width: calc(20 / var(--width) * 100vw);
    height: calc(20 / var(--width) * 100vw);
}

@media (max-width: 1023px) {
    .news__wrapper {
        padding-left: 0;
        gap: calc(64 / var(--width) * 100vw);
    }

    .news__outer {
        padding: 0;
    }
}

@media (max-width: 430px) {

    .news-main {
        padding: calc(240 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
    }

}

.news-detail-main {
    padding: calc(320 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
}

.news-detail__wrapper {
    padding-left: calc(160 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(80 / var(--width) * 100vw);
}

.news-detail-main .news-contents__wrapper::after {
    content: "";
    width: 100%;
    height: calc(1 / var(--width) * 100vw);
    background-color: #cccccc;
    margin-top: calc(32 / var(--width) * 100vw);
}

.news-detail-main .news-title {
    padding: 0 calc(240 / var(--width) * 100vw) 0 calc(80 / var(--width) * 100vw);
    flex-direction: column;
    align-items: flex-start;
    gap: calc(32 / var(--width) * 100vw);
}

.news-detail-main .news-title h1 {
    line-height: 180%;
    font-size: calc(32 / var(--width) * 100vw);
    font-weight: var(--fw-m);
}

.news-detail-main .news-contents__wrapper {
    padding: 0 calc(240 / var(--width) * 100vw) 0 calc(80 / var(--width) * 100vw);
    gap: calc(32 / var(--width) * 100vw);

}

.news-detail-main .news-contents__wrapper h2 {
    font-size: calc(24 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.news-detail-main .news-contents__wrapper p {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 230%;
}

.news-detail-main .news-contents__wrapper p a {
    text-decoration: underline;
    transition: all 0.5s ease;
}

.news-detail-main .news-contents__wrapper p a:hover {
    color: var(--gray50);
}

.back-btn {
    padding: 0 calc(240 / var(--width) * 100vw) 0 calc(240 / var(--width) * 100vw);
    display: flex;
    align-items: center;
    gap: calc(16 / var(--width) * 100vw);
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.news-detail-back__btn {
    width: calc(32 / var(--width) * 100vw);
    height: calc(32 / var(--width) * 100vw);
    border: solid calc(1 / var(--width) * 100vw) var(--Black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

@media (max-width: 1023px) {
    .news-detail__wrapper {
        padding-left: 0;
    }

    .news-detail-main .news-title {
        padding: 0 calc(80 / var(--width) * 100vw) 0 calc(80 / var(--width) * 100vw);
    }

    .news-detail-main .news-contents__wrapper {
        padding: 0 calc(80 / var(--width) * 100vw) 0 calc(80 / var(--width) * 100vw);
    }

    .back-btn {
        padding: 0 calc(80 / var(--width) * 100vw) 0 calc(80 / var(--width) * 100vw);
    }

}

@media (max-width: 430px) {
    .news-detail-main .news-title {
        padding: 0;
    }

    .news-detail-main .news-contents__wrapper {
        padding: 0;
    }

    .back-btn {
        padding: 0;
    }
}

.privacypolicy-main,
.course-terms-main,
.refundpolicy-main,
.law-main {
    padding: calc(320 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
}

.privacypolicy__wrapper,
.course-terms__wrapper,
.refundpolicy__wrapper,
.law__wrapper {
    padding: 0 0 0 calc(160 / var(--width) * 100vw);
    display: flex;
    flex-direction: column;
    gap: calc(128 / var(--width) * 100vw);
}

.privacypolicy-contents__wrapper,
.course-terms-contents__wrapper,
.refundpolicy-contents__wrapper,
.law-contents__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
    padding: 0 calc(240 / var(--width) * 100vw) 0 calc(80 / var(--width) * 100vw);
}

.privacypolicy-contents__unit,
.course-terms-contents__unit,
.refundpolicy-contents__unit {
    display: flex;
    flex-direction: column;
    gap: calc(8 / var(--width) * 100vw);
}

.privacypolicy-contents__wrapper p,
.privacypolicy-contents__wrapper li,
.course-terms-contents__wrapper p,
.course-terms-contents__wrapper li,
.refundpolicy-contents__wrapper p,
.refundpolicy-contents__wrapper li,
.law-contents__wrapper p {
    font-size: calc(16 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    line-height: 180%;
}

.refundpolicy-contents__unit p:not(:last-child)::before {
    content: '▪️';
    margin-right: calc(8 / var(--width) * 100vw);
}

.privacypolicy-contents__wrapper ul,
.course-terms-contents__wrapper ul,
.refundpolicy-contents__wrapper ul {
    list-style-position: outside;
    margin-left: calc(16 / var(--width) * 100vw);
}

.privacypolicy-contents__wrapper li,
.refundpolicy-contents__wrapper li {
    list-style-type: disc;
    margin-left: calc(16 / var(--width) * 100vw);
    padding-left: calc(8 / var(--width) * 100vw);
}

.course-terms-contents__wrapper li {
    list-style-type: decimal;
    margin-left: calc(16 / var(--width) * 100vw);
    padding-left: calc(8 / var(--width) * 100vw);
}

.course-terms-contents__wrapper li li {
    list-style-type: lower-alpha;
}

.course-terms-contents__wrapper .disc li {
    list-style-type: disc;
}

.contac__area {
    padding: calc(16 / var(--width) * 100vw);
    border: solid calc(1 / var(--width) * 100vw);
    width: fit-content;
}

.law-contents__wrapper ul {
    display: flex;
    flex-direction: column;
}

.law-contents__wrapper li {
    padding: calc(32 / var(--width) * 100vw) 0;
    border-bottom: calc(1 / var(--width) * 100vw) solid #CCCCCC;
    display: flex;
}

.law-contents__wrapper p:first-of-type {
    width: calc(300 / var(--width) * 100vw);
}

.law-contents__wrapper p:last-of-type {
    flex: 1;
}

@media (max-width: 1023px) {

    .privacypolicy__wrapper,
    .course-terms__wrapper,
    .refundpolicy__wrapper,
    .law__wrapper {
        padding: 0;
        gap: calc(64 / var(--width) * 100vw);
    }

    .privacypolicy-contents__wrapper,
    .course-terms-contents__wrapper,
    .refundpolicy-contents__wrapper,
    .law-contents__wrapper {
        padding: 0;
    }
}

@media (max-width: 430px) {

    .privacypolicy-main,
    .course-terms-main,
    .refundpolicy-main,
    .law-main {
        padding: calc(240 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
    }

    .law-contents__wrapper li {
        flex-direction: column;
        gap: calc(16 / var(--width) * 100vw);
    }
}

.notFound-main {
    padding: calc(320 / var(--width) * 100vw) calc(24 / var(--width) * 100vw) 0 calc(24 / var(--width) * 100vw);
}

.notFound__wrapper {
    display: flex;
    flex-direction: column;
    gap: calc(64 / var(--width) * 100vw);
    padding: 0 calc(240 / var(--width) * 100vw);
    align-items: center;
}

.notFound-contents__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(64 / var(--width) * 100vw);
}

.notFound__wrapper .page-title {
    font-size: calc(64 / var(--width) * 100vw);
}

.notFound__wrapper p {
    font-size: calc(20 / var(--width) * 100vw);
    font-weight: var(--fw-m);
    text-align: center;
    line-height: 180%;
}

@media (max-width: 1023px) {
    .notFound__wrapper {
        padding: 0;
    }
}

@media (max-width: 430px) {
    .notFound__wrapper .page-title {
        font-size: calc(36 / var(--width) * 100vw);
    }

    .notFound__wrapper p {
        font-size: calc(16 / var(--width) * 100vw);
    }
}