@charset "utf-8";
@font-face{
    font-family:'Noto Sans JP';
    font-style:normal;
    font-weight:300;
    src:url(../fonts/NotoSansCJKjp/NotoSansCJKjp-DemiLight.woff2) format('woff2'),
        url(../fonts/NotoSansCJKjp/NotoSansCJKjp-DemiLight.woff) format('woff'),
        url(../fonts/NotoSansCJKjp/NotoSansCJKjp-DemiLight.otf) format('opentype');
}
@font-face{
    font-family:'Noto Sans JP';
    font-style:normal;
    font-weight:900;
    src:url(../fonts/NotoSansCJKjp/NotoSansCJKjp-Black.woff2) format('woff2'),
        url(../fonts/NotoSansCJKjp/NotoSansCJKjp-Black.woff) format('woff'),
        url(../fonts/NotoSansCJKjp/NotoSansCJKjp-Black.otf) format('opentype');
}

/*-----------------------------------------------
	jsHide
-----------------------------------------------*/
/* ▼下から入る動き有 */
.jsHide{
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.jsHide:not(.jsShow){
    opacity: 0;
    transform: translate(0px, 50px);
}

.jsHide.jsHide_type01{
    transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}
.jsHide.jsHide_type01:not(.jsShow){
    opacity: 0;
    transform: translate(0px, 0px);
}

.js-counter{
    font-family: "Barlow", sans-serif;
    font-weight: 700;
}


.wrapper1770{
    width: calc(100% - 100px);
    max-width: 1770px;
    margin: 0 auto;
}
.wrapper1520{
    width: calc(100% - 100px);
    max-width: 1520px;
    margin: 0 auto;
}
.wrapper1400{
    width: calc(100% - 100px);
    max-width: 1400px;
    margin: 0 auto;
}
.wrapper1100{
    width: calc(100% - 100px);
    max-width: 1100px;
    margin: 0 auto;
}
@media screen and (max-width:767px){
    .wrapper1770,
    .wrapper1520,
    .wrapper1400,
    .wrapper1100{
        width: 100%;
    }
    .wrapperSp335{
        width: calc(335 / 375 * 100%);
        margin: 0 auto;
    }
}
.fLato{
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}
.fLato.fBold{
    font-weight: 700;
}
.fPlayfair{
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}
.fNoto{
    font-family:'YakuHanJP_Noto','Noto Sans JP', sans-serif;
    font-weight: 300;
}
#container{
    width: 100%;
    overflow: visible;
}
#footer .wrapper {
    border-top: none;
}
#technology_conteiner{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}
.secCmnHeroArea{
    width: 100%;
    position: relative;
}
.secCmnHeroArea .bgArea{
    position: sticky;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
}
.secCmnHeroArea .bgImg{
    width: 100%;
    height: 100vh;
    background-color: #232326;
    position: relative;
}
.secCmnHeroArea .bgImg::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(35,35,35,0.5);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 10;
    left: 0;
    top: 0;
}
.secCmnHeroArea.scroll_on .bgImg::after{
    opacity: 1;
}
.secCmnHeroArea .bgArea img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease;
}
.secCmnHeroArea.scroll_on .bgImg img{
    filter: blur(10px);
}
.secCmnHeroArea .heroInner{
    width: 100%;
    position: relative;
    z-index: 5;
}
@media screen and (max-width:767px){
    #technology_conteiner{
        max-width: 100%;
    }
}

/* .secCmnHero */
.secCmnHero{
    width: 100%;
    height: 100vh;
    min-height: 1000px;
    color: #fff;
    padding-top: 220px;
    position: relative;
}
.secCmnHero .inner{
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}
.secCmnHero .leftArea{
    flex: 1;
    padding: 50px 0;
}
.secCmnHero .subtitBox{
    display: flex;
    align-items: flex-end;
    width: 100%;
}
.secCmnHero .subtitBox .imgSubArea{
    display: inline-block;
    position: relative;
    padding-right: 12px;
}
.secCmnHero .subtitBox .imgSubArea::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 160px;
    background-color: #fff;
    right: 0;
    top: calc(50% - 70px);
    transform: rotate(30deg);
}
.secCmnHero .subtitBox .imgSub{
    display: inline-block;
    position: relative;
    z-index: 2;
}
.secCmnHero .subtitArea{
    flex: 1;
    padding-left: 47px;
}
.secCmnHero .subtitIn{
    display: inline-block;
    text-align: left;
}
.secCmnHero .subtitEng{
    font-size: 11px;
    line-height: calc(14 / 11);
    letter-spacing: 0.25em;
}
.secCmnHero .titEng{
    font-size: 70px;
    line-height: calc(70 / 70);
    letter-spacing: 0.025em;
    margin-top: 4px;
}
.secCmnHero .titBox{
    width: 100%;
    margin-top: 33px;
}
.secCmnHero .title{
    font-size: 130px;
    line-height: calc(140 / 130);
    letter-spacing: 0.15em;
}
.secCmnHero .title_item{
    font-size: 50px;
    line-height: calc(60 / 50);
    vertical-align: calc(50px * (31 / 50));
}
.secCmnHero .txtbox{
    width: 100%;
    text-align: left;
    margin-top: 41px;
}
.secCmnHero .subtit{
    font-size: 26px;
    line-height: calc(32 / 26);
}
.secCmnHero .subin{
    display: inline-block;
    border-bottom: 1px solid;
    border-color: #e60012;
    padding-bottom: 18px;
    letter-spacing: 0.25em;
}
.secCmnHero .txt{
    font-size: 16px;
    line-height: calc(20 / 16);
    letter-spacing: 0.3em;
    margin-top: 29px;
}
.secCmnHero .scrollItem{
    position: absolute;
    width: 20px;
    height: 100%;
    top: 0;
    right: calc(50px + 20px);
    display: flex;
    align-items: center;
}
.secCmnHero .scrollItem .scrollIn{
    display: inline-block;
    position: relative;
    width: 20px;
    padding-bottom: calc(50px + 15px);
}
.secCmnHero .scrollItem .scrollIn::after{
    content: "";
    position: absolute;
    width: 13px;
    height: 50px;
    bottom: 0;
    left: calc(50% - 6.5px);
    background: url(../img/technology/iconScroll.png) center bottom no-repeat;
    background-size: 100% auto;
}
.secCmnHero .page_rightBox{
    position: fixed;
    right: calc(75px + 92px);
    z-index: 20;
    transition: opacity 0.4s ease;
}
.secCmnHero .page_rightBox.hide{
    opacity: 0!important;
    pointer-events: none;
}
@media screen and (min-width:768px){
    .secCmnHero .page_rightBox{
        top: 50%;
        transform: translateY(-50%);
    }
    @media screen and (min-width:1921px){
        .secCmnHero .page_rightBox{
            right: calc(50% - (960px - (75px + 92px)));
        }
    }
}
.secCmnHero .page_rightBox .boxIn{
    display: inline-block;
    text-align: left;
    position: relative;
    padding-bottom: calc(60px - 8px);
}
.secCmnHero .page_rightBox .navtxt{
    font-size: 64px;
    line-height: calc(68 / 64);
    position: relative;
    z-index: 3;
    letter-spacing: 0.025em;
}
.secCmnHero .page_rightBox .navtxt + .navtxt{
    margin-top: 0px;
}
.secCmnHero .page_rightBox .img_navtxt{
    position: absolute;
    width: 134px;
    height: 60px;
    right: calc(0% - 28px);
    bottom: 0;
}
@media screen and (max-width:767px){
    .secCmnHero{
        min-height: 667px;
        padding-top: 10px;
    }
    .secCmnHero .leftArea{
        flex: 1;
        padding: 50px 0;
    }
    .secCmnHero .subtitBox .imgSubArea{
        padding-right: 7px;
    }
    .secCmnHero .subtitBox .imgSubArea::after{
        height: 70px;
        top: calc(50% - 32px);
    }
    .secCmnHero .subtitBox .imgSub img{
        width: auto;
        height: 40px;
    }
    .secCmnHero .subtitArea{
        padding-left: 20px;
    }
    .secCmnHero .subtitEng{
        font-size: 5px;
        line-height: calc(7 / 5);
    }
    .secCmnHero .titEng{
        font-size: 30px;
        letter-spacing: 0.025em;
        margin-top: 2px;
    }
    .secCmnHero .titBox{
        margin-top: 17px;
    }
    .secCmnHero .title{
        font-size: 52px;
        line-height: calc(60 / 52);
        letter-spacing: 0.025em;
    }
    .secCmnHero .title_item{
        font-size: 22px;
        line-height: calc(30 / 22);
        vertical-align: calc(22px * (10 / 22));
        padding: 0 5px;
    }
    .secCmnHero .txtbox{
        margin-top: 33px;
    }
    .secCmnHero .subtit{
        font-size: 16px;
        line-height: calc(22 / 16);
    }
    .secCmnHero .subin{
        padding-bottom: 7px;
        letter-spacing: 0.1em;
    }
    .secCmnHero .txt{
        font-size: 13px;
        line-height: calc(18 / 13);
        letter-spacing: 0;
        margin-top: 17px;
    }
    .secCmnHero .scrollItem{
        display: none;
    }
    .secCmnHero .page_rightBox{
        right: 31px;
        bottom: 60px;
    }
    .secCmnHero .page_rightBox .boxIn{
        padding-bottom: calc(29px - 8px);
    }
    .secCmnHero .page_rightBox .navtxt{
        font-size: 25px;
        line-height: calc(28 / 25);
    }
    .secCmnHero .page_rightBox .navtxt + .navtxt{
        margin-top: 0px;
    }
    .secCmnHero .page_rightBox .img_navtxt{
        width:55px;
        height: auto;
        right: calc(0% - 10px);
    }
}
/* ▼アニメーション */
.secCmnHeroArea .delay01,
.secCmnHeroArea .delay02,
.secCmnHeroArea .delay03 {
    opacity: 0;
    transition: opacity 1s ease;
}
.secCmnHeroArea.Fv_show .delay01.is-show,
.secCmnHeroArea.Fv_show .delay02.is-show,
.secCmnHeroArea.Fv_show .delay03.is-show {
    opacity: 1;
}

.secCmnTopBox{
    width: 100%;
    height: 100vh;
    min-height: 1000px;
    position: relative;
    padding: 50px 0;
    color: #fff;
    margin-top: 60px;
    overflow: hidden;
}
.secCmnTopBox .inner{
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 11;
}
.secCmnTopBox .titbox{
    display: inline-block;
    width: 100%;
    text-align: left;
}
.secCmnTopBox .tit{
    font-size: 44px;
    line-height: calc(80 / 44);
}
.secCmnTopBox .txt{
    font-size: 18px;
    line-height: calc(50 / 18);
    margin-top: 30px;
}
@media screen and (max-width:767px){
    .secCmnTopBox{
        min-height:0;
        height: auto;
        margin-top: 20px;
        padding-top: 114px;
        padding-bottom: 270px;
    }
    .secCmnTopBox .inner{
        display: block;
    }
    .secCmnTopBox .tit{
        font-size: 16px;
        line-height: calc(30 / 16);
    }
    .secCmnTopBox .txt{
        font-size: 13px;
        line-height: calc(28 / 13);
        margin-top: 15px;
    }
}
/* bgContent */
.bgContent{
    width: 100%;
    position: relative;
    z-index: 4;
    background-color: #232326;
}
/* secCmnAnchor */
.secCmnAnchor{
    width: 100%;
    background-color: #232326;
    color: #fff;
    position: relative;
    padding-top: 20px;
    padding-bottom: 200px;
    border-bottom: 1px solid;
    border-color: #fff;
}
.secCmnAnchor .tit{
    font-size: 24px;
    line-height: calc(40 / 24);
    letter-spacing: 0.15em;
}
.secCmnAnchor .tit .borderbox{
    display: inline-block;
    width: 200px;
    height: 1px;
    background-color: rgba(244,244,244,0.2);
    vertical-align: middle;
    margin-left: 25px;
}
.secCmnAnchor .list{
    display: flex;
    margin-top: 62px;
}
.secCmnAnchor .item{
    width: calc((100% - 240px) / 4);
    margin-right: 80px;
}
.secCmnAnchor .item:last-child{
    margin-right: 0;
}
.secCmnAnchor .itemLink{
    width: 100%;
    display: block;
    color: #fff;
    border-bottom: 1px solid;
    text-decoration: none;
    border-color: #fff;
    padding-bottom: 18px;
}
.secCmnAnchor .linkInner{
    position: relative;
    text-align: left;
    padding-right: calc(38px + 10px);
}
.secCmnAnchor .linkInner::after{
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    top: 4px;
    right: 0;
    border-radius: 50%;
    border: 1px solid;
    border-color: #fff;
}
.secCmnAnchor.lazyloaded .linkInner::after{
    background: url(../img/technology/iconAnchor.png) center center no-repeat;
    background-size: 11px auto;
}
.secCmnAnchor .linktxt{
    font-size: 16px;
    line-height: calc(24 / 16);
    font-weight: 900;
}
.secCmnAnchor .linktxtEng{
    font-size: 12px;
    line-height: calc(20 / 12);
    margin-top: 5px;
    letter-spacing: 0.1em;
}
@media screen and (min-width:768px){
    @media screen and (max-width:1520px){
        .secCmnAnchor .linktxt{
            font-size: 14px;
        }
    }
}
@media screen and (max-width:767px){
    .secCmnAnchor{
        padding-top: 39px;
        padding-bottom: 60px;
    }
    .secCmnAnchor .tit{
        font-size: 16px;
        line-height: calc(28 / 16);
        letter-spacing: 0.05em;
    }
    .secCmnAnchor .tit .borderbox{
        width: 50px;
        margin-left: 15px;
    }
    .secCmnAnchor .list{
        display: block;
        margin-top: 19px;
        border: 1px solid;
        border-color: #3e3e40;
    }
    .secCmnAnchor .item{
        width: 100%;
        margin-right: 0px;
    }
    .secCmnAnchor .item + .item{
        border-top: 1px solid;
        border-color: #3e3e40;
    }
    .secCmnAnchor .itemLink{
        display: block;
        border: none;
        padding: 0;
    }
    .secCmnAnchor .linkInner{
        padding: 0 20px;
        padding-right: 40px;
        display: flex;
        align-items: center;
        width: 100%;
        height: 53px;
    }
    .secCmnAnchor .linkInner::after{
        width: 11px;
        height: 6px;
        top: calc(50% - 3px);
        right: 20px;
        border-radius: 0;
        border:none;
    }
    .secCmnAnchor .linktxtbox{
        display: inline-block;
        width: 100%;
        text-align: left;
    }
    .secCmnAnchor .linktxt{
        font-size: 13px;
        line-height: calc(20 / 13);
    }
    .secCmnAnchor .linktxtEng{
        display: none;
    }
}

.secCmnAnchor .item.jsShow.delay01{
    transition-delay: 0.1s;
}
.secCmnAnchor .item.jsShow.delay02{
    transition-delay: 0.3s;
}
.secCmnAnchor .item.jsShow.delay03{
    transition-delay: 0.5s;
}
.secCmnAnchor .item.jsShow.delay04{
    transition-delay: 0.7s;
}

/* secContentList */
.secContentList{
    width: 100%;
}
.secContentList .secContentArea{
    width: 100%;
}
.secContentList .c_Inner{
    display: flex;
}
.secContentList .c_Nav{
    width: 0;
    position: sticky;
    height: fit-content;
    top: 0;
    left: 0;
    padding: 80px 0;
    z-index: 20;
}
.secContentList .c_Content{
    width: 100%;
    position: relative;
    background-color: #232326;
    color: #fff;
}
.secContentList .secContentArea.bg_White .c_Content{
    background-color: #fff;
    color: #232323;
}
.secContentList .c_Content::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color:#444446;
    left: 80px;
    top: 0;
}
.secContentList .secContentArea.bg_White .c_Content::after{
    background-color: #dedede;
}
@media screen and (max-width:767px){
    .secContentList .c_Inner{
        display: block;
    }
    .secContentList .c_Nav{
        width:100%;
        position:relative;
        height: auto;
        padding: 0;
    }
    .secContentList .c_Content{
        width: 100%;
    }
    .secContentList .c_Content::after{
        display: none;
    }
}


/* secNavbox */
.secNavbox{
    width: 360px;
    height:440px;
    position: relative;
    overflow: hidden;
    z-index: 10;
}
.secNavbox::after{
    content: "";
    width: 440px;
    height: 440px;
    border: 1px solid;
    border-color:#444446;
    border-radius: 50%;
    top: 0;
    right: 0;
    position: absolute;
    background-color: #232326;
}
.secContentArea.bg_White .secNavbox::after{
    background-color: #fff;
    border-color: #dedede;
}
.secNavbox .navIn{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 30px;
    z-index: 10;
    color: #fff;
}
.secContentArea.bg_White .secNavbox .navIn{
    color: #232323;
}
.secNavbox .navbox{
    display: inline-block;
    width: 100%;
    text-align: left;
}
.secNavbox .navtitbox{
    width: 100%;
    text-align: left;
}
.secNavbox .navtitbox .navtitEng{
    font-size: 14px;
    line-height: calc(20 / 14);
    color: #e60012;
    letter-spacing: 0.05em;
}
.secNavbox .navtitbox .navtitjpn{
    font-size: 18px;
    line-height: calc(24 / 18);
    font-weight: 900;
    margin-top: 8px;
}
.secNavbox .navlinklist{
    width: 100%;
    margin-top: 24px;
}
.secNavbox .navlinklist .list{
    width: 100%;
}
.secNavbox .navlinklist .item{
    position: relative;
}
.secNavbox .navlinklist .itemLink{
    display: flex;
    align-items: center;
    text-decoration: none;
    min-height: 44px;
    padding: 10px;
    padding-left:15px;
    border-left: 1px solid;
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.15);
    width: fit-content;
}
.secContentArea.bg_White .secNavbox .navlinklist .itemLink{
    border-color: rgba(35,35,35,0.15);
    color: rgba(35,35,35,0.5);
}
.secNavbox .navlinklist .item.on .itemLink{
    border-color: #e60012;
    color: #fff;
}
.secContentArea.bg_White .secNavbox .navlinklist .item.on .itemLink{
    border-color: #e60012;
    color: #232323;
}
.secNavbox .navlinklist .linkin{
    display: inline-block;
    width: 100%;
    text-align: left;
}
.secNavbox .navlinklist .linkin .linktxt{
    font-size: 14px;
    line-height: calc(20 / 14);
}
@media screen and (min-width:768px){
    @media screen and (max-width:1820px){
        .secNavbox{
            width: 300px;
            height: 380px;
        }
        .secNavbox::after{
            width: 380px;
            height: 380px;
        }
        .secNavbox .navtitbox .navtitjpn{
            font-size: 16px;
        }
        .secNavbox .navlinklist .linkin .linktxt{
            font-size: 12px;
            line-height: calc(20 / 12);
        }
    }
    @media screen and (max-width:1620px){
        .secNavbox{
            width: 260px;
            height: 340px;
        }
        .secNavbox::after{
            width: 340px;
            height: 340px;
        }
        .secNavbox .navtitbox .navtitEng{
            font-size: 12px;
        }
        .secNavbox .navtitbox .navtitjpn{
            font-size: 13px;
        }
        .secNavbox .navlinklist .linkin .linktxt{
            font-size: 11px;
        }
        .secContentList .c_Content{
            padding-left: 180px;
        }
    }
}
@media screen and (max-width:767px){
    .secNavbox{
        width: 100%;
        height:auto;
        border-bottom: 1px solid;
        border-color: rgba(255,255,255,0.1);
    }
    .secContentArea.bg_White .secNavbox{
        border-color: rgba(35,35,35,0.1);
        background-color: #fff;
    }
    .secNavbox::after{
        display: none;
    }
    .secNavbox .navIn{
        height: auto;
        display: block;
        padding:0;
    }
    .secNavbox .navbox{
        display:block;
    }
    .secNavbox .navtitbox{
        width: 100%;
        padding: 0 20px;
        height: 190px;
        display: flex;
        align-items: center;
        position: relative;
    }
    .secNavbox .navtitbox::after{
        content: "";
        position: absolute;
        width: 100%;
        height: calc(100% - 100px);
        left: 0;
        bottom: 0;
        background-image: -moz-linear-gradient( 90deg, rgb(35,35,38) 0%, rgba(35,35,38,0) 100%);
        background-image: -webkit-linear-gradient( 90deg, rgb(35,35,38) 0%, rgba(35,35,38,0) 100%);
        background-image: -ms-linear-gradient( 90deg, rgb(35,35,38) 0%, rgba(35,35,38,0) 100%);
    }
    .secContentArea.bg_White .secNavbox .navtitbox::after{
        background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
        background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
        background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
    }
    .c_Nav.lazyloaded .navtitbox{
        background: url(../img/common/tp.gif) center center no-repeat;
        background-size: cover;
    }
    .secNavbox .navtitbox .navtxtIn{
        display: inline-block;
        width: 100%;
        padding-bottom: 20px;
        text-align: left;
    }
    .secNavbox .navtitbox .navtitEng{
        font-size: 12px;
        line-height: calc(20 / 12);
    }
    .secNavbox .navtitbox .navtitjpn{
        font-size: 18px;
        line-height: calc(24 / 18);
        margin-top: 5px;
    }
    .secContentArea.bg_White .secNavbox .navtitbox .navtitjpn{
        color: #fff;
    }
    .secNavbox .navlinklist{
        margin-top: calc(0% - 13px);
    }
    .secContentArea.bg_White .secNavbox .navlinklist{
        background-color: #fff;
    }
    .secNavbox .navlinklist .list{
        display: flex;
    }
    .secNavbox .navlinklist .item{
        width: calc((100% - 2px) / 3);
        margin-right: 1px;
        position: relative;
    }
    .secNavbox .navlinklist .item::after{
        content: "";
        position: absolute;
        width: 1px;
        height: calc(100% - 24px);
        top: 12px;
        right: calc(0% - 1px);
        background-color: rgba(255,255,255,0.1);
    }
    .secContentArea.bg_White .secNavbox .navlinklist .item::after{
        background-color: rgba(35,35,35,0.1);
    }
    .secNavbox .navlinklist .item:last-child{
        margin-right: 0;
    }
    .secNavbox .navlinklist .item:last-child::after{
        display: none;
    }
    .secNavbox .navlinklist .itemLink{
        min-height:0;
        height: 60px;
        padding: 0;
        border-left:none;
        width:100%;
    }
    .secNavbox .navlinklist .itemLink::before{
        content: "";
        position: absolute;
        width: 70px;
        height: 1px;
        bottom: 0;
        left: calc(50% - 35px);
    }
    .secNavbox .navlinklist .item:first-child .itemLink{
        color: #fff!important;
    }
    .secContentArea.bg_White .secNavbox .navlinklist .item:first-child .itemLink{
        color: #232323!important;
    }
    .secNavbox .navlinklist .item:first-child .itemLink::before{
        background-color: #e60012;
    }
    .secNavbox .navlinklist .linkin{
        text-align:center;
    }
    .secNavbox .navlinklist .linkin .linktxt{
        font-size: 10px;
        line-height: calc(14 / 10);
    }
}

/* secCmntitlebox */
.secCmntitlebox{
    text-align: center;
    width: 100%;
}
.secCmntitlebox .titbox{
    position: relative;
    text-align: center;
    padding-bottom: 41px;
}
.secCmntitlebox .titbox::after{
    content: "";
    position: absolute;
    width: 60px;
    height: 1px;
    background-color: rgba(255,255,255,0.4);
    left: calc(50% - 30px);
    bottom: 0;
}
.secContentArea.bg_White .secCmntitlebox .titbox::after{
    background-color: rgba(35,35,35,0.3);
}

.secCmntitlebox .jpn_sub{
    font-size: 28px;
    line-height: calc(36 / 28);
    font-weight: 900;
}
.secCmntitlebox .titbox .jpntit{
    font-size: 54px;
    line-height: calc(80 / 54);
    font-weight: 900;
    letter-spacing: 0.05em;
}
.secCmntitlebox .jpn_sub +.jpntit{
    margin-top: 10px;
}
.secCmntitlebox .c_txt{
    text-align: center;
    font-size: 18px;
    line-height: calc(40 / 18);
    margin-top: 39px;
}
.secCmntitlebox .c_txt.jsShow{
    transition-delay: 0.3s;
}
@media screen and (max-width:767px){
    .secCmntitlebox{
        width: 100%;
    }
    .secCmntitlebox .titbox{
        text-align: left;
        padding-bottom: 13px;
    }
    .secCmntitlebox .titbox::after{
        width: 25px;
        left:0;
    }
    .secCmntitlebox .titbox .jpntit{
        font-size: 18px;
        line-height: calc(30 / 18);
    }
    .secCmntitlebox .c_txt{
        text-align: left;
        font-size: 13px;
        line-height: calc(24 / 13);
        margin-top: 11px;
    }
}
/* secAnchorNav */
@media screen and (min-width:768px){
    .secAnchorNav{
        display: none;
    }
}
@media screen and (max-width:767px){
    .secAnchorNav{
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        transform: translateY(-100%);
        border-bottom: 1px solid;
        border-color: rgba(255,255,255,0.1);
        background-color: #232326;
        transition: 0.5s;
    }
    .secContentArea.bg_White .secAnchorNav{
        border-color: rgba(35,35,35,0.1);
        background-color: #fff;
    }
    .secAnchorNav.active{
        transform: translateY(0);
    }
    .secAnchorNav .navlist{
        display: flex;
    }
    .secAnchorNav .navItem{
        width: calc((100% - 2px) / 3);
        margin-right: 1px;
        position: relative;
    }
    .secAnchorNav .navItem::after{
        content: "";
        position: absolute;
        width: 1px;
        height: calc(100% - 24px);
        top: 12px;
        right: calc(0% - 1px);
        background-color: rgba(255,255,255,0.1);
    }
    .secContentArea.bg_White .secAnchorNav .navItem::after{
        background-color: rgba(35,35,35,0.1);
    }
    .secAnchorNav .navItem:last-child::after{
        display: none;
    }
    .secAnchorNav .navItem:last-child{
        margin-right: 0;
    }
    .secAnchorNav .n_link{
        display: flex;
        align-items: center;
        width: 100%;
        height: 60px;
        color: rgba(255,255,255,0.5);
        position: relative;
        text-decoration: none;
    }
    .secContentArea.bg_White .secAnchorNav .n_link{
        color: rgba(35,35,35,0.5);
    }
    .secAnchorNav .navItem.on .n_link{
        color: #fff;
    }
    .secContentArea.bg_White .secAnchorNav .navItem.on .n_link{
        color: #232323;
    }
    .secAnchorNav .navItem.on .n_link::after{
        content: "";
        position: absolute;
        width: calc(100% - 60px);
        height: 1px;
        background-color: #e60012;
        left: 30px;
        bottom: calc(0% - 1px);
    }
    .secAnchorNav .n_inner{
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .secAnchorNav .n_txt{
        font-size: 10px;
        line-height: calc(14 / 10);
        font-weight: 900;
        letter-spacing: 0.05em;
    }
    .secCmntitlebox .jpn_sub{
        font-size: 15px;
        line-height: calc(24 / 15);
    }
    .secCmntitlebox .jpn_sub +.jpntit{
        margin-top: 1px;
    }
}
@media screen and (max-width:374px){
    .secCmntitlebox .jpn_sub{
        font-size: 13px;
    }
    .secCmntitlebox .titbox .jpntit{
        font-size: 16px;
    }
}

/* secCmnDesign */
.secCmnDesign{
    height: 1000px;
    background: #232323;
    margin-top: 1px;
    position: relative;
}
.secCmnDesign::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(140px, 28vh, 400px);
    z-index: 9;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(35, 35, 38, 0) 0%, #232326 100%);
}
.secCmnDesign::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(35, 35, 35, 0.5);
    transition: opacity 0.4s ease;
    z-index: 10;
    left: 0;
    top: 0;
}
.secCmnDesign .boxBgAbout{
    padding: 0;
    position: relative;
    overflow: hidden;
}
.secCmnDesign .wrapper{
    position: relative;
    z-index: 15;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
}
.secCmnDesign .txtWrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.secCmnDesign .tit{
    font-size: 44px;
    letter-spacing: 7px;
    line-height: 1.81;
}
.secCmnDesign .txt{
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 2.77;
    margin-top: 25px;
}
.secCmnDesign .boxAbout{
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 1000px;
}
.secCmnDesign .bgAbout{
    width: 100%;
    position: relative;
    top: 0;
    right: 0;
    z-index: 1;
}
.secCmnDesign .bgAbout .boxBg{
    display: flex;
    justify-content: center;
}
.secCmnDesign .bgAbout .list{
    position: relative;
    transition: all 0.3s ease-out;
    transform: translate3d(0px, 0, 0px);
}
.secCmnDesign .bgAbout .list + .list{
    margin-left: 100px;
}
.secCmnDesign .bgAbout .item{
    width: 460px;
}
.secCmnDesign .bgAbout .item + .item{
    margin-top: 60px;
}
@media screen and (max-width:767px){
    .secCmnDesign{
        height: 667px;
    }
    .secCmnDesign .boxAbout {
        height: 667px;
    }
    .secCmnDesign .wrapper{
        align-items: flex-start;
        padding-top: 90px;
    }
    .secCmnDesign .tit{
        font-size: 22px;
        letter-spacing: 2px;
        line-height: 1.63;
    }
    .secCmnDesign .txt{
        font-size: 13px;
        letter-spacing: 0;
        line-height: 2.15;
        margin-top: 20px;
    }
    .secCmnDesign .bgAbout .boxBg{
        display: flex;
        justify-content: center;
    }
    .secCmnDesign .bgAbout .list + .list{
        margin-left: 40px;
    }
    .secCmnDesign .bgAbout .item{
        width: 190px;
    }
    .secCmnDesign .bgAbout .item + .item{
        margin-top: 20px;
    }
}


/* secCmnBnrTechnology */
.secCmnBnrTechnology{
    background: #232326;
    padding-bottom: 206px;
    overflow: hidden;
}
.secCmnBnrTechnology .list{
    display: flex;
}
.secCmnBnrTechnology .item{
    width: calc(100% / 4);
    position: relative;
}
.secCmnBnrTechnology .item:nth-child(n+2)::after{
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    left: 0;
    top: 0;
    background: #fff;
}
.secCmnBnrTechnology .inner{
    display: block;
    position: relative;
    text-decoration: none;
    color: #fff;
}
.secCmnBnrTechnology .txtBox{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.secCmnBnrTechnology .subTit{
    position: absolute;
    top: 80px;
    left: 0;
    font-size: 14px;
    letter-spacing: 1px;
    padding-left: 33px;
}
.secCmnBnrTechnology .subTit::after{
    position: absolute;
    content: "";
    width: 20px;
    height: 4px;
    left: 0;
    top: calc(50% - 2px);
    background: #fff;
}
.secCmnBnrTechnology .subtitBox{
    position: absolute;
    left: 38px;
    bottom: 58px;
    display: flex;
    align-items: flex-end;
}
.secCmnBnrTechnology .imgSubArea{
    display: inline-block;
    position: relative;
    top: -10px;
}
.secCmnBnrTechnology .imgSubArea::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 80px;
    background-color: #fff;
    right: 0;
    top: calc(50% - 30px);
    transform: rotate(30deg);
}
.secCmnBnrTechnology .imgSub{
    display: inline-block;
    position: relative;
    z-index: 2;
}
.secCmnBnrTechnology .subtitArea{
    flex: 1;
    padding-left: 20px;
}
.secCmnBnrTechnology .subtitIn{
    display: inline-block;
    text-align: left;
}
.secCmnBnrTechnology .subtitEng{
    font-size: 10px;
    line-height: calc(14 / 10);
    letter-spacing: 2px;
}
.secCmnBnrTechnology .titEng{
    font-size: 35px;
    letter-spacing: 1px;
    margin-top: -2px;
}
.secCmnBnrTechnology .tit{
    font-size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    position: relative;
    top: -23px;
    letter-spacing: 5px;
}
.secCmnBnrTechnology .tit .titIcon{
    position: relative;
    padding: 20px 0;
}
@media screen and (max-width:767px){
    .secCmnBnrTechnology{
        padding-bottom: 81px;
    }
    .secCmnBnrTechnology .list{
        flex-wrap: wrap;
    }
    .secCmnBnrTechnology .item{
        width: calc(50% - 0.5px);
    }
    .secCmnBnrTechnology .item:nth-child(2n){
        margin-left: 1px;
    }
    .secCmnBnrTechnology .item:nth-child(n+3){
        margin-top: 1px;
    }
    .secCmnBnrTechnology .item:nth-child(n+2)::after{
        position: absolute;
        content: "";
        width: 1px;
        height: 100%;
        left: -1px;
        top: 0;
        background: #fff;
    }
    .secCmnBnrTechnology .item:nth-child(n+3)::before{
        position: absolute;
        content: "";
        width: calc(100% + 1px);
        height: 1px;
        left: 0;
        top: -1px;
        background: #fff;
    }
    .secCmnBnrTechnology .inner{
        display: block;
        position: relative;
        text-decoration: none;
        color: #fff;
    }
    .secCmnBnrTechnology .txtBox{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .secCmnBnrTechnology .subTit{
        top: 30px;
        font-size: 10px;
        letter-spacing: 0;
        padding-left: 15px;
    }
    .secCmnBnrTechnology .subTit::after{
        width: 10px;
        height: 2px;
        top: calc(50% - 1px);
    }
    .secCmnBnrTechnology .subtitBox{
        left: 20px;
        bottom: 22px;
    }
    .secCmnBnrTechnology .imgSubArea{
        top: -6px;
    }
    .secCmnBnrTechnology .imgSubArea::after{
        height: 40px;
        right: 0;
        top: calc(50% - 15px);
    }
    .secCmnBnrTechnology .imgSubArea img{
        width: auto;
        height: 22px;
    }
    .secCmnBnrTechnology .subtitArea{
        flex: 1;
        padding-left: 10px;
    }
    .secCmnBnrTechnology .subtitEng{
        font-size: 8px;
        line-height: calc(10 / 10);
        letter-spacing: 0;
    }
    .secCmnBnrTechnology .titEng{
        font-size: 15px;
        letter-spacing: 1px;
        margin-top: 1px;
    }
    .secCmnBnrTechnology .tit{
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        position: relative;
        top: -23px;
        letter-spacing: 2px;
        height: 130px;
        position: relative;
    }
    .secCmnBnrTechnology .tit .titIcon{
        padding: 10px 0;
    }
    .secCmnBnrTechnology .tit::after{
        position: absolute;
        content: "";
        width: 27px;
        height: 27px;
        bottom: -45px;
        left: calc(50% - 14px);
    }
    .secCmnBnrTechnology.lazyloaded .tit::after{
        background: url(../img/technology/strong/iconTechnologyCmnBnr.png) center top / cover;
    }
}
@media screen and (max-width:359px){
    .secCmnBnrTechnology .subTit{
        padding-left: 10px;
        font-size: 9px;
    }
    .secCmnBnrTechnology .subTit::after{
        width: 5px;
    }
    .secCmnBnrTechnology .tit::after{
        bottom: -30px;
    }
}

.secCmnBnrTechnology .item.jsShow.delay01{
    transition-delay: 0.1s;
}
.secCmnBnrTechnology .item.jsShow.delay02{
    transition-delay: 0.3s;
}
.secCmnBnrTechnology .item.jsShow.delay03{
    transition-delay: 0.5s;
}
.secCmnBnrTechnology .item.jsShow.delay04{
    transition-delay: 0.7s;
}
.secCmnBnrTechnology .secondBnr{
    margin-top: 247px;
}
.secCmnBnrTechnology .secondList{
    display: flex;
}
.secCmnBnrTechnology .secondItem{
    width: calc(50% - 49px);
}
.secCmnBnrTechnology .secondItem:nth-child(2){
    margin-left: 98px;
}
.secCmnBnrTechnology .secondInner{
    position: relative;
    display: block;
    text-decoration: none;
    color: #fff;
    height: 600px;
}
.secCmnBnrTechnology .secondInner::after{
    position: absolute;
    content: "";
    width: 911px;
    height: 100%;
    top: 0;
    right: 0;
}
.secCmnBnrTechnology.lazyloaded .secondItem:nth-child(2) .secondInner::after{
    right: auto;
    left: 0;
}
.secCmnBnrTechnology.lazyloaded .secondInner::after{
    background: url(../img/technology/strong/bgCmnBnrTechnologySecond.png) center top / cover;
}
.secCmnBnrTechnology .secondIn{
    position: relative;
    z-index: 10;
    text-align: center;
}
.secCmnBnrTechnology .secondTit{
    font-size: 100px;
    letter-spacing: -2px;
    position: relative;
    display: inline-block;
    top: -60px;
    left: -20px;
}
.secCmnBnrTechnology .secondTit::after{
    position: absolute;
    content: "";
    width: 390px;
    height: 3px;
    left: calc(50% - 190px);
    top: calc(50% + 9.5px);
    background: #232323;
}
.secCmnBnrTechnology .secondTit span{
    position: relative;
    z-index: 20;
}
.secCmnBnrTechnology .secondItem:nth-child(2) .secondTit{
    left: auto;
    right: -20px;
}
.secCmnBnrTechnology .secondTxt{
    font-size: 16px;
    line-height: 2.5;
    margin-top: -20px;
    letter-spacing: 2px;
}
.secCmnBnrTechnology .boxIconCircle{
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 28px;
    left: -15px;
}
.secCmnBnrTechnology .secondItem:nth-child(2) .boxIconCircle{
    left: auto;
    right: -15px;
}
.secCmnBnrTechnology .boxIconCircle .link{
    position: relative;
    display: block;
    text-align: center;
    width: 68px;
    height: 68px;
}
.secCmnBnrTechnology .boxIconCircle .link .linkTxtBox{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 1px solid rgba(255, 255, 255 , 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: all 0.2s ease-out;
}
.secCmnBnrTechnology .boxIconCircle .link svg{
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    opacity: 1;
    max-width: 100%;
    height: auto;
}
.secCmnBnrTechnology .secondInner:hover .circle{
    stroke-dashoffset: 0;
    transition-duration: 1.6s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1)
}
.secCmnBnrTechnology .boxIconCircle .circle{
    stroke-dasharray: 594;
    stroke-dashoffset: 594;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 50% 50%;
    stroke: #fff;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition-duration: 1.6s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1)
}
.secCmnBnrTechnology .boxIconCircle.boxIconCircleWhite .link .linkTxtBox{
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.secCmnBnrTechnology .boxIconCircle.boxIconCircleWhite .circle{
    stroke: #fff;
    stroke-width: 5;
}
.secCmnBnrTechnology .secondImg{
    position: absolute;
    width: 675px;
    left: calc(50% - 352.5px);
    bottom: -105px;
    z-index: 20;
}
.secCmnBnrTechnology .secondItem:nth-child(2) .secondImg{
    width: 807px;
    left: calc(50% - 387.5px);
    bottom: -85px;
}
.secCmnBnrTechnology .secondSubTxt{
    text-align: center;
    position: absolute;
    width: 100%;
    left: 20px;
    bottom: -85px;
    z-index: 20;
    font-size: 18px;
    letter-spacing: 3px;
}
.secCmnBnrTechnology .secondSubTxt span{
    border-bottom: solid 1px #fff;
    padding-bottom: 10px;
}
@media screen and (max-width:1680px){
    .secCmnBnrTechnology .secondImg{
        width: 555px;
        left: calc(50% - 292.5px);
        bottom: -65px;
    }
    .secCmnBnrTechnology .secondItem:nth-child(2) .secondImg{
        width: 747px;
        left: calc(50% - 307.5px);
        bottom: -50px;
    }
    .secCmnBnrTechnology .secondSubTxt{
        bottom: -50px;
    }
}
@media screen and (max-width:767px){
    .secCmnBnrTechnology .secondBnr{
        margin-top: 95px;
    }
    .secCmnBnrTechnology .secondList{
        display: block;
    }
    .secCmnBnrTechnology .secondItem{
        width: calc(100% - 19px);
    }
    .secCmnBnrTechnology .secondItem:nth-child(2){
        margin: 106px 0 0 auto;
    }
    .secCmnBnrTechnology .secondInner{
        height: 300px;
    }
    .secCmnBnrTechnology .secondInner::after{
        width: 100%;
        height: 100%;
    }
    .secCmnBnrTechnology.lazyloaded .secondInner::after{
        background: url(../img/technology/strong/bgCmnBnrTechnologySecond_sp.png) center top / cover;
    }
    .secCmnBnrTechnology .secondTit{
        font-size: 36px;
        letter-spacing: -1px;
        top: -20px;
        left: 10px;
    }
    .secCmnBnrTechnology .secondTit::after{
        width: 155px;
        height: 5px;
        left: calc(50% - 77.5px);
        top: calc(50% + 0.5px);
    }
    .secCmnBnrTechnology .secondItem:nth-child(2) .secondTit{
        left: auto;
        right: 10px;
    }
    .secCmnBnrTechnology .secondTxt{
        font-size: 12px;
        line-height: 2;
        margin-top: 2px;
        letter-spacing: 0;
    }
    .secCmnBnrTechnology .boxIconCircle{
        margin-top: 14px;
        left: 10px;
    }
    .secCmnBnrTechnology .secondItem:nth-child(2) .boxIconCircle{
        left: auto;
        right: 10px;
    }
    .secCmnBnrTechnology .boxIconCircle .link{
        width: 45px;
        height: 45px;
    }
    .secCmnBnrTechnology .boxIconCircle.boxIconCircleWhite .link .linkTxtBox{
        border: 1px solid rgba(255, 255, 255, 1);
    }
    .secCmnBnrTechnology .boxIconCircle.boxIconCircleWhite .link .linkTxtBox img{
        width: 20px;
    }
    .secCmnBnrTechnology .boxIconCircle.boxIconCircleWhite .circle{
        stroke: #fff;
        stroke-width: 5;
    }
    .secCmnBnrTechnology .secondImg{
        width: 282px;
        left: calc(50% - 131px);
        bottom: -45px;
    }
    .secCmnBnrTechnology .secondItem:nth-child(2) .secondImg{
        width: 335px;
        left: calc(50% - 177.5px);
        bottom: -28px;
    }
    .secCmnBnrTechnology .secondSubTxt{
        left: -8px;
        bottom: -40px;
        font-size: 14px;
        letter-spacing: 0;
    }
    .secCmnBnrTechnology .secondSubTxt span{
        padding-bottom: 10px;
    }
}
@media screen and (max-width:374px){
    .secCmnBnrTechnology .secondInner::after{
        width: 356px;
    }
    .secCmnBnrTechnology .secondTxt{
        font-size: 11px;
    }
}
@media screen and (max-width:359px){
    .secCmnBnrTechnology .secondTxt{
        font-size: 10px;
    }
    .secCmnBnrTechnology .secondImg {
        bottom: -30px;
    }
    .secCmnBnrTechnology .secondItem:nth-child(2) .secondImg {
        width: 300px;
        left: calc(50% - 150px);
        bottom: -5px;
    }
    .secCmnBnrTechnology .secondSubTxt {
        left: -5px;
        bottom: -13px;
        font-size: 12px;
    }
}