@charset "utf-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosansjp.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
@-webkit-keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@-webkit-keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@keyframes rotate-vert-center {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

/* ブラウザ標準設定のリセット用 */
* {
margin: 0;
padding: 0;
}
p {
line-height: 1em;
}
img {
vertical-align: top;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
	background:#ffffff;
}
.logo{
	font-family: 'Roboto', sans-serif;
	font-size:4.5em;
	/*font-weight:900;*/
  	text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.logoback{
	height: 500px;
	display : flex;                 /* flex属性に変更      */
	justify-content: center;               /* 子要素の横位置      */
	align-items: center;               /* 子要素の縦位置      */
}
.aboutbox{
	width: 200px;
	height: 40px;
	color:#FFFFFF;
	font-size:1.2em;
	font-weight:500;
	background-color:#000000;
	display : flex;                 /* flex属性に変更      */
	justify-content: center;               /* 子要素の横位置      */
	align-items: center;               /* 子要素の縦位置      */
}
.worksbox{
	width: 200px;
	height: 40px;
	color:#FFFFFF;
	font-size:1.2em;
	font-weight:500;
	background-color:#000000;
	display : flex;                 /* flex属性に変更      */
	justify-content: center;               /* 子要素の横位置      */
	align-items: center;               /* 子要素の縦位置      */
}
.about{
	font-size:14px;
	font-weight:400;
	line-height: 2.0em;
	color:#333333;
	text-align:center;
	margin:40px 0px 150px 0px;
}
@media (max-width: 1024px) {
   /* 横幅が1024px以下の場合に適用するスタイル */
   .about{
	font-size:14px;
	font-weight:400;
	line-height: 2.0em;
	color:#333333;
	text-align:left;
	margin:40px 100px 150px 100px;
	}
}
.trial-mktg{
	text-align:center;
	margin:40px 0px 0px 0px;
}
.img-shadow{
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}
.ny{
	text-align:center;
	margin:40px 0px 0px 0px;
}
.cbrd{
	text-align:center;
	margin:40px 0px 0px 0px;
}
.eccube-minimum{
	text-align:center;
	margin:40px 0px 150px 0px;
}
.footer{
	font-size:12px;
	font-weight:500;
	text-align:center;
	margin:0px 0px 20px 0px;
}
.boxadjust{
	display : flex;                 /* flex属性に変更      */
	justify-content: center;               /* 子要素の横位置      */
	align-items: center;               /* 子要素の縦位置      */
}
.rotate-scale-up{
	-webkit-animation: rotate-scale-up 0.65s linear 3s both;
	        animation: rotate-scale-up 0.65s linear 3s both;
}
.rotate-vert-center{
	-webkit-animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 3s both;
	        animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 3s both;
}
.rotate-vert-center2{
	-webkit-animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 3.3s both;
	        animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 3.3s both;
}
.rotate-vert-center3{
	-webkit-animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 3.6s both;
	        animation: rotate-vert-center 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) 3.6s both;
}

html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
canvas{
  display:block;
  vertical-align:bottom;
}
#particles-js{
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}