@charset "UTF-8";

/* 20250722 追記 */
#siteFooter .__navi ul._list li {
    margin-right: 2.3em;
}

@media screen and (max-width: 960px) {
    #siteFooter .__navi ul._list li {
        margin-right: 2em;
    }
}

@media screen and (max-width: 768px) {
    #siteFooter .__navi ul._list li {
        margin-right: 0;
    }
}

.secWork {
    position: relative;
    z-index: auto;
}

@media screen and (max-width: 768px) {

    .page___work header.pageHeader .wrapper,
    .single-work header.pageHeader .wrapper {
        padding: 6em 0 3em;
    }

    .page___work .secPage:not(.basic) h2.secTtl,
    .single-work .secPage:not(.basic) h2.secTtl {
        width: 100%;
    }

    .single-work h2.secTtl span {
        font-size: 1.75em;
        line-height: 1.3;
    }

    .secWork {
        padding-inline: 7.5%;
    }

    .page___work .mainContent .ankerWrap ._main .secPage~.secPage {
        margin-top: 5em;
    }

    .page___work .mainContent .ankerWrap ._anker.is-pc {
        display: none;
    }
}

@media screen and (min-width: 767px) {
    .page___work .mainContent .ankerWrap ._main {
        padding-left: 4%;
    }

    .page___work .mainContent .ankerWrap ._anker {
        width: calc((4.66 * 2.46em) + 16%);
    }
}

/* アコーディオンセクション */
.work__select {
    position: relative;
    z-index: 16;
    max-width: 350px;
    margin: 3em auto 0;
}

.work__select-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.3em 2em;
    background: #FFF;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #9F9FA7;
    transition: all 0.3s ease;
    user-select: none;
}

.work__select-value.active {
    border-radius: 8px 8px 0 0;
}

.work__select-value::after {
    content: "";
    background: url(./images/arrow-top.svg) no-repeat center center / contain;
    width: 14px;
    height: 8px;
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.work__select-value.active::after {
    transform: rotate(0deg);
}

.work__select-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-radius: 0 0 8px 8px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style: none;
}

.work__select-list.active {
    height: fit-content;
    max-height: 500px;
    padding: 0 0 1.5em;
}

.work__select-item a {
    display: block;
    padding: 0.6em 2em 0;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    position: relative;
}

.work__select-item a:hover {
    color: #E05B03;
}

@media screen and (max-width: 768px) {
    .work__select {
        max-width: 100%;
        margin: 2em 0 0;
    }

    .work__select-value {
        padding: 1.2em 1.5em;
        font-size: 15px;
    }

    .work__select-item a {
        padding: 0.8em 1.5em;
        font-size: 14px;
    }
}

.work__img {
    padding: 1.8em;
    margin-top: 3.2em;
    background: #FFF;
}

.work__text {
    font-size: 1em;
    line-height: 1.95;
    margin-top: 2.2em;
}

.page___work .work__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 790/395;
}

@media screen and (max-width: 768px) {
    .page___work h2.secTtl span {
        line-height: 1.4;
    }

    .work__text {
        font-size: 1.11em;
        line-height: 1.9;
        margin-top: 2em;
    }

    .work__img {
        padding: 0.8em;
        margin-top: 3em;
    }

    .page___work .work__img img {
        aspect-ratio: 312/161;
    }

    .page___work .work-btn__txt {
        font-size: 0.9em;
    }

    .work__img--fv-sp {
        padding: 0;
        margin-inline: -10%;
        background-color: transparent;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 360/232;
        }
    }
}

.work__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4em 1.5em;
    margin-top: 4.5em;
}

@media screen and (max-width: 1200px) {
    .work__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .work__list {
        grid-template-columns: repeat(1, 1fr);
        gap: 2em;
        margin-top: 3.5em;
    }

    .work-btn__txt {
        color: #FFF;
    }

    .work-btn__arrow {}

    .page___work .work-btn__link {
        min-height: auto;
    }
}

.work__item {}

.work-btn {}

.work-btn--single {
    width: fit-content;
    margin: 3em auto 0;

    .work-btn__txt {
        font-size: 1em;
        padding-inline: 1em 2em;
    }
}

@media screen and (max-width: 768px) {
    .work-btn--single {
        width: 100%;
        max-width: 400px;
        margin-inline: auto;

        .work-btn__txt {
            font-size: 1em;
            padding-inline: 0 1em;
        }
    }

    .work__content--3 .work-btn--single {
        margin-top: 5.6em;
    }
}

.work-btn__link {
    background-color: #FFF;
    border-radius: 50px;
    padding: 0.8em 1em;
    display: grid;
    grid-template-columns: 1fr 35px;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #252525;
}

.work-btn__link.borderBtn {
    max-width: 100%;
}

.work-btn__link.borderBtn .work-btn__txt {
    transition: cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5125s;
    -o-transition: cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5125s;
    -moz-transition: cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5125s;
    -webkit-transition: cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5125s;
}

.work-btn__link.borderBtn:hover .work-btn__txt {
    color: #ffffff;
    transform: translateX(5px);
    transition: cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5125s;
    -o-transition: cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5125s;
    -moz-transition: cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5125s;
    -webkit-transition: cubic-bezier(0.55, 0.05, 0.22, 0.99) 0.5125s;
}

.work-btn__link.arrow span.arrow::before {
    transform: scale(2.3);
}

.work-btn__link.arrow:hover span.arrow::before {
    transform: scale(2.8);
}

.work-btn__txt {
    font-size: 0.8em;
    line-height: 1.4;
}

@media screen and (max-width: 768px) {
    .work-btn__link {
        background-color: #ED6103;
        padding: 0.35em 1em 0.3em 1.5em;
        min-height: 4.65em;
    }
}

.work-btn__arrow {}

.work__item-desc {
    font-size: 0.9em;
    margin-top: 1em;

    p {
        font-size: 1em;
        line-height: 1.95;
    }
}

@media screen and (max-width: 768px) {
    .work__item-desc {
        p {
            font-size: 1.23em;
            line-height: 2;
        }
    }
}

.single-work strong {
    font-weight: 700;
    text-decoration: underline;
}

.single-work .mainContent .ankerWrap ._main {
    width: 100%;
    max-width: calc(1280px + 7.5%);
    padding: 0 7.5%;
}

.single-work .mainContent .ankerWrap ._main .secPage {
    max-width: 100%;
    margin-top: 8.2em;
}

@media screen and (max-width: 768px) {
    .single-work .mainContent .ankerWrap ._main .secPage {
        margin-top: 3em;
    }
}

.single-work .work__img {
    margin-top: 0;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 1216/576;
    }
}

.work__content {
    margin-top: 3em;
}

.work__content--1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    gap: 5em;

    div p {
        line-height: 1.95;
    }
}

@media screen and (max-width: 768px) {
    .work__content {
        margin-top: 2.6em;
    }

    .work__content--1 {
        grid-template-columns: 1fr;
        gap: 2em;

        div p {
            font-size: 1.11em;
            line-height: 1.9;
        }
    }
}

.work__content--2 {
    .work__content-list {
        display: flex;
        flex-direction: column;
        gap: 3em;
    }

    .work__content-item {
        display: grid;
        grid-template-columns: 0.65fr 1fr;
        align-items: flex-start;
        gap: 2.8em;

        img {
            width: 100%;
            height: 100%;
            aspect-ratio: 4 / 2;
            object-fit: cover;
        }
    }

    .work__content-info {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    .work__content-item-title {
        font-size: 1.3em;
        font-weight: 700;
        color: #ED6103;
    }

    .work__content-item-text p {
        font-size: 1em;
        line-height: 1.95;
    }
}

@media screen and (max-width: 768px) {
    .work__content--2 .work__content-item-title {
        font-size: 1.4em;
        line-height: 1.35;
    }

    .work__content--2 .work__content-list {
        gap: 2em;
    }

    .work__content--2 .work__content-item {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .work__content--2 .work__content-info {
        gap: 0.6em;
    }

    .work__content-item-text p {
        font-size: 1.11em;
        line-height: 1.9;
    }
}

.work_video {
    padding: 6em 3em 0;

    iframe {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 1120 / 630;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    .work_video {
        padding: 3em 0 1.5em;
    }
}

.work__content--3 {
    .work__content-list {
        display: flex;
        flex-direction: column;
        gap: 3.5em;
    }

    .work__content-item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: flex-start;
        gap: 3.2em;

        img {
            width: 100%;
            height: 100%;
            aspect-ratio: 600 / 300;
            object-fit: cover;
        }
    }

    .work__content-info {
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    .work__content-item-title {
        display: flex;
        flex-direction: column;
        gap: 0.25em;
        font-size: 1.45em;
        font-weight: 700;

        .point {
            display: block;
            font-size: 0.85em;
            font-weight: 700;
            color: #ED6103;
        }
    }

    .work__content-item-text p {
        font-size: 1em;
        line-height: 1.75;
    }
}

/* 1番目と3番目のアイテムで画像とコンテンツの順序を入れ替え */
.work__content--3 .work__content-item:nth-child(1) img,
.work__content--3 .work__content-item:nth-child(3) img {
    order: 2;
}

.work__content--3 .work__content-item:nth-child(1) .work__content-info,
.work__content--3 .work__content-item:nth-child(3) .work__content-info {
    order: 1;
}

.is-sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .work__content--3 .work__content-list {
        gap: 2em;
    }

    .work__content--3 .work__content-item {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .work__content--3 .work__content-item:nth-child(1) img,
    .work__content--3 .work__content-item:nth-child(3) img {
        order: 1;
    }

    .work__content--3 .work__content-item:nth-child(1) .work__content-info,
    .work__content--3 .work__content-item:nth-child(3) .work__content-info {
        order: 2;
    }

    .work__content--3 .work__content-info {
        gap: 1em;
    }

    .work__content--3 .work__content-item-title {
        gap: 0.5em;
        font-size: 1.4em;
        line-height: 1.6;

        .point {
            font-size: 0.9em;
        }
    }

    .work__content--3 .work__content-item-text p {
        font-size: 1.11em;
        line-height: 1.9;
    }

    .is-sp {
        display: block;
    }
}

.work__content--4 {
    padding: 1.8em;
    background: #F5F5F5;
    border-radius: 8px;

    .work__content-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }

    .work__content-item {
        background-color: #FFF;
        border-radius: 8px;
        font-size: 1em;
        line-height: 1.4;
        padding: 1.5em 1.5em 1.4em 3em;
        position: relative;
    }

    .work__content-item::before {
        content: "✔︎";
        position: absolute;
        top: 1.1em;
        left: 1.2em;
        font-size: 1.2em;
        font-weight: 700;
    }
}

@media screen and (max-width: 768px) {
    .work__content--4 {
        padding: 1.4em;
    }

    .work__content--4 .work__content-list {
        grid-template-columns: 1fr;
        gap: 0.5em;
    }

    .work__content--4 .work__content-item {
        font-size: 1.11em;
        padding: 0.95em 1em 0.9em 2.2em;
        line-height: 1.42;
    }

    .work__content--4 .work__content-item::before {
        top: 0.7em;
        left: 0.75em;
    }
}

.work__content--5 {
    max-width: 800px;
    margin-inline: auto;

    .work__content-list {
        display: flex;
        flex-direction: column;
        gap: 3em;
    }

    .work__content-item {
        position: relative;
        display: grid;
        grid-template-columns: 170px 1fr;
        align-items: flex-start;
        gap: 0.7em;
        background-color: #FFF;
        border-radius: 8px;
        padding: 1.7em 1.7em 1.6em;
        line-height: 1.6;
    }

    .work__content-item::after {
        content: "";
        position: absolute;
        bottom: -1.5em;
        left: 0;
        right: 0;
        transform: translateY(50%);
        margin-inline: auto;
        width: 112px;
        height: 12px;
        background: url(./images/arrow-down3.svg) no-repeat center center / contain;
    }

    .work__content-item:last-child::after {
        display: none;
    }

    .work__content-item-title {
        font-size: 1.2em;
        font-weight: 700;
        color: #ED6103;
        line-height: 1.4;
    }

    .work__content-item-text p {
        font-size: 1em;
        line-height: 1.95;
    }
}

@media screen and (max-width: 768px) {
    .work__content--5 {
        .work__content-item {
            grid-template-columns: 1fr;
            gap: 0.5em;
            padding: 1.4em 1.2em 1.5em;
        }

        .work__content-item-title {
            text-align: center;
            font-size: 1.3em;
            line-height: 1.4;
            gap: 0.4em;
        }

        .work__content-item-text p {
            font-size: 1.11em;
            line-height: 1.9;
        }
    }
}

.work__content--6 {
    max-width: 1024px;
    margin-inline: auto;

    .iv_wrapper ul._list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2em;
    }

    .iv_wrapper ul._list>li {
        width: 100%;
        margin-bottom: 2em;
    }

    .iv_wrapper ul._list>li a:hover .arrow span.arrow::before {
        transform: scale(3);
    }

    .iv_wrapper ul._list>li ._head {
        background: #FFF;
    }

    .iv_wrapper ul._list>li ._body {
        display: flex;
        padding-top: 1.4em;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }

    .iv_wrapper ul._list>li ._body .arrow {
        margin-top: 0;
    }

    .arrow span.arrow {
        width: 0.7em;
        height: 0.7em;
    }

    .arrow span.arrow::before {
        transform: scale(2.2);
    }
}

@media screen and (max-width: 768px) {
    .work__content--6 {
        .iv_wrapper ul._list {
            grid-template-columns: 1fr 1fr;
            gap: 0 1.2em;
            margin: 0;
            width: 100%;
        }
    }

    .iv_wrapper ul._list>li ._body {
        padding-top: 0.8em;
    }
}

.work__content--6+.work-btn--single {
    margin-top: 5em;
}

@media screen and (max-width: 768px) {
    .work__content--6+.work-btn--single {
        margin-top: 1em;
    }
}

.work__content--7 {
    max-width: 900px;
    margin-inline: auto;

    .work__content-list {
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    .work__content-item {
        display: flex;
        flex-direction: column;
        gap: 1.2em;
        padding-bottom: 2em;
        border-bottom: 1px solid #F7F7F7;
    }

    .work__content-item:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .work__content-item-title {
        position: relative;
        font-size: 1em;
        font-weight: 700;
        line-height: 1.6;
        padding-left: 2.6em;

        &::before {
            content: "Q";
            position: absolute;
            top: -0.1em;
            left: 0;
            font-family: 游ゴシック, Yu Gothic, YuGothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, sans-serif;
            font-size: 1.5em;
            font-weight: 700;
            color: #ED6103;
            line-height: 1.1;
        }
    }

    .work__content-item-text {
        position: relative;
        font-size: 1em;
        line-height: 1.6;
        padding-left: 2.6em;

        &::before {
            content: "A";
            position: absolute;
            top: 0;
            left: 0;
            font-family: 游ゴシック, Yu Gothic, YuGothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, sans-serif;
            font-size: 1.5em;
            font-weight: 700;
            color: #9F9FA7;
            line-height: 1.1;
        }
    }
}

@media screen and (max-width: 768px) {
    .work__content--7 {
        .work__content-list {
            gap: 2.15em;
        }

        .work__content-item {
            gap: 2em;
            padding-bottom: 2.3em;
        }

        .work__content-item-title {
            font-size: 1.11em;
            line-height: 1.8;
            padding-left: 2.4em;
            min-height: 1.7em;

            &::before {
                top: 0.6em;
                transform: translateY(-50%);
            }
        }

        .work__content-item-text {
            font-size: 1.11em;
            line-height: 1.9;
            padding-left: 2.4em;

            &::before {
                top: 0;
            }
        }
    }
}

.work__other-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6em 2em;
    padding-bottom: 7em;

    .work-btn {
        width: 100%;
    }

    .work-btn__link {}

    .work-btn__txt {
        padding-right: 1em;
    }

    .work-btn__arrow {}
}

@media screen and (max-width: 1200px) {
    .work__other-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .work__other-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
        padding-bottom: 4.5em;
        margin-top: 1.9em;
        margin-inline: -0.5em;

        .work-btn__arrow {
            display: none !important;
        }

        .work-btn {
            width: fit-content;
        }

        .work-btn__txt {
            font-size: 0.85em;
            padding-right: 0;
        }

        .work-btn__link {
            grid-template-columns: 1fr;
            padding: 0.2em 0.5em 0.1em;
            border-radius: 8px;
            min-width: auto !important;
            min-height: auto;
        }
    }
}