@charset "utf-8";

/*****************************************************************

	トップページ＆共通レイアウト定義

*****************************************************************/

/* ====== BASE Module SET ===== */


*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body{
	margin: 0;
	padding: 0;
 background: #f4f4f4;
}

html{
	overflow-y:scroll;
}

h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,dt,dd,li,
table,td,th,
address,
blockquote,form,fieldset,legend,div,hr,pre{
	margin: 0;
	padding: 0;
	font-style: normal;
	text-align: left;
	font-size: 100%;
	line-height: 1.2;
}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}


body{
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","meiryo","MS P Gothic","ＭＳ Ｐゴシック","Osaka", sans-serif;
	text-align: center;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
 color: #666;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th,td{
	vertical-align: top;
}

img,
object,
embed{
	border: 0;
	vertical-align: top;
	outline: none;
	max-width: 100%;
	height: auto;
}

object:focus{
	outline: none;
}

embed:focus{
	outline: none;
}

img,
input,
select,
textarea{
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: middle;
	font-size: 12px;
}

input[type="button"],
input[type="text"],
input[type="submit"] {
	-webkit-appearance: none;
}

button{
	background-color: transparent;
	border: 0;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}

::-webkit-input-placeholder{
    color: #ccc;
}
::-moz-placeholder{
    color: #ccc;
}
:-moz-placeholder{
    color: #ccc;
}
:-ms-input-placeholder{
    color: #ccc;
}

abbr,
acronym,
fieldset{
	border: 0;
 text-decoration: none
}

hr{
	margin: 2em 0;
	display: block;
	border: 0;
	border-bottom: 1px solid #ddd;
	clear: both;
}

img{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	vertical-align: top;

	-moz-user-select: none; 
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none; 
	user-drag: none;
}

iframe{
	display: block;
	vertical-align: top;
}

i,
em{
	font-style: normal;
}

a{
	color: #000;
	background: transparent;

	-moz-transition: 0.25s;
	-webkit-transition: 0.25s;
	transition: 0.25s;
}

a:hover,
a:focus{
	color: #666;
}

a:hover img{
}

ul li{
	list-style: none;
}

::selection{background-color:#69CD06; color: #fff; }
::-moz-selection {background-color:#69CD06; color: #fff; }
input::selection,
textarea::selection{background-color:#b6d6fd; color: #000; }
input::-moz-selection,
textarea::-moz-selection{background-color:#b6d6fd; color: #000; }

div,
ul,
section,
article{
	width: auto;
}

h1,h2,h3,h4,h5,h6,
table,th,td,ul,ol,li,
dd,dt,dl,p{
	background: url(../images/aki.png);
}

.tel_dis{ cursor: default; }

.sp_i{ display: none; }
.sp_b{ display: none; }

.pc_i{ display: inline; }
.pc_b{ display: block; }

.sp_ib{ display: none; }
.pc_ib{ display: inline-block; *display: inline; zoom: 1; }

.txt_c{ text-align: center;}
.txt_r{ text-align: right;}

/*============================================================
	TopContentsStyle
============================================================*/
 
/*============================================================
	Page / column
============================================================*/
#page{
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

.inner{
	width: 100%;
 max-width: 1100px;
	padding:  0 10px;
	text-align: left;
	margin: 0 auto;
	position: relative;
}

/*============================================================
	Header
============================================================*/
#page_header{
	width: 100%;
 padding-top: 25vh;
	text-align: center;
 overflow: hidden;
}
.kz_logo{
 width: 80px;
 display: block;
 position: fixed;
 top: 20px;
 left: 20px;
 z-index: 100;
}
.btn_contact_h{
 line-height: 1;
 width: auto;
 display: block;
 padding: 10px 2em;
 border-radius: 30px;
 position: fixed;
 background: #1ba3be;
 top: 20px;
 right: 10px;
 text-decoration: none;
 font-weight: bold;
 z-index: 100;
 color: #fff;
 font-size: 88%;
}
.btn_contact_h:hover,
.btn_contact_h:focus{ color: #fff; opacity: 0.8}
.gNav{
 width: auto;
 display: block;
 position: fixed;
 top: 20px;
 left: 130px;
 
 font-weight: bold;
 z-index: 100;
 mix-blend-mode: exclusion;
}
.gNav ul{
 position: static;
}
.gNav li{
 display: inline-block;
 font-size: 88%;
 position: static;
}
.gNav a{
 display: block;
 padding: 6px 1em;
 text-decoration: none;
 color: #fff;
}

.wave_area{
	height: 60px;
	width: 100%;
	top: 50%;
	left: 0;
	margin-top: -30px;
	position: absolute;
}

.wave_area img{
	width: 100%;
	display: block;
	position: absolute;
 transition: 1s opacity;
 opacity: 0;
}
.wave_area img:nth-of-type(1){
	animation: l1 10s infinite;
 transition-delay: 2.5s;
}
.wave_area img:nth-of-type(2){
	animation: l2 10s infinite;
 transition-delay: 3s;
}
.wave_area img:nth-of-type(3){
	animation: l3 10s infinite;
 transition-delay: 3.5s;
}
.loadOn .wave_area img{
 opacity: 0.76;
}
@keyframes l1{
	0%{
		transform: scale(1,0.5)
	}
	50%{
		transform: scale(1,1)
	}
	100%{
		transform: scale(1,0.5)
	}
}
@keyframes l2{
	0%{
		transform: scale(1,1)
	}
	50%{
		transform: scale(1,0.5)
	}
	100%{
		transform: scale(1,1)
	}
}
@keyframes l3{
	0%{
		transform: scale(1,0.25)
	}
	50%{
		transform: scale(1,0.9)
	}
	100%{
		transform: scale(1,0.25)
	}
}



#page_header:after{
	display: block;
	clear: both;
	content: "";
}
#page_header .inner{
 height: auto;
	display: flex;
 justify-content: space-between;
 align-items: center;
 min-height: 500px;
}
.logo_ct h1{
 position: absolute;
 width: 0;
 height: 0;
 overflow: hidden;
}
.logo_ct{
 width: 47%;
 transform: translateY(-5%);
}
.head_contact{
 width: 40%;
 background: #fff;
 padding:  15px;
 position: relative;
 z-index: 10;
 border-radius: 20px;
}
.head_contact h2{
 color: #666;
 text-align: center;
 margin-bottom: 1em;
 font-size: 112.50%;
}
.head_contact_area{
 height: 70vh;
 overflow: auto;
 max-height:  400px;
}
.logo_ct svg{
 width: 100%;
 height: auto;
 max-width: 100%;
}
.logo_ct path{
 animation:2s logo;
 animation-timing-function: ease-in-out;
 animation-fill-mode:  both;
 stroke-dasharray: 650px;
 stroke-width: 1px;
}
.logo_ct .st0{fill:#69CD06; stroke: #69CD06;}
.logo_ct .st1{fill:#4190FC; stroke: #4190FC;animation-delay: 0.25s}
@keyframes logo{
 0%{
  fill: transparent;
  stroke-dashoffset: 650px;
 }
 70%{
  fill: transparent;
  stroke-dashoffset: 0;
 }
 100%{
  
 }
}
.logo_ct h2{
 margin: 20px 0 60px 0;
 animation: 0.5s 2s read;
 animation-timing-function: ease-in;
 animation-fill-mode:  both;
 opacity: 0;
 line-height: 1.5;
 letter-spacing: 0.05em;
 font-size: 16px;
 color: #666;
}
.logo_ct .cta{
 animation: 0.5s 2.5s read;
 animation-timing-function: ease-in;
 animation-fill-mode:  both;
 opacity: 0;
}
@keyframes read{
 0%{
  opacity: 0;
  filter: blur(10px)
 }
 100%{
  opacity: 1;
  filter: blur(0)
 }
}

/*============================================================
	Nav
============================================================*/

/*============================================================
	Content
============================================================*/
#content{
	width: 100%;
}

#content:after{
	display: block;
	clear: both;
	content: "";
}

/*============================================================
	Main
============================================================*/
#main{
	width: 100%;
}

#main:after{
	display: block;
	clear: both;
	content: "";
}

/* Main Design */
#main p,
#main ul,
#main dl,
#main ol,
#main blockquote,
#main pre,
#main td,
#main th{
	line-height: 1.75;
	font-size: 88%;
	margin-bottom: 1em;
}

#main table{
	margin-bottom: 1em;
}

#main td,
#main th{
	margin-bottom: 0;
}

#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6{
	font-size: 100%;
	line-height: 1.5;
	margin-bottom: 1em;
}

/* default */
#main ul ul,
#main ul p,
#main ul blockquote,
#main ul pre,
#main ul dl,
#main dl dl,
#main dl p,
#main dl ul,
#main dl ol,
#main blockquote p,
#main blockquote ul,
#main blockquote dl,
#main blockquote ol,
#main ol blockquote,
#main ol pre,
#main ol p,
#main td p,
#main td ul,
#main td dl{
	font-size: 100%;
}

#main *:last-child{
	margin-bottom: 0;
}

/*============================================================
	TOP
============================================================*/

/* ===== sec_page_about ===== */
#main .sec_page{
 padding:  150px 0;
 min-height: 700px;
 position: relative;
}
#main .sec_page_about{
 background-repeat:   no-repeat;
 background-image: linear-gradient(90deg, #f3c139 50%,#f4f4f4 50.1%);
 background-size: 0% 100%;
 transition: 0.75s background;
 color: #fff;
 height:  400vh;
 position: relative;
}
#main .sec_page_about .target{
 position: sticky;
 top: 40px;
 padding: 2em 10px 0 10px;
}
#main .a1,
#main .a2,
#main .a3,
#main .sec_page_about .change{
 opacity: 0;
 transform: translateY(1em);
 transition: 0.5s;
 font-size: 100%;
}
@media screen and (min-width: 769px) {
 #main [data-animeparent="1"] .a1,
 #main [data-animeparent="2"] .a2,
 #main [data-animeparent="3"] .a3{
  opacity: 1;
  transform: translateY(0);
 }
 #main [data-animeparent="2"] .a1,
 #main [data-animeparent="2"] .a2{
  opacity: 1;
  transform: translateY(0);
 }
 #main [data-animeparent="3"] .a1,
 #main [data-animeparent="3"] .a2,
 #main [data-animeparent="3"] .a3{
  opacity: 1;
  transform: translateY(0);
 }

 #main [data-animeparent="7"] .a1,
 #main [data-animeparent="7"] .a2,
 #main [data-animeparent="7"] .a3,
 #main [data-animeparent="7"] .change,

 #main [data-animeparent="6"] .a1,
 #main [data-animeparent="6"] .a2,
 #main [data-animeparent="6"] .a3,
 #main [data-animeparent="6"] .change,

 #main [data-animeparent="5"] .a1,
 #main [data-animeparent="5"] .a2,
 #main [data-animeparent="5"] .a3,
 #main [data-animeparent="5"] .change,

 #main [data-animeparent="4"] .a1,
 #main [data-animeparent="4"] .a2,
 #main [data-animeparent="4"] .a3,
 #main [data-animeparent="4"] .change{
  opacity: 1;
  transform: translateY(0);
 }
}
#main .sec_page_about p{
 line-height: 2;
}
#main .sec_page_about.aniOn{
 background-size: 200% 100%;
}
.scr{
 mix-blend-mode: difference;
 display: none;
 font-family: Lato, Arial, Helvetica, "sans-serif";
 text-align: center;
 z-index: 4;
 position: fixed;
 bottom: 10px;
 left: 0;
 width: 100%;
 font-size: 12px;
 color: rgba(255,255,255,1);
}
.scr::before{
 display: block;
 margin: 0 auto 10px auto;
 width: 15px;
 height: 15px;
 transform: rotate(45deg);
 content: "";
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 position: relative;
 animation: infinite scr 2s;
}
.foot .scr{
 display: none;
}
@keyframes scr{
 0%{
  opacity: 0;
  top: -5px;
 }
 75%{
  opacity: 1;
 }
 100%{
  opacity: 0;
  top: 5px;
 }
}
#main h2{
 font-family: Lato, Arial, Helvetica, "sans-serif";
 font-weight: bold;
 font-size: 80px;
 line-height: 1;
 margin: 0;

 position: absolute;
 bottom: -1em;
 right: 10px;
}
#main h3{
 font-family: Arial, Helvetica, "sans-serif";
 font-weight: bold;
 font-size: 30px;
 line-height: 1;
 margin: 0 0 1.5em 0;
}

#main .sec_page_client{
 padding:  0;
 min-height: 1px;
}
#main .sec_page_client h2{
 position: static;
 color: #666;
 text-align: center;
}
#main .sec_page_client ul{
 display: grid;
 margin: 0;
 grid-template-columns: repeat(8, 1fr);  column-gap: 0; row-gap: 0;
}
#main .sec_page_client img{ width: 100%;}
#main .sec_page_about h2+p{
 line-height: 2;
 padding-bottom:  4em;
 margin: 0;
}
#main .change{
 text-align: center;
 margin: 3em 0 0 0;
 padding-bottom: 3em;
 font-size: 18px;
}
#main .btn_contact{
 display: block;
 margin: auto;
 width: 100%;
 max-width: 400px;
 line-height: 1;
 border: 1px solid #fff;
 color: #fff;
 text-align: center;
 padding:  1em;
 text-decoration: none;
 border-radius: 30px;
 font-weight: bold;
 letter-spacing: 0.05em;
}



/*anime*/
#main h3.ani{
 opacity: 0;
 transition: 0.5s 1s opacity;
}
#main h2.ani{
 opacity: 0;
 transform: translateX(-1em);
 transition: 1s 0s opacity,1s 0s transform;
}
#main p.ani{
 opacity: 0;
 transition: 0.5s 1s opacity;
}
#main h3.aniOn,
#main p.aniOn{
 opacity: 1;
}
#main .ON h2.ani,
#main h2.aniOn{
 opacity: 0.5;
 transform: translateX(0);
}
/* ===== sec_page_service ===== */
#main .sec_page_service{
 background-repeat:   no-repeat;
 background-image: linear-gradient(90deg, #e8e8e8 50%,#f4f4f4 50.1%);
 background-size: 0% 100%;
 transition: 0.75s background;
 color: #666;
}
#main .sec_page_service .inner{
 top: 0
}
#main .sec_page_service.aniOn{
 background-size: 200% 100%;
}
#main .service_list{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
#main .sec_service{
 width: 32%;
 margin-bottom: 2%;
 padding: 30px 15px;
 background: rgba(255,255,255,0.1);
 box-shadow: 0 0 10px 1px rgba(0,0,0,0.05);
 border-radius: 10px;
}
#main .sec_page_service h3.ani{
 transition-delay: 0s;
}
#main .sec_service.ani{
 opacity: 0;
 transform: scale(0.8);
 transition: 0.5s 0s opacity,0.5s 0s transform;
}
#main .sec_service.ani:nth-of-type(1n){ transition-delay: 0.5s}
#main .sec_service.ani:nth-of-type(2n){ transition-delay: 0.75s}
#main .sec_service.ani:nth-of-type(3n){ transition-delay: 1s}
#main .sec_service.aniOn{
 opacity: 1;
 transform: scale(1);
}
#main .sec_page_service .btn_contact{
 color: #999;
 border-color: #999;
}
#main .sec_page_service .btn_contact:hover,
#main .sec_page_service .btn_contact:focus{
 color: #999;
 border-color: #fff;
 background: #fff;
}

#main .sec_page_works .btn_contact{
 color: #999;
 border-color: #999;
}
#main .sec_page_works .btn_contact:hover,
#main .sec_page_works .btn_contact:focus{
 color: #999;
 border-color: #fff;
 background: #fff;
}


#main .sec_page_works i.ani{
 opacity: 0;
 transition: 1s opacity
}
#main .sec_page_works i.aniOn{
 opacity: 1;
}
#main .sec_page_works{
 height: 150vh;
 padding-bottom: 0;
 z-index: 1;
 overflow: clip;
}
#main .sec_page_works .inner{
 position: sticky;
 top: 100px;
 padding-top: 250px;
}
#main .sec_page_works i{
 display: block;
 width: 300px;
 position: absolute;
}
#main .sec_page_works .w1{
 max-width: 300px;
 width: 25%;
 top: 70%;
 left: 0;
}
#main .sec_page_works .w2{
 max-width: 300px;
 width: 25%;
 top: 10%;
 left: 5%;
}
#main .sec_page_works .w3{
 max-width: 320px;
 width: 29%;
 top: -8%;
 left: 34%;
}

#main .sec_page_works .w4{
 max-width: 315px;
 width: 28%;
 top: 10%;
 right: 5%;
}
#main .sec_page_works .w5{
 max-width: 300px;
 width: 27%;
 top: 72%;
 right: 0;
}
#main .sec_page_works h2{
 font-size: 80px;
 line-height: 1;
 margin: 0 0 0.5em 0;
 bottom: auto;
 left: auto;
 right: auto;
 top: auto;


 position: relative;
 text-align: center;
 color: #000;
}
#main .sec_page_works h2.ani{
 opacity: 0;
 transform: scale(0.75);
 transition: 1s 0s opacity,1s 0s transform;
}
#main .sec_page_works h2.aniOn{
 opacity: 1;
 transform: scale(1);
}
#main .sec_page_works p{
 line-height: 2;
 text-align: center;
 transition-delay: 0s;
}
#main .case_list h3{
 text-align: center;
 margin-bottom: 1em;
 font-size: 40px;
 color: #4190FC
}
#main .case_list h4{
 margin: 0.5em 0 0 0;
 font-size: 112.5%;
 min-height: 5em;
}
#main .case_list time{
 display: block;
 margin: 1em 0 0.5em 0;
 font-size: 88%;
 line-height: 1;
 color: #333;
}
#main .case_list{
 margin: 0 0 70px;
}
#main .case_list ul{
 width: 100%;
 margin: 2em 0 0 0;
 /*
 display: flex;
 justify-content:center;
 flex-wrap: wrap;*/
}
#main .case_list p{
 margin:  1em 0 0 0;
}
#main .case_list .change{
 margin:  2em 0 0 0;
}
#main .case_list .notes{
 margin:  0.5em 0 0 0;
 color: #666;
 font-size: 88%;
}
#main .case_list_tag{
 display: inline-block;
 padding:  5px;
 color: #1ba3be;
 border: 1px solid #1ba3be;
 line-height: 1;
 font-size: 10px;
}

#main .case_list ul a{
 display: block;
 padding: 15px;
 text-decoration: none;
 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
 background: rgba(255, 255, 255, 0.8);
 border-radius: 10px;
 overflow: hidden;
}
#main .case_list ul a:hover,
#main .case_list ul a:focus{
 box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
 color: #4190FC
}
#main .case_list img{
 aspect-ratio: 16 / 8;
 object-fit: cover;
}
#main .case_list li{
 padding: 0 0.1%;
 /*
 width: 32%;
 margin: 0 0.5% 2%  0.5%;*/
}
.slick-next,
.slick-prev{
 background: #999;
 display: block;
 position: absolute;
 top: 50%;
 width: 50px;
 height:  50px;
 margin-top: -25px;
 z-index: 1000;
 border-radius: 50%;
 overflow: hidden;
}
.slick-next::before,
.slick-prev::before{
 content: "";
 display: block;
 width: 15px;
 height:  15px;
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 transform: rotate(45deg);
}
.slick-prev::before{ transform:rotate(225deg);margin-left: 20px;}
.slick-next::before{ margin-left: 12px; }
.slick-next{ right:  -20px;}
.slick-prev{ left:  -20px;}

@media screen and (max-width: 600px) {
 .slick-next,
 .slick-prev{
  transform: scale(0.8)
 }
 .slick-next{ right:  -10px;}
 .slick-prev{ left:  -10px;}
}

#main .client_list{
 padding: 15px 25px;
 box-shadow: 0 0 10px 1px rgba(0,0,0,0.05);
 margin-bottom: 70px;
}
#main .client_list ul::after{ content: normal}
#main .client_list ul{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
#main .client_list li{
 width: 25%;
 padding:  20px 0;
 text-align: center;
}
#main .client_list img{
 width: 60%;
}
#main .client_list h2{
 font-size: 40px;
 line-height: 1;
 margin: 0 0 0.5em 0;

 position: static;
 text-align: center;
 color: #999;
}
/* ===== sec_page_works ===== */


#main .sec_page_flow{
 background-repeat:   no-repeat;
 background-image: linear-gradient(90deg, #2b2b49 50%,#f4f4f4 50.1%);
 background-size: 0% 100%;
 transition: 0.75s background;
 color: #fff;
 z-index: 2;
}
#main .sec_page_flow.aniOn{
 background-size: 200% 100%;
}
#main .sec_page_flow p.ani,
#main .sec_page_flow h3.ani{
 transition-delay: 0s;
}
#main .flow{
 list-style: none;
 display: flex;
 justify-content: space-between;
 width: 100%;
 margin: 40px 0 60px 0;
 font-weight: bold;
}
#main .flow li{
 width: 16.666%;
 align-content: center;
 justify-content: center;
}
#main .flow div{
 width: 100%;
 padding-top: 100%;
 position: relative;
}
#main .flow div::before{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border: 1px solid #fff;
 border-radius: 50%;
 transform: scale(0);
 transition: 0.5s transform;
}
#main .flow em{
 position: absolute;
 top: 50%;
 left: 0;
 text-align: center;
 margin-top: -0.5em;
 width: 100%;
}
#main .flow li.ani{
 opacity: 0;
 transition: opacity 0.5s;
 line-height: 1;
}
#main .flow li.ani:nth-of-type(1){ transition-delay: 0s}
#main .flow li.ani:nth-of-type(2){ transition-delay: 0.25s}
#main .flow li.ani:nth-of-type(3){ transition-delay: 0.5s}
#main .flow li.ani:nth-of-type(4){ transition-delay: 0.75s}
#main .flow li.ani:nth-of-type(5){ transition-delay: 1s}
#main .flow li.ani:nth-of-type(6){ transition-delay: 1.25s}

#main .flow li.ani:nth-of-type(1) div::before{ transition-delay: 0s}
#main .flow li.ani:nth-of-type(2) div::before{ transition-delay: 0.25s}
#main .flow li.ani:nth-of-type(3) div::before{ transition-delay: 0.5s}
#main .flow li.ani:nth-of-type(4) div::before{ transition-delay: 0.75s}
#main .flow li.ani:nth-of-type(5) div::before{ transition-delay: 1s}
#main .flow li.ani:nth-of-type(6) div::before{ transition-delay: 1.25s}

#main .flow li.aniOn{
 opacity: 1;
}
#main .flow li.aniOn div::before{
 transform: scale(1.075)
}
#main .flow_grp{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
#main .flow_grp section{
 width: 48%;
 margin-bottom: 4%;
}
#main .flow_grp h4{
 font-size: 100%;
 margin-bottom: 0.5em;
}
#main .flow_grp p{ opacity: 0.8;}
#main .flow_grp section.ani{
 transition: 0.5s opacity,0.5s transform;
 opacity: 0;
 transform: translateY(20px);
}
#main .flow_grp section.aniOn{
 opacity: 1;
 transform: translateY(0);
}
#main .flow_grp section.ani:nth-of-type(2n){
 transition-delay: 0.25s;
}
/* ===== contact_area ===== */
#main .sec_page_contact{
 padding-top: 200px;
 z-index: 10;
}
#main .contact_area{
 max-width: 800px;
 margin: 0 auto;
}
#main .sec_page_contact h2{
 bottom: auto;
 top: -1.5em;
}
#main .sec_page_contact h3{
 text-align: center;
}
/* ===== sec_page_price ===== */
#main .sec_page_price{
 background-repeat:   no-repeat;
 background-image: linear-gradient(90deg, #fc8012 50%,#f4f4f4 50.1%);
 background-size: 0% 100%;
 transition: 0.75s background;
 color: #fff;
}
#main .sec_page_price.aniOn{
 background-size: 200% 100%;
}
#main .sec_page_price .grp{
 margin-bottom: 3em;
}
#main .sec_price{
 width: 80%;
 padding:  15px;
 margin: 0 auto 2% auto;
 color: #fff;
 border: 1px solid #fff;
 border-radius: 10px;
 display: flex;
 justify-content: flex-start;
 align-items: center;
}
#main .sec_price small{
 font-size: 68%;
 color: rgba(255,255,255,0.70)
}
#main .case_list .ani{
 opacity: 0;
 transition-delay: 0s;
}
#main .case_list .aniOn{
 opacity: 1;
}
#main .sec_page_price h3.ani{ transition-delay: 0s}
#main .sec_price.ani{ opacity: 0; transition: 0.5s opacity;}
/*#main .sec_price.ani:nth-of-type(1){ transition-delay: 0.1s}
#main .sec_price.ani:nth-of-type(2){ transition-delay: 0.2s}
#main .sec_price.ani:nth-of-type(3){ transition-delay: 0.3s}
#main .sec_price.ani:nth-of-type(4){ transition-delay: 0.4s}
#main .sec_price.ani:nth-of-type(5){ transition-delay: 0.5s}
#main .sec_price.ani:nth-of-type(6){ transition-delay: 0.6s}*/
#main .sec_price.aniOn{ opacity: 1;}
#main .sec_price h4{
 font-size: 125%;
 margin-bottom: 0;
 line-height: 1.1;
 text-align: center;
 width: 50%;
}
#main .sec_price h4 small{
 font-size: 68%;
}
#main .sec_price p{
 font-size: 150%;
 line-height: 1.2;
 text-align: center;
 font-family: Lato, Arial, Helvetica, "sans-serif";
}
#main .sec_page_price .btn_contact:hover, #main .sec_page_price .btn_contact:focus{
 background: #fff;
 color: #fc8012;
}
#main .case_list .btn_contact,
#main .case_list .btn_contact{
 border: 1px solid #333;
 color: #333;
 background: none;
}

#main .case_list .btn_contact:hover,
#main .case_list .btn_contact:focus{
 color: #4190FC;
 border-color: #4190FC;
}
/*============================================================
	Footer
============================================================*/
#page_footer{
	width: 100%;
 padding:  30px 0;
	position: relative;
	text-align: center;
 background: #fff;
}
#page_footer .inner{
 text-align: center;
}
#page_footer img{
 max-width: 100px;
 margin-bottom: 15px;
}
#page_footer p{
 text-align: center;
 color: #999;
 font-size: 10px;
 line-height: 1.5;
}
#page_footer a{
 text-decoration: none;
}
.btn_contact_flt{
 display: block;
 text-decoration: none;
 grid-row-gap: 10px;
 font-weight: bold;
 font-size: 16px;
 font-family: Lato, Arial, Helvetica, "sans-serif";
 color: #fff;

 position: absolute;
 right: 10px;
 padding:  5px 0 24px 0;
 text-align: right;
}

.btn_contact_flt:hover,
.btn_contact_flt:focus{
opacity: 0.6;
}
.btn_contact_flt:active{
 opacity: 1;
}
#main .sec_page_flow .btn_contact:hover,
#main .sec_page_flow .btn_contact:focus{
 color: #2b2b49;
 border-color: #fff;
 background: #fff;
}
#main .sec_page_about .btn_contact:hover,
#main .sec_page_about .btn_contact:focus{
 color: #f3c139;
 border-color: #fff;
 background: #fff;
}

.btn_contact_flt small{
 display: block;
 font-weight: normal;
 font-size: 78%;
 color: #eee;
}
.btn_contact_flt_btn{
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 10;
 mix-blend-mode: difference;
}

#main .sec_page_works .btn_contact,
#main .sec_page_service .btn_contact,
#main .case_list .btn_contact{
	background: #1ba3be;
	border-color: #1ba3be;
	color: #fff;
}
#main .sec_page_works .btn_contact:focus,
#main .sec_page_service .btn_contact:focus,
#main .case_list .btn_contact:focus,
#main .sec_page_works .btn_contact:hover,
#main .sec_page_service .btn_contact:hover,
#main .case_list .btn_contact:hover{
 border-color: #1ba3be;
	background-color: #fff;
	color: #1ba3be;
}

/*============================================================
	check_cookie_popup
============================================================*/
.check_cookie_popup{
 display:none;
 padding: 20px;
 width: 100%;
 position: fixed;
 bottom: 0;
 left: 0;
 background: rgba(255,255,255,0.80);
 z-index: 1000;
 color: #000;
 text-align: center;
}
.check_cookie_popup p{
 margin: 0 0 1em 0;
 font-size: 16px;
 line-height: 1.75;
 text-align:center;
}
.btn_check_cookie{
 display: inline-block;
 background: #999;
 color: #fff;
 line-height: 1;
 padding:  15px 2em;
}
#main .works_scroll div{
 overflow: hidden;
 display: flex;
}

#main .works_scroll h2{
 font-weight: bold;
 font-size: 125.0%;
 margin: 0;

 position: static;
 text-align: center;
 width: 100%;
}



#main .works_scroll ul{
 margin: 0;
 display: flex;
 justify-content: center;
 animation: infinity-scroll-left 60s infinite linear 0s both;
}
#main .works_scroll li{
  width: calc(100vw / 7);
  /*width: calc(100vw / 5.5);*/
  padding:  0 ;
  max-width: 300px;
}
@keyframes infinity-scroll-left {
 from {
   transform: translateX(0);
 }
 to {
  transform: translateX(-100%);
 }
}