@charset "utf-8";
@import url("portfolio_com.css");
@import url("https://use.typekit.net/zfg8iwf.css");

:root {
    --white : #fff;
    --black : #000;
    --main-color : #473429;
    --prlare: "parlare";
    --aboreto : "aboreto";
    --good : "ff-good-web-pro";

    --layout-s: 2048px; 
    --layout-l: 2300px; 

    --vwpx: 0.052vw;
}

@media screen and (max-width:1024px) {
  :root {
        --font-16 : 14px;
		--font-18 : 16px;
		--font-20 : 18px;
		--font-24 : 20px;
		--font-30 : 24px;
		--font-40 : 28px;

		--gap-40 : 20px;
		--gap-50 : 30px;
		--gap-60 : 40px;
		--gap-80 : 60px;
  }
}
@media screen and (max-width:768px) {

}
@media screen and (max-width:480px) {

}

.rb-section {background:#fff !important;}

#cursor.hover-pf25::before {width: 150px; height: 150px;}

.portfolio-026 .preview img {width:100%; max-width:100%; display:block; margin:0 auto;}
.portfolio-026 * {}

.portfolio-026 {line-height: 1.6; color: var(--main-color); letter-spacing: 0; text-align: left; }
.portfolio-026 .text-raise {overflow: hidden; }
.portfolio-026 .text-raise,
.portfolio-026 .ani-wrapper {font-family: inherit; color: inherit;}

.portfolio-026 .work-section {width:100%;}
.portfolio-026 .work-section .section {width:100%;}
.portfolio-026 .work-section .section .sec-wrap { margin:0 auto;}

.portfolio-026 .work-section .section .head {text-align: left; position: relative;}
.portfolio-026 .work-section .section .head .dot {width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; opacity: 0.5; border: 1px solid var(--main-color); margin: 0 auto 20px;}
.portfolio-026 .work-section .section .head .sub {font-family: var(--prlare); font-size: 15px; margin-bottom: 10px;}
.portfolio-026 .work-section .section .head .title {font-family: var(--aboreto); font-size: 40px;}
.portfolio-026 .work-section .section .head p {margin-top: 20px; font-size: 16px; }

.portfolio-026 .work-section .img-box img {width: 100%;}

.portfolio-026 .work-section .section .font-good {font-family: var(--good);}
.portfolio-026 .work-section .section .font-ab {font-family: var(--aboreto);}
.portfolio-026 .work-section .section .font-pr {font-family: var(--prlare);}

.portfolio-026 .work-section .section .br-pc {display: block;}
.portfolio-026 .work-section .section .br-mo {display: none;}


.portfolio-026 .work-section .section .title-wrap .conts {}
.portfolio-026 .work-section .section .title-wrap .conts p {}

/* ani */
.portfolio-026 .work-section .parallax-box {overflow: hidden; width: 100%; font-size: 0;}
.portfolio-026 .work-section .parallax-box span {display: block; height: 110%; width: 100%;}
.portfolio-026 .work-section .parallax-box span img {display: block; width: 100%; height: 100%; object-fit: cover;}

.portfolio-026 .work-section .ani-target [data-delay="100"] {transition-delay: 0.1s;}
.portfolio-026 .work-section .ani-target [data-delay="200"] {transition-delay: 0.2s;}
.portfolio-026 .work-section .ani-target [data-delay="300"] {transition-delay: 0.3s;}
.portfolio-026 .work-section .ani-target [data-delay="400"] {transition-delay: 0.4s;}
.portfolio-026 .work-section .ani-target [data-delay="500"] {transition-delay: 0.5s;}
.portfolio-026 .work-section .ani-target .fade-in {opacity: 0; transition-property: opacity; transition-duration: 0.8s;}
.portfolio-026 .work-section .ani-target .fade-up {opacity: 0; transform: translateY(min(80%, 80px));  transition-property: opacity, transform; transition-duration: 0.8s, 0.8s; } 
.portfolio-026 .work-section .ani-target .zoom-out {overflow: hidden;}
.portfolio-026 .work-section .ani-target .zoom-out img {opacity: 0; transform: scale(1.08); transition-property: opacity, transform; transition-duration: 1s, 1.6s;}


.portfolio-026 .work-section .ani-target.ani-start .fade-in {opacity: 1;}
.portfolio-026 .work-section .ani-target.ani-start .fade-up {opacity: 1; transform: translateY(0);}
.portfolio-026 .work-section .ani-target.ani-start .zoom-out img {opacity: 1; transform: scale(1);}


/* rolling banner */
.portfolio-026 .work-section .rolling-banner {padding: 35px;}
.portfolio-026 .work-section .rolling-banner .roll-wrap {width: max-content; display: flex; animation: rollingBnrAni 80s linear infinite;}
.portfolio-026 .work-section .rolling-banner .roll-wrap .item {flex-shrink: 0; }
.portfolio-026 .work-section .rolling-banner img {height: 93px;}

.portfolio-026 .work-section .rolling-banner.right .roll-wrap  {animation: rollingBnrLtRAni 80s linear infinite;}

 
@keyframes rollingBnrAni {
    0% {transform: translateX(0%);}
    100% {transform: translateX(-50%);}
}
@keyframes rollingBnrLtRAni {
    0% {transform: translateX(-50%);}
    100% {transform: translateX(0%);}
}



@media screen and (max-width:1260px){
}
@media screen and (max-width:1024px){
    .portfolio-026 .work-section .section .head .title {font-size: 32px;}

    .portfolio-026 .work-section .rolling-banner img {height: 50px;}
}
@media screen and (max-width:768px){
    .portfolio-026 .work-section .section .head .title {font-size: 24px;}

    .portfolio-026 .work-section .rolling-banner {padding: 15px 0;}
    .portfolio-026 .work-section .rolling-banner img {height: 37px;}

    .portfolio-026 .work-section .section .br-pc {display: none;}
    .portfolio-026 .work-section .section .br-mo {display: block;}
   
}
@media screen and (max-width:480px){

   
}


/* sect1 */
.portfolio-026 .work-section .sec-1 {padding: calc(var(--gap-50)*3.4) 0 calc(var(--gap-50)*1.2);}
.portfolio-026 .work-section .sec-1 .sec-wrap {position: relative; max-width: 1995px; width: 90%;}
.portfolio-026 .work-section .sec-1 .cont-wrap {display: flex; align-items: center; gap: 10%;}
.portfolio-026 .work-section .sec-1 .cont-wrap .left {width: 40%; position: relative;}
.portfolio-026 .work-section .sec-1 .cont-wrap .left .circle {position: absolute; font-size: 0; width: 124px; top: 0; right: 0; transform: translate(50%,-50%);}
.portfolio-026 .work-section .sec-1 .cont-wrap .left .circle span {display: block; animation: rotateAni 15s 1.2s linear infinite; }
.portfolio-026 .work-section .sec-1 .cont-wrap .left .circle img {width: 100%;}
.portfolio-026 .work-section .sec-1 .cont-wrap .left .parallax-box {aspect-ratio: 1/1.147;}
.portfolio-026 .work-section .sec-1 .cont-wrap .right {width: 50%; padding-right: 5%; padding-top: 5%;}
.portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box {margin-top: 60px;}
.portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box p {font-size: 20px; margin-bottom: 30px; }
.portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box ul {}
.portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box ul li {padding-left: 1em; position: relative;  font-size: 18px;}
.portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box ul li + li {margin-top: 10px;}
.portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box ul li::before {content:""; width: 0.45em; box-sizing: border-box; border: 1px solid var(--main-color); border-radius: 50%; aspect-ratio: 1; position: absolute; left: 0; top: 0.6em; }
.portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box ul li span {font-family: var(--good); font-size: 20px; }

@keyframes rotateAni {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@media screen and (max-width:1260px){
    .portfolio-026 .work-section .sec-1 .cont-wrap {gap: 5%;}
    .portfolio-026 .work-section .sec-1 .cont-wrap .left {width: 45%;}
    .portfolio-026 .work-section .sec-1 .cont-wrap .left .circle {width: 80px;}

    .portfolio-026 .work-section .sec-1 .cont-wrap .right {padding-top: 0;}
    .portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box p {font-size: 16px;}
}
@media screen and (max-width:1024px){
    .portfolio-026 .work-section .sec-1 .cont-wrap {flex-direction: column-reverse; gap: 40px;}
    .portfolio-026 .work-section .sec-1 .cont-wrap .left {width: 100%; max-width: 600px; }
    .portfolio-026 .work-section .sec-1 .cont-wrap .left .circle {transform: translate(-80%,-50%); }

    .portfolio-026 .work-section .sec-1 .cont-wrap .right {width: 100%; padding-right: 0; max-width: 600px; }
    .portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box ul li {font-size: 16px;}
    .portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box ul li span {font-size: 1em; }
}
@media screen and (max-width:768px) {
    
    .portfolio-026 .work-section .sec-1 .cont-wrap {gap: 80px;}
    .portfolio-026 .work-section .sec-1 .cont-wrap .right .text-box {margin-top: 50px;}
   
}
@media screen and (max-width:480px){
    
}

/* sect2 */
.portfolio-026 .work-section .sec-2 {background: #EDEBEB; padding: calc(var(--gap-50)*2.4) 0 calc(var(--gap-50)*1.3);}
.portfolio-026 .work-section .sec-2 .sec-wrap {max-width: var(--layout-l); width: 90%; text-align: center;}
.portfolio-026 .work-section .sec-2 .sec-wrap .head {text-align: center; margin-bottom: 80px;}
.portfolio-026 .work-section .sec-2 .cont1 {margin-bottom: calc(var(--gap-50)*3.6); }
.portfolio-026 .work-section .sec-2 .cont1 ul.concept-list {display: flex; gap: 120px; justify-content: center;  }
.portfolio-026 .work-section .sec-2 .cont1 ul.concept-list li {max-width: 315px; }
.portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item {padding: 0 16px;}
.portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .circle-box {width: 230px; aspect-ratio: 1;  display: flex; align-items: center; justify-content: center;  margin: 0 auto; position: relative;}
.portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .circle-box .circle {width: 100%; height: 100%; position: absolute; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--main-color); animation: rotateAni 10s linear infinite; }
.portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .circle-box .circle::before {content:""; width: 110%; height: 100%; position: absolute; left: -5%; top: 0; background: linear-gradient(to top, rgba(0,0,0,0), #EDEBEB 30% 70%, rgba(0,0,0,0)); }
.portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .circle-box p {font-size: 24px; line-height: 1.3; font-family: var(--aboreto); text-align: center; position: relative;} 
.portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .text-box {font-size: 16px; margin-top: 40px;}

.portfolio-026 .work-section .sec-2 .detail-box {background: rgba(255,255,255,0.4); padding: calc(var(--gap-50)*2) 10%; display: flex; justify-content: space-between; align-items: start; }
.portfolio-026 .work-section .sec-2 .detail-box .top {position: relative; text-align: center; margin-bottom: 60px;}
.portfolio-026 .work-section .sec-2 .detail-box .top::before {content:""; width: 14px; aspect-ratio: 1; display: block; margin: 0 auto; border: 1px solid var(--main-color); opacity: 0.5; box-sizing: border-box; border-radius: 50%;}
.portfolio-026 .work-section .sec-2 .detail-box .top .tit {font-family: var(--good); font-size: 18px; margin-top: 40px;}
.portfolio-026 .work-section .sec-2 .detail-box .typ {}
.portfolio-026 .work-section .sec-2 .detail-box .typ .font-list {position: relative; padding-top: 80px; text-align: center;}
.portfolio-026 .work-section .sec-2 .detail-box .typ .font-list::before {content:""; width: 55px; height: 1px; background: var(--main-color); opacity: 0.5; position: absolute; left: 50%; top: 0px; transform: translateX(-50%); }
.portfolio-026 .work-section .sec-2 .detail-box .typ .font-list li + li {margin-top: 120px;}
.portfolio-026 .work-section .sec-2 .detail-box .typ .font-list .tit {opacity: 0.5; font-family: var(--good); font-size: 16px; margin-bottom: 5px;}
.portfolio-026 .work-section .sec-2 .detail-box .typ .font-list .font {font-size: 35px;}
.portfolio-026 .work-section .sec-2 .detail-box .col {width: 40%;  }
.portfolio-026 .work-section .sec-2 .detail-box .col .color-box {box-sizing: border-box; position: relative; aspect-ratio: 1/1.2; --wid:80px; }
.portfolio-026 .work-section .sec-2 .detail-box .col .color-box .box1 {width: 100%; height: 100%; background: var(--main-color);}
.portfolio-026 .work-section .sec-2 .detail-box .col .color-box .box2 { position: absolute; width: calc(100% - var(--wid)*2); height: calc(100% - var(--wid)*2); background: #EDEBEB; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.portfolio-026 .work-section .sec-2 .detail-box .col .color-box .box3 { position: absolute; width: calc(100% - var(--wid)*4); height: calc(100% - var(--wid)*4); background: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%); }


@media screen and (max-width:1480px){
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list {gap: 80px;}

    .portfolio-026 .work-section .sec-2 .detail-box {padding: calc(var(--gap-50)*2) 5%;}
    .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list li + li {margin-top: 80px;}
    .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list .font {font-size: 30px;}
    .portfolio-026 .work-section .sec-2 .detail-box .col .color-box {--wid:60px;}
}
@media screen and (max-width:1260px){
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list {gap: 40px;}

    .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list {padding-top: 60px;}
    .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list .font {font-size: 24px;}
}
@media screen and (max-width:1024px){
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item {padding: 0;}
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .circle-box {width: 200px;}
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .circle-box p {font-size: 20px;}
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .text-box {font-size: 15px;}

    .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list li + li {margin-top: 60px;}
    .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list .font {font-size: 20px;}
    .portfolio-026 .work-section .sec-2 .detail-box .col .color-box {--wid:40px;}
}
@media screen and (max-width:768px) {
    .portfolio-026 .work-section .sec-2 {margin-top: 30px;}
    .portfolio-026 .work-section .sec-2 .cont1 .head {margin-top: 40px;}
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list {flex-wrap: wrap; gap: 20px 30px;}
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list li:first-child {max-width: 100%; width: 100%;}
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .circle-box {width: 140px;}
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .circle-box p {font-size: 18px;}
    .portfolio-026 .work-section .sec-2 .cont1 ul.concept-list .item .text-box {display: none;}

   .portfolio-026 .work-section .sec-2 .detail-box {flex-direction: column; padding: 50px 5% 90px; gap: 80px;}
   .portfolio-026 .work-section .sec-2 .detail-box .top {margin-bottom: 30px;}
   .portfolio-026 .work-section .sec-2 .detail-box .top::before {width: 8px;}
   .portfolio-026 .work-section .sec-2 .detail-box .top .tit {margin-top: 10px; font-size: 16px;}
   .portfolio-026 .work-section .sec-2 .detail-box .typ {width: 100%;}
   .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list {padding-top: 40px;}
   .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list .tit {font-size: 15px; margin-bottom: 8px;}
   .portfolio-026 .work-section .sec-2 .detail-box .col {width: 90%; margin: auto;}
   .portfolio-026 .work-section .sec-2 .detail-box .col .color-box {--wid:48px;}
}
@media screen and (max-width:480px) {
    .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list {padding-top: 30px;}
    .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list li + li {margin-top: 38px;}
    .portfolio-026 .work-section .sec-2 .detail-box .typ .font-list .font {font-size: 18px;}
}

/* sect3 */
.portfolio-026 .work-section .sec-3 {background: #EDEBEB; padding: calc(var(--gap-50)*1.3) 0 calc(var(--gap-50)*4);}
.portfolio-026 .work-section .sec-3 .sec-wrap {max-width: var(--layout-l); width: 90%; }
.portfolio-026 .work-section .sec-3 .sec-wrap .head {margin-bottom: calc(var(--gap-50)*3.2);}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont {padding: 0 80px;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .line {display: flex; align-items: center; gap: 30px; justify-content: end;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .line + .line {margin-top: 60px;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .line.gap20 {gap: 20px;}

.portfolio-026 .work-section .sec-3 .sec-wrap .cont .more-btn {font-family: var(--aboreto); text-align: center; font-size: 18px; line-height: 1.3; }
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .more-btn p {margin-bottom: 15px;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .more-btn img {display: block; margin: auto;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .arr-btn {font-size: 0; padding: 0 15px;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .arr-btn img {width: 100%;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .arr-btn.right img {display: inline-block; transform: scaleX(-1); }
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .round-btn {width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--main-color); display: flex; align-items: center; justify-content: center; font-size: 0;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .round-btn.white {border-color: #fff; background: #fff; }
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .text-btn {display: flex; height: 50px; align-items: center; justify-content: center; border-radius: 25px; font-family: var(--good); font-size: 18px; background: var(--main-color); color: #fff; padding: 0 40px;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .text-btn.white {color: var(--main-color); background: #fff; }
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .text-btn.long {width: 245px;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .pagination {display: flex; gap: 12px; align-items: center; justify-content: end; margin-top: 60px;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .pagination .btn {width: 55px; height: 7px; border-radius: 4px; background: var(--main-color); opacity: 0.2;}
.portfolio-026 .work-section .sec-3 .sec-wrap .cont .pagination .btn.active {opacity: 1;}

.portfolio-026 .work-section .img-banner {position: relative; width: 100%; overflow: hidden;}
.portfolio-026 .work-section .img-banner .parallax-box {aspect-ratio: 1/0.32; }
.portfolio-026 .work-section .img-banner .text-box {color: #fff; text-align: center;font-family: var(--prlare); font-size: 110px; line-height: 1; position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); }

@media screen and (max-width:1260px) {
    .portfolio-026 .work-section .img-banner .text-box {font-size: 80px;}
   
}
@media screen and (max-width:1024px){
   .portfolio-026 .work-section .sec-3 .sec-wrap .cont {padding: 0 5%;}
   .portfolio-026 .work-section .sec-3 .sec-wrap .cont .text-btn {font-size: 16px; padding: 0 24px; height: 44px;}

   .portfolio-026 .work-section .img-banner .text-box {font-size: 54px;}
}
@media screen and (max-width:768px){
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont {padding: 0;}
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .line {gap: 18px; flex-wrap: wrap; }
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .line + .line {margin-top: 36px;}
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .more-btn p {font-size: 12px; margin-bottom: 8px;}
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .more-btn img {width: 15px;}
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .arr-btn {width: 11px; padding: 0; margin: 0 10px; }
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .round-btn {width: 36px; height: 36px;}
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .round-btn img {width: 11px;}
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .text-btn {height: 40px;}
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .text-btn.long {width: 150px;}
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .pagination {gap: 8px; margin-top: 36px; }
    .portfolio-026 .work-section .sec-3 .sec-wrap .cont .pagination .btn {width: 32px; height: 4px;}

    .portfolio-026 .work-section .img-banner .parallax-box {aspect-ratio: 1/0.6;}
    .portfolio-026 .work-section .img-banner .text-box {font-size: 36px;}
    
}
@media screen and (max-width:480px){
    .portfolio-026 .work-section .img-banner .text-box {font-size: 30px;}
}


/* sect4 */
.portfolio-026 .work-section .sec-4 {padding: calc(var(--gap-50)*2) 0; position: relative;}
.portfolio-026 .work-section .sec-4 .cont-wrap {width: 80%; max-width: var(--layout-s); margin: 0 auto; position: relative; z-index: 1;}
.portfolio-026 .work-section .sec-4 .head {margin-bottom: 80px; text-align: center;}

.portfolio-026 .work-section .sec-4 .frame {overflow: hidden; border-radius: 20px; border: 1px solid rgba(71, 52, 41, 0.5); }
.portfolio-026 .work-section .sec-4 .frame .bar {display: none; background: #EDEBEB; position: relative;z-index: 1;}
.portfolio-026 .work-section .sec-4 .frame .bar img {width: 100%;}
.portfolio-026 .work-section .sec-4 .frame .frame-wrap {aspect-ratio: 1/0.51; position: relative;}
.portfolio-026 .work-section .sec-4 .frame .scroll-box {position: absolute; left: 0; top: 0; width: 100%;}

.portfolio-026 .work-section .sec-4 .frame .mo-img {display: none;}

.portfolio-026 .work-section .sec-4 .bg {width: 95%; font-size: 0;  margin: -3% auto 0; position: relative; z-index: 0;}
.portfolio-026 .work-section .sec-4 .bg span {display: block; width: 100%;}
.portfolio-026 .work-section .sec-4 .bg img {width: 100%;}

.portfolio-026 .work-section .sec-4 .mockup {display: flex; gap: 10px; margin-top: calc(var(--gap-50)*2.2); }
.portfolio-026 .work-section .sec-4 .mockup > div {width: 50%;}
.portfolio-026 .work-section .sec-4 .mockup .parallax-box {aspect-ratio: 1;}


@keyframes scrollAni {
    0% {transform: translateY(0%);}
    5% {transform: translateY(0%);}
    95% {transform: translateY(-90.8%);}
    100% {transform: translateY(-90.8%);}
}

@keyframes scrollMoAni {
    0% {transform: translateY(0%);}
    5% {transform: translateY(0%);}
    95% {transform: translateY(-92.3%);}
    100% {transform: translateY(-92.3%);}
}

@media screen and (max-width:1260px) {
    
}
@media screen and (max-width:1024px){
    .portfolio-026 .work-section .sec-4 .mockup {gap: 6px;}
   
}
@media screen and (min-width:769px){
    .portfolio-026 .work-section .sec-4 .frame .pc-img {animation: scrollAni 25s linear infinite alternate;}

}
@media screen and (max-width:768px){
    .portfolio-026 .work-section .sec-4 .head {margin-bottom: 50px;}

    .portfolio-026 .work-section .sec-4 .frame {border-radius: 20px;}
    .portfolio-026 .work-section .sec-4 .frame .frame-wrap {aspect-ratio: 1/2.03;}
    .portfolio-026 .work-section .sec-4 .frame .bar {display: block;}
    .portfolio-026 .work-section .sec-4 .frame .pc-img {display: none;}
    .portfolio-026 .work-section .sec-4 .frame .mo-img {display: block; animation: scrollMoAni 40s linear infinite alternate;}

    .portfolio-026 .work-section .sec-4 .bg {display: none;}

    .portfolio-026 .work-section .sec-4 .mockup {margin-top: 100px; gap: 2px; flex-direction: column; }
    .portfolio-026 .work-section .sec-4 .mockup > div {width: 100%;}
    
}

/* sect5 */
.portfolio-026 .work-section .sec-5 {padding: calc(var(--gap-50)*1) 0 calc(var(--gap-50)*2.6);}
.portfolio-026 .work-section .sec-5 .sec-wrap {width: 90%; max-width: var(--layout-s);}

.portfolio-026 .work-section .sec-5 .cont-wrap {display: flex; align-items: start; justify-content: space-between; gap: 10%; }
.portfolio-026 .work-section .sec-5 .cont-wrap .main {width: 40%; font-size: 0;}
.portfolio-026 .work-section .sec-5 .cont-wrap .head {padding: 60px; margin-bottom: 70px;}
.portfolio-026 .work-section .sec-5 .cont-wrap .right {width: 50%;}
.portfolio-026 .work-section .sec-5 .cont-wrap .img-area {}
.portfolio-026 .work-section .sec-5 .cont-wrap .img-area .parallax-box {aspect-ratio: 1/1.2;}
.portfolio-026 .work-section .sec-5 .cont-wrap .img-area .box1 {width: 33%;}
.portfolio-026 .work-section .sec-5 .cont-wrap .img-area .box2 {width: 56%; margin: 12% 0 0 auto;}
.portfolio-026 .work-section .sec-5 .cont-wrap .img-area .box3 {width: 42%; margin: 12% 0 0 5%;}


@media screen and (max-width:1260px){
   .portfolio-026 .work-section .sec-5 .cont-wrap {gap: 5%;}
   .portfolio-026 .work-section .sec-5 .cont-wrap .main {width: 45%;}
   .portfolio-026 .work-section .sec-5 .cont-wrap .head {padding: 40px 5%;}
    
}
@media screen and (max-width:1024px){
   
    
}
@media screen and (max-width:768px){
    .portfolio-026 .work-section .sec-5 .cont-wrap {flex-direction: column-reverse; gap: 50px;}
    .portfolio-026 .work-section .sec-5 .cont-wrap .right {width: 100%;}
    .portfolio-026 .work-section .sec-5 .cont-wrap .head {padding: 0; margin-bottom: 0;}
    .portfolio-026 .work-section .sec-5 .cont-wrap .head p br {display: none;}
    .portfolio-026 .work-section .sec-5 .cont-wrap .img-area {display: none;}
    .portfolio-026 .work-section .sec-5 .cont-wrap .main {width: 90%; margin: 0 auto;}

}
@media screen and (max-width:480px){
    
}

/* sect6 */
.portfolio-026 .work-section .sec-6 {background: rgba(71, 52, 41, 0.05); padding: calc(var(--gap-50)*2) 0 calc(var(--gap-50)*3); position: relative; overflow: hidden;}
.portfolio-026 .work-section .sec-6 .sec-wrap {width: 90%; max-width: var(--layout-s);}
.portfolio-026 .work-section .sec-6 .head {text-align: center; margin-bottom: 80px;}
.portfolio-026 .work-section .sec-6 .cont {display: flex; gap: 5%; align-items: end;}
.portfolio-026 .work-section .sec-6 .cont .window-box {font-size: 0; position: relative;}
.portfolio-026 .work-section .sec-6 .cont .window-box .bar {display: flex; background: var(--main-color); gap: 1%; padding: 0 1%;  aspect-ratio: 1/0.018; align-items: center;}
.portfolio-026 .work-section .sec-6 .cont .window-box .bar span {height: 33%; background: #fff; border-radius: 50%; aspect-ratio: 1; }
.portfolio-026 .work-section .sec-6 .cont .window-box .window-wrap {font-size: 0; width: 100%; position: relative;}
.portfolio-026 .work-section .sec-6 .cont .window-box .modal-ly {position: absolute; width: 100%; height: 100%;  display: flex; flex-direction: column; align-items: center; justify-content: end; left: 0; bottom: 0; overflow: hidden; }
.portfolio-026 .work-section .sec-6 .cont .window-box .modal-ly::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 0; opacity: 0;  }
.portfolio-026 .work-section .sec-6 .cont .window-box .modal-ly .close {width: 4%; aspect-ratio: 1; position: relative; opacity: 0; }
.portfolio-026 .work-section .sec-6 .cont .window-box .modal-ly .close::before,
.portfolio-026 .work-section .sec-6 .cont .window-box .modal-ly .close::after {content:""; height: 1px; width: 51%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg);}
.portfolio-026 .work-section .sec-6 .cont .window-box .modal-ly .close::after {transform: translate(-50%,-50%) rotate(-45deg);}
.portfolio-026 .work-section .sec-6 .cont .window-box .modal-ly .img-box {position: relative; width: 100%; transform: translateY(15%); opacity: 0; }
.portfolio-026 .work-section .sec-6 .cont .box1 {width: 63%; }
.portfolio-026 .work-section .sec-6 .cont .box2 {width: 32%;}

.portfolio-026 .work-section .sec-6 .cont .window-box.box1 .modal-ly::before {transition: opacity 0.5s 0.3s;}
.portfolio-026 .work-section .sec-6 .cont .window-box.box1 .modal-ly .close {transition: opacity 0.5s 0.3s;}
.portfolio-026 .work-section .sec-6 .cont .window-box.box1 .modal-ly .img-box {transition: opacity 0.5s 0.3s, transform 0.5s 0.4s;}
.portfolio-026 .work-section .sec-6 .cont .window-box.box2 .modal-ly::before {transition: opacity 0.5s 0.4s;}
.portfolio-026 .work-section .sec-6 .cont .window-box.box2 .modal-ly .close {transition: opacity 0.5s 0.4s;}
.portfolio-026 .work-section .sec-6 .cont .window-box.box2 .modal-ly .img-box {transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;}

.portfolio-026 .work-section .sec-6 .cont.ani-start .window-box .modal-ly::before {opacity: 1;}
.portfolio-026 .work-section .sec-6 .cont.ani-start .window-box .modal-ly .close {opacity: 1;}
.portfolio-026 .work-section .sec-6 .cont.ani-start .window-box .modal-ly .img-box {opacity: 1; transform: translateY(0);}



@media screen and (max-width:1260px) {
   
}

@media screen and (max-width:1024px){
   
}
@media screen and (max-width:768px){
    .portfolio-026 .work-section .sec-6 .head {margin-bottom: 50px;}
    .portfolio-026 .work-section .sec-6 .cont {flex-direction: column; gap: 45px;}
    .portfolio-026 .work-section .sec-6 .cont .box1 {width: 95%; margin-right: auto;}
    .portfolio-026 .work-section .sec-6 .cont .box2 {width: 70%;}
}
@media screen and (max-width:480px){
    
}


/* sect7 */
.portfolio-026 .work-section .sec-7 {padding: calc(var(--gap-50)*2) 0 calc(var(--gap-50)*4);}
.portfolio-026 .work-section .sec-7 .sec-wrap {width: 90%; max-width: var(--layout-l);}
.portfolio-026 .work-section .sec-7 .head {margin-bottom: 90px;}
.portfolio-026 .work-section .sec-7 .top {position: relative;}
.portfolio-026 .work-section .sec-7 .circle {position: absolute; font-size: 0; right: 0; top: 0; transform: translate(-90%,-80%); width: 164px;}
.portfolio-026 .work-section .sec-7 .circle span {display: block; animation: rotateAni 10s linear infinite; }
.portfolio-026 .work-section .sec-7 .circle img {width: 100%;}
.portfolio-026 .work-section .sec-7 .parallax-box {aspect-ratio: 1/0.3;}
.portfolio-026 .work-section .sec-7 .parallax-box img.mo {display: none;}
.portfolio-026 .work-section .sec-7 .page {display: flex; gap: 15%; padding: 0 7%; margin-top: calc(var(--gap-50)*3); align-items: start; position: relative;}
.portfolio-026 .work-section .sec-7 .page .left {width: 50%; padding-top: 10%; position: relative; z-index: 1;}
.portfolio-026 .work-section .sec-7 .page .right {width: 50%; position: relative; z-index: 1;}
.portfolio-026 .work-section .sec-7 .page .text-box {position: absolute; left: 0; bottom: 1%; line-height: 2; z-index: 0;}
.portfolio-026 .work-section .sec-7 .page .text-box p {font-family: var(--prlare); color: #EDEBEB; font-size: 120px; }
.portfolio-026 .work-section .sec-7 .page .text-box p:nth-child(2) {padding-left: 2.5em;}

@media screen and (max-width:1480px) {
    .portfolio-026 .work-section .sec-7 .page .text-box p {font-size: 100px;}
   
}
@media screen and (max-width:1260px){
    .portfolio-026 .work-section .sec-7 .circle {width: 120px;}

    .portfolio-026 .work-section .sec-7 .page {gap: 8%; padding: 0 3%;}
    .portfolio-026 .work-section .sec-7 .page .text-box p {font-size: 80px;}
    .portfolio-026 .work-section .sec-7 .page .text-box p:nth-child(2) {padding-left: 1em;}
}
@media screen and (max-width:1024px){
}
@media screen and (max-width:768px){
    .portfolio-026 .work-section .sec-7 {padding-bottom: 50px;}
    .portfolio-026 .work-section .sec-7 .sec-wrap {width: 100%;}
    .portfolio-026 .work-section .sec-7 .head {width: 90%; margin: 0 auto 60px;}
    .portfolio-026 .work-section .sec-7 .circle {width: 70px; transform: translate(-60%,-55%); }
    .portfolio-026 .work-section .sec-7 .parallax-box {aspect-ratio: 1;}
    .portfolio-026 .work-section .sec-7 .parallax-box img.pc {display: none;}
    .portfolio-026 .work-section .sec-7 .parallax-box img.mo {display: block;}

    .portfolio-026 .work-section .sec-7 .page {width: 90%; margin: 80px auto 0; flex-direction: column; gap: 60px;}
    .portfolio-026 .work-section .sec-7 .page .left {width: 100%; padding: 0;}
    .portfolio-026 .work-section .sec-7 .page .right {width: 100%;}
    .portfolio-026 .work-section .sec-7 .page .text-box {position: relative; bottom: 0; width: 100%;}
    .portfolio-026 .work-section .sec-7 .page .text-box p {font-size: 10vw;}
    .portfolio-026 .work-section .sec-7 .page .text-box p:nth-child(2) {padding: 0; margin-left: auto; width: fit-content; }
}
@media screen and (max-width:480px){
   
}


/* sect8 */
.portfolio-026 .work-section .sec-8 {}
.portfolio-026 .work-section .sec-8 .parallax-box {aspect-ratio: 1/0.38;}

@media screen and (max-width:1280px) {
}
@media screen and (max-width:768px) {
    .portfolio-026 .work-section .sec-8 .parallax-box {aspect-ratio: 1/0.87;}
}

/* sect9 */
.portfolio-026 .work-section .sec-9 {padding-top: calc(var(--gap-50)*3);}
.portfolio-026 .work-section .sec-9 .logo {font-size: 0; max-width: var(--layout-l);  width: 90%; display: flex; align-items: end; justify-content: space-around; margin: auto;}
.portfolio-026 .work-section .sec-9 .logo span {display: block; flex-shrink: 0; height: 8vw;}
.portfolio-026 .work-section .sec-9 .logo span img {height: 100%;}

.portfolio-026 .work-section .sec-9 .logo span:nth-child(2) {transition-delay: 0.1s;}
.portfolio-026 .work-section .sec-9 .logo span:nth-child(3) {transition-delay: 0.2s;}
.portfolio-026 .work-section .sec-9 .logo span:nth-child(4) {transition-delay: 0.3s;}
.portfolio-026 .work-section .sec-9 .logo span:nth-child(5) {transition-delay: 0.4s;}
.portfolio-026 .work-section .sec-9 .logo span:nth-child(6) {transition-delay: 0.5s;}
.portfolio-026 .work-section .sec-9 .logo span:nth-child(7) {transition-delay: 0.6s;}
.portfolio-026 .work-section .sec-9 .logo span:nth-child(8) {transition-delay: 0.7s;}
.portfolio-026 .work-section .sec-9 .logo span:nth-child(9) {transition-delay: 0.8s;}