@charset "utf-8";

.mv__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
    max-width: 1320px;
}

.mv__text {
    width: 48%;

    padding-top: 40px;
}

.mv__title {
    font-size: 82px;
    font-weight: 700;
    line-height: 1.36;
    color: #ec5a11;
}

.mv__title-sub {
    display: block;
    font-size: 54px;
    font-weight: 100;
    line-height: 1.22;
    letter-spacing: .06em;
}

.mv__lead {
    margin-top: 10px;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.275;
    letter-spacing: .05em;
}

.mv__photo {
    display: flex;
    justify-content: flex-end;
    width: 52%;
    margin-top: min(290px, 25vh);
}

.mv__photo img {
    width: min(100%, 48vh * 1228 / 764);
    height: auto;
}

.concept__inner {
    width: 90%;
    max-width: 1320px;
}

.concept__label {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.4;
    color: #ec5a11;
}

.concept__label--01 {
    font-size: 25px;
    font-weight: 700;
    line-height: 2.04;
    letter-spacing: .05em;
}

.concept__text {
    margin-top: 8px;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.48;
}

.concept__text--line {
    margin-top: 13px;
    padding-left: 34px;
    border-left: 1px solid #ec5a11;
    font-size: 26px;
    line-height: 1.154;
    letter-spacing: .07em;
}

.concept__text--right {
    text-align: right;
    white-space: nowrap;
}

.concept__item--02 {
    width: fit-content;
    margin-top: 112px;
    margin-inline: auto;
}

.concept__item--03 {
    width: fit-content;
    margin-top: 91px;
    margin-left: auto;
}

.concept__line {
    margin-top: 70px;
    margin-left: 8.125%;
    border-top: 1px solid #ec5a11;
}

.works {
    padding-top: 100px;
}

.works__title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.167;
    color: #000;
}

.works__title-en {
    display: block;
    font-weight: 300;
    color: #ec5a11;
}

.works__list {
    margin-top: 80px;
}

/* 右の説明（.works__body）は、どの画面幅でも左の画像の縦中央にそろえる。
   固定の padding-top で下げると画像の高さが変わる幅でずれるので、align-items で合わせている */
.works__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.works__item+.works__item {
    margin-top: 130px;
}

.works__figure {
    position: relative;
    width: 54.23%;
}

.works__img--pc {
    width: 93.43%;
    margin-left: 6.57%;
}

.works__screen {
    position: absolute;
    top: 8.09%;
    left: 17.13%;
    width: 72.02%;

    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.works__img--sp {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 27.83%;
}

.works__figure--single {
    width: 54.73%;
}

.works__body {
    width: 40.38%;
    margin-right: 4.73%;
}

.works__name {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #2f2f2f;
}

.works__category {
    margin-top:20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #a0a0a0;
}

.works__purpose,
.works__role {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #ec5a11;
}

.works__purpose {
    margin-top: 5px;
}

.works__role {
    margin-top: 5px;
}

.works__button {
    margin-left: auto;
    margin-top: 20px;
}

.graphic {
    padding-top: 100px;
}

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

.graphic__row--head {
    align-items: flex-start;
}

.graphic__row--body {
    align-items: flex-end;
    margin-top: -42px;
    padding-bottom: 34px;
}

.graphic__item--banner {
    width: 53.15%;
}

.graphic__item--poster {
    width: 44.94%;
}

.graphic__item--event {
    position: relative;
    width: 48.76%;
}

.graphic__item--card {
    width: 49.67%;
}

.graphic__item img {
    width: 100%;
}

.graphic__notes {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 6px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: #a0a0a0;
}

.skill {
    padding-top: 180px;
}

/* 見出しと Adobe Skills へのボタンを1行に。ボタンは見出しのすぐ右（左寄せ） */
.skill__header {
    display: flex;
    align-items: center;
    gap: 40px;
}

.skill__title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.167;
    color: #000;
}

.skill__title-en {
    display: block;
    font-weight: 300;
    color: #ec5a11;
}

/* ボタンは .button の 140×62 のまま。見出しに押されて潰れないようにする */
.skill__button {
    flex-shrink: 0;
}

.skill__body {
    margin-top: 50px;
}

/* PC では Design / Coding / Other を横並び、SP では縦積み。
   中間幅で3つ入りきらないときは折り返す */
.skill__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 32px;
}

.skill__head {
    display: flex;
    align-items: center;
}

.skill__head-text {
    width: 100px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    color: #2f2f2f;
}

.skill__head::after {
    content: "";
    width: 184px;
    height: 1px;
    background-color: #2f2f2f;
}

.skill__row {
    display: flex;
    align-items: center;
    gap: 42px;
    margin-top: 34px;
}

.skill__row+.skill__row {
    margin-top: 16px;
}

.skill__row--other {
    align-items: flex-start;
    gap: 28px;
}

.skill__icons {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 18px;
}

.skill__icons img {
    width: 40px;
}

.skill__icons--large {
    gap: 6px;
}

.skill__icons--large li:last-child img {
    width: 68px;
}

.skill__icons-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill__note {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.36;
    white-space: nowrap;
}

.skill__text-list {
    flex-shrink: 0;
    font-size: 28px;
    line-height: 1.42;
    white-space: nowrap;
}

.skill__text-list li::before {
    content: "・";
}

/* 証明書3枚をリストの下に横並び。1枚の幅は従来と同じ 344px（1440px 時）で、
   狭い画面では縮む */
.skill__certs {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 100px;
}

.skill__cert {
    flex: 0 1 344px;
}

.next {
    padding-top: 180px;
}

@media (max-width: 1429px) {
    .mv__title {
        font-size: 55px;
    }

    .mv__title-sub {
        font-size: 38px;
    }

    .mv__lead {
        font-size: 26px;
    }

    .concept__text {
        font-size: 22px;
    }

    .concept__label {
        font-size: 24px;
    }
}

@media (max-width: 1140px) {
    .graphic__row--body {
        margin-top: -30px;
    }

    .skill__row {
        gap: 24px;
    }

    .skill__row--other {
        gap: 20px;
    }
}

@media (max-width: 1014px) {
    .mv__title {
        font-size: 38px;
    }

    .mv__title-sub {
        font-size: 28px;
    }

    .mv__lead {
        font-size: 20px;
    }

    .concept__text {
        font-size: 19px;
    }

    .concept__label {
        font-size: 20px;
    }

    .graphic__row--body {
        margin-top: -18px;
    }

    .skill__row {
        gap: 16px;
    }

    .skill__row--other {
        gap: 14px;
    }

    .skill__head-text {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .mv__inner {
        display: block;
    }

    .mv__text {
        width: auto;
        padding-top: 110px;
    }

    .mv__title {
        font-size: 40px;
    }

    .mv__title-sub {
        font-size: 26px;
        letter-spacing: .08em;
    }

    .mv__lead {
        margin-top: 16px;
        font-size: 20px;
        line-height: 1.6;
    }

    .mv__photo {
        width: auto;
        margin-top: 40px;
    }

    .mv__photo img {
        width: 100%;
    }

    .concept {
        padding-top: 60px;
    }

    .concept__label {
        font-size: 16px;
    }

    .concept__label--01 {
        font-size: 15px;
        line-height: 1.6;
    }

    .concept__text {
        margin-top: 6px;
        font-size: 16px;
        line-height: 1.8;
    }

    .concept__text--line {
        margin-top: 10px;
        padding-left: 16px;
        font-size: 16px;
        line-height: 1.8;
    }

    .concept__item--02,
    .concept__item--03 {
        width: auto;
        margin-top: 48px;
        margin-inline: 0;
    }

    .concept__text--right {
        text-align: left;
        white-space: normal;
    }

    .concept__line {
        margin-top: 48px;
        margin-left: 7%;
    }

    .works {
        padding-top: 60px;
    }

    .works__title,
    .skill__title {
        font-size: 22px;
        line-height: 1.5;
    }

    .works__list {
        margin-top: 40px;
    }

    .works__item {
        display: block;
    }

    .works__item+.works__item {
        margin-top: 80px;
    }

    .works__figure,
    .works__figure--single {
        width: auto;
    }

    .works__body {
        width: auto;
        margin-top: 24px;
        margin-right: 0;
        padding-top: 0;
    }

    .works__name {
        font-size: 18px;
    }

    .works__category {
        margin-top: 10px;
        font-size: 14px;
    }

    .works__purpose,
    .works__role {
        font-size: 14px;
    }

    .works__purpose {
        margin-top: 8px;
    }

    .works__button {
        margin-top: 24px;
    }

    .graphic {
        padding-top: 80px;
    }

    .graphic__row {
        display: block;
    }

    .graphic__row--body {
        margin-top: 24px;
        padding-bottom: 0;
    }

    .graphic__item--banner,
    .graphic__item--poster,
    .graphic__item--event,
    .graphic__item--card {
        width: auto;
    }

    .graphic__item+.graphic__item {
        margin-top: 24px;
    }

    .graphic__notes {
        position: static;
        margin-top: 8px;
        font-size: 13px;
    }

    .skill {
        padding-top: 100px;
    }

    .skill__body {
        display: block;
        margin-top: 40px;
    }

    .skill__list {
        display: block;
    }

    .skill__group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 14px;
    }

    .skill__group+.skill__group {
        margin-top: 28px;
    }

    .skill__row {
        display: contents;
    }

    .skill__head {
        width: 100%;
    }

    .skill__head::after {
        flex: 1;
        width: auto;
    }

    .skill__head-text {
        width: 100px;
        font-size: 18px;
    }

    .skill__icons {
        gap: 14px;
    }

    .skill__icons img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    .skill__icons img[src*="icon-js"],
    .skill__icons img[src*="icon-cursor"] {
        width: 34px;
        height: 34px;
    }

    .skill__icons--large {
        gap: 0;
    }

    .skill__icons--large li:last-child img {
        width: 60px;
        height: 60px;
    }

    .skill__icons-block {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .skill__note,
    .skill__text-list {
        width: 100%;
    }

    .skill__text-list--inline {
        width: auto;
        gap: 12px;
    }

    .skill__note {
        font-size: 13px;
    }

    .skill__note br {
        display: none;
    }

    .skill__text-list {
        display: flex;
        gap: 8px;
        font-size: 16px;
    }

    /* SP では証明書を縦並び。縦方向だと PC の flex-basis(344px) が
       高さに効いてしまうため flex: none で解除し、幅は % で指定する */
    .skill__certs {
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin-top: 48px;
    }

    .skill__cert {
        flex: none;
        width: 70%;
    }

    .next {
        padding-top: 100px;
    }
}