/*index*/

html{
    scroll-padding-top:100px;
}
body{
    color: var(--base-font-color);
}

.title_h2{
    font-family: var(--en-font);
    font-size: clamp(48px, calc(110 / 1200 * 100vw), 110px);
    font-weight: bold;
    color: #707070;
    line-height: 1;
    & h2{
        /*hgroup用*/
        font-size: clamp(48px, calc(110 / 1200 * 100vw), 110px);
        font-weight: bold;
        line-height: 1;
    }
    & span{
        font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px);
        display: block;
        margin-top: 6px;
    }
    &.title_h2_center{
        text-align: center;
    }
    &.title_h2_service{
        margin-bottom: 66px;
        color: var(--white-font-color);
    }
    @media screen and (max-width: 767.98px) {
    }
}

.title_h3{
    font-size: clamp(24px, calc(60 / 1200 * 100vw), 60px);
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding-bottom: 0.466em;
    margin-bottom: 50px;
    position: relative;
    &::first-letter{
        color: var(--accent-color);
    }
    &::after{
        content: "";
        position: absolute;
        display: block;
        width: 1.5em;
        height:  0.166em;
        background-color: var(--accent-color);
        bottom: 0;
        left: 50%;
        transform: translate(-50% ,0);
    }
    @media screen and (max-width: 767.98px) {
        margin-bottom: 40px;
    }
}


/**mv**/
.mv_bg{
    background-image: url(../img/design-service/mv_02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    background-color: #ffffffa0;
    background-blend-mode: lighten;
}
.mv_container{
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: 100px;/*ヘッダーの高さ*/
    .mv_text{
        display: flex;
        align-items: center;
        flex-grow: 1; /* 残りの高さを占める */
        text-align: center;
        width: 100%;
        max-width: 1560px;
        margin: 0 auto;
        & img{
            width: 80%;
            max-width:824px;
        }
    }
    .contract_link{
        margin-top: auto;
    }
}
@media screen and (max-width: 767.98px) {
    .mv_bg{
        background-image: url(../img/design-service/mv_sp_02.jpg);
    }
}
@media screen and (max-width: 575.98px) {
}

.banner_area {
    .banner_list{
        display: flex;
        gap: 40px calc(80 / 1200 * 100%);
        flex-wrap: wrap;
        margin-bottom: 100px;
        margin-bottom: min(calc((165 / 1200) * 100%),165px);
        & li{
            width: calc(560 / 1200 * 100%);
            max-width: 560px;
            /* box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); */
        }
        & a{
            &:hover{
                & img{
                    opacity: 0.7;
                }
            }
        }
    }
}
@media screen and (max-width: 767.98px) {
    .banner_area{
        .banner_list{
            & li{
                width: 100%;
                margin: auto;
            }
        }
    }
}

.contract_link{
    display: flex;
    flex-wrap: wrap;
    gap: 22px 6.66%;
    margin-bottom: min(calc((165 / 1200) * 100%), 165px);
    .contract_link_item{
        width: 46.66%;
        max-width: 560px;
        position: relative;
        & a{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            height: 100%;
            font-size: clamp(20px, calc(35 / 1200 * 100vw), 35px);
            font-weight: bold;
            color: var(--white-font-color);
            background-color: var(--accent-color);
            /* border-radius: 8px; */
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.16);
            position: relative;
            padding-top: calc((79 / 560) * 100%);
            padding-bottom: calc(((240 / 560) * 100%) - ((79 / 560) * 100%) - 1em);/*240px a自体のpadding分は引く*/
            transition : 0.5s;
            &::after{
                content: "";
                background-image: url(../img/design-service/arrow_contract_link.png);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: bottom;
                display: block;
                width: clamp(14px, calc((26 / 560) * 100%), 26px);/*24px*/
                padding-top: calc((16 / 26) * 100%);/*16px*/
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                bottom: calc((120 / 560) * 100%);
            }
            &::before {
                content: "";
                display: block;
                width: clamp(32px, calc(41 / 1200 * 100vw), 41px);
                height: clamp(33px, calc(42 / 1200 * 100vw), 42px);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
            }
            &:hover{
                background-color: var(--main-color)
            }
        }
    }
    .contract_link_item--01 a::before {
        background-image: url(../img/design-service/contract/icon_pen_white.svg);
    }
    .contract_link_item--02 a::before {
        background-image: url(../img/design-service/contract/icon_person_white.svg);
    }
}
@media screen and (max-width: 767.98px) {
    .contract_link{
        .contract_link_item{
            width: 100%;
            max-width: none;
            & a{
                height: 100px;
                padding-top: 20px;
                padding-bottom: calc(80px - 1em);
            }
        }
    }
}


/*バナー一覧*/
.service_title_bg{
        background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.80) 43.5%, var(--white-font-color) 100%);
        padding-top: min(calc((270 / 1200) * 100%),270px);
        color: var(--secondary-color);
    }
.service_banner_area{
    background-color: var(--white-font-color);
    padding-top: min(calc((145 / 1200) * 100%),145px);
    padding-bottom: 20px;
}
@media screen and (max-width: 767.98px) {
    .service_banner_area{
        .banner_list{
            & li{
                width: 100%;
                margin: auto;
            }
        }
    }
}

.service_area{
    background-color: var(--main-color);
    color: var(--white-font-color);
    padding: 131px 0 0;
}
/* @media screen and (max-width: 767.98px) {
    .service_area{
        padding: 100px 0;
    }
} */
/*対応領域*/
.expertise_area{
    margin-bottom: 131px;
    .expertise_list{
        display: flex;
        flex-wrap: wrap;
        gap: 30px 2.5%;
        > li{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 16px;
            width: 48.75%;
            background-color: #161616;
            background-repeat: no-repeat;
            background-size: 156px;
            background-position: right 4.77%  bottom;
            color: var(--white-font-color);
            /* border-radius: 8px; */
            /* padding: 32px calc(2.08% - 10px) 32px 2.08%; */
            padding-top: 32px;
            position: relative;
            &.expertise_item_web{
                background-image: url(../img/design-service/img_expertise_web.png);
            }
            &.expertise_item_paper{
                background-image: url(../img/design-service/img_expertise_paper.png);
            }
            &.expertise_item_movie{
                background-image: url(../img/design-service/img_expertise_movie.png);
            }
            &.expertise_item_sales{
                background-image: url(../img/design-service/img_expertise_sales.png);
            } 
        }
        .expertise_def{
            padding: 0 calc(2.08% - 10px) 0 2.08%;

            > dt{
                font-size: clamp(20px, calc(36 / 1200 * 100vw), 36px);
                font-weight: 500;
                text-align: center;
                margin-bottom: 36px;
            }
            > dd{
                .expertise_detail_list{
                    display: inline;
                    > li{
                        display: inline-block;
                        font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px);
                        font-weight: 500;
                        white-space: nowrap;
                        padding: 6px 8px 4px 28px;
                        background-color: #3D3D3D;
                        /* border-radius: 6px; */
                        position: relative;
                        margin-right: 10px;
                        margin-bottom: 14px;
                        &::before{
                            content: "";
                            display: block;
                            width: 10px;
                            height: 10px;
                            background-color: var(--accent-color);
                            position: absolute;
                            left: 8px;
                            top: 50%;
                            transform: translate(0,-50%);
                        }
                    }
                }
                .expertise_detail_etc{
                        font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px);
                        font-weight: 500;
                        white-space: nowrap;
                        margin-left: 10px;
                }
            }
        }
        .expertise_item_image {
            width: 100%;
        }
    }
    .expertise_note_list{
        color: #B9B9B9;
    }
    

}
@media screen and (max-width: 767.98px) {
    .expertise_area{
        margin-bottom: 100px;
        .expertise_list{
            gap: 40px 2.5%;
            > li{
                width: 100%;
                /* padding: 16px calc(2.08% - 10px) 16px 2.08%; */
                padding-top: 16px;
            }
            .expertise_def{
                > dt{
                    margin-bottom: clamp(20px, calc(36 / 1200 * 100vw), 36px);
                }
            }
        }
    }
}

/*契約形態*/
.contract_area{
    background-color: #484848;
    padding-top: 100px;
    padding-bottom: 148px;
    .contract_def{
        border-left: solid clamp(5px, 1vw, 10px) var(--accent-color);
        padding:calc(30 / 1200 * 100%) 0 calc(35 / 1200 * 100%) calc(45 / 1200 *100%);
        >dt{
            display: flex;
            gap: 8px;
            align-items: center;
            font-size: clamp(25px, calc(50 / 1200 * 100vw), 50px);
            font-weight: bold;
            margin-top: 8px;
            padding-left: min(calc(8 / 1200 * 100vw), 8px);
            &::before {
                content: "";
                display: block;
                width: clamp(31px, calc(62 / 1200 * 100vw), 62px);
                height: clamp(30px, calc(60 / 1200 * 100vw), 60px);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }
        }
        >dd.dd1{
            width: fit-content;
            padding: 2px 16px;
            font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px);
            font-weight: bold;
            color: #484848;
            background-color: var(--white-font-color);
        }
        >dd.dd2{
            font-size: clamp(16px, calc(20 / 1200 * 100vw), 25px);
            font-weight: 500;
            line-height: 2;
            margin-top: 2.8em;
        }
        + .contract_def{
            margin-top: calc(140 / 1200 * 100%);
        }
        .asterisk {
            font-size: 12px;
            display: inline-block;
            vertical-align: top;
        }
    }
    .contract_def--01 dt::before {
        background-image: url(../img/design-service/contract/icon_pen.svg);
    }
    .contract_def--02 dt::before {
        background-image: url(../img/design-service/contract/icon_person.svg);
    }
}
@media screen and (max-width: 767.98px) {
    .contract_area{
        padding-top: 100px;
        padding-bottom: 100px;
        .contract_def{
            >dd.dd2{
                margin-top: 1.5em;
            }
        }
    }
}

.expertise_note_list{
    font-size: 15px;
    counter-reset: number;
    margin-top: 58px;
    > li{
        position: relative;
        padding-left: 1.2em;
        &::before{
            /* counter-increment: number;
            content: counter(number) '*'; */
            content: "※";
            position: absolute;
            left: 0;
        }
    }
}
@media screen and (max-width: 767.98px) {
    .expertise_note_list{
        >li+li{
            margin-top: 0.5em;
        }
    }
}


/*実績*/
.work_area{
    padding: 200px 0 180px;
    .work_container{
        position: relative;
        height: min(calc(350 / 1200 *100vw), 350px);
    }
    .work_title{
        box-sizing: border-box;
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: end;
        padding-top: min(calc(95 / 1200 * 100%),96px);
    }
    .work_img{
        position: absolute;
        top: 0;
        left: calc((100vw - 94%) / 2 * -1);
        height: fit-content;
        box-sizing: border-box;
        width: calc(100vw - (560 / 1200 *100vw));
        z-index: 3;
        overflow: hidden;
    }
}
@media screen and (max-width: 767.98px) {
.work_area{
    padding: 100px 0;
    .work_container{
        height: auto;
    }
    .work_title{
        display: block;
        text-align: center;
        padding-top: 0;
        margin-bottom: 40px;
    }
    .work_img{
        position: static;
        margin: 0 auto;
        width: 100%;
    }
}
}
/*スライダー設定*/
.swiper-wrapper {
    transition-timing-function: linear !important;
}
.swiper-slide{
    max-width: 560px;
    overflow: hidden;
    margin: 0  min(calc(25 / 1200 * 100%), 50px);
    @media screen and (max-width: 767.98px) {
        max-width: 390px;
    }
}

/*私たちについて*/
.about_area{
    background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.80) 43.5%, var(--white-font-color) 100%);
    .about_container{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px 0;
        padding-bottom:clamp(67px,calc(164 / 1720 * 100vw),164px);
        .about_title,
        .about_text{
            width: 50%;
        }
        .about_text{
            font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px);
            font-weight: 500;
            line-height: 2.25;
        }
    }
}
@media screen and (max-width: 767.98px) {
    .about_area{
        .about_container{
            .about_title,
            .about_text{
                width: 100%;
            }
        }
    }
}





/*スクロール文字*/
.scroll-list {
    display: flex;
    list-style: none;
    padding-inline: 0;
    margin-inline: 0;
    gap: 0;
    overflow: hidden;
    > li {
        font-family: var(--en-font);
        color: #B9B9B9;
        font-size: max(150px , calc(200 / 1720 * 100vw));
        font-weight: bold;
        line-height: 1;
        white-space: nowrap;
        padding: 0 0.5em 0 0;
        margin: 0;
        animation: marquee-left 16s linear infinite;
    }
}
@keyframes marquee-left {
    100% {
        transform: translateX(-100%);
    }
}

@media screen and (max-width: 767.98px) {
    .scroll-list {
        > li {
            font-size: 20vw;
        }
    }
}

/*お問い合わせ*/
.contact_area{
    margin-top: 20px;
    background-color: var(--accent-color);
    color: var(--white-font-color);
    padding: 70px 0 80px;
    position: relative;
    z-index: 0;
    .wrap::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--main-color);
        transform: skewX(-15deg) translateX(-105%) translateY(-70px);
        z-index: -1;
    }
    .contact_container{
        display: flex;
        flex-wrap: wrap;
        gap: 40px 0;
        .contact_title,
        .contact_contents{
            width: 50%;
        }
        .contact_title{
            display: flex;
            justify-content: center;
            .title_h2_contact{
                font-size: clamp(48px, calc(100 / 1200 * 100vw), 100px);
                margin-bottom: 10px;
                color: var(--white-font-color);
            }
            & p{
                font-size: 20px;
                font-weight: bold;
            }
        }
        .contact_contents{
            display: flex;
            justify-content: center;
            >div{
                    width: 100%;
                }
            .contact_tel,
            .contact_mail,
            .contact_name{
                color: var(--white-font-color);
                font-weight: bold;
                display: block;
                text-align: center;
            }
            .contact_tel{
                font-size: clamp(40px, calc(50 / 1200 * 100vw), 50px);
                line-height: 1;
                margin-bottom: 10px;
            }
            .contact_mail{
                /* font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px); */
                font-size: 20px;
            }
            .contact_name{
                /* font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px); */
                font-size: 20px;
                margin-bottom: 22px;
            }
            .contact_btn{
                color: var(--white-font-color);
                font-weight: bold;
                /* font-size: clamp(16px, calc(20 / 1200 * 100vw), 20px); */
                font-size: 20px;
                text-align: center;
                padding: 30px 2%;
                border: solid 3px var(--white-font-color);
                display: block;
                width: 100%;
                max-width: 370px;
                margin: auto;
                margin-top: 22px;
                transition: 0.3s;

                &:hover{
                    color: var(--accent-color);
                    background-color: var(--white-font-color);
                }
            }
            .contact_btn_black {
                background-color: var(--main-color);
            }
        }
    }
}
@media screen and (max-width: 767.98px) {
    .contact_area{
        .wrap::before{
            transform: skewX(-15deg) translateX(-95%) translateY(-70px);
        }
        .contact_container{
            .contact_title,
            .contact_contents{
                width: 100%;
                max-width: 480px;
                margin: auto;
            }
            .contact_title{
                justify-content: start;
            }
            .contact_contents{
                .contact_tel,
                .contact_mail,
                .contact_name{
                    text-align: left;
                }
                .contact_btn{
                    max-width: 480px;
                    margin-top: 70px;
                }
            }
        }
    }
}
a[href^="tel:"] {
        pointer-events: none;
        cursor: default;
    }

@media screen and (max-width: 767.98px) {
    a[href^="tel:"] {
        pointer-events:initial;
    }
}