@charset "utf-8";
.bgBlack{background-color: var(--blackColor);}
/*-----------------------------------------------
    boxCmnTop
-----------------------------------------------*/
.boxCmnTop{
    height: 0;
}
.boxConceptTit{
    position: relative;
    top: -5rem;
}
.boxConceptTit .titConseptEng{
    font-size: var(--pcFontSize36);
}
.boxConceptTit .titConseptJp{
    font-size: var(--pcFontSize74);
    margin: 1rem 0 2rem -1rem;
}
.boxConceptTit .titJp{
    line-height: var(--pcLineHeight20_36);
    letter-spacing: var(--pcLetterSpacing20_80);
}
@media only screen and (max-width:1215px){
    .boxConceptTit{
        top: -2.5rem;
    }
    .boxConceptTit .titConseptEng{
        font-size: var(--spFontSize16);
    }
    .boxConceptTit .titConseptJp{
        font-size: var(--spFontSize30);
        margin: 0.5rem 0 0.5rem -0.5rem;
    }
    .boxConceptTit .titJp{
        line-height: var(--spLineHeight12_24);
        letter-spacing: var(--spLetterSpacing12_0);
    }
}

/*-----------------------------------------------
    boxConceptTop
-----------------------------------------------*/
.boxConceptTop{
    text-align: center;
    color: var(--whiteColor);
    padding: 23rem 0 0;
    background: url(../img/concept/bgMain.png) center top / auto no-repeat;
}
.boxConceptTicker{
    overflow: hidden;
}
.boxConceptTicker .boxTicker {
    display: flex;
}
.boxConceptTicker .itemTicker:nth-child(odd) {
    animation: loop 80s -40s linear infinite;
    backface-visibility: hidden;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.boxConceptTicker .itemTicker:nth-child(even) {
    animation: loop2 80s linear infinite;
}
@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}
@media only screen and (max-width:1215px){
    .boxConceptTicker .imgTicker {
        width: auto;
        height: 14rem;
    }
}
@media only screen and (max-width:767px){
    .boxConceptTop{
        height: auto;
        padding: 7.6rem 0 0;
        background: url(../img/concept/bgMain_sp.jpg) center bottom / cover no-repeat;
    }
}

/*-----------------------------------------------
    boxConcept
-----------------------------------------------*/
.boxConcept{
    text-align: left;
}
.boxConcept .boxTit{
    position: relative;
}
.boxConcept .tit{
    position: absolute;
    top: -4rem;
    left: 0;
}
.boxConcept .boxTxt{
    display: flex;
    justify-content: flex-end;
    padding-top: 17rem;
}
.boxConcept .txt{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_50);
    letter-spacing: var(--pcLetterSpacing16_40);
    color: var(--whiteColor);
}
.boxConcept .txtIn{
    display: inline-block;
    margin-top: 1rem;
}
/* boxConceptLink */
.boxConceptLink{
    margin-top: 10rem;
}
.boxConceptLink .boxList{
    width: calc(100% - 6rem);
    margin: 0 auto;
    display: flex;
    gap: 2.1rem;
}
.boxConceptLink .item{
    position: relative;
    width: calc((100% - 4.199rem) / 3);
    color: var(--whiteColor);
}
.boxConceptLink .item .link{
    position: relative;
    width: 100%;
    display: block;
}
.boxConceptLink .item .boxNum{
    position: absolute;
    top: -3rem;
    right: 3rem;
    z-index: 1;
}
.boxConceptLink .item .boxTxt{
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding: 0!important;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.boxConceptLink .item .tit{
    position: static;
    font-weight: bold;
    font-size: var(--pcFontSize40);
}
.boxConceptLink .item .txt{
    font-size: var(--pcFontSize13);
    letter-spacing: var(--pcLetterSpacing13_40);
    margin-top: 0.3rem;
}
.boxConceptLink .item .txt2{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_34);
    letter-spacing: var(--pcLetterSpacing16_40);
    margin-top: 1.2rem;
}
.boxConceptLink .item .cmnArrowCircle{
    position: absolute;
    bottom: 5rem;
    right: 5rem;
}
.boxConceptLink .item .boxImg{
    position: relative;
}
.boxConceptLink .item .boxImg::after{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black_000_40_Color);
    transition: all 0.4s ease-out;
}
.boxConceptLink .link:hover .boxImg::after{
    background-color: var(--black_000_20_Color);
}
/* .boxConceptLink .item:nth-child(2) {
    transition-delay: 0.5s;
}
.boxConceptLink .item:nth-child(3) {
    transition-delay: 1s;
} */
@media only screen and (max-width:1215px){
    /* boxConcept */
    .boxConcept{
        text-align: left;
    }
    .boxConcept .boxTit{
        width: 24rem;
        margin: 0;
    }
    .boxConcept .tit{
        top: -2.5rem;
    }
    .boxConcept .boxTxt{
        justify-content: flex-start;
        padding-top: 11rem;
    }
    .boxConcept .txt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_24);
        letter-spacing: var(--spLetterSpacing12_0);
    }
    /* boxConceptLink */
    .boxConceptLink{
        margin-top: 3.5rem;
    }
    .boxConceptLink .boxList{
        width: 100%;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .boxConceptLink .item{
        width: 100%;
    }
    .boxConceptLink .item .boxNum{
        position: absolute;
        top: 2rem;
        right: auto;
        left: 2rem;
        width: 4.4rem;
    }
    .boxConceptLink .item .boxTxt{
        justify-content: center;
    }
    .boxConceptLink .item .tit{
        font-size: var(--spFontSize24);
    }
    .boxConceptLink .item .txt{
        font-size: var(--spFontSize13);
        letter-spacing: var(--spLetterSpacing13_0);
        margin-top: 0.3rem;
    }
    .boxConceptLink .item .txt2{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_20);
        letter-spacing: var(--spLetterSpacing12_0);
        margin-top: 0.2rem;
    }
    .boxConceptLink .item .cmnArrowCircle{
        width: 3.7rem;
        height: 3.7rem;
        bottom: 2rem;
        right: 2rem;
    }
}

/*-----------------------------------------------
    boxConceptLinkDetails
-----------------------------------------------*/
.boxConceptDetails {
    background-color: var(--whiteColor);
    margin-top: -1px;
}
.boxConceptLinkDetails {
    padding-top: 25rem;
    margin-top: 0;
}
.boxConceptLinkDetails .boxList {
    width: 100%;
    gap: 0;
}
.boxConceptLinkDetails .item{
    width: 50%;
}
/* boxNum */
.boxConceptLinkDetails .item .boxNum{
    top: 5rem;
    right: auto;
    left: 5rem;
}
/* boxTxt */
.boxConceptLinkDetails .item .cmnArrowCircle{
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 4rem;
}
@media only screen and (max-width:1215px){
    .boxConceptDetails {
        background-color: var(--whiteColor);
    }
    .boxConceptLinkDetails {
        padding: 5rem 0;
        margin-top: 0;
    }
    .boxConceptLinkDetails .boxList {
        width: 100%;
        gap: 1rem 0;
    }
    .boxConceptLinkDetails .item{
        width: 100%;
    }
    /* boxNum */
    .boxConceptLinkDetails .item .boxNum{
        top: 2rem;
        left: 2rem;
    }
    /* boxTxt */
    .boxConceptLinkDetails .item .cmnArrowCircle{
        position: absolute;
        bottom: 2rem;
        right: 2rem;
        margin-top: 0;
    }
}

/*-----------------------------------------------
    boxConceptItem
-----------------------------------------------*/
.secMainContent{
    padding-top: 18rem;
}
@media only screen and (max-width:1215px){
    .secMainContent{
        padding-top: 6rem;
    }
}

/*-----------------------------------------------
    boxConceptItem
-----------------------------------------------*/
.boxConceptItem{
    background-color: var(--whiteColor);
}
.boxConceptItem + .boxConceptItem{
    padding-top: 20rem;
    margin-top: -1px;
}
.boxConceptItem .boxHead{
    color: var(--whiteColor);
    height: 80rem;
}
.boxConceptItem .boxHeadWrapper{
    background-repeat: no-repeat;
    background-size: auto 110%;
    overflow: hidden;
}
.boxConceptItem .boxHeadWrapper,
.boxConceptItem .wrapper,
.boxConceptItem .boxHeadTit{
    height: 100%;
}
.boxConceptItem .boxHeadTit .wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    transition-delay: 0.3s;
}
.boxConceptItem .boxHead .txtBgBlack,
.boxConceptItem .boxHead .titEng{
    background-color: var(--blackColor);
    display: inline;
    padding: 0 1.5rem 0.3rem 1.5rem;
}
.boxConceptItem .boxHead .titHead{
    font-size: var(--pcFontSize40);
    line-height: var(--pcLineHeight40_56);
    letter-spacing: var(--pcLetterSpacing40_40);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}
.boxConceptItem .boxHead .titEng{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_24);
    letter-spacing: var(--pcLetterSpacing16_80);
}
@media only screen and (max-width:1215px){
    .boxConceptItem + .boxConceptItem{
        padding-top: 8rem;
    }
    .boxConceptItem .boxHead{
        position: relative;
        height: auto;
    }
    .boxConceptItem .boxHead::before{
        position: absolute;
        content: '';
        margin: auto;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 20rem;
        background-color: var(--blackColor);
    }
    .boxConceptItem.bgItemBlack .boxHead::before{
        height: 100%;
    }
    .boxConceptItem .boxHeadWrapper{
        position: relative;
        height: auto;
        background-position: center bottom;
        background-size: 100% auto;
        padding-bottom: 25.5rem;
    }
    .boxConceptItem .wrapper,
    .boxConceptItem .boxHeadTit{
        height: 100%;
    }
    .boxConceptItem .boxHeadTit {
        position: relative;
        padding: 4.5rem 0 3rem;
        background-color: var(--blackColor);
    }
    .boxConceptItem .boxHeadTit .wrapper  {
        gap: 0;
    }
    .boxConceptItem .boxHead .txtBgBlack,
    .boxConceptItem .boxHead .titEng{
        background-color: inherit;
        padding: 0;
    }
    .boxConceptItem .boxHead .titHead{
        font-size: var(--spFontSize18);
        line-height: var(--spLineHeight18_28);
        letter-spacing: var(--spLetterSpacing18_0);
        gap: 0;
    }
    .boxConceptItem .boxHead .titEng{
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_20);
        letter-spacing: var(--spLetterSpacing11_0);
    }
}
@media only screen and (max-width:370px){
    .boxConceptItem .boxHeadWrapper {
        padding-bottom: 68%;
    }
}

/*-----------------------------------------------
    boxBody
-----------------------------------------------*/
.boxBody{
    margin-top: 7.5rem;
    background-color: var(--whiteColor);
}
.boxConceptItem.bgItemBlack .boxBody{
    margin-top: 0;
    padding-top: 7.5rem;
    color: var(--whiteColor);
    background-color: var(--blackColor);
}
.boxBody .boxBodyTit .tit{
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_26);
    font-weight: bold;
}
.boxBody .boxBodyTit .txt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_28);
}
.boxBody .boxBodyTit .tit + .txt{
    margin-top: 2rem;
}
.boxBody .boxBodyTit .txt + .tit{
    margin-top: 5.5rem;
}
@media only screen and (max-width:1215px){
    .boxBody{
        margin-top: 2.5rem;
    }
    .boxConceptItem.bgItemBlack .boxBody{
        padding-top: 2.5rem;
        margin-top: -1px;
    }
    .boxBody .boxBodyTit .tit{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_21);
    }
    .boxBody .boxBodyTit .txt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_22);
    }
    .boxBody .boxBodyTit .tit + .txt{
        margin-top: 1rem;
    }
    .boxBody .boxBodyTit .txt + .tit{
        margin-top: 3.5rem;
        font-size: var(--spFontSize20);
    }
}

/*-----------------------------------------------
    boxSliderDetails
-----------------------------------------------*/
.boxSliderDetails{
    position: relative;
    overflow: visible;
    margin-top: 5rem;
}
.boxSliderDetails .swiper{
    margin: 0 auto;
    overflow: visible;
}
.boxSliderDetails.disabled .swiper-wrapper{
    display: flex;
    gap: 5rem;
}
.boxSliderDetails .swiper-slide{
    width: calc((100% - 9.999rem) / 3);
}
.boxSliderDetails .boxTxt{
    margin-top: 1.8rem;
}
.boxSliderDetails .tit{
    font-size: var(--pcFontSize22);
    line-height: var(--pcLineHeight22_33);
    letter-spacing: var(--pcLetterSpacing22_40);
    font-weight: bold;
}
.boxSliderDetails .txt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_28);
    margin-top: 0.5rem;
}
.boxSlider_wide.disabled .swiper-wrapper {
    gap: 4rem;
}
.boxSlider_wide .swiper-slide{
    width: calc((100% - 4rem) / 2);
}
@media only screen and (max-width:1215px){
    .boxSliderDetails{
        margin-top: 3rem;
    }
    .boxSliderDetails.disabled .swiper-wrapper{
        gap: 1rem;
    }
    .boxSliderDetails .swiper{
        width: 86.96%;
        margin: 0 auto 0 0;
    }
    .boxConceptItem.disabled .swiper{
        width: calc((100% - -9.001rem) / 3);
    }
    .boxSliderDetails .swiper-slide{
        width: 100%;
    }
    .boxSliderDetails .boxTxt{
        margin-top: 2rem;
    }
    .boxSliderDetails .tit{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_21);
        letter-spacing: var(--spLetterSpacing14_0);
    }
    .boxSliderDetails .txt{
        font-size: var(--spFontSize11);
        line-height: var(--spLineHeight11_17);
        letter-spacing: var(--spLetterSpacing11_0);
        margin-top: 0;
    }
    .boxSlider_wide .swiper{
        width: 67.25%;
    }
    .boxSlider_wide.disabled .swiper-wrapper {
        gap: 1rem;
    }
}

/*-----------------------------------------------
    boxLink
-----------------------------------------------*/
.boxConceptItem .boxLink {
    margin-top: 5rem;
}
.boxConceptItem .boxLink .link {
    width: 50rem;
    height: 10rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--blackColor);
    border: 1px solid var(--gray_8e8_Color);
    color: var(--whiteColor);
    padding-left: 5rem;
}
.boxConceptItem .boxLink .link_white {
    background-color: var(--whiteColor);
    color: var(--blackColor);
}
.boxConceptItem .boxLink .txtLink {
    position: relative;
    width: 100%;
    font-size: var(--pcFontSize20);
    line-height: var(--pcLineHeight20_30);
}
.boxConceptItem .boxLink .txtLink:after{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    right: 5rem;
    width: 1.6rem;
    height: 0.4rem;
    transition: all 0.4s ease-out;
}
.boxConceptItem .link:hover .txtLink:after{
    transform: rotate(360deg);
}
.boxConceptItem .boxLink.lazyloaded .txtLink:after{
    background: url(../img/common/iconArrow_Circle.png) center top / cover no-repeat;
}
.boxConceptItem .boxLink.lazyloaded .link_white .txtLink:after{
    background: url(../img/common/iconArrow_Circle_black.png) center top / cover no-repeat;
}
@media only screen and (max-width:1215px){
    .boxConceptItem .boxLink {
        margin-top: 3rem;
    }
    .boxConceptItem .boxLink .link {
        width: 88.41%;
        height: 6rem;
        padding-left: 2rem;
    }
    .boxConceptItem .boxLink .txtLink {
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_20);
    }
    .boxConceptItem .boxLink .txtLink:after{
        right: 2rem;
        width: 1.1rem;
        height: 0.3rem;
    }
    .boxConceptItem .boxLink.lazyloaded .txtLink:after{
        background: url(../img/common/iconArrow_next_white.png) center top / cover no-repeat;
    }
    .secCmnLink .wrapper{
        padding-top: 0;
    }
}