/*----------------------------------------------------
**
** GRANTEST Inc. / business.css
**
** Ver.1.0.0
**
** copyright 2020 GRANTEST Inc.
**
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/
@keyframes fill-color{
	0% {
		fill:#445;
	}
	100%{
		fill:#0bf;
	}
}
@keyframes bounce-in-color{
	0% {
		transform:scale(0.7);
	}
	45%{
		transform:scale(1.3);
	}
	80%{
		transform:scale(0.9);
	}
	100%{
		transform:scale(1);
	}
}
@keyframes bounce-in{
	0% {
		transform:scale(0);
	}
	45%{
		transform:scale(1.3);
	}
	80%{
		transform:scale(0.9);
	}
	100%{
		transform:scale(1);
	}
}
@keyframes symbol-hidden{
	0% {
		opacity:1;
		transform:scale(1);
	}
	100%{
		opacity:0;
		transform:scale(0);
	}
}
@keyframes small-circle{
	0% {
		transform:translate3d(0,0,0) scale(1);
	}
	20%{
		transform:translate3d(0,0,0) scale(1.2);
	}
	60%{
		transform:translate3d(0,0,0) scale(0.2);
		opacity:1;
	}
	100%{
		transform:translate3d(0,40%,0) scale(0.2);
		opacity:0;
	}
}
@keyframes titlewrap{
	0%{
		width:0;
		height:0;
		opacity:0;
	}
	50%{
		width:2em;
		height:100%;
		opacity:1;
	}
	100%{
		width:100%;
		height:100%;
		opacity:1;
	}
}
@keyframes titletext-dark{
	0%{
		color:rgba(68,68,85,0);
	}
	100%{
		color:rgba(68,68,85,1);
	}
}
@keyframes titletext-light{
	0%{
		color:rgba(255,255,255,0);
	}
	100%{
		color:rgba(255,255,255,1);
	}
}
@keyframes fadeup{
	0%{
		opacity:0;
		transform:translateY(30px);
	}
	100%{
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes fadeleft{
	0%{
		opacity:0;
		transform:translateX(-30px);
	}
	100%{
		opacity:1;
		transform:translateX(0);
	}
}
@keyframes faderight{
	0%{
		opacity:0;
		transform:translateX(30px);
	}
	100%{
		opacity:1;
		transform:translateX(0);
	}
}
@keyframes fadezoom{
	0%{
		opacity:0;
		transform:scale(0.9) translate3d(0,0,0);
	}
	100%{
		opacity:1;
		transform:scale(1) translate3d(0,0,0);
	}
}
@keyframes neumorphism-fade-in{
	0%{
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@keyframes website-bounce-in{
	0% {
		opacity:1;
		transform:scale(0) translate3d(-50%,-50%,0);
	}
	45%{
		opacity:1;
		transform:scale(1.3) translate3d(-50%,-50%,0);
	}
	80%{
		opacity:1;
		transform:scale(0.9) translate3d(-50%,-50%,0);
	}
	100%{
		opacity:1;
		transform:scale(1) translate3d(-50%,-50%,0);
	}
}
@keyframes website-line{
	0%{
		opacity:1;
		width:0;
	}
	100%{
		opacity:1;
	}
}
@keyframes website-word-left{
	0%{
		opacity:0;
		transform:translate3d(0,0,0);
		left:-1em;
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
		left:0;
	}
}
@keyframes website-word-right{
	0%{
		opacity:0;
		transform:translate3d(0,0,0);
		left:1em;
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
		left:0;
	}
}
@keyframes graph-bounce{
	0% {
		height:0;
	}
	70%{
		height:103%;
	}
	80%{
		height:90%;
	}
	100%{
		height:100%;
	}
}
@keyframes graph-number-in{
	0% {
		opacity:0;
	}
	100%{
		opacity:1;
	}
}
@keyframes underline{
	0%{
		width:0;
	}
	100%{
		width:100%;
	}
}
@keyframes graph-text-in{
	0%{
		opacity:0;
		transform:translate3d(-2em,-2px,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,-2px,0);
	}
}
div.pageheader::before{
	z-index:2;
	background:-webkit-linear-gradient(top, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 80%,rgba(242,242,246,1) 100%);
	background:linear-gradient(to bottom, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 80%,rgba(242,242,246,1) 100%);
	content:'';
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:block;
}
div.pageheader div.video::before,
div.pageheader div.video::after{
	content:'';
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:block;
}
div.pageheader div.video::before{
	z-index:3;
	background-repeat:repeat;
	background-size:94px 81px;
}
div.pageheader div.video::after{
	z-index:2;
	background: radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0),radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0);
	background-position:0px 0,3px 3px;
	background-size:6px 6px;
}
section.contents:nth-of-type(1){
	position:relative;
	z-index:1;
}
section.contents:nth-of-type(1)::before{
	display:block;
	position:absolute;
	left:50%;
	font-family:'Oswald';
	opacity:0.1;
	color:#445;
	z-index:4;
	text-align:center;
	transform:translateX(-50%);
}
section.contents:nth-of-type(1) > span{
	display:block;
	position:absolute;
	z-index:1;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-repeat:repeat;
	background-size:91px 81px;
}
section.contents:nth-of-type(1) > span::before{
	content:'';
	display:block;
	position:absolute;
	z-index:1;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background:-webkit-linear-gradient(top, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 20%,rgba(242,242,246,0) 100%);
	background:linear-gradient(to bottom, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 20%,rgba(242,242,246,0) 100%);
}
section.contents.graphic::before{
	content:'GRAPHIC DESIGN'
}
section.contents.system::before{
	content:'SYSTEM CONSTRUCTION'
}
section.contents.website::before{
	content:'WEBSITE PRODUCTION'
}
section.contents.management::before{
	content:'WEBSITE MANAGEMENT'
}
section.contents:nth-of-type(1) > *:not(span){
	position:relative;
	z-index:2;
}
section.contents:nth-of-type(1) h2.title{
	opacity:0;
	animation:fadeup 900ms ease-out 300ms forwards;
}
section.website h3.subtitle{
	opacity:0;
	animation:fadeup 900ms ease-out 300ms forwards;
}
section.contents:nth-of-type(1) p.text{
	opacity:0;
	animation:fadeup 900ms ease-out 600ms forwards;
}
section.contents div.nextcontents{
	position:relative;
	z-index:1;
}
section.contents:nth-of-type(1) div.symbolwrap::before{
	content:'';
	position:absolute;
	width:100%;
	display:block;
	height:0;
	border-top:solid 1px #445;
	top:50%;
	transition:all 0.3s ease;
}
section.contents:nth-of-type(1) .visible div.symbolwrap::before{
	border-color:#0bf;
}
div.symbolwrap{
	position:relative;
	z-index:1;
}
div.symbol{
	position:absolute;
	z-index:1;
	top:0;
	left:50%;
	display:inline-block;
}
div.symbol svg{
	position:absolute;
	z-index:1;
	top:-50%;
	left:-50%;
}
div.symbol svg path{
	fill:#445;
}
.visible div.symbol svg path{
	animation:fill-color 150ms linear 150ms forwards;
}
.visible div.symbol svg{
	animation:bounce-in-color 300ms linear forwards,symbol-hidden 100ms linear 700ms forwards;
}
div.symbol div.inner{
	position:relative;
	z-index:1;
}
div.symbol div.inner div{
	position:absolute;
	z-index:-1;
	top:-50%;
	left:-50%;
	background-color:#0bf;
	transform:scale(0);
	border-radius:50%;
}
.visible div.symbol div.inner div{
	animation:bounce-in 300ms linear 300ms forwards,small-circle 400ms ease-in 900ms forwards;
}
section.contents.graphic div.listwrap article{
	text-align:center;
}
section.contents.graphic div.listwrap article::after{
	font-family:'Raleway';
	color:#445;
	opacity:0.3;
}
section.contents.graphic div.listwrap article::after{
	content:'GRAPHIC DESIGN';
}
section.contents div.listwrap article div.inner{
	text-align:left;
	opacity:0;
}
section.contents div.listwrap article div.inner img{
	opacity:0;
}


section.contents.graphic div.listwrap article h2{
	position:relative;
	z-index:2;
	height:2em;
	line-height:2em;
	display:inline-block;
	margin:0 auto;
	padding:0 1.5em;
	background-color:rgba(0,0,0,0);
	color:rgba(255,255,255,0);
}
section.contents.graphic div.listwrap article h2::before{
	content:'';
	position:absolute;
	width:0;
	height:0;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:block;
}
section.contents.graphic div.listwrap article h2::before{
	box-sizing:border-box;
	border-radius:1em;
	z-index:-1;
	background-color:#0bf;
	opacity:0;
}
section.contents.graphic div.listwrap.visible article h2::before{
	animation:titlewrap 300ms linear 1200ms forwards;
}
section.contents.graphic div.listwrap.visible article h2{
	animation:titletext-light 600ms ease-out 1400ms forwards;
}
section.contents.graphic div.listwrap.visible article div.inner{
	animation:fadeup 900ms ease-out 1400ms forwards;
}
section.contents.graphic div.listwrap.visible article div.inner img{
	animation:fadeup 900ms ease-out 1600ms forwards;
}
section.contents.graphic div.listwrap article div.textwrap ul{
	list-style:none;
	list-style-position:outside;
	display:flex;
	flex-wrap:wrap;
}
section.contents.graphic div.listwrap article div.textwrap ul::before{
	content:'制作・サービス一覧';
	display:block;
	padding:0 0 1em 0;
	text-align:center;
	width:100%;
}
section.contents.graphic div.listwrap article div.textwrap ul li{
	background-color:rgba(68,68,68,0.1);
	margin:0 0.2em 0.4em 0.2em;
}
section.contents.graphic div.listwrap article div.textwrap ul li h3{
	display:inline-block;
	background-color:rgba(255,255,255,0);
	color:#445;
	padding:0 0.2em;
}

section.contents.website div.explanation{
	position:relative;
	z-index:1;
}


/*----------------------------------------------------
** Production example
**----------------------------------------------------*/
section.example{
	background-image:url(../img/pattern_03.png);
	background-repeat:repeat;
	background-position:center top;
	background-size:10px 10px;
	text-align:center;
}
section.example div.btnarea a{
	display:inline-block;
	text-decoration:none;
	background-color:#0bf;
	color:#000;
	position:relative;
	z-index:1;
	margin:0 auto;
}
section.example div.btnarea a img{
	opacity:0;
	width:0;
	height:0;
}
section.example div.btnarea a::before{
	content:'制作事例一覧はこちら';
	color:#FFF;
}
section.example div.btnarea a::after{
	content:'';
	display:block;
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M16 0c-8.295 0-15.116 6.315-15.919 14.399h19.281l-5.565-5.566c-0.625-0.623-0.624-1.637 0-2.26 0.626-0.627 1.637-0.627 2.262-0.002l9.428 9.429-9.427 9.427c-0.313 0.313-0.722 0.468-1.132 0.468-0.411 0-0.818-0.155-1.132-0.468-0.625-0.625-0.625-1.637 0-2.262l5.566-5.566h-19.282c0.802 8.085 7.622 14.401 15.919 14.401 8.836 0 16-7.164 16-16s-7.164-16-16-16z" /></svg>');
	background-repeat:no-repeat;
	background-size:20px 20px;
	background-position:right center;
	width:20px;
	height:20px;
	position:absolute;
	z-index:1;
	top:50%;
	right:10px;
	transform:translateY(-50%);
}
section.example div.btnarea{
	opacity:0;
}
section.example div.btnarea.visible{
	animation:fadeup 300ms ease-out forwards;
}
section.example > div.inner > h2.title,
section.example > div.inner > p.explanation{
	position:relative;
	color:#445;
	background-color:rgba(255,255,255,0);
	z-index:1;
}
section.example > div.inner > p.explanation{
	opacity:0;
}
section.example > div.inner > h2.title{
	position:relative;
	z-index:2;
	height:2em;
	line-height:2em;
	display:inline-block;
	margin:0 auto;
	padding:0 1.5em;
	background-color:rgba(0,0,0,0);
	color:rgba(255,255,255,0);
}
section.example > div.inner > h2.title::before{
	content:'';
	position:absolute;
	width:0;
	height:0;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:block;
	box-sizing:border-box;
	border-radius:1em;
	z-index:-1;
	background-color:#0bf;
	opacity:0;
}
section.example.visible > div.inner > h2.title::before{
	animation:titlewrap 300ms linear 1200ms forwards;
}
section.example.visible > div.inner > h2.title{
	animation:titletext-light 600ms ease-out 1400ms forwards;
}
section.example.visible > div.inner > p.explanation{
	animation:fadeup 900ms ease-out 1400ms forwards;
}

div.contactbtnarea{
	text-align:center;
	position:relative;
	z-index:2;
	padding:0 0 100px 0;
	background-image:url(../img/bg/contact.png);
	background-position:center bottom;
	background-repeat:repeat-x;
	background-size:300px 150px;
	overflow:hidden;
}
body.edge div.contactbtnarea,
body.chrome  div.contactbtnarea,
body.firefox div.contactbtnarea{
	background-image:url(../img/bg/contact.webp);
}
div.contactbtnarea::after{
	width:100%;
	height:20px;
	content:'';
	position:absolute;
	z-index:1;
	left:0;
	bottom:0;
}
div.contactbtnarea div.btnwrap > *{
	position:relative;
	z-index:3;
	margin:0 auto;
	text-decoration:none;
	overflow:hidden;
	display:table;
	opacity:0;
	border-radius:10px;
	font-weight:700;
}
div.contactbtnarea div.btnwrap > *::before{
	content:'';
	display:block;
	top:5px;
	right:5px;
	bottom:5px;
	left:5px;
	position:absolute;
	z-index:-1;
	border-radius:5px;
}
div.contactbtnarea div.btnwrap > * span{
	position:absolute;
	display:block;
	width:30px;
	height:30px;
	left:10px;
	top:50%;
	transform:translateY(-50%);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
div.contactbtnarea div.btnwrap.dark > *{
	background-color:rgba(255,255,255,0.5);
	color:#445;
}
div.contactbtnarea div.btnwrap.dark > *::before{
	background-color:#fff;
}
div.contactbtnarea  div.btnwrap.light > *{
	background-color:rgba(68,68,85,0.5);
	color:#fff;
}
div.contactbtnarea  div.btnwrap.light > *::before{
	background-color:#445;
}
div.contactbtnarea.visible div.btnwrap > *{
	animation:fadeup 600ms ease-out 600ms forwards;
}
div.contactbtnarea > picture{
	position:absolute;
	bottom:0;
	transform:translateY(100%);
	transition:all 0.9s ease;
}
div.contactbtnarea.visible > picture{
	transform:translateY(0);
}
div.contactbtnarea img{
	width:100%;
}

section.contents.explanation{
	border-top:solid 1px #dbdbdb;
	position:relative;
	z-index:1;
	text-align:center;
}
section.contents.explanation::before{
	content:'WEBSITE PRODUCTION';
	font-family:'Oswald';
	color:#f2f2f6;
	text-shadow:3px 3px 6px #dfdfe2,-3px -3px 6px #fff;
	opacity:0;
	display:block;
	background-color:rgba(68,68,85,0);
}
section.contents.explanation.visible::before{
	animation:neumorphism-fade-in 600ms ease-in 200ms forwards;
}
section.contents.explanation::after{
	content:'';
	display:block;
	width:100%;
	padding:30px 0 0 0;
	border-bottom:solid 1px #dbdbdb;
}
section.contents.explanation > div.wrapblock{
	display:inline-block;
	position:relative;
	z-index:1;
}
section.contents.explanation > div.wrapblock::before{
	display:block;
	border-radius:20px;
	box-shadow:5px 5px 10px #e6e6ea,-5px -5px 10px #fefeff;
	position:absolute;
	z-index:-1;
	top:0;
	right:0;
	bottom:0;
	left:0;
	content:'';
	opacity:0;
}
section.contents.explanation.visible > div.wrapblock::before{
	animation:neumorphism-fade-in 600ms ease-in 600ms forwards;
}
section.contents.explanation div.genrelistinner article{
	position:relative;
	z-index:1;
}
section.contents.explanation div.genrelistinner article::after{
	position:absolute;
	z-index:-1;
	display:block;
	content:'';
	top:0;
	right:0;
	bottom:0;
	left:0;
	border-radius:10px;
	box-shadow:3px 3px 6px #dfdfe2,-3px -3px 6px #fff;
	transition:all 0.3s ease;
	opacity:0;
}
section.contents.explanation div.genrelistinner article.visible::after{
	animation:neumorphism-fade-in 600ms ease-in forwards;
}
section.contents.explanation div.genrelistinner article.active::after{
	box-shadow:inset 3px 3px 6px #dfdfe2,inset -3px -3px 6px #fff;
}
section.contents.explanation div.genrelistinner article h2,
section.contents.explanation div.genrelistinner article p{
	opacity:0;
}
section.contents.explanation div.genrelistinner article div.genrebtn{
	position:relative;
	z-index:1;
	display:inline-block;
	background-color:rgba(68,68,85,0);
	color:#FFF;
	font-weight:700;
	cursor:pointer;
	opacity:0;
}
section.contents.explanation div.genrelistinner article div.genrebtn::after{
	display:block;
	content:'';
	border-radius:6px;
	position:absolute;
	z-index:-1;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
section.contents.explanation div.genrelistinner article.corporate div.genrebtn::after{
	background-color:#0bf;
}
section.contents.explanation div.genrelistinner article.onlineshop div.genrebtn::after{
	background-color:#fb6;
}
section.contents.explanation div.genrelistinner article.landing div.genrebtn::after{
	background-color:#FC3;
}
section.contents.explanation div.genrelistinner article.recruit div.genrebtn::after{
	background-color:#f99;
}
section.contents.explanation div.genrelistinner article.websystem div.genrebtn::after{
	background-color:#C69;
}
section.contents.explanation div.genrelistinner article.portalsite div.genrebtn::after{
	background-color:#9C3;
}
section.contents.explanation div.genrelistinner article.visible h2{
	animation:fadezoom 300ms ease-in 300ms forwards;
}
section.contents.explanation div.genrelistinner article.visible p{
	animation:fadezoom 300ms ease-in 600ms forwards;
}
section.contents.explanation div.genrelistinner article.visible div.genrebtn{
	animation:fadezoom 300ms ease-in 900ms forwards;
}


:root{
  --move-btn-color:#445;
}
section.contents.explanation div.swipemenuwrap{
	position:sticky;
	z-index:8000;
	background-color:#f2f2f6;
}
section.contents.explanation div.swipemenuwrap div.swipemenucontainer{
	padding:7px 0;
}
section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu{
	box-shadow:3px 3px 6px #dfdfe2,-3px -3px 6px #fff;
}
section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu span{
	background-color:rgba(242,242,248,0);
	color:#445;
}
section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu.corporate.swipeactive{
	background-color:#68d6ff;
	box-shadow:inset 2px 2px 4px #60c5eb,inset -2px -2px 4px #70e7ff;
}
section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu.onlineshop.swipeactive{
	background-color:#fb6;
	box-shadow:inset 2px 2px 4px #ebac5e,inset -2px -2px 4px #ffca6e;
}
section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu.landing.swipeactive{
	background-color:#ffff80;
	box-shadow:inset 2px 2px 4px #ebeb76,inset -2px -2px 4px #ffff8a;
}
section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu.recruit.swipeactive{
	background-color:#f99;
	box-shadow:inset 2px 2px 4px #eb8d8d,inset -2px -2px 4px #ffa5a5;
}
section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu.websystem.swipeactive{
	background-color:#dab5ff;
	box-shadow:inset 2px 2px 4px #c9a7eb,inset -2px -2px 4px #ebc3ff;
}
section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu.portalsite.swipeactive{
	background-color:#9C3;
	box-shadow:inset 2px 2px 4px #8dbc2f,inset -2px -2px 4px #a5dc37;
}
section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu::after,
section.contents.explanation div.swipemenuwrap div.swipemenuinner span.btnbg{
	background-color:#445;
}
section.website .swipechangetarget .swipeitem{
	background-color:#f2f2f6;
}
section.contents.explanation div.swipechangetarget{
}
section.contents.explanation div.swipechangetargetinner{
}
section.contents.explanation div.swipechangetargetinner div.swipemenuviewarea > article{
	background-color:#f2f2f6;
	background:-webkit-linear-gradient(left,rgba(239,239,243,1) 0%,rgba(242,242,246,1) 25%,rgba(242,242,246,1) 75%,rgba(239,239,243,1) 100%);
	background:linear-gradient(to right, rgba(239,239,243,1) 0%,rgba(242,242,246,1) 25%,rgba(242,242,246,1) 75%,rgba(239,239,243,1) 100%);
}
section.contents.explanation div.swipechangetargetinner article div.titleblock{
	position:relative;
	z-index:1;
}
section.contents.explanation div.swipechangetargetinner article div.titleblock::after{
	content:'';
	display:block;
	position:absolute;
	z-index:-1;
	top:0;
	right:0;
	bottom:0;
	left:0;
	border-radius:20px;
	opacity:0;
}
section.contents.explanation div.swipechangetargetinner article.swipeactive div.titleblock::after{
	animation:neumorphism-fade-in 400ms ease-in 200ms forwards;
}
section.contents.explanation div.swipechangetargetinner article div.targetinner::before{
	font-family:'Oswald';
	display:block;
	opacity:0.5;
}
section.contents.explanation div.swipechangetargetinner article.corporate div.targetinner::before{
	content:'CORPORATE SITE';
	color:#0bf;
}
section.contents.explanation div.swipechangetargetinner article.corporate  div.titleblock::after{
	background-color:#68d6ff;
	box-shadow:inset 5px 5px 10px #60c5eb,inset -5px -5px 10px #70e7ff;
}
section.contents.explanation div.swipechangetargetinner article.onlineshop div.targetinner::before{
	content:'ELECTRONIC COMMERCE SITE';
	color:#fb6;
}
section.contents.explanation div.swipechangetargetinner article.onlineshop div.titleblock::after{
	background-color:#fb6;
	box-shadow:inset 5px 5px 10px #ebac5e,inset -5px -5px 10px #ffca6e;
}
section.contents.explanation div.swipechangetargetinner article.landing div.targetinner::before{
	content:'LANDING PAGE';
	color:#FC3;
}
section.contents.explanation div.swipechangetargetinner article.landing div.targetinner div.titleblock::after{
	background-color:#ffff80;
	box-shadow:inset 5px 5px 10px #ebeb76,inset -5px -5px 10px #ffff8a;
}
section.contents.explanation div.swipechangetargetinner article.recruit div.targetinner::before{
	content:'RECRUITMENT SITE';
	color:#F60;
}
section.contents.explanation div.swipechangetargetinner article.recruit div.targetinner div.titleblock::after{
	background-color:#f99;
	box-shadow:inset 5px 5px 10px #eb9c9c,inset -5px -5px 10px #ffb8b8;
}
section.contents.explanation div.swipechangetargetinner article.websystem div.targetinner::before{
	content:'WEB SYSTEM';
	color:#C69;
}
section.contents.explanation div.swipechangetargetinner article.websystem div.titleblock::after{
	background-color:#dab5ff;
	box-shadow:inset 5px 5px 10px #c9a7eb,inset -5px -5px 10px #ebc3ff;
}
section.contents.explanation div.swipechangetargetinner article.portalsite div.targetinner::before{
	content:'PORTAL SITE';
	color:#9C3;
}
section.contents.explanation div.swipechangetargetinner article.portalsite  div.titleblock::after{
	background-color:#9c3;
	box-shadow:inset 5px 5px 10px #8dbc2f,inset -5px -5px 10px #a5dc37;
}
section.contents.explanation div.swipechangetargetinner article p{
	text-align:left;
}
section.contents.explanation div.swipechangetargetinner article div.incontents{
	background-color:#f2f2f6;
	position:relative;
	z-index:1;
	border-radius:6px;
}
div.swipenavibox{
	text-align:center;
	padding:15px 0 22px 0;
	position:sticky;
	top:84px;
	z-index:3;
}
div.swipenavibox div{
	display:flex;
	margin:0 auto;
	justify-content:center;
}
div.swipenavibox span{
	padding:0 0.5em;
	flex-shrink:0;
}
div.swipenavibox span::before{
	content:'SWIPE';
	font-family:'Oswald';
	color:#668;
}
div.swipenavibox div::before,
div.swipenavibox div::after{
	display:block;
	content:'';
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	flex-shrink:0;
}
div.swipenavibox div::before{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 32"><path fill="%23668" d="M48 25.6c5.299 0 9.6-4.301 9.6-9.6s-4.301-9.6-9.6-9.6c-4.173 0-7.69 2.682-9.011 6.4h-16.816v-9.6l-22.173 12.8 22.173 12.8v-9.6h16.816c1.322 3.718 4.838 6.4 9.011 6.4zM48 0c-6.56 0-12.179 3.952-14.65 9.6h3.629c2.221-3.808 6.304-6.4 11.021-6.4 7.059 0 12.8 5.741 12.8 12.8s-5.741 12.8-12.8 12.8c-4.717 0-8.8-2.592-11.021-6.4h-3.629c2.47 5.648 8.090 9.6 14.65 9.6 8.838 0 16-7.162 16-16s-7.162-16-16-16z" /></svg>');
}
div.swipenavibox div::after{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 64 32"><path fill="%23668" d="M16 28.8c-7.059 0-12.8-5.741-12.8-12.8s5.741-12.8 12.8-12.8c4.717 0 8.8 2.592 11.021 6.4h3.629c-2.47-5.648-8.090-9.6-14.65-9.6-8.838 0-16 7.162-16 16s7.162 16 16 16c6.56 0 12.179-3.952 14.65-9.6h-3.629c-2.221 3.808-6.304 6.4-11.021 6.4zM64 16l-22.173-12.8v9.6h-16.816c-1.322-3.718-4.838-6.4-9.011-6.4-5.299 0-9.6 4.301-9.6 9.6s4.301 9.6 9.6 9.6c4.173 0 7.69-2.682 9.011-6.4h16.816v9.6l22.173-12.8z" /></svg>');
}


section.businesslist{
	background-color:#f2f2f6;
	position:relative;
	z-index:2;
}
section.businesslist div.inner{
	position:relative;
	z-index:2;
	text-align:center;
}
section.businesslist div.inner > h2{
	position:relative;
	z-index:1;
	height:2em;
	line-height:2em;
	display:inline-block;
	margin: 0 auto;
	padding: 0 1.5em;
	background-color: rgba(0,0,0,0);
	color:#FFF;
}
section.businesslist div.inner > h2::before{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: block;
	box-sizing: border-box;
	border-radius: 1em;
	z-index: -1;
	background-color:#445;
	opacity: 0;
}
section.businesslist.visible div.inner > h2::before{
	animation:titlewrap 300ms linear forwards;
}
section.businesslist div.inner > p.explanation {
	padding:20px 0 0 0;
}
section.businesslist.visible div.inner > p.explanation{
	animation: fadeup 900ms ease-out 300ms forwards;
}
section.businesslist div.video{
	position:absolute;
	z-index:1;
	overflow:hidden;
	bottom:0;
	left:0;
	right:0;
}
section.businesslist div.video video{
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
section.businesslist div.video::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
}
section.businesslist div.video::after{
	z-index:2;
	background:radial-gradient(rgba(242,242,246,0.9) 1px, rgba(242,242,246,0.7) 0),radial-gradient(rgba(242,242,246,0.9) 1px, rgba(242,242,246,0.7) 0);
	background-position:0px 0,3px 3px;
	background-size:6px 6px;
}
section.businesslist div.listwrap div.listitem{
	position:relative;
	z-index:1;
	opacity:0;
}
section.businesslist div.listwrap div.listitem.visible{
	animation:fadeup 600ms ease-out forwards;
}
section.businesslist div.listwrap div.listitem::before{
	display:block;
	text-align:left;
	position:absolute;
	z-index:2;
	font-family:'Oswald';
	opacity:0;
}
section.businesslist div.listwrap div.listitem.visible::before{
	animation:fadeleft 600ms ease-out 300ms forwards;
}
section.businesslist div.listwrap div.listitem.graphic::before{
	content:'GRAPHIC DESIGN'
}
section.businesslist div.listwrap div.listitem.website::before{
	content:'WEBSITE PRODUCTION'
}
section.businesslist div.listwrap div.listitem.system::before{
	content:'SYSTEM CONSTRUCTION'
}
section.businesslist div.listwrap div.listitem.management::before{
	content:'WEBSITE MANAGEMENT'
}
section.businesslist div.listwrap div.listitem div.bg{
	display:block;
	position:absolute;
	z-index:-1;
	transform-origin:center center;
	overflow:hidden;
}
section.businesslist div.listwrap div.listitem div.bg > div{
	position:absolute;
	z-index:1;
}
section.businesslist div.listwrap div.listitem div.bg > div > div{
	position:relative;
	z-index:1;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
section.businesslist div.listwrap div.listbtn{
	overflow:hidden;
	position:relative;
	z-index:1;
	opacity:0;
}
section.businesslist div.listwrap div.listitem.visible div.listbtn{
	animation:faderight 600ms ease-out 600ms forwards;
}
section.businesslist div.listwrap div.listbtn video{
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:100%;
	filter:invert(100%);
}
section.businesslist div.listwrap div.listbtn a{
	text-decoration:none;
	display:block;
	position:relative;
	z-index:2;
}
section.businesslist div.listwrap div.listbtn a h3{
	color:#fff;
	background-color:rgba(68,68,85,0.5);
}
section.businesslist div.listwrap div.listbtn a::before{
	position:absolute;
	content:'';
	display:block;
	width:20px;
	height:20px;
	right:15px;
	top:50%;
	transform:translateY(-50%);
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23FFF" d="M16 0c-8.295 0-15.116 6.315-15.919 14.399h19.281l-5.565-5.566c-0.625-0.623-0.624-1.637 0-2.26 0.626-0.627 1.637-0.627 2.262-0.002l9.428 9.429-9.427 9.427c-0.313 0.313-0.722 0.468-1.132 0.468-0.411 0-0.818-0.155-1.132-0.468-0.625-0.625-0.625-1.637 0-2.262l5.566-5.566h-19.282c0.802 8.085 7.622 14.401 15.919 14.401 8.836 0 16-7.164 16-16s-7.164-16-16-16z" /></svg>');
	background-repeat:no-repeat;
	background-size:20px 20px;
	background-position:center center;
	z-index:2;
}

section.website div.animation_01{
	display:flex;
	justify-content:center;
	overflow:hidden;
	position:relative;
	z-index:1;
}
section.website div.animation_01 div.line{
	margin:0 auto;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
	z-index:1;
}
section.website div.animation_01 div.line::after{
	position:absolute;
	z-index:1;
	content:'WEBSITE PRODUCTION BY GRANTEST INC. >>';
	font-family:'Oswald';
	font-size:12px;
}
section.website div.animation_01 div.line > span.lineitem{
	position:absolute;
	z-index:1;
	top:50%;
	transform:translate(-50%,-50%);
}
section.website div.animation_01 span{
	display:block;
}
section.website div.animation_01 span.request{
}
section.website div.animation_01 span.meeting{
}
section.website div.animation_01 span.production{
	left:50%;
}
section.website div.animation_01 span.complete{
}
section.website div.animation_01 span.bindingtarget{
}
section.website div.animation_01 span.baseinner{
	position:relative;
	z-index:1;
}
section.website div.animation_01 span.baseinner span.svgbg{
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	position:absolute;
	z-index:2;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	transform-origin:left top;
	opacity:0;
}
section.website div.animation_01 span.request span.baseinner span.svgbg{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMid"><path fill="%23445" d="M16 28.8c-7.058 0-12.8-5.742-12.8-12.8s5.742-12.8 12.8-12.8c5.36 0 9.954 3.316 11.858 8h3.408c-2.039-6.491-8.102-11.2-15.266-11.2-8.838 0-16 7.162-16 16 0 8.836 7.162 16 16 16 7.163 0 13.226-4.71 15.266-11.2h-3.408c-1.904 4.684-6.498 8-11.858 8z" /></svg>');
}
.ie section.website div.animation_01 span.request span.baseinner span.svgbg{
	background-image:url(../img/website/circle_01.png);
}
section.website div.animation_01 span.meeting span.baseinner span.svgbg{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMid"><path fill="%23445" d="M16 3.2c5.36 0 9.954 3.315 11.858 8h3.408c-2.039-6.491-8.102-11.2-15.266-11.2s-13.226 4.709-15.266 11.2h3.408c1.904-4.685 6.498-8 11.858-8zM16 28.8c-5.36 0-9.954-3.315-11.858-8h-3.408c2.039 6.49 8.101 11.2 15.266 11.2 7.163 0 13.226-4.71 15.266-11.2h-3.408c-1.904 4.685-6.498 8-11.858 8z" /></svg>');
}
.ie section.website div.animation_01 span.meeting span.baseinner span.svgbg{
	background-image:url(../img/website/circle_02.png);
}
section.website div.animation_01 span.production span.baseinner span.svgbg{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMid"><path fill="%23445" d="M16 3.2c5.36 0 9.954 3.315 11.858 8h3.408c-2.039-6.491-8.102-11.2-15.266-11.2s-13.226 4.709-15.266 11.2h3.408c1.904-4.685 6.498-8 11.858-8zM16 28.8c-5.36 0-9.954-3.315-11.858-8h-3.408c2.039 6.49 8.101 11.2 15.266 11.2 7.163 0 13.226-4.71 15.266-11.2h-3.408c-1.904 4.685-6.498 8-11.858 8z" /></svg>');
}
.ie section.website div.animation_01 span.production span.baseinner span.svgbg{
	background-image:url(../img/website/circle_02.png);
}
section.website div.animation_01 span.complete span.baseinner span.svgbg{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMid"><path fill="%230bf" d="M16 3.2c5.36 0 9.954 3.315 11.858 8h3.408c-2.039-6.491-8.102-11.2-15.266-11.2s-13.226 4.709-15.266 11.2h3.408c1.904-4.685 6.498-8 11.858-8zM16 28.8c-5.36 0-9.954-3.315-11.858-8h-3.408c2.039 6.49 8.101 11.2 15.266 11.2 7.163 0 13.226-4.71 15.266-11.2h-3.408c-1.904 4.685-6.498 8-11.858 8z" /></svg>');
}
.ie section.website div.animation_01 span.complete span.baseinner span.svgbg{
	background-image:url(../img/website/circle_03.png);
}
section.website div.animation_01 span.bindingtarget span.baseinner span.svgbg{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32" preserveAspectRatio="xMinYMid"><path fill="%23ff8080" d="M16 3.2c7.058 0 12.8 5.742 12.8 12.8s-5.742 12.8-12.8 12.8c-5.36 0-9.954-3.316-11.858-8h-3.408c2.039 6.491 8.102 11.2 15.266 11.2 8.838 0 16-7.162 16-16 0-8.836-7.162-16-16-16-7.163 0-13.226 4.71-15.266 11.2h3.408c1.904-4.684 6.498-8 11.858-8z" /></svg>');
}
.ie section.website div.animation_01 span.bindingtarget span.baseinner span.svgbg{
	background-image:url(../img/website/circle_04.png);
}
section.website div.animation_01 span.circle{
	position:absolute;
	z-index:1;
	border-radius:50%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	transform-origin:left top;
	opacity:0;
}
section.website div.animation_01 span.word{
	text-indent:0.25em;
}
section.website div.animation_01 span.word,
section.website div.animation_01 span.complete span.subword{
	position:absolute;
	z-index:2;
	white-space:nowrap;
}
section.website div.animation_01 span.word::before,
section.website div.animation_01 span.complete span.subword::before{
	font-family:'Oswald';
	opacity:0;
	position:relative;
	z-index:1;
}
section.website div.animation_01 span.request span.word::before{
	content:'Request';
}
section.website div.animation_01 span.meeting span.word::before{
	content:'Meeting';
}
section.website div.animation_01 span.production span.word::before{
	content:'Production';
}
section.website div.animation_01 span.complete span.word::before{
	content:'Complete';
}
section.website div.animation_01 span.bindingtarget span.word::before{
	content:'Binding Target';
	color:#ff8080;
}
section.website div.animation_01 span.complete span.subword::before{
	content:'Starting Point';
	color:#0bf;
}
section.website div.animation_01 span.lineitem .word::after,
section.website div.animation_01 span.lineitem .subword::after{
	content:'';
	position:absolute;
	z-index:-1;
	display:block;
}
section.website div.animation_01 span.lineitem:not(.bindingtarget) .word::after{
	background-color:#445;
	transform:rotate(-45deg);
	transform-origin:left bottom;
}
section.website div.animation_01 span.lineitem .word::after,
section.website div.animation_01 span.lineitem .subword::after{
	opacity:0;
}
section.website div.animation_01 span.lineitem.bindingtarget .word::after{
	background-color:#ff8080;
	transform:rotate(-45deg);
	transform-origin:right top;
}
section.website div.animation_01 span.lineitem.complete .subword::after{
	background-color:#0bf;
	transform:rotate(-45deg);
	transform-origin:right top;
}
section.website div.animation_01 span.complete .word::after{
	background: -webkit-linear-gradient(left, rgba(0,187,255,1) 0%,rgba(68,68,85,1) 100%);
	background: linear-gradient(to right, rgba(0,187,255,1) 0%,rgba(68,68,85,1) 100%);
}
section.website div.animation_01 span.line{
	position:absolute;
	z-index:1;
	top:50%;
	left:50%;
	transform:translateY(-50%);
	background-color:#445;
	opacity:0;
}
section.website div.animation_01 span.production span.line{
	background: -webkit-linear-gradient(left, rgba(68,68,85,1) 0%,rgba(0,187,255,1) 100%);
	background: linear-gradient(to right, rgba(68,68,85,1) 0%,rgba(0,187,255,1) 100%);
}
section.website div.animation_01 span.complete span.line{
	background: -webkit-linear-gradient(left, rgba(0,187,255,1) 0%,rgba(255,128,128,1) 100%);
	background: linear-gradient(to right, rgba(0,187,255,1) 0%,rgba(255,128,128,1) 100%);
}
section.website div.animation_01.visible span.request span.circle{
	animation:website-bounce-in 400ms ease-in 300ms forwards;
}
section.website div.animation_01.visible span.request span.svgbg{
	animation:website-bounce-in 400ms ease-in 400ms forwards;
}
section.website div.animation_01.visible span.request span.word::after{
	animation:website-line 300ms ease-in 700ms forwards;
}
section.website div.animation_01.visible span.request span.word::before{
	animation:website-word-left 300ms ease-in 900ms forwards;
}
section.website div.animation_01.visible span.request span.line{
	animation:website-line 500ms ease-in 400ms forwards;
}

section.website div.animation_01.visible span.meeting span.circle{
	animation:website-bounce-in 400ms ease-in 900ms forwards;
}
section.website div.animation_01.visible span.meeting span.svgbg{
	animation:website-bounce-in 400ms ease-in 1000ms forwards;
}
section.website div.animation_01.visible span.meeting span.word::after{
	animation:website-line 300ms ease-in 1300ms forwards;
}
section.website div.animation_01.visible span.meeting span.word::before{
	animation:website-word-left 300ms ease-in 1500ms forwards;
}
section.website div.animation_01.visible span.meeting span.line{
	animation:website-line 500ms ease-in 1000ms forwards;
}

section.website div.animation_01.visible span.production span.circle{
	animation:website-bounce-in 400ms ease-in 1500ms forwards;
}
section.website div.animation_01.visible span.production span.svgbg{
	animation:website-bounce-in 400ms ease-in 1600ms forwards;
}
section.website div.animation_01.visible span.production span.word::after{
	animation:website-line 300ms ease-in 1900ms forwards;
}
section.website div.animation_01.visible span.production span.word::before{
	animation:website-word-left 300ms ease-in 2100ms forwards;
}
section.website div.animation_01.visible span.production span.line{
	animation:website-line 500ms ease-in 1600ms forwards;
}

section.website div.animation_01.visible span.complete span.circle{
	animation:website-bounce-in 400ms ease-in 2100ms forwards;
}
section.website div.animation_01.visible span.complete span.svgbg{
	animation:website-bounce-in 400ms ease-in 2200ms forwards;
}
section.website div.animation_01.visible span.complete span.word::after{
	animation:website-line 300ms ease-in 2500ms forwards;
}
section.website div.animation_01.visible span.complete span.word::before{
	animation:website-word-left 300ms ease-in 2700ms forwards;
}
section.website div.animation_01.visible span.complete span.line{
	animation:website-line 500ms ease-in 2200ms forwards;
}

section.website div.animation_01.visible span.bindingtarget span.circle{
	animation:website-bounce-in 400ms ease-in 2700ms forwards;
}
section.website div.animation_01.visible span.bindingtarget span.svgbg{
	animation:website-bounce-in 400ms ease-in 2800ms forwards;
}
section.website div.animation_01.visible span.bindingtarget span.word::after{
	animation:website-line 300ms ease-in 3100ms forwards;
}
section.website div.animation_01.visible span.bindingtarget span.word::before{
	animation:website-word-right 300ms ease-in 3300ms forwards;
}

section.website div.animation_01.visible span.complete span.subword::after{
	animation:website-line 300ms ease-in 3600ms forwards;
}
section.website div.animation_01.visible span.complete span.subword::before{
	animation:website-word-right 300ms ease-in 3800ms forwards;
}


section.website div.animation_02::before{
	content:'インターネットに接続する際に使用する端末';
	color:#0bf;
	font-weight:700;
	display:block;
}
section.website div.animation_02 div.graph{
	position:relative;
	z-index:1;
	display:flex;
}
section.website div.animation_02 div.graph span{
	display:block;
}
section.website div.animation_02 div.graph span.graphitem{
	position:relative;
	z-index:1;
	display:flex;
	align-items:flex-end;
}
section.website div.animation_02 div.graph span.graphitem span.text{
	position:absolute;
	z-index:2;
	top:-22px;
	left:calc( 100% + 10px );
	white-space:nowrap;
	font-size:12px;
	line-height:12px;
	padding:0 0 0 0.2em;
}
section.website div.animation_02 div.graph span.graphitem span.number{
	color:#FFF;
	position:absolute;
	z-index:3;
	top:50%;
	left:50%;
	transform:translate3d(-50%,-50%,0);
	white-space:nowrap;
	font-family:'Oswald';
	opacity:0;
}
section.website div.animation_02 div.graph span.graphitem span.number::after{
	color:#FFF;
	content:'%';
	font-size:12px;
}
section.website div.animation_02 div.graph span.graphitem span.number::before{
	color:#FFF;
	content:attr(Ynum);
	font-size:30px;
}
section.website div.animation_02 div.graph span.graphitem span.text::before{
	display:block;
	transform:translateY(-2px);
	opacity:0;
}
section.website div.animation_02 div.graph span.graphitem span.text::after{
	content: '';
	width:0;
	height:0;
	display:block;
	position:absolute;
	z-index:1;
	bottom:-1px;
	left:0;
	border-top:solid 1px #445;
}
section.website div.animation_02 div.graph span.graphitem span.graphbg::after{
	content: '';
	width:0;
	height:0;
	display:block;
	position:absolute;
	z-index:1;
	top:0px;
	right:1px;
	transform-origin:bottom right;
	transform:rotate(135deg);
	border-top:solid 1px #445;
	transition:all 0.3s ease;
}
section.website div.animation_02 div.graph span.smartphone span.text::before{
	content:'スマートフォン';
}
section.website div.animation_02 div.graph span.pc span.text::before{
	content:'パソコン';
}
section.website div.animation_02 div.graph span.tablet span.text::before{
	content:'その他の端末';
}
section.website div.animation_02 div.graph span.graphitem span.graphbody{
	position:relative;
	z-index:1;
	width:100%;
	left:0;
	bottom:0;
	display:flex;
	align-items:flex-end;
}
section.website div.animation_02 div.graph span.smartphone span.graphbody{
	height:89.1%;
}
section.website div.animation_02 div.graph span.pc span.graphbody{
	height:68.025%;
}
section.website div.animation_02 div.graph span.tablet span.graphbody{
	height:30.125%;
}
section.website div.animation_02 div.graph span.graphitem span.graphbg{
	position:relative;
	z-index:1;
	width:100%;
	height:0;
	left:0;
	bottom:0;
	background-color:#445;
}
section.website div.animation_02.visible div.graph span.graphitem.visible span.graphbg::after{
	width:15px;
}
section.website div.animation_02.visible div.graph span.graphitem.visible span.text::after{
	animation:underline 300ms ease-in 300ms forwards;
}
section.website div.animation_02 div.graph span.graphitem.visible span.text::before{
	animation:graph-text-in 300ms ease-in 500ms forwards;
}
section.website div.animation_02.visible div.graph span.smartphone.visible span.graphbg{
	animation:graph-bounce 1760ms ease-in 600ms forwards;
}
section.website div.animation_02.visible div.graph span.pc.visible span.graphbg{
	animation:graph-bounce 1400ms ease-in 600ms forwards;
}
section.website div.animation_02.visible div.graph span.tablet.visible span.graphbg{
	animation:graph-bounce 935ms ease-in 600ms forwards;
}
section.website div.animation_02 div.graph span.graphitem.visible span.number{
	animation:graph-number-in 600ms ease-in 900ms forwards;
}
section.website div.supplementary a{
	text-decoration:underline;
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M10.667 22.4h14.933c1.178 0 2.133-0.956 2.133-2.133v-12.8c0-1.178-0.956-2.133-2.133-2.133h-14.933c-1.178 0-2.133 0.956-2.133 2.133v12.8c0 1.178 0.956 2.133 2.133 2.133zM25.6 20.267h-14.933v-12.8h14.933v12.8zM4.267 11.733v12.8c0 1.178 0.956 2.133 2.133 2.133h14.933c1.178 0 2.133-0.956 2.133-2.133h-17.067v-14.933c-1.178 0-2.133 0.956-2.133 2.133z" /></svg>');
	background-position:center right;
	background-size:16px 16px;
	background-repeat:no-repeat;
	padding:0 1.2em 0 0;
	opacity:0.8;
}
@keyframes font-color-0bf{
	100%{
		color:#0bf;
	}
}
@keyframes font-color-ff8080{
	100%{
		color:#ff8080;
	}
}
@keyframes font-small{
	100%{
		transform:scale(0.8);
		opacity:0.7;
	}
}
span.colorchange{
	background-color:rgba(255,255,255,0);
	color:rgba(0,0,0,0);
	position:relative;
	z-index:1;
	font-size:105%;
	font-weight:700;
}
span.colorchange.type_0bf{
	animation:font-color-0bf 300ms forwards;
}
span.colorchange.type_ff8080{
	animation:font-color-ff8080 300ms forwards;
}
span.strong{
	font-size:105%;
	font-weight:700;
}
span.changewrap{
	position:relative;
	z-index:1;
}
span.smallnone,
span.none{
	position:absolute;
	z-index:1;
	background-color:rgba(255,255,255,0);
	color:rgba(0,0,0,0);
	transform:scale(0);
}
span.small{
	animation:font-small 300ms forwards;
}
section.system > div.animation.type_01{
	position:relative;
	z-index:1;
	max-width:600px;
	width:100%;
	margin:0 auto;
	overflow:hidden;
}
section.system > div.animation.type_01 > div.imgwrap img{
	width:100%;
}
section.system > div.animation.type_01 > div.imgwrap div.imginner{
	position:relative;
	z-index:1;
	height:100%;
}
@keyframes line-down{
	0% {
		height:0;
	}
	100%{
		height:30%;
	}
}
@keyframes title-fade-in{
	0% {
		opacity:0;
		transform:translate3d(10%,0,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(n+2) div.imginner::before{
	position:absolute;
	z-index:1;
	content:'';
	width:2px;
	height:0;
	background-color:#445;
	display:block;
}
section.system > div.animation.type_01 > div.imgwrap.visible:nth-of-type(n+2) div.imginner::before{
	animation:line-down 400ms ease-in forwards;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(n+2) div.imginner::after{
	position:absolute;
	z-index:1;
	color:#445;
	font-family:Oswald;
	opacity:0;
}
section.system > div.animation.type_01 > div.imgwrap.visible:nth-of-type(n+2) div.imginner::after{
	animation:title-fade-in 600ms ease-in 400ms forwards;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(2) div.imginner::before{
	bottom:-20%;
	left:50%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(2) div.imginner::after{
	content:'INFORMATION SHARING';
	bottom:-20%;
	left:60%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(3) div.imginner::before{
	top:-10%;
	left:50%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(3) div.imginner::after{
	content:'UNDERSTAND THE STATE';
	top:-10%;
	left:60%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(4) div.imginner::before{
	bottom:-20%;
	left:50%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(4) div.imginner::after{
	content:'CONVEY INFORMATION';
	bottom:-20%;
	left:60%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(5) div.imginner::before{
	top:-30%;
	left:50%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(5) div.imginner::after{
	content:'EASY TO USE';
	top:-30%;
	left:60%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(6) div.imginner::before{
	bottom:-20%;
	left:35%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(6) div.imginner::after{
	content:'CAN BE USED ANYWHERE';
	bottom:-20%;
	left:45%;
	width:80%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(1){
	position:relative;
	z-index:1;
	width:100%;
	top:0;
	left:0;
	opacity:0;
}
section.system > div.animation.type_01 > div.imgwrap.visible:nth-of-type(1){
	animation:bounce-up 600ms ease-in forwards;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(n+2){
	position:absolute;
	z-index:2;
	width:25%;
	height:50%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(n+2) div.imginner figure{
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(n+2) div.imginner figure:nth-child(1){
	z-index:2;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(n+2) div.imginner figure:nth-child(2){
	z-index:3;
}
@keyframes bounce-up{
	0% {
		opacity:0;
		transform:translate3d(0,20%,0);
	}
	45%{
		opacity:1;
		transform:translate3d(0,-3%,0);
	}
	80%{
		opacity:1;
		transform:translate3d(0,3%,0);
	}
	100%{
		opacity:1;
		transform:translate3d(0,0,0);
	}
}
section.system > div.animation.type_01 > div.imgwrap.visible:nth-of-type(n+2) figure:nth-child(1){
	animation:bounce-up 600ms ease-in forwards;
}
section.system > div.animation.type_01 > div.imgwrap.visible:nth-of-type(n+2) figure:nth-child(2){
	animation:bounce-up 600ms ease-in 300ms forwards;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(2){
	top:35%;
	left:0;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(3){
	top:10%;
	left:15%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(4){
	top:35%;
	left:33%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(5){
	top:20%;
	left:52%;
}
section.system > div.animation.type_01 > div.imgwrap:nth-of-type(6){
	top:35%;
	left:70%;
}
section.system > ul{
	list-style:none;
	list-style-position:outside;
	opacity:0;
	animation:fadeup 900ms ease-out 600ms forwards;
}
section.system > ul.type_01 li{
	position:relative;
	z-index:1;
	padding:0 0 0 2em;
	line-height:1.5em;
	margin:0 0 1em 0;
}
section.system > ul.type_01 li::before,
section.system > ul.type_01 li::after{
	position:absolute;
	content:'';
	display:block;
}
section.system > ul.type_01 li::before{
	width:1.5em;
	height:1.5em;
	box-sizing:border-box;
	border:solid 2px #dbdbdb;
	left:0;
	top:0;
}
section.system > ul.type_01 li::after{
	width:1em;
	height:0.5em;
	border-left:3px solid #339;
	border-bottom:3px solid #339;
	top:0.2em;
	left:0.1em;
	transform:rotate(-45deg);
}
section.system > div.box_01{
	background:url(../img/website/bg_001.png) no-repeat left top, url(../img/website/bg_002.png) no-repeat right bottom;
}
section.systemexample div.animation.type_02{
	text-align:center;
	margin:0 10px 0 auto;
}
section.systemexample div.animation.type_02 > div{
	position:relative;
	z-index:1;
	margin:0 auto;
}
section.systemexample div.animation.type_02 > div figure img{
	width:100%;
}
section.systemexample div.animation.type_02 > div > figure{
	opacity:0;
}
section.systemexample div.animation.type_02 > div > figure:nth-of-type(1){
}
section.systemexample div.animation.type_02 > div > div,
section.systemexample div.animation.type_02 > div > div figure{
	position:absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
@keyframes shadow-in{
	0% {
		opacity:0;
	}
	100%{
		opacity:0.2;
	}
}
@keyframes shadow-opacity{
	0% {
		opacity:0.2;
	}
	50%{
		opacity:0.4;
	}
	100%{
		opacity:0.2;
	}
}
@keyframes box-hover{
	0% {
		transform:translateY(0);
	}
	50%{
		transform:translateY(5%);
	}
	100%{
		transform:translateY(0);
	}
}
section.systemexample div.animation.type_02 > div > div figure{
	opacity:0;
}
section.systemexample div.animation.type_02.visible > div > figure{
	animation:shadow-in 600ms ease-in 300ms forwards,shadow-opacity 3s linear 2100ms infinite;
}
section.systemexample div.animation.type_02 figure.visible{
	animation:bounce-up 300ms ease-in 300ms forwards;
}
section.systemexample div.animation.type_02.visible > div > div{
	animation:box-hover 3s linear 2100ms infinite;
}
section.systemexample div.textwrap{
	display:flex;
	align-items:center;
	justify-content:center;
}
section.systemexample div.textwrap p.text{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	margin:0 auto 0 10px;
	padding:0;
}
@keyframes text-left-fadein{
	0% {
		opacity:0;
		transform:translateX(10%);
	}
	50%{
		transform:translateX(2%);
	}
	100%{
		opacity:1;
		transform:translateX(0);
	}
}
section.systemexample div.textwrap p.text span{
	display:block;
	opacity:0;
}
section.systemexample div.textwrap p.text span.visible{
	animation:text-left-fadein 600ms ease-in 300ms forwards;
}
section.systemexample > h3,
section.systemexample > p.text{
	opacity:0;
}
section.systemexample > h3.visible,
section.systemexample > p.text.visible{
	animation:fadeup 600ms ease-out forwards;
}
section.systemexample > div.listbox{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}
section.systemexample > div.listbox dl{
	background-image:url(../img/system/011.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	box-sizing:border-box;
	padding:1em;
	box-shadow:5px 5px 10px #ceced1,-5px -5px 10px #fff;
	border-radius:15px;
	opacity:0;
}
section.systemexample > div.listbox dl.visible{
	animation:fadeup 600ms ease-out forwards;
}
section.systemexample > div.listbox dl dt{
	font-weight:700;
}
section.management > figure img{
	width:100%;
}
section.management div.inner article.supportlistwrap{
	position:relative;
	z-index:1;
}
section.management div.inner article h2{
	position:relative;
	z-index:1;
	background-repeat:no-repeat;
	background-position:center top;
}
section.management div.inner article h2.sitesupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M15.467 23.369v-3.611c-0.855 0.058-1.689 0.247-2.471 0.567 0.614 1.642 1.54 2.732 2.471 3.043zM12.995 11.674c0.783 0.32 1.617 0.511 2.471 0.567v-3.61c-0.931 0.311-1.857 1.402-2.471 3.042zM20.785 15.467h2.654c-0.113-1.595-0.723-3.055-1.684-4.218-0.455 0.377-0.942 0.705-1.453 0.985 0.274 0.986 0.443 2.077 0.483 3.233zM12.282 15.467h3.185v-2.158c-0.964-0.057-1.905-0.258-2.79-0.609-0.218 0.83-0.357 1.759-0.395 2.767zM11.698 12.234c-0.511-0.279-0.998-0.608-1.453-0.985-0.961 1.163-1.571 2.623-1.684 4.218h2.654c0.041-1.156 0.209-2.247 0.483-3.233zM13.195 9.086c-0.819 0.334-1.563 0.811-2.207 1.397 0.332 0.268 0.682 0.506 1.045 0.716 0.315-0.821 0.709-1.533 1.162-2.113zM11.215 16.533h-2.655c0.113 1.595 0.723 3.055 1.684 4.218 0.455-0.377 0.942-0.705 1.453-0.985-0.273-0.986-0.442-2.077-0.482-3.233zM10.988 21.518c0.644 0.587 1.389 1.063 2.207 1.397-0.452-0.58-0.847-1.292-1.162-2.112-0.365 0.209-0.715 0.447-1.045 0.715zM12.676 19.301c0.885-0.351 1.826-0.554 2.79-0.609v-2.159h-3.185c0.037 1.008 0.177 1.937 0.395 2.768zM20.302 19.766c0.511 0.279 0.998 0.608 1.453 0.985 0.961-1.163 1.571-2.623 1.684-4.218h-2.654c-0.041 1.156-0.209 2.247-0.483 3.233zM16.533 19.758v3.611c0.931-0.311 1.857-1.402 2.471-3.043-0.783-0.319-1.616-0.51-2.471-0.567zM21.012 10.482c-0.644-0.587-1.389-1.063-2.207-1.397 0.452 0.58 0.847 1.292 1.162 2.112 0.365-0.209 0.715-0.447 1.045-0.715zM16 4.267c-3.679 0-7.326 0.735-10.697 2.143l2.796 18.178 7.901 2.873 7.901-2.873 2.796-18.178c-3.371-1.408-7.018-2.143-10.697-2.143zM16 24.533c-4.713 0-8.533-3.821-8.533-8.533s3.821-8.533 8.533-8.533 8.533 3.821 8.533 8.533-3.821 8.533-8.533 8.533zM18.805 22.914c0.819-0.334 1.563-0.811 2.207-1.397-0.332-0.268-0.682-0.506-1.045-0.716-0.315 0.821-0.709 1.533-1.162 2.113zM19.718 16.533h-3.185v2.158c0.964 0.057 1.905 0.258 2.79 0.609 0.218-0.83 0.357-1.759 0.395-2.767zM16.533 8.631v3.611c0.855-0.058 1.689-0.247 2.471-0.567-0.614-1.642-1.54-2.732-2.471-3.043zM19.324 12.699c-0.885 0.351-1.826 0.554-2.79 0.609v2.159h3.185c-0.037-1.008-0.177-1.937-0.395-2.768zM16 0c-5.58 0-10.826 1.431-15.394 3.942l3.661 23.791 11.733 4.267 11.733-4.267 3.661-23.791c-4.569-2.511-9.813-3.942-15.394-3.942zM25.817 26.16l-9.817 3.57-9.817-3.57-3.235-21.027c4.045-1.966 8.527-2.999 13.052-2.999s9.007 1.034 13.052 2.999l-3.235 21.027z" /></svg>');
}
section.management div.inner article h2.browsersupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M16 24.533c4.713 0 8.533-3.821 8.533-8.533s-3.821-8.533-8.533-8.533-8.533 3.821-8.533 8.533 3.821 8.533 8.533 8.533zM18.804 22.915c0.452-0.581 0.847-1.293 1.163-2.113 0.364 0.21 0.714 0.448 1.045 0.716-0.644 0.587-1.389 1.063-2.208 1.397zM21.756 20.751c-0.455-0.378-0.942-0.706-1.454-0.985 0.274-0.986 0.443-2.077 0.483-3.233h2.655c-0.114 1.595-0.723 3.054-1.684 4.218zM23.44 15.467h-2.655c-0.041-1.156-0.209-2.247-0.483-3.233 0.512-0.278 0.998-0.607 1.454-0.985 0.961 1.164 1.57 2.623 1.684 4.218zM21.012 10.482c-0.332 0.268-0.682 0.506-1.045 0.716-0.315-0.821-0.71-1.533-1.163-2.113 0.819 0.334 1.564 0.811 2.208 1.397zM16.533 8.631c0.931 0.311 1.857 1.403 2.471 3.043-0.784 0.32-1.617 0.511-2.471 0.567v-3.611zM16.533 13.309c0.964-0.058 1.905-0.258 2.791-0.609 0.217 0.83 0.356 1.759 0.395 2.768h-3.186v-2.159zM16.533 16.533h3.185c-0.037 1.008-0.178 1.937-0.395 2.768-0.886-0.351-1.827-0.553-2.791-0.609v-2.159zM16.533 19.758c0.855 0.058 1.689 0.247 2.471 0.567-0.614 1.639-1.541 2.732-2.471 3.043v-3.611zM10.988 21.518c0.332-0.268 0.682-0.506 1.045-0.716 0.315 0.821 0.71 1.533 1.163 2.113-0.819-0.334-1.564-0.811-2.208-1.397zM15.467 23.369c-0.931-0.311-1.857-1.403-2.471-3.043 0.784-0.32 1.617-0.511 2.471-0.567v3.611zM15.467 18.691c-0.964 0.058-1.905 0.258-2.791 0.609-0.217-0.83-0.356-1.759-0.395-2.768h3.186v2.159zM15.467 15.467h-3.185c0.037-1.008 0.178-1.937 0.395-2.768 0.886 0.351 1.827 0.553 2.791 0.609v2.159zM15.467 8.631v3.611c-0.855-0.058-1.689-0.247-2.471-0.567 0.614-1.641 1.54-2.732 2.471-3.043zM13.196 9.085c-0.452 0.581-0.847 1.293-1.163 2.113-0.364-0.21-0.714-0.448-1.045-0.716 0.644-0.587 1.389-1.063 2.208-1.397zM10.244 11.249c0.455 0.378 0.942 0.706 1.454 0.985-0.274 0.986-0.443 2.077-0.483 3.233h-2.655c0.114-1.595 0.723-3.054 1.684-4.218zM11.215 16.533c0.041 1.156 0.209 2.247 0.483 3.233-0.512 0.278-0.998 0.607-1.454 0.985-0.961-1.164-1.57-2.623-1.684-4.218h2.655zM27.989 9.077c-2.399-4.144-6.866-6.944-11.989-6.944-7.361 0-13.383 5.769-13.824 13.022l2.11 1.218c-0.004-0.126-0.019-0.247-0.019-0.373 0-6.469 5.264-11.733 11.733-11.733 4.334 0 8.113 2.371 10.144 5.877l-1.83 1.056 5.542 3.2v-6.4l-1.867 1.077zM27.733 16c0 6.469-5.264 11.733-11.733 11.733-4.334 0-8.113-2.371-10.144-5.877l1.829-1.056-5.541-3.2v6.4l1.867-1.077c2.399 4.143 6.866 6.944 11.989 6.944 7.361 0 13.383-5.769 13.824-13.022l-2.11-1.218c0.004 0.126 0.019 0.247 0.019 0.373z" /></svg>');
}
section.management div.inner article h2.systemsupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M16 0c-5.58 0-10.826 1.431-15.394 3.942l3.661 23.791 11.733 4.267 11.733-4.267 3.661-23.791c-4.569-2.511-9.813-3.942-15.394-3.942zM25.817 26.16l-9.817 3.57-9.818-3.57-3.234-21.027c4.045-1.966 8.527-2.999 13.052-2.999s9.007 1.034 13.052 2.999l-3.235 21.027zM16 4.267c-3.679 0-7.326 0.735-10.697 2.143l2.796 18.178 7.901 2.873 7.901-2.873 2.796-18.178c-3.371-1.408-7.018-2.143-10.697-2.143zM22.195 17.582c-0.153 0.598-0.387 1.162-0.694 1.679l1.152 2.076c-0.389 0.485-0.829 0.925-1.314 1.314l-2.076-1.152c-0.517 0.307-1.082 0.543-1.679 0.694l-0.653 2.287c-0.307 0.033-0.618 0.053-0.931 0.053s-0.623-0.020-0.929-0.052l-0.653-2.287c-0.598-0.153-1.162-0.387-1.68-0.694l-2.076 1.152c-0.485-0.389-0.926-0.829-1.315-1.314l1.153-2.076c-0.308-0.517-0.543-1.082-0.695-1.679l-2.286-0.653c-0.032-0.306-0.052-0.615-0.052-0.93s0.020-0.624 0.052-0.929l2.286-0.653c0.153-0.599 0.387-1.163 0.695-1.679l-1.153-2.077c0.389-0.485 0.83-0.925 1.315-1.314l2.076 1.153c0.517-0.308 1.082-0.544 1.68-0.695l0.653-2.287c0.305-0.032 0.614-0.052 0.929-0.052s0.624 0.020 0.929 0.052l0.653 2.287c0.598 0.153 1.162 0.387 1.679 0.694l2.076-1.152c0.485 0.389 0.925 0.829 1.314 1.314l-1.152 2.076c0.307 0.517 0.543 1.082 0.694 1.679l2.287 0.653c0.033 0.306 0.053 0.615 0.053 0.93s-0.020 0.624-0.052 0.929l-2.286 0.653zM16 11.733c-2.356 0-4.267 1.91-4.267 4.267s1.91 4.267 4.267 4.267 4.267-1.91 4.267-4.267-1.91-4.267-4.267-4.267z" /></svg>');
}
section.management div.inner article h2.snssupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M27.733 16c0 6.469-5.264 11.733-11.733 11.733-4.334 0-8.113-2.371-10.144-5.877l1.829-1.056-5.541-3.2v6.4l1.867-1.077c2.399 4.143 6.866 6.944 11.989 6.944 7.36 0 13.383-5.769 13.824-13.022l-2.11-1.218c0.004 0.126 0.019 0.247 0.019 0.373zM27.989 9.077c-2.399-4.144-6.866-6.944-11.989-6.944-7.361 0-13.383 5.769-13.824 13.022l2.11 1.218c-0.004-0.126-0.019-0.247-0.019-0.373 0-6.469 5.264-11.733 11.733-11.733 4.334 0 8.113 2.371 10.144 5.877l-1.83 1.056 5.542 3.2v-6.4l-1.867 1.077zM17.875 12.763c0.314 0.179 0.671 0.29 1.058 0.29 1.178 0 2.133-0.956 2.133-2.133s-0.956-2.133-2.133-2.133-2.133 0.956-2.133 2.133l-5.609 3.238c-0.313-0.18-0.671-0.291-1.058-0.291-1.178 0-2.133 0.956-2.133 2.133s0.956 2.133 2.133 2.133c0.386 0 0.743-0.111 1.057-0.29l5.61 3.238c0 1.179 0.956 2.133 2.133 2.133 1.179 0 2.133-0.955 2.133-2.133 0-1.178-0.955-2.133-2.133-2.133-0.386 0-0.743 0.111-1.057 0.291l-5.61-3.239 5.609-3.237z" /></svg>');
}
section.management div.inner article h2.contentsupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M27.733 16c0 6.469-5.264 11.733-11.733 11.733-4.334 0-8.113-2.371-10.144-5.877l1.829-1.056-5.541-3.2v6.4l1.867-1.077c2.399 4.143 6.866 6.944 11.989 6.944 7.36 0 13.383-5.769 13.824-13.022l-2.11-1.218c0.004 0.126 0.019 0.247 0.019 0.373zM27.989 9.077c-2.399-4.144-6.866-6.944-11.989-6.944-7.361 0-13.383 5.769-13.824 13.022l2.11 1.218c-0.004-0.126-0.019-0.247-0.019-0.373 0-6.469 5.264-11.733 11.733-11.733 4.334 0 8.113 2.371 10.144 5.877l-1.83 1.056 5.542 3.2v-6.4l-1.867 1.077zM20.267 10.667h-10.667c-0.59 0-1.067 0.477-1.067 1.067v8.533c0 0.59 0.477 1.067 1.067 1.067h12.8c0.59 0 1.067-0.477 1.067-1.067v-6.4c0-0.59-0.477-1.067-1.067-1.067v6.933c0 0.294-0.239 0.533-0.533 0.533s-0.533-0.239-0.533-0.533v-8c0-0.59-0.477-1.067-1.067-1.067zM12.8 18.133h-3.2v-3.2h3.2v3.2zM19.2 18.133h-5.333v-1.067h5.333v1.067zM19.2 16h-5.333v-1.067h5.333v1.067zM19.2 13.867h-9.6v-1.067h9.6v1.067z" /></svg>');
}
section.management div.inner article h2.domainsupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M16 0c-5.58 0-10.826 1.431-15.394 3.942l3.661 23.791 11.733 4.267 11.733-4.267 3.661-23.791c-4.569-2.511-9.813-3.942-15.394-3.942zM25.818 26.16l-9.818 3.57-9.818-3.57-3.234-21.027c4.045-1.966 8.527-2.999 13.052-2.999s9.007 1.034 13.052 2.999l-3.234 21.027zM16 4.267c-3.679 0-7.326 0.735-10.697 2.143l2.796 18.178 7.901 2.873 7.901-2.873 2.796-18.178c-3.371-1.408-7.018-2.143-10.697-2.143zM11.541 19.083h-0.96l-0.842-4.352-0.833 4.352h-1.023l-0.992-6.164h0.938l0.64 4.544 0.822-4.544h0.873l0.822 4.522 0.64-4.522h0.938l-1.023 6.164zM17.812 19.083h-0.958l-0.844-4.352-0.831 4.352h-1.025l-0.992-6.164h0.94l0.64 4.544 0.821-4.544h0.875l0.821 4.522 0.64-4.522h0.94l-1.027 6.164zM23.125 19.083l-0.842-4.352-0.833 4.352h-1.024l-0.992-6.164h0.939l0.64 4.544 0.822-4.544h0.873l0.822 4.522 0.64-4.522h0.938l-1.023 6.164h-0.96z" /></svg>');
}
section.management div.inner article h2.sslsupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M16 0c-5.58 0-10.826 1.431-15.394 3.942l3.661 23.791 11.733 4.267 11.733-4.267 3.661-23.791c-4.569-2.511-9.813-3.942-15.394-3.942zM25.818 26.16l-9.818 3.57-9.818-3.57-3.234-21.027c4.045-1.966 8.527-2.999 13.052-2.999s9.007 1.034 13.052 2.999l-3.234 21.027zM16 8.533c-1.764 0-3.2 1.436-3.2 3.2v2.133h6.4v-2.133c0-1.764-1.436-3.2-3.2-3.2zM16 4.267c-3.679 0-7.326 0.735-10.697 2.143l2.796 18.178 7.901 2.873 7.901-2.873 2.796-18.178c-3.371-1.408-7.018-2.143-10.697-2.143zM22.4 21.333c0 0.59-0.477 1.067-1.067 1.067h-10.667c-0.59 0-1.067-0.477-1.067-1.067v-6.4c0-0.59 0.477-1.067 1.067-1.067h1.067v-2.133c0-2.356 1.909-4.267 4.267-4.267s4.267 1.91 4.267 4.267v2.133h1.067c0.59 0 1.067 0.477 1.067 1.067v6.4zM18.022 16.156l-2.822 2.822-1.222-1.222c-0.208-0.208-0.546-0.208-0.754 0s-0.208 0.546 0 0.754l1.6 1.6c0.103 0.105 0.24 0.157 0.377 0.157s0.273-0.052 0.378-0.156l3.2-3.2c0.208-0.208 0.208-0.546 0-0.754s-0.546-0.209-0.755-0.001z" /></svg>');
}
section.management div.inner article h2.mailsupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M16 0c-5.58 0-10.826 1.431-15.394 3.942l3.661 23.791 11.733 4.267 11.733-4.267 3.661-23.791c-4.569-2.511-9.813-3.942-15.394-3.942zM25.817 26.16l-9.817 3.57-9.818-3.57-3.234-21.027c4.045-1.966 8.527-2.999 13.052-2.999s9.007 1.034 13.052 2.999l-3.235 21.027zM16 4.267c-3.679 0-7.326 0.735-10.697 2.143l2.796 18.178 7.901 2.873 7.901-2.873 2.796-18.178c-3.371-1.408-7.018-2.143-10.697-2.143zM22.166 11.561l-6.166 6.083-6.166-6.083h12.333zM9.067 12.302l3.748 3.698-3.748 3.698v-7.396zM9.834 20.439l3.741-3.69 2.051 2.022c0.105 0.103 0.24 0.155 0.375 0.155s0.271-0.051 0.375-0.155l2.051-2.022 3.741 3.69h-12.335zM22.933 19.698l-3.748-3.698 3.748-3.698v7.396z" /></svg>');
}
section.management div.inner article h2.troublesupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M16 0c-5.58 0-10.826 1.431-15.394 3.942l3.661 23.791 11.733 4.267 11.733-4.267 3.661-23.791c-4.569-2.511-9.813-3.942-15.394-3.942zM25.817 26.16l-9.817 3.57-9.817-3.57-3.235-21.027c4.045-1.966 8.527-2.999 13.052-2.999s9.007 1.034 13.052 2.999l-3.235 21.027zM16 4.267c-3.679 0-7.326 0.735-10.697 2.143l2.796 18.178 7.901 2.873 7.901-2.873 2.796-18.178c-3.371-1.408-7.018-2.143-10.697-2.143zM21.333 20.311h-10.667c-1.173 0-1.653-0.831-1.067-1.847l5.333-9.241c0.587-1.017 1.547-1.017 2.133 0l5.333 9.241c0.587 1.017 0.107 1.847-1.067 1.847zM17.245 12.8l-3.378 3.658h1.955l-1.068 2.742 3.379-3.658h-1.956l1.068-2.742z" /></svg>');
}
section.management div.inner article h2.ecsupport{
	background-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23099" d="M20.035 15.7c-0.457 0-0.826 0.371-0.826 0.827 0 0.454 0.37 0.825 0.826 0.825s0.827-0.371 0.827-0.825c0.001-0.457-0.371-0.827-0.827-0.827zM27.909 18.219l-0.8-0.8c-0.075-0.075-0.176-0.116-0.284-0.116h-1.978c1.245-1.785 1.981-3.95 1.981-6.286 0.001-6.075-4.941-11.017-11.017-11.017s-11.018 4.942-11.018 11.017c0 3.34 1.499 6.332 3.853 8.354l-2.769 3.323-0.926-0.926c-0.15-0.15-0.416-0.15-0.565 0l-2.231 2.23c0.139 0.239 0.278 0.475 0.428 0.704 1.626 2.502 3.934 4.512 6.659 5.786 0.258 0.122 0.516 0.242 0.783 0.348l1.714-1.714c0.156-0.156 0.156-0.409 0-0.564l-0.854-0.854h8.738c0.107 0 0.208-0.042 0.284-0.116l8-8c0.075-0.075 0.117-0.177 0.117-0.284v-0.8c0.002-0.107-0.041-0.209-0.115-0.284zM15.812 7.836h7.344c0.254 0 0.462 0.204 0.462 0.459s-0.207 0.459-0.462 0.459h-7.344c-0.253 0-0.459-0.204-0.459-0.459s0.206-0.459 0.459-0.459zM14.772 10.252h7.345c0.253 0 0.461 0.205 0.461 0.459s-0.207 0.461-0.461 0.461h-7.345c-0.253 0-0.46-0.206-0.46-0.461 0-0.253 0.206-0.459 0.46-0.459zM8.468 6.335c-0.255 0-0.462-0.206-0.462-0.461 0-0.252 0.206-0.459 0.462-0.459h2.545l2.143 7.254h7.921c0.252 0 0.459 0.204 0.459 0.459s-0.206 0.46-0.459 0.46h-8.608l-2.142-7.253h-1.859zM21.779 16.527c0 0.96-0.781 1.744-1.744 1.744-0.961 0-1.745-0.783-1.745-1.744 0-0.962 0.783-1.746 1.745-1.746 0.963 0 1.744 0.784 1.744 1.746zM14.435 16.527c0 0.96-0.782 1.744-1.745 1.744-0.961 0-1.744-0.783-1.744-1.744 0-0.962 0.782-1.746 1.744-1.746 0.963 0 1.745 0.784 1.745 1.746zM10.893 28.839l-1.047 1.045c-2.754-1.225-5.072-3.246-6.675-5.769l1.5-1.5 6.223 6.223zM27.227 19.136l-7.766 7.765h-9.373l-3.641-3.641 2.966-3.559h4.447l0.684 0.684c0.075 0.075 0.176 0.116 0.283 0.116h4.635l0.565 0.565v1.268l-0.565 0.565h-5.435c-0.223 0-0.4 0.179-0.4 0.4s0.177 0.4 0.4 0.4h5.599c0.107 0 0.208-0.042 0.284-0.116l0.8-0.8c0.075-0.075 0.116-0.177 0.116-0.284v-0.635l3.765-3.765h2.069l0.565 0.565v0.47zM11.865 16.527c0 0.454 0.371 0.825 0.826 0.825 0.457 0 0.826-0.371 0.826-0.825 0-0.457-0.37-0.827-0.826-0.827-0.454 0-0.826 0.37-0.826 0.827z" /></svg>');
}
section.management div.inner article h2::before,
section.management div.inner article h2::after{
	position:absolute;
	content:'';
	z-index:1;
	height:4px;
	display:block;
	background-color:#099;
}
section.management div.inner article h2::before{
	left:0;
}
section.management div.inner article h2::after{
	right:0;
}
@keyframes icon-rotate{
	0% {
		transform:rotate(0);
	}
	100%{
		transform:rotate(-360deg);
	}
}
@keyframes icon-marquee{
	100% {
		transform:translateX(-100%);
	}
}
section.management > div.animation{
	position:relative;
	z-index:1;
	overflow:hidden;
	display:flex;
	white-space:nowrap;
	-webkit-mask-image:-webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 100%);
	mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 100%);
}
section.management > div.animation div.animationinner{
	display:flex;
	animation:icon-marquee 30s linear infinite;
}
section.management > div.animation figure{
	position:relative;
	z-index:1;
	display:block;
	flex-shrink:0;
	border-radius:50%;
	background-color:#099;
	box-sizing:border-box;
	animation:icon-rotate 10s linear infinite;
}
section.management > div.animation figure img{
	width:100%;
}
/*----------------------------------------------------
** Retina Display
**----------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
	section.contents.explanation div.swipechangetargetinner{
		border-top-width:0.9px;
	}
}
@media screen and (max-width:767px){
	div.pageheader div.video{
		height:80vw;
	}
	div.pageheader div.video::before{
		background-image:url(../img/pattern_01@2x.png);
	}
	div.pageheader div.video video{
		height:80vw;
	}
	section.contents p.text{
		padding:0 1.8em 0 1.8em;
		line-height:2em;
	}
	section.contents:nth-of-type(1){
		padding:50px 0;
	}
	section.contents:nth-of-type(1)::before{
		font-size:15vw;
		line-height:15vw;
		top:calc( -50vw - 30px );
	}
	section.contents:nth-of-type(1) h2.title{
		font-size:18px;
		text-align:center;
		line-height:20px;
		padding:0 0 30px 0;
	}
	section.contents:nth-of-type(1) > span{
		background-image:url(../img/pattern_01@2x.png);
	}
	section.contents:nth-of-type(1) div.listwrap{
		padding:30px 0 0 0;
	}
	div.symbolwrap{
		padding:0 0 60px 0;
	}
	div.symbol{
		width:60px;
	}
	div.symbol div.inner div{
		width:60px;
		height:60px;
	}
	div.symbol svg{
		width:60px;
		height:60px;
	}
	section.contents.graphic div.listwrap article{
		position:relative;
		z-index:1;
	}
	section.contents.graphic div.listwrap article::before{
		position:absolute;
		z-index:-1;
		top:15px;
		right:15px;
		bottom:15px;
		left:15px;
		display:block;
		content:'';
		background-color:rgba(255,255,255,0.25);
	}
	section.contents.graphic div.listwrap article::after{
		font-size:14px;
		bottom:30px;
		left:50%;
		line-height:14px;
		transform:translateX(-50%);
		position:absolute;
		z-index:1;
	}
	section.contents.graphic div.listwrap article div.textwrap{
		padding:0 0 60px 0;
	}
	section.contents.graphic div.listwrap article h2{
		font-size:16px;
	}
	section.contents.graphic div.listwrap article div.inner picture{
		width:100%;
		padding:30px 0;
		text-align:center;
	}
	section.contents.graphic div.listwrap article div.inner img{
		width:100%;
		margin:0 auto;
	}
	section.contents.graphic div.listwrap article div.inner p{
		padding:0 1.8em ;
		line-height:2em;
	}
	section.contents.graphic div.listwrap article div.textwrap ul{
		margin:0 1.4em;
		padding:30px 0 0 0;
	}
	section.contents.graphic div.listwrap article div.textwrap ul li h3{
		font-size:12px;
	}
	section.contents:nth-of-type(1).website figure img{
		width:100%;
	}
	section.example{
		padding:0 0 100px 0;
		position:relative;
		z-index:2;
	}
	section.example > div.inner{
		padding:30px 0 0 0;
	}
	section.example > div.inner > h2.title{
		font-size:16px;
	}
	section.example > div.inner > p.explanation{
		padding:20px 0 10px 0;
		line-height:20px;
	}
	section.example span.supplement{
		font-size:12px;
		opacity:0.7;
		padding:10px 0 0 0;
		text-align:center;
		display:block;
	}
	section.example div.btnarea{
		margin:40px 0 0 0;
		height:40px;
	}
	section.example div.btnarea a{
		font-size:16px;
		line-height:40px;
		height:40px;
		padding:0 40px 0 20px;
		border-radius:5px;
	}
	div.contactbtnarea{
		padding:20px 0 60px 0;
	}
	div.contactbtnarea div.btnwrap > *{
		padding:0 30px 0 50px;
		line-height:60px;
		margin:20px auto 0 auto;
		font-size:16px;
	}
	div.contactbtnarea div.btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark@2x.png);
	}
	div.contactbtnarea div.btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light@2x.png);
	}
	div.contactbtnarea div.btnwrap.dark > a span{
		background-image:url(../img/bg/flow_btn_dark@2x.png);
	}
	div.contactbtnarea div.btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light@2x.png);
	}
	div.contactbtnarea > picture{
		width:500px;
		left:calc( 50% - 250px );
	}
	section.contents div.nextcontents{
		position:absolute;
		z-index:1;
		width:100%;
		transform:translateY(-30px);
	}
	
	section.contents.explanation div.genrelistinner article{
		margin:0 0 10px 0;
		padding:20px 15px;
	}
	section.contents.explanation div.genrelistinner article h2{
		padding:0 0 15px 0;
		margin:0 0 15px 0;
		border-bottom:solid 1px #dbdbdb;
		font-size:16px;
		font-weight:700;
	}
	section.contents.explanation div.genrelistinner article p{
		text-align:left;
	}
	section.contents.explanation article div.genrebtn{
		margin:15px auto 0 auto;
		padding:0 1.5em;
		line-height:40px;
	}
	
	div.swipemenuwrap{
		top:50px;
	}
	div.swipenavibox{
		padding:15px 0 22px 0;
		top:84px;
		background:-webkit-linear-gradient(top, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 50%,rgba(242,242,246,0) 100%);
		background:linear-gradient(to bottom, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 50%,rgba(242,242,246,0) 100%);
	}
	div.swipenavibox div{
		line-height:14px;
		height:14px;
	}
	div.swipenavibox span{
		font-size:14px;
	}
	div.swipenavibox div::before,
	div.swipenavibox div::after{
		width:28px;
		height:14px;
	}
	section.website div.swipechangetarget{
		margin:0 0 60px 0;
	}
	section.website > p.text{
		margin:2em 0 0 0;
	}
	section.website h3.subtitle{
		font-size:18px;
		text-align:center;
		padding:0 0 30px 0;
	}
	section.website p.text + h3.subtitle{
		padding:60px 0 10px 0;
	}
	section.contents.explanation{
		padding:60px 0 0 0;
	}
	section.contents.explanation::before{
		font-size:15vw;
		line-height:15vw;
	}
	section.contents.explanation > div.wrapblock{
		margin:30px 12px;
		padding: 20px 12px 2px 12px;
	}
	section.contents.explanation > div.wrapblock > p.text{
		text-align:left;
		padding:10px 0.5em 20px 0.5em;
	}
	section.contents.explanation > h2{
	}
	section.contents.explanation article div.titleblock{
		margin:0 15px 30px 15px;
		padding:15px;
	}
	section.contents.explanation article div.titleblock h2{
		font-size:16px;
		font-weight:bold;
		padding:5px 0 10px 0;
	}
	section.contents.explanation div.swipechangetarget{
	}
	section.contents.explanation div.swipechangetargetinner{
		border-top:solid 1px #dbdbdb;
	}
	section.contents.explanation div.swipechangetargetinner article div.targetinner{
		padding:0 0 30px 0;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents{
		margin:0 15px;
	}
	section.contents.explanation div.swipechangetargetinner article div.targetinner::before{
		font-size:8vw;
		line-height:8vw;
		padding:20px 0;
	}
	section.businesslist div.video,
	section.businesslist div.video video{
		height:100%;
	}
	section.businesslist{
		margin:-40px 0 0 0;
		transform:skewY(10deg);
	}
	section.businesslist div.inner{
		padding:60px 0 0 0;
		transform:skewY(-10deg);
	}
	section.businesslist div.inner > h2{
		font-size:16px;
	}
	section.businesslist div.inner > p.explanation {
		padding:20px 0 0 0;
	}
	section.businesslist div.listwrap{
		padding:35px 0 0 0;
	}
	section.businesslist div.listwrap div.listitem{
		padding:40vw 0 20vw 0;
	}
	section.businesslist div.listwrap div.listitem::before {
		top:0;
		right:10px;
		left:10px;
    font-size:16vw;
		line-height:16vw;
    color:rgba(68,68,85,0.2);
	}
	section.businesslist div.listwrap div.listitem div.bg{
		top:0;
		transform:skewY(-15deg);
		width:100vw;
		height:50vw;
	}
	section.businesslist div.listwrap div.listitem div.bg > div{
		width:100vw;
		height:100vw;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%) skewY(15deg);
	}
	section.businesslist div.listwrap div.listitem div.bg > div > div{
		position:relative;
		z-index:1;
		width:100vw;
		height:150vw;
	}
	section.businesslist div.listwrap div.listitem div.bg > div > div::before{
		position:absolute;
		z-index:1;
		top:0;
		right:0;
		bottom:0;
		left:0;
		display:block;
		content:'';
		background:radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0),radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.5) 0);
		background-position:0px 0,3px 3px;
		background-size:6px 6px;
		mix-blend-mode:screen;
	}
	section.businesslist div.listwrap div.listitem.graphic div.bg > div > div{
		background-image:url(../img/business/001@2x.jpg)
	}
	section.businesslist div.listwrap div.listitem.website div.bg > div > div{
		background-image:url(../img/business/002@2x.jpg);
	}
	section.businesslist div.listwrap div.listitem.system div.bg > div > div{
		background-image:url(../img/business/003@2x.jpg);
	}
	section.businesslist div.listwrap div.listitem.management div.bg > div > div{
		background-image:url(../img/business/004@2x.jpg);
	}
	section.businesslist div.listwrap div.listbtn{
		-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 100%);
		mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 100%);
	}
	section.businesslist div.listwrap div.listbtn a h3{
		background-color:rgba(68,68,85,0);
		background:radial-gradient(rgba(68,68,85,0.8) 1px, rgba(68,68,85,0.2) 0),radial-gradient(rgba(68,68,85,0.8) 1px, rgba(242,242,246,0.2) 0);
		background-position:0px 0,3px 3px;
		background-size:6px 6px;
		position:relative;
		z-index:1;
		font-weight:700;
		padding:0 45px 0 0;
		line-height:50px;
		height:50px;
		text-align:right;
	}
	section.website p.text.research{
		margin:2em 0 0 0;
		padding:0 1.8em 0 3.8em;
		position:relative;
		z-index:1;
		overflow:hidden;
	}
	section.website p.text.research::after{
		content:'';
		display:block;
		top:0;
		right:calc( 100vw - 60px + 1em );
		bottom:0;
		width:60px;
		position:absolute;
		z-index:-1;
		background:
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M16 0c-8.836 0-16 7.163-16 16 0 8.835 7.164 16 16 16s16-7.165 16-16c0-8.837-7.164-16-16-16zM16 30.4c-7.94 0-14.4-6.46-14.4-14.4s6.46-14.4 14.4-14.4 14.4 6.46 14.4 14.4-6.46 14.4-14.4 14.4zM24 9.9h-16c-0.276 0-0.5 0.223-0.5 0.5v10.8c0 0.275 0.224 0.5 0.5 0.5h4.7v2.7c0 0.208 0.129 0.396 0.325 0.468 0.057 0.021 0.116 0.031 0.175 0.031 0.142 0 0.279-0.061 0.378-0.171l2.65-3.029h7.773c0.276 0 0.5-0.225 0.5-0.5v-10.799c0-0.277-0.224-0.5-0.5-0.5zM23.5 20.7h-7.5c-0.144 0-0.282 0.063-0.377 0.171l-1.924 2.198v-1.869c0-0.277-0.224-0.5-0.5-0.5h-4.699v-9.801h15.001v9.801zM13.6 16.4h1.801v1.801c0 0.332 0.269 0.601 0.601 0.601s0.601-0.269 0.601-0.601v-1.801h1.801c0.332 0 0.601-0.269 0.601-0.601s-0.269-0.601-0.601-0.601h-1.801v-1.801c-0.001-0.33-0.27-0.598-0.602-0.598s-0.601 0.269-0.601 0.601v1.801h-1.799c-0.332 0-0.601 0.269-0.601 0.601s0.269 0.598 0.601 0.598z" /></svg>') center top,
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M16 9.6c0.589 0 1.067-0.477 1.067-1.067s-0.478-1.067-1.067-1.067-1.067 0.477-1.067 1.067 0.478 1.067 1.067 1.067zM16 13.867c0.589 0 1.067-0.477 1.067-1.067s-0.478-1.067-1.067-1.067-1.067 0.477-1.067 1.067 0.478 1.067 1.067 1.067zM13.536 20.267l2.464 4.267 2.464-4.267h-4.928zM16 18.133c0.589 0 1.067-0.477 1.067-1.067s-0.478-1.067-1.067-1.067-1.067 0.477-1.067 1.067 0.478 1.067 1.067 1.067z" /></svg>') center 25%,
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%2300bbff" d="M16 0c-8.836 0-16 7.164-16 16 0 8.835 7.164 16 16 16s16-7.165 16-16c0-8.836-7.164-16-16-16zM16 30.4c-7.94 0-14.4-6.461-14.4-14.4 0-7.94 6.46-14.4 14.4-14.4s14.4 6.46 14.4 14.4c0 7.939-6.46 14.4-14.4 14.4zM19.671 18.437l-0.308 0.308-1.633-1.632c0.823-0.966 1.324-2.217 1.324-3.586 0-3.052-2.475-5.527-5.526-5.527s-5.527 2.475-5.527 5.527c0 3.053 2.476 5.529 5.529 5.529 1.37 0 2.618-0.5 3.585-1.325l1.632 1.633-0.308 0.308 0.668 0.668 1.234-1.234-0.668-0.669zM13.529 17.89c-2.406 0-4.364-1.957-4.364-4.364s1.957-4.364 4.364-4.364 4.363 1.957 4.363 4.364-1.957 4.364-4.363 4.364zM20.751 19.516l-1.235 1.234 2.995 2.994c0.171 0.171 0.394 0.256 0.617 0.256 0.225 0 0.447-0.085 0.617-0.256 0.341-0.339 0.341-0.894 0-1.235l-2.993-2.993z" /></svg>') center center,
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M16 9.6c0.589 0 1.067-0.477 1.067-1.067s-0.478-1.067-1.067-1.067-1.067 0.477-1.067 1.067 0.478 1.067 1.067 1.067zM16 13.867c0.589 0 1.067-0.477 1.067-1.067s-0.478-1.067-1.067-1.067-1.067 0.477-1.067 1.067 0.478 1.067 1.067 1.067zM13.536 20.267l2.464 4.267 2.464-4.267h-4.928zM16 18.133c0.589 0 1.067-0.477 1.067-1.067s-0.478-1.067-1.067-1.067-1.067 0.477-1.067 1.067 0.478 1.067 1.067 1.067z" /></svg>') center 75%,
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23445" d="M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM16 30.4c-7.94 0-14.4-6.46-14.4-14.4s6.46-14.4 14.4-14.4 14.4 6.46 14.4 14.4-6.46 14.4-14.4 14.4zM25.9 11.399h-2.634v1.001h2.133v9.801h-7.5c-0.144 0-0.282 0.063-0.377 0.171l-1.924 2.201v-1.873c0-0.276-0.224-0.5-0.5-0.5h-4.699v-0.931h-0.999v1.431c0 0.277 0.224 0.5 0.5 0.5h4.7v2.701c0 0.208 0.129 0.395 0.325 0.467 0.057 0.022 0.116 0.032 0.175 0.032 0.142 0 0.279-0.061 0.378-0.171l2.65-3.030h7.773c0.276 0 0.5-0.223 0.5-0.5v-10.799c-0.001-0.275-0.225-0.499-0.501-0.499zM22.601 20.101v-10.8c0-0.277-0.224-0.5-0.5-0.5h-4.7v-2.701c0-0.208-0.129-0.395-0.325-0.467-0.057-0.022-0.116-0.032-0.175-0.032-0.142 0-0.279 0.061-0.378 0.171l-2.65 3.030h-7.773c-0.276-0.001-0.5 0.222-0.5 0.499v10.8c0 0.275 0.224 0.5 0.5 0.5h16c0.276-0.001 0.5-0.225 0.5-0.5zM21.6 19.601h-14.999v-9.801h7.5c0.144 0 0.282-0.063 0.377-0.171l1.924-2.201v1.872c0 0.276 0.224 0.5 0.5 0.5h4.7v9.799zM18.1 15.7c0.553 0 1.001-0.446 1.001-1.001 0-0.554-0.448-1.001-1.001-1.001s-1.001 0.447-1.001 1.001c0 0.555 0.448 1.001 1.001 1.001zM14.1 13.7c-0.553 0-1.001 0.447-1.001 1.001 0 0.555 0.448 1.001 1.001 1.001s1.001-0.446 1.001-1.001c-0.001-0.554-0.449-1.001-1.001-1.001zM10.1 13.7c-0.553 0-1.001 0.447-1.001 1.001 0 0.555 0.448 1.001 1.001 1.001s1.001-0.446 1.001-1.001c-0.001-0.554-0.449-1.001-1.001-1.001z" /></svg>') center bottom;
		background-repeat:no-repeat;
		background-size:60px 60px;
		opacity:0.1;
	}
	section.website p.text.research + p.text{
		margin:2em 0 0 0;
		padding:0 3.8em 0 1.8em;
		overflow:hidden;
		position:relative;
		z-index:1;
	}
	section.website p.text.research + p.text::after{
		content:'';
		display:block;
		top:0;
		left:calc( 100vw - 60px + 1em );
		bottom:0;
		width:60px;
		position:absolute;
		z-index:-1;
		background:
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%230bf" d="M24.332 10.068c-0.625-0.625-1.637-0.625-2.262 0l-8.468 8.468-3.668-3.668c-0.625-0.625-1.637-0.625-2.262 0s-0.625 1.637 0 2.262l4.8 4.8c0.31 0.314 0.72 0.469 1.13 0.469s0.819-0.156 1.132-0.468l9.6-9.6c0.624-0.625 0.624-1.638 0-2.263zM14.675 15.2h-2.15l1.075 1.075 1.075-1.075zM16 0c-8.836 0-16 7.164-16 16 0 8.835 7.164 16 16 16s16-7.165 16-16c0-8.836-7.164-16-16-16zM26.407 6.075c-0.841 0.516-1.75 0.987-2.755 1.369-0.729-2.025-1.71-3.733-2.861-5.007 2.153 0.764 4.070 2.018 5.616 3.638zM16.8 1.691c2.192 0.475 4.132 2.866 5.346 6.259-1.649 0.475-3.452 0.759-5.346 0.823v-7.083zM15.2 1.691v7.084c-1.893-0.065-3.697-0.349-5.346-0.823 1.214-3.395 3.154-5.786 5.346-6.26zM11.207 2.437c-1.151 1.274-2.132 2.981-2.86 5.007-1.005-0.382-1.915-0.852-2.755-1.37 1.546-1.619 3.462-2.875 5.615-3.637zM5.593 25.925c0.841-0.516 1.75-0.988 2.755-1.369 0.729 2.025 1.71 3.733 2.861 5.006-2.154-0.763-4.070-2.018-5.616-3.637zM15.862 23.062c-0.199 0.199-0.426 0.356-0.662 0.495v6.752c-2.192-0.475-4.132-2.866-5.346-6.259 0.692-0.199 1.417-0.356 2.158-0.486-0.241-0.14-0.471-0.299-0.674-0.501l-0.823-0.822c-0.383 0.090-0.763 0.182-1.133 0.29-0.16-0.587-0.29-1.202-0.406-1.83l-1.882-1.881c0.149 1.487 0.407 2.907 0.773 4.222-1.209 0.459-2.301 1.035-3.303 1.675-1.698-2.224-2.759-4.949-2.924-7.916h4.075c-0.135-0.526-0.135-1.074 0-1.6h-4.075c0.164-2.966 1.225-5.693 2.923-7.916 1.004 0.641 2.096 1.217 3.305 1.675-0.377 1.354-0.641 2.815-0.788 4.348 0.495-0.318 1.067-0.492 1.667-0.502 0.143-1.167 0.351-2.289 0.636-3.335 1.799 0.528 3.762 0.836 5.819 0.902v4.303l1.6-1.6v-2.702c1.018-0.032 2.014-0.125 2.977-0.274l1.161-1.161c0.604-0.604 1.408-0.938 2.262-0.938 0.657 0 1.283 0.201 1.812 0.567 0.859-0.383 1.677-0.805 2.423-1.283 1.698 2.223 2.758 4.949 2.923 7.916h-5.315c-0.012-0.422-0.042-0.834-0.070-1.248l-2.848 2.848h1.319c-0.062 2.042-0.351 3.984-0.827 5.73-1.661-0.487-3.466-0.778-5.35-0.873l-1.405 1.405zM16.8 30.309v-7.084c1.893 0.065 3.697 0.349 5.346 0.823-1.214 3.395-3.154 5.786-5.346 6.26zM20.791 29.563c1.151-1.273 2.132-2.981 2.861-5.006 1.005 0.382 1.915 0.852 2.755 1.369-1.546 1.619-3.463 2.875-5.616 3.637zM27.437 24.716c-1.002-0.641-2.095-1.217-3.305-1.675 0.529-1.9 0.849-4.009 0.911-6.241h5.315c-0.163 2.966-1.225 5.692-2.922 7.916z" /></svg>') center top,
		url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32"><path fill="%23ff8080" d="M16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zM16 30.4c-7.94 0-14.4-6.46-14.4-14.4s6.46-14.4 14.4-14.4 14.4 6.46 14.4 14.4-6.46 14.4-14.4 14.4zM16 20c2.209 0 4-1.791 4-4s-1.791-4-4-4-4 1.791-4 4 1.791 4 4 4zM16 13.6c1.323 0 2.4 1.077 2.4 2.4s-1.077 2.4-2.4 2.4-2.4-1.077-2.4-2.4 1.077-2.4 2.4-2.4zM16 10.8c0.332 0 0.601-0.269 0.601-0.601v-7.2c0-0.332-0.269-0.601-0.601-0.601s-0.601 0.269-0.601 0.601v7.2c0.001 0.332 0.269 0.601 0.601 0.601zM10.8 16c0-0.332-0.269-0.601-0.601-0.601h-7.2c-0.332 0-0.601 0.269-0.601 0.601s0.269 0.601 0.601 0.601h7.2c0.332 0 0.601-0.269 0.601-0.601zM16 21.2c-0.332 0-0.601 0.269-0.601 0.601v7.2c0 0.332 0.269 0.601 0.601 0.601s0.601-0.269 0.601-0.601v-7.2c0-0.332-0.269-0.601-0.601-0.601zM26.646 14.201h1.219c-0.78-5.186-4.88-9.285-10.066-10.066v1.219c4.516 0.759 8.086 4.331 8.847 8.847zM14.201 5.354v-1.219c-5.187 0.78-9.286 4.879-10.066 10.066h1.219c0.759-4.515 4.331-8.087 8.847-8.847zM17.801 26.646v1.219c5.186-0.781 9.285-4.879 10.066-10.066h-1.219c-0.762 4.515-4.332 8.087-8.847 8.847zM5.354 17.801h-1.219c0.781 5.186 4.88 9.285 10.066 10.066v-1.219c-4.515-0.761-8.086-4.332-8.847-8.847zM24.201 17.801h-1.236c-0.652 2.527-2.637 4.512-5.165 5.164v1.237c3.189-0.701 5.702-3.214 6.401-6.401zM22.964 14.201h1.236c-0.699-3.188-3.213-5.701-6.401-6.401v1.237c2.528 0.651 4.513 2.636 5.165 5.164zM14.201 7.799c-3.188 0.7-5.702 3.214-6.401 6.401h1.236c0.652-2.527 2.638-4.512 5.165-5.164v-1.237zM9.036 17.801h-1.236c0.7 3.188 3.214 5.701 6.401 6.401v-1.237c-2.528-0.652-4.512-2.636-5.165-5.164zM29.001 15.401h-7.2c-0.332 0-0.601 0.269-0.601 0.601s0.269 0.601 0.601 0.601h7.2c0.332 0 0.601-0.269 0.601-0.601s-0.27-0.601-0.601-0.601z" /></svg>') center bottom;
		background-repeat:no-repeat;
		background-size:60px 60px;
		opacity:0.1;
	}
	section.website p.text.research + p.text::before{
		content:'';
		display:block;
		width:2px;
		top:59px;
		left:calc( 100vw - 31px + 1em );
		bottom:59px;
		position:absolute;
		z-index:-1;
		background: -webkit-linear-gradient(top, rgba(0,187,255,1) 0%,rgba(255,128,128,1) 100%);
		background: linear-gradient(to bottom, rgba(0,187,255,1) 0%,rgba(255,128,128,1) 100%);
		opacity:0.1;
	}
	
	
	
	section.website div.animation_01{
		padding:40px 0 60px 0;
	}
	section.website div.animation_01 div.line::after{
		bottom:-27px;
		left:0;
		transform:scale(0.7);
		transform-origin:bottom left;
		opacity:0.5;
	}
	section.website div.animation_01 div.line{
		width:320px;
		height:20px;
		background-image:url(../img/website/linebg.png);
	}
	section.website div.animation_01 div.line > span.lineitem,
	section.website div.animation_01 span.baseinner span.svgbg{
		width:20px;
		height:20px;
	}
	section.website div.animation_01 span.request{
		left:10px;
	}
	section.website div.animation_01 span.meeting{
		left:calc( 25% + 5px );
	}
	section.website div.animation_01 span.complete{
		left:calc( 75% - 5px );
	}
	section.website div.animation_01 span.bindingtarget{
		left:calc( 100% - 10px );
	}
	section.website div.animation_01 span.baseinner{
		width:20px;
		height:20px;
		position:relative;
		z-index:1;
	}
	section.website div.animation_01 span.circle{
		width:10px;
		height:10px;
		background-color:#445;
	}
	section.website div.animation_01 span.complete span.circle{
		background-color:#0bf;
	}
	section.website div.animation_01 span.bindingtarget span.circle{
		background-color:#ff8080;
	}
	section.website div.animation_01 span.word {
		top:-30px;
		left:30px;
		font-size:12px;
	}
	section.website div.animation_01 span.complete span.subword{
		bottom:-30px;
		right:30px;
		font-size:12px;
		padding:0 0.25em 0 0;
	}
	section.website div.animation_01 span.bindingtarget span.word{
		bottom:-30px;
		right:30px;
		top:auto;
		left:auto;
		padding:0 0.25em 0 0;
	}
	section.website div.animation_01 span.line{
		width:75px;
		height:2px;
		border-radius:1px;
	}
	section.website div.animation_01 span.lineitem .word::after,
	section.website div.animation_01 span.lineitem .subword::after{
		width:25px;
		height:1px;
	}
	section.website div.animation_01 span.lineitem:not(.bindingtarget) .word::after{
		left:-14px;
		bottom:-14px;
	}
	section.website div.animation_01 span.lineitem.bindingtarget .word::after,
	section.website div.animation_01 span.lineitem .subword::after{
		right:-14px;
		top:-14px;
	}
	
	section.website div.animation_02{
		padding:30px 0 10px 0;
	}
	section.website div.supplementary{
		margin:10px 1.8em 0 1.8em;
	}
	section.website div.supplementary a{
		text-decoration:underline;
	}
	section.website div.animation_02::before{
		padding:0 0 20px 0;
		width:100%;
		text-align:center;
	}
	section.website div.animation_02 div.graph{
		margin:0 25px;
		height:60vw;
	}
	section.website div.animation_02 div.graph span.graphitem{
		width:15vw;
		height:60vw;
		background-color:rgba(68,68,85,0.1);
		margin:0 5vw 0 0;
	}
	section.website div.mfiimg{
		padding:40px 0 0 0;
		display:flex;
		text-align:center;
	}
	section.website div.mfiimg figure{
		width:calc( 50vw - 10px );
	}
	section.website div.mfiimg figure:nth-of-type(1){
		margin:0 3px 0 7px;
	}
	section.website div.mfiimg figure:nth-of-type(2){
		margin:0 7px 0 3px;
	}
	section.website div.mfiimg figure img{
		width:100%;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article{
		position:relative;
		z-index:1;
		margin:20px 0 0 0;
		padding:0 15px 15px 15px;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article::before{
		display: block;
		border-radius: 20px;
		box-shadow:3px 3px 6px #dfdfe2,-3px -3px 6px #fff;
		position:absolute;
		z-index:-1;
		top:0;
		right:0;
		bottom:0;
		left:0;
		content:'';
		opacity:0;
	}
	section.contents.explanation div.swipechangetargetinner article.swipeactive div.incontents article::before,
	section.contents.explanation div.swipechangetargetinner article.swipeactive div.incontents article h2::before{
		animation:neumorphism-fade-in 600ms ease-in 200ms forwards;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article h2{
		position:relative;
		z-index:1;
		font-size:16px;
		font-weight:700;
		display:inline-block;
		margin:20px auto;
		padding:0.5em 1em;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article h2::before{
		display: block;
		border-radius:10px;
		position:absolute;
		z-index:-1;
		top:0;
		right:0;
		bottom:0;
		left:0;
		content:'';
		opacity:0;
	}
	section.contents.explanation div.swipechangetargetinner article.corporate div.incontents article h2::before{
		background-color:#68d6ff;
		box-shadow:inset 3px 3px 6px #60c5eb,inset -3px -3px 6px #70e7ff;
	}
	section.contents.explanation div.swipechangetargetinner article.onlineshop div.incontents article h2::before{
		background-color: #fb6;
		box-shadow: inset 3px 3px 6px #ebac5e,inset -3px -3px 6px #ffca6e;
	}
	section.contents.explanation div.swipechangetargetinner article.landing div.incontents article h2::before{
		background-color: #ffff80;
		box-shadow: inset 3px 3px 6px #ebeb76,inset -3px -3px 6px #ffff8a;
	}
	section.contents.explanation div.swipechangetargetinner article.recruit div.incontents article h2::before{
		background-color: #f99;
		box-shadow: inset 3px 3px 6px #eb9c9c,inset -3px -3px 6px #ffb8b8;
	}
	section.contents.explanation div.swipechangetargetinner article.websystem div.incontents article h2::before{
		background-color: #dab5ff;
		box-shadow: inset 3px 3px 6px #c9a7eb,inset -3px -3px 6px #ebc3ff;
	}
	section.contents.explanation div.swipechangetargetinner article.portalsite div.incontents article h2::before{
		background-color: #9c3;
		box-shadow: inset 3px 3px 6px #8dbc2f,inset -3px -3px 6px #a5dc37;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article div.imgwrapblock img{
		width:100%;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article p{
		line-height:2em;
		padding:1em 0;
	}
	section.contents .pconly{
		display:none;
	}
	section.system > div.animation.type_01{
		margin:0 auto 30px auto;
	}
	section.system > div.animation.type_01 > div.imgwrap:nth-of-type(n+2) div.imginner::after{
		font-size:12px;
		line-height:12px;
	}
	section.systemexample div.textwrap{
		margin:0 auto 30px auto;
	}
	section.system > ul{
		margin:1em 1.8em;
	}
	section.systemexample div.animation.type_02 > div{
		width:150px;
	}
	section.systemexample div.textwrap p.text span{
		font-size:16px;
	}
	section.systemexample > h3{
		font-size:18px;
		text-align:center;
		line-height: 20px;
		padding:30px 0;
	}
	section.systemexample > p.text + h3{
		padding:50px 0 30px 0;
	}
	section.systemexample > div.listbox{
		margin:30px 0;
	}
	section.systemexample > div.listbox dl{
		width:calc(( 100vw - 30px ) / 2 );
		height:calc(( 100vw - 30px ) / 2 );
		margin:0 5px 10px 5px;
	}
	section.systemexample > div.listbox dl dt{
		padding:0 0 0.5em 0;
	}
	section.systemexample > div.listbox dl dd{
		line-height:1.5em;
		font-size:12px;
	}
	section.management > figure{
		display:table;
		width:300px;
		margin:0 auto;
	}
	section.management div.inner article.supportlistwrap{
		margin:50px 0 0 0;
	}
	section.management div.inner article.supportlistwrap div.articlewrap{
	}
	section.management div.inner article{
	}
	section.management div.inner article h2{
		margin:30px 0 0 0;
		padding:70px 0 30px 0;
		text-align:center;
		font-size:18px;
		font-weight:700;
		line-height:30px;
		background-size:60px;
	}
	section.management div.inner article h2::before,
	section.management div.inner article h2::after{
		width:calc(( 100% - 60px ) / 2 );
		top:28px;
	}
	section.management > div.animation{
		margin:0 0 30px 0;
	}
	section.management > div.animation figure{
		width:60px;
		height:60px;
		margin:0 5px;
		padding:7.5px;
	}
}
@media screen and (min-width:768px) and (max-width:1099px){
}
@media (orientation: landscape) and (max-width:568px){
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
}
@media screen and (min-width:1100px){
	div.pageheader div.video{
		width:100%;
		height:500px;
	}
	div.pageheader div.video::before{
		background-image:url(../img/pattern_01.png);
	}
	div.pageheader div.video video{
		width:100vw;
	}
	section.contents.graphic p.text,
	section.contents.website > p.text{
		width:1100px;
		padding:0 1.8em 60px 1.8em;
		line-height:2.5em;
		text-align:center;
		font-size:16px;
		margin:0 auto;
	}
	section.contents:nth-of-type(1){
		padding:60px 0 0 0;
	}
	section.contents:nth-of-type(1)::before{
		font-size:100px;
		line-height:100px;
		top:-300px;
	}
	section.contents > h2.title{
		font-size:24px;
		text-align:center;
		line-height:30px;
		padding:0 0 50px 0;
	}
	section.contents:nth-of-type(1) > span{
		background-image:url(../img/pattern_01.png);
	}
	section.contents div.listwrap{
		width:1100px;
		margin:0 auto;
	}
	section.contents.graphic div.listwrap article{
		margin:30px 0 60px 0;
	}
	section.contents.graphic div.listwrap article div.inner{
		padding:30px 0 0 0;
		display:flex;
		justify-content:space-between;
	}
	section.contents div.listwrap article:nth-of-type(odd) div.inner{
	}
	section.contents div.listwrap article:nth-of-type(even) div.inner{
		flex-direction:row-reverse;
	}
	section.contents div.listwrap article h2{
		font-size:18px;
	}
	section.contents div.listwrap article p{
		line-height:2.5em;
		font-size:16px;
	}
	
	div.contactbtnarea{
		padding:30px 0 150px 0;
	}
	body.edge div.contactbtnarea,
	body.chrome div.contactbtnarea,
	body.firefox div.contactbtnarea{
		background-image:url(../img/bg/contact@2x.webp);
		background-size:600px 300px;
	}
	div.contactbtnarea a{
		width:300px;
	}
	div.contactbtnarea > picture{
		width:1000px;
		left:calc( 50% - 500px );
	}
	div.symbolwrap{
		padding:0 0 80px 0;
	}
	div.symbol{
		width:80px;
	}
	div.symbol div.inner div{
		width:80px;
		height:80px;
	}
	div.symbol svg{
		width:80px;
		height:80px;
	}
	section.example > div.inner > h2.title{
		font-size:18px;
	}
	section.example > div.inner > p.explanation{
		padding:30px 0 20px 0;
		line-height:20px;
	}
	section.example div.btnarea a{
		font-size:18px;
		line-height:50px;
		height:50px;
		padding:0 40px 0 20px;
		border-radius:5px;
		transition:all 0.3s ease;
	}
	section.example div.btnarea a:hover{
		background-color:#445;
	}
	div.swipemenuwrap{
		top:80px;
	}
	section.contents.website{
		overflow:hidden;
	}
	section.contents.website div.explanation{
		padding:80px 0;
		width:1100px;
		margin:0 auto;
	}
	section.contents.explanation > div.wrapblock{
		width:1100px;
		margin:0 auto;
		padding: 0 0 20px 0;
	}
	section.contents.explanation > div.wrapblock > h2{
		padding:40px 0 20px 0;
		font-size:24px;
	}
	section.contents.explanation > div.wrapblock > p.text{
		padding:0 1.8em 30px 1.8em;
		line-height:2.5em;
		text-align:center;
		font-size:16px;
		margin:0 auto;
	}
	section.contents.explanation::before{
		font-size:7vw;
		line-height:7vw;
		padding:100px 0 80px 0;
	}
	section.contents.explanation div.genrelistinner{
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
	}
	section.contents.explanation div.genrelistinner article{
		margin:0 5px 10px 5px;
		width:320px;
		padding:15px;
		box-sizing:border-box;
	}
	section.contents.explanation div.genrelistinner article h2{
		font-size:19px;
		padding:0 0 10px 0;
		border-bottom:solid 1px #dbdbdb;
		margin:0 0 10px 0;
	}
	section.contents.explanation div.genrelistinner article div.genrebtn{
		margin:15px 0 10px 0;
		line-height:40px;
		height:40px;
		padding:0 2em;
	}
	section.contents.explanation div.swipemenuwrap{
		margin:30px 0 0 0;
	}
	section.contents.explanation div.swipemenuwrap div.swipemenucontainer{
		width:1100px;
		margin:0 auto;
	}
	div.swipenavibox{
		top:124px;
	}
	section.contents.explanation div.swipemenuwrap div.swipemenuinner .swipemenu span{
		font-size:16px;
	}
	section.contents.explanation div.swipechangetargetinner{
		border-top:solid 1px #dbdbdb;
	}
	section.contents.explanation div.swipechangetargetinner .swipemenuviewarea{
		margin:0 calc(( 100vw - 1100px ) / 4 );
		position:relative;
		z-index:1;
	}
	section.contents.explanation div.swipechangetargetinner::before,
	section.contents.explanation div.swipechangetargetinner::after{
		content:'';
		display:block;
		position:absolute;
		z-index:2;
		top:0;
		bottom:0;
		width:calc(( 100vw - 1100px ) / 2 );
	}
	section.contents.explanation div.swipechangetargetinner::before{
		left:0;
		background: -webkit-linear-gradient(left, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 50%,rgba(242,242,246,0) 100%);
		background: linear-gradient(to right, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 50%,rgba(242,242,246,0) 100%);
	}
	section.contents.explanation div.swipechangetargetinner::after{
		right:0;
		background: -webkit-linear-gradient(left, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 50%,rgba(242,242,246,1) 100%);
		background: linear-gradient(to right, rgba(242,242,246,0) 0%,rgba(242,242,246,1) 50%,rgba(242,242,246,1) 100%);
	}
	section.contents.explanation div.swipechangetargetinner .swipemenuviewarea > article .targetinner{
		padding:30px calc(( 100vw - 1100px ) / 4 );
	}
	section.contents.explanation div.swipechangetargetinner article div.targetinner::before{
		font-size:5vw;
		line-height:5vw;
		padding:0 0 30px 0;
	}
	section.contents.explanation div.swipechangetargetinner article div.titleblock{
		width:800px;
		margin:0 auto;
		padding:20px 30px;
	}
	section.contents.explanation div.swipechangetargetinner article div.titleblock h2{
		font-size:21px;
		font-weight:700;
		padding:0 0 15px 0;
	}
	section.contents.explanation div.swipechangetargetinner article div.titleblock p{
		line-height:2em;
		text-align:center;
	}
	div.swipenavibox div{
		line-height:15px;
		height:15px;
	}
	div.swipenavibox span{
		font-size:15px;
	}
	div.swipenavibox div::before,
	div.swipenavibox div::after{
		width:30px;
		height:15px;
	}
	section.businesslist{
		padding:100px 0 0 0;
	}
	section.businesslist div.listwrap{
		width:100%;
		padding:10vw 0 0 0;
		display:flex;
		justify-content:center;
		flex-wrap:wrap;
	}
	section.businesslist div.listwrap div.listitem{
		width:33.3333%;
		padding:10vw 0;
	}
	section.businesslist div.listwrap div.listitem::before {
		top:-1vw;
		right:1vw;
		left:1vw;
    font-size:5vw;
		line-height:5vw;
    color:rgba(68,68,85,0.5);
		mix-blend-mode:difference;
		mix-blend-mode:exclusion;
	}
	section.businesslist div.listwrap div.listitem div.bg{
		top:0;
		width:100%;
		height:200px;
		transform:skewY(-20deg);
	}
	section.businesslist div.listwrap div.listitem div.bg > div{
		width:100%;
		height:620px;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%) skewY(20deg);
	}
	section.businesslist div.listwrap div.listitem div.bg > div > div{
		width:100%;
		height:620px;
	}
	section.businesslist div.listwrap div.listitem div.bg > div > div::before{
		position:absolute;
		z-index:1;
		top:0;
		right:0;
		bottom:0;
		left:0;
		display:block;
		content:'';
		background:radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.2) 0),radial-gradient(rgba(242,242,246,0.8) 1px, rgba(242,242,246,0.2) 0);
		background-position:0px 0,3px 3px;
		background-size:6px 6px;
		mix-blend-mode:screen;
	}
	section.businesslist div.listwrap div.listitem.graphic div.bg > div > div{
		background-image:url(../img/business/001@2x.jpg)
	}
	section.businesslist div.listwrap div.listitem.website div.bg > div > div{
		background-image:url(../img/business/002@2x.jpg);
	}
	section.businesslist div.listwrap div.listitem.system div.bg > div > div{
		background-image:url(../img/business/003@2x.jpg);
	}
	section.businesslist div.listwrap div.listitem.management div.bg > div > div{
		background-image:url(../img/business/004@2x.jpg);
	}
	section.businesslist div.listwrap div.listbtn{
		-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 100%);
		mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 100%);
	}
	section.businesslist div.listwrap div.listbtn a h3{
		background-color:rgba(68,68,85,0);
		background:radial-gradient(rgba(68,68,85,0.8) 1px, rgba(68,68,85,0.5) 0),radial-gradient(rgba(68,68,85,0.8) 1px, rgba(242,242,246,0.5) 0);
		background-position:0px 0,3px 3px;
		background-size:6px 6px;
		position:relative;
		z-index:1;
		font-size:16px;
		font-weight:700;
		padding:0 45px 0 0;
		line-height:60px;
		height:60px;
		text-align:right;
	}
	section.businesslist div.inner > h2{
		font-size:18px;
	}
	
	section.website div.animation_01{
		padding:40px 0 100px 0;
	}
	section.website div.animation_01 div.line::after{
		bottom:-40px;
		left:0;
		font-size:16px;
		transform-origin:bottom left;
		opacity:0.5;
	}
	section.website div.animation_01 div.line{
		width:640px;
		height:40px;
		background-image:url(../img/website/linebg.png);
	}
	.ie section.website div.animation_01 div.line{
		margin:0 calc(( 100% - 640px ) / 2 );
	}
	section.website div.animation_01 div.line > span.lineitem,
	section.website div.animation_01 span.baseinner span.svgbg{
		width:40px;
		height:40px;
	}
	section.website div.animation_01 span.request{
		left:20px;
	}
	section.website div.animation_01 span.meeting{
		left:calc( 25% + 10px );
	}
	section.website div.animation_01 span.complete{
		left:calc( 75% - 10px );
	}
	section.website div.animation_01 span.bindingtarget{
		left:calc( 100% - 20px );
	}
	section.website div.animation_01 span.baseinner{
		width:40px;
		height:40px;
		position:relative;
		z-index:1;
	}
	section.website div.animation_01 span.circle{
		width:20px;
		height:20px;
		background-color:#445;
	}
	section.website div.animation_01 span.complete span.circle{
		background-color:#0bf;
	}
	section.website div.animation_01 span.bindingtarget span.circle{
		background-color:#ff8080;
	}
	section.website div.animation_01 span.word {
		top:-40px;
		left:50px;
		font-size:20px;
	}
	section.website div.animation_01 span.complete span.subword{
		bottom:-40px;
		right:50px;
		font-size:20px;
		padding:0 0.25em 0 0;
	}
	section.website div.animation_01 span.bindingtarget span.word{
		bottom:-40px;
		right:50px;
		top:auto;
		left:auto;
		padding:0 0.25em 0 0;
	}
	section.website div.animation_01 span.line{
		width:150px;
		height:2px;
		border-radius:1px;
	}
	section.website div.animation_01 span.lineitem .word::after,
	section.website div.animation_01 span.lineitem .subword::after{
		width:30px;
		height:1px;
	}
	section.website div.animation_01 span.lineitem:not(.bindingtarget) .word::after{
		left:-15px;
		bottom:-15px;
	}
	section.website div.animation_01 span.lineitem.bindingtarget .word::after,
	section.website div.animation_01 span.lineitem .subword::after{
		right:-15px;
		top:-15px;
	}
	section.website p.text.research,
	section.website p.text.research + p.text{
		padding:0 0 60px 0;
		text-align:left;
		width:640px;
	}
	section.website figure.pconly{
		width:640px;
		margin:0 auto 30px auto;
	}
	section.website figure.pconly img{
		width:100%;
	}
	section.website h3.subtitle{
		font-size:24px;
		text-align:center;
		line-height: 30px;
		padding:50px 0;
	}
	section.website > div.decoration{
		position:relative;
		z-index:1;
		width:100%;
	}
	section.website > div.decoration figure{
		position:absolute;
		z-index:1;
		display:table;
		top:0;
		width:auto;
		height:900px;
		opacity:0.1;
	}
	section.website > div.decoration figure:nth-of-type(1){
		left:calc( 100vw - (( 100vw - 900px ) / 2 ));
	}
	section.website > div.decoration figure:nth-of-type(2){
		right:calc( 100vw - (( 100vw - 900px ) / 2 ));
	}
	section.website > div.decoration figure img{
		width:auto;
		height:900px;
	}
	section.website > div.layoutblock{
		display:flex;
		width:1100px;
		margin:0 auto;
	}
	section.website > div.layoutblock.type_01{
		flex-direction:row-reverse;
		justify-content:space-between;
	}
	section.website > div.layoutblock.type_02{
		padding:60px 0 0 0;
	}
	section.website > div.layoutblock.type_01 div.animation_02{
		width:420px;
	}
	section.website div.layoutblock p.text{
		line-height:2em;
		width:600px;
		font-size:16px;
	}
	section.website > div.layoutblock.type_02 p.text{
		width:500px;
		box-sizing:border-box;
		padding:0 30px 0 0;
	}
	section.website > div.layoutblock.type_02 div.mfiimg{
		display:flex;
		width:600px;
		justify-content: space-between;
	}
	section.website div.animation_02 div.graph{
		height:200px;
	}
	section.website div.animation_02 div.graph span.graphitem{
		width:80px;
		height:200px;
		background-color:rgba(68,68,85,0.1);
		margin:0 30px 0 0;
	}
	section.website div.supplementary a{
		font-size:12px;
	}
	section.website p.text.finish{
		padding:100px 0 100px 0;
		width:700px;
		margin:0 auto;
		line-height:2em;
		font-size:16px;
		text-align:left;
		position:relative;
		z-index:1;
	}
	section.website p.text.finish::before,
	section.website p.text.finish::after{
		content:'';
		display:block;
		top:100px;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
		width:450px;
		height:800px;
		position:absolute;
		z-index:1;
		opacity:0.1;
	}
	section.website p.text.finish::before{
		background-image:url(../img/website/decoration_03.png);
		left:-550px;
	}
	section.website p.text.finish::after{
		background-image:url(../img/website/decoration_04.png);
		right:-550px;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article {
		position: relative;
		z-index: 1;
		margin:60px 0 0 0;
		padding: 0 30px 30px 30px;
	}
	section.contents.explanation div.genrelistinner article p{
		text-align:left;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article::before {
		display:block;
		border-radius:20px;
		box-shadow: 5px 5px 10px #e6e6ea,-5px -5px 10px #fefeff;
		position:absolute;
		z-index:-1;
		top:0;
		right:0;
		bottom:0;
		left:0;
		content:'';
		opacity:0;
	}
	section.contents.explanation div.swipechangetargetinner article.swipeactive div.incontents article::before,
	section.contents.explanation div.swipechangetargetinner article.swipeactive div.incontents article h2::before {
		animation:neumorphism-fade-in 600ms ease-in 200ms forwards;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article div.imgwrapblock.type_01{
		display:flex;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article div.imgwrapblock.type_01 figure{
		width:300px;
		position:relative;
		z-index:1;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article div.imgwrapblock.type_01 figure picture{
		width:300px;
		position:absolute;
		z-index:1;
		top:50%;
		transform:translateY(-50%);
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article div.imgwrapblock.type_01 figure picture img{
		width:100%;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article h2 {
		position: relative;
		z-index: 1;
		font-size:21px;
		font-weight: 700;
		display: inline-block;
		margin:20px auto;
		padding: 0.5em 1em;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article h2::before {
		display: block;
		border-radius: 10px;
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		content: '';
		opacity: 0;
	}
	section.contents.explanation div.swipechangetargetinner article.corporate div.incontents article h2::before{
		background-color:#68d6ff;
		box-shadow:inset 5px 5px 10px #60c5eb,inset -5px -5px 10px #70e7ff;
	}
	section.contents.explanation div.swipechangetargetinner article.onlineshop div.incontents article h2::before{
		background-color: #fb6;
		box-shadow: inset 5px 5px 10px #ebac5e,inset -5px -5px 10px #ffca6e;
	}
	section.contents.explanation div.swipechangetargetinner article.landing div.incontents article h2::before{
		background-color: #ffff80;
		box-shadow: inset 5px 5px 10px #ebeb76,inset -5px -5px 10px #ffff8a;
	}
	section.contents.explanation div.swipechangetargetinner article.recruit div.incontents article h2::before{
		background-color: #f99;
		box-shadow: inset 5px 5px 10px #eb9c9c,inset -5px -5px 10px #ffb8b8;
	}
	section.contents.explanation div.swipechangetargetinner article.websystem div.incontents article h2::before{
		background-color: #dab5ff;
		box-shadow: inset 5px 5px 10px #c9a7eb,inset -5px -5px 10px #ebc3ff;
	}
	section.contents.explanation div.swipechangetargetinner article.portalsite div.incontents article h2::before{
		background-color: #9c3;
		box-shadow: inset 5px 5px 10px #8dbc2f,inset -5px -5px 10px #a5dc37;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article div.imgwrapblock.type_01 p{
		width:calc( 100% - 300px - 2em );
		line-height:2em;
		padding:1em 0;
		font-size:16px;
	}
	section.contents.explanation div.swipechangetargetinner article div.incontents article div.imgwrapblock.type_02 p{
		width:800px;
		line-height:2em;
		padding:1em 0;
		font-size:16px;
		margin:0 auto;
	}
}
/*----------------------------------------------------
** Internet Explorer
**----------------------------------------------------*/