:root {
	font-size: 19px;
	--bg:#0b1220;
	--panel:#0f1a33;
	--card:#101f3f;
	--text:#eaf0ff;
	--muted:#b9c6e6;
	--mutedstrong:#d6def5;
	--line:rgba(255,255,255,.12);
	--brand:#6aa7ff;
	--brand2:#7cf0d6;
	--shadow:0 1.06rem 3.53rem rgba(0,0,0,.45);
	--radius:1.06rem;
	--max:65.88rem;
}

html[data-lang='ja'] .en, 
html[data-lang='en'] .ja {
	display: none;
}

:not(head) {
	position: relative;
	display: inline-block;
	box-sizing:border-box;
	/* float: left; */
	cursor: inherit;
	margin: 0;
	padding: 0;
}
html
,body {
	width: 100%;
}
html {
	height:100%;
	overflow:hidden;
	overflow-y: auto;
}
body {
	/* background:
	    radial-gradient(64.71rem 32.35rem at 15% 10%, rgba(106,167,255,.25), transparent 60%),
	    radial-gradient(52.94rem 30.59rem at 85% 20%, rgba(124,240,214,.18), transparent 60%),
	    radial-gradient(52.94rem 41.18rem at 50% 120%, rgba(106,167,255,.18), transparent 60%),
	    var(--bg); */
	/* padding-top:4rem; */
	font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color:var(--text);
	line-height:1.45;
	cursor: default;
}
.outer {
	height:100%;
	width: 100%;
}
a {
	color:inherit;
	text-decoration:none;
}
img {
	max-width:100%; 
	display:block;
}

#top {
	width: 100%;
	height: 100vh;
}
.container {
	float: none;
	display: block;
	max-width:var(--max);
	width: 100%;
	margin:0 auto;
	padding:0 1.3rem;
	/* overflow: hidden; */
}

.topbar {
	position:fixed;
	display: inline-block;
	max-width: 100vw;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	padding: 1.5rem 0;
	backdrop-filter: blur(.59rem);
	border-bottom: 1px solid transparent;
	animation: resizing 1ms linear;
	animation-timeline: scroll();
}

.nav{
	position:relative;
	width: 100%;
	display: inline-grid;
	grid-auto-flow: column;
	justify-content: space-between;
}
.nav:after{
	display:block;
	clear:both;
}

.brandmark{
  display:inline-block;
  float:left;
  position:relative;
  padding-top: 0.25rem;
  font-weight:700;
  letter-spacing:.012rem;
  cursor: pointer;
}
.logo {
	display:inline-block;
	height:2rem;
	aspect-ratio: 1;
	border-radius:.71rem;
	background: linear-gradient(135deg, rgba(106,167,255,1), rgba(124,240,214,1));
	background: linear-gradient(135deg, rgb(0 23 57), rgba(124, 240, 214, 1));
	box-shadow: 0 .71rem 1.65rem rgba(106,167,255,.25);
	vertical-align:middle;
	margin-right:.59rem;
}
.logo span {
	width: 100%;
	height: 100%;
	background-image: url('../img/logo09.png');
	background-size: contain;
	background-repeat: no-repeat;
	transform: scale(0.9);
}

.navlinks{
  display: inline-grid;
  grid-template-columns: auto auto auto auto;
  column-gap: 0;
  float:left;
  position:relative;
  color:var(--muted);
  font-weight:500;
}
.navlinks a{
  display:inline-block;
  position:relative;
  line-height: 2.5rem;
  padding: 0 1rem;
  border-radius:.71rem;
  cursor: pointer;
}
.navlinks a:hover{background:rgba(255,255,255,.06); color:var(--text)}

.navcta{
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: 1rem;
  float:right;
  position:relative;
  text-align:right;
}
.navcta a::before {
	content: "AA";
}

.btn{
  display:inline-block;
  position:relative;
  vertical-align:middle;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding: 0 1rem;
  height: 2.5rem;
  border-radius:.82rem;
  font-size: 1rem;
  font-weight:600;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select:none;
  white-space:nowrap;
}
.btn * {
	vertical-align: middle;
}
.btn:hover {
	transform: translateY(-.06rem);
	background:rgba(255,255,255,.09); 
	border-color:rgba(255,255,255,.18);
}
.btnprimary {
  border-color:transparent;
  background: linear-gradient(135deg, rgba(106,167,255,1), rgba(124,240,214,1));
  color:#07101f;
}
.btnprimary:hover {
	color: #fff;
}

.icon{
  display:inline-block;
  vertical-align:middle;
  font-family:"Material Symbols Rounded";
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-size:1.18rem;
  line-height:1;
  margin-right:.41rem;
}

.langtoggle{
  text-align:center;
  min-width: 4.5rem;
}
[data-lang='ja'] .langtoggle::before {
  content: "EN";
}
[data-lang='en'] .langtoggle::before {
  content: "\65E5\672C";
}

.hero, #process {
	background: radial-gradient(64.71rem 32.35rem at 15% 10%, rgba(106,167,255,.25), transparent 60%),     radial-gradient(52.94rem 30.59rem at 85% 20%, rgba(124,240,214,.18), transparent 60%),     radial-gradient(52.94rem 41.18rem at 50% 120%, rgba(106,167,255,.18), transparent 60%),     var(--bg);
}

.hero {
	padding-top: 9rem;
	height: 100%;
}

.herogrid {
  display:inline-grid;
  position:relative;
  width:100%;
  grid-template-columns: 1.05fr .95fr;
  gap:1.65rem;
  vertical-align:top;
}

.headline {
  font-size:2.59rem;
  line-height:1.05;
  letter-spacing:-.053rem;
  margin: 0;
  margin-top: 5rem;
}
.subhead{
  color:var(--mutedstrong);
  font-size:.94rem;
  margin: 0;
  margin-top: 2rem;
}

.tagrow {
	display: inline-grid;
	grid-template-columns: minmax(1px,1fr) minmax(1px,1fr);
	gap: 1rem;
}
.tag{
  display:inline-block;
  position:relative;
  padding: 1rem;
  border-radius: 1.5rem;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:600;
  font-size:.76rem;
  line-height: 1rem;
}
.tag .dot{
  display:inline-block;
  width:.47rem;
  height:.47rem;
  border-radius:99px;
  background: rgba(124,240,214,.9);
  box-shadow: 0 0 0 .18rem rgba(124,240,214,.18);
  vertical-align:middle;
  margin-right:.41rem;
}
.tagrow .tag {
	padding-left: 2.5rem;
	text-indent: -0.8rem;
}

.herocta{display: inline-grid;grid-template-columns: minmax(1px, 1fr) minmax(1px, 1fr);column-gap: 1rem;margin-top: 5rem;}
.herocta .btn{
    margin: 0;
}

.mini {
	display: inline-grid;
	grid-template-columns: minmax(1px,1fr) minmax(1px,1fr);
	gap: 1rem;
	margin-top: 2rem;
	color:var(--muted);
	font-size:.76rem;
}
.mini span{
	display:inline-block;
	text-indent: -1rem;
	padding-left: 1rem;
}

.herocard{
  display: inline-block;
  height: min-content;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(16,31,63,.9), rgba(15,26,51,.75));
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  min-height:20rem;
}
.herocard .top{
  display: inline-grid;
  grid-template-columns: minmax(1px,1fr) minmax(1px,1fr);
  column-gap: 1rem;
  width: 100%;
  padding: 2rem 1rem;
  position:relative;
  border-bottom:1px solid var(--line);
  opacity: 0;
  transition-delay: 200ms;
}
.herocard.ready .top {
  opacity: 1;
}
.herocard .top:after{
  content:""; 
  display:block; 
  clear:both
}
.pill{
  display:inline-block;
  position:relative;
  padding:.47rem .59rem;
  border-radius: 10rem;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--muted);
  font-weight:700;
  font-size:.71rem;
  letter-spacing:.012rem;
  text-align: center;
}

.herocard .body{
  padding: 2rem 1rem;
}

.metricgrid {
  display:inline-grid;
  width:100%;
  grid-template-columns: minmax(1px,1fr) minmax(1px,1fr);
  gap: 1rem;
}
.herocard .list {
	margin-top: 2rem;
}
.metric {
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:.94rem;
  padding:.71rem;
  position:relative;
  transform: scale(0);
}
.metric._0 {
  transition-delay: 800ms;
}
.metric._1 {
  transition-delay: 1200ms;
}
.metric._2 {
  transition-delay: 1600ms;
}
.metric._3 {
  transition-delay: 2000ms;
}
.metric .k {
  width: 100%;
  font-size:.71rem;
  color:var(--muted);
  font-weight:700;
  margin-bottom:.47rem
}
.metric .v {
  font-size:1.06rem; 
  font-weight:800; 
  letter-spacing:-.012rem;
}
.ready .metric {
  transform: scale(1);
}

.list{padding:0;list-style:none;display:block}
.list li{
  position:relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
  color:var(--mutedstrong);
  font-weight:600;
  font-size:.76rem;
}
.check {
  position:absolute;
  left:0;
  top:.06rem;
  width:1.29rem;
  height:1.29rem;
  border-radius:.47rem;
  background: rgba(124,240,214,.14);
  border: 1px solid rgba(124,240,214,.35);
  text-align:center;
  line-height:1.2rem;
}
.herocard li {
	opacity: 0.4;
}
.ready.herocard li {
	opacity: 1;
}
.herocard .icon {
	transform: scale(0);
}
.herocard.ready .icon {
	transform: scale(1);
}
._0
,._0 .check .icon {
	transition-delay: 2500ms;
}
._1
,._1 .check .icon {
	transition-delay: 2700ms;
}
._2
,._2 .check .icon {
	transition-delay: 2900ms;
}
._3
,._3 .check .icon {
	transition-delay: 3100ms;
}

section{padding-top: 5rem;padding-bottom: 6rem;width: 100%;}

.sectiondark{background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.98))}

.sectionlight{
	background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.3));
	background: linear-gradient(180deg, #7895c9 0%, #f4f7fb 100%);
	color: #0f1b30;
}
.sectionlight .sectiontitle{color: #0f1b30;font-weight:700}
.sectionlight .sectiondesc{color:rgba(11,18,32,.75);color: #3a4b6a;}

.sectiontitle{width: 100%;font-size:1.29rem;letter-spacing:-.018rem;margin: 0;color:var(--text)}
.sectiondesc{color:var(--mutedstrong);margin: 0 0 3rem;/* max-width:75ch; */font-size:.88rem}

.cardgrid{
  display:inline-grid;
  width:100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  row-gap: 2rem;
}
.card {
	position:relative;
	border-radius:var(--radius);
	background: rgba(255,255,255,.04);
	background: #ffffff88;
	border:1px solid var(--line);
	border-color: #7286a4;
	padding:.94rem;
	animation: showing_card_0 1ms ease;
	animation-timeline: view(y);
}
.card:nth-child(3n + 2) {
	animation: showing_card_1 1ms ease;
	animation-timeline: view(y);
}
.card:nth-child(3n + 3) {
	animation: showing_card_2 1ms ease;
	animation-timeline: view(y);
}
/*.card:hover{
	transform: translateY(-.12rem);
	background: rgba(255,255,255,.9);
	border-color: #86b2f3;
}*/
.card h3{margin: 1rem 0 1rem 0.5rem;font-size:.88rem;letter-spacing:-.012rem}
.card p {
	margin:0;
	color:var(--mutedstrong);
	font-size:.76rem
}
.sectionlight .card p {
	color: #3a4b6a;
}

.badgeicon {
  width:2.35rem;
  height:2.35rem;
  border-radius:.94rem;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  text-align:center;
  line-height:2.35rem;
}
.badgeicon .icon {
	margin-right: 0;
}
.sectionlight .badgeicon {
	background: #3fa9d699;
	border-color: #7286a4;
}

.twocol{
  display:inline-grid;
  width:100%;
  grid-template-columns: minmax(1px,1fr) minmax(1px,1fr);
  gap:.82rem;
}

.panel{
  display: inline-block;
  width: 100%;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(16,31,63,.75), rgba(15,26,51,.6));
  border:1px solid var(--line);
  padding:1.06rem;
  box-shadow: 0 .94rem 2.65rem rgba(0,0,0,.28);
  position:relative;
}
.panel.left {
	animation: enter_left 1ms ease;
	animation-timeline: view(y);
}
.panel.right {
	animation: enter_right 1ms ease;
	animation-timeline: view(y);
}

.panel h3{width: 100%;margin: 1rem 0 2rem 0;font-size:.94rem}

.steps{margin:0; padding:0; list-style:none; display:block; color:var(--muted); font-weight:600; font-size:.76rem}
.step{padding-left: 2.5rem;margin-bottom: 1rem;}
.num{
  position:absolute;
  left:0;
  top:0;
  width:1.53rem;
  height:1.53rem;
  border-radius: 50%;
  background: rgba(106,167,255,.14);
  border: 1px solid rgba(106,167,255,.35);
  text-align:center;
  line-height:1.47rem;
  color:var(--text);
  font-weight:900;
  font-size:.71rem;
}
#process .herocta {
	margin-top: 1rem;
}
#contact .panel {
	box-shadow: none;
	background: rgba(0, 0, 0, .14);
}

.cta {
	padding: 4rem 0;
}

.ctabox{
  border-radius:1.29rem;
  border:1px solid var(--line);
  background:
    radial-gradient(35.29rem 16.47rem at 20% 10%, rgba(106,167,255,.22), transparent 60%),
    radial-gradient(37.65rem 16.47rem at 80% 0%, rgba(124,240,214,.18), transparent 60%),
    rgba(255,255,255,.04);
  padding:1.29rem;
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

.ctarow{
  display:inline-grid;
  width:100%;
  grid-template-columns: 1.2fr .8fr;
  gap:.94rem;
}
.ctabox h2{margin:0 0 .47rem; font-size:1.53rem; letter-spacing:-.024rem}
.ctabox p{margin:0; color:var(--mutedstrong); max-width:70ch; font-size:.88rem}

form {
	display:block;
	margin-top:.59rem;
}
form :is(input,textarea) {
	cursor: text;
}
.field {
	display:block; 
	margin-bottom:.59rem;
}
label{display:block; color:var(--muted); font-weight:700; font-size:.71rem; margin-bottom:.35rem}
input, textarea{
  width:100%;
  padding:.71rem;
  border-radius:.82rem;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
  font-family: inherit;
  font-size:.82rem;
}
textarea{min-height:5.76rem; resize:vertical}
input:focus, textarea:focus{border-color: rgba(124,240,214,.5); box-shadow: 0 0 0 .24rem rgba(124,240,214,.12)}

.formrow{
	width: 100%;
}
.formrow:after{content:""; display:block; clear:both}
.formrow .field{float:left; width:50%}
.formrow .field:first-child{padding-right:.59rem}
.formrow .field:last-child{padding-left:.59rem}

.panel:not(.warning) .formstatus {
	display: none;
}
.formstatus {
	width: 100%;
	margin-top:.59rem;
	color:rgba(234,240,255,.7);
	font-size:.71rem
}

footer {
	width: 100%;
	border-top:1px solid var(--line);
	padding:1.06rem 0;
	color:rgba(234,240,255,.72);
	background: rgba(11,18,32,.98);
	font-size:.71rem;
}
.footerrow {
	width: 100%;
}
.container:has(.footerrow) {
	max-width: none;
}
.footerrow:after{content:""; display:block; clear:both}
.footerleft{float:left; display:inline-block; position:relative}
.footerright{float:right;line-height: 2rem;}
.footerright a{display:inline-block; margin-left:.71rem}

.mobiletoggle {
	display:none;
}
#mobilemenu {
	display: none;
}

.mobilemenulinks {
	display: inline-grid;
	width: 100%;
	grid-template-columns: minmax(1px,1fr) minmax(1px,1fr);
	gap: 1rem;
}
.mobilemenulinks .r_1 {
	margin-top: -3rem;
}
.show_menu .mobilemenulinks .r_1 {
	margin-top: 0;
}

@media (max-width: 57.65rem) {
	:root {
		font-size: 5vw;
	}
	.topbar {
		animation-name: resizing_thin;
	}
	.nav [data-href='#contact'] :is(.ja, .en), 
	.nav #navtoggle :is(.ja, .en) {
		display: none;
	}
	.brandmark {
		padding: 0;
	}
	.logo {
		height: 2.5rem;
		aspect-ratio: 1;
	}
	.brandmark :is(.ja, .en) {
		display: none;
	}
	.navcta {
		grid-template-columns: auto auto;
	}
	.navcta [data-href='#contact']{
		display: none;
	}
	.navcta .icon {
		margin-right: 0;
	}
	.navlinks{
		display:none;
	}
	header.show_menu {
		border-color: var(--line);
		background:rgba(11,18,32,.85);
	}
	header>.container {
		z-index: 5;
	}
	.mobiletoggle {
	  display:inline-block;
	}
	.tagrow {
		width: 100%;
	}
	#mobilemenu {
		display: inline-block;
		float: left;
		margin-top: -7rem;
		z-index: 0;
		opacity: 0;
	}
	.show_menu #mobilemenu {
		padding-top: 1rem;
		margin-top: 0;
		opacity: 1;
	}
	.mobilemenulinks span {
		font-size: 4vw;
	}
	section {
		padding-top: 3rem;
		padding-bottom: 4rem;
	}
	#top {
		height: auto;
	}
	.hero {
		padding-top: 8rem;
	}
	.herocta{
		gap: 1rem;
		width: 100%;
		grid-template-columns: minmax(1px, 1fr);
	}
	#process .herocta {
		grid-template-columns: minmax(1px,1fr);
	}
	
	.herogrid{grid-template-columns: minmax(1px,1fr);}
	.ctarow{grid-template-columns: minmax(1px,1fr);}
	.cardgrid{grid-template-columns: minmax(1px,1fr);}
	.twocol{grid-template-columns: minmax(1px, 1fr);}
	.formrow .field{float:none; width:100%}
	.formrow .field:first-child{padding-right:0}
	.formrow .field:last-child{padding-left:0}
	.headline{font-size:2.24rem;margin-top: 4rem;}

	.footerleft {
		width: 100%;
		font-size: 3vw;
		line-height: 8vw;
	}
	.footerleft .logo {
		height: 8vw;
		border-radius: 2vw;
		float: left;
		margin: 0;
	}
	.footerleft .text {
		float: right;
	}
	.card:nth-child(n){
		animation: showing_card_0 1ms ease;
	    animation-timeline: view(y);
	}
}

@media (max-width: 299px){
	.tagrow {
	    grid-template-columns: minmax(1px, 1fr);
	}
	.herocta {
		grid-template-columns: minmax(1px, 1fr);
	}
	.herocard .top {
		grid-template-columns: minmax(1px, 1fr);
		grid-row-gap: 1rem;
	}
	.metricgrid {
		grid-template-columns: minmax(1px, 1fr);
	}
}





@keyframes enter_left {
  from { transform: translateX(-40%); opacity: 0}
  10% { transform: translateX(-40%); opacity: 0}
  40%   { transform: none; opacity: 1}
  to   { transform: none; opacity: 1}
}
@keyframes enter_right {
  from { transform: translateX(40%); opacity: 0}
  10% { transform: translateX(40%); opacity: 0}
  40%   { transform: none; opacity: 1}
  to   { transform: none; opacity: 1}
}


@keyframes showing_card_0 {
  from { transform: translateY(-40%); opacity: 0}
  10% { transform: translateY(-40%); opacity: 0}
  40%   { transform: none; opacity: 1}
  to   { transform: none; opacity: 1}
}
@keyframes showing_card_1 {
  from { transform: translateY(-40%); opacity: 0}
  20% { transform: translateY(-40%); opacity: 0}
  50%   { transform: none; opacity: 1}
  to   { transform: none; opacity: 1}
}
@keyframes showing_card_2 {
  from { transform: translateY(-40%); opacity: 0}
  30% { transform: translateY(-40%); opacity: 0}
  60%   { transform: none; opacity: 1}
  to   { transform: none; opacity: 1}
}


@keyframes resizing {
  from { padding: 1.5rem 0; }
  5%   {border-color: var(--line);}
  20%   { padding: 0.5rem 0; background:rgba(11,18,32,.85);}
  to   { padding: 0.5rem 0; background:rgba(11,18,32,.85); border-color: var(--line);}
}

@keyframes resizing_thin {
  from { padding: 1.5rem 0; }
  1%   {border-color: var(--line);}
  4%   { padding: 0.5rem 0; background:rgba(11,18,32,.85);}
  to   { padding: 0.5rem 0; background:rgba(11,18,32,.85); border-color: var(--line);}
}



.transition6000{
	-webkit-transition: all 6000ms ease;
    -moz-transition: all 6000ms ease;
    -o-transition: all 6000ms ease;
    transition: all 6000ms ease;
}

.transition2000{
	-webkit-transition: all 2000ms ease;
    -moz-transition: all 2000ms ease;
    -o-transition: all 2000ms ease;
    transition: all 2000ms ease;
}

.transition1000{
	-webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

.transition750{
	-webkit-transition: all 750ms ease;
    -moz-transition: all 750ms ease;
    -o-transition: all 750ms ease;
    transition: all 750ms ease;
}

.transition500{
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.transition250{
	-webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}

.bouncing {
	-webkit-transition-timing-function: cubic-bezier(0.25, 0.9, 0.25, 1.1);
	-moz-transition-timing-function: cubic-bezier(0.25, 0.9, 0.25, 1.1);
	-o-transition-timing-function: cubic-bezier(0.25, 0.9, 0.25, 1.1);
	transition-timing-function: cubic-bezier(0.25, 0.9, 0.25, 1.1);
}
.bouncing_inverse {
	transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.slow_bouncing {
	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}