/*----------------------------------------------------
**
** WEB COMBO / top.css
**
** Ver.1.0.0
**
** copyright 2020 GRANTEST Inc.
**
**----------------------------------------------------
** web font
**----------------------------------------------------
** font-family:'Bebas Neue',cursive;
**----------------------------------------------------
** Common settings
**----------------------------------------------------*/
section.wrap{
	padding:0;
}
header:not(.active) div.logo{
	opacity:0;
}
header.active div.logo{
	opacity:1;
}
/*----------------------------------------------------
** animation settings
**----------------------------------------------------*/
@keyframes copy-in{
  0%{transform:translateY(50px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes text-in{
  0%{transform:translateY(10px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes copy-out{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(-50px);opacity:0}
}
@keyframes scroll-arrow{
  0%{opacity:1}
  100%{opacity:0}
}
@keyframes scroll-out{
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(30px);opacity:0}
}
@keyframes titlesymbol{
  0%{fill:#fff}
  100%{fill:#0bf}
}
@keyframes titlewrap{
	0%{
		width:0;
		height:0;
		opacity:0;
	}
	50%{
		width:2em;
		height:100%;
		opacity:1;
	}
	100%{
		width:100%;
		height:100%;
		opacity:1;
	}
}
@keyframes titleline{
	0%{
		width:0;
		opacity:0;
	}
	10%{
		width:0;
		opacity:1;
	}
	100%{
		opacity:1;
		width:100vw;
	}
}
@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 fadeupsmall{
	0%{
		opacity:0;
		transform:translateY(20px);
	}
	100%{
		opacity:1;
		transform:translateY(0);
	}
}
@keyframes screendown{
	0%{
		height:100%;
	}
	50%{
		background-color:#445;
		height:100%;
	}
	100%{
		height:0;
	}
}
@keyframes businessItemLine{
	0%{
		width:0;
		right:0;
	}
	50%{
		width:calc( 100% - 20px );
		right:10px;
		height:1px;
		background-color:rgba(255,255,255,1);
	}
	100%{
		width:calc( 100% - 20px );
		height:calc( 100% - 20px );
		right:10px;
	}
}
@keyframes businessItemLinePC{
	0%{
		width:0;
		right:0;
	}
	50%{
		width:300px;
		right:10px;
		height:1px;
		background-color:rgba(255,255,255,1);
	}
	100%{
		width:300px;
		height:220px;
		right:10px;
	}
}
@keyframes businessItemTitle{
	0%{
		opacity:0;
		transform:scale(0);
	}
	80%{
		transform:scale(1.2);
	}
	100%{
		transform:scale(1);
		opacity:1;
	}
}
@keyframes decoblock-small-left{
	0%{
		opacity:0;
		transform:translate3d(50px,-50%,0) scale(0);
	}
	30%{
		opacity:0.5;
		transform:translate3d(0,-50%,0) scale(1);
	}
	100%{
		opacity:0.5;
		width:30px;
		height:30px;
		transform:translate3d(0,-50%,0) scale(1) rotate(-405deg);
	}
}
@keyframes decoblock-large-left{
	0%{
		opacity:0;
		transform:translate3d(50px,-50%,0) scale(0);
	}
	30%{
		opacity:0.5;
		transform:translate3d(0,-50%,0) scale(1);
	}
	100%{
		opacity:0.5;
		width:40px;
		height:40px;
		transform:translate3d(0,-50%,0) scale(1) rotate(-495deg);
	}
}
@keyframes decoblock-small-right{
	0%{
		opacity:0;
		transform:translate3d(-50px,-50%,0) scale(0);
	}
	30%{
		opacity:0.5;
		transform:translate3d(0,-50%,0) scale(1);
	}
	100%{
		opacity:0.5;
		width:30px;
		height:30px;
		transform:translate3d(0,-50%,0) scale(1) rotate(405deg);
	}
}
@keyframes decoblock-large-right{
	0%{
		opacity:0;
		transform:translate3d(-50px,-50%,0) scale(0);
	}
	30%{
		opacity:0.5;
		transform:translate3d(0,-50%,0) scale(1);
	}
	100%{
		opacity:0.5;
		width:40px;
		height:40px;
		transform:translate3d(0,-50%,0) scale(1) rotate(495deg);
	}
}
@keyframes contact-bg{
	0%{
		opacity:0;
		transform:translateX(-2%) scale(1);
	}
	50%{
		opacity:0.7;
	}
	100%{
		opacity:0;
		transform:translateX(2%) scale(1.4);
	}
}

/*----------------------------------------------------
** slider settings
**----------------------------------------------------*/
div.slider{
	width:100%;
	overflow:hidden;
	position:relative;
	z-index:1;
}
html:not(.scroll) div.slider div.slidercontainer{
	transform:translate3d(0,0,0) !important;
}
div.slider div.inner{
	background-color:#445;
}
div.slider div.inner > div img{
	width:100%;
	height:calc( 100vh - 37px );
	opacity:0;
	object-fit:cover;
}
div.slider div.cs_wrap div.inner > div img{
	opacity:1;
}
div.slider dl{
	position:absolute;
	z-index:2;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
}
div.slider dl dt{
	font-family:'Oswald';
}
div.slider div.cs_item dl dt,
div.slider div.cs_item dl dd{
	color:#FFF;
	opacity:0;
}
div.slider div.cs_item.slideactive dl dd p{
	font-weight:700;
	color:#FFF;
}
div.slider div.cs_item.slideactive dl dt{
	animation:copy-in 600ms forwards 400ms ease-out;
}
div.slider div.cs_item.slideactive dl dd{
	animation:text-in 600ms forwards 600ms ease-out;
}
div.slider div.cs_item.active dl dt,
div.slider div.cs_item.active dl dd{
	will-change:transform;
}
div.slider div.cs_item.removeactive dl dt,
div.slider div.cs_item.removeactive dl dd{
	animation:copy-out 300ms forwards ease-in;
	will-change:transform;
}
div.slider .comboslider::before{
	position:absolute;
	z-index:1;
	background-repeat:repeat;
	background-size:94px 81px;
	content:'';
	display:block;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
div.slider .comboslider picture::after{
	position:absolute;
	z-index:2;
	background: radial-gradient(rgba(68,68,85,0.8) 1px, rgba(0,0,0,0.2) 0),radial-gradient(rgba(68,68,85,0.8) 1px, rgba(0,0,0,0.2) 0);
	background-position:0px 0,3px 3px;
	background-size:6px 6px;
	content:'';
	display:block;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
div.slider .comboslider.ie picture::after{
	background-color:rgba(0,0,0,0.4);
	background-image:url(../img/pattern_02.png);
	background-repeat:repeat;
}
div.slider .controlwrap{
	height:0;
}
div.scrollnavi{
	position:absolute;
	z-index:3;
	bottom:5px;
	display:inline-block;
	opacity:0;
	transform:translateY(50px);
	overflow:hidden;
	padding:0 0 30px 0;
	transition:all 0.6s ease;
}
div.scrollnavi svg{
	width:100%;
	opacity:0;
}
div.cs_wrap + div.scrollnavi svg{
	animation:fadeupsmall 600ms ease-out 1400ms forwards;
}
div.scrollnavi > div{
	position:relative;
	z-index:1;
	cursor:pointer;
}
div.scrollnavi{
	transform:translateY(0);
	opacity:1;
}
html.scroll div.scrollnavi{
	transform:translateY(50px);
	opacity:0;
}
div.scrollnavi div > div{
	opacity:0;
	animation:scroll-arrow 600ms ease-out reverse 2000ms forwards;
	will-change:opacity;
}
div.scrollnavi span{
	display:block;
	border:solid 1px #FFF;
	border-top:none;
	border-left:none;
	position:absolute;
	left:50%;
	transform:translateX(-50%) rotate(45deg);
	box-sizing:border-box;
	opacity:0;
	will-change:opacity;
}
div.scrollnavi span:nth-of-type(1){
	width:28px;
	height:28px;
	top:12px;
	animation:scroll-arrow 600ms linear alternate infinite;
	animation-delay:400ms;
}
div.scrollnavi span:nth-of-type(2){
	width:20px;
	height:20px;
	top:16px;
	animation:scroll-arrow 600ms linear alternate infinite;
	animation-delay:200ms;
}
div.scrollnavi span:nth-of-type(3){
	width:12px;
	height:12px;
	top:20px;
	animation:scroll-arrow 600ms linear alternate infinite;
}
/*----------------------------------------------------
** Beginner's Guide
**----------------------------------------------------*/
section.beginners{
	text-align:center;
	position:relative;
	z-index:2;
	overflow:hidden;
	background-color:#0bf;
	transition:all 1.2s ease;
}
section.beginners.visible{
	background-color:#f2f2f6;
}
section.beginners::before{
	font-family:'Oswald';
	content:'PRINCIPLES OF CORPORATE';
	display:block;
	color:#FFF;
	font-weight:400;
	position:absolute;
	z-index:1;
	top:0;
	left:50%;
	transform:translateX(-50%);
	white-space:nowrap;
	opacity:1;
	transition:all 0.6s ease;
}
section.beginners.visible::before{
	opacity:0.5;
}
section.beginners::after{
	content:'';
	position:absolute;
	z-index:-1;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:block;
	background-repeat:repeat;
	background-size:91px 81px;
	opacity:0.5;
}
section.beginners > *{
	z-index:2;
}
section.beginners div.logowrap{
	position:relative;
	opacity:0;
	transform:translateY(-30px);
	transition:all 0.6s ease;
}
section.beginners.visible div.logowrap{
	opacity:1;
	transform:translateY(0);
}
section.beginners div.titlesymbol{
	fill:#fff;
}
section.beginners.visible div.titlesymbol{
	animation:titlesymbol 600ms ease-out 600ms forwards;
}
body.ie section.beginners div.titlesymbol{
	transition:all 0.6s ease;
}
body.ie section.beginners.visible div.titlesymbol{
	fill:#0bf;
}
section.beginners h2.titlelogo{
	fill:#445;
}
section.beginners.over h2.titlelogo{
	opacity:0;
}
section.beginners dl dt{
	position:relative;
	z-index:1;
	height:2em;
	line-height:2em;
	display:inline-block;
	margin:0 auto;
	padding:0 1.5em;
}
section.beginners dl dt::before,
section.beginners dl dt::after{
	content:'';
	position:absolute;
	width:0;
	height:0;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:block;
}
section.beginners dl dt::before{
	box-sizing:border-box;
	border:solid 1px #445;
	border-radius:1em;
	z-index:2;
	background-color:#f2f2f6;
	opacity:0;
}
section.beginners dl dt::after{
	border-top:solid 1px #445;
	z-index:1;
	opacity:0;
}
section.beginners dl dt p{
	position:relative;
	z-index:3;
	background-color:rgba(255,255,255,0);
	color:rgba(68,68,85,0);
}
section.beginners dl dd{
	opacity:0;
}
section.beginners dl dt.visible::before{
	animation:titlewrap 300ms linear 200ms forwards;
}
section.beginners dl dt.visible::after{
	animation:titleline 300ms ease-in forwards;
}
section.beginners dl dt.visible p{
	animation:titletext-dark 600ms ease-out 500ms forwards;
}
section.beginners dl dd.visible{
	animation:fadeup 400ms ease-out 600ms forwards;
}
section.beginners dl dd p{
	background-color:rgba(255,255,255,0);
}
section.beginners div.btnarea{
	opacity:0;
}
section.beginners div.btnarea.visible{
	animation:fadeupsmall 300ms ease-out forwards;
}
section.beginners div.btnarea a{
	display:inline-block;
	text-decoration:none;
	background-color:#445;
	color:#FFF;
	position:relative;
	z-index:1;
}
section.beginners div.btnarea a img{
	opacity:0;
	width:100%;
	height:0;
}
section.beginners div.btnarea a::before{
	content:'会社概要はこちら';
}
section.beginners 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%);
}
/*----------------------------------------------------
** Business details
**----------------------------------------------------*/
section.business{
	overflow:hidden;
	background-color:#445;
	position:relative;
	z-index:1;
	text-align:center;
}
section.business::before{
	position:absolute;
	z-index:1;
	background: radial-gradient(rgba(68,68,85,0.8) 1px, rgba(0,0,0,0) 0),radial-gradient(rgba(68,68,85,0.8) 1px, rgba(0,0,0,0) 0);
	background-position:0px 0,3px 3px;
	background-size:6px 6px;
	content:'';
	display:block;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
body.ie section.business::before{
	background-image:url(../img/pattern_02.png);
	background-repeat:repeat;
}
section.business > figure{
	position:absolute;
	z-index:-1;
	width:100%;
	top:0;
	left:0;
}
section.business > figure img{
	width:100%;
}
section.business > div.inner::before{
	font-family:'Oswald';
	content:'BUSINESS DETAILS';
	display:block;
	color:#FFF;
	font-weight:400;
	position:absolute;
	z-index:4;
	top:0;
	left:50%;
	transform:translateX(-50%);
	white-space:nowrap;
	opacity:0.5;
}
section.business > div.inner > h2.title,
section.business > div.inner > p.explanation{
	position:relative;
	color:#FFF;
	background-color:rgba(0,0,0,0);
	z-index:1;
}
section.business > div.inner > h2.title{
	position:relative;
	z-index:1;
	height:2em;
	line-height:2em;
	display:inline-block;
	margin:0 auto;
	padding:0 1.5em;
	background-color:rgba(68,68,85,0);
	color:rgba(255,255,255,0);
}
section.business > div.inner > h2.title::before,
section.business > div.inner > h2.title::after{
	content:'';
	position:absolute;
	width:0;
	height:0;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:block;
}
section.business div.inner > h2.title::before{
	box-sizing:border-box;
	border:solid 1px #FFF;
	border-radius:1em;
	z-index:-1;
	background-color:#445;
	opacity:0;
}
section.business div.inner > h2.title::after{
	border-top:solid 1px #FFF;
	z-index:-2;
	opacity:0;
}
section.business div.inner > h2.title.visible::before{
	animation:titlewrap 300ms linear 200ms forwards;
}
section.business div.inner > h2.title.visible::after{
	animation:titleline 300ms ease-in forwards;
}
section.business div.inner > h2.title.visible{
	animation:titletext-light 600ms ease-out 500ms forwards;
}
section.business > div.inner > p.explanation.visible{
	animation:fadeup 400ms ease-out 600ms forwards;
}
section.business > div.inner > p.explanation{
	opacity:0;
}
section.business > div.inner div.businesslist{
	position:relative;
	z-index:3;
}
section.business > div.inner div.businesslist .listitem{
	position:relative;
	z-index:1;
	overflow:hidden;
	background-color:#334;
}
section.business div.inner div.businesslist .listitem::before{
	position:absolute;
	z-index:2;
	content:'';
	display:block;
	width:0;
	height:0;
	left:auto;
	right:0;
	top:50%;
	transform:translate(0,-50%);
}
section.business div.inner div.businesslist .listitem.graphic::before{
	background-color:rgba(153,0,153,0.75);
}
section.business div.inner div.businesslist .listitem.website::before{
	background-color:rgba(51,153,255,0.75);
}
section.business div.inner div.businesslist .listitem.system::before{
	background-color:rgba(51,51,153,0.75);
}
section.business div.inner div.businesslist .listitem.branding::before{
	background-color:rgba(255,0,102,0.75);
}
section.business div.inner div.businesslist .listitem.consulting::before{
	background-color:rgba(255,153,0,0.75);
}
section.business div.inner div.businesslist .listitem.management::before{
	background-color:rgba(51,153,51,0.75);
}
section.business div.inner div.businesslist .listitem a{
	position:absolute;
	z-index:3;
	width:100%;
	display:block;
	text-decoration:none;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
section.business div.inner div.businesslist .listitem a h2{
	color:#FFF;
	background-color:rgba(0,0,0,0);
	line-height:30px;
	text-align:center;
	font-weight:700;
	font-size:14px;
	opacity:0;
}
section.business div.inner div.businesslist .listitem figure{
	position:absolute;
	display:block;
	width:100%;
	bottom:-20px;
}
section.business div.inner div.businesslist .listitem figure img{
	width:100%;
}
section.business div.inner div.businesslist .listitem figure.color{
	z-index:1;
}
section.business div.inner div.businesslist .listitem figure.filter{
	display:none;
	z-index:1;
}
body.ie section.business div.inner div.businesslist .listitem figure.filter{
	display:block;
	opacity:0;
	transition:all 0.6s ease;
}
body.ie section.business div.inner div.businesslist .listitem:hover figure.filter{
	opacity:1;
}
section.business div.inner div.businesslist .listitem div.textwrap{
	position:absolute;
	z-index:2;
	top:50%;
	left:50%;
	width:100%;
	height:100%;
	transform:translate(-50%,-50%);
	box-sizing:border-box;
	border:solid 9px;
	border-color:rgba(255,255,255,0);
	transition:all 0.6s ease;
}
section.business div.inner div.businesslist .listitem div.textwrap p.subtitle,
section.business div.inner div.businesslist .listitem p.text{
	width:100%;
	position:absolute;
	z-index:1;
	color:#FFF;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	box-sizing:border-box;
}
section.business div.inner div.businesslist .listitem div.textwrap p.subtitle{
	font-family:'Oswald';
	transition:all 0.6s ease;
}
section.business div.inner div.businesslist .listitem p.text{
	text-align:left;
	opacity:0;
	transition:all 0.9s ease;
	background-color:rgba(0,0,0,0);
	z-index:2;
}
section.business div.inner div.contactbtnarea{
	text-align:center;
	position:relative;
	z-index:2;
	padding:0 0 100px 0;
	background-position:center bottom;
	background-repeat:repeat-x;
	background-size:300px 150px;
}
body.edge section.business div.inner div.contactbtnarea,
body.chrome section.business div.inner div.contactbtnarea,
body.firefox section.business div.inner div.contactbtnarea{
	background-image:url(../img/bg/contact.webp);
}
body:not(.edge):not(.chrome):not(.firefox) section.business div.inner div.contactbtnarea{
	background-image:url(../img/bg/contact.png);
}
section.business div.inner div.contactbtnarea::after{
	width:100%;
	height:20px;
	content:'';
	position:absolute;
	z-index:1;
	left:0;
	bottom:0;
}
section.business div.inner 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;
}
section.business div.inner div.contactbtnarea div.btnwrap > *::before{
	content:'';
	display:block;
	top:5px;
	right:5px;
	bottom:5px;
	left:5px;
	position:absolute;
	z-index:-1;
	border-radius:5px;
}
section.business div.inner 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;
}
section.business div.inner div.contactbtnarea div.btnwrap.dark > *{
	background-color:rgba(255,255,255,0.5);
	color:#445;
}
section.business div.inner div.contactbtnarea div.btnwrap.dark > *::before{
	background-color:#fff;
}
section.business div.inner div.contactbtnarea  div.btnwrap.light > *{
	background-color:rgba(68,68,85,0.5);
	color:#fff;
}
section.business div.inner div.contactbtnarea  div.btnwrap.light > *::before{
	background-color:#445;
}
section.business div.inner div.contactbtnarea.visible div.btnwrap > *{
	animation:fadeup 600ms ease-out 600ms forwards;
}
section.business div.inner div.contactbtnarea > picture{
	position:absolute;
	bottom:0;
	transform:translateY(100%);
	transition:all 0.9s ease;
}
section.business div.inner div.contactbtnarea.visible > picture{
	transform:translateY(0);
}
section.business div.inner div.contactbtnarea img{
	width:100%;
}
/*----------------------------------------------------
** Production example
**----------------------------------------------------*/
section.example{
	overflow:hidden;
	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:fadeupsmall 300ms ease-out forwards;
}
section.example div.decorationtitle{
	position:relative;
	z-index:1;
	width:100%;
	text-align:center;
}
section.example div.decorationtitle > div{
	position:relative;
	z-index:1;
	display:inline-block;
	margin:0 auto;
}
section.example div.decorationtitle > div::before{
	font-family:'Oswald';
	content:'PRODUCTION EXAMPLE';
	color:#0bf;
	font-weight:400;
	position:relative;
	z-index:4;
	white-space:nowrap;
	opacity:0;
	transform:translate3d(0,20px,0);
	transition:all 0.3s ease;
}
section.example.visible div.decorationtitle > div::before{
	opacity:0.5;
	transform:translate3d(0,0,0);
}
section.example div.decorationtitle::after{
	content:'';
	display:block;
	position:absolute;
	z-index:-1;
	border-top:solid 1px #0bf;
	width:0;
	height:0;
	top:50%;
	left:50%;
	opacity:0.5;
	transform:translate(-50%,-50%);
	transition:all 0.5s ease;
}
section.example.visible div.decorationtitle::after{
	width:100%;
}
section.example div.decorationtitle span{
	display:block;
	position:absolute;
	z-index:1;
	border:solid 1px #0bf;
	box-sizing:border-box;
	top:50%;
	transform:translateY(-50%);
	opacity:0;
}
section.example div.decorationtitle div span:nth-child(1){
	width:20px;
	height:20px;
	left:-40px;
}
section.example div.decorationtitle div span:nth-child(2){
	width:30px;
	height:30px;
	left:-80px;
}
section.example div.decorationtitle div span:nth-child(3){
	width:20px;
	height:20px;
	right:-40px;
}
section.example div.decorationtitle div span:nth-child(4){
	width:30px;
	height:30px;
	right:-80px;
}
section.example.visible div.decorationtitle div span:nth-child(1){
	animation:decoblock-small-left 300ms ease-out 300ms forwards;
}
section.example.visible div.decorationtitle div span:nth-child(2){
	animation:decoblock-large-left 300ms ease-out 600ms forwards;
}
section.example.visible div.decorationtitle div span:nth-child(3){
	animation:decoblock-small-right 300ms ease-out 300ms forwards;
}
section.example.visible div.decorationtitle div span:nth-child(4){
	animation:decoblock-large-right 300ms ease-out 600ms 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 > h2.title{
	position:relative;
	z-index:1;
	height:2em;
	line-height:2em;
	display:inline-block;
	margin:0 auto;
	padding:0 1.5em;
	background-color:rgba(255,255,255,0);
	color:rgba(68,68,85,0);
}
section.example > div.inner > h2.title::before,
section.example > div.inner > h2.title::after{
	content:'';
	position:absolute;
	width:0;
	height:0;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:block;
}
section.example div.inner > h2.title::before{
	box-sizing:border-box;
	border:solid 1px #0bf;
	border-radius:1em;
	z-index:-1;
	background-color:#f2f2f6;
	opacity:0;
}
section.example div.inner > h2.title::after{
	border-top:solid 1px #0bf;
	z-index:-2;
	opacity:0;
}
section.example div.inner > h2.title.visible::before{
	animation:titlewrap 300ms linear 200ms forwards;
}
section.example div.inner > h2.title.visible::after{
	animation:titleline 300ms ease-in forwards;
}
section.example div.inner > h2.title.visible{
	animation:titletext-dark 600ms ease-out 500ms forwards;
}
section.example > div.inner > p.explanation.visible{
	animation:fadeup 400ms ease-out 600ms forwards;
}
section.example > div.inner > p.explanation{
	opacity:0;
}





/*----------------------------------------------------
** News area
**----------------------------------------------------*/
section.news{
	position:relative;
	z-index:1;
	background-color:#f90;
	background-repeat:repeat;
	background-position:center top;
	background-size:94px 82px;
	text-align:center;
	overflow:hidden;
}
section.news::before{
	content:'';
	display:block;
	width:100%;
	height:120px;
	background: -webkit-linear-gradient(top, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 30%,rgba(242,242,246,0) 100%);
	background: linear-gradient(to bottom, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 30%,rgba(242,242,246,0) 100%);
}
section.news::after{
	position:absolute;
	z-index:2;
	content:'';
	display:block;
	top:0;
	width:100%;
	height:120px;
	background-image:url(../img/pattern_03.png);
	background-position:center top;
	background-size:10px 10px;
	background-repeat:repeat;
}
section.news > div.inner::before{
	font-family:'Oswald';
	content:'GRANTEST NEWS';
	display:block;
	color:#f90;
	font-weight:400;
	position:absolute;
	z-index:4;
	left:50%;
	transform:translateX(-50%);
	white-space:nowrap;
	opacity:0.5;
}
section.news > h2.title{
	position:relative;
	z-index:1;
}
section.news > h2.title{
	position:relative;
	z-index:1;
	height:2em;
	line-height:2em;
	display:inline-block;
	margin:0 auto;
	padding:0 1.5em;
	background-color:rgba(255,255,255,0);
	color:rgba(68,68,85,0);
}
section.news > h2.title::before,
section.news > h2.title::after{
	content:'';
	position:absolute;
	width:0;
	height:0;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:block;
}
section.news > h2.title::before{
	box-sizing:border-box;
	border:solid 1px #f90;
	border-radius:1em;
	z-index:-1;
	background-color:#FFF;
	opacity:0;
}
section.news > h2.title::after{
	border-top:solid 1px #f90;
	z-index:-2;
	opacity:0;
}
section.news > h2.title.visible::before{
	animation:titlewrap 300ms linear 200ms forwards;
}
section.news > h2.title.visible::after{
	animation:titleline 300ms ease-in forwards;
}
section.news > h2.title.visible{
	animation:titletext-dark 600ms ease-out 500ms forwards;
}
section.news div.newswrap article{
	text-align:left;
	position:relative;
	z-index:1;
	transition:all 0.6s ease;
	transform:scale(0.7);
	opacity:0;
}
section.news div.newswrap article.visible{
	transform:scale(1);
	opacity:1;
}
section.news div.newswrap article picture img{
	object-fit:cover;
}
section.news div.newswrap article a{
	position:absolute;
	z-index:3;
	background-color:rgba(255,255,255,0);
	color:#445;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:block;
}
section.news div.newswrap article a h2{
	background-color:rgba(255,255,255,0);
	color:#445;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	overflow:hidden;
}
section.news div.btnarea a{
	display:inline-block;
	text-decoration:none;
	background-color:#f90;
	color:#000;
	position:relative;
	z-index:1;
	margin:0 auto;
}
section.news div.btnarea a img{
	opacity:0;
	width:100%;
	height:0;
}
section.news div.btnarea a::before{
	content:'ニュース一覧はこちら';
	color:#FFF;
}
section.news 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.news div.btnarea{
	opacity:0;
}
section.news div.btnarea.visible{
	animation:fadeupsmall 300ms ease-out forwards;
}
/*----------------------------------------------------
** Retina Display
**----------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio:2), (min-resolution: 2dppx){
	section.beginners dl dt::after,
	section.business div.inner > h2.title::after,
	section.example div.inner > h2.title::after{
		border-width:0.9px;
	}
	section.business div.inner div.btnarea{
		background-image:url(../img/bg/contact@2x.png);
	}
	body.edge section.business div.inner div.btnarea,
	body.chrome section.business div.inner div.btnarea,
	body.firefox section.business div.inner div.btnarea{
		background-image:url(../img/bg/contact@2x.webp);
	}
}
@media screen and (max-width:320px){
	div.slider div.cs_item dl dd{
		font-size:13px;
	}
}
@media screen and (max-width:767px){
	div.slider .comboslider::before,
	section.beginners::after{
		background-image:url(../img/pattern_01@2x.png);
	}
	div.slider div.inner > div{
		width:100vw;
	}
	div.slider div.cs_item dl dt{
		font-size:13vw;
		line-height:13vw;
	}
	div.slider div.cs_item dl dd{
		padding:10px 0 0 0;
		width:90vw;
	}
	div.slider div.cs_item.slideactive dl dd p{
		font-size:16px;
	}
	div.scrollnavi{
		width:210px;
		height:20px;
		left:calc( 50% - 105px );
	}
	div.scrollnavi svg{
		fill:#FFF;
	}
	div.scrollnavi span:nth-of-type(1){
		top:12px;
	}
	div.scrollnavi span:nth-of-type(2){
		top:16px;
	}
	div.scrollnavi span:nth-of-type(3){
		top:20px;
	}
	section.beginners{
		padding:60px 0;
	}
	section.beginners::before,
	section.business > div.inner::before,
	section.example div.decorationtitle > div::before,
	section.news > div.inner::before{
		font-size:7vw;
		line-height:50px;
	}
	section.beginners.visible div.logowrap{
		padding:0 0 30px 0;
	}
	section.beginners div.titlesymbol{
		width:30vw;
		height:30vw;
		margin:0 auto 15px auto;
	}
	section.beginners h2.titlelogo{
		width:210px;
		height:20px;
		margin:0 auto;
		padding:15px 0 0 0;
		opacity:1;
	}
	section.beginners div.titlesymbol svg{
		width:30vw;
		height:30vw;
	}
	section.beginners h2.titlelogo svg{
		width:210px;
		height:20px;
	}
	section.beginners dl{
		padding:20px 0 0 0;
	}
	section.beginners dl dt,
	section.beginners dl dt p,
	section.business > div.inner > dl > dt,
	section.business > div.inner > dl > dt > p,
	section.example > div.inner > h2.title,
	section.news > h2.title{
		font-size:16px;
	}
	section.beginners dl dd{
		line-height:2.5em;
		padding:20px 5vw 30px 5vw;
	}
	section.beginners div.btnarea a{
		font-size:16px;
		line-height:40px;
		height:40px;
		padding:0 40px 0 20px;
		border-radius:5px;
	}
	section.business{
		padding:60px 0 0 0;
	}
	section.business > div.inner{
		padding:50px 0 0 0;
	}
	section.business > div.inner::before{
		top:50px;
	}
	section.business > div.inner > h2.title{
		font-size:16px;
	}
	section.business > div.inner > p.explanation{
		padding:20px 5vw 0 5vw;
		line-height:2.5em;
	}
	section.business div.inner div.businesslist{
		margin:30px 0 0 0;
		padding:0 15px;
	}
	section.business div.inner div.businesslist .listitem{
		width:100%;
		height:calc(( 100vw - 30px ) * 0.5625 );
		margin:0 0 20px 0;
	}
	section.business div.inner div.businesslist .listitem a{
		padding:calc(((( 100vw - 30px ) * 0.5625 ) - 30px ) / 2 - 20px ) 0 calc(((( 100vw - 30px ) * 0.5625 ) - 30px ) / 2 + 20px ) 0;
	}
	section.business div.inner div.businesslist .listitem img{
		width:calc( 100vw - 30px );
		height:calc( 100vw - 30px );
	}
	section.business div.inner div.businesslist .listitem div.textwrap p.subtitle{
		font-size:8vw;
		line-height:40px;
		height:40px;
	}
	section.business div.inner div.businesslist .listitem p.text{
		line-height:1.8em;
		padding:0 7vw;
	}
	section.business div.inner div.businesslist .listitem.visible::before{
		animation:businessItemLine 300ms ease-out 300ms forwards;
		opacity:0.3;
	}
	section.business div.inner div.businesslist .listitem::after{
		position:absolute;
		z-index:1;
		content:'';
		display:block;
		top:50%;
		left:50%;
		background-color:rgba(68,68,85,0.75);
		transform:translate(-50%,-50%);
		width:calc( 100% - 20px );
		height:calc( 100% - 20px );
		transition:all 1.2s ease;
		opacity:0;
	}
	section.business div.inner div.businesslist .listitem.visible::after{
		opacity:1;
	}
	section.business div.inner div.businesslist .listitem figure{
		filter:grayscale(100%);
		transition:all 0.6s ease;
	}
	section.business div.inner div.businesslist .listitem.visible figure{
		filter:grayscale(0);
	}
	section.business div.inner div.businesslist .listitem.visible div.textwrap{
		border-color:rgba(255,255,255,0.5);
	}
	section.business div.inner div.businesslist .listitem.visible div.textwrap p.subtitle{
		transform:translate3d(-50%,-190%,0);
	}
	section.business div.inner div.businesslist .listitem.visible p.text{
		transform:translate3d(-50%,0,0);
		opacity:1;
	}
	section.business div.inner div.businesslist .listitem.visible a h2{
		animation:businessItemTitle 300ms ease-out 600ms forwards;
	}
	section.business div.inner div.contactbtnarea{
		padding:20px 0 60px 0;
	}
	section.business div.inner div.contactbtnarea div.btnwrap > *{
		padding:0 30px 0 50px;
		line-height:60px;
		margin:20px auto 0 auto;
		font-size:16px;
	}
	section.business div.inner div.contactbtnarea div.btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark@2x.png);
	}
	section.business div.inner div.contactbtnarea div.btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light@2x.png);
	}
	section.business div.inner div.contactbtnarea div.btnwrap.dark > a span{
		background-image:url(../img/bg/flow_btn_dark@2x.png);
	}
	section.business div.inner div.contactbtnarea div.btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light@2x.png);
	}
	section.business div.inner div.contactbtnarea > picture{
		width:500px;
		left:calc( 50% - 250px );
	}
	section.example{
		padding:50px 0 20px 0;
	}
	section.example div.decorationtitle{
		height:50px;
	}
	section.example > div.inner > h2.title{
		margin:20px 0 0 0;
		line-height:30px;
		height:30px;
	}
	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;
	}
	section.news{
		background-image:url(../img/pattern_04@2x.png);
		padding:0 0 60px 0;
	}
	section.news > div.inner::before{
		top:60px;
	}
	section.news div.newswrap{
		margin:20px 0 0 0;
	}
	section.news div.newswrap article{
		display:flex;
		flex-direction:row-reverse;
		padding:10px 0;
		margin:0 15px;
		border-bottom:solid 0.9px #dbdbdb; 
		justify-content:center;
	}
	section.news div.newswrap article picture{
		width:135px;
	}
	section.news div.newswrap article picture img{
		width:135px;
		height:90px;
	}
	section.news div.newswrap article div.newsinner{
		width:calc( 100vw - 50px );
		height:90px;
		position:relative;
		z-index:1;
		margin:0 10px;
	}
	section.news div.newswrap article picture + div.newsinner{
		width:calc( 100vw - 185px );
	}
	section.news div.newswrap article div.newsinner > div{
		position:absolute;
		z-index:1;
		right:0;
		bottom:0;
		left:0;
		opacity:0.7;
		display:flex;
		justify-content:space-between;
		height:20px;
	}
	section.news div.newswrap article div.newsinner > div > *{
		font-size:12px;
		line-height:20px;
	}
	section.news div.btnarea{
		margin:40px 0 0 0;
		height:40px;
	}
	section.news div.btnarea a{
		font-size:16px;
		line-height:40px;
		height:40px;
		padding:0 40px 0 20px;
		border-radius:5px;
	}
}
@media screen and (max-width:320px){
	section.beginners dl dd p{
		font-size:13px;
	}
	section.business div.inner div.businesslist .listitem p.text{
		line-height:1.4em;
		font-size:13px;
	}
	section.business div.inner div.businesslist .listitem.visible div.textwrap p.subtitle{
		transform:translate3d(-50%,-170%,0);
	}
}
@media screen and (min-width:768px) and (max-width:1099px){
	div.slider{
		margin:-70px 0 0 0;
	}
	div.slider div.inner > div{
		width:100vw;
		height:calc( 100vh - 37px );
	}
	div.slider .comboslider::before,
	section.beginners::after{
		background-image:url(../img/pattern_01@2x.png);
	}
	div.slider div.inner > div{
		width:100vw;
		height:calc( 100vh - 37px );
	}
	div.slider div.cs_item dl dt{
		font-size:13vw;
		line-height:13vw;
	}
	div.slider div.cs_item dl dd{
		padding:10px 0 0 0;
		font-size:18px;
	}
	div.scrollnavi{
		width:315px;
		height:30px;
		left:calc( 50% - 157.5px );
	}
	div.scrollnavi svg{
		fill:#FFF;
	}
	div.scrollnavi span:nth-of-type(1){
		top:22px;
	}
	div.scrollnavi span:nth-of-type(2){
		top:26px;
	}
	div.scrollnavi span:nth-of-type(3){
		top:30px;
	}
	section.beginners{
		padding:60px 0 0 0;
	}
	section.beginners::before,
	section.beginners::before{
		font-size:9vw;
		line-height:60px;
	}
	section.beginners div.titlesymbol{
		width:30vw;
		height:30vw;
		margin:0 auto 15px auto;
	}
	section.beginners h2.titlelogo{
		width:420px;
		height:40px;
		margin:0 auto;
		padding:15px 0 0 0;
		opacity:1;
	}
	section.beginners div.titlesymbol svg{
		width:30vw;
		height:30vw;
	}
	section.beginners h2.titlelogo svg{
		width:420px;
		height:40px;
	}
	section.beginners dl{
		padding:20px 0 0 0;
	}
	section.beginners dl dt{
		font-size:16px;
	}
	section.beginners dl dd{
		line-height:1.8em;
		padding:20px 5vw 0 5vw;
	}
}
@media (orientation: landscape) and (max-width:568px){
	div.slider div.inner > div{
		width:100vw;
		height:calc( 100vh - 37px );
	}
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
	body.safari div.slider{
		height:calc( 100vh - 120px );
	}
	div.slider div.inner > div{
		width:100vw;
		height:calc( 100vh - 37px );
	}
	body.safari div.slider div.inner > div,
	body.safari div.slider div.inner > div img{
		height:calc( 100vh - 120px );
	}
	div.slider div.cs_item dl{
		display:table;
		width:80vw;
	}
	div.slider div.cs_item dl > *{
		display:table-cell;
		width:40vw;
		vertical-align:middle;
	}
	div.slider div.cs_item dl dt{
		font-size:6vw;
		line-height:6vw;
		text-align:right;
	}
	div.slider div.cs_item dl dd{
		box-sizing:border-box;
		padding:0 0 0 14px;
		text-align:left;
	}
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
	div.slider .comboslider::before,
	section.beginners::after{
		background-image:url(../img/pattern_01.png);
	}
	div.slider div.inner > div{
		width:100%;
		height:calc( 100vh - 37px );
	}
	div.slider div.cs_item dl dt{
		font-size:8vw;
		line-height:8vw;
	}
	div.slider div.cs_item dl dd{
		font-size:18px;
	}
	div.scrollnavi{
		width:420px;
		height:40px;
		left:calc( 50% - 210px );
	}
	div.scrollnavi svg{
		fill:#FFF;
	}
	div.scrollnavi span:nth-of-type(1){
		top:32px;
	}
	div.scrollnavi span:nth-of-type(2){
		top:36px;
	}
	div.scrollnavi span:nth-of-type(3){
		top:40px;
	}
}
@media screen and (min-width:1100px){
	div.slider{
		margin:-80px 0 0 0;
	}
	div.slider .comboslider::before,
	section.beginners::after{
		background-image:url(../img/pattern_01.png);
	}
	div.slider div.inner > div{
		width:100%;
		height:calc( 100vh - 37px );
	}
	div.slider div.cs_item dl dt{
		font-size:8vw;
		line-height:8vw;
	}
	div.slider div.cs_item dl dd{
		padding:20px 0 0 0;
		font-size:18px;
	}
	div.slider div.cs_item.slideactive dl dd p{
		font-size:24px;
	}
	div.scrollnavi{
		width:420px;
		height:40px;
		left:calc( 50% - 210px );
	}
	div.scrollnavi svg{
		fill:#FFF;
		height:40px;
	}
	div.scrollnavi span:nth-of-type(1){
		top:32px;
	}
	div.scrollnavi span:nth-of-type(2){
		top:36px;
	}
	div.scrollnavi span:nth-of-type(3){
		top:40px;
	}
	section.beginners{
		padding:80px 0;
	}
	section.beginners::before,
	section.business > div.inner::before,
	section.example div.decorationtitle > div::before,
	section.news > div.inner::before{
		font-size:60px;
		line-height:80px;
	}
	section.beginners div.titlesymbol{
		width:22vw;
		height:24vw;
		margin:0 auto 15px auto;
	}
	section.beginners h2.titlelogo{
		height:40px;
		margin:0 auto;
		padding:20px 0 0 0;
		opacity:1;
	}
	section.beginners div.titlesymbol svg{
		width:22vw;
		height:22vw;
	}
	section.beginners h2.titlelogo svg{
		width:420px;
		height:40px;
		margin:0 auto;
	}
	section.beginners dl{
		padding:60px 0 0 0;
	}
	section.beginners dl dt,
	section.beginners dl dt p,
	section.business > div.inner > h2.title{
		font-size:18px;
	}
	section.beginners dl dd p{
		font-size:16px;
		line-height:2.5em;
		padding:40px 0 0 0;
	}
	section.beginners div.btnarea{
		margin:60px 0 0 0;
	}
	section.beginners 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.beginners div.btnarea a:hover{
		background-color:#0bf;
	}
	section.business{
		padding:120px 0 0 0;
	}
	section.business > div.inner{
		padding:70px 0 0 0;
	}
	section.business > div.inner::before{
		top:80px;
	}
	section.business > div.inner > p.explanation{
		padding:20px 5vw 0 5vw;
		line-height:2.5em;
		font-size:16px;
	}
	section.business div.inner div.businesslist{
		width:1100px;
		margin:60px auto 0 auto;
		display:flex;
		justify-content:center;
		flex-wrap:wrap;
	}
	section.business div.inner div.businesslist .listitem{
		width:320px;
		height:240px;
		margin:0 30px 60px 30px;
	}
	section.business div.inner div.businesslist .listitem a{
		padding:80px 0 120px 0;
	}
	section.business div.inner div.businesslist .listitem img{
		width:320px;
		height:320px;
	}
	section.business div.inner div.businesslist .listitem div.textwrap p.subtitle{
		font-size:30px;
		line-height:40px;
		height:40px;
	}
	section.business div.inner div.businesslist .listitem p.text{
		line-height:1.8em;
		padding:0 25px;
	}
	section.business div.inner div.businesslist .listitem:hover::before{
		animation:businessItemLinePC 300ms ease-out forwards;
	}
	section.business div.inner div.businesslist .listitem:hover figure{
		filter:grayscale(100%);
	}
	section.business div.inner div.businesslist .listitem:hover div.textwrap{
		border-color:rgba(255,255,255,0.7);
	}
	section.business div.inner div.businesslist .listitem:hover div.textwrap p.subtitle{
		transform:translate3d(-50%,-190%,0);
	}
	section.business div.inner div.businesslist .listitem:hover p.text{
		transform:translate3d(-50%,0,0);
		opacity:1;
	}
	section.business div.inner div.businesslist .listitem:hover a h2{
		animation:businessItemTitle 300ms ease-out 300ms forwards;
	}
	
	
	
	
	section.business div.inner div.contactbtnarea{
		padding:30px 0 150px 0;
	}
	section.business div.inner div.contactbtnarea div.btnwrap{
		display:flex;
		justify-content:center;
	}
	section.business div.inner div.contactbtnarea div.btnwrap > *{
		padding:0 30px 0 60px;
		line-height:80px;
		margin:20px 20px 0 20px;
		font-size:21px;
	}
	section.business div.inner div.contactbtnarea div.btnwrap > * span{
		left:20px;
	}
	section.business div.inner div.contactbtnarea div.btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark.png);
	}
	body.edge section.business div.inner div.contactbtnarea div.btnwrap.dark > div span,
	body.chrome section.business div.inner div.contactbtnarea div.btnwrap.dark > div span,
	body.firefox section.business div.inner div.contactbtnarea div.btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark.webp);
	}
	section.business div.inner div.contactbtnarea div.btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light.png);
	}
	body.edge section.business div.inner div.contactbtnarea div.btnwrap.light > div span,
	body.chrome section.business div.inner div.contactbtnarea div.btnwrap.light > div span,
	body.firefox section.business div.inner div.contactbtnarea div.btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light.webp);
	}
	section.business div.inner div.contactbtnarea div.btnwrap.dark > a span{
		background-image:url(../img/bg/flow_btn_dark.png);
	}
	body.edge section.business div.inner div.contactbtnarea div.btnwrap.dark > a span,
	body.chrome section.business div.inner div.contactbtnarea div.btnwrap.dark > a span,
	body.firefox section.business div.inner div.contactbtnarea div.btnwrap.dark > a span{
		background-image:url(../img/bg/flow_btn_dark.webp);
	}
	section.business div.inner div.contactbtnarea div.btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light.png);
	}
	body.edge section.business div.inner div.contactbtnarea div.btnwrap.light > a span,
	body.chrome section.business div.inner div.contactbtnarea div.btnwrap.light > a span,
	body.firefox section.business div.inner div.contactbtnarea div.btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light.webp);
	}
	
	
	
	section.business div.inner div.contactbtnarea > picture{
		width:1000px;
		left:calc( 50% - 500px );
	}
	section.example{
		padding:80px 0;
	}
	section.example div.decorationtitle div span:nth-child(1){
		left:-60px;
	}
	section.example div.decorationtitle div span:nth-child(2){
		left:-100px;
	}
	section.example div.decorationtitle div span:nth-child(3){
		right:-60px;
	}
	section.example div.decorationtitle div span:nth-child(4){
		right:-100px;
	}
	section.example > div.inner > h2.title,
	section.news > h2.title{
		margin:60px 0 0 0;
		font-size:18px;
	}
	section.example div.inner > h2.title::after{
		opacity:0.5;
	}
	section.example > div.inner > p.explanation{
		padding:30px 0 20px 0;
		line-height:20px;
	}
	section.example span.supplement{
		font-size:12px;
		opacity:0.7;
		width:1040px;
		margin:0 auto;
		padding:20px 0 0 0;
		text-align:right;
		display:block;
		line-height:20px;
		height:20px;
	}
	section.example div.btnarea{
		margin:20px 0 0 0;
		height:50px;
	}
	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;
	}
	section.news{
		background-image:url(../img/pattern_04.png);
		padding:0 0 100px 0;
	}
	section.news > div.inner::before{
		top:80px;
	}
	section.news div.newswrap{
		margin:40px auto 0 auto;
		display:flex;
		justify-content:center;
		flex-wrap:wrap;
		width:1100px;
	}
	section.news div.newswrap article{
		width:300px;
		box-sizing:border-box;
		padding:15px;
		margin:0 15px 30px 15px;
		background-color:#FFF;
		box-shadow:0px 0px 5px rgba(68,68,85,0.2);
	}
	section.news div.newswrap article picture{
		width:270px;
		position:relative;
		z-index:2;
	}
	section.news div.newswrap article::before{
		position:absolute;
		z-index:1;
		top:15px;
		left:15px;
		content:'NO IMAGE';
		color:#BBB;
		width:270px;
		height:180px;
		background-color:#f2f2f6;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	section.news div.newswrap article picture img{
		position:relative;
		z-index:2;
		width:270px;
		height:180px;
	}
	section.news div.newswrap article a{
		padding:205px 15px 35px 15px;
	}
	section.news div.newswrap article a h2{
		line-height:20px;
	}
	section.news div.newswrap article div.newsinner{
		padding:255px 0 0 0;
	}
	section.news div.newswrap article picture + div.newsinner{
		padding:75px 0 0 0;
	}
	section.news div.newswrap article div.newsinner > div{
		width:100%;
		opacity:0.7;
		display:flex;
		justify-content:space-between;
		height:20px;
	}
	section.news div.newswrap article div.newsinner > div > *{
		font-size:12px;
		line-height:20px;
	}
	section.news div.btnarea{
		margin:20px 0 0 0;
		height:50px;
	}
	section.news 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.news div.btnarea a:hover{
		background-color:#445;
	}
}
/*----------------------------------------------------
** Internet Explorer
**----------------------------------------------------*/