header {
    height: 0;
}
header.first .headerBox {
    opacity: 0;
}
header.global .headerBox {
    opacity: 1;
}
/*====================================================
////id |  mv
====================================================*/
#mv {
    overflow: hidden;
}
.mv-img {
    position: absolute;
        top: 0;
        left: 0;
    width: 100%;
    height: 100%;
}
.mv-img::before,
.mv-img::after {
    background: var(--l_yellow);
    content: '';
    clip-path: polygon(0 0, 100% 0, 0 100%);
    display: block;
    margin: auto;
    opacity: .6;
    position: absolute;
    width: 60vw;
    height: 27vw;
    z-index: 10;
}
.mv-img::before {
    top: 0;
    left: -20vw;
}
.mv-img::after {
    transform: rotate(180deg);
    right: 0;
    bottom: 0;
}
.mv-slider ,
.mv-slider .slick-list,
.mv-slider .slick-track,
.mv-slider .mv-img-item {
    margin: 0;
    width: 100%;
    height: 100%;
}
.mv-text {
    display: flex;
        align-items: center;
    height: 100vh;
}
.mv-text h1 img {
    width: min(70vw, 650px);
}
.mv-text p {
    margin-top: .3em;
}

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .mv-img::before,
    .mv-img::after {
        width: 70vw;
        height: 34vw;
    }


    .mv-text {
        min-height: 600px;
        max-height: 220vw;
    }
    .mv-text h1 img {
        width: 70vw;
    }
    .mv-text p {
        font-size: 11vw;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .mv-text {
        min-height: 700px;
    }
    .mv-text h1 img {
        width: min(50vw, 650px);
    }
    .mv-text p {
        font-size: min(7vw, 9rem);
    }

}

@media (hover: hover) {}

/*====================================================
////id |  service
====================================================*/
.service-bg_text {
    top: .4em;
    right: .3em;
}
.service-deco {
    mix-blend-mode: darken;
    left: 65%;
    bottom: 10px;
    width: 35%;
    height: 63%;
}
.service-deco.show {
    animation-delay: .5s;
}
.service-main-inner {
    padding-bottom: min(7vw, 70px);
}
.service-head {
    margin-bottom: 1em;
}
.service-item-wrapper {
    display: grid;
        grid-gap: 12px;
}
.service-item-inner {
    background: #fff;
    border: solid 1px var(--d_gray);
    display: grid;
        grid-gap: min(2vw, 20px) 20px;
        grid-template-columns: min(34%, 180px) 1fr;
    height: 100%;
    padding: min(4vw, 40px) min(3vw, 20px);
    position: relative;
}
.service-item .coverImg {
    padding-top: 100%;
}
.service-item dt {
    margin-bottom: .6em;
    padding-bottom: .5em;
    position: relative;
}
.service-item dt::after {
    border-bottom: solid 3px var(--yellow);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        left: 0;
        bottom: 0;
    width: 1.3em;
    height: 0;
}
.service-link {
    display: flex;
        gap: min(2vw, 20px) min(2vw, 40px);
        justify-content: center;
    margin-top: min(7vw, 70px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
    .service-head {
        font-size: min(4.5vw, 5rem);
    }
    .service-text p {
        font-size: min(2.2vw, 2.2rem);
        line-height: 2;
    }
    .service-item-inner {
        grid-template-columns: min(34%, 140px) 1fr;
        padding: min(4vw, 20px) min(3vw, 20px);
    }
    .service-item dt {
        font-size: min(5vw, 2.0rem);
    }
    .service-link {
        display: grid;
    }
}
@media screen and (max-width: 768px) {
    .service-deco {
        left: 35%;
        bottom: 10px;
        width: 65%;
        height: 75%;
    }
    .service-deco div {
        opacity: .4;
    }
    .service-head {
        font-size: min(6vw, 5rem);
    }
    .service-text p {
        font-size: min(4.2vw, 2rem);
    }

}
@media screen and (max-width: 600px) {
    .service-item-inner {
        grid-template-columns: 1fr;
    }
    .service-item .img {
        margin: auto;
        position: absolute;
           top: min(4vw, 40px);
           left: min(3vw, 20px);
        width: min(20vw, 80px);
    }
    .service-item dt {
        display: flex;
            align-items: center;
        padding-bottom: 0;
        padding-left: min(23vw, 100px);
        height: min(20vw, 80px);
    }
    .service-item dt::after {
        display: none;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
    .service-deco {
    }
    .service-head {
        font-size: min(4.5vw, 5rem);
    }
    .service-text p {
        font-size: min(1.8vw, 2.2rem);
        line-height: 2.5;
    }
    .service-item-wrapper {
        grid-template-columns: 1fr 1fr;
    }
    .service-item .text {
        display: flex;
            align-items: center;
    }
    .service-item dt {
        font-size: min(2.2vw, 2.6rem);
    }
}

@media (hover: hover) {}

/*====================================================
////id |  trouble
====================================================*/
#trouble {
    background: url('../img/top/top-truble_bg.webp') no-repeat center / cover;
    overflow: hidden;
    position: relative;
}
#trouble::after {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1920 160"><path fill="%23ffffff" d="M0,160h1920v-18.61S1440,0,960,0,0,141.39,0,141.39v18.61Z" /></svg>') no-repeat bottom center / contain;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        bottom: -1px;
        left: -2%;
    width: 104%;
    height: 8.4vw;
}
.trouble-inner {
    padding: min(10vw, 90px) 0 12vw;
}
.toruble-head {
    font-size: min(4vw, 4rem);
    line-height: 1.2;
    margin-bottom: 1em;
    text-shadow: 0 0 .2em #fff, 0 0 .2em #fff, 0 0 .2em #fff, 0 0 .2em #fff, 0 0 .2em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff, 0 0 .1em #fff;
}
.trouble-item-wrapper {
    display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    width: 100%;
}
.trouble-item {
    display: flex;
        align-items: flex-start;
        justify-content: center;
    position: relative;
}
.trouble-item:nth-child(2).show ,
.trouble-item:nth-child(5).show {
    animation-delay: .3s;
}
.trouble-item:nth-child(3).show ,
.trouble-item:nth-child(8).show {
    animation-delay: .6s;
}
.trouble-item:nth-child(4).show ,
.trouble-item:nth-child(10).show {
    animation-delay: .8s;
}
.trouble-item-inner {
    background: #fff;
    border: solid 1px var(--d_gray);
    border-radius: min(3vw, 15px);
    display: flex;
        align-items: center;
        justify-content: center;
    line-height: 1.6;
    min-height: 5.5em;
    padding: .5em;
    position: relative;
    text-align: center;
    width: 18em;
}
.trouble-item-inner::before,
.trouble-item-inner::after {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
    width: 1em;
    height: 1em;
}
.trouble-item-inner::before {
    background: var(--d_gray);
    top: 100%;
}
.trouble-item-inner::after {
    background: #fff;
    top: calc(100% - 2px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .toruble-head {
        font-size: min(5.5vw, 4rem);
    }
    .trouble-item-wrapper {
        align-items: center;
        font-size: min(3.25vw, 1.6rem);
        gap: 1.3em min(1vw, 10px);
        justify-content: space-evenly;
        margin-bottom: 5vw;
    }
    .trouble-item-inner {
        min-height: 4.5em;
        padding: .5em 1em;
        width: auto;
    }
    .trouble-item:nth-child(odd) .trouble-item-inner:before {
        left: 15%;
    }
    .trouble-item:nth-child(odd) .trouble-item-inner:after {
        left: calc(15% - 1px);
    }
    .trouble-item:nth-child(even) .trouble-item-inner:before {
        clip-path: polygon(0 0, 100% 0, 0 100%);
        right: 15%;
    }
    .trouble-item:nth-child(even) .trouble-item-inner:after {
        clip-path: polygon(0 0, 100% 0, 0 100%);
        right: calc(15% - 1px);
    }

}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
    .trouble-item-wrapper {
        font-size: min(1.35vw, 1.6rem);
    }
    .trouble-item:nth-child(1),
    .trouble-item:nth-child(2),
    .trouble-item:nth-child(3),
    .trouble-item:nth-child(4) {
        width: 24%;
    }
    .trouble-item:nth-child(n + 5) {
        width: 30%;
    }
    .trouble-item:nth-child(n + 8) {
        width: 27%;
    }
    .trouble-item-inner {
        border-radius: min(1.25vw, 20px);
    }
    .trouble-item-1 {
        margin-top: 1.5em;
        transform: translateY(.5em);
    }
    .trouble-item:nth-child(3) {
        z-index: 5;
    }
    .trouble-item-3 {
        transform: translateX(2vw);
    }
    .trouble-item-4 {
        margin-top: 1.5em;
    }
    .trouble-item:nth-child(5) {
        margin-left: 10%;
    }
    .trouble-item-5 {
    }
    .trouble-item-6 {
        margin-top: -1em;
        transform: translateX(1em);
    }
    .trouble-item-7 {
        margin-top: 2em;
    }
    .trouble-item:nth-child(8) {
        margin-left: 5%;
    }
    .trouble-item-8 {
        margin-top: -.5em;
    }
    .trouble-item-9 {
        margin-top: -2.5em;
    }
    .trouble-item:nth-child(10) {
        margin-right: 12%;
    }
    .trouble-item-10 {
        margin-top: -.5em;
    }
    .trouble-item-1::before ,
    .trouble-item-2::before ,
    .trouble-item-5::before ,
    .trouble-item-8::before ,
    .trouble-item-9::before {
        left: 15%;
    }
    .trouble-item-1::after ,
    .trouble-item-2::after ,
    .trouble-item-5::after ,
    .trouble-item-8::after ,
    .trouble-item-9::after {
        left: calc(15% - 1px);
    }
    .trouble-item-3::before ,
    .trouble-item-4::before ,
    .trouble-item-6::before ,
    .trouble-item-7::before ,
    .trouble-item-10::before {
        clip-path: polygon(0 0, 100% 0, 0 100%);
        right: 15%;
    }
    .trouble-item-3::after ,
    .trouble-item-4::after ,
    .trouble-item-6::after ,
    .trouble-item-7::after ,
    .trouble-item-10::after {
        clip-path: polygon(0 0, 100% 0, 0 100%);
        right: calc(15% - 1px);
    }

}

@media screen and (min-width:769px) and (max-width:960px) {
    .trouble-item-wrapper {
        font-size: min(1.5vw, 1.6rem);
        margin: 0 -4%;
        width: 108%;
    }
}

@media print, screen and (min-width: 1200px) {
}


@media (hover: hover) {}

/*====================================================
////id |  feature
====================================================*/
.feature-message {
    line-height: 1.4;
    margin-top: -2vw;
}
.feature-message .big {
    font-size: 1.35em;
}
.feature-item {
    position: relative;
}
.feature-item::before {
    background: var(--l_yellow);
    border: solid var(--d_gray);
    border-width: 0 2px 2px 0;
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: min(1vw, 6px);
        left: min(1vw, 6px);
    width: 100%;
    height: 100%;
    z-index: -1;
}
.feature-item dl {
    background: #fff;
    border: solid 2px var(--d_gray);
    padding: min(1.5vw, 30px) min(1.5vw, 20px) min(1.5vw, 20px);
    position: relative;
    width: 100%;
    height: 100%;
}
.feature-item dt {
    display: flex;
        align-items: center;
        justify-content: center;
    line-height: 1.6;
    min-height: 3.5em;
    text-align: center;
}
.feature-item dd {
    padding:  min(1.5vw, 20px);
}
.feature-text {
    margin-top: min(7vw, 40px);
}
.feature-link {
    margin-top: min(8vw, 50px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 959.8px) {
    .feature-deco.deco-1 {
        background-position: left;
        top: 130px;
        left: -7vw;
        width: min(50vw, 450px);
        height: min(60vw, 600px);
    }
    .feature-deco.deco-2 {
        left: 5%;
        bottom: 0;
        width: 95%;
        height: min(40vw, 270px);
    }
    .feature-inner {
        padding: 5vw 0 30vw;
    }
    .feature-message {
        font-size: min(4.2vw, 2.8rem);
    }
    .feature-item-wrapper {
        display: grid;
            grid-gap: min(4vw, 20px);
            justify-content: center;
    }
    .feature-item dl {
        padding: min(3vw, 30px) min(2vw, 20px);
    }
    .feature-item dt {
        font-size: min(4.5vw, 2.0rem);
    }
    .feature-text p {
        font-size: min(4.2vw, 1.8rem);
    }
}

@media screen and (max-width: 769px) {
    .feature-deco.deco-1 {
        top: 20vw;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
    .feature-deco.deco-1 {
        top: 1vw;
        right: 75%;
        width: min(30vw, 450px);
        height: 90%;
    }
    .feature-deco.deco-2 {
        left: 55%;
        bottom: 0;
        width: 45%;
        height: min(18vw, 270px);
    }
    .feature-inner {
        padding-top: 0;
    }
    .feature-message {
        font-size: min(3.5vw, 4rem);
    }
    .feature-item-wrapper {
        display: flex;
            gap: min(2vw, 38px);
            justify-content: center;
    }
    .feature-item {
        flex: 1;
        max-width: 35%;
    }
    .feature-item:nth-child(2).show {
        animation-delay: .3s;
    }
    .feature-item:nth-child(3).show {
        animation-delay: .6s;
    }
    .feature-item::before {
        top: min(.5vw, 10px);
        left: min(.5vw, 10px);
    }
    .feature-item dt {
        font-size: min(2.0vw, 2.2rem);
    }
    .feature-text p {
        font-size: 1.8rem;
    }
}

@media screen and (min-width:960px) and (max-width:1330px) {
    .feature-item dt {
        min-height: 3.5em;
    }
    .feature-item dt br.display-pc2 {
        display: block;
    }
}

@media screen and (min-width:1330px) {
}

@media (hover: hover) {}

/*====================================================
////id |  voice
====================================================*/
.voice-item-inner {
    display: grid;
        grid-gap: 10px;
        grid-template-rows: 1fr auto;
    width: 100%;
    height: 100%;
}
.voice-balloon {
    background: #fff;
    border: solid 1px var(--d_gray);
    border-radius: min(3vw, 20px);
    display: flex;
        align-items: center;
        justify-content: center;
    line-height: 1.6;
    padding: .8em 1.2em;
    position: relative;
}
.voice-balloon::before,
.voice-balloon::after {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
    width: 1em;
    height: 1em;
}
.voice-balloon::before {
    background: var(--d_gray);
    top: 100%;
    left: min(4vw, 30px);
}
.voice-balloon::after {
    background: #fff;
    top: calc(100% - 2px);
    left: calc(min(4vw, 30px) - 1px);
}

.voice-user {
    display: grid;
        align-items: center;
        grid-gap: min(2vw, 15px);
        grid-template-columns: min(25%, 80px) 1fr;
    padding-left: min(20%, 50px);
}
.voice-icon .coverImg {
    padding-top: 100%;
}
.voice-name {
    font-size: .9em;
    line-height: 1.4;
}
.voice-link {
    margin-top: min(8vw, 50px);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}

@media (hover: hover) {}

/*====================================================
////id |  flow
====================================================*/
#flow {
    border: solid var(--d_gray);
    border-width: min(2vw, 10px) 0;
    overflow: hidden;
}
.flow-deco {
    bottom: 20px;
    right: -10vw;
    width: 55%;
    height: 70%;
}
.flow-deco div {
    opacity: .2;
    width: 100%;
    height: 100%;
}
.flow-deco.show {
    animation-delay: .5s;
}
.flow-item-wrapper {
    display: grid;
        grid-gap: 14px;
}
.flow-item {
    display: grid;
        grid-template-columns: min(16vw, 90px) 1fr;
        grid-gap: min(3vw, 38px);
    line-height: 1.6;
    position: relative;
}
.flow-arrow {
    position: absolute;
        top: 0;
        left: 0;
    width: min(16vw, 90px);
    height: 100%;
}
.flow-arrow::before {
    border-left: solid 3px #2A2929;
    /* border-left: solid 3px #f00; */
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: calc(min(16vw, 90px) - 2px);
        left: min(8vw, 45px);
    width: 0;
    height: 0;
}
.flow-item.show .flow-arrow::before {
    animation: flow_arrow-1 2s 2s ease-out forwards;
}
@keyframes flow_arrow-1 {
    to {
        height: calc(100% - min(16vw, 90px) + 2px);
    }
}
.flow-arrow::after {
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 33 18"><path fill="%232a2929" d="M16.51,18c-.4,0-.78-.16-1.06-.44L.44,2.56c-.59-.59-.59-1.54,0-2.12.59-.59,1.54-.59,2.12,0l13.94,13.94L30.44.44c.59-.59,1.54-.59,2.12,0,.59.59.59,1.54,0,2.12l-14.99,15c-.28.28-.66.44-1.06.44Z" /></svg>') no-repeat center / contain;
    content: '';
    display: block;
    margin: auto;
    opacity: 0;
    position: absolute;
        top: calc(min(13vw, 75px));
        left: calc(50% - min(2.7vw, 14px));
    width: min(5.8vw, 31px);
    height: min(30vw, 15px);
}
.flow-item.show .flow-arrow::after {
    animation: flow_arrow-2 2s 2s ease-out forwards;
}
@keyframes flow_arrow-2 {
    to {
        opacity: 1;
        top: calc(100% - min(3vw, 15px) + 2px);
    }
}

.flow-circle {
    position: absolute;
        top: 0;
        left: 0;
    width: min(16vw, 90px);
    height: min(16vw, 90px);
}
.flow-circle::after {
    background: #fff;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    content: '';
    display: block;
    margin: auto;
    position: absolute;
        top: min(8vw, 45px);
        left: calc(min(8vw, 45px) + 2.5px);
    width: min(5vw, 28px);
    height: min(8vw, 45px);
}
.circle-animation {
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    transform: rotate(80deg) scale(1, -1);
    transform-origin: 50% 50%;
}
.flow-item.show .circle-animation {
    animation: dash 2s ease-in forwards;
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.flow-no {
    display: flex;
        align-items: center;
        justify-content: center;
    font-size: min(9vw, 5rem);
    position: relative;
    text-shadow: 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black), 0 0 1px var(--black);
    width: min(16vw, 90px);
    height: min(16vw, 90px);
}

.flow-item:nth-child(1) .flow-arrow {
    opacity: .2;
}
.flow-item:nth-child(1) .flow-no {
    color: #FFF6A2;
}
.flow-item:nth-child(2) .flow-arrow {
    opacity: .4;
}
.flow-item:nth-child(2) .flow-no {
    color: #FCDE90;
}
.flow-item:nth-child(3) .flow-arrow {
    opacity: .6;
}
.flow-item:nth-child(3) .flow-no {
    color: #F8BF7A;
}
.flow-item:nth-child(4) .flow-arrow {
    opacity: .8;
}
.flow-item:nth-child(4) .flow-no {
    color: #F5AA6A;
}
.flow-item:nth-child(5) .flow-no {
    color: #F28D55;
}

.flow-item:last-child .flow-arrow::before,
.flow-item:last-child .flow-arrow::after,
.flow-item:last-child .flow-circle::after {
    display: none;
}

.flow-text dt {
    font-size: min(5vw, 1.5em);
    line-height: 1.4;
    margin-top: min(3vw, 16px);
}
.flow-text dd {
    display: grid;
        align-items: start;
    margin-top: .8em;
    padding-bottom: 1em;
}
.flow-point {
    background: rgba(254, 230, 9, .15);
    border-radius: min(2vw, 10px);
    font-size: .9em;
    margin-top: 2em;
    padding: 1em 1.2em;
}
.flow-point .title {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 120 5"><path fill="%23000000" d="M1.45,4.63c-.47-.03-.89-.29-1.12-.7C0,3.42-.09,2.96.1,2.66c.29-.34.73-.5,1.16-.45.75,0,1.52.04,2.26.08,1.03.08,2.06.11,3.1.08,3.67-.18,7.34-.38,11.02-.6l.27-.02c3.05-.17,6.11-.35,9.16-.51,7.48-.38,14.92-.71,22.08-1,11.09-.45,22.19-.2,32.54.13,1.74.06,3.48.11,5.22.16,3.79.11,7.71.21,11.58.4,3.36.17,6.83.43,9.9.66,1.61.12,3.22.24,4.83.35.7.05,1.4.09,2.1.13,1.14.06,2.18.12,3.21.21.5.04.96.31,1.23.75.27.41.31.94.09,1.38-.15.41-.57.66-1,.59-2.04-.61-4.13-1-6.25-1.18-1.33-.13-2.66-.22-3.98-.3l-1.1-.07c-5.7-.37-10.94-.64-16.01-.82-7.38-.27-13.96-.44-20.11-.52-5.43-.07-11.25-.11-17.04.06-9.43.29-18.96.73-27.84,1.17-3.2.16-6.41.38-9.51.59-2.42.17-4.83.33-7.25.47-1.56.09-3.15.12-4.7.16h-.18c-1.03.03-2.06.05-3.09.09-.12,0-.23,0-.35,0" /></svg>') no-repeat center bottom / contain;
    margin: auto;
    padding-bottom: .2em;
    position: absolute;
        top: -1em;
        left: -1em;
    transform: rotate(-5deg);
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
    .flow-deco {
        bottom: auto;
        top: min(80vw, 300px);
        right: -10%;
        width: min(130%, 600px);
        max-height: 180vw;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}
@media print, screen and (min-width: 960px) {
    .flow-text dd {
        grid-template-columns: 1fr auto;
    }
    .flow-point {
        margin-top: 0;
        margin-left: min(5vw, 45px);
        width: min(35vw, 350px);
    }

}
@media print, screen and (min-width: 1700px) {
    .flow-deco {
        right: 0;
    }
}

@media (hover: hover) {}


/*====================================================
////id |  faq
====================================================*/
.faq-head {
    text-align: left;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 959.8px) {
    .faq-link {
        justify-content: center;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
    .faq-inner {
        display: grid;
            align-items: flex-start;
            grid-template-columns: 200px 1fr;
            grid-template-rows: 1fr auto;
            grid-gap: 0 min(5vw, 80px);
    }
    .faq-item-wrapper {
        grid-column: 2;
        grid-row: 1 / 3;
    }
}

@media (hover: hover) {}

/*====================================================
////id |  column
====================================================*/
.column-head {
    text-align: left;
}
.archive-item-title {
    font-size: min(3.4vw, 1.4rem);
}

/* ////////// mobile ////////// */
@media screen and (max-width: 959.8px) {
    .column-link {
        justify-content: center;
    }
}
@media screen and (min-width:769px) and (max-width:1329.8px) {
    .archive-item:nth-child(4) {
        display: none;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
    .column-inner {
        display: grid;
            align-items: flex-start;
            grid-template-columns: 200px 1fr;
            grid-template-rows: 1fr auto;
            grid-gap: 0 min(5vw, 80px);
    }
    .archive-item-wrapper {
        grid-column: 2;
        grid-row: 1 / 3;
        grid-template-columns: repeat(3, 1fr);
    }

}

@media screen and (min-width:1330px) {
    .archive-item-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (hover: hover) {}

/*====================================================
////id |  xxx
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}

@media (hover: hover) {}