@charset "utf-8";

/* ------------------------------ メインビジュアル------------------------------ */
section.main{
    overflow:hidden;
    padding-bottom:max(20px, calc(90/1920*100vw));
}
.mainvisual{
    position:relative;
    padding: clamp(30px, calc(90/1440*100vw), 90px) 0 0;
    background-color: var(--color-white);
    background-image:
        linear-gradient(to right, rgba(35,35,65,0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(35,35,65,0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    text-align:center;
}
.mainvisual-badge{
    display:block;
    width:clamp(90px, calc(158/1440*100vw), 158px);
    height:auto;
    margin:0 auto clamp(20px, calc(30/1440*100vw), 30px);
    animation: badge-rotate 22s linear infinite;
}
@keyframes badge-rotate{
    from{transform:rotate(360deg);}
    to{transform:rotate(0deg);}
}
.mainvisual .catchcopy{
    font-size:clamp(18px, calc(35/1700*100vw), 35px);
    line-height:1.6;
    margin-bottom:clamp(15px, calc(20/1700*100vw), 20px);
}
.mainvisual h2{
    font-size:clamp(30px, calc(42/1700*100vw), 42px);
    line-height:1.5;
    text-align: center;
    margin-bottom:clamp(30px, calc(50/1700*100vw), 50px);
}
.mainvisual .catchcopy .char,
.mainvisual h2 .char{
    display:inline-block;
    opacity:0;
    transform:translateY(30px);
    animation: fadeUpIn 0.6s ease-out both;
}

@keyframes fadeUpIn{
    from{opacity:0; transform:translateY(30px);}
    to{opacity:1; transform:translateY(0);}
}
.mainvisual h2 .marker {
    background: linear-gradient(
        to right,
        var(--color-yellow) 0%,
        var(--color-yellow) 100%
    );
    background-repeat: no-repeat;
    background-size: 0% 50%;
    background-position: left bottom;
    animation: marker 0.8s ease 2s forwards;
}
@keyframes marker {
    to {
        background-size: 100% 50%;
    }
}
.mainvisual-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(20px, calc(60/1440*100vw), 60px);
    max-width:1700px;
    margin:0 auto;
    padding:0 30px;
}
.mainvisual-text{
    flex:0 0 45%;
}
.badge-line{
    display:block;
    width:3px;
    height:clamp(25px, calc(55/1700*100vw), 55px);
    margin:0 auto clamp(15px, calc(20/1700*100vw), 20px);
    background:#999;
}
.mainvisual-img{
    flex:1 1 50%;
    max-width:800px;
    min-width:0;
    height:auto;
}

.scrolldown{
    position:relative;
    margin-top:clamp(60px, calc(170/1920*100vw), 170px);
/*    padding:clamp(30px, calc(50/1440*100vw), 50px) 0;*/
    background:var(--color-blue);
    color:var(--color-white);
}
/*白→青のドーム型トランジション（アスペクト比を固定し、伸縮で歪ませない）*/
.scrolldown::before{
    content:"";
    position:absolute;
    left:0;
    bottom:100%;
    width:100%;
    aspect-ratio:1920/100;
    background:url("../images/bg-bluecircle.svg") no-repeat bottom center / 100% 100%;
    margin-bottom: -2px;
}
.scrolldown p{
    font-size:14px;
    letter-spacing:0.1em;
    margin-bottom:10px;
}
/* スクロールダウンの位置 */
.scroll {
  display: block;
  margin-inline: auto;
  margin-top: 0px;
  position: relative;
  width: fit-content;
}
/* マウスホイール */
.scroll::before {
  animation: 2s scroll infinite;
  background: #fff;
  border-radius: 3px;
  content: "";
  height: 10px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 4px;
}
/* マウス */
.scroll::after {
  border: 2px solid #fff;
  border-radius: 20px;
  content: "";
  display: block;
  height: 50px;
  margin-inline: auto;
  margin-top: 10px;
  width: 30px;
}
/* アニメーション */
@keyframes scroll {
  0% {opacity: 0; top: 40%;}
  50% {opacity: 1;}
  100% {opacity: 0;top: 70%;}
}


/* #leaveブロック
------------------------------------------------------------*/
#leave{position:relative;}
#leave .flex-center{ gap:clamp(10px, calc(25/1440*100vw), 25px);}
#leave .flex-center li img{
    width:clamp(100px,calc(150/1440*100vw),150px);
    border-radius:50%;
    box-shadow:var(--shadow);
}
/* #why ブロック
------------------------------------------------------------*/
#why .c2{gap:2%;}
#why .c2 h2{width:38%;font-size:clamp(22px,calc(58/1580*100vw),58px);line-height: 1.5;}
#why .c2 h2 img{width:clamp(50px,calc(90/1580*100vw),90px);padding-left:5px;}
#why .c2 p{width:60%;}
#why ul.c3{justify-content: space-between;counter-reset:pointnum;}
#why ul.c3 > li{
    width:31.5%;
    position:relative;
    margin-top:clamp(50px, calc(100/1440*100vw), 100px);
}
#why ul.c3 > li.boxshadow{
    background:var(--color-white);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:clamp(20px, calc(30/1440*100vw), 30px);
}
#why ul.c3 > li::before{
    counter-increment:pointnum;
    content:"POINT" counter(pointnum, decimal-leading-zero);
    position:absolute;
    top:-2em;
    left:50%;
    transform:translateX(-50%);
    color:var(--color-blue);
    font-family:"Zen Maru Gothic";
    font-size:clamp(30px, calc(48/1440*100vw), 48px);
    white-space:nowrap;
}
#why ul.c3 > li::after{
    content:"";
    position:absolute;
    top:clamp(-120px, calc(-120/1440*100vw), -100px);
    left:50%;
    transform:translateX(-50%);
    width:clamp(36px, calc(50/1440*100vw), 50px);
    aspect-ratio:61/72;
    background:url("../images/home/icon-point.webp") no-repeat center / contain;
}
#why ul.c3 h3{line-height: 1.3;}
#why ul.c3 img{margin-left:auto;margin-right:auto;display: block;}
/*#whyセクション下部の大型テキスト*/
#why{position:relative; overflow:hidden; padding-bottom:0;}
#why::after{
    content:"HELLO WE ARE NB2 CORPORATION.";
    display:block;
    font-family:"Zen Maru Gothic", sans-serif;
    font-weight:700;
    font-size:clamp(30px, calc(98/1920*100vw), 98px);
    color:var(--color-gray);
    white-space:nowrap;
    text-align:center;
    line-height: 0.8;
    }
@keyframes marquee-left{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}
#why::after{
    /* 同じ文字列を2回連結し、-50%移動でループの切れ目が見えないようにする */
    content:"HELLO WE ARE NB2 CORPORATION.\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0HELLO WE ARE NB2 CORPORATION.\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0";
    display:block;
    width:max-content;
    text-align:left;
    animation:marquee-left 14s linear infinite;
}


/*#strongブロック
------------------------------------------------------------*/
.fs32{ line-height: 1.6;}
.circle{
    position:relative;
    width:100%;
    max-width:1200px;
    aspect-ratio:1/1;
    margin:0 auto;
    background:var(--color-white);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3%;
}
.circle::after{
    content:"";
    position:absolute;
    z-index:1;
    left:50%;
    bottom:0;
    transform:translate(-50%, 50%);
    width:1px;
    height:clamp(70px, calc(150/1440*100vw), 150px);
    background:#999;
}
.circle-text{max-width:600px;}
.usp-img{
    position:absolute;
    width:clamp(140px, calc(350/1440*100vw), 350px);
    height:auto;
}
.usp-img1{top:10%; left:-8%;}
.usp-img2{top:10%; right:-8%;}
.usp-img3{bottom:10%; left:-8%;}
.usp-img4{bottom:4%; right:-8%;}

/*#effectブロック
------------------------------------------------------------*/
#effect .w1440{padding:0 0 clamp(50px,calc(150/1440*100vw),150px) ; margin:auto;}
#effect{position:relative; }
#effect .c5{justify-content: space-between; gap:2%;}
#effect .c5 li{
    --img-h: clamp(90px, calc(130/1440*100vw), 130px);
    --img-overlap: clamp(40px, calc(56/1440*100vw), 56px);
    position:relative;
    width:18.4%;
    background:var(--color-white);
    padding:calc(var(--img-h) - var(--img-overlap) + 20px) 20px 40px;
}
#effect .c5 li img{
    position:absolute;
    top:calc(-1 * var(--img-overlap));
    left:50%;
    transform:translateX(-50%);
    width:auto;
    height:var(--img-h);
}
#effect h3{font-size:clamp(18px,calc(22/1440*100vw),22px);}

/*#Worksブロック
------------------------------------------------------------*/
#works{position:relative; overflow:hidden;margin-top: 50px;}
#works .inner-1440{padding-bottom:clamp(15px,calc(30/1440*100vw),30px) ;}
#works::after{    
    content:"";
    display:block;
    width:100%;
    aspect-ratio:2300/441;
    background:url("../images/home/bg-office.webp") no-repeat bottom / 100% 100%;
    margin-bottom: -3px;
}
#works h2{font-size:clamp(22px,calc(50/1440*100vw),50px); position:relative;}
/*背景の大型テキスト（#whyと同様の仕組み）*/
#works h2::before{
    content:"NB2's Corporate Track Record";
    display:block;
    font-family:"Zen Maru Gothic", sans-serif;
    font-weight:700;
    font-size:clamp(28px, calc(98/1440*100vw), 98px);
    color:var(--color-gray);
    white-space:nowrap;
    text-align:center;
    line-height:1;
    margin-bottom:clamp(10px, calc(20/1440*100vw), 20px);
    margin-top: clamp(30px, calc(50/1440*100vw), 50px);
}
    #works h2::before{
        content:"NB2's Corporate Track Record\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0NB2's Corporate Track Record\00A0\00A0\00A0\00A0\00A0\00A0\00A0\00A0";
        display:block;
        width:max-content;
        text-align:left;
        animation:marquee-left 14s linear infinite;
    }

.fs14{font-size:14px;}
#works .c5{justify-content: space-between; align-items:flex-end; padding-top:clamp(50px, calc(80/1440*100vw), 80px);width:100%;max-width:1200px;margin:auto;}
#works .c5 li{
    position:relative;
    width:19%;
    aspect-ratio:1/1;
    border-radius:50%;
    background:var(--color-white);
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 clamp(10px, calc(20/1440*100vw), 20px) 0;
    font-size:14px;
    line-height:1.8;
}
#works .c5 li::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%, -70%);
    width:clamp(30px, calc(48/1440*100vw), 48px);
    aspect-ratio:46/39;
    background:url("../images/home/icon-crown.webp") no-repeat center / contain;
}
/*段違い配置*/
#works .c5 li:nth-child(odd){transform:translateY(-15%);}
#works li span{display:inline-block; font-size:clamp(16px,calc(18/1440*100vw),18px) !important; line-height:1.3;}

/*#flowブロック
------------------------------------------------------------*/
#flow{position:relative;padding:clamp(100px,calc(200/1440*100vw),200px) 0;}
#flow .w1440{position:relative; background-color:var(--color-white);padding:clamp(40px,calc(80/1200*100vw),80px);border-radius: clamp(20px,calc(50/1200*100vw),50px);}
#flow .w1200{width:100%;max-width: 1200px;margin:auto;}
/*白いカードの上に浮かせる大型テキスト*/
#flow .w1440::before{
    content:"How It Works";
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%, calc(-100% - clamp(5px, calc(23/1440*100vw), 23px)));
    width:100%;
    font-family:"Zen Maru Gothic", sans-serif;
    font-weight:700;
    font-size:clamp(28px, calc(98/1440*100vw), 98px);
    color:var(--color-white);
    text-align:center;
    line-height:0.4;
    white-space:nowrap;
}
/*サービスの流れ 見出し下の黄色い点（画像を使わずbox-shadowで4つ生成）*/

#flow h2{position:relative;font-size:clamp(22px, calc(50/1440*100vw), 50px);}
#flow h2::after{
    content:"";
    display:block;
    width:clamp(80px, calc(118.5/1440*100vw), 118.5px);
    aspect-ratio:118.5/15;
    margin:0 auto;
    background:url("../images/h2-dot.svg") no-repeat center / contain;
}
/*各ステップ*/
#flow ul.flexbox > li{
    width:100%;
    position:relative;
    display:flex;
    align-items:center;
    gap:clamp(20px, calc(40/1440*100vw), 40px);
}
#flow ul.flexbox > li:not(:last-child){
    border-bottom:3px solid var(--color-blue);
    padding-bottom:clamp(30px, calc(50/1440*100vw), 50px);
    margin-bottom:clamp(30px, calc(50/1440*100vw), 50px);
}
#flow ul.flexbox > li:not(:last-child)::after{
    content:"";
    position:absolute;
    bottom:clamp(-28px,calc(-28/1200*100vw),-14px);
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:clamp(28px,calc(56/1200*100vw),56px) solid transparent;
    border-right:clamp(28px,calc(56/1200*100vw),56px) solid transparent;
    border-top:clamp(14px,calc(28/1200*100vw),28px) solid var(--color-blue);
}
.flow-step{
    flex:0 0 auto;
    width:clamp(90px, calc(160/1440*100vw), 160px);
    height:auto;
}
.flow-text{
    flex:1 1 auto;
}
.flow-text h3{
    color:var(--color-blue);
    font-size:clamp(22px, calc(30/1440*100vw), 30px);
    margin-bottom:clamp(8px, calc(12/1440*100vw), 12px);
}
.flow-photo{
    flex:0 0 auto;
    width:clamp(160px, calc(200/1440*100vw), 200px);
    height:auto;
    border-radius:var(--radius);
}
@media only screen and (max-width:768px){
    #flow ul.flexbox > li{
        flex-direction:column;
        text-align:center;
    }
    .flow-photo{width:60%; max-width:280px;}
}
/*#CTAブロック
------------------------------------------------------------*/
#cta{padding-top:50px;}
#cta img.mb60{width:80%;max-width:490px;}
/* 1280px以下から------------------------------------------------------------*/
@media only screen and (max-width:1280px){
    /*#effectブロック
    ------------------------------------------------------------*/
    #effect .c5{flex-wrap: wrap;justify-content: center; gap:2.75%;row-gap:90px;}
    #effect .c5 li{
        width:31.5%;
        background:var(--color-white);
        padding:calc(var(--img-h) - var(--img-overlap) + 20px) 20px 40px;
    }
}

/* 1200px以下から------------------------------------------------------------*/
@media only screen and (max-width:1200px){
    /*#worksブロック：段違い解除→上3つ・下2つの2段に*/
    #works .c5{
        flex-wrap:wrap;
        justify-content:center;
        align-items:flex-start;
        row-gap:clamp(40px, calc(60/1440*100vw), 60px);
        column-gap:4%;
        padding-top:clamp(20px, calc(60/1440*100vw), 60px);
    }
    #works .c5 li{
        width:28%;
        font-size:clamp(15px, calc(18/1440*100vw), 18px);
    }
    #works .c5 li:nth-child(odd),
    #works .c5 li:nth-child(even){transform:none;}
    #works li span{font-size:clamp(18px, calc(22/1440*100vw), 22px);}
}
/* ------------------------- レスポンシブ-----------------------------------------------------*/
/* 1024px以下から------------------------------------------------------------*/
@media only screen and (max-width:1024px){
/* メインビジュアル
------------------------------------------------------------*/
    .mainvisual-inner{flex-direction:column;}
    .mainvisual-text{text-align:left;width:90%;}
    .mainvisual-img{width:90%;}
    /* #whyブロック
    ------------------------------------------------------------*/
    #why ul.c3 {row-gap:50px;}
    #why ul.c3 > li{width:48.5%;}
    /*#strongブロック
    ------------------------------------------------------------*/
    .circle{
        border-radius:20px;
        aspect-ratio:auto;
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-areas:
            "i1 i2"
            "text text"
            "i3 i4";
        gap:clamp(20px, calc(30/1440*100vw), 30px);
        padding:clamp(30px, calc(60/1440*100vw), 60px) 6%;
    }
    .circle-text{max-width:100%;}
    .usp-img{
        position:static;
    }
    .usp-img1{grid-area:i1; justify-self:end;}
    .usp-img2{grid-area:i2; justify-self:start;}
    .usp-img3{grid-area:i3; justify-self:end;}
    .usp-img4{grid-area:i4; justify-self:start;}
    .circle-text{grid-area:text;}
    /*#effectブロック
    ------------------------------------------------------------*/
    #effect .c5{gap:5%;row-gap:90px;}
    #effect .c5 li{
        width:47.5%;
    }
    /*#worksブロック
    ------------------------------------------------------------*/
    #works .c5 li br{display: none; }
}
/* 768px以下から------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /* #whyブロック
    ------------------------------------------------------------*/
    #why .c2{gap:30px;}
    #why .c2 h2,#why .c2 p{width:100%;}
    .tab_non{display:none;}
    #why ul.c3 > li{width:100%;}
    #why ul.c3 > li::after{top:-80px;}
    /*#effectブロック
    ------------------------------------------------------------*/
    #effect .c5{row-gap:70px;}
    #effect .c5 li{
        width:100%;
    }
    /*#worksブロック：2個ずつ3段に*/
    #works .c5{row-gap:clamp(40px, calc(60/768*100vw), 60px);}
    #works .c5 li{width:47%;line-height: 1.2;}
}
/* 450px以下から------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*#worksブロック*/
    #works::after{
        aspect-ratio:450/212;
        background-image:url("../images/home/bg-officeSP.webp");
    }
}