@charset "UTF-8";

/*===================================================
  RESET
====================================================*/
.wrap:not(.page--home) {
    padding: 0;
}
footer.footer {
    display: none;
}
img{pointer-events: none;}


/*===================================================
  OP:LOADER
====================================================*/
.loader{
    position:fixed;
    top: 0;
    left: 0;
    height:100%;
    width:100%;
    background: #D3D3D3;
    z-index:99999;
}
/*===================================================
  .delighter
====================================================*/
.delighter{
    transition: 0.8s ease 0.3s;
    transform: translate(0, 100px);
    opacity: 0;
}
.delighter.started{
    transform: translate(0, 0);
    opacity: 1;
}
    

/*===================================================
  
====================================================*/
.contentList{
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.contentList li{
    font-size: 24px;
    position: relative;
}
.contentList li:has(.point){
    padding-left: 24px;
}
.contentList li .point{
    position: absolute;
    left: -8px;
}
.contentList li .attention{
    display: block;
    font-size: 14px;
    padding-top: 8px;
}

@media screen and (max-width: 960px){
.contentList {
    gap: 8px;
}
.contentList li {
    font-size: 16px;
}
.contentList li:has(.point) {
    padding-left: 16px;
}
}
/*===================================================
  BG
====================================================*/
.bgBox{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url(https://d37hvadbfr8zce.cloudfront.net/lp/bnsi_i5umfZyg/images/bg_pt.jpg);
    background-size: 1185px;
}
.bgBox .bonsai{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 100%;
    max-width: 1300px;
    opacity: 0.7;
    transition: 0.5s ease;
}
.bgBox .lattice{
    position: absolute;
    width: 460px;
    right: 0;
    top: 0;
    transform: translate(20%, -20%);
    transition: 0.5s ease;
}
.bgBox .lattice:last-of-type{
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    transform: translate(-20%, 20%);
}
.headerFix .bgBox .bonsai{
    opacity: 0;
}
.headerFix .bgBox .lattice{
    opacity: 0;
}
@media screen and (max-width: 960px){
.bgBox .bonsai {
    transform: translate(-30%, -50%);
    width: auto;
    height: 100%;
    aspect-ratio: 4 / 3;
}
.bgBox .lattice {
    width: 280px;
}
}

/*===================================================
  visual
====================================================*/
.visual{
    position: relative;
}
.visual .heroView{
    min-height: 760px;
}
.heroviewInner{
    display: flex;
    max-width: 1360px;
    height: 100%;
    margin: 0 auto;
}

.visual .visualDetail{
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.visual .visualDetail .inner{
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.visual .logoBubble{
    width: 100%;
}
.visual .logoBnsi{
    width: 60%;
}
.visual .cross{
    width: 64px;
    height: 32px;
    position: relative;
}
.visual .cross:before{
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 2px;
    background: #000;
    transform: translate(-50%, -50%) rotate(20deg);
}
.visual .cross:after{
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 2px;
    background: #000;
    transform: translate(-50%, -50%) rotate(-20deg);
}
.lead{
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.6em;
    letter-spacing: 0.1em;
}
.visual .mocup{
    width: 55%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.visual .mocup .inner{
    display: flex;
    position: relative;
}
.visual .mocup .cap{
    position: absolute;
    bottom: -5%;
    right: 6%;
    font-size: 10px;
    letter-spacing: 0;
    font-weight: 600;
}
.visual .mocup .moc{
    width: 370px;
    transform: rotate(0deg) translate(25px, 0);
    background-image: url(https://d37hvadbfr8zce.cloudfront.net/lp/bnsi_i5umfZyg/images/ph_visual_moc_00.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.visual .mocup .moc:nth-child(2){
    transform: rotate(15deg) translate(-48px, 48px);
}



/* .loaded */
.heroviewInner{
    filter: blur(30px) opacity(0);
    transition: 1s ease 2.5s;
}
.loaded .heroviewInner{
    filter: blur(0) opacity(1);

}



/* tab */
@media screen and (max-width:1100px) and (min-width:961px ) {

.heroviewInner {
    max-width: 800px;
}

.visual .visualDetail .inner {
    max-width: 300px;
}
.visual .mocup .moc {
    width: 300px;
}
.visual .lead {
    font-size: 18px;
}
.mocDevice{
    display: none;
}
}

/* SP */
@media screen and (max-width: 960px){
.visual {
    position: relative;
    margin-bottom: 60px;
}
.heroviewInner {
    align-items: center;
    flex-direction: column;
    gap: 24px;
}
.visual .heroView {
    height: auto !important;
    min-height: initial;
}
.visual .mocup .moc:nth-child(2) {
    display: none;
}
.visual .visualDetail {
    width: 100%;
    height: auto;
}
.visual .visualDetail .inner {
    max-width: 100%;
    gap: 16px;
}
.visual .logoBubble {
    width: 100%;
    max-width: 220px;
}
.visual .cross {
    width: 40px;
}
.visual .cross:before,
.visual .cross:after {
    height: 1px;
}
.visual .logoBnsi {
    width: 60%;
}
.visual .lead {
    font-size: 18px;
}

.visual .logoBnsi {
    width: 100%;
    max-width: 140px;
}
.visual .mocup .moc {
    width: 100%;
    transform: unset;
    max-width: 370px;
    aspect-ratio: 97 / 167;
    position: relative;
}
.mocDevice{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.visual .mocup {
    width: 70%;
}
}

/*===================================================
  visual animation
====================================================*/

.scrolled .visual .action{
    transition-delay: 0s;
}

/* act1 */
.action{
    opacity: 0;
    transition: 1s ease 2s;
}
.loaded .action{
    opacity: 1;
}
.headerFix .action{

}

/* act1 */
.act1{}
.loaded .act1{}
.headerFix .act1{}

/* act2 */
.act2{}
.loaded .act2{}
.headerFix .act2{}

/* act3 */
.act3{}
.loaded .act3{}
.headerFix .act3{}

/* act4 */
.act4{}
.loaded .act4{}
.headerFix .act4{}


/*===================================================
  movie
====================================================*/
.movieBox{
    position: relative;
}
.movieBox .contentBox{
    max-width: 1000px;
}
.movieBox .contentInner{
    position: relative;
}
.flowing{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
.flowing .inner {
    animation: slidemove 36s linear infinite;
    width: 4000px;
    display: flex;
}
.flowing .inner img {
    width: 2000px;
}
@keyframes slidemove {
  from {
    transform: translateX(-2000px);
  }
  to {
    transform: translateX(0);
  }
}



/* SP */
@media screen and (max-width: 960px){
.movieBox {
    padding: 32px;
    margin-bottom: 60px;
}
.flowing .inner {
    width: 2000px;

}
.flowing .inner img {
    width: 1000px;
}
@keyframes slidemove {
  from {
    transform: translateX(-1000px);
  }
  to {
    transform: translateX(0);
  }
}

}

/*===================================================
  INTRO
====================================================*/
.introBox{

}
.introBox .contentInner{
    display: flex;
    flex-direction: column;
    gap: 100px;
}
.introBox h3{
    font-family: "Libre Baskerville", serif;
    font-size: 72px;
    text-align: center;
    margin: 0;
}
.introBox .leadList{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.introBox .leadList li{
}
.introBox .leadList li .txt{
    font-size: 24px;
    text-align: center;
}

@media screen and (max-width: 960px){
.introBox {
    padding: 0 16px;
}
.introBox .contentInner {
    gap: 24px;
}
.introBox h3 {
    font-size: 32px;
}
.introBox .leadList {
    gap: 24px;
}
.introBox .leadList li .txt {
    font-size: 15px;
    letter-spacing: 0;
}
}

/*===================================================
  MEMBER
====================================================*/
.memberBox{
    padding: 60px 0;
}
.memberBox .contentBox{
    max-width: 100%;
}
.memberBox .contentInner{
    position: relative;
    height: 450px;
}
.memberBox .memberList{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 6300px;
    animation: slideMem 36s linear infinite;
}
.memberBox .memberList li{
    width: 450px;
    aspect-ratio: 1;
}
.memberBox .memberList li a{
    display: block;
    position: relative;
    overflow: hidden;
    pointer-events: none;
}
.memberBox .memberList li a .name{
    position: absolute;
    left: 20px;
    top: 20px;
    color: #000;
    font-family: "Libre Baskerville", serif;
    font-size: 36px;
    font-weight: 600;
}
.memberBox .memberList li a span{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10px;
}
.memberBox .memberList li.lili a span{
    background: #B0C4DE;
}
.memberBox .memberList li.yui a span{
    background: #C6762E;
}
.memberBox .memberList li.lisa a span{
    background: #C91E3B;
}
.memberBox .memberList li.maya a span{
    background: #FFEF6D;
}
.memberBox .memberList li.rei a span{
    background: #8B5FBF;
}
.memberBox .memberList li.saki a span{
    background: #008D56;
}
.memberBox .memberList li.ai a span{
    background: #FFD1DC;
}
.memberBox .memberList li img{
    transition: 0.3s ease;
}

@keyframes slideMem {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-3150px);
  }
}


/* PC */
@media screen and (min-width: 960px){
.memberBox .memberList li a:hover{
    filter: brightness(1.1);
}
.memberBox .memberList li a:hover img{
    transform: scale(1.1);
}
}

/* SP */
@media screen and (max-width: 960px){
.memberBox {
    padding: 60px 0;
}
.memberBox .contentInner {
    height: 225px;
}
.memberBox .memberList{
    width: 3150px;
}
.memberBox .memberList li{
    width: 225px;
    aspect-ratio: 1;
}
@keyframes slideMem {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-1575px);
  }
}
.memberBox .memberList li a .name {
    left: 14px;
    top: 14px;
    font-size: 18px;
}

}


/*===================================================
  BNR
====================================================*/
.bnrBox{
    padding: 60px 60px 120px;
}
.bnrBox .contentBox{

}
.bnrBox .contentInner{
    gap: 120px;
}
.bnrBox figure{
    border-radius: 32px;
    overflow: hidden;
}
.bnrBox .lead{
    text-align: center;
    font-size: 32px;
}
@media screen and (max-width: 960px){
.bnrBox {
    padding: 0 16px 60px;
}
.bnrBox .contentInner {
    gap: 60px;
}
.bnrBox .lead {
    text-align: center;
    font-size: 18px;
}
}

/*===================================================
  REGIST
====================================================*/
.registBox{
    padding: 120px 60px;
    background: #FFF;
    border-radius: 32px;
}
.registBox .contentBox{
    gap: 0;
    max-width: 1000px;
}
.registBox h2{
    font-weight: 400;
    letter-spacing: 0.1em;
    border-bottom: 1px solid;
    padding-bottom: 120px;
    margin-bottom: 120px;
}
.registBox .contentInner{
    gap:0;
}
.registBox .contentInner:not(:has(.space)){
    margin-bottom: 120px;
}
.registBox .stepTit{
    text-align: center;
    font-family: "Libre Baskerville", serif;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.registBox .stepTit .tit{
    font-size: 48px;
    line-height: 1em;
    margin-bottom: 32px;
}
.registBox .stepTit .tit span{
    font-size: 160%;
    padding-left: 16px;
}
.registBox .stepTit figure{
    width: 360px;
    margin-bottom: 64px;
}
.registBox .stepTit .txt{
    margin-bottom: 16px;
    font-size: 32px;
}
.registBox .stepTit .cap{
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 1.8em;
}
.registBox .stepDetail{
    width: 100%;
    border: 1px solid;
    padding: 40px 64px 56px;
    border-radius: 32px;
}
.registBox .stepDetail .detailTit{
    text-align: center;
    font-size: 24px;
    padding-bottom: 40px;
    border-bottom: 1px solid;
    margin-bottom: 56px;
}
.registBox .inBox{
    display: flex;
    flex-direction: row;
    gap: 40px;
}
.registBox .inBox .stepDetail{
    padding: 56px 64px;
    width: calc(50% - 20px);
}
.registBox .inBox .stepDetail .detailTit{
    margin-bottom: 32px;
    font-size: 32px;
    border: none;
    padding-bottom: 0;
}
.registBox .inBox .stepDetail .detailTxt{
    text-align: center;
    font-size: 18px;
    line-height: 1.7em;
    margin-bottom: 32px;
}
.registBox .inBox .stepDetail .btnEntry{

}
.registBox .inBox .stepDetail .btnEntry a{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #974EF8;
    font-size: 20px;
    font-weight: 500;
    color: #FFF;
    height: 72px;
    border-radius: 100px;
    text-align: center;
    line-height: 1.3em;
}
.registBox .inBox .stepDetail .bnkiEntry{
    margin-bottom: 16px;
}
.registBox .inBox .stepDetail .bnkiEntry a{
    background: #94AA8D;
    color: #F4EFE7;
}
.registBox .inBox .stepDetail .btnCap{
    text-align: center;
    line-height: 1em;
}
.registBox .inBox .stepDetail .btnCap a{
    font-size: 14px;
    color: #000;
    display: inline-block;
}
.registBox .appBlock{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.registBox .appBlock .appIcon{
    width: 200px;
}
.registBox .appBlock .appdown{
    display: flex;
    gap: 40px;
}
.registBox .appBlock .appdown li{
        line-height: 0;
}
.registBox .appBlock .appdown li a{
    display: block;
}
.registBox .appBlock .appdown li a img{
    height: 100px;
    width: auto;
}
.registBox .space{
    padding: 100px 0;
    margin: 0 auto;
}
.registBox .space span{
    display: block;
    width: 1px;
    height: 140px;
    background: #000;
}
.registBox .stepEnd{
    border-top: 1px solid;
    padding-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
}
.registBox .stepEnd dt{
    font-size: 40px;
}
.registBox .stepEnd dd{
    font-size: 24px;
    line-height: 1.6em;
}
.registBox .priceList {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 48px;
}
.registBox .priceList li{
    border: 1px solid;
    padding: 40px;
    text-align: center;
    border-radius: 32px;
    width: 480px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: #974ef8;
}
.registBox .priceList li.memberPrice{
    background: #94aa8d;
    border: #94aa8d;
    color: #F4EFE7;
}
.registBox .priceList li .priceTit{
    font-size: 24px;
}
.registBox .priceList li .price{
    font-size: 72px;
    line-height: 1em;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}
.registBox .priceList li .price .small{
    font-size: 50%;
    line-height: 1em;
}
.registBox .priceList li .price .small .tax{
    font-size: 50%;
}

/* tab */
@media screen and (max-width:1100px) and (min-width:961px ) {
.registBox .inBox .stepDetail .detailTit {
    font-size: 28px;
}
.registBox .inBox .stepDetail {
    padding: 56px 24px;
}
.registBox .stepTit .cap {
    width: 80%;
}
}
/* SP */
@media screen and (max-width: 960px){
.registBox {
    padding: 24px 32px;
}
.registBox h2 {
    font-size: 24px;
    padding-bottom: 24px;
    margin-bottom: 24px;
}
.registBox .contentInner:not(:has(.space)) {
    margin-bottom: 40px;
}
.registBox .stepTit .tit {
    font-size: 20px;
    margin-bottom: 16px;
}
.registBox .stepTit .tit span {
    padding-left: 8px;
}
.registBox .stepTit .txt {
    margin-bottom: 16px;
    font-size: 24px;
}
.registBox .stepTit figure {
    width: 80%;
    max-width: 200px;
    margin-bottom: 24px;
}
.registBox .stepTit .cap {
    margin-bottom: 32px;
    font-size: 14px;
    text-align: left;
    width: 100%;
}
.registBox .stepDetail {
    padding: 24px;
}
.registBox .stepDetail .detailTit {
    font-size: 18px;
    padding-bottom: 24px;
    margin-bottom: 24px;
}
.registBox .inBox {
    flex-direction: column;
    padding: 0;
    gap: 24px;
}
.registBox .inBox .stepDetail {
    padding: 32px 16px 24px;
    width: 100%;
}
.registBox .inBox .stepDetail .detailTit {
    margin-bottom: 16px;
    font-size: 20px;
}
.registBox .inBox .stepDetail .detailTxt {
    font-size: 14px;
    margin-bottom: 16px;
}
.registBox .inBox .stepDetail .btnEntry a {
    font-size: 16px;
}
.registBox .priceList {
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}
.registBox .priceList li {
    padding: 24px 16px;
    width: 100%;
    gap: 8px;
}
.registBox .priceList li .priceTit {
    font-size: 18px;
}
.registBox .priceList li .price {
    font-size: 40px;
}
.registBox .space {
    padding: 40px 0;
}
.registBox .space span {
    height: 86px;
}
.registBox .appBlock {
    gap: 24px;
}
.registBox .appBlock .appIcon {
    width: 100px;
}
.registBox .appBlock .appdown {
    gap: 16px;
}
.registBox .appBlock .appdown li a img {
    height: 32px;
}

.registBox .appBlock .appdown li.ua{
        text-align: center;
        line-height: 0;
}
.registBox .appBlock .appdown li.ua a{
        display: inline-block;
        width: 50%;
}
.registBox .appBlock .appdown li.ua a img{
        height: auto;
        width: 80%;
}

.registBox .stepEnd {
    border-top: 1px solid;
    padding-top: 40px;
    gap: 8px;
}
.registBox .stepEnd dt {
    font-size: 24px;
}
.registBox .stepEnd dd {
    font-size: 14px;
}
}


/*===================================================
  SERVICE
====================================================*/
.serviceBox{
    padding: 120px 60px 60px;
}
.serviceBox .contentBox{
    max-width: 1000px;
    gap: 0;
}
.serviceBox h2{

}
.serviceBox .contentInner{
    width: 100%;
    border: 1px solid;
    padding: 40px 64px 56px;
    border-radius: 32px;
    gap: 0;
    margin-bottom: 56px;
}
.serviceBox .contentInner:last-child{
    margin-bottom: 0;
}
.serviceBox .contentInner >*{
    margin-bottom: 16px;
}
.serviceBox .contentInner >*:last-child{
    margin-bottom: 0;
}
.serviceBox .contentInner .serviceTit{
    text-align: center;
    font-size: 24px;
    padding-bottom: 40px;
    border-bottom: 1px solid;
    margin-bottom: 56px;
}
.serviceBox .contentInner .txt{
    font-size: 24px;
}
.serviceBox .contentInner .txt span{
    display: block;
    font-size: 14px;
}
@media screen and (max-width: 960px){
.serviceBox {
    padding: 60px 32px 60px;
}
.serviceBox .contentInner {
    padding: 24px;
    margin-bottom: 24px;
    border-radius: 32px;
}
.serviceBox .contentInner >*{
    margin-bottom: 8px;
}
.serviceBox .contentInner .serviceTit {
    font-size: 18px;
    padding-bottom: 24px;
    margin-bottom: 24px;
}
.serviceBox .contentInner .txt {
    font-size: 16px;
}


}
/*===================================================
  FOOTER
====================================================*/
.footerBox{
    position: relative;
    padding: 60px 60px 120px;
}
.linkHome{
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-bottom: 80px;
}
.linkHome li{

}
.linkHome li a{
    display: block;
}
.linkHome li a img{
    height: 164px;
    width: auto;
}
.footerBox .credit{
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.05em;
}

@media screen and (max-width: 960px){
.footerBox {
    padding: 0 16px 0;
}
.linkHome {
    width: 60%;
    margin: 0 auto;
    flex-direction: column;
    gap: 48px;
    margin-bottom: 48px;
}
.linkHome li{
    margin: 0 auto;
}
.linkHome li:nth-child(2){
    width: 70%;
}
.linkHome li a img {
    height: auto;
    width: 100%;
}
.footerBox .credit {
    font-size: 12px;
}
}