@charset "utf-8";
@import url("portfolio_com.css");

/* s : ÆÒ¿£ÅÍ */

:root {
	--max-w : 1440px;
	--vh : 100vh;
	--nvh : calc(var(--vh, 1vh) * 100);

	--font-16 : 16px;
	--font-18 : 18px;
	--font-20 : 20px;
	--font-30 : 30px;

	--gap-8 : 8px;
	--gap-16 : 16px;
	--gap-24 : 24px;
	--gap-32 : 32px;
	--gap-40 : 40px;
	--gap-60 : 60px;
	--gap-80 : 80px;
}

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

		--gap-16 : 12px;
		--gap-24 : 20px;
		--gap-32 : 30px;
		--gap-40 : 30px;
		--gap-60 : 50px;
		--gap-80 : 70px;
	}
}

@media screen and (max-width:480px){
	:root {
		--font-16 : 13px;
		--font-18 : 14px;
		--font-20 : 16px;
		--font-30 : 20px;

		--gap-8 : 5px		
		--gap-16 : 10px;
		--gap-24 : 16px;
		--gap-32 : 24px;
		--gap-40 : 20px;
		--gap-60 : 40px;
		--gap-80 : 60px;
	}
}

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

.portfolio-06 {letter-spacing:-1px;}
.portfolio-06 .work_wrap {overflow:hidden;}
.portfolio-06 .work-box {background-color:#fff; padding:var(--gap-80) 0; min-height:calc(var(--nvh) * 0.8); display:flex; align-items:center; justify-content:center;}
.portfolio-06 .work-box > .inner {width:90%; max-width:var(--max-w); margin:0 auto;}
.portfolio-06 .work-box h2 {font-size:var(--font-30); font-weight:700;}
.portfolio-06 .work-box.design {padding:240px 0; display:block;}

@media screen and (max-width:1024px) {
	.portfolio-06 .work-box.design {padding:180px 0;}
}

@media screen and (max-width:768px) {
	.portfolio-06 .work-box.design {padding:140px 0;}
}

@media screen and (max-width:480px) {
	.portfolio-06 .work-box.design {padding:80px 0;}
}

.portfolio-06 .sec-1 h2 {text-align:left;}
.portfolio-06 .sec-1 .sec-conts {width:100%; margin-top:var(--gap-80);}
.portfolio-06 .sec-1 .sec-conts ul.intro {width:100%;}
.portfolio-06 .sec-1 .sec-conts ul.intro li {width:100%; margin-top:var(--gap-40); display:flex; gap:var(--gap-16) 120px;} text-align:left;}
.portfolio-06 .sec-1 .sec-conts ul.intro li:first-child {margin-top:0;}
.portfolio-06 .sec-1 .sec-conts ul.intro li .head {flex-shrink:0; font-size:var(--font-20); font-weight:700; width:160px; text-align:left;}
.portfolio-06 .sec-1 .sec-conts ul.intro li .conts {flex-grow:1; font-size:var(--font-18); text-align:left;}
.portfolio-06 .sec-1 .sec-conts ul.intro li .conts .tag-wrap {display:flex; align-items:center; gap:var(--gap-8); flex-wrap:wrap;}
.portfolio-06 .sec-1 .sec-conts ul.intro li .conts .tag-wrap a {font-size:var(--font-18); color:#666;}
.portfolio-06 .sec-1 .sec-conts .button-box {width:100%; display:flex; justify-content:flex-end; margin-top:var(--gap-60);}
.portfolio-06 .sec-1 .sec-conts .button-box a {width:100%; max-width:200px; height:60px; display:flex; align-items:center; padding:0 var(--gap-32); font-size:var(--font-16); color:#fff; position:relative; background:#222; border-radius:30px;}
.portfolio-06 .sec-1 .sec-conts .button-box a:after {content:""; width:16px; height:16px; background:url(/img/portfolio/006/icon_arrow.svg) center no-repeat; background-size:cover; position:absolute; right:var(--gap-32); top:50%; transform:translateY(-50%);}

@media screen and (max-width:1280px) {
	.portfolio-06 .sec-1 .sec-conts ul.intro li {gap:var(--gap-16) 60px;}
}

@media screen and (max-width:1024px) {
	.portfolio-06 .sec-1 .sec-conts ul.intro li {flex-wrap:wrap;}
	.portfolio-06 .sec-1 .sec-conts ul.intro li .conts {width:100%;}	
}

@media screen and (max-width:768px) {
	.portfolio-06 .sec-1 .sec-conts .button-box {justify-content:center;}
}

@media screen and (max-width:480px) {
	.portfolio-06 .sec-1 .sec-conts .button-box a {max-width:180px; height:50px;}
}



.portfolio-06 .sec-2 {background-color:#000; background-image:url(/img/portfolio/006/sec2_bg_img.png); background-repeat:no-repeat; background-position:center bottom; background-size:100% auto; position:relative; color:#fff;}
.portfolio-06 .sec-2:before {content:""; width:100%; height:60%; background: rgb(222,83,39); background: linear-gradient(0deg, rgba(222,83,39,0) 0%, rgba(222,83,39,0.8) 50%, rgba(222,83,39,1) 100%); position:absolute; left:0; top:0; z-index:0;}
.portfolio-06 .sec-2 > .inner {position:relative; z-index:10; text-align:left;}
.portfolio-06 .sec-2 .sec-title {width:100%;}
.portfolio-06 .sec-2 .sec-title h2 {display:block; font-size:var(--font-20); font-weight:600; margin-bottom:var(--gap-60);}
.portfolio-06 .sec-2 .sec-title .tlt {font-size:50px; font-weight:700; letter-spacing:-2px;}
.portfolio-06 .sec-2 .sec-title .tlt-txt {width:100%; display:flex; justify-content:flex-end;}
.portfolio-06 .sec-2 .sec-title .tlt-txt .txt {width:50%; font-size:var(--font-18);}
.portfolio-06 .sec-2 .sec-conts {width:100%; padding:160px 0 180px 0;}
.portfolio-06 .sec-2 .sec-conts .main-conts {width:100%; display:flex; justify-content:space-between; position:relative;}
.portfolio-06 .sec-2 .sec-conts .main-conts:before,
.portfolio-06 .sec-2 .sec-conts .main-conts:after {content:""; width:calc((100% - (360px * 3)) / 2); height:20px; background:url(/img/portfolio/006/icon_plus.svg) center no-repeat; background-size:auto 100%; position:absolute; top:50%; transform:translateY(-50%);}
.portfolio-06 .sec-2 .sec-conts .main-conts:before {left:360px;}
.portfolio-06 .sec-2 .sec-conts .main-conts:after {right:360px;}
.portfolio-06 .sec-2 .sec-conts .main-conts .round-box {width:360px; height:360px; box-sizing:border-box; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid #fff; padding:var(--gap-32); text-align:center; position:relative;}
.portfolio-06 .sec-2 .sec-conts .main-conts .round-box > .wrap > * {width:100%; display:block;}
.portfolio-06 .sec-2 .sec-conts .main-conts .round-box span {font-size:var(--font-16);}
.portfolio-06 .sec-2 .sec-conts .main-conts .round-box em {font-size:var(--font-30); font-weight:500; margin:var(--gap-16) 0 var(--gap-24) 0;}
.portfolio-06 .sec-2 .sec-conts .main-conts .round-box .txt {font-size:var(--font-18);}
.portfolio-06 .sec-2 .sec-conts .conts {width:100%; margin-top:470px; font-size:var(--font-20); text-align:center;}

@media screen and (max-width:1440px) {
	.portfolio-06 .sec-2 .sec-conts .main-conts:before,
	.portfolio-06 .sec-2 .sec-conts .main-conts:after {width:calc((100% - (300px * 3)) / 2);}
	.portfolio-06 .sec-2 .sec-conts .main-conts:before {left:300px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts:after {right:300px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box {width:300px; height:300px;}
}

@media screen and (max-width:1280px) {
	.portfolio-06 .sec-2 .sec-title .tlt-txt .txt {width:100%; margin-top:var(--gap-16);}
	.portfolio-06 .sec-2 .sec-conts .main-conts:before,
	.portfolio-06 .sec-2 .sec-conts .main-conts:after {width:calc((100% - (240px * 3)) / 2);}
	.portfolio-06 .sec-2 .sec-conts .main-conts:before {left:240px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts:after {right:240px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box {width:240px; height:240px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box span {font-size:13px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box em {font-size:22px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box .txt {font-size:16px;}
	.portfolio-06 .sec-2 .sec-conts .conts .br {display:inline-block;}
}

@media screen and (max-width:1024px) {
	.portfolio-06 .sec-2 .sec-title .tlt {font-size:42px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts {display:block;}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box {margin:0 auto; margin-top:var(--gap-80);}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box:first-child {margin-top:0;}
	.portfolio-06 .sec-2 .sec-conts .main-conts:before,
	.portfolio-06 .sec-2 .sec-conts .main-conts:after {width:100%; height:20px; transform:none;}
	.portfolio-06 .sec-2 .sec-conts .main-conts:before {left:0; top:calc(260px + ((var(--gap-80) - 20px) / 2));}
	.portfolio-06 .sec-2 .sec-conts .main-conts:after {right:0; top:auto; bottom:calc(260px + ((var(--gap-80) - 20px) / 2));}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box {width:260px; height:260px;}
	.portfolio-06 .sec-2 .sec-conts .conts {margin-top:320px;}
}

@media screen and (max-width:768px) {
	.portfolio-06 .sec-2 .sec-title .tlt {font-size:36px;}
	.portfolio-06 .sec-2 .sec-conts {padding:120px 0 140px 0;}
	.portfolio-06 .sec-2 .sec-conts .conts {margin-top:240px;}
}

@media screen and (max-width:480px) {
	.portfolio-06 .sec-2:before {height:80%;}
	.portfolio-06 .sec-2 .sec-title .tlt {font-size:24px;}
	.portfolio-06 .sec-2 .sec-conts {padding:80px 0 100px 0;}
	.portfolio-06 .sec-2 .sec-conts .main-conts:before {top:calc(200px + ((var(--gap-80) - 20px) / 2));}
	.portfolio-06 .sec-2 .sec-conts .main-conts:after {bottom:calc(200px + ((var(--gap-80) - 20px) / 2));}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box {width:200px; height:200px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box span {font-size:11px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box em {font-size:18px;}
	.portfolio-06 .sec-2 .sec-conts .main-conts .round-box .txt {font-size:14px;}
	.portfolio-06 .sec-2 .sec-conts .conts {margin-top:150px;}
}

.portfolio-06 .sec-3 {text-align:left; min-height:calc(var(--nvh) * 0.5);}
.portfolio-06 .sec-3 .sec-title h2 {font-size:var(--font-20); font-weight:600; margin-bottom:var(--gap-40);}
.portfolio-06 .sec-3 .sec-conts {width:100%; display:flex;}
.portfolio-06 .sec-3 .sec-conts > * {width:50%;}
.portfolio-06 .sec-3 .sec-conts .tlt {font-size:50px; font-weight:700; letter-spacing:-2px;}
.portfolio-06 .sec-3 .sec-conts .conts {padding-top:var(--gap-40); font-size:var(--font-18);}

@media screen and (max-width:1024px) {
	.portfolio-06 .sec-3 .sec-conts {flex-wrap:wrap;}
	.portfolio-06 .sec-3 .sec-conts > * {width:100%;}
	.portfolio-06 .sec-3 .sec-conts .tlt {font-size:42px;}	
}

@media screen and (max-width:768px) {
	.portfolio-06 .sec-3 .sec-conts .tlt {font-size:36px;}
}

@media screen and (max-width:480px) {
	.portfolio-06 .sec-3 .sec-conts .tlt {font-size:24px;}
}

.portfolio-06 .sec-4 {min-height:100%; padding:0;}
.portfolio-06 .sec-4 .concept-wrap {display:flex; width:100%;}
.portfolio-06 .sec-4 .concept-wrap .concept-box {flex:1 1 33.33%; background:#eee;}
.portfolio-06 .sec-4 .concept-wrap .concept-box .title-box {width:100%; display:block; position:relative; background-repeat:no-repeat; background-size:cover; background-position:center;}
.portfolio-06 .sec-4 .concept-wrap .concept-box .title-box > .wrap {width:100%; height:0; padding-bottom:100%;}
.portfolio-06 .sec-4 .concept-wrap .concept-box .title-box em {display:block; width:100%; text-align:center; font-size:var(--font-30); font-weight:500; position:absolute; left:0; top:50%; transform:translateY(-50%);}
.portfolio-06 .sec-4 .concept-wrap .concept-box.tone .title-box {background-image:url(/img/portfolio/006/concept_img01.png);}
.portfolio-06 .sec-4 .concept-wrap .concept-box.graphic .title-box {background-image:url(/img/portfolio/006/concept_img02.png);}
.portfolio-06 .sec-4 .concept-wrap .concept-box.layout .title-box {background-image:url(/img/portfolio/006/concept_img03.png);}
.portfolio-06 .sec-4 .concept-wrap .concept-box .conts-box {width:100%; background:#eee; padding:100px 20px; text-align:center; font-size:var(--font-20);}
.portfolio-06 .sec-4 .concept-wrap .concept-box .conts-box > .wrap {width:100%; max-width:380px; margin:0 auto;}

@media screen and (max-width:1280px) {
	.portfolio-06 .sec-4 .concept-wrap .concept-box .conts-box .br {display:inline-block;}
}

@media screen and (max-width:1024px) {
	.portfolio-06 .sec-4 .concept-wrap .concept-box .title-box em {font-size:24px;}
	.portfolio-06 .sec-4 .concept-wrap .concept-box .conts-box {font-size:16px; padding:var(--gap-80) var(--gap-24);}
}

@media screen and (max-width:768px) {
	.portfolio-06 .sec-4 .concept-wrap .concept-box .title-box em {font-size:20px;}
	.portfolio-06 .sec-4 .concept-wrap .concept-box .conts-box {font-size:14px; padding:var(--gap-80) var(--gap-24);}
}

@media screen and (max-width:600px) {
	.portfolio-06 .sec-4 .concept-wrap {display:block;}
	.portfolio-06 .sec-4 .concept-wrap .concept-box {width:100%;}
	.portfolio-06 .sec-4 .concept-wrap .concept-box .title-box > .wrap {padding-bottom:56.25%;}
	.portfolio-06 .sec-4 .concept-wrap .concept-box .title-box em {font-size:var(--font-30);}
	.portfolio-06 .sec-4 .concept-wrap .concept-box .conts-box {font-size:var(--font-18); padding:var(--gap-80) var(--gap-24);}
}


.portfolio-06 .sec-5 {display:block; position:relative;}
.portfolio-06 .sec-5 .title-box {display:block; width:90%; max-width:1212px; margin:0 auto; position:relative;}
.portfolio-06 .sec-5 .title-box img {max-width:100%; display:block; margin:0 auto;}
.portfolio-06 .sec-5 .title-box .orange {width:70%; position:absolute; left:50%; top:70%; transform:translate(-50%,-50%); opacity:0; transition:top 1s linear, opacity 1s ease-in-out; transition-delay:0.3s;}
.portfolio-06 .sec-5 .title-box.aos-animate .orange {top:50%; opacity:1;}
.portfolio-06 .sec-5 .img-box {width:100%; margin-top:320px; position:relative; z-index:10;}
.portfolio-06 .sec-5 .img-box img {max-width:100%; display:block; margin:0 auto;}
.portfolio-06 .sec-5 .obj-box .obj {position:absolute; background-size:cover; background-repeat:no-repeat; background-position:center; z-index:0;}
.portfolio-06 .sec-5 .obj-box .obj-1 {background-image:url(/img/portfolio/006/circle_01.png); width:480px; height:480px; left:-240px; top:30%;}
.portfolio-06 .sec-5 .obj-box .obj-2 {background-image:url(/img/portfolio/006/circle_02.png); width:240px; height:240px;  right:0; top:40%;}

@media screen and (max-width:1280px) {
	.portfolio-06 .sec-5 .img-box {margin-top:260px;}
	.portfolio-06 .sec-5 .obj-box .obj-1 {width:320px; height:320px; left:-160px;}
	.portfolio-06 .sec-5 .obj-box .obj-2 {width:160px; height:160px;}
}

@media screen and (max-width:1024px) {
	.portfolio-06 .sec-5 .img-box {margin-top:200px;}
}

@media screen and (max-width:768px) {
	.portfolio-06 .sec-5 .img-box {margin-top:120px;}
	.portfolio-06 .sec-5 .obj-box .obj-1 {width:240px; height:240px; left:-120px;}
	.portfolio-06 .sec-5 .obj-box .obj-2 {width:120px; height:120px;}
}

@media screen and (max-width:600px) {
	.portfolio-06 .sec-5 .img-box {margin-top:60px;}
	.portfolio-06 .sec-5 .obj-box .obj-1 {width:120px; height:120px; left:-60px;}
	.portfolio-06 .sec-5 .obj-box .obj-2 {width:60px; height:60px;}
}


.portfolio-06 .sec-6 {background:#F8F8F8;}
.portfolio-06 .sec-6 .img-wrap {width:100%; display:flex;}
.portfolio-06 .sec-6 .img-wrap .img-box span {display:block;}
.portfolio-06 .sec-6 .img-wrap .img-box img {max-width:100%; display:block; margin:0 auto;}
.portfolio-06 .sec-6 .img-wrap.wrap-1 {align-items:center;}
.portfolio-06 .sec-6 .img-wrap.wrap-2 {align-items:flex-end; flex-direction:row-reverse; margin-top:var(--gap-80);}
.portfolio-06 .sec-6 .img-wrap.wrap-2 .img-box.mo {transform:translateY(50%);}
.portfolio-06 .sec-6 .img-wrap.wrap-3 {align-items:flex-end; flex-direction:row-reverse; margin-top:calc(var(--gap-16) * -1); transform:translateX(25%);}
.portfolio-06 .sec-6 .img-wrap.wrap-3 .img-box.mo {transform:translateY(20%);}

.portfolio-06 .sec-7 .img-wrap {width:100%; display:flex;}
.portfolio-06 .sec-7 .img-wrap .img-box img {max-width:100%; display:block; margin:0 auto;}
.portfolio-06 .sec-7 .img-wrap .box-rt .img-box:last-child {margin-top:-6%;}

@media screen and (max-width:480px) {
	.portfolio-06 .sec-7 .img-wrap {max-width:300px; margin:0 auto; flex-wrap:wrap;}
	.portfolio-06 .sec-7 .img-wrap > * {width:100%;}
}


/* e : ÆÒ¿£ÅÍ */