@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Sulphur+Point:wght@300;400&display=swap');

/* Common Base */
html {margin: 0;padding: 0;height: 100%;font-size: 62.5%; box-sizing: border-box;}
body {position: relative;font-family: 'Sulphur Point', 'Noto Sans JP', sans-serif;font-size: 1.6rem;line-height: 1.0em;letter-spacing: 0em;color: #1F1F1F;background: #ffffff;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.6em;letter-spacing: 0em;font-weight: 400;font-feature-settings : "palt";margin: 0;padding: 0; color:#1F1F1F;}
li {list-style-type: none;list-style-position: outside;}
table {border-collapse: collapse;}
img {vertical-align: top; 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; cursor: pointer;}
a:hover,a:visited {text-decoration: none;color: #1F1F1F;}
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;}
*, *:before, *:after {-webkit-box-sizing: border-box;box-sizing: inherit;}



/* 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;}



/* Common Parts */
.pcnone {display: none;}.tbnone {display: block;}.spnone {display: block;}.pctbnone {display: none;}.tbspnone {display: block;}.pcspnone {display: none;}
.content {width: 100%;max-width: 1920px; min-height: 100vh; display: block; padding: 0 0 0 90px; margin: 0 auto; position: relative; background: var(--cl-wh-01); overflow: hidden; transition: all 0.5; transition-delay: 0.5; visibility: hidden;}
section {width: 100%; padding: 0; margin: 0; display: block; z-index: 1;}
.inbox-l {width: 92%; max-width: 1400px; padding: 80px 20px; margin: 0 auto; display: block; position: relative;}
.inbox-n {width: 82%; max-width: 1200px; padding: 80px 20px; margin: 0 auto; display: block; position: relative;}
.inbox-s {width: 72%; max-width: 1100px; padding: 80px 20px; margin: 0 auto; display: block; position: relative;}
h2 {font-size: 9.6rem; line-height: 13rem; font-weight: bold; width: fit-content;}
h3 {font-size: 4rem; line-height: 6rem; font-weight: normal; width: fit-content; font-family: 'Sulphur Point';}
p { font-size: 2rem; line-height: 4rem; font-family: 'Noto Sans JP', sans-serif;}
p.lg {font-size: 1.8rem; line-height: 3.6rem;}
p.sm {font-size: 1.4rem; line-height: 2.8rem;}
.fgrd {background: var(--color-gradation-01); background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent; text-align: center; font-family: 'Comfortaa';}
.back_canv {width: 100%; height: 100vh; display: block; position: fixed; top:0;left:0;}
canvas {width: 100%;height: 100%;}
@media only screen and (max-width: 1024px) {
  .pcnone {display: none;} .tbnone {display: block;} .spnone {display: block;} .pctbnone {display: none;} .tbspnone {display: block;} .pcspnone {display: none;}
  .inbox-l {padding: 50px 0;}
  .inbox-n {padding: 50px 0;}
  .inbox-s {padding: 50px 0;}
  h2 {font-size: 7rem; line-height: 8.6rem;}
}
@media only screen and (max-width: 768px) {
  .content {padding: 0; }
  .pcnone {display: block;} .tbnone {display: none;} .spnone {display: block;} .pctbnone {display: none;} .tbspnone {display: none;} .pcspnone {display: block;}
  .inbox-l {width: 90%;}
  .inbox-n {width: 80%;}
  .inbox-s {width: 70%;}
  h2 {font-size: 6rem; line-height: 8rem;}
  h3 {font-size: 3.6rem; line-height: 6rem;}
}
@media only screen and (max-width: 420px) {
  .pcnone {display: block;} .tbnone {display: block;} .spnone {display: none;} .pctbnone {display: block;} .tbspnone {display: none;} .pcspnone {display: none;}
  h2 {font-size: 4rem; line-height: 6rem;}
  h3 {font-size: 7vw; line-height: 5.2rem;}
}



/* color library */
:root { --cl-bc-01:#1F1F1F;  --cl-wh-01:#ffffff;  --cl-rd-01: #ff0000;  --cl-bl-01: #0400BC;  --cl-bl-02: #4844FF;  --cl-bl-03: #8583E9;  --color-gradation-01: linear-gradient(90deg, #8583E9 0%, #4844FF 49.48%, #0400BC 100%); --color-gradation-02: linear-gradient(90deg, rgba(194, 226, 255, 0.40) 0%, rgba(146, 209, 255, 0.40) 48.44%, rgba(27, 114, 243, 0.40) 100%);}



/* Common Button & input & select */
.btn-wrap {display:-webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;display: flex;justify-content: space-between; }
.btn-df01-lg {width: fit-content; font-size: 1.8rem; min-width: 250px; padding: 15px 30px; border-radius: 50px; color: var(--cl-wh-01); text-align: center; position: relative; display: inline-block; border: 1px solid var(--cl-wh-01); -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all  0.5s ease;}
.btn-df01-lg:hover {background: var(--cl-wh-01); color: var(--cl-bl-02);}
.btn-df01-lg:visited {color: var(--cl-wh-01) !important;}
.btn-df01-lg:visited:hover {color: var(--cl-bl-02);}
.btn-df02-lg {width: fit-content; font-size: 1.8rem; line-height: 100%; min-width: 250px; padding: 15px 30px; border-radius: 50px; color: var(--cl-bl-02); text-align: center; position: relative; display: inline-block; border: 1px solid var(--cl-bl-02); -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all  0.5s ease;}
.btn-df02-lg:hover {background: var(--cl-bl-02); color: var(--cl-wh-01);}
.btn-df02-lg:visited {color: var(--cl-bl-02) !important;}
.btn-df02-lg:visited:hover {color: var(--cl-wh-01);}
.next-link { width: 80px; height: 80px; background: url("../images/icon/next-link-df.svg") 50% 50%/70px no-repeat;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all  0.5s ease;}
.next-link:hover { width: 80px; height: 80px; background: url("../images/icon/next-link-df-hover.svg") 50% 50%/80px no-repeat;}




@media only screen and (max-width: 1024px) {
  
}
@media only screen and (max-width: 768px) {
  
}
@media only screen and (max-width: 420px) {

}


/* loading parts */
.loading {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: #ffffff;z-index: 999;display: flex; align-items: center; justify-content: center;}
.loading-in {width: 15vw; height: 15vw; position: relative;display: flex; align-items: center; justify-content: center;}
.loading-in img {width: 7vw;margin: 0 auto;}
.loading-in span {position: absolute;border: 2px solid #6A7CB5;width: 100%;height: 100%;animation: animate 5s linear infinite;}
@keyframes animate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
.loading-in span:nth-child(1) {border-radius: 30% 70% 45% 55% / 63% 30% 70% 37% ;}
.loading-in span:nth-child(2) {animation-direction: reverse;border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ;}
.loading-in span:nth-child(3) {animation-delay: 0.5s;border-radius: 30% 70% 22% 78% / 42% 29% 71% 58% ;}
.loaded {opacity: 0; transition: all 0.5s; display: none;}
@media only screen and (max-width: 1024px) {
  .loading-in {width: 25vw; height: 25vw;}
  .loading-in img {width: 15vw;}
}
@media only screen and (max-width: 420px) {
  .loading-in {width: 45vw; height: 45vw;}
  .loading-in img {width: 23vw;}
}






/* g-nav parts */
#nav-area {width: 90px; padding: 0 30px; display: -webkit-flex;display: flex;-webkit-justify-content: space-around;justify-content: space-around;-webkit-align-items: flex-start;align-items: flex-start;-webkit-flex-direction: column;flex-direction: column;position: fixed; top:0; left: 0; z-index: 100; height: 100vh;}
#nav-logo {width: 50px; display: block; margin-left: -10px; }
#nav-logo img {width: 50px; }
#g-nav { display: block; margin-bottom: 10vh;}
.left-nav ul li { margin-bottom: 30px;writing-mode: vertical-lr;-webkit-writing-mode: vertical-lr;text-orientation: sideways;}
.left-nav ul li a:link {font-size: 1.8rem; text-decoration: none;}
.left-nav ul li a:link.active {position: relative;}
.left-nav ul li a:link.active::before {content: '';position: absolute;top: 50%;bottom: 0;height: 0;transform: translateY(-50%);border-left: solid 3px #4169e1;animation: border_anim 1s linear forwards;}
@keyframes border_anim {
  0%{height: 0%;}
  100%{height: 100%;}
}
.contactbtn{position: fixed;top:30px;right:30px;z-index: 100;}
.contactbtn a:link.ctbtnlink {font-size: 1.8rem;color: #ffffff;display: block;width: 90px;height: 90px;padding: 30px 13px;border-radius: 90px;background: #372763;}
.contactbtn a:hover {opacity: 0.9;_filter: alpha(opacity=90);}
@media only screen and (max-width: 768px) {
  #nav-area {width: 100%; padding: 0; display: block; position: relative; position: fixed; top:0; left: 0; z-index: 100; height: 80px; background-color: #ffffff;}
  #nav-logo {width:60px ; margin: 10px; }
  #nav-logo img {width: 60px; }
  #g-nav {display: none;} 
  .contactbtn{top:10px;right:10px;}
  .contactbtn a:link.ctbtnlink {font-size: 1.4rem;width: 60px;height: 60px;padding: 18px 5px;border-radius: 60px;}
}
@media only screen and (max-width: 420px) {
  #nav-area {height: 60px;}
  #nav-logo {width:50px ; margin: 10px; }
  #nav-logo img {width: 50px; }
  .contactbtn{top:7px;right:10px;}
  .contactbtn a:link.ctbtnlink {font-size: 1.1rem;width: 50px;height: 50px;padding: 17px 5px;border-radius: 60px;}
}



/* Footer parts */
footer {width: 100%; display: block;}
.footer{width: 100%; padding: 0 0 0 90px; position: relative;}
.footer .inbox-l {width: 100%; padding: 50px; position: relative;}
.footer .inbox-l .copytxt { font-size: 1.2rem; color: #000; text-align: right;}
.footer .inbox-l .copytxt .prlink{ margin-right: 20px; text-decoration: underline;}
@media only screen and (max-width: 420px) {
  .footer{width: 100%; padding: 0; position: relative;}
}



/* Front page */
.main-wrap {width: 100%; display: block; }
.main-wrap .inbox-l .lgwrap { width: 60%; padding-top: 50px; margin: 0 auto; }
.main-wrap .inbox-l .lgwrap img {margin-bottom: 80px;}
.main-wrap .inbox-l .lgwrap img.sm {width: 75%;}
@media only screen and (max-width: 1024px) {
  .main-wrap .inbox-l .lgwrap { width: 50%; padding-top: 50px; }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 420px) {
  .main-wrap .inbox-l {padding: 50px 0;}
  .main-wrap .inbox-l .lgwrap { width: 60%;}
  .main-wrap .inbox-l .lgwrap img {margin-bottom: 50px;}
  .main-wrap .inbox-l .lgwrap img:last-child {margin-bottom: 0;}
}


#tp-about {width: 100%; background-color: #fff; overflow: hidden;}
#tp-about span.cl-one {font-family: 'Sulphur Point'; color: #6A7CB5;font-size: 10vw; line-height: 12vw; font-weight: bold; display: inline-block;}
#tp-about span.cl-two {font-family: 'Sulphur Point'; color: #372763;font-size: 10vw; line-height: 12vw; font-weight: bold; display: inline-block;}
.about-vison {position: relative; padding: 20vh 0 15vh;}
.about-vison .vs-title {position: absolute; top: 15vh; right: 20vw;}
.about-vison p.second {margin-left: 5vw;}
.about-vison .tx-box {margin: 10vh 0 0 12vw;}
.about-vison .tx-box p {font-size: 1.3vw; line-height: 3vw;}
.about-vison .tx-box-sub {position: absolute; top: 60vh; right: 0;}
.about-vison .tx-box-sub p {font-family: 'Sulphur Point'; font-size: 1.8rem; line-height: 3rem; color: #6A7CB5; text-align: right;}
.about-vison .mis-title {position: absolute; top: 15vh; left: 10%;}
.about-vison p.misp {margin-left: 10%;}
.about-vison .mis-tx-box { position: absolute; top:26vh; right: 6vw;}
.about-vison .mis-tx-box p {font-size: 1.3vw; line-height: 3vw; margin-left: 0;}
.about-vison .misp.tp { position: absolute; top: 22vh;}
.about-vison .misp.mdl { position: absolute; top: 42vh;}
.about-vison .misp.btm { position: absolute; top: 62vh;}
.about-vison .cp-title {position: absolute; top: 13vh; right: 8vw;}
.about-vison img.cp-img {width: 30vw; position: absolute; top: 28vh; right: -10vw; transform: rotate(30deg);}
.about-vison table {position: absolute; top: 23vh; left: 10vw; width: 40vw;}
.about-vison table th, td { display: inline-block; padding: 30px 0 30px; }
.about-vison table th{ text-align: left; width: 12vw; border-bottom: 1px solid #bbbbbb;}
.about-vison table td{ display: inline-block; color: #000; width: 27vw; border-bottom: 1px solid #bbbbbb;}

@media only screen and (max-width: 1024px) {
  .about-vison { padding: 10vh 0 10vh;}
  .about-vison .vs-title {top: 20vh; }
  .about-vison p.first {position: absolute; top: 30vh; }
  .about-vison p.second {position: absolute; top: 43vh; left: 5vw;}
  .about-vison .tx-box {position: absolute; top: 60vh; left: 10vw; margin: 0;}
  .about-vison .tx-box p {font-size: 1.8rem; line-height: 4rem;}
  .about-vison .tx-box-sub {position: absolute; top: 52vh; right: 0;}
  .about-vison .mis-title {top: 20vh; left: 10%;}
  .about-vison .misp.tp { top: 28vh;}
  .about-vison .misp.mdl { top: 36vh;}
  .about-vison .misp.btm { top: 44vh;}
  .about-vison .mis-tx-box { top:55vh; right: 3vw;}
  .about-vison .mis-tx-box p {font-size: 1.8rem; line-height: 4rem;}
  .about-vison .cp-title {top: 20vh; right: 8vw;}
  .about-vison img.cp-img {top: 35vh; right: -10vw;}
  .about-vison table {top: 30vh; left: 10vw; width: 40vw;}
}
@media only screen and (max-width: 768px) {
  .about-vison .tx-box {margin: 5vh 0 0 8vw;}
  .about-vison img.cp-img {width: 40vw;}
  .about-vison table {width: 50vw;}
  .about-vison table th{ width: 15vw; }
  .about-vison table td{ width: 30vw; border-bottom: 1px solid #bbbbbb;}
}
@media only screen and (max-width: 420px) {
  #tp-about {display: none;}
  #tp-about span.cl-one {font-size: 20vw; line-height: 25vw;}
  #tp-about span.cl-two {font-size: 20vw; line-height: 25vw;}
  .about-vison {padding: 60px 0 30px;}
  .about-vison .vs-title {top: 10vh; right: 60px;}
  .about-vison p.first {top: 16vh; }
  .about-vison p.first .cl-two {padding-left: 70px;}
  .about-vison p.second {top: 43vh; left: 5vw;}
  .about-vison .mis-title {margin-bottom: 10px;}
  .about-vison p.second {margin-left: 10px;}
  .about-vison .tx-box {margin: 130px 0 0 0;}
  .about-vison .tx-box p {font-size: 4.5vw; line-height: 4rem;}
  .about-vison .tx-box-sub {bottom: 30vh; right: 0;} 
  .about-vison .mis-tx-box { position: relative; top:auto; right: auto; margin-top: 10px;}
  .about-vison img.cp-img {width: 60vw; top: 120px; right: -10vw;}
  .about-vison table {width: 100%; margin: 300px 0 0 0;}
  .about-vison table th{ width: 30%; }
  .about-vison table td{ width: 69%;}
}




#sp-tp-about {width: 100%; background-color: #fff;}
#sp-tp-about span.cl-one {font-family: 'Sulphur Point'; color: #6A7CB5;font-size: 10vw; line-height: 12vw; font-weight: bold; display: inline-block;}
#sp-tp-about span.cl-two {font-family: 'Sulphur Point'; color: #372763;font-size: 10vw; line-height: 12vw; font-weight: bold; display: inline-block;}
.sp-about-vison {position: relative; padding: 20vh 0 15vh;}
.sp-about-vison .tp-title {position: absolute; top: 15vh; right: 20vw;}
.sp-about-vison p.second {margin-left: 5vw;}
.sp-about-vison .tx-box {margin: 10vh 0 0 12vw;}
.sp-about-vison .tx-box p {font-size: 1.3vw; line-height: 3vw;}
.sp-about-vison .tx-box-sub {position: absolute; bottom: 30vh; right: 0;}
.sp-about-vison .tx-box-sub p {font-family: 'Sulphur Point'; font-size: 1.8rem; line-height: 3rem; color: #6A7CB5; text-align: right;}
@media only screen and (max-width: 1024px) {
  .sp-about-vison {padding: 10vh 0 10vh;}
  .sp-about-vison .tp-title {top: 5vh; }
  .sp-about-vison .tx-box {margin: 5vh 0 0 12vw;}
  .sp-about-vison .tx-box p {font-size: 1.8rem; line-height: 4rem;}
  .sp-about-vison .tx-box-sub {position: absolute; bottom: 17vh; right: 0;}
}
@media only screen and (max-width: 768px) {
  .sp-about-vison .tx-box {margin: 5vh 0 0 8vw;}
}
@media only screen and (max-width: 420px) {
  #sp-tp-about span.cl-one {font-size: 20vw; line-height: 25vw;}
  #sp-tp-about span.cl-two {font-size: 20vw; line-height: 25vw;}
  .sp-about-vison {padding: 60px 0 30px;}
  .sp-about-vison .first .cl-two {padding-left: 70px;}
  .sp-about-vison .tp-title {top: 20px; right: 60px;}
  .sp-about-vison p.second {margin-left: 10px;}
  .sp-about-vison .tx-box {margin: 130px 0 0 0;}
  .sp-about-vison .tx-box p {font-size: 4.5vw; line-height: 4rem;}
  .sp-about-vison .tx-box-sub {bottom: 30vh; right: 0;} 
}


.sp-about-mission {position: relative; padding: 20vh 0 15vh;}
.sp-about-mission .tp-title {margin-left: 10%; margin-bottom: 3vh;}
.sp-about-mission p {margin-left: 10%;}
.sp-about-mission .tx-box { position: absolute; top:35vh; right: 6vw;}
.sp-about-mission .tx-box p {font-size: 1.3vw; line-height: 3vw; margin-left: 0;}
@media only screen and (max-width: 1024px) {
  .sp-about-mission {padding: 10vh 0;}
  .sp-about-mission .tx-box { top:16vh; right: 3vw;}
  .sp-about-mission .tx-box p {font-size: 1.8rem; line-height: 4rem;}
}
@media only screen and (max-width: 768px) {
  .sp-about-mission .tp-title {margin-left: 3%; margin-bottom: 12vh;}
  .sp-about-mission p {margin-left: 3%;}
  .sp-about-mission .tx-box { top:18vh; right: 0;}
}
@media only screen and (max-width: 420px) {
  .sp-about-mission {padding: 60px 0 30px;}
  .sp-about-mission .tp-title {margin-bottom: 10px;}
  .sp-about-mission .tx-box { position: relative; top:auto; right: auto; margin-top: 10px;}
}



.sp-about-company-pl {position: relative; padding: 20vh 0 15vh;}
.sp-about-company-pl::after {content: url('../images/company-logo.svg'); width: 30vw; position: absolute; top: 28vh; right: -10vw; transform: rotate(30deg);}
.sp-about-company-pl .tp-title {position: absolute; top: 13vh; right: 8vw;}
.sp-about-company-pl table {width: 40vw; margin: 5vh 0 0 10vw;}
.sp-about-company-pl table th, td { display: inline-block; padding: 30px 0 30px; }
.sp-about-company-pl table th{ text-align: left; width: 12vw; border-bottom: 1px solid #bbbbbb;}
.sp-about-company-pl table td{ display: inline-block; color: #000; width: 27vw; border-bottom: 1px solid #bbbbbb;}
@media only screen and (max-width: 1024px) {
  .sp-about-company-pl {padding: 10vh 0 10vh;}
  .sp-about-company-pl::after {width: 30vw; top: 22vh; right: -10vw;}
  .sp-about-company-pl .tp-title {position: absolute; top: 5vh; right: 8vw;}
}
@media only screen and (max-width: 768px) {
  .sp-about-company-pl::after {width: 40vw; top: 22vh; right: -10vw;}
  .sp-about-company-pl table {width: 50vw; margin: 5vh 0 0 5vw;}
  .sp-about-company-pl table th{ width: 15vw; }
  .sp-about-company-pl table td{ width: 30vw; border-bottom: 1px solid #bbbbbb;}
}
@media only screen and (max-width: 420px) {
  .sp-about-company-pl {padding: 60px 0 30px;}
  .sp-about-company-pl::after {width: 60vw; top: 120px; right: -10vw;}
  .sp-about-company-pl table {width: 100%; margin: 300px 0 0 0;}
  .sp-about-company-pl table th{ width: 30%; }
  .sp-about-company-pl table td{ width: 69%;}
}






#tp-service {width: 100%; }
#tp-service span.cl-one {font-family: 'Sulphur Point'; color: #6A7CB5;font-size: 8vw; line-height: 9vw; font-weight: bold; display: inline-block;}
#tp-service span.cl-two {font-family: 'Sulphur Point'; color: #372763;font-size: 8vw; line-height: 9vw; font-weight: bold; display: inline-block;}
.app-dev {position: relative; padding: 0 0 15vh;}
.app-dev img.sv-img{position: absolute; width: 50vw; top: 15vh; right: -10vw; z-index: 0;}
.block-dev img.sv-img {position: absolute; width: 50vw; top: 30vh; right: -10vw; z-index: 0;}
.dl-box {position: relative; width: 45vw; margin:0; z-index: 5;}
.dl-box .in table {width: 25vw; margin: 10vh 0 0 20vw;}
.dl-box .in table th,td {width: 100%; display: block; border: none;}
.dl-box .in table th {text-align: left; padding: 0 35px; position: relative;}
.dl-box .in table th::before {content: ''; width: 15px; height: 15px; background: #6A7CB5; position: absolute; top:4px; left: 0; }
.dl-box .in table td {text-align: left; padding: 10px 0; margin-bottom: 60px; color: #000;}
.app-dev .dl-box .in table tr:nth-child(2) td {margin-bottom: 0;}
.dl-box p.under {line-height: 2rem;}
.block-dev {position: relative; padding: 20vh 0 15vh;}
.block-dev .dl-box .in table tr:nth-child(3) td {margin-bottom: 0;}
@media only screen and (max-width: 1024px) {
  .app-dev {position: relative; padding: 0 0 5vh;}
  .app-dev img.sv-img{top: 13vh; right: -12vw;}
  .block-dev img.sv-img {top: 25vh; right: -12vw;}
  .dl-box .in table {width: 25vw; margin: 5vh 0 0 20vw;}
  .block-dev {position: relative; padding: 10vh 0 10vh;}
}
@media only screen and (max-width: 768px) {
  .app-dev img.sv-img{width: 50vw; top: 11vh; right: 0;}
  .block-dev img.sv-img {width: 50vw; top: 23vh; right: 0;}
  .dl-box .in table td {padding: 10px 0; margin-bottom: 30px;}
}
@media only screen and (max-width: 420px) {
  .app-dev {padding: 200px 0 0; margin-bottom: 50px;}
  .app-dev img.sv-img{width: 100vw; top: -7.5vh; right: 0;}
  .block-dev img.sv-img {width: 100vw; top: 7vh; right: 0;}
  #tp-service span.cl-one {font-size: 14vw; line-height: 16vw;}
  #tp-service span.cl-two {font-size: 14vw; line-height: 16vw;}
  .dl-box {width: 100%; margin:0;}
  .dl-box .in table {width: 100%; margin: 70px 0 0 0;}
  .app-dev .dl-box p.under {position: absolute; right: 0; top: 300px;}
  .dl-box p.under {position: absolute; right: 0; top: 370px;}
  .block-dev {padding: 350px 0 30px; margin-bottom: 50px;}
}





#tp-recruit {width: 100%; background-color: #fff;}
.primary {width: 100%; background: linear-gradient(90deg, #ffffff 50%, #372763 50%, #372763 100%); padding: 10vh 0 0 0;}
.recruit-col {position: relative;display: flex;justify-content: center;}
.recruit-col h3 {font-size: 12vw; position: absolute; left:48%;  writing-mode: vertical-lr;-webkit-writing-mode: vertical-lr;text-orientation: sideways;}
.recruit-col h3.one {color: #6A7CB5;}
.recruit-col h3.two {color: #372763;}
.ttl {display: inline-block; width: 50%; padding-top: 18vh;}
.ttl p {margin-bottom: 1vh;}
.ttl p span {font-family: 'Sulphur Point'; font-size: 4vw; line-height: 4.8vw; color: #372763;}
.recruit-col .tb-box {width: 50%; display: inline-block;}
.recruit-col .tb-box table {width: 70%; margin: 0 0 0 25%;}
.recruit-col .tb-box table th,td{ width: 100%; display: block; color: #ffffff;}
.recruit-col .tb-box table th { text-align: left;}
.recruit-col .tb-box table td { border-bottom: 1px solid #ffffff; margin-bottom: 40px;}
.recruit-col .tb-box table tr:last-child td {margin-bottom: 0; border-bottom: none;}
.secondary {width: 100%; background: linear-gradient(90deg, #ffffff 50%, #6A7CB5 50%, #6A7CB5 100%); padding: 10vh 0 0 0;}
@media only screen and (max-width: 1024px) {
  .primary {background: linear-gradient(90deg, #ffffff 40%, #372763 40%, #372763 100%); padding: 5vh 0 5vh 0;}
  .recruit-col h3 {font-size: 12vw; position: absolute; left:37%; top: 5vh;}
  .ttl {width: 40%; padding-top: 13vh;}
  .recruit-col .tb-box {width: 60%; display: inline-block;}
  .secondary {background: linear-gradient(90deg, #ffffff 40%, #6A7CB5 40%, #6A7CB5 100%); padding: 5vh 0 5vh 0;}
}
@media only screen and (max-width: 768px) {
  .primary { padding: 3vh 0 0 0;}
  .recruit-col h3 {left:35%; top: 15vh;}
  .ttl {width: 40%; padding-top: 20vh;}
  .recruit-col .tb-box table {width: 80%; margin: 0 0 0 18%;}
  .secondary {padding: 3vh 0 0 0;}
}
@media only screen and (max-width: 420px) {
  .primary { background: none; padding: 0;}
  .primary .inbox-l {width: 100%;}
  .recruit-col {position: relative;display: block;}
  .recruit-col h3 {font-size: 15vw; position: absolute; top: 190px; left:0; right: 0; margin: 0 auto; -webkit-writing-mode: horizontal-tb; text-orientation: upright;}
  .ttl {width: 100%; padding: 0 5vw 0; display: block;}
  .ttl p {margin-bottom: 0;}
  .ttl p span {font-size: 15vw; font-weight: bold; line-height: 17vw;}
  .recruit-col .tb-box {width: 100%; margin-top: 50px; background: #372763; display: block;}
  .recruit-col .tb-box table {width: 100%; display: block; margin: 0; padding: 50px 20px 20px;}
  .secondary {background: none; padding: 0;}
  .second-bg{background: #6A7CB5 !important;}
  .secondary .inbox-l {width: 100%;}
}


#tp-news {width: 100%; padding: 10vh 0 0 0;}
.tp-news-in {width: 80%; margin: 0 auto;}
.tp-news-in h3 {width: 100%; text-align: right; font-size: 5vw; color: #372763;}
.tp-news-in .tb-box { margin: 10vw 0;}
.tp-news-in .tb-box table { width: 100%;}
.tp-news-in .tb-box table th { width: 20%; padding: 40px 0; border-bottom: 1px solid #bbbbbb;}
.tp-news-in .tb-box table td { color: #000; padding: 40px 0; border-bottom: 1px solid #bbbbbb; position: relative;}
.tp-news-in .tb-box table td span { position: absolute; top: 40px; right: 0;}
@media only screen and (max-width: 1024px) {
  #tp-news {width: 100%; background-color: #fff; padding: 10vh 0 10vh 0;}
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 420px) {
  #tp-news {padding: 60px 0 30px 0;}
  .tp-news-in h3 {font-size: 20vw;}
  .tp-news-in {width: 100%; margin: 0 auto;}
  .tp-news-in .tb-box table th { width: 100%; text-align: left; display: block; padding: 30px 0 0; border-bottom: none;}
  .tp-news-in .tb-box table td { padding: 10px 0;}
  .tp-news-in .tb-box table td span { position: relative; display: block; top: auto; right: auto; margin: 10px 0;}
}


#tp-contact {width: 80%; background-color: #fff; padding-bottom: 20vh; margin: 0 auto;}
#tp-contact span.cl-one {font-family: 'Sulphur Point'; color: #6A7CB5;font-size: 12vw; line-height: 14vw; font-weight: bold; display: inline-block;}
#tp-contact span.cl-two {font-family: 'Sulphur Point'; color: #372763;font-size: 12vw; line-height: 14vw; font-weight: bold; display: inline-block;}
#tp-contact .inbox-l a:link.ct-link {display: inline-block; width: 150px; height: 150px; background: #6A7CB5;display: flex;align-items: center;
justify-content: center; position: absolute; bottom: 35vh; right:2%;}
#tp-contact .tx-box {width: calc( 100% - 30% ); margin-left: 30%; background: #372763; padding: 5vh 5vw;}
#tp-contact .tx-box p {color: #ffffff;}
@media only screen and (max-width: 1024px) {
  #tp-contact {width: 90%; padding-bottom: 10vh;}
  #tp-contact .inbox-l a:link.ct-link {bottom: 20vh; right:2%;}
  #tp-contact .tx-box {width: calc( 100% - 20% ); margin-left: 20%;padding: 3vh 3vw;}
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 420px) {
  #tp-contact span.cl-one {font-size: 22vw; line-height: 24vw;}
  #tp-contact span.cl-two {font-size: 22vw; line-height: 24vw;}
  #tp-contact .inbox-l a:link.ct-link {width: 80px; height: 80px; bottom: 200px; right:0;}
  #tp-contact .tx-box {width: 100%; margin-left: 0; margin-top: 20px; padding: 3vh 3vw;}
  #tp-contact .tx-box p {font-size: 1.6rem;}
}







/* low page title common */




/* Company-page  */




/* Contact-page  */
.contact-in .inbox-l { margin-bottom: 150px;}
.contact-in .inbox-l h3 { margin-bottom: 50px;}
.contact-in .inbox-l p { margin-bottom: 50px;}
.contact-in .inbox-l .tel-box { margin-bottom: 150px;}
.contact-in .inbox-l .tel-box a {font-size: 3.2rem; color: #005AE1; display: inline-block; width: fit-content; padding: 15px 50px; border-radius: 50px; background: var(--color-gradation-02);}
.contact-in .inbox-l .tel-box a img { width: 30px; display: inline-block; margin: 9px 20px 0 0;}
table.alpha tr {display: block; margin-bottom: 30px;}
table.alpha tr th {width: 25%; vertical-align: top; padding: 15px 0;display: inline-block; text-align: left;}
table.alpha tr td {width: 73%; max-width: 700px; display: inline-block;}
table.alpha tr td input.middle ,table.alpha tr td textarea{ width: 100%; padding: 10px 20px; background-color: var(--cl-wh-01); border-radius: 10px; border: 1px solid var(--cl-bl-02); line-height: 2.8rem;}
.error em {color: var(--cl-bl-02); font-style: normal; padding-top: 5px;}
table.alpha tr td.under { padding: 10px 0 10px 15px; margin-bottom: 20px; background: var(--cl-wh-01); border-radius: 10px; border: 1px solid var(--cl-bl-02); line-height: 2.8rem;}
.g-recaptcha { width: 306px; display: block; margin: 40px auto 10px;}
p#warning {font-size: 1.4rem; text-align: center; margin-top: -10px;}
p.agree {margin-bottom: 0 !important; text-align: center;}
p.agree a {border-bottom: 1px solid #616161; padding-bottom: 2px; }
p.agree + div.ct-btn-box {margin: 20px auto 0;}
.ct-btn-box {width: 600px; margin: 0 auto 0; display: flex;-webkit-justify-content: space-around;justify-content: space-around;}
.ct-btn-box input[type="submit"] {width: fit-content;display: block;}
.ct-fn-tx {width: fit-content; display: block; margin: 0 auto;}
.ct-fn-tx h3 {font-size: 2.6rem; width: 100%; text-align: center; margin-bottom: 20px; line-height: 3.8rem;}
.ct-fn-tx p {text-align: center;}
.ct-btn-box ul {width: 100%; display: flex;display: -webkit-flex; -webkit-justify-content: space-around; justify-content: space-around;}
.grecaptcha-badge {display: none !important;}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 768px) {
  .contact-in .inbox-l { margin-bottom: 100px;}
  .contact-in .inbox-l h3 { margin-bottom: 30px;}
  .contact-in .inbox-l p { margin-bottom: 30px;}
  .contact-in .inbox-l .tel-box { margin-bottom: 100px;}
  table.alpha tr th {width: 100%; padding-top: 10px; display: block; margin-bottom: 10px;}
  table.alpha tr td {width: 100%; display: block;}
  .ct-btn-box {width: 90%; margin: 50px auto 50px;}
  .ct-btn-box ul {width: 100%;display: block;}
  .ct-btn-box ul li { width: fit-content; margin: 0 auto 50px;}
  .ct-btn-box ul li:last-child { margin-bottom: 0; }
}
@media only screen and (max-width: 420px) {
  .contact-in .inbox-l .tel-box a {font-size: 2.4rem; line-height: 4.2rem;}
  .contact-in .inbox-l .tel-box a img { width: 30px; margin: 5px 20px 0 0;}
  table.alpha tr th {margin-bottom: 0;}
  .ct-btn-box {width: 100%; display: block;}
  .ct-btn-box ul {width: 100%;}
  .ct-btn-box form {display: block; width: fit-content; margin: 20px auto 0;}
  .center {display: block; margin: 0 auto;}
}