html {
	font-family: 'Noto Sans JP', sans-serif;

}

body {
	line-height:1.6;
	color:#0A1C4D;
}

h1 {
	font-size:2.4rem;	
	margin-top:40px;
	line-height:1.5;
	font-weight:900;
}

h2 {
	font-size:2.2rem;
	margin-top:20px;
	margin:0 auto;
	text-align:center;
	font-weight:900;
}

h3 {
	font-size:2rem;
	font-weight:900;
	margin-top:0;
	line-height:1.5;
	margin-bottom:15px;
	margin-bottom:30px;
}

h4 {
	font-size:1.2rem;
	margin-bottom:10px;
	font-weight:900;
}

p {
	font-size:1.1rem;
	line-height:1.9;
	margin-top:0px;
	color:#0A1C4D;
}

img {
	-webkit-backface-visibility: hidden;
}

.logo {
	width:250px;
	margin:0;
}

header {
	width: 100%;
	margin: 0 auto;
	display: flex;
	position: absolute;
	padding: 20px 0;
}

.header-contents {
	width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.button1 {
	background-color:#366bfa;
	color:#fff;
	padding:15px 25px;
	font-weight:700;
	border-radius:100px;
	display:none;
}

.hero-background {
	width:100%;
	height:860px;
	margin-bottom:20px;
	background-image: url("../img/background-hero.png");
	background-repeat: no-repeat;
}

.hero {
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 40px;
	display: flex;
	color: #fff;
}

.hero p {
	color:#fff;
}

.contents {
	max-width:1100px;
	margin:0 auto;
	padding:70px 20px;
	display:flex;
}

.long {
	max-width:1400px;
	margin:0 auto;
	padding:80px 20px;
	display:flex;
}

.left {
	width:50%;
	display: flex;
  flex-direction: column;
	justify-content: center;
}

.hero-right {
	position: relative;
	width: 66%;
	display: flex;
	margin-top: 40px;
	flex-direction: column;
}

.right {
	width:50%;
	display: flex;
  flex-direction: column;
	justify-content: center;
}

.title {
	padding: 80px 0 20px 0;
}

.title-background {
	font-size: 80px;
	color: #f4f7ff;
	z-index: -100;
	position: absolute;
	left: 50%;
	font-weight:700;
	transform: translate(-50%, -50%);
}

.title-p {
	font-size:1.2rem;
}

.caption {
	font-size:20px;
	text-align:center;
	padding-bottom:20px;
	color:#366BFA;
	font-weight:700;
	margin:0 auto;
}

.caption-sub {
	padding-bottom:20px;
	color:#366BFA;
	font-weight:700;
}

span {
  text-decoration: underline;
  text-underline-offset: 5px;
	color:#366BFA;
}

.blue {
	text-decoration:none;
  text-underline-offset: 5px;
	color:#366BFA;
}

.img-box-left {
	display: flex;
	align-items: center;
	justify-content: left;
	overflow: hidden;
	padding-right:70px;
	margin:0 20px;
}

.img-box-right {
	display: flex;
	align-items: center;
	justify-content: right;
	overflow: hidden;
	padding-left:70px;
	margin:0 20px;
}

.background {
	min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
	background-image: url(../img/background.svg);
}

ul{
  list-style:none;
}

.function li{
	background: url(../img/check.svg) no-repeat 0 0;
	margin-top: 15px;
	background-size: auto 25px;
	padding-left: 40px;
}

li {
	font-weight:700;
}

.txt-box {
	margin-top:30px;
}

.title-txt {
	max-width: 1100px;
	text-align:center;
	margin: 0 auto;
}

.contents p {
	max-width:500px;
}

.column-3 {
	width:33%;
	display:flex;
	flex-direction: column;
}

.column-3 img {
	width:50px;
}

.column-3 p {
	width:90%;
}

.background-footer {
	width:100%;
	height:800px;
	margin-top:160px;
	padding-top:100px;
	background-image: url("../img/background-footer.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
	overflow: hidden;
}

footer {
	color:#fff;
}

.footer-contents {
	margin:0 auto;
	padding:80px 0;
	display:flex;
  flex-direction: column;
	justify-content: center;
  align-items: center;
	position:relative;
}

.footer-contents h2 {
	font-size:2rem;
	margin-bottom:20px;
}

.footer-contents p {
	color:#fff;
	font-size:1.2rem;
}

.footer-logo {
	max-width:1100px;
	margin:0 auto;
	padding-bottom:50px;
}

.button-79 {
	width: 150px;
	height: 150px;
	backface-visibility: hidden;
	background: #ffffff;
	border: 0;
	border-radius: 100px;
	box-sizing: border-box;
	color: #366bfa;
	cursor: pointer;
	display: inline-block;
	font-family: Circular,Helvetica,sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.3;
	padding: 1rem 1.25rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	transform: translateZ(0) scale(1);
	transition: transform .2s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	margin-top: 40px;
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='80' height='80' viewport='0 0 100 100' style='fill:black;font-size:40px;'><text y='50%'>👋</text></svg>"), auto;
}

.button-79:disabled {
  color: #787878;G
  cursor: auto;
}

.button-79:not(:disabled):hover {
  transform: scale(1.2);
}

.button-79:not(:disabled):hover:active {
  transform: scale(1.2) translateY(.125rem);
}

.button-79:focus {
  outline: 0 solid transparent;
}

.button-79:focus:before {
  border-width: .125rem;
  content: "";
  left: calc(-1*.375rem);
  pointer-events: none;
  position: absolute;
  top: calc(-1*.375rem);
  transition: border-radius;
  user-select: none;
}

.button-79:focus:not(:focus-visible) {
  outline: 0 solid transparent;
}

.button-79:not(:disabled):active {
  transform: translateY(.125rem);
}

.footer-button {
	width:300px;
	height:300px;
	border-radius:1000px;
	margin-top:60px;
	font-size:1.6rem;
	z-index:100;
}


.logo-sp {
	display:none;
	margin-left:20px;
}

.container {
  position: relative;
  width: 100vw;
  overflow: hidden;
}

.scrolling-text {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
  will-change: transform;
  backface-visibility: hidden;
}

.scrolling-text .scrolling-text-content {
  color: #fff;
  font-size: 120px;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.23, 0.36, 0.28, 0.83);
  line-height: 1em;
  margin: 50px 0;
}

.footer-nav {
	max-width:1100px;
	display:flex;
	justify-content: space-between;
	margin:0 auto;
	padding-bottom:60px;
	color:#fff;
}

.footer-nav-left {
	width:50%;
}

.footer-nav-right {
	width:50%;
	font-size:0.8rem;
}

.footer-nav-right p {
	color:#86a7ff;
}

.footer-ul {
	display:flex;
}

.footer-ul li {
	margin-right:20px;
	font-weight:normal;
}

.exLink{
	position: relative;
}
.exLink::before{
	content: "";
	position: absolute;
	top: 5px;
	right: -14px;
	display: block;
	width: 8px;
	height: 6px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}
.exLink::after{
	content: "";
	position: absolute;
	top: 9px;
	right: -20px;
	display: block;
	width: 10px;
	height: 8px;
	border: 1px solid #fff;
}

.column-box {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0px 20px 60px 20px;
	display: flex;
}

.footer-cover {
	width:100%;
	background-color:#366bfa;
}

.image {
	width:100%;
}


.h2-background {
	max-width: 1200px;
  height: 88px;
  margin: 0 auto;
  background-repeat: no-repeat;
	margin:0 auto;
	background-image: url("../img/h2-background.svg");
}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: 0;
}

.marquee {
  position: absolute;
  overflow: hidden;
  --offset: 20vw;
  move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
  z-index: 1;
  width: 200%;
  margin-top: 10em;
  font-weight:700;
}

.marquee__inner {
  width: fit-content;
  display: flex;
  position: relative;
  animation: marquee 20s linear infinite;
  width: 200vw;
}

.header-nav {
	width:auto;
}

.header-nav ul {
	display:flex;
	color:#4a7bff;
	padding:20px 40px;
	background-color:#fff;
	border-radius:100px;
}

.header-nav li {
	margin:0 15px;
	font-weight: 500;
}

.header-nav ul {
  display:-webkit-box;
  display:-ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.header-nav ul li {
    font-size: 14px;
}
.header-nav ul li a {
  position: relative;
}
/*ホバーエフェクト*/
.header-nav ul li a::after {
  /*マークのスタイル*/
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: #4a7bff;
  border-radius: 50%;
  bottom: -15px;
  left: calc(50% - 5px);
  /*不透明度0で非表示*/
  opacity: 0;
  /*下方向へ50%移動*/
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  /*アニメーションの速度設定*/
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.header-nav ul li a:hover::after {
  /*不透明度1で表示*/
  opacity: 1;
  /*0位置に移動*/
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.marquee span {
  font-size: 16rem;
  padding: 0 2vw;
  white-space: nowrap;
	color: #4a7bff;
	text-decoration:none;
}

@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }

  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}

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

	h1 {
		font-size:2rem;	
	}

	.hero-right {
    position: relative;
    width: 60%;
    display: flex;
    margin-top: 40px;
    flex-direction: column;
}

.hero-background {
	background-size: 83% auto;
	background-position: top left;
	height: auto;
}

.sp-br {
	display:none;
}

.hero .left {
	margin-left:20px;
}

.logo {
	margin-left:20px;
}

.footer-logo .logo {
		margin-left:0px;
}


}

/*-------------------------------

タブレットCSS

-------------------------------*/


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

	h1 {
	font-size: 2.6rem;
	margin-top: 40px;
	text-align:center;
	}

	.hero {
		flex-direction:column;
		width:100%;
	}

	.hero-right {
		width:100%;
	}

	.left {
		width:100%;
	}

	.right {
		width:100%;
	}

	.contents {
		flex-direction: column;
		justify-content: center;
    align-items: center;
		padding: 60px 60px;
	}

	.contents.reverse {
		flex-direction: column-reverse;
	}

	.img-box-left {
		padding-right:0px;
		margin: 0 60px;
	}

	.img-box-right {
		padding-left:0px;
		margin: 0 60px;
	}

	.contents p {
		max-width:100%;
		font-size:1.4rem;
	}
	
	.column-box {
		flex-direction:column;
		padding: 0px 60px 60px 60px;	
	}

	.caption-sub {
		padding-bottom:0px;
	}

	.column-3 {
		width:100%;
		margin-bottom:30px;
	}

	.column-3 p {
		width:100%;
		font-size:1.6rem;
	}
	
	.column-3 img {
		width: 70px;
	}

	.title {
    padding: 60px 60px 20px 60px;
	}

	h2 {
		font-size:2.4rem;
		line-height:1.6;
	}

	h3 {
		font-size:2.4rem;
		line-height:1.6;
	}

	h4 {
		margin-top:10px;
		font-size:2rem;
	}
	
	.function {
		display:none;
	}

	.function li {
		font-size:1.6rem;
		background: url(../img/check.svg) no-repeat 0px 7px;
    margin-top: 15px;
    background-size: auto 30px;
    padding-left: 50px;
	}

	.contents img {
		margin-bottom:60px;
	}

	.icon {
		margin-bottom:20px!important;
	}

	.title-txt {
		text-align:left;
		font-size: 1.4rem;
		margin-bottom:20px;
	}

	.footer-contents p {
		font-size:1.6rem;
	}

	.footer-contents {
		padding: 80px 60px;
	}

	.background-footer {
		margin-top:80px;
	}

	.contact-text {
		width:100%;	
		font-size:5rem;
		margin-top:260px;
	}

	.hero-background {
		width: 100%;
    margin-bottom: 20px;
    background-image: url(../img/background-hero.png);
    background-repeat: no-repeat;
		height:auto;
		background-size:auto;
	}

	.hero .button-79 {
		display:none;
	} 

	.hero p {
		font-size:1.4rem;
	}

	.footer-nav {
		flex-direction:column;
		padding:0 60px;
	}

	.footer-nav-left {
		width:100%;
	}

	.footer-nav-right {
		width:100%;
		margin-top:20px;
	}

	.footer-nav-right p {
		color:#86a7ff;	
	}

	header {
    width: 100%;
    margin: 0 auto;
    display: flex;
    position: absolute;
    padding: 15px 0;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

	.logo {
		font-size:1.4rem;
		color: #101010;	
	}

	.solution {
		margin-bottom:0px;
	}

	.button1 {
		display:block;
	}

	.h2-background {
		background-image:none;
	}

	.hero .left {
		margin-left:0px;
	}
	
	.logo {
		margin-left:0px;
	}

	.header-nav {
		display:none;
	}

	.logo {
		display:none;
		margin-left:20px;
	}

	.logo-sp {
		width:300px;
		display:block;
	}

}

/*-------------------------------

スマートフォンCSS

-------------------------------*/

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

	.column-box {
		padding:0 20px 0 20px;
	}

	.contents {
		padding:30px 20px;
	}

	.title {
		padding: 60px 20px 20px 20px;
	}

	.footer-contents {
		padding:80px 20px;
	}

	.hero {
		padding:20px 20px 20px 20px;
	}

	h1 {
		font-size:1.6rem;
		text-align:center;
		margin-top:20px;
	}

	h2 {
		font-size:1.4rem;
	}

	h3 {
		font-size:1.4rem;
		margin-bottom:15px;
	}

	h4 {
		font-size:1.2rem;
	}

	.header-contents {
		padding:0 20px;
	}

	.logo {
		font-size:1rem;
	}

	.hero-background {
		height:auto;
		background-size: 184% auto;
		margin-bottom:0;
	}

	.hero p {
		font-size:1rem;
	}

	.contents p {
		font-size:1rem;
	}

	.column-3 p {
		font-size:1rem;
	}

	.contents img {
		margin-bottom:30px;
	}

	.img-box-left {
		margin:0 30px;
	}
	
	.img-box-right {
		margin:0 30px;
	}

	.column-3 img {
		width: 30px;	
	}

	.icon {
		margin-bottom:5px!important;
	}

	.title-txt {
		font-size:1rem;
	}

	.hero-right {
		margin-top:0px;
	}

	.footer-contents p {
		font-size:1rem;
	}

	.footer-contents h2 {
		font-size:1.4rem;
	}

	.background-footer {
		padding-top:0px;
		margin-top:40px;
	}

	.footer-button {
		width:250px;
		height:250px;
		font-size:1.2rem;
		margin-top:30px;
	}

	.background-footer {
		height:auto;
	}

	.footer-nav {
		padding:20px;
	}

	.button1 {
    background-color: #366bfa;
    color: #fff;
    padding: 8px 20px;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 100px;
}
	.title-background {
		font-size:50px;
	}
	
	.marquee span {
		font-size:5rem;
	}

	.sp-br {
		display:block;
	}

	.logo-sp {
		width:200px;
		display:block;
		margin-left:0;
	}

}