@charset "utf-8";
/* CSS Document */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/* reset */
body {
	background: #F1F1F1;
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
	padding: 0;
}
a {
	color: #000000;
	text-decoration: none;
	transition: 0.3s;
}
a:hover {
	opacity: 0.7;
}
img {
	display: block;
	margin: 0 auto;
}
ul {
	list-style: none;
}
header {
	background: rgba(255,255,255,0.2);
	padding: 0;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	z-index: 999;
	transition: 0.3s;
}
header.visible {
	background-color: #FFFFFF;
}
header .innerwrap {
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
	width: calc(100% - 20px);
	margin: 0 auto;
	padding: 0 10px;
}
#logo {
	width: 22.5%;
	transition: 0.3s;
	transform: translateY(-100px);
}
header.visible #logo {
	transform: translateY(0);
}
#home {
	padding-top: 1.5vw;
}
#grobal-nav {
	display: flex;
	font-size: 1.1vw;
}
#grobal-nav>a:last-child {
	margin-right: 0;
}
#nu {
	display: flex;
	position: relative;
	padding-top: 1.5vw;
}
.n {
	display: inline-block;
	padding: 0 1.4vw;
	position: relative;
	margin-top: -0.5vw;
}
.n>span {
  content: '';
  position: absolute;
  left: 40%;
  top: -1.5vw;/*線の上下位置*/
  display: inline-block;
  height: 0.5vw;
  width: 2vw;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #A10F2B;/*線の色*/
  transition: 0.3s;
}
.n>span>span {
	display: block;
	background-color: #A10F2B;
    width: 0;
    height: 0;
}
.n:hover span {
	width: 1.5vw;
	height: 0.3vw;
}
.nl {
	margin-left: -1vw;
}
.icon_inq {
	width: 14vw;
	max-width: 170px;
}
.hamburger-button, #sp-service, .sp-kanri, #sp-footer_dl, #sp-circle, #sp-lineup, #sp-license, #sp-fimg, #sp-fnav, #sp_official {
	display: none;
}
.hamburger-nav {
	display: none!important;
}

main {
	box-sizing: border-box;
	line-height: 2;
	padding: 0;
	max-width: 100%;
	width: 100%;
	margin: auto;
}

main .innerwrap {
	max-width: 900px;
	padding: 0 10px;
	margin: 0 auto;
}

section {
	margin: 7vw 0;
}

.fbox {
	display: flex;
	justify-content: space-between;
}
.title {
	font-family: 'Noto Sans JP Medium', sans-serif;
	font-size: 2.5vw;
	margin-left: -2vw;
	text-align: center;
}
.title:before {
	background-color: #A10F2B;
	content: '';
	display: block;
	margin: 0 auto;
	height: 0.5vw;
	width: 2vw;
}

.subtitle {
	font-size: 3vw;
}
.img-box {
	width: 40%;
}

#firstview {
	margin: 0;
	position: relative;
	overflow: hidden;
}
#firstview .innerwrap {
    width: 100%;
	max-width: 1280px;
    margin: 0 auto;
}
#firstview .animewrap {
    position: relative;
    width: 100%;
    height: 800px;
}
#firstview .animewrap2 {
	max-width: 1100px;
	width: 100%;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
#firstview img {
  display: block;
  height: auto;
}
#firstview .anime01-1 {
  z-index: 101;
  animation: anime01-1 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  width: 38%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#firstview .anime01-2 {
	z-index: 102;
	animation: anime01-2 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards 0.4s;
	width: 30%;
    position: absolute;
    top: 0;
    left: 13.45%;
    bottom: 0;
    margin: auto;
}
#firstview .anime01-3 {
	z-index: 103;
	animation: anime01-3 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards 0.8s;
	width: 34.9%;
	position: absolute;
	top: 0;
	right: 9.09%;
	bottom: 0;
	margin: auto;
}
#firstview .anime01-4 {
	z-index: 104;
	animation: anime01-4 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards 1.2s;
	width: 5.636%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
#firstview .anime01-5 {
	z-index: 105;
    font-size: 2.454vw;
    font-weight: bold;
	text-align: center;
	animation: anime01-5 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards 1.6s;
    position: absolute;
    top:38.75%;
    right: 0;
    left: 0;
    margin: 0 auto;
	opacity: 0;
}
@media (min-width: 1100px) {
	#firstview .anime01-5 {
		font-size: 27px;
	}
}

.animebg01 {
	animation: animebg01 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards 2s;
	background: url("../img/firstview_bg.png") center top no-repeat;
	opacity: 0;
	z-index: 2;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
}
.anime04, .anime04-1, .anime05-1, .anime05-2, .anime05-3, .anime05-4, .anime05-5, .anime06, .anime07, .anime08, .anime09 {
	opacity: 0;
}
.anime04.act {
  animation: anime04 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
  animation-delay: 0.2s;
  background: linear-gradient(to left, #8CA7EC 0%,#8CA7EC 50%,#8CA7EC 100%);
  content: "";
  transform-origin: right center;
}
.anime04-r.act {
  animation: anime04-r 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
.anime04-1.act {
	animation: anime04-1 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	animation-delay: 0.6s;
}
 .anime04-r .anime04-1.act {
 	animation: anime04-1-r 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
 	animation-delay: 0.6s;
 }

.anime04-2 {
	clip-path: inset(0 100% 0 0);
	transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
	transition-property: clip-path;
	transition-delay: 0.8s;
}
.anime04-2.act {
	clip-path: inset(0);
}
.line.act {
  display: inline-block;
  position: relative;
}
.line>span {
  background: linear-gradient(to right, #FFDA34 0%,#FFDA34 50%,#FFDA34 100%);
  display: block;
  height: 3px;
  width: 0;
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1) 2s;
  position: absolute;
  bottom: 0;
  left: 50%;
}
.line.act>span {
  width: 100%;
}
.animebg02 .innerwrap {
	position: relative;
}
.anime05-1 {
	width: 38%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.anime05-2 {
	width: 30%;
	position: absolute;
	top: 0;
	left: 13.45%;
	bottom: 0;
	margin: auto;
}
.anime05-3 {
	width: 34.9%;
	position: absolute;
	top: 0;
	right: 9.09%;
	bottom: 0;
	margin: auto;
}
.anime05-4 {
	width: 5.636%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.anime05-5 {
	min-width: 100vw;
	position: absolute;
	top: 0;
	right: auto;
	bottom: 0;
	left: calc(550px - 50vw);
	margin-top: auto;
	margin-bottom: auto;
}
@media (max-width: 1100px) {
	.anime05-5 {
		left: 0;
	}
}

.act .anime05-1 {
    animation: anime05 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.act .anime05-2 {
    animation: anime05-2 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 0.4s;
}
.act .anime05-3 {
    animation: anime05-3 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 0.8s;
}
.act .anime05-4 {
    animation: anime05 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 1.2s;
}
.act .anime05-5 {
    animation: anime05 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 2s;
}
.act .anime06 {
    animation: anime06 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 1.6s;
	z-index: 2;
}
.anime07.act {
    animation: anime07 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 0.2s;
}
.anime08.act {
    animation: anime08 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 0.4s;
}
.anime09.act {
    animation: anime09 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	animation-delay: 0.6s;
}

@keyframes anime01-1 {
	0% {
      transform: translateY(30px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
    }
    40%,100% {
      opacity: 1;
    }
}
@keyframes anime01-2 {
  0% {
    transform: translateX(-18%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes anime01-3 {
  0% {
    transform: translateX(18%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes anime01-4 {
	0% {
	  transform: translateY(30px);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0);
	}
	40%,100% {
	  opacity: 1;
	}
}
@keyframes anime01-5 {
	0% {
	  transform: translateY(30px);
	  opacity: 0;
	}
	100% {
	  transform: translateY(0);
	}
	40%,100% {
	  opacity: 1;
	}
}
@keyframes animebg01 {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes animebg02 {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes anime04 {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes anime04-r {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes anime04-1 {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes anime04-1-r {
  0% {
    transform: translateX(100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes anime05 {
	0% {
      transform: translateY(30px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
    }
    40%,100% {
      opacity: 1;
    }
}
@keyframes anime05-2 {
	0% {
      transform: translateX(-18%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
    }
    40%,100% {
      opacity: 1;
    }
}
@keyframes anime05-3 {
	0% {
      transform: translateX(18%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
    }
    40%,100% {
      opacity: 1;
    }
}
@keyframes anime06 {
	0% {
      transform: translateY(30px);
      opacity: 0;
    }
    100% {
      transform: translateY(0);
    }
    40%,100% {
      opacity: 1;
    }
}
@keyframes anime07 {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes anime08 {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes anime09 {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#sp_firstview, #sp_link {
	display: none;
}

#service {
	overflow: hidden;
}
.box {
	max-width: 100%;
	margin: 30px 0;
	padding: 70px 0;
	position: relative;
	overflow: hidden;
}

.box .fbox {
	max-width: 900px;
	margin: 0 auto;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
}
.box p {
	font-family: 'Noto Sans JP Medium', sans-serif;
	font-size: 2.92vw;
	line-height: 4.88vw;
}
.box img {
	margin: 0;
}

#box1 {
	background: #8CA7EC;
	color: #FFFFFF;
}
#box2 {
	background: #0594B4;
	color: #FFFFFF;
}
#box3 {
	background: #99C3FF;
	color: #FFFFFF;
}


h2 {
	box-sizing: border-box;
	background: #7EACF1;
	border-radius: 12px;
	color: white;
	display: inline-block;
	font-size: 2vw;
	font-weight: 400;
	margin: 1em 0 3em;
	width: 100%;
	padding: 12px 10px;
	position: relative;
	text-align: center;
}
h2:before {
	border: 15px solid transparent;
	border-top: 15px solid #7EACF1;
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -15px;
}

#link-box {
	text-align: center;
	height: auto;
	max-width: 100%;
	overflow: hidden;
}
#link-box .innerwrap {
	max-width: 1100px;
	padding-bottom: 49.1%;
	overflow: hidden;
}
#link-box p {
	font-size: 2.7vw;
	font-weight: bold;
	position: absolute;
	top: 12%;
	right: 0;
	left: 0;
	margin: auto;
}

#can-do .innerwrap, #can-do-kintone .innerwrap {
	display: flex;
	justify-content: center;
	gap: 0 15px;
}
.can-do-box {
	flex-grow: 1;
	margin: 0;
	padding: 0;
	max-width: 290px;
}

#official {
	display: block;
	margin: 100px 0;
}

.data-link-box {
	text-align: center;
}
.link-blue {
	color: #006FFF;
	text-decoration: underline;
}

#template {
	background: #FFFFFF;
	position: relative;
	margin: 0 10px 100px 10px;
}
#template .innerwrap {
	padding: 22px 0 52px 62px;
}
#template-img {
	position: absolute;
	top: -60px;
	right: 30px;
}
#circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform : translate(-50%,-50%);
	z-index: -1;
}
#template img {
	margin: 30px 0;
}
#template ul {
	padding-left: 0;
}
#template li {
	list-style-type: none;
}
#template br {
	display: none;
}

#totop {
	font-size: 1.2vw;
	position: fixed;
	right: 5vw;
	bottom: 5vw;
	max-width: 1020px;
}
#top {
	color: #003399;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	text-align: right;
}
#totop img {
	display: inline;
	margin: 0 0 0 1.5vw;
	text-align: right;
	width: 50px;
	height: 50px;
}
#footer_dl a {
	width: 43.8%;
}

#fimg {
	margin: 87px 0 25px 0;
}
#fimg img {
	display: block;
	text-align: left;
	margin: 0;
}
footer {
	background: #231815;
	line-height: 2;
	text-align: left;
	padding: 30px 0;
}
footer .innerwrap {
	max-width: 1000px;
	margin: auto;
	position: relative;
}
#fnav {
	display: flex;
	font-size: 1vw;
	padding: 0;
}
#fnav a {
	color: #D5D5D5;
}
.fn {
	padding: 0 1.4vw;
}
.fn:first-child {
	padding-left: 0;
}
#copy {
	color: #D5D5D5;
	position: absolute;
	top: -15px;
	right: 0;
}

.fadein {
	opacity: 0;
	transform: translateY(2vw);
	transition: 0.5s;
}
.fadein.act {
	opacity: 1;
	transform: translate(0);
}
.fbox .fadein:nth-child(2) {
	transition: 0.5s 0.2s;
}
.fbox .fadein:nth-child(3) {
	transition: 0.5s 0.4s;
}
/* 1280px以上 */
@media screen and (min-width:1280px) {
	#grobal-nav {font-size: 14px;}
}
@media screen and (min-width: 1100px) {
	#link-box .innerwrap {
		padding-bottom: 540px;
		overflow: visible;
	}
	#link-box p {font-size: 30px}
}
/* 1000px以上 */
@media screen and (min-width:1020px) {
	.n {font-size: 16px}
	#can-do .innerwrap p, #data-link .innerwrap p, #case .innerwrap p, #template li {font-size: 18px}
	#template {margin: 0 auto 100px auto}
	.title {font-size: 26px; text-align: center; margin: 94px;}
	.subtitle {font-size: 30px}
	.fn, #copy {font-size: 14px}
	small {font-size: 14px}
	.title:before,
	.n>span {
		height: 5px;
		width: 17.5px;
	}
	.n>span {
		top: -15px;
	}
	.box p {
		font-size: 30px;
		line-height: 50px;
	}
}
/* SP */
@media screen and (max-width:480px) {
	body {
		overflow-x: hidden;
	}
	header {
		padding: 5vw 0 4vw;
		height: 8vw;
	}
	header .innerwrap {
		padding: 0 5vw;
		width: calc(100% - 10vw);
	}
	p {
		text-align: justify;
	}
	#grobal-nav, #official, #footer_dl, #fnav, #circle, .pc-kanri, .img-box, .triangle, #pc-lineup, #fimg {
		display: none;
	}
	#home {
		width: 21.3vw;
	}
	#logo {
		margin-left: -2vw;
		width: 50%;
	}
	.hamburger-button {
		display: flex;
	}
	.hamburger-nav {
		display: block!important;
	}
	#sp-logo img {
		position: relative;
		left: -20vw;
		top: 6vw;
		text-align: left;
		width: 50%;
	}
	#sp-nu {
		position: absolute;
		top: 25%;
		left: 20%;
	}
	#sp-nu a {
		display: block;
	}
	.sn a {
		color: #fff;
		font-size: 5vw;
		margin: 2vw 0;
		padding: 2vw 0;
	}
	.sn:before {
		background-color: #FFF;/*線の色*/
		content: '';
		display: inline-block;
		margin: 0 auto;
		position: relative;
		left: -9vw;
		top: 8vw;
		height: 1.3vw;
		width: 5vw;
	}
	#sp-foot {
		position: absolute;
		bottom: 0;
	}

	main {
		width: 100%;
	}
	main .innerwrap {
		padding: 0 5vw;
	}
	.innerwrap {
		padding: 0 6vw 0 4vw;
	}
	.title {
		font-size: 5vw;
		margin: 10vw auto;
		text-align: center;
	}
	.title:before {
		left: 4.8vw;
		top: -6vw;
		height: 1vw;
		width: 5vw;
	}
	.subtitle {
		font-size: 4.8vw;
	}

	#firstview, #link {
		display: none;
	}
	#sp_firstview {
		height: 200vw;
		display: block;
		position: relative;
	}
	#sp_firstview .anime01-1 {
	  z-index: 101;
	  animation: anime01-1 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
	  width: 80%;
	  position: absolute;
	  top: 0;
	  right: 0;
	  bottom: 0;
	  left: 0;
	  margin: auto;
	}
	#sp_firstview .anime01-2 {
		z-index: 102;
		animation: anime01-2 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards 0.4s;
		width: 32.6%;
	    position: absolute;
	    top: 46%;
		right: 0;
		left: 0;
	    margin: auto;
	}
	#sp_firstview .anime01-3 {
		z-index: 103;
		animation: anime01-3 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards 0.8s;
		width: 54%;
		position: absolute;
		top: 57%;
		right: 0;
		left: 0;
		margin: auto;
	}
	#sp_firstview .anime01-4 {
		z-index: 104;
		animation: anime01-4 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards 1.2s;
		width: 5.636%;
		position: absolute;
		top: 52%;
		right: 0;
		left: 0;
		margin: auto;
	}
	#sp_firstview .anime01-5 {
		z-index: 105;
	    font-size: 4.6vw;
	    font-weight: bold;
		text-align: center;
		line-height: 1.6;
		animation: anime01-5 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards 1.6s;
	    position: absolute;
	    top:35%;
	    right: 0;
	    left: 0;
	    margin: 0 auto;
		opacity: 0;
	}
	#sp_firstview .animebg01 {
		animation: animebg01 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards 2s;
		background-image: url("../img/sp_firstview_bg.png");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: contain;
		opacity: 0;
		z-index: 2;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
	}


	h2 {
		font-size: 7vw;
		margin: 0 auto;
	}

	.box p {
		font-size: 5vw;
		line-height: 1.6;
	}
	.box img {
		margin: auto;
	}
	#sp_link, .fbox, #sp-service, #sp-lineup, #sp-license {
		display: block;
	}
	#sp_link-box .innerwrap {
		width: 100%;
		padding: 0 0 107% 0;
		position: relative;
	}
	#sp_link-box p {
		font-size: 4.6vw;
		font-weight: bold;
		line-height: 1.6;
		text-align: center;
		position: absolute;
		top: 12.26%;
		right: 0;
		left: 0;
		margin: 0 auto;
	}
	.anime05-1 {
		width: 60%;
		position: absolute;
		top: 44%;
		right: 0;
		bottom: auto;
		left: 0;
		margin: 0 auto;
	}
	.anime05-2 {
		width: 32.6%;
		position: absolute;
		top: 56.2%;
		right: 0;
		bottom: auto;
		left: 0;
		margin: 0 auto;
	}
	.anime05-3 {
		width: 54%;
		position: absolute;
		top: 79%;
		right: 0;
		bottom: auto;
		left: 0;
		margin: 0 auto;
	}
	.anime05-4 {
		width: 5.636%;
		position: absolute;
		top: 69.3%;
		right: 0;
		bottom: auto;
		left: 0;
		margin: 0 auto;
	}
	.anime05-5 {
		width: 100%;
		position: absolute;
		top: 0;
		right: auto;
		bottom: 0;
		left: 0;
		margin-top: auto;
		margin-bottom: auto;
	}
	.sp-kanri {
		display: block;
		text-align: center;
	}
	.box {
		padding: 1vw 0 5vw 0;
	}
	.box img {
		order: 0;
		width: 80%;
	}
	.data-link-box {
		margin: 10vw 0;
	}
	#can-do .innerwrap, #can-do-kintone .innerwrap {
		display: block;
	}
	.can-do-box {
		margin: 0 auto;
		max-width: 100%;
	}
	.can-do-box p {
		margin: 10px 0 32px;
	}
	.can-do-box br {
		display: none;
	}
	#sp_official {
		display: block;
		margin: 20vw 0;
	}
	.data-link-box img {
		width: 100%;
	}
	#data-link {
		margin: 25vw 0;
	}
	#case {
		margin: 25vw 0;
	}
	#template {
		margin: 25vw 5vw;
	}
	#template .innerwrap {
		padding: 100px 5px;
	}
	#template-img{
		top: -100px;
		right: 15px;
		width: 40%;
	}
	#template ul {
		margin: 0;
		padding: 0;
	}
	#template br {
		display: inline;
	}
	#sp-circle {
		display: block;
		margin: 0 auto!important;
		width: 100%;
	}
	#sp-footer_dl {
		z-index: 999;
		display: block;
		position: fixed;
		bottom: 0;
	}
	#sp-fimg {
		display: block;
		margin: 0 5vw;
	}
	#sp-fimg img {
		margin: 25vw 0;
		width: 30%;
	}
	#sp-fnav {
		display: block;
		margin: 5vw;
		padding: 0;
	}
	.fn {
		padding: 0;
	}
	#totop {
		right: 5vw;
		bottom: 48vw;
	}
	#totop img {
		height: 12vw;
		width: 12vw;
	}
	footer {
		padding: 25vw 0 42vw;
	}
	#copy {
		font-size: 3.7vw;
		text-align: right;
		top: 0;
		margin: 0;
		position: relative;
	}
	.img-box {
		width: 100%;
	}
	#footer_dl a {
		display: block;
		margin: 10vw 0;
		width: 100%;
	}
	#footer_dl a img:first-child {
		display: none;
	}
	#footer_dl a img:last-child {
		display: block;
	}

	#fimg {
		width: 100%;
	}
	small {
		font-size: 2vw;
	}

	.fbox .fadein:nth-child(2) {
		transition: 0.5s;
	}
	.fbox .fadein:nth-child(3) {
		transition: 0.5s;
	}
}
@media screen and (min-height:sn 736px) {
	.sn a {
		background: #CCCCCC;
		font-size: 4vw;
		margin: 3vw 0;
		padding: 4vw 0;
		text-align: center;
	}
}