@charset "utf-8";

/* jsHideFade */
.jsHideFade{
    display: block;
    opacity: 0;
    transition: 1.05s all cubic-bezier(.275,0,0,1);
    transform: translateY(1.1em);
}
.jsHideFade.jsShow{
    transform: translateY(0);
    opacity: 1;
}

#pnkz{
    z-index: 20;
}

.secConceptTitBox{
    position: relative;
    height: 98rem;
    background: var(--bgConceptTop);
    padding: 12rem 0 11rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    overflow: hidden;
}
.secConceptTitBox::after{
    position: absolute;
    content: "";
    width: 192rem;
    height: 80rem;
    top: 0;
    left: calc(50% - 96rem);
    background: url(../img/after/bgConceptTitBox.png) center top / cover;
}
.secConceptTitBox .titWrapper{
    z-index: 20;
    color: var(--whiteColor);
}
.secConceptTitBox .titEng{
    font-size: var(--pcFontSize140);
    letter-spacing: var(--pcLetterSpacing140_25);
    font-weight: 100;
    position: relative;
    left: -0.8rem;
}
.secConceptTitBox .tit{
    font-size: var(--pcFontSize16);
    margin-top: 5rem;
    font-weight: 700;
    display: inline-block;
    position: relative;
}
.secConceptTitBox .tit::before{
    content: "";
    position: absolute;
    top: 0.6rem;
    right: -7rem;
    width: 5rem;
    height: 0.1rem;
    background: var(--borderColor04);
}
@media only screen and (max-width:1215px){
    .secConceptTitBox{
        height: 128vw;
        padding: 6.2rem 0 6rem;
    }
    .secConceptTitBox::after{
        position: absolute;
        content: "";
        width: 100%;
        height: 106.667vw;
        top: 0;
        left: 0;
        background: url(../img/after/bgConceptTitBox_sp.png) center bottom / cover;
    }
    .secConceptTitBox .titEng{
        font-size: var(--spFontSize60);
        letter-spacing: var(--spLetterSpacing0);
        left: -0.2rem;
    }
    .secConceptTitBox .tit{
        font-size: var(--spFontSize13);
        margin-top: 2.5rem;
    }
    .secConceptTitBox .tit::before{
        top: 0.5rem;
        right: -3.2rem;
        width: 2rem;
    }
}
.boxIconCircle{
    position: absolute;
    bottom: 3.5rem;
    right: 3.5rem;
    z-index: 100;
}
.boxIconCircle .linkCircle{
    position: relative;
    display: block;
    text-align: center;
    width: 5.5rem;
    height: 5.5rem;
}
.boxIconCircle .linkCircle .linkTxtBox{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 1px solid var(--iconCircle);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.2s ease-out;
} 
@media only screen and (min-width:1216px){
    .btnInCircle:hover .linkTxtBox img{
        content: url("../img/index/iconHoverArrowWhite02.png");
    } 
    .btnInCircle:hover .blakCircle .linkTxtBox img{
        content: url("../img/index/iconHoverArrowBlack.png");
    } 
    .boxIconCircle .linkCircle svg{
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        opacity: 1;
        max-width: 100%;
        height: auto;
        overflow: visible;
    }
    .btnInCircle:hover .circle{
        stroke-dashoffset: 0;
        transition-duration: 1.6s;
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }
    .boxIconCircle .circle{
        stroke-dasharray: 594;
        stroke-dashoffset: 594;
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 50% 50%;
        stroke: var(--whiteColor);
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
        transition-duration: 1.6s;
        transition-timing-function: cubic-bezier(.215,.61,.355,1)
    }
    .boxIconCircle .circle{
        stroke: var(--whiteColor);
        stroke-width: 5;
    }
    .boxIconCircle.blakCircle .circle{
        stroke: var(--textColor);
    }
    .btnInCircle .linkTxtBox img{
        width: 1.3rem;
    }
}
@media only screen and (max-width:1215px){
    .boxIconCircle{
        bottom: calc(50% - 1.75rem);
        right: 2rem;
    }
    .boxIconCircle .linkCircle{
        width: 3.5rem;
        height: 3.5rem;
    }
    .boxIconCircle .linkCircle .linkTxtBox{
        border: 1px solid var(--whiteColor);
    } 
    .boxIconCircle.blakCircle .linkCircle .linkTxtBox{
        border: 1px solid var(--textColor);
    }
    .btnInCircle .linkTxtBox img{
        width: 0.9rem;
    }
    .btnInCircle .linkTxtBox img{
        content: url("../img/index/iconHoverArrowWhite02.png");
    } 
    .btnInCircle .blakCircle .linkTxtBox img{
        content: url("../img/index/iconHoverArrowBlack.png");
    } 
}
/* secAboutBox */
.secAboutBox{
    margin-top: 20rem;
    background: var(--bgFooter);
    padding: 15rem 0 15rem;
    position: relative;
    z-index: 10;
}
.secAboutBox .aboutEngTit{
    font-size: var(--pcFontSize16);
    font-weight: 300;
    color: var(--whiteColor);
    position: relative;
    display: inline-block;
}
.secAboutBox .aboutEngTit::after{
    position: absolute;
    content: "";
    width: 22rem;
    height: 1px;
    right: -24rem;
    top: calc(50% - 0.5px);
    background: var(--blackColor_20);
}
.secAboutBox .aboutWrapper{
    width: calc(100% - 6rem);
    margin: 6rem auto 0;
}
.secAboutBox .list{
    display: flex;
    flex-wrap: wrap;
}
.secAboutBox .item{
    width: 32.259%;
    margin-right: 1.6115%;
    color: var(--whiteColor);
}
.secAboutBox .item:nth-child(3n){
    margin-right: 0;
}
.secAboutBox .item:nth-child(n+4){
    margin-top: 1.6115%;
}
.secAboutBox .inner{
    position: relative;
    display: block;
    overflow: hidden;
}
.secAboutBox .aboutTxtBox{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    padding-bottom: 1rem;
}
.secAboutBox .aboutTit{
    font-size: var(--pcFontSize54);
    letter-spacing: var(--pcLetterSpacing54_50);
    font-weight: 100;
}
.secAboutBox .aboutTxt{
    font-size: var(--pcFontSize16);
    font-weight: bold;
    margin-top: 3rem;
}
.secAboutBox .item.viewNow{
    position: relative;
}
.secAboutBox .item.viewNow .inner{
    pointer-events: none;
}
.secAboutBox .item.viewNow .viewNowTxt{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: var(--whiteColor);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--pcFontSize40);
    font-weight: 100;
    background: var(--cmnTitblackColor_70);
    z-index: 200;
}
@media only screen and (max-width:1215px){
    .secAboutBox{
        margin-top: 9rem;
        padding: 7rem 0 7rem;
    }
    .secAboutBox .aboutEngTit{
        font-size: var(--spFontSize13);
    }
    .secAboutBox .aboutEngTit::after{
        width: 5rem;
        right: -5.8rem;
    }
    .secAboutBox .aboutWrapper{
        width: 89.334%;
        max-width: 40rem;
        margin: 1.8rem auto 0;
    }
    .secAboutBox .list{
        display: block;
    }
    .secAboutBox .item{
        width: 100%;
        margin-right: 0;
    }
    .secAboutBox .item:nth-child(3n),
    .secAboutBox .item:nth-child(n+2){
        margin: 2rem auto 0;
    }
    .secAboutBox .aboutTxtBox{
        align-items: flex-start;
        padding: 0rem 1.7rem 0.5rem;
    }
    .secAboutBox .aboutTit{
        font-size: var(--spFontSize28);
        letter-spacing: var(--spLetterSpacing28_50);
    }
    .secAboutBox .aboutTxt{
        font-size: var(--spFontSize11);
        margin-top: 1rem;
    }
    .secAboutBox .item.viewNow .viewNowTxt{
        font-size: var(--spFontSize28);
    }
}
/* secTopImgBox */
.secTopImgBox{
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
}
.secTopImgBox .leftImg{
    width: 46.875%;
}
.secTopImgBox .rightBox{
    width: 52.605%;
    display: flex;
    justify-content: space-between;
}
.secTopImgBox .img01{
    width: 39.604%;
}
.secTopImgBox .img02{
    width: 59.406%;
}
@media only screen and (max-width:1215px){
    .secTopImgBox{
        margin-top: 2rem;
        flex-flow: wrap;
    }
    .secTopImgBox .leftImg{
        width: 100%;
    }
    .secTopImgBox .rightBox{
        width: 100%;
        margin: 0.1rem auto 0;
    }
    .secTopImgBox .img01{
        width: 39.702%;
    }
    .secTopImgBox .img02{
        width: 59.702%;
    }
}
/* secTxtBox */
.secTxtBox{
    margin-top: 6.5rem;
}
.secTxtBox .tit{
    font-size: var(--pcFontSize28);
    line-height: var(--pcLineHeight28_56);
    letter-spacing: var(--pcLetterSpacing28_150);
    font-weight: bold;
}
.secTxtBox .tit span{
    position: relative;
}
.secTxtBox .tit span::after{
    position: absolute;
    content: "";
    width: 4rem;
    height: 0.1rem;
    right: -5rem;
    top: calc(50% - 0.05rem);
    background: var(--textColor);
}
.secTxtBox .txt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_38);
    margin-top: 1.2rem;
}
@media only screen and (max-width:1215px){
    .secTxtBox{
        margin-top: 2.5rem;
    }
    .secTxtBox .tit{
        font-size: var(--spFontSize17);
        line-height: var(--spLineHeight17_30);
        letter-spacing: var(--spLetterSpacing17_50);
    }
    .secTxtBox .tit span::after{
        width: 2rem;
        right: -3rem;
    }
    .secTxtBox .txt{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_26);
        margin-top: 1rem;
    }
}
/* secListBox */
.secListBox{
    margin-top: 9rem;
}
.secListBox .list{
    display: flex;
    flex-wrap: wrap;
}
.secListBox .item{
    width: 47.143%;
}
.secListBox .item:nth-child(2n){
    margin-left: auto;
}
.secListBox .item:nth-child(n+3){
    margin-top: 8rem;
}
.secListBox .imgBox{
    position: relative;
}
.secListBox .iconImg{
    position: absolute;
    width: 12rem;
    right: 4rem;
    bottom: -6rem;
}
.secListBox .txtBox{
    margin-top: 4rem;
}
.secListBox .subTit{
    font-size: var(--pcFontSize20);
    font-weight: bold;
}
.secListBox .tit{
    font-size: var(--pcFontSize30);
    letter-spacing: var(--pcLetterSpacing30_100);
    font-weight: bold;
    margin-top: 2.2rem;
}
.secListBox .txt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_32);
    margin-top: 2.5rem;
}
.secListBox .btnBox{
    width: 40rem;
    margin: 4rem auto 0;
}
.secListBox .btnInner{
    height: 7.5rem;
    background: var(--whiteColor);
    color:var(--textColor);
    border: solid 0.1rem var(--textColor);
    border-radius: 3.75rem;
    font-size: var(--pcFontSize16);
    font-weight: bold;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}
.secListBox .btnInner::after{
    width: 0.9rem;
    height: 0.9rem;
    top: calc(50% - 0.45rem);
}
@media only screen and (max-width:1215px){
    .secListBox{
        margin-top: 4rem;
    }
    .secListBox .list{
        display: block;
    }
    .secListBox .item{
        width: 100%;
    }
    .secListBox .item:nth-child(2n){
        margin: auto;
    }
    .secListBox .item:nth-child(n+2){
        margin-top: 4rem;
    }
    .secListBox .item:nth-child(3){
        margin-top: 5rem;
    }
    .secListBox .imgBox{
        position: relative;
    }
    .secListBox .iconImg{
        width: 6rem;
        right: 2rem;
        bottom: -3rem;
    }
    .secListBox .txtBox{
        margin-top: 2rem;
    }
    .secListBox .subTit{
        font-size: var(--spFontSize15);
    }
    .secListBox .tit{
        font-size: var(--spFontSize17);
        letter-spacing: var(--spLetterSpacing0);
        margin-top: 1.5rem;
    }
    .secListBox .txt{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_26);
        margin-top: 1.2rem;
    }
    .secListBox .btnBox{
        width: 21.5rem;
        margin: 2.2rem auto 0;
    }
    .secListBox .btnInner{
        height: 4.5rem;
        border-radius: 2.25rem;
        font-size: var(--spFontSize13);
    }
    .secListBox .btnInner::before,.secListBox .btnInner:hover::before{
        width: 0.5rem;
        height: 0.5rem;
        top: calc(50% - 0.25rem);
        left: 2rem;
        background: var(--redColor);
    }
}
/* secAfterBox */
.secAfterBox{
    margin-top: 29rem;
    position: relative;
    height: 80rem;
}
.secAfterBox::after{
    position: absolute;
    content: "";
    width: 0.1rem;
    height: 10rem;
    top: -22rem;
    left: calc(50% - 0.05rem);
    background: var(--textColor);
}
.secAfterBox::before{
    position: absolute;
    content: "";
    width: 192rem;
    height: 122.9rem;
    top: -9rem;
    left: calc(50% - 96rem);
}
.secAfterBox.lazyloaded::before{
    background: url(../img/after/iconAfterBox.png) center top / cover;
}
.secAfterBox .titImg{
    width: 28.3rem;
    margin: 0 0 0 auto;
    padding-top: 6rem;
    transition-delay: 0.3s;
}
.secAfterBox .imgBox{
    transition-delay: 0.6s;
    position: relative;
}
.secAfterBox .img01{
    position: absolute;
    width: 58rem;
    left: calc(50% - 93rem);
    top: -32.5rem;
}
.secAfterBox .img02{
    position: absolute;
    width: 64rem;
    left: calc(50% - 32rem);
    top: -32.5rem;
}
.secAfterBox .img03{
    position: absolute;
    width: 58rem;
    right: calc(50% - 93rem);
    top: 11.5rem;
}
.secAfterBox .txt{
    font-size: var(--pcFontSize18);
    line-height: var(--pcLineHeight18_52);
    margin-top: 19rem;
    transition-delay: 0.9s;
}
@media only screen and (max-width:1215px){
    .secAfterBox{
        margin-top: 14rem;
        height: auto;
    }
    .secAfterBox::after{
        width: 0.1rem;
        height: 5rem;
        top: -10rem;
    }
    .secAfterBox::before{
        width: 80.2rem;
        height: 51.4rem;
        top: 9.2rem;
        left: calc(50% - 38rem);
    }
    .secAfterBox .titImg{
        width: 18rem;
        margin: 0 auto;
        padding-top: 0;
    }
    .secAfterBox .img01{
        position: relative;
        width: 22rem;
        left: -2rem;
        top: 0;
        margin-top: 1.1rem;
        z-index: 10;
    }
    .secAfterBox .img02{
        position: relative;
        width: 20rem;
        left: auto;
        right: -0.3rem;
        margin-left: auto;
        top: 0;
        margin-top: -3rem;
        z-index: 5;
    }
    .secAfterBox .img03{
        position: relative;
        width: 22rem;
        right: 0;
        top: 0;
        margin-top: -3rem;
    }
    .secAfterBox .txt{
        font-size: var(--spFontSize15);
        line-height: var(--spLineHeight15_32);
        margin-top: 2rem;
        transition-delay: 0.3s;
    }
}