@charset "utf-8";


/** 事業所アクセス  
-------------------------------------------------------------------- */
section#merit {}

section#merit .block {
    margin-top: var(--m6);
    margin-inline: var(--m4);
    padding-block: var(--m3) var(--m4);
    padding-inline: var(--m4) var(--m2);
    display: flex;
    align-items: center;
    gap: var(--m4);
    position: relative;
}
section#merit .numbering {
    width: 80px;
    height: 80px;

    color: white;
    font-size: var(--tagline-size);
    font-weight: 700;

    display: grid;
    place-items: center;
    position: absolute;
    left: 0;
    top: 0;
    translate: -50% -50%;
    z-index: 10;
}
section#merit .numbering::after {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background: var(--main);
    position: absolute;
    inset: 0;
    z-index: -1;
    rotate: -18deg;
}
section#merit .block:nth-of-type(odd) .numbering::after {
    background: var(--sub);
}
section#merit .text {
    flex: 1 0 50%;
}
section#merit h3 {
    font-size: 27px;
    padding-bottom: 0.5lh;
    border-bottom: 1px solid currentColor;
    margin-bottom: 0.5lh;
}
section#merit img {
    width: 40%;
    border-radius: 12px;
}

@media screen and (max-width: 767px) {
    section#merit .block {
        margin-top: var(--m4);
        margin-inline: var(--m);
        padding-block: var(--m3);
        padding-inline: var(--m2);
        flex-direction: column-reverse;
        gap: var(--m2);
    }
    section#merit .block + .block::before {
        width: 30px;
        height: 15px;
    }
    section#merit .numbering {
        width: 54px;
        height: 54px;
        left: 50%;
        top: 0;
        translate: -50% -50%;
    }
    section#merit .numbering::after {
        border-radius: 12px;
    }
    section#merit h3 {
        font-size: calc(21 * var(--px));;
        text-align: center;
    }
    section#merit img {
        width: 100%;
    }
}



/** いちばん星の得意分野  
-------------------------------------------------------------------- */
section#worker {
    margin-top: var(--m6);
    background: rgb(from var(--pale) r g b / 0.8);
    overflow: hidden;
    text-align: center;
    position: relative;
}
section#worker ul {
    padding-block: var(--m3);
    padding-inline: var(--m2);
    background: rgb(from white r g b / 0.8);
    border-radius: 24px;
    border: 2px solid var(--black);
    font-weight: 700;
    font-size: 20px;
}
section#worker ul + p {
    font-size: var(--headline-size);
    font-weight: 700;
}
section#worker ul + p span {
    background: white;
}
section#worker .nav-more {
    margin-top: var(--m3);
    margin-inline: auto;
}
section#worker .background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    z-index: -1;
}
@media screen and (max-width: 767px) {
    section#worker ul {
        font-size: calc(18 * var(--px));
    }
    section#worker h2 + p + p {
        text-align: center;
    }
}



/** お仕事のご依頼から納品までの流れ  
-------------------------------------------------------------------- */
section#step {
    background: var(--light);
}
section#step .block {
    margin-top: var(--m8);
    margin-inline: var(--m10);
    padding-block: var(--m2) var(--m3);
    padding-inline:  var(--m4);
    position: relative;
}
section#step .block + .block::before {
    display: block;
    width: 40px;
    height: 20px;
    background: var(--main);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--m4));
    translate: -50% 50%;
}

section#step .numbering {
    width: fit-content;
    padding-inline: 0.5em;
    background: var(--main);
    border-radius: 6px;
    color: white;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.12ic;
    margin-bottom: 0.5lh;
}
section#step .block:nth-of-type(even) .numbering {
    background: var(--sub);
}
section#step h3 {
    font-size: 27px;
    letter-spacing: 0.06ic;
    padding-bottom: 0.5lh;
    border-bottom: 1px solid currentColor;
    margin-bottom: 0.5lh;
}
section#step img {
    width: 300px;
    border-radius: 12px;
    box-shadow: 9px 9px 0 0 rgb(from var(--black) r g b / 0.05);
    position: absolute;
    right: calc(-1 * var(--m4));
    top: calc(-1 * var(--m4));
    z-index: 10;
}

@media screen and (max-width: 767px) {
    section#step .block {
        margin-top: var(--m4);
        margin-inline: var(--m);
        padding-block: var(--m) var(--m3);
        padding-inline: var(--m2);
    }
    section#step .block + .block::before {
        width: 30px;
        height: 15px;
        bottom: calc(100% + var(--m2));
    }
    section#step .numbering {
        margin-inline: auto;
        translate: 0 -50%;
        margin-bottom: 0;
    }
    section#step h3 {
        font-size: var(--headline-size);
        text-align: center;
    }
    section#step img {
        width: calc(100% + var(--m4));
        position: static;
    }
}




/** ご依頼時のお願いと確認事項  
-------------------------------------------------------------------- */
section#confirmation {
    background: var(--pale);
}
section#confirmation .panel {
    margin-top: var(--m4);
    background: white;
}
section#confirmation ul {
    list-style-type: disc;
}
section#confirmation li {
    font-size: 20px;
    font-weight: 700;
}
@media screen and (max-width: 767px) {
    section#confirmation .panel {
        padding-block: var(--m2);
    }
    section#confirmation ul {
        margin-left: var(--m);
    }
    section#confirmation li {
        font-size: var(--regular-size);
    }
}