@charset "UTF-8";
@import url(//use.fontawesome.com/releases/v5.15.4/css/all.css);

/* Common */
html {margin: 0;padding: 0;height: 100%;font-size: 62.5%;}
body {position: relative;font-family: 'Noto Sans JP', sans-serif;font-size: 1.6rem;line-height: 1.0em;letter-spacing: 0em;color: #1d1d1d;background: #fff;margin: 0;padding: 0;overflow-x: hidden;overflow-y: scroll;word-wrap: break-word; height: auto;}
h1,h2,h3,h4,h5,h6,p,a,ul,li,ol,dl,dt,dd,table,tr,th,td,span,strong {line-height: 1.2em;letter-spacing: 0em;font-weight: 400;font-feature-settings : "palt";margin: 0;padding: 0;}
li {list-style-type: none;list-style-position: outside;}
table {border-collapse: collapse;}
img {vertical-align: bottom;max-width: 100%;height: auto; display: block;}
a {text-decoration: none;-webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s;}
a:visited {text-decoration: none;color: #fff;}
a:hover{text-decoration: none;color: #fff;}
a img {border: none;-webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;-ms-transition: 0.5s;transition: 0.5s;}
a:hover img {opacity: 0.6;_filter: alpha(opacity=60);}
a:focus {outline:none;}
button {background-color: transparent;border: none;cursor: pointer;outline: none;padding: 0;appearance: none;}
input,textarea,select {font-family: 'Noto Sans JP', sans-serif;outline: none;margin: 0;padding: 0;border: none;}

/* Clearfix */
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-table;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clear {clear: both;}

/* Parts */
.pcnone {display: none;}.tbnone {display: block;}.spnone {display: block;}.pctbnone {display: none;}.tbspnone {display: block;}.pcspnone {display: none;}
.wrapper {width: 100%;min-height: 100vh; display: block; padding-top: ; z-index: 1; position: relative;}/*header分のpaddingtop*/
.inbox-l {width: 1400px; margin: 0 auto; padding: 80px 0;}
.inbox-n {width: 1000px; margin: 0 auto; padding: 80px 0;}
.inbox-s {width: 900px; margin: 0 auto; padding: 80px 0;}
h1 {font-size: 2.2rem; font-weight: bold; color: #fff;}
h2 {font-size: 3.6rem; font-weight: bold; color: #231F20; line-height: 1.6em; letter-spacing: 1px; margin-bottom: 10px;}
h3 {font-size: 2.4rem; font-weight: bold; color: #231F20; margin-bottom: 10px;}
a:link {font-size: 1.6rem; color: #fff;}
p {font-size: 1.6rem; line-height: 2em; color: #231F20; margin-bottom: 10px;}
p.small {font-size: 1.4rem; line-height: 1.6rem;}
.cl-black{color:#231F20;}
.cl-blue{color:#0072FF;}
.cl-gray{color:;}
.cl-red{color:;}

a.btn-arrow-anima { padding: 15px 60px 15px 30px; display: inline-block; font-weight: bold; color:#fff; text-align: center; position: relative; transition: all .2s linear; background: #231F20;transition: all 0.5s;box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2);}
a.btn-arrow-anima::before{font-family: "Font Awesome 5 Free";font-weight:900; content:"\f061"; position: absolute;top:35%;right:25px;transition: all 0.5s;}
a.btn-arrow-anima:hover::before{right:15px;}
a:link.btn-grade-l {color:#fff; font-weight: bold; padding: 10px 20px; display: inline-block; box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2); border-radius: 20px; background: linear-gradient(98.51deg, rgba(0, 255, 255, 0.7) 0%, rgba(0, 113, 188, 0.7) 42.19%, rgba(158, 0, 93, 0.7) 100%);}
a:link.btn-grade-l:hover { color:#fff;}
a:link.btn-black-l {color:#fff; font-weight: bold; padding: 10px 20px; display: inline-block; box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2); border-radius: 20px; background: #231F20; }
a:link.btn-black-l:hover  { color:#fff;}


@media only screen and (max-width: 1040px) {
  .inbox-l {width: 1000px;}
  .inbox-n {width: 80%;}
  .inbox-s {width: 70%;}
}
@media only screen and (max-width: 768px) {
  .pcnone {display: block;} .tbnone {display: none;} .spnone {display: block;} .pctbnone {display: none;} .tbspnone {display: none;} .pcspnone {display: block;}
  .inbox-l {width: 100%; padding: 60px 0;}
  .inbox-n {width: 90%; padding: 60px 0;}
  .inbox-s {width: 80%; padding: 60px 0;}
  h2 {font-size: 3.2rem; }
  h3 {font-size: 2.4rem; }
  a:link.btn-grade-l {width: 100%; padding: 10px 0; display: block; text-align: center; margin-bottom: 40px;}
  a:link.btn-black-l {width: 100%; padding: 10px 0; display: block; text-align: center; margin-bottom: 40px;}
}
@media only screen and (max-width: 720px) {
  .pcnone {display: block;} .tbnone {display: block;} .spnone {display: none;} .pctbnone {display: block;} .tbspnone {display: none;} .pcspnone {display: none;}
  h1 {font-size: 2.2rem; }
  h2 {font-size: 5vw; line-height: 10vw; }
  h3 {font-size: 4.2vw; line-height: 8vw;}
  p {font-size: 4vw; line-height: 8vw;}
  p.small {font-size: 1.4rem; line-height: 1.6rem;}
}








/*Header*/
.sp-nav,.modal-menu {display: none;}
.nav {width: 90%; max-width: 1600px; height: 75px; padding: 0 20px; margin: auto; background: #fff; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); transition: all .5s ease;position: fixed;top: 30px;left: 0; right:0;z-index: 20;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;align-items: center;-webkit-align-items: center; }
.nav a {font-size: 1.3rem;color: #231F20;display: block;}
.nav a:visited {color: #231F20;}
.nav a:hover {color: #8b8b8b;}
.nav .logo {width: 125px;}
.nav ul.menu {margin-left: auto;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;align-items: center;-webkit-align-items: center;}
.nav ul.menu li {margin-left: 36px;position: relative;}
.nav ul li.unit{display: inline-block;padding: 15px 0;}
.nav ul > li.unit > a{padding: 15px 0 15px 30px;display: block;text-transform: uppercase;}
.nav ul li.unit ul{position: absolute;top: 75px;left: 0;background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.nav ul li.unit ul li{display: block;padding: 0;margin: 0;width: 150px;}
.nav ul li.unit ul li a{width: 100%;padding: 15px 10px;}
.nav ul li.unit ul li a:hover{background-color: #231F20;color: #fff;}
.nav ul li.unit ul{display: none;}
.nav ul li.unit:hover ul{display: block;}
.nav ul li.second {margin-left: 0; padding-right: 10px;}
.nav ul li.second a { font-weight: bold;}
.nav ul li.second ul { left:8px; }
.nav ul li.second ul li {width: 70px; text-align: center; }
.nav ul li.second ul li a {font-weight: bold; }
.nav ul.menu li p {display: inline-block;width: 8px;height: 8px;border-radius: 8px;background: #cd002c;position: absolute;top: 0;right: -12px;}
.nav ul.menu .btn-box { /*width: 250px;*/ width: 125px; margin-left: 30px; display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex; justify-content: space-between;-webkit-justify-content: space-between;}
.menu-trigger,.modal_menu {display: none;}
@media only screen and (max-width: 768px) {
  .nav {padding: 0 0 0 15px;height: 50px; z-index: 40;top:20px; justify-content: space-between;-webkit-justify-content: space-between;}
  .nav .logo {width: 100px;z-index: 40;}
  .nav.on { box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.08);}
  .nav ul.lang {margin-left: auto;padding-right: 20px;}
  .nav ul.menu,.nav .btn-box {display: none;}
  .menu-trigger,.menu-trigger span {display: inline-block;transition: all .4s;box-sizing: border-box;}
  .menu-trigger {position: relative;width: 50px;height: 50px;z-index: 20; background: #231F20;}
  .menu-trigger span {position: absolute;left: 0; right:0; margin: auto; width: 18px;height: 2px;background-color: #fff;}
  .menu-trigger span:nth-of-type(1) {top: 17px;}
  .menu-trigger span:nth-of-type(2) {top: 24px;}
  .menu-trigger span:nth-of-type(3) {bottom: 17px;}
  .menu-trigger.active {background: #F2F2F2;}
  .menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(7px) rotate(-315deg);transform: translateY(7px) rotate(-315deg); background: #231F20;}
  .menu-trigger.active span:nth-of-type(2) {opacity: 0;}
  .menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-7px) rotate(315deg);transform: translateY(-7px) rotate(315deg); background: #231F20;}
  .modal_menu {opacity: 0;display: block;width: 90%;height: 90%;background: #fff;box-sizing: border-box; padding: 0 10%; position: fixed;top: 40px;right: 0;left: 0; margin: auto; /*bottom: 200%;*/z-index: 30;overflow-y: scroll;transition: all 0.5s ease;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); display: none;}
  .modal_menu.letsgo {opacity: 1;/*bottom: 0;*/ display: block;}
  .modal_menu ul {margin-top: 50px;font-size: 1.2rem;text-align: left;}
  .modal_menu ul a {color: #231F20;font-weight: 500;}
  .modal_menu ul li + li {margin-top: 40px;}
  .modal_btn { width: 90%; margin: 100px auto 50px;}
  a.btn_blue_l { width: 100%; padding: 10px; margin-bottom: 50px; color: #fff; text-align: center; border-radius: 20px; background: #0072FF; box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2); display: block;}
  a.btn_yellow_l { width: 100%; padding: 10px; margin-bottom: 50px; color: #231F20; text-align: center; border-radius: 20px; background: #F6DF0E; box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2); display: block;}
  .sp_lang ul {width: 150px; margin-top: 0; margin: 0 auto; text-align: center; display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;align-items: center;-webkit-align-items: center;}
  .sp_lang ul li {color: #111; width: 50%;  margin-top: 0; }
  .sp_lang ul li + li {color: #111; width: 50%;  margin-top: 0; }
  .sp_lang ul li a { width: 100%; border-bottom: 1px solid #1c2a3a; padding-bottom: 2px;}
}



/*Footer*/
.footer {position: relative;background: #fff;}
.footer a,a:visited { color: #231F20;}
.f-in { width: 950px; padding: 70px 0 15px 0; margin: 0 auto; box-sizing: border-box; display: -webkit-flex;display: flex;display: -moz-flex;display: -ms-flex;display: -o-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-around;justify-content: space-around;}
.f-in .list-in {width: 180px;}
.f-in .list-in strong {font-size: 1.6rem;font-weight: 700;display: block;padding: 0 0 12px 0;margin: 0 0 16px 0; border-bottom: #E6E6E6 solid 1px;}
.f-in .list-in ul li {font-size: 1.4rem;line-height: 1.4em; padding-left: 0; margin-bottom: 16px;}
.f-in .list-in ul li a { font-size: 1.4rem;}
.fcopy {font-size: 1.3rem;text-align: center;padding: 40px 0 30px;}
@media only screen and (max-width: 768px) {
  .f-in { width: 90%; padding: 70px 0 15px 0; flex-wrap: wrap; -ms-flex-wrap: wrap;}
  .f-in .list-in {width: 200px; margin-bottom: 40px;}
  .fcopy {font-size: 1.3rem;text-align: center;padding: 0 0 30px;}
}
@media only screen and (max-width: 720px) {
  .f-in .list-in {width: 250px;}
}



/*move top icon*/
#move_top{position: fixed; bottom:40px; right:40px; z-index: 9999; width: 50px;height: 50px; background: #9b9b9b;opacity: 0.8;border-radius: 5%;}
#move_top a{position: relative;display: block;width: 50px;height: 50px;text-decoration: none;}
#move_top a::before{font-family: 'Font Awesome 5 Free';font-weight: 900;content: '\f077';font-size: 25px;color: #fff;position: absolute;width: 25px;height: 25px;top: 5px;bottom: 0;right: 0;left: 0;margin: auto;text-align: center;}
@media only screen and (max-width: 768px) {#move_top{width: 45px;height: 45px; right: 10px;}#move_top a{width: 45px;height: 45px;}#move_top a::before{font-size: 23px;}}

/*Animation*/
/*fade*/
.fadein_pt1 {opacity: 0; transform: translate(0,50px); transition: all 1000ms;}
.fadein_pt1.scrollin {opacity: 1; transform: translate(0,0);}
.fadein_pt2 {opacity: 0; transform: translate(0,50px); transition: all 3000ms;}
.fadein_pt2.scrollin {opacity: 1; transform: translate(0,0);}
.zoomin{opacity: 0;}
.zoomin_anima{ animation-name:zoomInAnime;animation-duration:1.5s;animation-fill-mode:forwards;transition-delay:1s;}
@keyframes zoomInAnime{from {transform: scale(0.6);}to {transform: scale(1); opacity: 1;}}

/*loding*/
#loader {position: fixed;width: 100%;height: 100vh;transition: all 2.5s ease; background-color: #fff;z-index: 999;top: 0;left: 0;display: flex;justify-content: center;align-items: center;}
.loaded {opacity: 0; visibility: hidden;transition: all 4.5s ease;}
#loader span {position: relative;display: inline-block;font-size: 6rem;margin: 0 0.1em;color: rgba(0, 0, 0, .8);font-weight: bold;}
#loader span::after {position: absolute;top: 0;left: 0;content: attr(data-text);color: #fff;opacity: 0;transform: rotateY(-90deg);animation: loader 4s infinite;}
#loader span:nth-child(2)::after {animation-delay: .2s;}
#loader span:nth-child(3)::after {animation-delay: .4s;}
#loader span:nth-child(4)::after {animation-delay: .6s;}
#loader span:nth-child(5)::after {animation-delay: .8s;}
#loader span:nth-child(6)::after {animation-delay: 1s;}
#loader span:nth-child(7)::after {animation-delay: 1.2s;}
@keyframes loader {
  0%, 75%, 100% {transform: rotateY(-90deg);opacity: 0;}
  25%, 50% {transform: rotateY(0);opacity: 1;}
}
@media only screen and (max-width: 720px) {
  #loader span {font-size: 3.5rem;margin: 0 0.1em;}
}



/*Scroll down icon animation*/
.scrolldown-icon{position:absolute;bottom:1%;left:0;animation: arrowmove 1s ease-in-out infinite;}
@keyframes arrowmove{0%{bottom:1%;}50%{bottom:2.5%;}100%{bottom:1%;}}
.scrolldown-icon span{position: absolute;left:-20px;bottom:10px;color: #a7a7a7;font-size: 0.7rem;letter-spacing: 0.3em;-ms-writing-mode: tb-rl;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;}
.scrolldown-icon:before {content: "";position: absolute;bottom: 0;right: -6px;width: 1px;height: 20px;background: #a7a7a7;transform: skewX(-31deg);}
.scrolldown-icon:after{content:"";position: absolute;bottom:0;right:0;width:1px;height: 50px;background:#a7a7a7;}
@media only screen and (max-width: 720px) {
  .scrolldown-icon{bottom:8%;}
  @keyframes arrowmove{0%{bottom:8%;}50%{bottom:10.5%;}100%{bottom:8%;}}
  .scrolldown-icon span{bottom:10px;}
  .scrolldown-icon:before {bottom: 0;}
  .scrolldown-icon:after{bottom:0;}
}



/*top page_20220207*/
.primary {position: relative;}
.primary::before {content: ''; width: 60%; height: 70%; position: absolute; top:0; left: 0; background-color: #F2F2F2; background-image: repeating-linear-gradient(-45deg,#fff, #fff 6.9px,transparent 0, transparent 8.3px); z-index: 0;}
.primary .inbox { width: 90%; max-width: 1300px; display: block; height: 100vh; padding: 190px 0 0; margin: 0 auto; z-index: 1; position: relative; }
.primary .inbox h2 span { font-size: 2.6rem; }
.primary .inbox img { max-width: 460px; width: 36%; margin: 40px 0 70px; }
.primary .inbox .tp-anima { position: absolute; top: 30px; right:-150px; width: 75%; }
@media only screen and (max-width: 1040px) {
  .primary .inbox { max-width: none; height: 100vh; padding: 250px 0 0; }
  .primary .inbox .tp-anima { top:auto; bottom: 0; width: 110%; }
  .primary .inbox img { max-width: none; width: 60%; margin: 50px 0 70px; }
}
@media only screen and (max-width: 768px) {
  .primary::before {width: 70%; height: 60%;}
  .primary .inbox { width: 90%; padding: 190px 0 0; }
  .primary .inbox img { width: 60%; margin: 40px 0 70px; }
}
@media only screen and (max-width: 720px) {
  .primary {overflow: hidden;}
  .primary .inbox {padding: 113% 0 0; }
  .primary .inbox .tp-anima { top: 45px; right:-70px; width:480px; }
  .primary .inbox img { width: 75%; margin: 10px 0 30px;}
}


.concept { position: relative;}
.concept .inbox-n { padding: 130px 0; position: relative; z-index: 1;}
.concept .inbox-n h2 {margin-bottom: 60px;}
.concept .under-text { position: absolute; top:30px; left:0;right:0; margin: auto; z-index: 0;}
.concept .under-text p {font-size: 14rem; font-family: 'Roboto'; font-weight: 100; line-height: 14rem; text-align: center; color: rgba(0, 0, 0, 0.04); }
@media only screen and (max-width: 720px) {
  .concept .inbox-n { padding: 0 0 80px;}
  .concept .inbox-n h2 {margin-bottom: 40px;}
  .concept .under-text {top:50px;}
  .concept .under-text p {font-size: 20vw; line-height: 8rem; }
}


.joinus { padding: 80px 0; background: linear-gradient(98.51deg, rgba(0, 255, 255, 0.7) 0%, rgba(0, 113, 188, 0.7) 42.19%, rgba(158, 0, 93, 0.7) 100%); position: relative; }
.joinus::before {content: ''; width: 100%; height: 50%; position: absolute; top:170px; left: 0; background-image: linear-gradient(-45deg,
  rgba(255,255,255,0) 40%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 90%,rgba(255,255,255,0.3) 90%, rgba(255,255,255,0.3)); background-size: 10px 10px;background-repeat: repeat; z-index: 0; }
.joinus .inbox-n {padding: 60px 100px; position: relative; z-index: 1;}
.joinus .inbox-n h2 {margin-bottom: 80px; position: relative; z-index: 3; color: #fff;}
.joinus .inbox-n h3 {color: #fff;}
.joinus .inbox-n p {color: #fff; margin-bottom: 80px;}
.joinus .inbox-n .under-text { position: absolute; top:-30px; left:-260px; z-index: 2;}
.joinus .inbox-n .under-text p {font-size: 13rem; font-family: 'Roboto'; font-weight: 100; letter-spacing: 0.3em; line-height: 14rem; text-align: center; color: rgba(230, 241, 255, 0.2); }
.joinus .inbox-n img { width: 450px; position: absolute; bottom: -150px; right:-30px; }
@media only screen and (max-width: 1280px) {
  .joinus .inbox-n .under-text { left:-20px;}
  .joinus .inbox-n img { width: 400px; bottom: -200px;}
}
@media only screen and (max-width: 768px) {
  .joinus .inbox-n {padding: 20px 60px;}
  .joinus .inbox-n .under-text { top:-30px; left:-30px;}
  .joinus .inbox-n .under-text p {font-size: 10rem;}
  .joinus .inbox-n img { width: 350px;}
}
@media only screen and (max-width: 720px) {
  .joinus { padding: 80px 0 220px;}
  .joinus::before {height: 50%; top:120px; }
  .joinus .inbox-n {padding: 20px 30px;}
  .joinus .inbox-n .under-text { top:-50px; left:-20px;}
  .joinus .inbox-n .under-text p {font-size: 14vw;}
  .joinus .inbox-n p {margin-bottom: 60px;}
  .joinus .inbox-n img { width: 75vw; position: absolute; bottom: -300px; right:10%; }
}


.unique-tool {position: relative; background: #fff; padding: 120px 0 80px;}
.unique-tool .inbox-n { position: relative; z-index: 1;}
.unique-tool .inbox-n .under-text { position: absolute; top:-20px; left:0; z-index: -1;}
.unique-tool .inbox-n .under-text p {font-size: 12.5rem; font-family: 'Roboto'; font-weight: 100; letter-spacing: 0.2em; line-height: 1em; text-align: center; color: rgba(230, 241, 255, 0.6); writing-mode: vertical-rl;}
.itembox {position: relative; z-index: 1;}
.itembox.right-bottom-bg::before {content: ''; width: 57%; height: 50%; position: absolute; bottom:100px; right: 0; background-color: #F2F2F2; background-image: repeating-linear-gradient(-45deg,#fff, #fff 6.9px,transparent 0, transparent 8.3px); z-index: -2;}
.itembox.left-center-bg::before {content: ''; width: 50%; height: 70%; position: absolute; top:120px; left: 0; background-color: #F2F2F2; background-image: repeating-linear-gradient(-45deg,rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 6.9px,transparent 0, transparent 8.3px); z-index: -1;}
.unique-tool .itembox .box-in {width: 1000px; margin: 0 auto; padding: 80px 0; display: flex; display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; -webkit-justify-content: space-around; position: relative; z-index: 1;}
.unique-tool .itembox .box-in .tx-in { width: 45%;}
.unique-tool .itembox .box-in img {display: inline-block; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.15));}
.unique-tool .itembox .box-in img:nth-child(odd) { margin-right: 90px;}
.unique-tool .itembox .box-in .tx-in h3 {line-height: 1.6em; margin-bottom: 30px;}
.unique-tool .itembox .box-in img { width: 40%;}
@media only screen and (max-width: 1040px) {
  .unique-tool .itembox .box-in {width: 80%; }
}
@media only screen and (max-width: 768px) {
  .unique-tool {padding: 120px 0 40px;}
  .unique-tool .inbox-n { padding: 60px 0 20px;}
  .unique-tool .inbox-n .under-text p {font-size: 12rem; letter-spacing: 0.1em;}
  .unique-tool .itembox .box-in {width: 95%; }
  .unique-tool .itembox .box-in img:nth-child(odd) { margin-right: 40px;}
}
@media only screen and (max-width: 720px) {
  .unique-tool {padding: 120px 0 50px;}
  .unique-tool .inbox-n { padding: 60px 0 0;}
  .unique-tool .inbox-n .under-text { top:40px;}
  .unique-tool .inbox-n .under-text p {font-size: 24vw;}
  .unique-tool .itembox .box-in {width: 90%; display: flex; padding: 50px 0;}
  .unique-tool .itembox .box-in .tx-in { width: 100%; margin-bottom: 30px; order: 1;}
  .unique-tool .itembox .box-in img:nth-child(odd) { margin-right: 0;}
  .unique-tool .itembox .box-in img { width: 90%; order: 2;}
  .unique-tool .itembox .box-in .tx-in h3 {line-height: 8vw;}
}


.joinus-sub {  position: relative; background: url('../images/join-sub_back_img.svg') 60% 20%/35% no-repeat ; background-color: #231F20; }
.joinus-sub .inbox-s { width: 900px; padding: 60px 0 120px; position: relative; z-index: 1;}
.joinus-sub .inbox-s h2 {color: #fff; margin-bottom: 40px; }
.joinus-sub .inbox-s h3 {color: #fff;}
.joinus-sub .inbox-s p { color:#fff; margin-bottom: 80px;}
.joinus-sub .inbox-s a.btn-arrow-anima {position: absolute; right:0; bottom: 60px; background: #fff; color:#231F20;}
@media only screen and (max-width: 1040px) {
  .joinus-sub .inbox-s { width: 70%;}
}
@media only screen and (max-width: 768px) {
  .joinus-sub .inbox-s { width: 80%;}
  .joinus-sub .inbox-s a.btn-arrow-anima {right:auto; left:0; }
}


.until { position: relative; }
.until .inbox-n {position: relative; z-index: 1; padding: 150px 0 120px;}
.until .inbox-n .under-text { position: absolute; top:100px; left:0; z-index: -1;}
.until .inbox-n .under-text p {font-size: 13rem; font-family: 'Roboto'; font-weight: 100; letter-spacing: 0.3em; line-height: 14rem; text-align: center; color: rgba(230, 241, 255, 0.6); }
.until .inbox-n table {width: 100%; margin-top: 60px;}
.until .inbox-n table th {position: relative; vertical-align: middle; width: 20%; padding: 10px 0 0;border-right: 2px solid #E6E6E6;font-size: 2rem; font-weight: bold; line-height: 3.6rem;}
.until .inbox-n table th::before{content: ''; position: absolute; top: 50%; right: -80px; width: 80px; height: 1px; border-bottom: #E6E6E6 dashed 1px; }
.until .inbox-n table th::after{content: ''; position: absolute; top: calc(50% - 10px); right: -10px; background: #fff; border-radius: 50%; width: 20px; height: 20px; border: #E6E6E6 solid 2px; z-index: 2;}
.until .inbox-n table th span { position: absolute; top:calc(50% - 60px); right: -100px; font-size: 3rem; font-weight: bold; background: linear-gradient(98.51deg, rgba(0, 255, 255, 0.7) 0%, rgba(0, 113, 188, 0.7) 42.19%, rgba(158, 0, 93, 0.7) 100%); background: -webkit-linear-gradient(-10deg, rgba(0, 255, 255, 0.7) 0%, rgba(0, 113, 188, 0.7) 42.19%, rgba(158, 0, 93, 0.7) 100%);-webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.until .inbox-n table th span.bottom {top:calc(50% - 50px);}
.until .inbox-n table td {display: block; width: 80%; padding: 5px 0 5px 200px; font-size: 1.6rem; position: relative;}
.until .inbox-n table td.title {padding: 30px 0 20px 200px; font-weight: bold;}
.until .inbox-n table td.bottom { padding-bottom: 30px;}
.until .inbox-n table td.last {padding: 10px 40px 20px;}
@media only screen and (max-width: 768px) {
  .until .inbox-n {padding: 120px 0 120px;}
  .until .inbox-n .under-text { top:70px; }
  .until .inbox-n .under-text p {font-size: 12rem; letter-spacing: 0.2em; }
  .until .inbox-n table th {width: 22%;}
  .until .inbox-n table th span {right: -80px; }
  .until .inbox-n table td {width: 78%; padding: 5px 0 5px 120px; }
  .until .inbox-n table td.title {padding: 30px 0 20px 120px; }
}
@media only screen and (max-width: 720px) {
  .until .inbox-n {padding: 120px 0 80px;}
  .until .inbox-n .under-text {top:50px;}
  .until .inbox-n .under-text p {font-size: 16vw; letter-spacing: 0.2em;}
  .until .inbox-n table {margin-top: 40px;}
  .until .inbox-n table th {width: 24%; font-size: 3.2vw; text-align: left; line-height: 2.6rem;vertical-align: top;}
  .until .inbox-n table th::before{top: 35px; right: -80px; width: 80px;}
  .until .inbox-n table th::after{top: 25px; right: -10px; }
  .until .inbox-n table th span {top: -5px; right: -60px; }
  .until .inbox-n table td {width: 76%;padding: 5px 0 5px 20px; font-size: 3.2vw;}
  .until .inbox-n table td.title {padding: 40px 0 10px 20px; }
  .until .inbox-n table td.bottom { padding-bottom: 50px;}
}


.community { width: 100%; background: linear-gradient(98.51deg, rgba(0, 255, 255, 0.7) 0%, rgba(0, 113, 188, 0.7) 42.19%, rgba(158, 0, 93, 0.7) 100%); position: relative;}
.community .inbox-n {width: 950px; position: relative; z-index: 2; }
.community .inbox-n h2 {color: #fff; margin-bottom: 30px;}
.community .inbox-n p {color: #fff;}
.community .inbox-n .icon-box { width: 250px; position: absolute; top: 43%; right:0; display: flex; display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; -webkit-justify-content: space-around; }
@media only screen and (max-width: 1040px) {
  .community .inbox-n {width: 80%; }
}
@media only screen and (max-width: 720px) {
  .community .inbox-n { padding: 60px 0 120px;}
  .community .inbox-n .icon-box { width: 100%; top: auto; bottom: 50px; left:auto; right:auto; }
}




/*low page_ _20220207*/
.low-title { padding: 200px 0 95px; background: linear-gradient(98.51deg, rgba(0, 255, 255, 0.7) 0%, rgba(0, 113, 188, 0.7) 42.19%, rgba(158, 0, 93, 0.7) 100%);
}
.low-title h2 { font-size: 4.2rem; color: #fff; text-align: center; }
@media only screen and (max-width: 768px) {
  .low-title { padding: 130px 0 70px; }
  .low-title h2 { font-size: 3.4rem; }
}
@media only screen and (max-width: 720px) {
  .low-title { padding: 130px 0 50px; }
  .low-title h2 { font-size: 7.2vw; }
}


/* Vision */
.vision-col h2 { text-align: center; margin: 120px auto; width: 80%; }
.vision-col .bg-earth::before { content: ' '; position: absolute; top: -150px; left:-450px;  background: url('../images/vision_earth_bg.svg') 0 0/contain no-repeat; width: 100%; height: 700px; }
.vision-col .bg-tree::before { content: ' '; position: absolute; top: 100px; left:0;  background: url('../images/vision_tree_bg.svg') 50% 0/800px no-repeat; width: 100%; height: 600px; }
.vision-col .bg-air::before { content: ' '; position: absolute; top: 50px; right:-250px; background: url('../images/vision_air_bg.svg') 100% 0/600px no-repeat; width: 100%; height: 600px; }
.vision-col .inbox-n.bg-network { background: ;}
.vision-col .inbox-n img.earth-img { width: 45%; position: absolute; top: 0; right: 0; }
.vision-col .inbox-n img.tree-img-left { width: 35%; position: absolute; bottom: 50px; left: -150px; }
.vision-col .inbox-n img.tree-img-right { width: 28%; position: absolute; bottom: 50px; right: -100px;}
.vision-col .inbox-n img.air-img { width: 40%; position: absolute; top: 60px; left: -30px; }
.vision-col .inbox-n .tx-left-box { width: 60%; margin-right: 4%; display: inline-block;}
.vision-col .inbox-n .tx-center-box { width: 60%; margin: 0 auto 100px;}
.vision-col .inbox-n .tx-center-box h3 { text-align: center;}
.vision-col .inbox-n .tx-center-box p { text-align: center;}
.vision-col .inbox-n .tx-right-box { width: 54%; margin-left: 46%;display: inline-block; }
.vision-col .inbox-n h3 { margin-bottom: 60px; line-height: 3.8rem;}
.vision-col-under h2 { text-align: center; margin: 120px auto; width: 80%;}
.vision-col-under .bg-network::before { content: ' '; position: absolute; top: -130px; left:-280px;  background: url('../images/vision_network_bg.svg') 0 0/600px no-repeat; width: 100%; height: 600px; }
.vision-col-under .inbox-n .tx-left-box { width: 60%; margin-bottom: 150px;}
.vision-col-under .inbox-n img {width: 41%; position: absolute; top: 30px; right:0;}
@media only screen and (max-width: 1280px) {
  .vision-col .inbox-n img.tree-img-left { bottom: 100px; }
  .vision-col .inbox-n img.tree-img-right { bottom: 100px;}
  .vision-col .inbox-n img.air-img { top: 150px; left: -30px; }
}
@media only screen and (max-width: 768px) {
  .vision-col h2 { margin: 100px 0 60px; width: 100%;}
  .vision-col .bg-earth::before {left:-350px;}
  .vision-col .bg-tree::before { background: url('../images/vision_tree_bg.svg') 40% 0/contain no-repeat; }
  .vision-col .inbox-n img.earth-img { width: 55%; top: 50px; right: -100px;}
  .vision-col .inbox-n img.tree-img-left { width: 43%; bottom: 100px; left: -150px; }
  .vision-col .inbox-n img.tree-img-right { width: 35%; bottom: 50px; right: -120px;}
  .vision-col .inbox-n img.air-img { width: 48%; top: 160px; left: -50px; }
  .vision-col .inbox-n .tx-center-box { padding-bottom: 10px; margin: 0 auto 0;}
  .vision-col-under h2 { margin: 100px 0 60px; }
  .vision-col-under .inbox-n .tx-left-box { width: 60%; margin-bottom: 60px;}
  .vision-col-under .inbox-n img {width: 45%; position: absolute; top: 30px; right:-60px;}
}
@media only screen and (max-width: 720px) {
  .vision-col h2 {margin: 80px 0 10px;}
  .vision-col .bg-earth::before {background: none;}
  .vision-col .bg-earth {height: 700px;}
  .vision-col .bg-tree::before {background: none;}
  .vision-col .bg-tree {height: 800px;}
  .vision-col .bg-air::before {background: none;right:0;}
  .vision-col .bg-air {height: 800px;}
  .vision-col .inbox-n h3 {margin-bottom: 40px;}
  .vision-col .inbox-n p {font-size: 3.7vw;}
  .vision-col .inbox-n img.earth-img { width: 80%; top: auto; bottom:20px; left:0; right: 0; margin: auto;}
  .vision-col .inbox-n img.tree-img-left { width: 55%; bottom: 20px; left: 0; }
  .vision-col .inbox-n img.tree-img-right { width: 45%; bottom: 20px; right: 0; }
  .vision-col .inbox-n img.air-img { width: 70%; top: auto; bottom: 0; left: 0; right:0; margin: auto; }
  .vision-col .inbox-n .tx-left-box {width: 90%; margin-right: 0;}
  .vision-col .inbox-n .tx-center-box { width: 100%; }
  .vision-col .inbox-n .tx-right-box { width: 100%; margin-left: 0;}
  .vision-col-under h2 {margin: 80px 0 0;}
  .vision-col-under .inbox-n .tx-left-box { width: 100%; }
  .vision-col-under .bg-network::before { background: none;}
  .vision-col-under .bg-network {height: 800px;}
  .vision-col-under .inbox-n img.network-img { width: 80%; top: auto; bottom: 60px; left: 0; right:0; margin: auto; }
}




/* Collaboration */
.coop-col .inbox-n { padding: 100px 0;}
.coop-col .inbox-n p {text-align: center; margin-bottom: 20px;}
.coop-col .inbox-n img { width: 350px; margin: 100px auto 50px; }
.coop-col .inbox-n a { color: #fff; display: block; width: 200px; margin: 50px auto 0;}
.coop-col .inbox-n a.funclink { width: 250px;}
@media only screen and (max-width: 720px) {
  .coop-col .inbox-n { padding: 60px 0;}
  .coop-col .inbox-n img { width: 80%; }
}




/* Contact */
.ct-col-top .inbox-n { padding: 100px 0;}
.ct-col-top .inbox-n h3{ text-align: center; }
.ct-col-top .inbox-n p{ margin: 50px 0 30px; text-align: center;}
.ct-col-top .inbox-n .sns-box{ width: 100%; margin: 0 auto; display: flex; display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; -webkit-justify-content: space-around;}
.ct-col-top .inbox-n .sns-box a {width: 250px; text-align: center;padding: 10px 30px 10px 50px;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);border-radius: 30px;color:#231F20;}
.ct-col-top .inbox-n .sns-box a.telegram-icon { background: url('../images/ct-col-telegram-icon.svg') 28% 50%/30px no-repeat;}
.ct-col-top .inbox-n .sns-box a.twitter-icon { background: url('../images/ct-col-twitter-icon.svg') 28% 50%/30px no-repeat;}
.ct-col-top .inbox-n .sns-box a.github-icon { background: url('../images/ct-col-github-icon.svg') 28% 50%/30px no-repeat;}
.ct-col-center { background: #231F20; box-sizing: border-box;}
.ct-col-center .inbox-n { display: flex; flex-wrap: wrap;}
.ct-col-center .inbox-n .col { display: inline-block; width: 50%; border-right: 1px solid rgba(255, 255, 255, 0.3); box-sizing: border-box;}
.ct-col-center .inbox-n .col:nth-child(2) {border-right: none;}
.ct-col-center .inbox-n .col h3{ color: #fff; margin-bottom: 50px; text-align: center;}
.ct-col-center .inbox-n .col a{ display: block; color: #fff; text-align: center;}
.ct-col-under .inbox-n { padding: 100px 0;}
.ct-col-under .inbox-n h3 { text-align: center; margin-bottom: 60px;}
.ct-col-under .inbox-n a {color: #fff; display: block; width: 200px; margin: 0 auto;}
@media only screen and (max-width: 768px) {
  .ct-col-top .inbox-n .sns-box a {width: 200px; }
}
@media only screen and (max-width: 720px) {
  .ct-col-top .inbox-n { padding: 60px 0 40px;}
  .ct-col-top .inbox-n .sns-box a {width: 70%; margin-bottom: 40px; }
  .ct-col-center .inbox-n .col { display: block; width: 80%; margin: 0 auto 40px; padding: 0 0 40px ; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); box-sizing: border-box;}
  .ct-col-center .inbox-n .col:nth-child(2) {border-bottom: none; padding: 0; margin: 0 auto;}
  .ct-col-center .inbox-n .col h3{ margin-bottom: 20px;}
  .ct-col-under .inbox-n { padding: 60px 0;}
}




/* Privacy Policy */
.pl-col h3 { font-size: 1.6rem; margin: 30px 0 0;}
.pl-col p { margin-bottom: 60px;}
@media only screen and (max-width: 720px) {
  .pl-col h3 { margin: 10px 0;}
  .pl-col p { margin-bottom: 50px;}
}




/* function */
.function-col .inbox-n { padding: 50px 0;}
.function-col .inbox-n:first-child { padding: 100px 0 30px;}
.function-col .inbox-n:nth-child(2) { padding: 30px 0 0;}
@media only screen and (max-width: 768px) {
  .function-col .inbox-n { padding: 30px 0;}
  .function-col .inbox-n:first-child { padding: 80px 0 30px;}
  .function-col .inbox-n:nth-child(2) { padding: 20px 0 0;}
}
@media only screen and (max-width: 720px) {
  .function-col .inbox-n { padding: 20px 0;}
  .function-col .inbox-n:first-child { padding: 60px 0 10px;}
}