
/*====================================================
////id |  about
====================================================*/
.about-inner {
    display: grid;
        grid-gap: min(4vw, 20px) min(5vw, 60px);
    padding-bottom: min(13vw, 90px);
}
.about-head-wrapper {
}
.about-head-en {
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1em;
    position: relative;
}
.about-head-en .shadow {
    font-size: 3.9em;
    opacity: .08;
    position: absolute;
        left: 0;
        bottom: 0;
    width: 100%;
}
.about-head {
    font-family: var(--font_jp);
}
.about-head .big {
    font-size: 1.7em;
}
/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
    #about::before {
        height: min(26vw, 150px);
    }
    .about-head-wrapper {
        text-align: center;
    }
    .about-head-en {
        font-size: min(4.8vw, 1.8rem);
    }
    .about-head-en .shadow {
        font-size: 2.7em;
    }
    .about-head {
        font-size: min(6.4vw, 3rem);
    }
    .about-text {
        display: flex;
            justify-content: center;
        font-size: min(4.5vw, 1.8rem);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
    #about::after {
        background: url('../img/top/about-bg.png') no-repeat bottom right / cover;
        content: '';
        display: block;
        margin: auto;
        position: absolute;
            right: 0;
            bottom: 0;
        width: min(50%, 350px);
        height: 100%;
    }

    .about-inner {
            grid-template-columns: auto 1fr;
    }
    .about-head {
        font-size: min(2.7vw, 3.5rem);
    }
    .about-head-en {
        font-size: min(1.8vw, 1.8rem);
    }
    .about-text {
        display: flex;
            justify-content: flex-end;
        font-size: min(1.9vw, 2.2rem);
        margin-top: .2em;
    }
    .about-text.show {
        animation-delay: .9s;
    }
}
@media screen and (min-width:769px) and (max-width:960px) {
}

@media (hover: hover) {}

/*====================================================
////id |  category_list
====================================================*/
.category-item-outer {
    overflow: hidden;
    position: relative;
    transition: .3s ease-in-out;
}
.category-item-outer::after {
    background: linear-gradient(to bottom, rgba(241, 241, 241, 0), rgba(241, 241, 241, 1));
    content: '';
    display: block;
    margin: auto;
    pointer-events: auto;
    position: absolute;
        left: 0;
        bottom: 0;
    transition: .2s linear;
    width: 100%;
    height: 100px;
}
.category-item-outer.finish::after {
    opacity: 0;
}
.category-item-wrapper {
    display: grid;
        align-items: flex-start;
        grid-gap: min(7vw, 50px) min(4vw, 30px);
}
.category-item {
}
.category-item-img {
    margin: auto;
    width: min(80%, 140px);
}
.category-item-img .coverImg {
    background: #fff;
    border-radius: 100%;
    padding-top: 100%;
}
.category-item-img .coverImg img {
    transition: .3s ease-in-out;
    width: 70%;
    height: 70%;
}
.category-item dt {
    display: flex;
        align-items: center;
        justify-content: center;
    font-weight: 700;
    line-height: 1.3;
    margin-top: .3em;
    min-height: 2.8em;
    text-align: center;
    transition: .3s ease-in-out;
}
.category-moreBtn {
	background: #fff;
    border: solid 1px var(--mainColor);
	border-radius: 2em;
	cursor: pointer;
	display: flex;
		align-items: center;
		grid-gap: 0 .4em;
        justify-content: center;
    font-weight: 500;
	line-height: 1.5;
	margin: auto;
	opacity: 1;
	padding: .3em .8em;
    position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
    text-align: center;
	transition: .2s ease-in-out;

    width: 300px;
    height: 50px;
    z-index: 10;
}
.category-moreBtn .arrow {
    transform: rotate(90deg);
}

/* ////////// mobile ////////// */
@media screen and (max-width: 960px) {
    .category-item-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .category-item-img {
        max-width: 170px;
    }

    .category-item dt {
        font-size: min(4.6vw, 1.8rem);
    }
    .category-item dd {
        font-size: min(3.7vw, 1.4rem);
    }
}

@media screen and (max-width: 600px) {
    .category-item-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 960px) {
    .category-item-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    }
    .category-item dt {
        font-size: min(1.8vw, 2rem);
    }
    .category-item dd {
        font-size: min(1.8vw, 1.6rem);
    }
}

@media screen and (min-width:769px) and (max-width:960px) {
    .category-item dt {
        font-size: min(2.4vw, 1.8rem);
    }
}

@media (hover: hover) {
    .category-item:hover img {
        transform: scale(1.05);
    }
    .category-item:hover dt {
        color: var(--mainColor);
    }
    .category-moreBtn:hover {
        background: var(--w_green);
    }

}

/*====================================================
////id |  recommend
====================================================*/
/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
    .recommend-item-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
    .recommend-item-wrapper .archive-item-title {
        font-size: min(3.4vw, 1.7rem);
    }
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 1300px) {
    .recommend-item-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}


#download .download-inner {
    padding-top: min(2vw, 40px);
}

/*====================================================
////id |  xxx
====================================================*/

/* ////////// mobile ////////// */
@media screen and (max-width: 769px) {
}

/* ////////// PC ////////// */
@media print, screen and (min-width: 769px) {
}

@media (hover: hover) {}
