@charset "utf-8";
.secCmnHero.imgBack{
    background-image: url(../img/works/works_bg.jpg);
}
@media only screen and (max-width:1215px){
    .secCmnHero.imgBack{
        background-image: url(../img/works/works_bg_sp.jpg);
    }
}
@media only screen and (min-width:1216px){
    .pageWorks .mainWrapper{
        padding-top: 0;
        position: relative;
    }
    .pageWorks #pnkz{
        position: absolute;
        top: 15.2rem;
    }
    .pageWorks #pnkz li{
        color: #fff;
    }
}
.secCmnHero .Cmntiteng{
    display: inline-block;
    position: relative;
}
.secCmnHero .imgHerotxt{
    position: absolute;
    display: inline-block;
    width: 18.3rem;
    height: 5.6rem;
    bottom: -0.5rem;
    right: -10rem;
}
.secCmnHero .imgHerotxt img{
    vertical-align: top;
}
@media only screen and (max-width:1215px){
    .pageWorks .mainWrapper{
        padding-top: 0;
    }
    .secCmnHero .imgHerotxt{
        width: 9rem;
        height: 2.7rem;
        bottom: -0.5rem;
        right: -6.2rem;
    }
}

/* secWorks */
.secWorks{
    margin-top: 0;
    padding-bottom: 20.5rem;
}
/* .secSearch */
.secSearch{
    background: url(../img/common/bgBodyBlack.png) var(--textColor) repeat;
    color: #fff;
}
@media only screen and (min-width:1216px){
    .secSearch .trigger_box{
        display: none;
    }
    .secSearch .searchCategory{
        display: block!important;
    }
}
.secSearch .searchCategory{
    padding-top: 7rem;
    padding-bottom: 7rem;
}
#searchForm .categoryList{
    position: relative;
    padding-bottom: 2.5rem;
    border-bottom: 0.1rem solid;
    border-color: var(--searchborderColor);
}
#searchForm .categoryItem{
    width: 100%;
}
#searchForm .categoryItem + .categoryItem{
    margin-top: 2.2rem;
}
#searchForm .subtitbox{
    display: block;
}
#searchForm .subtit{
    display: inline-block;
    position: relative;
    padding-right: calc(3rem + 1rem);
    font-size: var(--pcFontSize18);
    line-height: var(--pcLineHeight18_24);
    font-weight: bold;
}
#searchForm .subtit::after{
    content: "";
    position: absolute;
    width: 3rem;
    height: 0.1rem;
    right: 0;
    top: calc(50% - 0.05rem);
    background-color: #fff;
}
#searchForm .itemlist{
    width: 100%;
    margin-top: 2rem;
}
#searchForm .list{
    display: flex;
    flex-wrap: wrap;
}
#searchForm .item{
    min-width: 10rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
#searchForm .itemlist.typeStyle .item{
    min-width: 0;
}
#searchForm .item label{
    position: relative;
    pointer-events: all;
    cursor: pointer;
}
#searchForm .item input{
    position: absolute;
    width: 1rem;
    height: 1rem;
    left: 0;
    top: 0;
    visibility: hidden;
}
#searchForm .txtcheckbox{
    width: 100%;
    height: auto;
    min-height: 3.9rem;
    border: 0.1rem solid;
    border-color: var(--searchborderColor);
    background-color: rgba(255,255,255,0);
    color: #fff;
    border-radius:0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
}
#searchForm .item input:checked + .txtcheckbox{
    background-color: #fff;
    color: var(--textColor);
}
#searchForm .checktxt{
    font-size: var(--pcFontSize13);
    line-height: var(--pcLineHeight13_24);
    text-align: left;
}
#searchForm .underbox{
    width: 100%;
    margin-top: 3rem;
    display: flex;
}
#searchForm .resultbox{
    flex: 1;
    padding-right: 2rem;
    padding-top: 1.7rem;
}
#searchForm .resulttxt{
    font-size: var(--pcFontSize15);
    line-height: var(--pcLineHeight15_30);
    font-weight: bold;
}
#searchForm .resulttag{
    display: inline-block;
    padding-right: 1.4rem;
}
#searchForm .btnbox{
    width: 36rem;
    display: flex;
    justify-content: flex-end;
}
#searchForm .searchbox{
    width: 22rem;
}
#searchForm .resetbox{
    width: 13rem;
    margin-left: 1rem;
}
#searchForm .btn,
#searchForm .resetbtn{
    display: flex;
    align-items: center;
    width: 100%;
    height: 6rem;
    border-radius: 3rem;
    background-color: #fff;
    color: var(--textColor);
}
#searchForm .resetbtn{
    background-color: var(--resetColor);
    color: #fff;
}
#searchForm .btntxt{
    display: inline-block;
    text-align: center;
    width: 100%;
    font-size: var(--pcFontSize15);
    line-height: var(--pcLineHeight15_30);
    font-weight: bold;
}
#searchForm .btnIntxt{
    display: inline-block;
    position: relative;
}
#searchForm .btnIntxt::after{
    content: "";
    position: absolute;
    left: 0;
    background: url(../img/common/tp.gif) center center no-repeat;
    background-size: 100% auto;
}
#searchForm .searchbox .btnIntxt{
    padding-left:calc(1.7rem + 1rem);
}
#searchForm .searchbox .btnIntxt::after{
    width: 1.7rem;
    height: 1.7rem;
    top: calc(50% - 0.85rem);
    background-image: url(../img/works/imgIconSearch.png);
}
#searchForm .resetbox .btnIntxt{
    padding-left:calc(1.2rem + 0.6rem);
}
#searchForm .resetbox .btnIntxt::before,
#searchForm .resetbox .btnIntxt::after{
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.1rem);
    width: 1.4rem;
    height: 0.2rem;
    background-color: #fff;
}
#searchForm .resetbox .btnIntxt::before{
    transform: rotate(45deg);
}
#searchForm .resetbox .btnIntxt::after{
    transform: rotate(-45deg);
}
@media only screen and (max-width: 1215px){
    .secWorks{
        padding-bottom: 10.7rem;
    }
    .secSearch .titbox{
        width: 100%;
        height: 5.5rem;
        display: flex;
        align-items: center;
        position: relative;
        pointer-events: all;
        cursor: pointer;
    }
    .secSearch .titbox::after,
    .secSearch .titbox::before{
        content: "";
        position: absolute;
        width: 1.1rem;
        height: 0.1rem;
        right: 0;
        top: calc(50% - 0.05rem);
        background-color: #fff;
    }
    .secSearch .titbox::before{
        transform: rotate(90deg);
    }
    .secSearch .titbox.on::before{
        transform: rotate(0deg);
    }
    .secSearch .triggertit{
        display: inline-block;
        text-align: left;
        width: 100%;
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_20);
        font-weight: bold;
    }
    .secSearch .titbox:not(.on) + .searchCategory{
        display: none;
    }
    .secSearch .searchCategory{
        padding-top: 2rem;
        padding-bottom: 6rem;
        border-top: 0.1rem solid;
        border-color: #fff;
    }
    #searchForm .categoryList{
        padding-bottom: 1.8rem;
    }
    #searchForm .categoryItem + .categoryItem{
        margin-top: 2rem;
    }
    #searchForm .subtit{
        padding-right:0;
        font-size: var(--spFontSize12);
    }
    #searchForm .subtit::after{
        display: none;
    }
    #searchForm .itemlist{
        margin-top: 1.2rem;
    }
    #searchForm .item{
        min-width: 0rem;
        margin-right: 0.4rem;
        margin-bottom: 0.4rem;
    }
    #searchForm .itemlist.typelineup .item{
        width: calc((100% - 0.8rem) / 3);
        margin-bottom: 0;
    }
    #searchForm .itemlist.typelineup .item:nth-child(3n){
        margin-right: 0;
    }
    #searchForm .itemlist.typelineup .item:nth-child(n+ 4){
        margin-top: 0.4rem;
    }
    #searchForm .itemlist.typeStyle .item{
        min-width: 0;
    }
    #searchForm .txtcheckbox{
        min-height: 3.5rem;
        padding: 0.5rem 0.7rem;
    }
    #searchForm .checktxt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_20);
    }
    #searchForm .underbox{
        margin-top: 1.8rem;
        display: block;
    }
    #searchForm .resultbox{
        width: 100%;
        padding: 0;
    }
    #searchForm .resulttxt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_22);
    }
    #searchForm .resulttag{
        padding-right: 0.7rem;
    }
    #searchForm .btnbox{
        width: 100%;
        display: flex;
        margin-top: 1.7rem;
    }
    #searchForm .searchbox{
        width: calc(100% - (10rem + 1rem));
    }
    #searchForm .resetbox{
        width: 10rem;
        margin-left: 1rem;
    }
    #searchForm .btn,
    #searchForm .resetbtn{
        height: 5rem;
    }
    #searchForm .btntxt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_20);
    }
    #searchForm .searchbox .btnIntxt{
        padding-left:calc(1.7rem + 0.7rem);
    }
    #searchForm .resetbox .btnIntxt{
        padding-left:calc(1.2rem + 0.6rem);
    }
}
/* secWorkslist */
.secWorkslist{
    margin-top:10rem
}
.secWorkslist .listItem{
    position: relative;
}
.secWorkslist .listItem + .listItem{
    margin-top: 15rem;
}
@media only screen and (min-width:1216px){
    .secWorkslist .listItem:nth-child(2n){
        padding-left: 2.5rem;
        padding-right: calc((100% - 150rem) / 2);
    }
    .secWorkslist .listItem:nth-child(2n + 1){
        padding-left: calc((100% - 150rem) / 2);
        padding-right: 2.5rem;
    }
    .secWorkslist .listItem:nth-child(2n) .itemLink{
        padding-left: calc(1100 / 1920 * 100vw);
    }
    .secWorkslist .listItem:nth-child(2n + 1) .itemLink{
        padding-right: calc(1100 / 1920 * 100vw);
    }
    .secWorkslist .listItem:nth-child(2n) .boxSlider{
        left: 0;
    }
    .secWorkslist .listItem:nth-child(2n + 1) .boxSlider{
        right: 0;
    }
    .secWorkslist .listItem:nth-child(2n) .linkInner{
        padding-left: 6rem;
    }
    .secWorkslist .listItem:nth-child(2n + 1) .linkInner{
        padding-right: 6rem;
    }
    .secWorkslist .listItem:nth-child(2n) .moreItem{
        right: 0;
    }
    .secWorkslist .listItem:nth-child(2n + 1) .moreItem{
        right: calc((1100 / 1920 *100vw) + 6rem);
    }
    @media only screen and (max-width:1600px){
        .secWorkslist .listItem:nth-child(2n){
            padding-right: 5rem;
        }
        .secWorkslist .listItem:nth-child(2n + 1){
            padding-left: 5rem;
        }
    }
}
.secWorkslist .itemLink{
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc((780 / 1920) * 100vw);
}
.secWorkslist .boxSlider{
    position: absolute;
    width:calc(1100 / 1920 * 100vw);
    top: 0;
}
.secWorkslist .imgSlider{
    width: 100%;
    height: 0;
    padding-top: calc(780  / 1100 * 100%);
    border-radius: 2rem;
    overflow: hidden;
    z-index: 1;
}
.secWorkslist .linkInner{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
}
.secWorkslist .Thumbbox{
    width: 100%;
    margin-top: 4rem;
}
.secWorkslist .boxThumb{
    display: flex;
    flex-wrap: wrap;
}
.secWorkslist .itemThumb{
    width: calc((100% - 3rem) / 3);
    margin-right: 1.5rem;
    pointer-events: all;
    cursor: pointer;
}
.secWorkslist .itemThumb:last-child,
.secWorkslist .itemThumb:nth-child(3n){
    margin-right: 0;
}
.secWorkslist .imgThumb{
    width: 100%;
    height: 0;
    padding-top: calc((117 / 165) * 100%);
    border-radius: 1rem;
    overflow: hidden;
}
.secWorkslist .imgThumb.on{
    opacity: 0.5;
}
.secWorkslist .txtbox{
    display: inline-block;
    width: 100%;
}
.secWorkslist .txtInner{
    width: 100%;
    display: block;
}
.secWorkslist .tit{
    font-size: var(--pcFontSize36);
    line-height: var(--pcLineHeight36_56);
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: calc((var(--pcFontSize36) * var(--pcLineHeight36_56)) * 2);
}
.secWorkslist .middlebox{
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1.6rem;
}
.secWorkslist .namebox{
    position: relative;
    display: flex;
    align-items: center;
    height: 10rem;
    padding-left: 10rem;
    max-width: calc(100% - (2rem + 8rem));
}
.secWorkslist .namebox:has( + .tagbox .tag.New){
    max-width: calc(100% - (2rem + 8rem + 0.5rem + 3.5rem));
}
.secWorkslist .nameImg{
    position: absolute;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    left: 0;
    top: 0;
}
.secWorkslist .nametxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    font-weight: bold;
    padding-left: 1.8rem;
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.secWorkslist .tagbox{
    width: calc(2rem + 8rem);
    padding-left: 2rem;
}
.secWorkslist .catrgorytags{
    display: flex;
    flex-wrap: wrap;
}
@media only screen and (min-width:1216px){
    .secWorkslist .tagbox:has(.tag.New){
        min-width: calc(2rem + 8rem + 0.5rem + 3.5rem);
        width: auto;
        flex:1;
    }
    .secWorkslist .tagbox:has(.tag.New) .catrgorytags{
        flex-wrap: nowrap;
    }
}
.secWorkslist .tag{
    min-width: 8rem;
    max-width: 100%;
    margin-right: 0.5rem;
    white-space: nowrap;
}
.secWorkslist .tag.New{
    min-width:3.5rem;
    display: flex;
    align-items: center;
}
.secWorkslist .tag:last-child{
    margin-right: 0;
}
.secWorkslist .taginner{
    display: flex;
    align-items: center;
    width: 100%;
    height: 3rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
}
.secWorkslist .taginner.type_FEELE,
.type_FEELE{
    background-color: var(--FEELEColor);
}
.secWorkslist .taginner.type_CARRE,
.type_CARRE{
    background-color: var(--CARREColor);
}
.secWorkslist .taginner.type_YAT,
.type_YAT{
    background-color: var(--YATColor);
}
.secWorkslist .taginner.type_RIV,
.type_RIV{
    background-color: var(--RIVColor);
}
.secWorkslist .taginner.type_COSTA,
.type_COSTA{
    background-color: var(--COSTAColor);
}
.secWorkslist .taginner.type_ZUTTO,
.type_ZUTTO{
    background-color: var(--ZUTTOColor);
}
.secWorkslist .taginner.newIcon{
    background-color: var(--newIconColor);
    border-color: var(--newIconColor);
    height: 2rem;
}
.secWorkslist .tagtxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    font-weight: bold;
    display: inline-block;
    text-align: center;
    width: 100%;
    color: #fff;
}
.secWorkslist .newIcon .tagtxt{
    font-size: var(--pcFontSize10);
    color: var(--textColor);
}
.secWorkslist .commentbox{
    position: relative;
    width: 100%;
    padding: 2rem 2.9rem;
    border: 0.1rem solid;
    border-color: var(--textColor);
    background-color: #fff;
    z-index: 2;
    border-radius: 1rem;
    margin-top: calc(2rem + 0.6rem);
}
.secWorkslist .commentbox::before,
.secWorkslist .commentbox::after{
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    left: 4rem;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.secWorkslist .commentbox::before{
    background-color: var(--textColor);
    top: calc(0% - 2rem);
    z-index: 1;
}
.secWorkslist .commentbox::after{
    background-color: #fff;
    top: calc(0% - 1.8rem);
    z-index: 3;
}
.secWorkslist .commenttxt{
    font-size: var(--pcFontSize18);
    line-height: var(--pcLineHeight18_32);
    font-weight: bold;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    max-height: calc((var(--pcFontSize18) * var(--pcLineHeight18_32)) * 4);
}
.secWorkslist .moreItem{
    display: inline-block;
    position: absolute;
    bottom: 0;
}
.secWorkslist .moreIn{
    position: relative;
    min-width: 14.6rem;
    height: 4rem;
    padding-right: calc(4rem + 1.8rem);
    display: flex;
    align-items: center;
}
.secWorkslist .moreIn::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 2rem);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 0.1rem solid;
    border-color: var(--textColor);
    background-color: #fff;
}
.secWorkslist.lazyloaded .moreIn::after {
    background: url(../img/common/imgMoreArrow.png) center center no-repeat #fff;
    background-size: 0.6rem auto;
}
.secWorkslist .moreIntxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    font-weight: bold;
}
@media only screen and (min-width:1216px){
    .secWorkslist .moreIntxt{
        letter-spacing: var(--pcLetterSpacing14_50);
    }
}
@media only screen and (max-width:1680px){
    .secWorkslist .commenttxt{
        font-size: var(--pcFontSize16);
        line-height: var(--pcLineHeight18_32);
        max-height: calc((var(--pcFontSize16) * var(--pcLineHeight18_32)) * 4);
    }
    .secWorkslist .linkInner{
        padding-bottom: 4rem;
    }
}
@media only screen and (max-width:1215px){
    .secWorkslist{
        margin-top:6rem
    }
    .secWorkslist .listItem + .listItem{
        margin-top: 6rem;
    }
    .secWorkslist .itemLink{
        display: block;
        min-height:0;
    }
    .secWorkslist .boxSlider{
        position: relative;
        width:100%;
    }
    .secWorkslist .imgSlider{
        border-radius: 0.5rem;
    }
    .secWorkslist .linkInner{
        display: block;
        padding-bottom: 5.4rem;
    }
    .secWorkslist .Thumbbox{
        margin-top: 0.7rem;
    }
    .secWorkslist .itemThumb{
        width: calc((100% - 1.4rem) / 3);
        margin-right: 0.7rem;
    }
    .secWorkslist .imgThumb{
        padding-top: calc((76 / 107) * 100%);
        border-radius: 0.5rem;
    }
    .secWorkslist .imgThumb.on{
        opacity: 1;
    }
    .secWorkslist .imgThumb.on::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color:var(--slideMuskColor);
        left: 0;
        top: 0;
    }
    .secWorkslist .txtbox{
        display: block;
        margin-top: 1.4rem;
    }
    .secWorkslist .tit{
        font-size: var(--spFontSize20);
        line-height: var(--spLineHeight20_30);
        max-height: calc((var(--spFontSize20) * var(--spLineHeight20_30)) * 2);
    }
    .secWorkslist .middlebox{
        margin-top: 1.3rem;
    }
    .secWorkslist .namebox{
        height: 7rem;
        padding-left: 7rem;
        max-width: calc(100% - (1.6rem + 8rem));
    }
    .secWorkslist .namebox:has( + .tagbox .tag.New){
        max-width: calc(100% - (1.6rem + 8rem + 0.5rem + 3rem));
    }
    .secWorkslist .nameImg{
        width: 7rem;
        height: 7rem;
    }
    .secWorkslist .nametxt{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_20);
        padding-left: 1rem;
    }
    .secWorkslist .tagbox{
        width: calc(1.6rem + 8rem);
        padding-left: 1.6rem;
    }
    .secWorkslist .tagbox:has(.tag.New){
        width: calc(1.6rem + 8rem + 0.5rem + 3rem);
    }
    .secWorkslist .tag{
        min-width: 8rem;
    }
    .secWorkslist .tag.New{
        min-width:3rem;
    }
    .secWorkslist .taginner{
        height: 2.6rem;
        padding: 0 0.3rem;
    }
    .secWorkslist .taginner.newIcon{
        height: 1.6rem;
        border-radius: 0.3rem;
    }
    .secWorkslist .tagtxt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_18);
    }
    .secWorkslist .newIcon .tagtxt{
        font-size: var(--spFontSize9);
        line-height: var(--spLineHeight9_9);
    }
    .secWorkslist .commentbox{
        padding: 1.3rem 1.9rem;
        border-radius: 0.5rem;
        margin-top: calc(1.4rem + 0.4rem);
    }
    .secWorkslist .commentbox::before,
    .secWorkslist .commentbox::after{
        width: 1.4rem;
        height: 1.3rem;
        left: 2.8rem;
    }
    .secWorkslist .commentbox::before{
        top: calc(0% - 1.3rem);
    }
    .secWorkslist .commentbox::after{
        top: calc(0% - 1.1rem);
    }
    .secWorkslist .commenttxt{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_22);
        max-height: calc((var(--spFontSize13) * var(--spLineHeight13_22)) * 4);
    }
    .secWorkslist .moreItem{
        right: 0;
    }
    .secWorkslist .moreIn{
        min-width: 10rem;
        height: 3.4rem;
        padding-right: calc(3.4rem + 1rem);
    }
    .secWorkslist .moreIn::after {
        top: calc(50% - 1.7rem);
        width: 3.4rem;
        height: 3.4rem;
    }
    .secWorkslist .moreIntxt{
        font-size: var(--spFontSize12);
    }
}

.secWorkslist .secCmnPager{
    margin-top: 15.6rem;
}
@media only screen and (max-width:1215px){
    .secWorkslist .secCmnPager{
        margin-top: 6.7rem;
    }
}


/*-----------------------------------------------
	Details
-----------------------------------------------*/
/* secWorksDetails */
.secWorksDetails{
    margin-top: 5.7rem;
    padding-bottom: 20rem;
}
/* secDetailsHero */
.secDetailsHero{
    width: 100%;
    padding-left: 4rem;
    padding-right: calc((100% - 128rem) / 2);
}
.secDetailsHero .Inner{
    position: relative;
    display: flex;
}
@media only screen and (min-width:1216px){
    .secDetailsHero:not(:has(.mainImg)){
        min-height: 0;
        padding: 0;
        margin: 0 auto;
        width: calc(100% - 10rem);
        max-width: 128rem;
    }
    .secDetailsHero:not(:has(.mainImg)) .txtArea{
        padding-left: 0;
    }
}
.secDetailsHero .herotitle{
    position: absolute;
    top: -0.7rem;
    right: 0;
}
.secDetailsHero .engtit{
    padding-left: calc(2rem + 0.9rem);
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_30);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing20_50);
}
.secDetailsHero .engtit::after{
    content: "";
    position: absolute;
    width: 2rem;
    height: 0.1rem;
    background-color: var(--textColor);
    left: 0;
    top: calc(50% - 0.05rem);
}
.secDetailsHero .imgBox{
    width: calc((820 / 1920) * 100vw);
}
.secDetailsHero .img{
    display: inline-block;
    border-radius:1rem;
    overflow: hidden;
}
.secDetailsHero .txtArea{
    flex: 1;
    padding-left: 8rem;
    padding-top: 7.8rem;
}
.secDetailsHero .onbox{
    display: flex;
    max-width: 100%;
    width: fit-content;
    position: relative;
}
.secDetailsHero .onbox:has(.newIcon){
    padding-right: calc(3.5rem + 1rem);
}
.secDetailsHero .catrgorytags{
    display: flex;
}
.secDetailsHero .tag{
    width: 12rem;
}
.secDetailsHero .taginner{
    width: 100%;
    height: 4rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    color: #fff;
}
.secDetailsHero .tagtxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    display: inline-block;
    width: 100%;
    text-align: center;
    font-weight: bold;
}
.secDetailsHero .namebox{
    flex: 1;
    max-width: calc(100% - 12rem);
    padding-left: 1.9rem;
    padding-top: 0.4rem;
}
.secDetailsHero .nametxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    font-weight: bold;
}
.secDetailsHero .newIcon{
    position: absolute;
    right: 0;
    top: 1rem;
    width: 3.5rem;
    height: 2rem;
    display: flex;
    align-items: center;
    background: var(--newIconColor);
    color: var(--textColor);
    border-radius: 0.3rem;
}
.secDetailsHero .icontxt{
    font-size: var(--pcFontSize10);
    line-height: var(--pcLineHeight10_14);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing10_50);
    text-align: center;
    display: inline-block;
    width: 100%;
}
.secDetailsHero .title{
    font-size: var(--pcFontSize38);
    line-height: var(--pcLineHeight38_60);
    font-weight: bold;
}
.secDetailsHero .onbox + .title{
    margin-top: 3rem;
}
.secDetailsHero .underContent{
    width: 100%;
    border-top: 0.1rem solid;
    border-color: var(--textColorAlpha15);
    margin-top: 2.7rem;
    padding-top: 3.8rem;
}
.secDetailsHero .list{
    width: 100%;
}
.secDetailsHero .item{
    display: flex;
}
.secDetailsHero .item + .item{
    margin-top: 1.2rem;
}
.secDetailsHero .itemtit{
    min-width: 8rem;
    max-width: 15rem;
}
.secDetailsHero .itemtxt{
    flex: 1;
    padding-left: 1.7rem;
}
.secDetailsHero .tit,
.secDetailsHero .txt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_24);
}
.secDetailsHero .tit{
    font-weight: bold;
}
.secDetailsHero .voicebox{
    width: 100%;
    background-color: #fff;
    border: 0.1rem solid;
    border-color: var(--textColor);
    border-radius: 0.5rem;
    margin-top: calc(7rem + 8rem);
}
.secDetailsHero .voiceInner{
    padding: 3rem 4rem;
    padding-top: calc(7rem + 1rem);
    position: relative;
}
.secDetailsHero .voiceImg{
    width: 14rem;
    height: 14rem;
    position: absolute;
    left: calc(50% - 7rem);
    top: calc(0% - 7rem);
}
.secDetailsHero .voiceImg .img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}
.secDetailsHero .voiceImg .img::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0.1rem solid;
    border-color: var(--textColor);
    left: 0;
    top: 0;
}
.secDetailsHero .imgItem{
    width: 14.8rem;
    height: 6.2rem;
    position: absolute;
    top: -3.2rem;
    right: -13.5rem;
}
.secDetailsHero .voicetxt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_32);
    font-weight: bold;
}
@media only screen and (max-width:1215px){
    /* secWorksDetails */
    .secWorksDetails{
        margin-top: 3.1rem;
        padding-bottom: 10rem;
    }
    /* secDetailsHero */
    .secDetailsHero{
        padding: 0;
    }
    .secDetailsHero .Inner{
        display: block;
    }
    .secDetailsHero .herotitle{
        position:relative;
        top: 0;
    }
    .secDetailsHero .engtit{
        padding-left: calc(1rem + 0.5rem);
        font-size: var(--spFontSize18);
    }
    .secDetailsHero .engtit::after{
        width: 1rem;
    }
    .secDetailsHero .imgBox{
        width: 100%;
        margin-top: 2.3rem;
    }
    .secDetailsHero .img{
        border-radius:0.5rem;
        display: block;
    }
    .secDetailsHero .txtArea{
        width: 100%;
        padding: 0;
        margin-top: 1.8rem;
    }
    .secDetailsHero .onbox:has(.newIcon){
        padding-right: calc(3rem + 1rem);
    }
    .secDetailsHero .tag{
        width: 8rem;
    }
    .secDetailsHero .taginner{
        height: 2.6rem;
    }
    .secDetailsHero .tagtxt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_18);
    }
    .secDetailsHero .namebox{
        max-width: calc(100% - 8rem);
        padding-left: 1rem;
        padding-top:0.5rem;
    }
    .secDetailsHero .nametxt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_18);
    }
    .secDetailsHero .newIcon{
        top: 0.6rem;
        width: 3rem;
        height: 1.6rem;
    }
    .secDetailsHero .icontxt{
        font-size: var(--spFontSize9);
        line-height: var(--spLineHeight9_9);
    }
    .secDetailsHero .title{
        font-size: var(--spFontSize18);
        line-height: var(--spLineHeight18_28);
    }
    .secDetailsHero .onbox + .title{
        margin-top: 1.5rem;
    }
    .secDetailsHero .underContent{
        margin-top: 1.4rem;
        padding-top: 1.7rem;
    }
    .secDetailsHero .item + .item{
        margin-top: 0.9rem;
    }
    .secDetailsHero .itemtit{
        min-width: 7rem;
        max-width: 12rem;
    }
    .secDetailsHero .itemtxt{
        padding-left: 1rem;
    }
    .secDetailsHero .tit,
    .secDetailsHero .txt{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_21);
    }
    .secDetailsHero .voicebox{
        margin-top: calc(3rem + 3.5rem);
    }
    .secDetailsHero .voiceInner{
        padding: 2.4rem 2rem;
        padding-top: calc(7.5rem + 1.4rem);
    }
    .secDetailsHero .voiceImg{
        width: 10.5rem;
        height: 10.5rem;
        left: calc(50% - 5.25rem);
        top: calc(0% - 3rem);
    }
    .secDetailsHero .imgItem{
        width: 11.3rem;
        height: 4.6rem;
        top: -2.7rem;
        right: -10.5rem;
    }
    .secDetailsHero .voicetxt{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_22);
    }
}
/* secTagContent */
.secTagContent{
    margin-top: 5rem;
}
.secTagContent .engtitle{
    display: block;
}
.secTagContent .engtit{
    position: relative;
    padding-right: calc(2rem + 0.9rem);
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_30);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing20_50);
    display: inline-block;
}
.secTagContent .engtit::after{
    content: "";
    position: absolute;
    width: 2rem;
    height: 0.1rem;
    background-color: var(--textColor);
    right: 0;
    top: calc(50% - 0.05rem);
}
.secTagContent .taglist{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 1rem;
}
.secTagContent .tags{
    min-width: 10rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
}
.secTagContent .tagInner{
    width: 100%;
    height: auto;
    min-height:3.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: #fff;
    color: var(--textColor);
    border-radius: 0.5rem;
}
.secTagContent .tagtxt{
    font-size: var(--pcFontSize13);
    line-height: var(--pcLineHeight13_24);
}
@media only screen and (max-width:1215px){
    .secTagContent{
        margin-top: 2.4rem;
    }
    .secTagContent .engtitle{
        display: block;
    }
    .secTagContent .engtit{
        padding-right: 0;
        padding-left: calc(1rem + 0.5rem);
        font-size: var(--spFontSize18);
    }
    .secTagContent .engtit::after{
        width: 1rem;
        right: auto;
        left: 0;
    }
    .secTagContent .taglist{
        margin-top: 0;
    }
    .secTagContent .tags{
        min-width: 0;
        margin-right: 0.4rem;
        margin-top: 0.4rem;
    }
    .secTagContent .tagInner{
        min-height: 3.5rem;
        padding: 0.5rem 0.7rem;
    }
    .secTagContent .tagtxt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_20);
    }
}
/* secWorksMain */
.secWorksMain{
    margin-top: 7.7rem;
}
.secWorksMain .mainItem{
    display: block;
}
.secWorksMain .mainItem + .mainItem{
    margin-top: 9.2rem;
}
.secWorksMain .txtInner{
    text-align: left;
}
.secWorksMain .categoryTit{
    display: inline-block;
    max-width: 100%;
    width: fit-content;
    position: relative;
    border-radius:2.5rem 2.5rem 2.5rem 0;
    border: 0.1rem solid;
    border-color: var(--textColor);
    background-color: #fff;
    min-width: 15rem;
}
.secWorksMain .categoryTit::after{
    content: "";
    position: absolute;
    width:1.8rem;
    height: 1.6rem;
    top: calc(0% - 0.8rem);
    left: 3rem;
}
.secWorksMain.lazyloaded .categoryTit::after{
    background: url(../img/works/imgCategory_icon.png) no-repeat center center;
    background-size: 100% auto;
}
.secWorksMain .categoryInner{
    width: 100%;
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:1rem 2rem;
    padding-top: 1.5rem;
}
.secWorksMain .categorytit{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_24);
    font-weight: bold;
    text-align: left;
}
.secWorksMain .txtArea{
    width: 100%;
    text-align: left;
}
.secWorksMain .categoryTit + .txtArea{
    margin-top: 3.3rem;
}
.secWorksMain .txtArea .tit{
    font-size: var(--pcFontSize24);
    line-height: var(--pcLineHeight24_36);
    font-weight: bold;
}
.secWorksMain .txtArea .txt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_36);
}
.secWorksMain .tit + .txt{
    margin-top: 2.1rem;
}
.secWorksMain .detailsSlider{
    margin-top: 5rem;
}
.secWorksMain .swiper{
    width:100rem;
    margin: 0 auto;
    overflow: visible;
}
.secWorksMain .img{
    width: 100%;
    height: 0;
    padding-top: calc(700 / 1000 * 100%);
    border-radius: 1rem;
    overflow: hidden;
}
.secWorksMain img{
    border-radius: 1rem;
}
@media only screen and (min-width:1216px){
    .secWorksMain .swiper-slide:not(.swiper-slide.swiper-slide-active){
        transition: transform 0.2s ease-out;
        transform-origin: center center;
        transform: scale(0.9)!important;
    }
    .secWorksMain .swiper-slide-active{
        transform: scale(1);
    }
}
.secWorksMain .swiper-button-prev,
.secWorksMain .swiper-button-next{
    width:6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: var(--textColor);
    top: calc(50% - 3rem);
}
.secWorksMain .swiper-button-prev.lazyloaded,
.secWorksMain .swiper-button-next.lazyloaded{
    background: url(../img/works/imgArrow_icon_white.png) center center no-repeat var(--textColor);
    background-size: 1rem auto;
}
.secWorksMain .swiper-button-prev{
    left: calc(0% - 3rem);
    transform: rotate(180deg);
}
.secWorksMain .swiper-button-next{
    right: calc(0% - 3rem);
}
.secWorksMain .swiper-button-prev::after,
.secWorksMain .swiper-button-next::after{
    display: none;
}
.secWorksMain .swiper-pagination{
    position: static;
    max-width: 128rem;
    margin: 0 auto;
    margin-top: 2.5rem;
}
.secWorksMain .swiper-pagination-bullet{
    width: 1.2rem;
    height: 1.2rem;
    background-color: #fff;
    border: 0.1rem solid;
    border-color: var(--textColor);
    opacity: 1;
}
.secWorksMain .swiper-pagination-bullet-active{
    background-color: var(--textColor);
}
@media only screen and (min-width:1216px){
    .secWorksMain .swiper-pagination-bullet{
        margin: 0.3rem 0.6rem!important;
    }
}
@media only screen and (max-width:1215px){
    .secWorksMain{
        margin-top: 6rem;
    }
    .secWorksMain .mainItem + .mainItem{
        margin-top: 6.6rem;
    }
    .secWorksMain .categoryTit{
        border-radius:2rem 2rem 2rem 0;
        min-width: 10rem;
    }
    .secWorksMain .categoryTit::after{
        left: 2rem;
    }
    .secWorksMain .categoryInner{
        min-height: 3.8rem;
        padding: 0.5rem 1.5rem;
    }
    .secWorksMain .categorytit{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_21);
    }
    .secWorksMain .categoryTit + .txtArea{
        margin-top: 1.4rem;
    }
    .secWorksMain .txtArea .tit{
        font-size: var(--spFontSize18);
        line-height: var(--spLineHeight18_28);
    }
    .secWorksMain .txtArea .txt{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_26);
    }
    .secWorksMain .tit + .txt{
        margin-top: 0.6rem;
    }
    .secWorksMain .detailsSlider{
        margin-top: 2.3rem;
    }
    .secWorksMain .swiper{
        width:calc((335 / 375) * 100%);
    }
    .secWorksMain .img{
        border-radius: 0.5rem;
    }
    .secWorksMain img{
        border-radius: 0.5rem;
    }
    .secWorksMain .toolbox{
        position: relative;
        padding: 0 calc(1.5rem + 3.1rem);
        width: fit-content;
        margin: 0 auto;
        margin-top: 2.3rem;
    }
    .secWorksMain .swiper-button-prev,
    .secWorksMain .swiper-button-next{
        width: 3.1rem;
        height: 3.1rem;
        top: calc(50% - 1.55rem);
        margin: 0;
    }
    .secWorksMain .swiper-button-prev.lazyloaded,
    .secWorksMain .swiper-button-next.lazyloaded{
        background-size: 0.5rem auto;
    }
    .secWorksMain .swiper-button-prev{
        left: 0;
    }
    .secWorksMain .swiper-button-next{
        right:0;
    }
    .secWorksMain .swiper-pagination{
        max-width: 100%;
        width: fit-content;
        margin-top: 0;
    }
    .secWorksMain .swiper-pagination-bullet{
        width: 0.9rem;
        height: 0.9rem;
        margin: 0.3rem 0.45rem!important;
    }
}
/* secMoviebox */
.secMoviebox{
    margin: 0 auto;
    margin-top: 9.6rem;
    max-width: 96rem;
}
.secMoviebox .moviebox{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(540 / 960 * 100%);
    border-radius: 1rem;
    overflow: hidden;
    z-index: 1;
}
.secMoviebox .moviebox + .moviebox{
    margin-top: 3rem;
}
.secMoviebox .moviebox iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
@media only screen and (max-width:1215px){
    .secMoviebox{
        margin-top: 6.6rem;
        max-width: 100%;
        width: calc(335 / 375 * 100%);
    }
    .secMoviebox .moviebox{
        border-radius: 0.5rem;
    }
    .secMoviebox .moviebox + .moviebox{
        margin-top: 2rem;
    }
}
/* secBnrlist */
.secBnrlist{
    margin-top: 15rem;
}
.secBnrlist .item{
    width: 100%;
}
.secBnrlist .item + .item{
    margin-top: 3rem;
}
.secBnrlist .linkbox{
    display: block;
    width: 100%;
    position: relative;
    border-radius:1rem;
    border: 0.1rem solid;
    border-color: var(--textColor);
    background-color: #fff;
    box-shadow: 0 0.8rem 0 0 var(--lineupBnrshadow);
}
.secBnrlist .Intxtbox{
    position: absolute;
    width:16rem;
    height: 4rem;
    display: flex;
    align-items: center;
    background-color: var(--textColor);
    border-radius:0.3rem;
    top: calc(0% - 2rem);
    left: 5rem;
}
.secBnrlist .intxt{
    font-size:var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    color: #fff;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.secBnrlist .linkInner{
    padding: 5rem;
    padding-left: 12.3rem;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.secBnrlist .txtbox{
    width: 26rem;
    text-align: center;
    padding-top: 2.6rem;
    padding-bottom: 1.4rem;
}
.secBnrlist .subtit{
    font-size: var(--pcFontSize18);
    line-height: var(--pcLineHeight18_24);
    font-weight: bold;
}
.secBnrlist .imglogo{
    margin: 0 auto;
    margin-top: 2.1rem;
}
.secBnrlist .tit{
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_30);
    font-weight: bold;
    margin-top: 1.7rem;
}
.secBnrlist .pricebox{
    margin-top: 2.6rem;
    width: 100%;
    background-color: var(--priceBgColor);
    padding: 1.5rem 0 2.1rem;
    border-radius: 0.3rem;
}
.secBnrlist .price_on{
    display: inline-block;
    padding-left: calc(6rem + 0.8rem);
    position: relative;
}
.secBnrlist .leftbox{
    width: 6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    top: calc(50% - 1.3rem);
    background-color: #fff;
    color: var(--textColor);
    border-radius: 0.3rem;
}
.secBnrlist .lefttit{
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: var(--pcFontSize12);
    line-height: var(--pcLineHeight12_18);
    font-weight: bold;
}
.secBnrlist .priceTxt{
    display: inline-block;
    width: 100%;
    text-align: left;
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_24);
    font-weight: bold;
}
.secBnrlist .priceTxt .num{
    font-size: var(--pcFontSize26);
    line-height: var(--pcLineHeight26_26);
    font-weight: bold;
    vertical-align: bottom;
    padding-right: 0.4rem;
}
.secBnrlist .taxtxt{
    font-size: var(--pcFontSize12);
    font-weight: bold;
    margin-top: 0.6rem;
}
.secBnrlist .imgbox{
    width: 58rem;
    margin-left: 6.1rem;
    padding-bottom: 0.5rem;
}
.secBnrlist .moreItem{
    display: inline-block;
    position: absolute;
}
@media only screen and (min-width:1216px){
    .secBnrlist .moreItem{
        right: 4.9rem;
        top: calc(50% - 2rem);
    }
}
.secBnrlist .moreIn{
    position: relative;
    min-width: 14.6rem;
    height: 4rem;
    padding-right: calc(4rem + 1.8rem);
    display: flex;
    align-items: center;
}
.secBnrlist .moreIn::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 2rem);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 0.1rem solid;
    border-color: var(--textColor);
    background-color: #fff;
}
.secBnrlist.lazyloaded .moreIn::after {
    background: url(../img/common/imgMoreArrow.png) center center no-repeat #fff;
    background-size: 0.6rem auto;
}
.secBnrlist .moreIntxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    font-weight: bold;
    flex: 1;
}
@media only screen and (min-width:1216px){
    .secBnrlist .imglogo.feele{
        width: 16.2rem;
    }
    .secBnrlist .imglogo.yat{
        width: 9rem;
    }
    .secBnrlist .imglogo.carre{
        width: 16.7rem;
    }
    .secBnrlist .imglogo.riv{
        width: 8.1rem;
    }
    .secBnrlist .imglogo.costa{
        width: 15.7rem;
    }
    .secBnrlist .imglogo.zutto{
        width: 16.4rem;
    }
}
.secBnrlist .tit.feele{
    color: var(--FEELEColor);
}
.secBnrlist .tit.yat{
    color: var(--YATColor);
}
.secBnrlist .tit.carre{
    color: var(--CARREColor);
}
.secBnrlist .tit.riv{
    color: var(--RIVColor);
}
.secBnrlist .tit.costa{
    color: var(--COSTAColor);
}
.secBnrlist .tit.zutto{
    color: var(--ZUTTOColor);
}
@media only screen and (max-width:1215px){
    .secBnrlist{
        margin-top: 8rem;
    }
    .secBnrlist .item + .item{
        margin-top: 2rem;
    }
    .secBnrlist .linkbox{
        border-radius:0.5rem;
        box-shadow: 0 0.5rem 0 0 var(--lineupBnrshadow);
    }
    .secBnrlist .Intxtbox{
        position:relative;
        width:100%;
        background-color: var(--textColor);
        border-radius:0rem;
        top: 0;
        left: 0;
    }
    .secBnrlist .intxt{
        font-size:var(--spFontSize12);
    }
    .secBnrlist .linkInner{
        padding: 0;
        display: block;
        text-align: center;
        padding-top: 1.7rem;
    }
    .secBnrlist .txtbox{
        width: 100%;
        padding: 0;
    }
    .secBnrlist .subtit{
        font-size: var(--spFontSize14);
    }
    .secBnrlist .imglogo{
        width: fit-content;
        margin-top: 1.3rem;
    }
    .secBnrlist .imglogo img{
        width: auto;
        height:2.4rem;
    }
    .secBnrlist .tit{
        font-size: var(--spFontSize14);
        margin-top: 1.2rem;
    }
    .secBnrlist .pricebox{
        margin: 0 auto;
        margin-top: 1rem;
        max-width: 19.5rem;
        padding: 1.8rem 0 1.5rem;
    }
    .secBnrlist .price_on{
        padding-left: calc(5.5rem + 0.4rem);
    }
    .secBnrlist .leftbox{
        width: 5.5rem;
        height: 2.2rem;
        top: calc(50% - 1.1rem);
    }
    .secBnrlist .lefttit{
        font-size: var(--spFontSize11);
    }
    .secBnrlist .priceTxt{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_20);
    }
    .secBnrlist .priceTxt .num{
        font-size: var(--spFontSize18);
        vertical-align: bottom;
        padding-right: 0.2rem;
    }
    .secBnrlist .taxtxt{
        font-size: var(--spFontSize11);
        margin-top: 0.7rem;
    }
    .secBnrlist .imgbox{
        position: absolute;
        bottom: 0;
        left: calc(34.5 / 375 * 100vw);
        width: calc((264 / 375) * 100vw);
        margin-left: 0;
        padding-bottom: 0;
    }
    .secBnrlist .moreItem{
        position: relative;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        margin-top: 1.4rem;
    }
    .secBnrlist .moreIn{
        min-width: 0;
        width: fit-content;
        height: 2.5rem;
        padding-right: calc(2.5rem + 0.5rem);
        margin: 0 auto;
    }
    .secBnrlist .moreIn::after {
        top: calc(50% - 1.25rem);
        width: 2.5rem;
        height: 2.5rem;
    }
    .secBnrlist.lazyloaded .moreIn::after {
        background-size: 0.4rem auto;
    }
    .secBnrlist .moreIntxt{
        font-size: var(--spFontSize10);
    }
    .secBnrlist .linkbox.feele{
        padding-bottom: calc(2rem + (114 / 375 * 100vw));
    }
    .secBnrlist .linkbox.yat{
        padding-bottom: calc(2rem + (82 / 375 * 100vw));
    }
    .secBnrlist .linkbox.carre{
        padding-bottom: calc(2rem + (104 / 375 * 100vw));
    }
    .secBnrlist .linkbox.riv{
        padding-bottom: calc(2rem + (105 / 375 * 100vw));
    }
    .secBnrlist .linkbox.costa{
        padding-bottom: calc(2rem + (82 / 375 * 100vw));
    }
    .secBnrlist .linkbox.zutto{
        padding-bottom: calc(2rem + (82 / 375 * 100vw));
    }
}

/* secDetailspager */
.secDetailspager{
    border-top: 0.1rem solid;
    border-color: var(--textColor);
    position: relative;
    padding-top: 10rem;
    margin-top: 15rem;
}
.secDetailspager .pagerInner{
    display: flex;
}
.secDetailspager .pagerBox{
    width:calc((100% - 35rem) / 2);
}
.secDetailspager .pagerBox.next{
    margin-left: auto;
}
.secDetailspager .workslink{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    padding-bottom: calc(4rem + 2.2rem);
}
.secDetailspager .workslink::after{
    content: "";
    position: absolute;
    width: calc(100% - 14.6rem - 2rem);
    height: 0.1rem;
    bottom: 2rem;
    background-color: var(--textColor);
}
.secDetailspager .next .workslink::after{
    left: 0;
}
.secDetailspager .prev .workslink::after{
    right: 0;
}
.secDetailspager .imgBox{
    width: 100%;
    height: 0;
    padding-top: calc(780 / 1100 * 100%);
    border-radius: 1rem;
    overflow: hidden;
}
.secDetailspager .txtarea{
    width: 100%;
    margin-top: 2rem;
}
.secDetailspager .onbox{
    display: flex;
    max-width: 100%;
    width: fit-content;
    position: relative;
}
.secDetailspager .onbox:has(.newIcon){
    padding-right: calc(3.5rem + 1rem);
}
.secDetailspager .catrgorytags{
    display: flex;
}
.secDetailspager .tag{
    width: 8rem;
}
.secDetailspager .taginner{
    width: 100%;
    height: 3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    color: #fff;
}
.secDetailspager .tagtxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    display: inline-block;
    width: 100%;
    text-align: center;
    font-weight: bold;
}
.secDetailspager .namebox{
    flex: 1;
    max-width: calc(100% - 8rem);
    padding-left: 1.9rem;
}
.secDetailspager .nametxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.secDetailspager .newIcon{
    position: absolute;
    right: 0;
    top: 0.5rem;
    width: 3.5rem;
    height: 2rem;
    display: flex;
    align-items: center;
    background: var(--newIconColor);
    color: var(--textColor);
    border-radius: 0.3rem;
}
.secDetailspager .icontxt{
    font-size: var(--pcFontSize10);
    line-height: var(--pcLineHeight10_14);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing10_50);
    text-align: center;
    display: inline-block;
    width: 100%;
}
.secDetailspager .tit{
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_30);
    font-weight: bold;
    margin-top: 1.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: calc((var(--pcFontSize20) * var(--pcLineHeight20_30)) * 2);
}
.secDetailspager .moreItem{
    display: inline-block;
    position: absolute;
    bottom: 0;
}
.secDetailspager .next .moreItem{
    right: 0;
}
.secDetailspager .prev .moreItem{
    left: 0;
}
.secDetailspager .moreIn{
    position: relative;
    min-width: 14.6rem;
    height: 4rem;
    display: flex;
    align-items: center;
}
.secDetailspager .next .moreIn{
    padding-right:calc(4rem + 1.8rem);
}
.secDetailspager .prev .moreIn{
    padding-left:calc(4rem + 1.8rem);   
}
.secDetailspager .moreIn::after{
    content: "";
    position: absolute;
    top: calc(50% - 2rem);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 0.1rem solid;
    border-color: var(--textColor);
    background-color: #fff;
}
.secDetailspager .next .moreIn::after{
    right: 0;
}
.secDetailspager .prev .moreIn::after{
    left: 0;
    transform: rotate(180deg);
}
.secDetailspager.lazyloaded .moreIn::after{
    background: url(../img/common/imgMoreArrow.png) center center no-repeat #fff;
    background-size:0.6rem auto;
}
.secDetailspager .moreIntxt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    font-weight: bold;
}
@media only screen and (max-width:1215px){
    .secDetailspager{
        padding-top: 4rem;
        margin-top: 8rem;
    }
    .secDetailspager .pagerBox{
        width:calc((100% - 1.5rem) / 2);
    }
    .secDetailspager .workslink{
        padding-bottom: calc(2.6rem + 1rem);
    }
    .secDetailspager .workslink::after{
        width: calc(100% - 10.6rem - 1.6rem);
        bottom: 1.3rem;
    }
    .secDetailspager .imgBox{
        border-radius: 0.5rem;
    }
    .secDetailspager .txtarea{
        margin-top: 1.3rem;
    }
    .secDetailspager .onbox{
        align-items: center;
    }
    .secDetailspager .onbox:has(.newIcon){
        padding-right: calc(3rem + 1rem);
    }
    .secDetailspager .tag{
        width: 7rem;
    }
    .secDetailspager .taginner{
        height: 2.4rem;
    }
    .secDetailspager .tagtxt{
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_18);
    }
    .secDetailspager .namebox{
        max-width: calc(100% - 7rem);
        padding-left: 0.5rem;
    }
    .secDetailspager .nametxt{
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_18);
    }
    .secDetailspager .newIcon{
        top: 0.5rem;
        width: 3rem;
        height: 1.6rem;
    }
    .secDetailspager .icontxt{
        font-size: var(--spFontSize9);
        line-height: var(--spLineHeight9_9);
    }
    .secDetailspager .tit{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_22);
        margin-top: 0.8rem;
        max-height: calc((var(--spFontSize13) * var(--spLineHeight13_22)) * 2);
    }
    .secDetailspager .moreIn{
        min-width: 10.6rem;
        height: 2.6rem;
    }
    .secDetailspager .next .moreIn{
        padding-right:calc(2.6rem + 1rem);
        justify-content: flex-end;
    }
    .secDetailspager .prev .moreIn{
        padding-left:calc(2.6rem + 1rem);
    }
    .secDetailspager .moreIn::after{
        width: 2.6rem;
        height: 2.6rem;
        top: calc(50% - 1.3rem);
    }
    .secDetailspager.lazyloaded .moreIn::after{
        background-size: 0.4rem auto;
    }
    .secDetailspager .moreIntxt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_12);
    }
}
@media only screen and (max-width:374px){
    .secDetailspager .moreIn{
        min-width: 8rem;
    }
    .secDetailspager .workslink::after{
        width: calc(100% - 8rem - 1.6rem);
    }
    .secDetailspager .next .moreIn{
        padding-right:calc(2.6rem + 0.5rem);
    }
    .secDetailspager .prev .moreIn{
        padding-left:calc(2.6rem + 0.5rem);
    }
}
@media only screen and (min-width:1216px){
    .secDetailspager .pagerInner + .secCmnBack{
        position: absolute;
        left: calc(50% - 12rem);
        top: calc(10rem + ((33rem / 2) - 3rem));
    }
}
@media only screen and (max-width:1215px){
    .secDetailspager .pagerInner + .secCmnBack{
        margin-top: 4rem;
    }
}