*{margin: 0; padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{vertical-align: top; max-width: 100%; height: auto;}
/**/
html, body {}
.pwrap {width: 90%; max-width: 1200px; position: relative; margin: 0 auto;}
.pwrap:after, ul:after {clear: both; content: ""; display: block;}

@media screen and (max-width : 768px){
    .pc {display: none !important;}
    
    .pwrap {box-sizing: border-box;}
    
}
@media screen and (min-width : 769px){
    .mob {display: none !important;}
}

/**/
.pf_visual {height: 100vh; position: relative;}

.pf_visual .videobox {position: relative; height: 100vh; background: url(../img/smart_vg.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}
.pf_visual .videobox:before {background: rgba(0,0,0,0.5); width: 100%; height: 100%; position: absolute; left: 0; top: 0; content: ""; z-index: -1;}

.pf_visual .textbox {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center;}
.pf_visual .wrap {height: 100%;}
.pf_visual dl {display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; height: 100%; text-align: center;}
.pf_visual dl dt {font-size: 20px; font-family: 'Poppins', sans-serif;}
.pf_visual dl dd {font-size: 60px; font-weight: bold; line-height: 1.2; margin-top: 20px;}

@media screen and (max-width:768px){
	.pf_visual dl dt {font-size: 3vw;}
    .pf_visual dl dd {font-size: 8vw;}
	.pf_visual .videobox {background: url(../img/smart_mob_visual.jpg); background-position: center;}
}

.gem_next {height: 560px; position: relative; overflow: hidden;}

.gem_next .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 888;}

.gem_next .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}

.brain_next {background-image: url(../img/fanta_vg.jpg); background-position: center center; background-repeat: no-repeat; position: relative;}


.gem_next .textbox {position: absolute; top: 150px; color: #fff; z-index: 10; width: 95%; max-width: 1200px; left: 50%; transform: translateX(-50%);}
.gem_next .textbox dl dt {font-size: 20px; font-family: 'Poppins', sans-serif; font-weight: normal;}
.gem_next .textbox dl dd {font-size: 60px; font-weight: bold;}


@media screen and (max-width: 768px) {
    
    .gem_next {height: 250px;} 
    .gem_next .textbox {top: 50px;}
    .gem_next .textbox dl dd {font-size: 30px;}
    
}

.gem06_link {padding: 60px 0 60px; text-align: center; background: #f3f4f6;}
.gem06_link a {color: #333; font-size: 30px; font-weight: 600;}
.gem06_link span {position: relative; top: -5px; margin-right: 20px;}
.gem06_link img {vertical-align: middle;}

@media screen and (max-width: 768px) {
    
    .gem06_link {padding: 70px 0 60px;}
    .gem06_link a {font-size: 20px;}
    
}

/**/

.smart01 {position: relative; padding-top: 90px;}
.smart01::before {position: absolute; top: 0; left: 0; width: 100%; height: 65%; background: #004287; content: "";}
.smart01 dl {color: #fff;}
.smart01 dl dt {font-size: 30px; font-weight: bold; margin-bottom: 30px;}
.smart01 dl dd {font-size: 18px; margin-bottom: 30px; line-height: 1.3;}
.smart01 dl dd:nth-of-type(2) {padding: 10px; background: #333; max-width: 155px; display: flex; align-items: center; justify-content: center; position: relative;}
.smart01 dl dd:nth-of-type(2) a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.smart01 dl dd:nth-of-type(2) i { padding-left: 5%; display: inline-block;}
.smart01 figure {text-align: right; box-sizing: border-box; padding-left: 20%; position: relative; right: -10%;}

@media screen and (max-width:768px){
	
	.smart01 {padding-top: 10%;}
	.smart01 dl dt {font-size: 5vw; margin-bottom: 5%;}
	.smart01 dl dd {font-size: 2.5vw; margin-bottom: 5%;}
	.smart01 dl dd:nth-of-type(2) {width: 35%; text-align: left;}
	
}


/**/
.smart02 {margin: 200px 0; box-sizing: border-box; padding: 0 5%;}
.smart02 dl {margin-bottom: 50px;}
.smart02 dl dt {font-size: 60px; font-family: 'Poppins', sans-serif; font-weight: bold; line-height: 1; margin-bottom: 25px;}
.smart02 dl dd {font-size: 18px;}
.smart02 ul li {border: 1px solid #dadada; box-sizing: border-box; border-radius: 100%;    }
.smart02 ul li::after {padding-bottom: 100%; display: block; content: "";}

.smart02 ul {display: flex;}
.smart02 ul li {width: calc(100%/4); margin-right: 60px;}
.smart02 ul li:last-child {margin-right: 0;}
.smart02 ul li:nth-of-type(1) {background: #0e4696;}
.smart02 ul li:nth-of-type(2) {background: #441088;}
.smart02 ul li:nth-of-type(3) {background: #d543bf;}
.smart02 ul li:nth-of-type(4) {background: #fbcc99;}

@media screen and (max-width:768px){
	
	.smart02 {margin: 15% 0; padding:0;}
	.smart02 dl dt {font-size: 8vw;}
	.smart02 dl dd {font-size: 2.3vw;}
	.smart02 ul li {margin-right: 3%;}
	
}


/**/
.smart03 {position: relative; margin-bottom: 20%;}
.smart03 .bg {position: absolute; top: 0;}
.smart03 figure {padding-top: 15%; box-sizing: border-box;}

/**/
.smart04 {position: relative; color: #441088;}
.smart04 .pwrap {position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%;}
.smart04 .box {position: absolute; right: -50px; top: 55%; transform: translateY(-50%); max-width: 550px; width: 45%;}
.smart04 dl {margin-bottom: 40px;}
.smart04 dl dt {font-size: 1.5vw; margin-bottom: 5%;}
.smart04 dl dd {font-size: 3vw; font-weight: bold;}
.smart04 p {font-size: 1vw; margin-bottom: 9%; width: 90%; word-break: keep-all; letter-spacing: 2px;}
.smart04 ul {display: flex;}
.smart04 ul li { margin-right: 3%;}
.smart04 ul li img{max-width: initial; margin-left: -19px;}
.smart04 ul li:last-child {margin-right: 0;}
/**/

.smart05 {background-image: url(../img/smart05.png); background-repeat: no-repeat; background-position: center 110%; padding: 140px 0 160px;}
.smart05 ul li {margin-bottom: 110px;}
.smart05 ul li:last-child {margin-bottom: 0; text-align: center;}

.smart06 {height: 100vh; background-image: url(../img/smart11.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: auto;}


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

	.smart04 {background-image: url(../img/smart_mob_re.jpg); background-repeat: no-repeat; background-position: top left; padding-top: 60%; background-size: 80%; background-color: #e7d5ff; padding-bottom: 10%;}
	.smart04 .pwrap {transform: none; position: relative; left: auto;}
	.smart04 .box {position: static; right: 0; top: auto; transform: none; max-width: 550px; width: 80%; bottom: 10%; margin-left: auto;}
	.smart04 dl {margin-bottom: 5%;}
	.smart04 dl dt {font-size: calc(18px + .4vw); margin-bottom: 0;}
	.smart04 dl dd {font-size: calc(22px + 1vw); font-weight: bold;}
	.smart04 p {font-size: calc(14px + .4vw); margin-bottom: 9%; width: 90%; word-break: keep-all; letter-spacing: 2px;}
	.smart04 ul li {margin-right: 5%;}
	
	.smart05 {padding: 15% 0 25%;}
	.smart05 ul li {margin-bottom: 5%;}

	.smart06 {height: 450px; background-image: url(../img/smart_mob_bgimg.jpg); background-size: cover; background-color: #c4c8cb; background-attachment: scroll;}
	
}