.project {
    line-height: 1;
    display: flex;
    align-items: center;
}

.project__text__outer {
    width: 54%;
    margin-top: -3.43em;
}

.project__text {
    width: 76%;
    margin: 0 auto;
}

.project__img {
    width: 56%;
    text-align: center;
}

.project__img img {
    width: 80%;
    margin: clamp(60px, 7vw, 135px) 0;
    border: 1px solid #A9A7A7;
}

.workpage__title {
    font-size: clamp(11px, 0.28vw + 9.95px, 14px);
    letter-spacing: .05em;
    color: #4480A5;
}

.workpage__title span {
    letter-spacing: 0;
}

.workpage__title-left {
    margin-right: .35em;
}

.workpage__title-right {
    margin-left: .35em;
}

.project__subtitle {
    font-size: clamp(16px, 0.37vw + 14.6px, 20px);
    letter-spacing: .08em;
    width: 100%;
    padding: clamp(28px, 0.84vw + 24.85px, 40px) 0 clamp(32px, 0.75vw + 29.2px, 40px);
    border-bottom: 1px solid #A9A7A7;
    margin-bottom: clamp(32px, 0.75vw + 29.19px, 40px);
}

.project__link {
    padding-bottom: 2px;
    border-bottom: 1px solid #A9A7A7;
    transition: 0.3s;
}

.project__link:hover {
    color: #4480A5;
}

.project__row {
    display: flex;
    gap: 2em;
}

.project__row+.project__row {
    margin-top: 1.56em;
}


.project__label {
    font-size: clamp(14px, 0.09vw + 13.66px, 15px);
    font-weight: 600;
    width: 6.5em;
}

.project__value-en {
    font-size: clamp(15px, 0.18vw + 14.32px, 17px);
}

.project__period-item {
    display: flex;
    gap: .6em;
}

.project__period-item+.project__period-item {
    margin-top: .93em;
}

.parentheses {
    letter-spacing: -.4em;
}

@media screen and (max-width:1400px) {
    .project__text__outer {
        margin-top: 0;
    }
}

@media screen and (max-width:1180px) {
    .project {
        flex-direction: column-reverse;
        margin: 0 auto;
    }

    .project__img-sp__line-left {
        border-left: none;
    }

    .project__text__outer {
        width: 100%;
    }

    .project__text {
        padding: 0 0 clamp(60px, 7vw, 135px);
        width: 89%;
    }

    .project__img {
        width: 100%;
    }

    .project__img img {
        width: 89%;
    }
}

@media screen and (max-width:700px) {
    .project__link {
        border-bottom: .6px solid #A9A7A7;
    }

    .project__img img {
        border: .6px solid #A9A7A7;
    }

    .project__subtitle {
        border-bottom: .6px solid #A9A7A7;
    }
}

@media screen and (max-width:460px) {
    .role__value {
        display: flex;
        margin-top: 0.5em;
    }
}

/***************************************
ディティール
****************************************/
.detail__inner {
    padding: 4.86vw 0 5.31em;
    width: 94%;
}

.detail__title {
    padding-bottom: 1.8em;
    padding-left: 1.87em;
}

.detail__box {
    display: flex;
    margin: 0 auto;
    padding: clamp(30px, 1.88vw, 50px) 1.87em;
    border-bottom: 1px solid #A9A7A7;
    line-height: 1.8;
}


.detail__box-last {
    border-bottom: none;
}

.detail__label {
    width: 14%;
    font-weight: 600;
}

.detail__text {
    width: 86%;
}

.detail-color__outer {
    width: 86%;
}

/* english garden */
.detail__sub-label {
    margin: 0 0 2.5em;
}

/* カラー（北海道物産展バナー） */
.detail-color__text {
    width: 100%;
}

.detail-color__inner {
    display: flex;
    margin-top: clamp(10px, .93vw + 6.5px, 20px);
}


.detail__color {
    height: clamp(30px, 1.87vw + 6.5px, 50px);
    position: relative;
}

.color__nv {
    width: 65%;
    background-color: #013B7B;
}

.color__bl {
    width: 20%;
    background-color: #9ADCFE;
}

.color__rd {
    width: 15%;
    background-color: #E65F49;
}

.detail__color::before {
    position: absolute;
    color: #FFFFFF;
    font-size: clamp(10px, .18vw + 9.3px, 12px);
    bottom: .25em;
    left: .5em;
}

.color__nv::before {
    content: "#013B7B";

}

.color__bl::before {
    content: "#9ADCFE";
    color: #5F5C71;
}

.color__rd::before {
    content: "#E65F49";
}

/* カラー（WEBデザインスクールアイキャッチバナー） */
.color__gy {
    width: 50%;
    background-color: #D0CCCB;
}

.color__gr {
    width: 25%;
    background-color: #DEF856;
}

.color__or {
    width: 25%;
    background-color: #FE7A25;
}

.color__gy::before {
    content: "#D0CCCB";
    color: #5F5C71;
}

.color__gr::before {
    content: "#DEF856";
    color: #5F5C71;
}

.color__or::before {
    content: "#FE7A25";
    color: #FFFFFF;
}

/* カラー（野菜定期便LPサイト） */
.color-lp__gr {
    width: 65%;
    background-color: #2BA310;
}

.color-lp__or {
    width: 20%;
    background-color: #E37300;
}

.color-lp__rd {
    width: 15%;
    background-color: #BD0202;
}

.color-lp__gr::before {
    content: "#2BA310";
    color: #FFFFFF;
}

.color-lp__or::before {
    content: "#E37300";
    color: #FFFFFF;
}

.color-lp__rd::before {
    content: "#BD0202";
    color: #FFFFFF;
}

/* カラー（ステーキ店バナー） */
.color-steak__rd {
    width: 55%;
    background-color: #C30D24;
}

.color-steak__wh {
    width: 30%;
    background-color: #FFFFFF;
}

.color-steak__ye {
    width: 15%;
    background-color: #FEFF04;
}

.color-steak__rd::before {
    content: "#C30D24";
    color: #FFFFFF;
}

.color-steak__wh::before {
    content: "#FFFFFF";
    color: #5F5C71;
}

.color-steak__ye::before {
    content: "#FEFF04";
    color: #5F5C71;
}

/* カラー（WEBデザインスクールバナー） */
.color-school__bl {
    width: 35%;
    background-color: #7AC7E1;
}

.color-school__gr {
    width: 35%;
    background-color: #55BFAB;
}

.color-school__nv {
    width: 15%;
    background-color: #002D40;
}

.color-school__dkgr {
    width: 15%;
    background-color: #178079;
}

.color-school__bl::before {
    content: "#7AC7E1";
    color: #FFFFFF;
}

.color-school__gr::before {
    content: "#55BFAB";
    color: #FFFFFF;
}

.color-school__nv::before {
    content: "#002D40";
    color: #FFFFFF;
}

.color-school__dkgr::before {
    content: "#178079";
    color: #FFFFFF;
}

/* ここまでカラー */


.detail__list {
    width: 86%;
}

.detail__list__text {
    width: 100%;
    margin: .75em 0 2.5em;
}

.info-last-detail__text {
    width: 100%;
    margin: .75em 0 0;
}

.detail__heading {
    color: #4480A5;
    font-weight: 600;
}

@media screen and (max-width:1180px) {
    .detail__inner {
        padding: clamp(60px, 7vw, 135px) 0;
    }
}

@media screen and (max-width:700px) {
    .detail__inner {
        width: 89%;
    }

    .detail__box {
        border-bottom: .6px solid #A9A7A7;
    }

    .detail__box-last {
        border-bottom: none;
    }

    .detail__list {
        width: 100%;
    }

    .detail-color__outer {
        width: 100%;
    }

    .detail__title {
        padding-bottom: 0;
        padding-left: 0;
    }

    .detail__box {
        padding: 0;
        flex-direction: column;
    }


    .detail__text,
    .detail__label,
    .detail__list__text,
    .detail-color__inner,
    .detail__item:nth-child(3) .detail__list__text {
        width: 97%;
        margin: 0 auto;
    }

    .detail-color__inner {
        padding: .57em 0 2.1em;
    }


    .detail__label {
        padding: 1.87em 0 0;
    }

    .detail__text {
        padding: 0.57em 0 2.1em;
    }

    .detail-color__text {
        padding: 0.57em 0 0.57em;
    }

    .detail__heading {
        padding: 0.57em 1.33vw 0.33em;
    }

    .detail__list__text {
        padding: 0 0 1.1em;
    }

    .info-last-detail__text {
        padding: 0 0 2.1em;
    }

    .design-last-detail__text {
        padding: 0;
    }
}

/***************************************
スライド
****************************************/
.slider__hover {
    transition: transform 0.4s ease;
}

.slider__hover:hover .slider__track,
.slider__hover:hover .slide2__img {
    transform: scale(1.05);
    transition: transform 0.4s ease;
}

.slider {
    margin-top: clamp(42px, 2.63vw + 32.14px, 70px);
}

.englishgarden02-slider__img {
    border: 1px solid #A9A7A7;
}

.slider__btn {
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
}

.slider__controls {
    text-align: end;
    margin-top: .5em;
}

.slider__counter {
    line-height: 1;
    padding: 0 1em;
    position: relative;
    top: .09em;
}


.slider__btn--prev::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 11px solid #5F5C71;
}

.slider__btn--next::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #5F5C71;
}

/* 画像ズーム */
body.is-fixed .header {
    opacity: 0;
    pointer-events: none;
}

.slider__track {
    width: 100%;
    margin: 0 auto;

    position: relative;

    /* デフォルトはスクロールなし */
    overflow: hidden;
}

/* english garden スクロールヒント */
.scroll-badge {
    position: absolute;
    top: 2em;
    left: 2em;
    background: rgba(95, 92, 113, 0.75);
    color: #fff;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    z-index: 2;
}

.badge-arrow {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(45deg);
    display: inline-block;
}

/* data-scroll="true" のときだけスクロール許可 */
[data-scroll="true"] .slider__track {
    overflow-y: auto;
    height: 78vh;
}


.slider__img {
    width: 100%;
    height: auto;
    display: block;
}

.slider__img,
.slide2__img {
    cursor: zoom-in;
}

.slide2__img {
    width: 100%;
    margin-top: 4em;
}

@media screen and (max-width:700px) {
    .englishgarden02-slider__img {
        border: .6px solid #A9A7A7;
    }
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.modal.is-open {
    display: flex;
}

.modal__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}

.modal__close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.modal__close::before,
.modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
}

.modal__close::before {
    transform: translateY(-50%) rotate(45deg);
}

.modal__close::after {
    transform: translateY(-50%) rotate(-45deg);
}

.modal__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal__btn--prev {
    left: 24px;
}

.modal__btn--next {
    right: 24px;
}

.modal__btn--prev::after,
.modal__btn--next::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.modal__btn--prev::after {
    border-right: 16px solid #fff;
}

.modal__btn--next::after {
    border-left: 16px solid #fff;
}

/* TOPページ画像 */
.top__img {
    display: flex;
    align-items: flex-start;
    margin-top: 4em;
    gap: 13%;
}

.englishgarden__img {
    flex-direction: column;
    gap: 4em;
}

.top-img__line img {
    border: 1px solid #A9A7A7;
}

.work__hidden {
    display: none;
}

.work__hidden.is-show {
    display: block;
}

@media screen and (max-width:700px) {
    .top-img__line img {
        border: .6px solid #A9A7A7;
    }
}

/***************************************
他の制作物
****************************************/
.other-works__tags {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: clamp(10px, 0.37vw + 8.6px, 14px);
    margin-top: clamp(7.5px, 0.7vw + 4.875px, 15px);
}


.other-works__box {
    padding-bottom: clamp(50px, 2.8vw + 39.5px, 80px);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: clamp(30px, 3vw, 60px);
    row-gap: clamp(20px, 3.75vw + 5.9px, 60px);
    line-height: 1;
}

.other-works__item {
    width: calc((100% - clamp(30px, 3vw, 60px) * 3) / 4);
}

.other-works__item img {
    border: .8px solid #5F5C71;
}

.other-works__tag:first-child {
    padding-right: .7em;
}

.other-works__tag:last-child {
    padding-left: .7em;
    border-left: 1px solid #5F5C71;
}

.other-works__name {
    font-size: clamp(14px, 0.18vw + 13.3px, 16px);
    letter-spacing: .08em;
    margin-top: clamp(6px, 1.1vw + 1.8px, 12px);
}

/* ホバー */
.works__item-img {
    transition: 0.4s ease;
}

.other-works__item:hover .works__item-img {
    transform: scale(1.05);
}

@media screen and (max-width: 1055px) {
    .other-works__item {
        width: calc((100% - clamp(30px, 3vw, 60px) * 2) / 3);
    }
}

@media screen and (max-width: 700px) {
    .other-works__inner {
        width: 89%;
    }

    .other-works__box {
        column-gap: 25px;
        row-gap: 25px;
    }

    .other-works__item {
        width: calc((100% - 25px) / 2);
    }

    .other-works__tag:last-child {
        border-left: .5px solid #5F5C71;
    }

    .other-works__item img {
        border: .6px solid #5F5C71;
    }
}

@media screen and (max-width: 550px) {
    .other-works__box {
        column-gap: 20px;
        row-gap: 20px;
    }

    .other-works__item {
        width: calc((100% - 20px) / 2);
    }
}

@media screen and (max-width:410px) {
    .other-works__tags {
        align-items: flex-start;
        flex-direction: column;
    }

    .other-works__tag:last-child {
        padding-left: 0;
        border-left: none;
        margin-top: .3em;
    }
}