@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;600;700&display=swap');
@font-face {
  font-family: 'Phenomena-Bold';
  src: url('/common/fonts/Phenomena-Bold.otf') format('opentype');
}
/* reset
-------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
p,blockquote,table,th,td, figure, section, article {margin: 0; padding: 0;}
body,button {font:13px/1 "Meiryo UI", "ヒラギノ角ゴ Pro W3", YuGothic, "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;}
* html body {font-size: small;}
*:first-child+html body {font-size: small;}
img {border: 0; vertical-align: top;}
h1,h2,h3,h4,h5,h6 {font-size: 100%; font-weight: normal;}
ul,dl,ol {text-indent: 0;}
li {list-style: none;}
address,caption,cite,code,dfn,em,strong,th,var {font-style: normal; font-weight: normal;}
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}
input,textarea,select {font-family: inherit; font-size: inherit; font-weight:inherit;}
* html input,* html textarea,* html select {font-size: 100%;}
*:first-child+html+input,*:first-child html+textarea,*:first-child+html select {font-size: 100%;}
table {border-collapse: collapse; border-spacing: 0; font-size: inherit;}
th,td {text-align: left; vertical-align: top;}
caption {text-align: left;}
pre,code,kbd,samp,tt {font-family: monospace;}
* html pre,* html code,* html kbd,* html samp,* html tt {font-size: 100%; line-height: 100%;}
*:first-child+html pre,*:first-child html+code,*:first-child html+kbd,*:first-child+html+samp,*:first-child+html tt {font-size: 108%; line-height: 100%;}
input,select,textarea {font-size: 100%; font-family: Verdana, Helvetica, sans-serif;}
*:focus {outline: none;}

/* base
-------------------------------------------------------*/
html{
  font-size: 62.5%; /* 1rem = 10px */
	color: #233130;
}
*{
	box-sizing:border-box;
}
html,body{
	height: 100%;
}
body {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	background: #D6EDEB;
	font-size: 1.6rem;
}
strong {
	font-weight:bold;
}
a {
	color: #233130;
	text-decoration:none;
	transition: opacity 0.3s ease;
}
a:hover {
}
br.pchide{
  display: none;
}
img{
  max-width: 100%;
  height: auto;
}
img.pc{
  display: inline-block;
}
img.sp{
  display: none;
}
br.pc{
  display: inline;
}
br.sp{
  display: none;
}
/* header
-----------------------------------------------------*/
@media only screen and (min-width: 800px) {
	#site-header{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 40px 0 40px 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 10;
		transition: all 0.5s ease;
	}
	#site-header.scroll{
		padding: 10px 0 23px 40px;
	}
	#site-header .logo{
		width: 170px;
		height: auto;
		transition: all 0.1s ease;
	}
	#site-header.scroll .logo{
		width: 106px;
	}
	#site-header nav{
		padding-right: 3px;
		padding-left: 3px;
		transition: all 0.5s ease;
		background: rgba(255,255,255,0);
		height: 50px;
		border-radius: 50px;
		box-shadow: 1px 1px 5px rgba(0,0,0,0);
		margin-right: 10px;
	}
	#site-header.scroll nav{
		background: rgba(255,255,255,1);
		box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
		padding-top: 3px;
	}
	#site-header nav ul{
		display: flex;
	}
	#site-header nav ul li a{
		height: 44px;
		line-height: 44px;
		border-radius: 44px;
		font-size: 1.7rem;
		font-weight: 600;
		text-shadow: 0px 0px rgba(10, 179, 166, 0);
		transition: text-shadow 0.3s ease;
		display: inline-block;
		padding: 0 20px;
		background: rgba(22,22,22,0);
		transition: all 0.3s ease;
	}
	#site-header nav ul li a:hover,
	#site-header nav ul li.currentnav a{
		color: #fff;
		background: rgba(22,22,22,1);
	}
	#site-header nav ul li + li{
		margin-left: 5px;
	}
}
#headerbtn{
	display: none;
}
/* footer
-----------------------------------------------------*/
#pagetop{
	position: fixed;
	right: 0;
	bottom: 20px;
	z-index: 5;
}
#footer-contact{
	background: #ffffff;
	padding: 100px 40px;
	position: relative;
	margin-top: 110px;
}
#footer-contact .overlay{
	position: relative;
	z-index: 5;
}
#footer-contact p:first-child{
	font-size: 6rem;
	text-align: center;
	margin-bottom: 30px;
	color: #fff;
}
#footer-contact .title{
	text-align: center;
	font-size: 3.4rem;
	font-weight: 300;
	line-height: 1.5;
	margin-bottom: 50px;
	color: #fff;
}
#footer-contact .title strong{
	font-weight: 700;
}
#site-footer{
	 background: #efefef;
	padding: 60px 0 0 0;
}
#site-footer .logo{
	width: 170px;
}
#footer-contact-bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#footer-contact-bg #circle,
#footer-contact-bg #circle02{
	background: #00D6C1;
	width: 1000px;
	height: 1000px;
	border-radius: 100%;
	position: absolute;
	top: calc(50% - 500px);
	left: calc(50% - 500px);
	z-index: 2;
}
#footer-contact-bg #circle02{
	background: #C0F4EF;
	z-index: 1;
}
#site-footer .columns{
	display: flex;
	padding: 0 60px;
}
#site-footer .columns .col:first-child{
	width: 33.3%;
}
#site-footer .columns .col + .col{
}
#site-footer address{
	font-size: 1.4rem;
	line-height: 1.5;
	margin-top: 2em;
}
#site-footer nav{
	display: flex;
}
#site-footer nav > ul{
	max-width: 400px;
}
#site-footer nav > ul + ul{
	margin-left: 60px;
}
#site-footer nav > ul li{
	margin: 1em 0;
	font-weight: 600;
}
#site-footer nav > ul li:first-child{
	margin-top: 0;
}
#site-footer nav ul.child{
	display: flex;
	flex-wrap: wrap;
	margin-top: 0.5em;
}
#site-footer nav ul.child li{
	width: 50%;
	margin: 0.5em 0;
	font-weight: 400;
}
#site-footer nav a:hover{
	color: #666;
}
#site-footer .row{
	margin-top: 33px;
	display: flex;
	padding: 0 60px 28px 60px;
}
#site-footer .copy{
	text-align: center;
	letter-spacing: 0.2em;
	font-size: 1rem;
}
#site-footer .row nav a{
	font-size: 1.2rem;
}
#fixed{
	position: fixed;
	right: 20px;
	bottom: 0;
	z-index: 10;
}
#fixed a{
	display: inline-block;
	width: 200px;
	height: 56px;
	background: #ffffff;
	text-align: center;
	padding-top: 14px;
	border-radius: 10px 10px 0 0;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
	transition: height 0.2s ease;
}
#fixed a:hover{
	height: 60px;
}
#fixed a img{
	width: 160px;
}
/* common
-----------------------------------------------------*/
.btnbox{
	display: flex;
	justify-content: center;
}
.btnbox .btn{
	position: relative;
	width: 100%;
	height: 78px;
	max-width: 380px;
	border: 0;
	background: none;
	padding: 0;
}
.btnbox .btn span{
	color: #fff;
	font-size: 2rem;
	font-weight: 500;
	background: #161616;
	height: 78px;
	width: 100%;
	border-radius: 78px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
	cursor: pointer;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}
.btnbox .btn.medium,
.btnbox .btn.medium span{
	height: 56px;
	max-width: 326px;
	font-size: 1.7rem;
}
.btnbox .btn:after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	position: absolute;
	top: -3px;
	left: -3px;
	border-radius: 78px;
	opacity: 0;
	transition: opacity 0.3s ease;
	background: url("../../img/top/grad_bg.jpg");
	background-size: cover;
	animation: filteranimation 2s infinite linear;
	z-index: 0;
	padding: 3px;
}
.btnbox > .btn:hover:after{
	opacity: 1;
}
.btnbox > .btn + .btn{
	margin-left: 50px;
}
.btnbox02 a.btn{
	display: inline-block;
	background: rgba(22,22,22,1);
	color: #fff;
	font-size: 1.3rem;
	border-radius: 100px;
	padding: 9px 17px 10px 20px;
	transition: background 0.3s ease;
}
.btnbox02 a.btn:hover{
	background: rgba(22,22,22,0.8);
}
.btnbox02 a.btn:after{
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(-135deg);
	margin-left: 10px;
}
.btnbox.al-left{
	justify-content: flex-start;
}
.bg-right-wrap{
	padding-left: 6vw;
}
.bg-rightwrap .bg-right{
	background: #fff;
	border-radius: 10px 0 0 10px;
}
.bg-center{
	margin: 0 6vw;
	background: #fff;
	border-radius: 10px;
}
.margin-lr{
	margin: 110px auto;
	max-width: 1100px;
}
@media only screen and (max-width: 1220px) {
	.margin-lr{
		margin: 110px 60px;
	}
}
.bg-white{
	background: #fff;
	border-radius: 10px;
}
.bg-padding{
	padding: 60px;
}
ul.tags{
	display: flex;
	flex-wrap: wrap;
}
ul.tags li{
	margin-right: 5px;
	margin-bottom: 5px;
}
ul.tags li span{
	display: inline-block;
	padding: 5px 7px 6px 7px;
	background: #8EABB2;
	color: #fff;
	font-size: 1rem;
	border-radius: 5px;
}
.green{
	color: #06D7C2;
}
#pagetitle{
	text-align: center;
	margin-top: 160px;
	margin: 160px 60px 0px 60px;
	border-radius: 10px;
	text-align: center;
}
#pagetitle .phenomena{
	font-size: 7.5rem;
	margin-bottom: 20px;
	color: #5C767E;
}
#pagetitle h1,
#pagetitle h2{
	font-size: 3rem;
	font-weight: 600;
	color: #666;
}
h2.section-title{
	font-size: 3.5rem;
	margin-bottom: 30px;
	font-weight: 600;
}
.content p{
	line-height: 1.75;
}
/* top index
-----------------------------------------------------*/
#visual{
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 0 0 50px 50px;
}
#visual .txt{
	position: absolute;
	top: 50%;
	left: 12%;
	transform: translate(0, -50%);
	z-index: 2;
}
#visual p.copy{
	font-size: 6rem;
	font-weight: 700;
	letter-spacing: 0.8em;
	opacity: 0;
	color: #fff;
	transition: letter-spacing 1s ease-out,
	opacity 1s ease;
}
.load #visual p.copy{
	opacity: 0.9;
	letter-spacing: 0.1em;
}
#visual p.copy02{
	font-size: 3rem;
	font-weight: 600;
	color: #fff;
	margin-top: 20px;
	opacity: 0.9;
}
#visual p.copy03{
	color: #fff;
	opacity: 0.9;
	margin-top: 35px;
	font-size: 2rem;
}
#visual p.copy02,
#visual p.copy03{
	overflow: hidden;
	padding-bottom: 2px;
}
#visual p.copy02 span,
#visual p.copy03 span{
	position: relative;
	bottom: -1em;
	transition: bottom 0.5s ease;
}
#visual p.copy02 span{
	transition-delay: 0.8s;
}
#visual p.copy03 span{
	transition-delay: 1s;
}
.load #visual p.copy02 span,
.load #visual p.copy03 span{
	bottom: 0;
}
#visual p.renew-message{
	position: absolute;
	left: 0;
	bottom: 0;
	background: #cbff2b;
	color: #000;
	font-weight: 600;
	padding: 10px 10px;
	font-size: 1.8rem;
	z-index: 1;
	overflow: hidden;
	border-radius: 0 5px 0 0;
}
#visual p.renew-message span{
	display: inline-block;
	animation: slideInOut 5s ease-in-out infinite;
}
@keyframes slideInOut {
    0% {
        transform: translateX(100%);
    }
    10% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(0);
    }
    60% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(-100%);
    }
}
#intro{
	text-align: center;
	padding: 100px 20px;
	background: #fff;
}
#intro h1{
	font-size: 4rem;
	line-height: 1.5;
	font-weight: 300;
}
#intro h1 strong{
	font-weight: inherit;
	color: #0AB3A6;
}
#intro p{
	font-size: 2rem;
	margin-top: 2em;
	line-height: 1.9;
}
h2.en{
	margin-bottom: 50px;
}
h2.en span:first-child{
	font-family: Phenomena-Bold;
	text-align: center;
	font-size: 7.5rem;
	color: #5C767E;
}
.phenomena{
	font-family: Phenomena-Bold;
}
h2.en span.jp{
	font-size: 2rem;
	font-weight: 700;
	display: inline-block;
	margin-top: 10px;
}
#worry{
}
#worry h2{
	font-size: 4.6rem;
	font-weight: 400;
	text-align: left;
	text-align: center;
}
#worry h2 strong{
	color: #06D7C2;
	font-weight: 400;
}
#worry .bg-white{
	margin-top: 150px;
	padding-bottom: 110px;
}
ul.circles{
	display: flex;
	justify-content: center;
}
ul.circles li span.circle{
	background: #00D6C1;
	width: 200px;
	height: 200px;
	border-radius: 200px;
	color: #fff;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	font-size: 1.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transform: rotate(-30deg);
	transform-origin: bottom center;
	transition: all 0.3s ease;
	opacity: 0;
}
ul.circles.active li span.circle{
	transform: rotate(0);
	opacity: 1;
}
ul.circles.active li:nth-child(2) span.circle{
	transition-delay: 0.4s;
}
ul.circles.active li:nth-child(3) span.circle{
	transition-delay: 0.8s;
}
ul.circles li span.circle:after{
	top: calc(100% - 5px);
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 214, 193, 0);
	border-top-color: #00D6C1;
	border-width: 15px 12px;
	margin-left: -12px;
}
ul.circles li span.img{
	display: block;
	text-align: center;
	margin-top: 15px;
}
ul.circles li span.img img{
	width: 170px;
}
ul.circles li + li{
	margin-left: 50px;
}
#worry ul.circles{
	position: relative;
	top: -100px;
	margin-bottom: -100px;
}
#worry h3{
	text-align: center;
	font-weight: 600;
	line-height: 1.5;
	margin-top: 50px;
	font-size: 2.5rem;
}
.line-after:after{
	content: "";
	display: block;
	width: 100px;
	height: 5px;
	background: #00D6C1;
	margin: 38px auto 43px auto;
}
#worry ul.reason{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 30px;
	padding: 0 60px;
	margin: auto;
}
#worry ul.reason li h4{
	text-align: center;
	font-weight: 600;
	font-size: 2rem;
	margin-bottom: 0.8em;
}
#worry ul.reason li h4:before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url("../img/ico_check.svg") no-repeat;
	background-size: contain;
	vertical-align: -3px;
	margin-right: 7px;
}
/*
#worry ul.reason li h4:before{
	content: "＜ ";
}
#worry ul.reason li h4:after{
	content: " /＞";
}
#worry ul.reason li h4:before,
#worry ul.reason li h4:after{
	color: #666;
}
*/
#worry ul.reason li p{
	line-height: 1.75;
	font-size: 1.4rem;
}
.section-title{
	display: flex;
	align-items: center;
	margin-bottom: 32px;
}
.section-title .en{
	margin-bottom: 0;
	margin-right: 30px;
}
.section-title p{
	font-weight: 600;
	font-size: 1.4rem;
}
#top-service{
	margin-bottom: 110px;
}
#top-service .bg-white{
	padding: 60px;
}
@media only screen and (min-width: 800px) {
	.pannels-wrap{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		flex-wrap: wrap;
		position: relative;
		margin: auto;
	}
	.pannels-wrap:after{
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-image: url("../../img/top/grad_bg.jpg");
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		opacity: 0.5;
		animation: filteranimation 2s infinite linear;
	}
	@keyframes filteranimation{
		from {
			filter:hue-rotate(0deg);
		}
		to {
			filter:hue-rotate(360deg);
		}
	}
	.inner{
		max-width: 1200px;
		margin: auto;
	}
	.pannels-wrap .pannel{
		aspect-ratio: 6 / 4;
	}
	.pannels-wrap .pannel:nth-child(1),
	.pannels-wrap .pannel:nth-child(2){
	}
	.pannels-wrap .pannel:nth-child(3){
	}
	.pannels-wrap .pannel a{
		display: block;
		width: 100%;
		height: 100%;
		position: relative;
	}
	.pannels-wrap .corner{
		display: block;
		position: absolute;
		width: 100%;
		height: 10px;
	}
	.pannels-wrap .corner.top{
		top: 0;
		left: 0;
	}
	.pannels-wrap .corner.bottom{
		bottom: 0;
		left: 0;
	}
	.pannels-wrap .corner:before,
	.pannels-wrap .corner:after{
		content: "";
		display: inline-block;
		width: 8px;
		height: 8px;
		border-right: 1px solid #aaaaaa;
		border-bottom: 1px solid #aaaaaa;
		position: absolute;
		z-index: 1;
	}
	.pannels-wrap .corner.top:before{
		transform: rotate(180deg);
		top: 0;
		left: 0;
	}
	.pannels-wrap .corner.top:after{
		transform: rotate(-90deg);
		top: 0;
		right: 0;
	}
	.pannels-wrap .corner.bottom:before{
		transform: rotate(90deg);
		bottom: 0;
		left: 0;
	}
	.pannels-wrap .corner.bottom:after{
		bottom: 0;
		right: 0;
	}
	.pannels-wrap .pannel:nth-child(3n + 1) .corner{
		width: calc(100% + 1px);
	}
	.pannels-wrap .pannel:nth-child(3n + 2) .corner{
		width: calc(100% + 1px);
	}
	.pannels-wrap .pannel:nth-child(3n + 3) .corner{
	}
	.pannels-wrap .pannel:nth-child(3) ~ .pannel .corner.top{
		top: -1px;
	}
	.pannels-wrap .pannel{
		perspective: 1000px;
		z-index: 1;
	}
	.pannel:hover a {
		transform: rotateY(180deg);
	}
	.pannels-wrap .pannel a{
		transform-style: preserve-3d;
	}
	.pannels-wrap .pannel .front,
	.pannels-wrap .pannel .rear{
		position: absolute;
		width: 100%;
		height: calc(100% + 1px);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.pannels-wrap .pannel .front h3{
		font-size: 1.8rem;
		margin-top: 10px;
		font-weight: 600;
	}
	.pannels-wrap .pannel .rear{
		padding: 0 20px;
	}
	.pannels-wrap .pannel .rear h3{
		font-weight: 600;
		text-align: left;
		font-size: 1.6rem;
		margin-bottom: 10px;
	}
	.pannels-wrap .pannel .rear p{
		font-size: 1.3rem;
		line-height: 1.5;
		text-align: left;
		font-weight: 600;
	}
	.pannels-wrap .pannel .rear div.btn{
		margin-top: 1em;
		font-weight: 600;
		font-size: 1.3rem;
	}
	.pannels-wrap .pannel .rear div.btn:before{
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		border-left: 2px solid #666;
		border-bottom: 2px solid #666;
		transform: rotate(-135deg);
		margin-right: 7px;
		vertical-align: 1px;
	}
	.flip-card {
		perspective: 1000px;
	}
	.flip-card-inner {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.7s;
		transform-style: preserve-3d;
	}
	.flip-card:hover .flip-card-inner {
		transform: rotateY(180deg);
	}
	.front, .rear {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	.front {
		background: #ffffff;
	}
	.rear {
		background-color: #F9F9F9;
		transform: rotateY(180deg);
	}
}
.case-block{
	display: flex;
	align-items: center;
}
.case-block .img{
	width: calc(((100% - 120px) / 3) * 2 + 60px);
	flex-shrink: 0;
}
.case-block .img img{
	width: 100%;
}
.case-block .txt{
	padding: 0px 60px 0px 40px;
}
.case-block .txt:first-child{
	padding-top: 30px;
	padding-bottom: 30px;
}
.case-block .txt h3{
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 15px;
}
.case-block .txt p.link{
	margin-top: 15px;
	font-size: 1.1rem;
}
.case-block .txt p.client{
	margin-top: 10px;
	margin-bottom: 12px;
	font-size: 1.1rem;
}
.case-block .txt .content{
	font-size: 1.4rem;
	line-height: 1.75;
	margin-bottom: 18px;
	margin-top: 12px;
}
.case-block.case-intro{
	align-items: stretch;
}
.case-block.case-intro .left.txt{
}
.case-block.case-intro .right{
	padding-right: 40px;
	flex: 1;
	display: flex;
	align-items: center;
}
.case-block.case-intro .right p{
	font-size: 1.4rem;
	line-height: 1.75;
}
.case-block .btnbox02{
	margin-top: 25px;
}
#top-case .case-slide{
	max-width: 1100px;
	margin: 0 30px;
	overflow: hidden;
}
@media only screen and (max-width: 1220px) {
	#top-case .case-slide{
		width: calc(100vw - 120px);
		margin: 0 10px;
	}
}
#top-case .btnbox{
	margin-top: 60px;
}
.slick-prev,
.slick-next{
	z-index: 1;
	width: 30px;
	height: 30px;
}
.slick-prev:before,
.slick-next:before{
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background: #5C767E;
	border-radius: 100%;
}
.slick-prev:after,
.slick-next:after{
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid #fff;
	border-left: 2px solid #fff;
	position: absolute;
}
.slick-prev:after{
	transform: rotate(45deg);
	top: 8px;
	left: 11px;
}
.slick-next:after{
	transform: rotate(-135deg);	
	top: 8px;
	right: 11px;
}
#top-case .slick-prev{
	right: calc((100% - 1100px) / 2 + 1100px + 15px);
	left: auto;
}
#top-case .slick-next{
	left: calc((100% - 1100px) / 2 + 1100px + 15px);
	right: auto;
}
@media only screen and (max-width: 1220px) {
	#top-case .slick-prev{
		right: calc((100% - 1100px) / 2 + 1100px - 60px);
	}
	#top-case .slick-next{
		left: calc((100% - 1100px) / 2 + 1100px - 60px);
	}
}
.slick-dots li button{}
.slick-dots li.slick-active button:before{
	opacity: 1;
	background: #8EABB2;
}
.slick-dots li button:before{
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	background: #8EABB2;
	opacity: 0.4;
}
.slick-dots{
	bottom: -40px;
}
#top-case .case-slick-child .slick-prev{
	right: 40px;
	left: auto;
	top: auto;
}
#top-case .case-slick-child .slick-next{
	left: auto;
	right: 10px;
	top: auto;
}
#top-case .case-slick-child .slick-prev,
#top-case .case-slick-child .slick-next{
	bottom: 5px;
	transform: scale(0.6);
}
.case-slick-child:hover .slick-prev,
.case-slick-child:hover .slick-next{
}
#top-repeat{
	margin: 110px 0;
}
#top-repeat h2{
	text-align: center;
	font-size: 3.6rem;
	font-weight: 600;
	margin-bottom: 50px;
}
#top-repeat h2 span{
	color: #00D6C1;
}
#top-repeat ul{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 30px;
	max-width: 980px;
	margin: auto;
}
#top-repeat ul li{
	background: #fff;
	border-radius: 10px;
	padding: 25px 25px;
	display: flex;
	align-items: center;
}
#top-repeat ul li .avatar{
	margin-right: 20px;
	width: 100px;
	flex-shrink: 0;
}
#top-repeat ul li .avatar img{
}
#top-repeat ul li .txt h4{
	font-weight: 600;
	font-size: 1.4rem;
}
#top-repeat ul li .txt p{
	font-size: 1.4rem;
	line-height: 1.75;
	margin-top: 0.5em;
}
/* vision
-----------------------------------------------------*/
#vision{
	position: relative;
	padding: 200px 0;
}
#vision #vision-bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}
#vision #vision-overlay{
	position: relative;
	z-index: 1;
}
#vision h2{
	text-align: center;
	font-size: 7rem;
	color: #777;
}
#vision p{
	color: #777;
	text-align: center;
	font-size: 2.3rem;
	line-height: 2;
	margin-top: 2em;
}
.table01{
	width: 100%;
	line-height: 1.75;
}
.table01 tr{
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf;
}
.table01 th,
.table01 td{
	padding: 15px 20px;
}
#feature{
	display: flex;
	align-items: center;
}
#feature .img{
	width: 50%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	flex-shrink: 0;
}
#feature .img:after{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
  background-image: url("/img/about/code.png");
	background-size: 150% auto;
	background-repeat: repeat;
	background-position: 0 0;
	/*animation: scrollBackground 100s linear infinite;*/
}
@keyframes scrollBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -1570px;
  }
}
#feature .txt{
	padding: 0 60px 0 40px;
}
#feature .txt h2{
	font-size: 3.5rem;
	margin-bottom: 1em;
}
#feature .txt p{
	line-height: 2;
}
.overflow-hidden{
	overflow: hidden;
}
.logoimg{
  animation: filteranimation 2s infinite linear;
}
@keyframes filteranimation{
  from {
		filter:hue-rotate(0deg);
  }
  to {
		filter:hue-rotate(360deg);
  }
}
#cooporate .col{
	display: flex;
	justify-content: center;
	align-items: stretch;
	overflow: hidden;
}
#cooporate .col .logo{
	width: 33.3%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F7F7F7;
}
#cooporate .col .logo img{
	width: 160px;
}
#cooporate .col .txt{
	flex-grow: 1;
	padding: 60px;
}
/* service
-----------------------------------------------------*/
#tabs{
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 30px;
}
#tabs + .bg-white{
}
#tabs ul{
	display: flex;
}
#tabs ul li{
	flex: 1 1 0;
	text-align: center;
}
#tabs ul li a{
	display: block;
	text-align: center;
	background: #FFFFFF;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background 0.3s ease;
}
#tabs ul li.active a,
#tabs ul li a:hover{
	color: #fff;
	font-weight: 600;
	background: #00D6C1;
}
#tabs ul li + li{
	margin-left: 1px;
}
#tabs + .margin-lr{
	margin-top: 0;
}
h1.tab-title,
h2.tab-title{
	font-size: 3.2rem;
	font-weight: 600;
	margin-bottom: 35px;
	position: relative;
	margin-top: 8px;
}
h1.tab-title:before,
h2.tab-title:before{
	content: "";
	display: block;
	width: 54px;
	height: 26px;
	background: #00D6C1;
	position: absolute;
	top: 7px;
	left: -70px;
	border-radius: 3px;
}
h1.tab-title:after,
h2.tab-title:after{
	display: block;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	top: 25px;
	left: -60px;
	transform: rotate(-135deg);
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #08B5A0;
	border-width: 7px;
	margin-left: -7px;
}
#service p.lead{
	margin-bottom: 1em;
	font-size: 2.2rem;
	line-height: 1.75;
	color: #06D7C2;
	font-weight: 700;
}
#service section{
	position: relative;
}
#service .ico{
	position: absolute;
	top: 30px;
	right: 30px;
}
#service .ico img{
	width: 140px;
	height: auto;
}
#service h3{
	font-weight: 600;
	font-size: 1.8rem;
	margin: 1em 0 0.5em 0;
}
#service .content{
	line-height: 1.75;
}
#service section h3.bg{
	font-size: 2.2rem;
	margin-bottom: 1em;
	margin-top: 2em;
}
#service section h3.bg:before{
	content: "";
	display: inline-block;
	width: 4px;
	height: 23px;
	border-radius: 3px;
	background: #00D6C1;
	vertical-align: -3px;
	margin-right: 8px;
}
.check:before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url("../img/ico_check.svg") no-repeat;
	background-size: contain;
	vertical-align: -3px;
	margin-right: 7px;
}
.grid2{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}
.grid2 > div,
.grid1 > div{
	border: 2px solid #dfdfdf;
	padding: 30px 20px;
	border-radius: 5px;
}
.grid1 > div h3:first-child,
.grid2 > div h3:first-child{
	margin-top: 0 !important;
}
.grid1 > div{
	width: 100%;
	margin: auto;
}
#service section p{
	line-height: 1.75;
	margin: 1em 0;
}
#service section p:last-child{
	margin-bottom: 0;
}
#service section ul{
	margin: 1em 0;
}
#service section ul li{
	margin: 1em 0;
}
ul.list li:before{
	content: "●";
	color: #00D6C1;
	margin-right: 0.5em;
	font-size: 1rem;
	vertical-align: 2px;
}
@media only screen and (min-width: 800px) {
	#navcol{
		display: grid;
		grid-template-columns: 160px 1fr;
		grid-gap: 50px;
	}
	#navcol #tabs{
		margin-top: 0;
		margin-bottom: 0;
		position: relative;
		overflow: inherit;
	}
	#navcol #tabs ul{
		display: block;
		border-radius: 10px;
		overflow: hidden;
		position: sticky;
		top: 83px;
		left: 0;
	}
	#navcol #tabs ul li + li{
		margin-left: 0;
		margin-top: 1px;
	}
	#navcol section + section{
		margin-top: 100px;
	}	
}
/* contact
-----------------------------------------------------*/
.grecaptcha-badge{
	bottom: 90px !important;
}
p.sectionlead{
	text-align: center;
	line-height: 2;
	margin-bottom: 60px;
}
form{
	max-width: 800px;
	margin: auto;
	line-height: 1.75;
}
form table{
	width: 100%;
	margin-bottom: 40px;
}
form table th,
form table td{
	padding: 15px;
}
form table th{
	white-space: nowrap;
}
form input[type="text"],
form input[type="email"],
form input[type="time"],
form textarea,
form select{
	display: block;
	border: 1px solid #ddd;
	padding: 10px;
	width: 100%;
	background: #F4F4F4;
	border-radius: 5px;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="time"]:focus,
form textarea:focus,
form select:focus{
	border-color: #ccc;
	background: #fff;
}
form textarea{
	height: 300px;
}
span.req{
	display: inline-block;
	color: #fff;
	background: #F76161;
	border-radius: 4px;
	padding: 0px 5px;
	margin-left: 10px;
	font-size: 1.2rem;
}
.validatewrap{
	position: relative;
}
form .datecol{
	display: flex;
}
form .datecol input{
	display: inline-block;
}
form .datecol .validatewrap + .validatewrap{
	margin-left: 1em;
}
form td p{
	margin-top: 1em;
	margin-bottom: 0.5em;
}
form td p:first-child{
	margin-top: 0;
}
a.blank:after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}
#privacy a,
a.txtlink{
	text-decoration: underline;
}
#privacy a:hover,
a.txtlink:hover{
	text-decoration: none;
}
#privacy label{
	border: 1px solid #ccc;
	display: block;
	padding: 20px;
	border-radius: 5px;
	background: #F4F4F4;
	position: relative;
	margin-bottom: 10px;
}
#form .btnbox{
	margin-top: 40px;
}
.ui-datepicker-week-end:last-child,
.ui-datepicker-week-end:last-child a{
  color: #132AAC;
}
.ui-datepicker-week-end:first-child,
.ui-datepicker-week-end:first-child a,
.custom-calendar-holiday a,
.custom-calendar-holiday:first-child a,
.custom-calendar-holiday:last-child a{
  color: #C90003 !important;
}
body .ui-datepicker-week-end .ui-state-active,
body .custom-calendar-holiday .ui-state-active{
  color: #fff !important;
}
.ui-datepicker-calendar a{
  font-weight: bold !important;
}
#chatwork .chatworklogo{
	text-align: center;
}
#chatwork .chatworklogo img{
	width: 300px;
}
#chatwork .sectionlead{
	margin-top: 30px;
	font-size: 2rem;
}
#chatwork .ico-chatwork{
	width: 30px;
	height: auto;
	vertical-align: -8px;
	margin-right: 10px;
}
/* privacypolicy
-----------------------------------------------------*/
#privacypolicy section{
	line-height: 1.75em;
}
#privacypolicy section h2{
	text-align: center;
	font-size: 2rem;
	font-weight: 600;
	margin-bottom: 1em;
}
#privacypolicy section p{
	margin: 1em 0;
}
/* notfound
-----------------------------------------------------*/
#notfound section p{
	line-height: 2;
}
/* case
-----------------------------------------------------*/
#case .margin-lr{
	margin-bottom: 0;
}
#case .margin-lr + .margin-lr{
	margin-top: 60px;
}
#case .slick-dotted.slick-slider{
	margin-bottom: 0;
}
#case .slick-dots{
	bottom: 0;
}
#case .slick-next,
#case-detail .slick-next{
	right: 10px;
}
#case .slick-prev,
#case-detail .slick-prev{
	left: 10px;
}
#case-detail section{
	width: 100%;
	margin-bottom: 50px;
}
#case-detail section + section{
	margin-top: 50px;
	margin-bottom: 50px;
}
#case .bg-white,
#case-detail .bg-white{
	overflow: hidden;
}