@charset "utf-8";

/*-----------------------------------------------
    secCmnIndexTop
-----------------------------------------------*/
.secCmnIndexTop {
    background-image: url(../img/concept/bgCmnIndexTop.jpg);
}
@media only screen and (max-width:767px){
    .secCmnIndexTop {
        background-image: url(../img/concept/bgCmnIndexTop_sp.jpg);
    }
}


/*-----------------------------------------------
    secConcept
-----------------------------------------------*/
.secConcept{
    position: relative;
    margin-top: 11.5rem;
    padding: 6rem 0 26.4rem;
    background: top center / auto no-repeat;
}
.secConcept.lazyloaded{
    background-image: url(../img/concept/bgConcept.jpg?260803);
}
/* boxTit */
.secConcept .boxTit{
    width: calc(((100% / 2) - 2rem) - 3%);
    margin: 0 3% 0 auto;
}
.secConcept .tit{
    color: var(--greenColor);
    font-size: var(--pcFS50);
    line-height: var(--pcLHS50_85);
    letter-spacing: var(--pcLS50_150);
}
.secConcept .line{
    position: relative;
    display: inline-block;
}
.secConcept .line:after{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0.2rem;
    bottom: 0;
    right: -9rem;
    width: 7rem;
    height: 1px;
    background-color: var(--greenColor);
}
.secConcept .txt{
    color: var(--greenColor);
    font-size: var(--pcFS28);
    letter-spacing: var(--pcLS28_50);
    margin-top: 3.5rem;
}
.secConcept .min{
    font-size: var(--pcFS16);
    line-height: var(--pcLHS16_44);
    margin-top: 6rem;
}
.secConcept .min .in{
    display: block;
}
.secConcept .min .in + .in{
    margin-top: 1.9rem;
}
/* boxImg */
.secConcept .boxImg{
    position: absolute;
    top: 0;
    right: 0;
}
.secConcept .boxVideo{
    position: absolute;
    left: 29.7%;
    bottom: 0;
    width: 30rem;
    height: 32rem;
}
.secHero .video{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.secConcept video{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    font-family: 'object-fit: cover;';
}
@media only screen and (max-width:1215px){
    .secConcept{
        position: relative;
        margin-top: 6.5rem;
        padding: 0 0 6rem;
        background: none!important;
    }
    .secConcept::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 90rem;
        background: center / cover no-repeat;
        z-index: -1;
    }
    .secConcept.lazyloaded::before {
        background-image: url(../img/concept/bgConcept_sp.jpg?260803);
    }
    .secConcept .boxTit {
        width: 100%;
        margin: 0 auto;
    }
    .secConcept .tit{
        font-size: var(--spFS20);
        line-height: var(--spLHS20_36);
    }
    .secConcept .line:after{
        top: 0.2rem;
        right: -4rem;
        width: 3rem;
    }
    .secConcept .txt{
        font-size: var(--spFS18);
        letter-spacing: var(--spLS_0);
        margin-top: 2rem;
    }
    .secConcept .min{
        font-size: var(--spFS12);
        line-height: var(--spLHS12_28);
        letter-spacing: var(--spLS_0);
        margin-top: 2.5rem;
    }
    .secConcept .min .in + .in {
        margin-top: 1.4rem;
    }
    /* boxImg */
    .secConcept .boxImg{
        position: relative;
        top: auto;
        right: auto;
        margin-top: 3rem;
    }
    .secConcept .boxVideo{
        left: auto;
        right: 16%;
        width: 10.2rem;
        height: 10.9rem;
    }
}



/*-----------------------------------------------
    secMind
-----------------------------------------------*/
.secMind{
    margin-top: 15rem;
}
.secMind .boxTopTit{
    position: relative;
    text-align: center;
    padding-top: 15.5rem;
}
.secMind .boxTopTit:before{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 1px;
    height: 8rem;
    background-color: var(--greenColor);
}
.secMind .boxTopTit .titJp{
    color: var(--greenColor);
    font-size: var(--pcFS40);
    letter-spacing: var(--pcLS40_50);
    font-weight: bold;
}
.secMind .boxTopTit .txt{
    font-size: var(--pcFS16);
    line-height: var(--pcLHS16_38);
    margin-top: 4rem;
}
/* boxList */
.secMind .boxList{
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    gap: 8rem;
    counter-reset: number 0;
}
.secMind .boxList .item{
    display: flex;
    gap:8rem;
}
.secMind .boxList .item:nth-child(even){
    flex-direction: row-reverse;
}
.secMind .boxList .boxImg{
    width: 50rem;
}
.secMind .boxList .txtImg{
    font-size: var(--pcFS11);
    margin-top: 1.8rem;
    text-align: right;
}
.secMind .boxList .boxTxt{
    position: relative;
    width: calc(100% - 58rem);
    margin-top: 4.7rem;
    padding-top: 8.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.secMind .boxList .boxTxt:before{
    position: absolute;
	counter-increment: number 1;
	content: counter(number,decimal-leading-zero);
    left: 0;
    right: 0;
	top: 0;
	margin: auto;
    z-index: 2;
    font-size: var(--pcFS60);
    font-weight: bold;
    color: color-mix(in srgb, var(--greenColor) 20%, transparent);
}
.secMind .boxList .tit{
    color: var(--greenColor);
    font-size: var(--pcFS32);
    line-height: var(--pcLHS32_50);
    letter-spacing: var(--pcLS32_50);
}
.secMind .boxList .txt{
    font-size: var(--pcFS16);
    line-height: var(--pcLHS16_44);
    margin-top: 2rem;
}
.secMind .boxList .tag{
    color: var(--greenColor);
    background-color: var(--brownColor);
    font-size: var(--pcFS16);
    padding: 2.2rem 1.2rem;
    margin-top: 2.8rem;
}
@media only screen and (max-width:1215px){
    .secMind{
        margin-top: 6rem;
    }
    .secMind .boxTopTit{
        padding-top: 5.5rem;
    }
    .secMind .boxTopTit:before{
        height: 3rem;
    }
    .secMind .boxTopTit .titJp{
        font-size: var(--spFS20);
        letter-spacing: var(--spLS_0);
    }
    .secMind .boxTopTit .txt{
        font-size: var(--spFS13);
        line-height: var(--spLHS13_22);
        margin-top: 2rem;
    }
    /* boxList */
    .secMind .boxList{
        margin-top: 4rem;
        gap: 6rem;
    }
    .secMind .boxList .item{
        flex-direction: column-reverse!important;
        gap:0;
    }
    .secMind .boxList .boxTxt,
    .secMind .boxList .boxImg{
        width: 100%;
    }
    .secMind .boxList .boxTxt{
        margin-top: 1.4rem;
        padding-top: 3.5rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .secMind .boxList .boxTxt:before{
        left: -0.2rem;
        right: 0;
        font-size: var(--spFS30);
    }
    .secMind .boxList .tit{
        font-size: var(--spFS20);
        line-height: var(--spLHS20_36);
        letter-spacing: var(--spLS_0);
    }
    .secMind .boxList .txt{
        font-size: var(--spFS13);
        line-height: var(--spLHS13_22);
        margin-top: 0.6rem;
    }
    .secMind .boxList .tag{
        font-size: var(--spFS13);
        padding: 1.3rem 0.8rem;
        margin-top: 1.5rem;
    }
}