@CHARSET "UTF-8";
@media only screen and (max-width: 640px){
	#page_top {
		top: auto;
		bottom: 0;
		width: calc(100% - 20px);
		background-color: rgba(44,56,65,0.7);
		padding: 10px;
	}
	#page_top a {
		writing-mode: unset;
		float: left;
		width: calc(50% - 45px);
		background-size: 25px;
		background-position: left 3% center;
		margin: 0!important;
		padding: 10px 5px 10px 35px;
		font-size: 14px;
		border-radius: 0;
	}
	#page_top .a-btn {
		margin: 0 5px 0 0!important;
	}

	#page_top .b-btn {
		margin: 0 0 0 5px!important;
	}
}
@media only screen and (max-width: 767px){
	#items figcaption {
		width: 60%;
		float: left;
		display: table-column;
		vertical-align: middle;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		position: absolute;
		top: 0;
		padding: 0 10px 0 0;
		right: 0;
	}
}
@media only screen and (max-width: 768px){
	#header {
		padding: 0;
		height: 60px;
	}
	.container {
		padding: 0 30px;
	}
	.h_logo {
		width: 150px;
		position: absolute;
		top: 6px;
		left: 10px;
		z-index: 100;
	}
	#gNav .nav {
		overflow-y: auto;
		height: 100vh;
	}
	.mean-nav .container {
		padding: 0;
	}
	nav li .fa {
		display: none;
	}
	.fixed {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	#header .mask {
		background: rgba(22, 34, 42, .4);
		top: 60px;
		left: 0;
		z-index: 1;
		position: absolute;
		width: 100%;
		height: 100vh;
		opacity: 1;
		display: none;
	}
	#header_button {
		position: absolute;
		right: 60px;
		top: 0;
		z-index: 98;
	}
	#header_button a {
		display: block;
		padding: 0;
		width: 60px;
		height: 60px;
		border-radius: 0;
		line-height: 60px;
	}
	#header_button i {
		display: block;
		line-height: 3.6;
	}
	#header_button span {
		display: none;
	}
}
@media only screen and (min-width: 1200px){
	#about .about-content {
		padding: 0 0 0 7.5%;
	}
	.contact-inner {
		padding: 0 7.5% 0 0;
	}
}
@media only screen and (min-width: 769px){
	#header {
		height: 80px;
	}
	.container {
		width: 1080px;
	}
	.h_logo img {
		height: auto;
	}
	#h_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.h_nav {
		margin: 0 0 0 auto;
		padding: 0 20px;
	}
	#gNav ul {
		position: relative;
		display: flex;
	}
	#gNav li {
		position: relative;
		margin-right: 2em;
	}
	#gNav li:last-child {
		margin-right: 0;
	}
	#gNav li i {
		font-size: 16px;
		margin-left: 5px;
	}
	#gNav li a {
		position: relative;
		display: block;
		text-align: center;
		line-height: 80px;
	}
	#gNav .sub-menu {
		visibility: hidden;
		opacity: 0;
		z-index: 1;
		display: block;
		position: absolute;
		top: 50px;
		left: 50%;
		margin-left: -100px;
		width: 200px;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
	}
	#gNav .sub-menu a {
		padding: 10px;
		display: block;
		border-bottom: none;
		padding: 20px;
		line-height: 1.2em;
	}
	#gNav .sub-menu a:hover:after {
		content: none;
	}
	#gNav .sub-menu li {
		display: block;
		font-size: 16px;
		padding: 0;
		margin: 0;
	}
	#gNav .sub-menu li:last-child {
		border-bottom: none;
	}
	#gNav ul>li:hover {
		-webkit-transition: all .5s;
		transition: all .5s;
	}
	#gNav ul>li:hover a, #gNav .current-menu-item a, #gNav .current-menu-parent a {
		color: #bfd0ff;
	}
	#gNav li:hover ul.sub-menu {
		top: 80px;
		visibility: visible;
		opacity: 1;
		z-index: 9999;
	}
	#gNav li ul li:after {
		content: none;
	}
	#gNav li:hover ul.sub-menu a {
		color: #111;
	}
	#gNav .sub-menu li a:hover {
		background: #fff;
	}
	#gNav .contact_btn a:hover {
		color: #fff;
	}
	#main-visual {
		margin-top: 80px;
	}
	#main-visual .top-slider {
		margin: 0 auto;
		max-width: calc(100% - 100px);
	}
	#main-visual .slider-image {
		height: calc(100vh - 112px);
		/* background-size: cover; */
	}
	#main-visual .top-text {
		left: 15%;
	}
	#main-visual h2 {
		font-size: 45px;
	}
	#main-visual p {
		font-size: 20px;
		font-weight: 600;
		white-space: pre-wrap;
	}
}
@media only screen and (min-width: 768px){
	#about {
		margin: 3em 0;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		height: 600px;
	}
	#about h2 {
		font-size: 32px;
	}
	#about h2 span {
		font-size: 22px;
	}
	#about .about-img {
		width: 50%;
		float: left;
		height: auto;
	}
	#about .about-txt {
		width: 50%;
		float: left;
	}
	#about .about-content {
		box-sizing: border-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		max-width: 550px;
	}
	#about .button {
		margin: 40px 0 0;
	}
	#about a {
		margin: 0;
	}
	#service {
		margin: 5em 0;
	}
	#service h2 {
		font-size: 32px;
		margin-bottom: 60px;
	}
	#service h2 span {
		font-size: 22px;
	}
	#service .service-box {
		display: flex;
		flex-wrap: wrap;
	}
	#service article {
		width: calc(33.3333% - 14px);
		margin: 40px 20px 0 0;
	}
	#service article:nth-child(3n) {
		margin: 40px 0 0 0;
	}
	#service article:last-of-type {
		margin: 40px 0 0 0;
	}
	#service article:nth-child(-n+3) {
		margin: 0 20px 0 0;
	}
	#service article:nth-child(3) {
		margin: 0;
	}
	#items h2 {
		font-size: 32px;
	}
	#items {
		padding: 5em 20px;
	}
	#items .item-grid {
		display: flex;
		flex-wrap: wrap;
	}
	#items figure {
		padding: 20px;
		float: left;
		width: calc(20% - 40px);
		margin: 0;
	}
	#items figure::after {
		position: absolute;
		top: .5em;
		right: 0;
		content: '';
		width: 2px;
		height: -webkit-calc(100% - 1em);
		height: calc(100% - 1em);
		background-color: #EAEEF0;
		border-radius: 4px;
	}
	#items figure:last-of-type::after {
		display: none;
	}
	#items figure img {
		width: 100%;
		float: none;
		margin-right: 0;
	}
	#case {
		margin: 5em 0;
	}
	#case h2 {
		font-size: 32px;
	}
	#case h2 span {
		font-size: 22px;
	}
	#case .case-grid {
		display: flex;
		flex-wrap: wrap;
	}
	#case article {
		margin: 0 10px;
	}
	#flow {
		padding: 5em 20px;
	}
	#flow .flow-box {
		display: flex;
		flex-wrap: wrap;
		height: 400px;
		flex-direction: revert;
	}
	#flow .flow-cnt {
		float: left;
		width: 50%;
		border-radius: 10px 0 0 10px;
	}
	#flow .flow-rec {
		box-sizing: border-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		justify-content: center;
		padding: 0 7.5%;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}
	#flow .flow-img {
		width: 50%;
		float: left;
		height: auto;
		border-radius: 0 10px 10px 0;
	}
	#flow h3 {
		font-size: 26px;
	}
	#contact {
		display: flex;
		flex-wrap: wrap;
		height: 400px;
		flex-direction: revert;
	}
	#contact h2 {
		font-size: 26px;
		text-align: left;
	}
	#contact h2 span {
		font-size: 20px;
	}
	#contact .contact-txt {
		width: 50%;
		padding: 5em 0;
		float: left;
	}
	#contact .contact-inner {
		box-sizing: border-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		right: 0;
		max-width: 550px;
	}
	#contact .contact-img {
		width: 50%;
		float: left;
		height: auto;
	}
	#column {
		margin: 5em 0;
	}
	#column h2 {
		font-size: 32px;
		text-align: left;
	}
	#column h2 span {
		font-size: 22px;
	}
	#column .column-grid {
		display: flex;
		flex-wrap: wrap;
	}
	#column article {
		width: calc(33.3333% - 14px);
		margin: 40px 20px 0 0;
	}
	#column article:nth-child(3n) {
		margin: 40px 0 0 0;
	}
	#column article:last-of-type {
		margin: 40px 0 0 0;
	}
	#column article:nth-child(-n+3) {
		margin: 0 20px 0 0;
	}
	#column article:nth-child(3) {
		margin: 0;
	}
	#contact li a {
		margin: 0;
	}
	#footer {
		padding: 4em 20px;

	}
	#footer nav {
		width: calc(75% - 15px);
		padding: 0;
		margin: 0 auto 0 15px;
		display: table-cell;
	}
	#footer .f-logo {
		width: calc(25% - 15px);
		margin: 0 15px 0 auto;
		display: table-cell;
	}
	#footer nav ul li {
		margin-right: 15px;
		width: auto;
	}
	#footer nav ul li:nth-of-type(even) {
		margin-right: 15px;
	}
	#footer nav ul li:last-of-type {
		margin-right: 0;
	}
	#footer nav a {
		font-size: 12px;
	}
	#footer .copy {
		text-align: right;
		padding: 20px 0 0;
		margin: 20px auto 0;
	}
}
@media only screen and (min-width: 571px){
	#main-visual .sp-slick {
		display: none;
	}
}
@media only screen and (min-width: 560px){
	.under-btn {
		padding: 4.5em 20px;
	}
	.btn-area .btn-box {
		float: left;
		width: calc(50% - 10px);
		flex-direction: row;
	}
	.btn-area .btn-box:nth-child(even) {
		margin: 0 0 0 10px;
	}
	.btn-area .btn-box:nth-child(odd) {
		margin: 0 10px 0 0;
	}
	.btn-area .img-btn {
		width: 40%;
		float: left;
	}

	.btn-area .txt-btn {
		width: 60%;
		float: left;
	}
}
@media only screen and (max-width: 570px){
	#main-visual .slider-image {
		background-size: contain;
		height: 180px;
	}
	#main-visual .top-slider {
		display: none!important;
	}
}
@-webkit-keyframes menu-ber01 {
	0% {
		-webkit-transform: translateY(8px) rotate(45deg);
	}
	50% {
		-webkit-transform: translateY(8px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(0) rotate(0);
	}
}
@keyframes menu-ber01 {
	0% {
		transform: translateY(8px) rotate(45deg);
	}
	50% {
		transform: translateY(8px) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}
@-webkit-keyframes menu-ber02 {
	0% {
		-webkit-transform: translateY(-8px) rotate(-45deg);
	}
	50% {
		-webkit-transform: translateY(-8px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(0) rotate(0);
	}
}

@keyframes menu-ber02 {
	0% {
		transform: translateY(-8px) rotate(-45deg);
	}
	50% {
		transform: translateY(-8px) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}
@-webkit-keyframes active-menu-ber01 {
	0% {
		-webkit-transform: translateY(0) rotate(0);
	}
	50% {
		-webkit-transform: translateY(10px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(10px) rotate(45deg);
	}
}
@keyframes active-menu-ber01 {
	0% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(10px) rotate(0);
	}
	100% {
		transform: translateY(10px) rotate(45deg);
	}
}
@-webkit-keyframes active-menu-ber03 {
	0% {
		-webkit-transform: translateY(0) rotate(0);
	}
	50% {
		-webkit-transform: translateY(-8px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(-8px) rotate(-45deg);
	}
}
@keyframes active-menu-ber03 {
	0% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(-8px) rotate(0);
	}
	100% {
		transform: translateY(-8px) rotate(-45deg);
	}
}