/**************************************************

    FV

****************************************************/

.fv {
    background: linear-gradient(rgb(0 0 0 / .2), rgb(0 0 0 / .2) 75%, rgb(0 43 49 / 1) 100%), url(fv.jpg);
    background-size: cover;
    background-position: center;
}

.todays-one {
    display: block;
    width: min(90%, 250px);
    position: relative;
    margin: 0 auto;
    z-index: 10;
}

.todays-one > p {
    position: absolute;
    content: '';
    left: 0;
    bottom: 1em;
    margin: 0;
    color: white;
    background: rgb(55 101 111 / .8);
    padding: 4px 16px;
    z-index: 20;
}

.todays-one img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3 / 2;  
    object-fit: cover;
    clip-path: polygon(
        48px 0,
        100% 0,
        100% calc(100% - 48px),
        calc(100% - 48px) 100%,
        0 100%,
        0 48px
    );
}

.todays-one::before {
    position: absolute;
    content: '';
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    left: -4px;
    top: -4px;
    background: white;
    clip-path: polygon(
        48px 0,
        100% 0,
        100% calc(100% - 48px),
        calc(100% - 48px) 100%,
        0 100%,
        0 48px
    );
    z-index: -10;
}

#intro .base-h2 {
    width: fit-content;
    margin: 48px auto 16px;
}

#intro .intro-txt-area p {
    display: block;
    width: fit-content;
    margin: 1em auto;
}

@media (min-width: 640px) {
    .fv {
        height: clamp(250px, 40vh, 350px);
    }

    #intro {
        margin: -180px auto auto;
    }

    .todays-one {
        margin: 0 0 0 auto;
        width: min(250px, 35%);
    }
}


/**************************************************

    私たちが対応している制作領域

****************************************************/

#intro-field .base-h2 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#intro-field ul.grid-3-row {
    padding: 0;
}

#intro-field .cases .item {
    grid-row: span 4;
    padding: 0 12px 12px;
}

#intro-field .cases .item .head {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    font-size: clamp(18px, 2vw, 20px);
}

/**************************************************

    よくあるご相談

****************************************************/

#q-and-a .btn1 {
    background: white;
    margin: 1em 0 1em auto;
}

#q-and-a .btn1 img {
    transform: rotate(90deg);
}

#q-and-a ul {
    padding: 0;
    margin: 0;
}

#q-and-a ul li {
    padding: 0;
    margin: 0;
    list-style: none;
}

#q-and-a ul.items li.item {
    background: var(--color-bg);
    background-blend-mode: multiply;
    background-size: 300px;
    background-repeat: repeat;
    color: white;
    padding: 16px 10px;
    margin: 32px 0;
}

#q-and-a li.item h3 {
    font-family: var(--font-head);
    color: white;
    font-weight: 500;
    padding: 8px 0;
    margin-top: 0;
}

#q-and-a details.qas {
    background: white;
    color: var(--color-main);
    border-radius: 4px;
    font-weight: 500;
    padding-bottom: 24px;
    position: relative;
    margin: 16px 0;
    cursor: pointer;
}

#q-and-a details.qas summary {
    list-style: none;
    padding: 16px 12px 16px 44px;
    position: relative;
    background: #EDF6F8;
    border-radius: 4px 4px 0 0;
}

#q-and-a details.qas summary::before {
    position: absolute;
    content: 'Q';
    left: 12px;
    display: inline-block;
    background: var(--color-main);
    aspect-ratio: 1/1;
    width: 1.5em;
    text-align: center;
    border-radius: 4px;
    color: white;
    padding: 1px 2px 3px;
    font-size: 14px;
}

@media (min-width: 640px) {
    #q-and-a h2.base-h2 {
        background: var(--color-main);
        padding: 4px 8px;
        color: white;
        display: block;
        width: fit-content;
        position: sticky;
        top: 80px;
        z-index: 20;
    }

    #q-and-a ul.items li.item {
        display: flex;
        align-items: flex-start;
        background: none;
        position: relative;
    }

    #q-and-a ul.items li.item > h3 {
        flex-basis: clamp(300px, 30%, 400px);
        flex-shrink: 0;
        color: var(--color-main);
        border-bottom: solid 1px var(--color-main);
        border-image: unset;
        font-weight: 600;
        width: 100%;
        position: sticky;
        top: calc(80px + 4em);
        z-index: 10;
    }

    #q-and-a ul.items li.item > .qas-wr {
        flex-basis: 50%;
        flex-grow: 1;
        padding: 0 12px;
        background: var(--color-bg);
    }
}

@media (min-width: 850px) {
    #q-and-a ul.items details.qas {
        padding-bottom: 0;
        z-index: 10;
    }

    #q-and-a details.qas::before {
        right: 0;
        width: 7em;
        box-sizing: content-box;
        z-index: 20;
        border-radius: 4px 0 4px 0;
    }

    #q-and-a details.qas::after {
        right: 6em;
        left: auto;
        z-index: 20;
    }
    
    #q-and-a ul.items li.item > ul.qas li details summary  {
        padding-right: 8em;
        padding-left: 56px;
        border-radius: 4px;
    }

    #q-and-a ul.items li.item > ul.qas li details p {
        padding-bottom: 27px;
        padding-left: 56px;
    }
}

/**************************************************

    ポイント

****************************************************/

#point .color-bg {
    color: white;
}

#point .color-bg h2.base-h2,
#point .color-bg h3.base-h3 {
    color: white;
}

#point .img-main {
    width: min(80%, 250px);
    display: block;
    margin: 1em auto;
}

#point .support-case {
    margin-top: 72px;
}

#point .case {
    color: var(--color-main);
}

#point .con a {
    text-decoration: none;
}

.cases {
    margin: 48px auto;
}

.cases .item.btn-area {
    background: none;
    display: block;
    box-shadow: unset;
}

.cases .item.btn-area .btn1 {
    width: min(100%, 300px);
    margin: 8px auto;
    background: none;
}

.color-bg .cases .item.btn-area .btn1 {
    border: solid 1px white;
}

.color-bg .cases .item.btn-area .btn1 p {
    color: white;
}

#point .side-head {
    display: none;
}

@media (min-width: 640px) {
    #point .base-h2 {
        text-align: center;
    }

    #point .con > p {
        text-align: center;
    }
}

@media (min-width: 1200px) {

    #point .main-con {
        position: relative;
        display: flex;
    }

    #point .side-head {
        display: block;
        position: sticky;
        top: 100px;
        right: calc(100% + 100px);
        left: auto;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 24px;
        font-weight: bold;
        text-align: start;
        height: fit-content;
        z-index: 999;
        width: 100px;
        transition: opacity 0s;
        opacity: 0;
    }

    #point .main-con:has(.in-sec) .side-head {
        opacity: 1;
        transition: opacity .3s;
    }

    #point .side-head > span {
        display: block;
        font-size: 32px;
        letter-spacing: .1em;
        line-height: 1.2;
        color: var(--color-main);
        opacity: .3;
        text-align: end;
    }

    #point .color-bg .side-head > span {
        color: white;
    }
    
    #point .side-head > span b {
        font-size: 56px;
    }

    #point .side-head > span:first-child {
        margin-bottom: 74px;
    }

    #point .con {
        width: 1100px;
    }

    #point .grid-3-row.num-card {
        padding-bottom: 64px;
    }

    #point .grid-3-row.num-card .item:nth-child(2) {
        transform: translateY(32px);
    }

    #point .grid-3-row.num-card .item:nth-child(3) {
        transform: translateY(64px);
    }

    #point .cases .item:nth-child(1) {
        order: 2;
    }

    #point .cases .item:nth-child(2) {
        order: 3;
    }

    #point .cases .item.btn-area {
        order: 1;
    }
}