@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
.uk-navbar-item,.uk-navbar-nav>li>a,.uk-navbar-toggle,.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,.uk-heading-2xlarge,.uk-heading-large,.uk-heading-medium,.uk-heading-small,.uk-heading-xlarge,h1,h2,h3,h4,h5,h6{font-family:inherit}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: auto;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
	font-family: "Noto Sans JP", sans-serif;
	-webkit-text-size-adjust: 100%;
    line-height: 1.8em;
	box-sizing: border-box;
	padding: 0;
	color: #000;
	font-size: 14px;
	padding-top: 69px;
}
input, select, textarea, pre {
	color: #000;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
button:focus{
	outline: 0;
	background:none;
}
a{
	color: #101010;
	text-decoration: none;
}
a:hover{
	opacity:0.7;
}
img {
	vertical-align: top;
}

body time, body mark,
body em, body small {
	font-style: normal;
}
body mark {
	background: none;
}
/*フワッと表示する*/
.effect-fade {
  opacity: 0;
  transform: translate(0, 45px);
  transition: all 300ms;
}
.effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}
@media screen and (min-width: 769px) {
	body .sp {
		display: none;
	}
	a[href^="tel"]{pointer-events: none}
	article section{
		padding: 20px 0
	}
}
@media screen and (max-width: 769px) {
	img {
		max-width: 100%;
	}
	body .pc {
		display: none;
	}
}


/*---------------------------------------------------------------------*/
/* header */
/*---------------------------------------------------------------------*/
header{
	width: 100%;
	min-height: 69px;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
}
header h1{
		width: auto;
		margin: 5px 10px
	}
header nav{
	margin: auto 0 auto auto;
	height: 69px;
}
header nav .logo{
	margin: auto auto auto 0;
	line-height: 1;
	max-width: 220px;
	height: auto;
}
header nav .logo a{
/*	display: block; */
	padding: 10px 0;
}
.header_nav{
	max-width: 1020px;
	margin: auto;
	width: 100%
}
.uk-navbar-nav>li>a{
	color: #00aeef;
	font-weight: 700;
	text-decoration: none;
	height: 69px;
	line-height: 1.2;
    min-height: 0
}
.uk-navbar-nav>li>a:hover{
	color: #00aeef;
	text-decoration: underline;
}
#menu_btn{
	position: fixed;
	right: 10px;
	top: 20px;
}
#menu_btn span{
	color: #fff;
	cursor: pointer;
}
#offcanvas-slide ul {
	padding: 0;
}
#offcanvas-slide ul li{
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: solid 1px #fff;
}
#offcanvas-slide button.uk-icon:not(:disabled) {
    color: #fff;
}
@media screen and (min-width: 769px) {
  .uk-navbar-nav > li:nth-child(-n+2) a::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 90%;
    border-right: 1px solid #00aeef;
    transform: rotate(35deg);
    margin-left: 20px;
    margin-right: -8px;
  }
  .uk-navbar-nav > li:last-child > a {
    background: #000;
    color: #fff
  }
}
@media screen and (max-width: 768px) {
	header h1{
		width: 75%;
	}
	header nav{
		margin-left: 1rem;
	}
	header nav .logo{
		max-width: 160px;
	}
}

/*---------------------------------------------------------------------*/
/* main_v */
/*---------------------------------------------------------------------*/
#main_v{
	position: relative
}

#main_v .main_v_upper > div,
#main_v .main_v_bottom > div{
	max-width: 1020px
}
#main_v .main_v_upper{
	/*padding: 50px 0;*/
	background: #00aeef;
	box-sizing: border-box;
	max-height: 700px
}
body:not(#home) #main_v #particles-js {
	max-height: 180px;overflow: hidden
}
body:not(#home) #main_v #particles-js > div {
	position: absolute;top:calc(50% - 2em);left: calc(50% - 4em);left: 50%;
transform: translateX(-50%);
}
#main_v .main_v_bottom{
	background-color: #333;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%
}
body:not(#home) #main_v .main_v_bottom{
	padding: 50px 0
}
#home #main_v .main_v_upper > div{
	position: absolute;
	top: 40px;
	width: 100%;
	right: 50%;
transform: translateX(50%);
}
#home #main_v .main_v_bottom {/*homeだけ四角形を傾ける*/
  transform: skewY(-8deg);
  transform-origin: bottom left;
	height: 18.5em
}
#home #main_v .main_v_bottom > *:not(:last-child) {
  /*傾きを戻す*/
  transform: skewY(8deg);
  transform-origin: bottom left;
}
#home #main_v .main_v_bottom canvas{
	max-height: 280px
}
#main_v .main_v_ttl {
  position: absolute;
  top: -50px;
  left: calc(50% - 50px);
  z-index: 2
}
.ttl_box {
  background: #fff;
  color: #00aeef;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
}
#home #main_v .main_v_bottom > div:not(:first-child) {
  position: absolute;
  right: 50%;
  -webkit-transform: translate(50%) skewY(8deg);
  -moz-transform: translate(50%) skewY(8deg);
  transform: translate(50%) skewY(8deg);
  top: 15px;
  max-width: 860px;
  margin: auto;
  width: 90%
}
#particles-js3 {
	background: #333;
	position: relative;
	max-height: 600px
}
#particles-js3 > .uk-grid{
	position: absolute;
	top:10%;
	right: 50%;
	transform: translateX(50%);
	width:100%
}
@media screen and (max-width:780px) {
	#particles-js3{
		min-height: 65vw;
	}
}
@media screen and (max-width: 560px) {
	#home #main_v .main_v_upper{
		min-height: 75vw
	}
	#home #main_v .main_v_bottom{
		min-height: 78vw
	}
	#home #main_v .main_v_bottom .main_v_bottom_txt{

	}
    #home #main_v .main_v_bottom > div:not(:first-child) {
        top:38px
    }
	  #main_v {
    /*padding: 20px 0;*/
    background-position: center top;
    background-size: 120%;
  }
	#particles-js3{
		min-height: calc(210vw + 60px);
	}
	#particles-js3 > .uk-grid{
	top:30px
	}
}
/* ------------------------------------------------ checkbox */
.check {
	display: none;
}
/* ------------------------------------------------ menu button 
.menu-btn {
	position: fixed;
	display: block;
	top: 10px;
	right: 30px;
	width: 30px;
	height: 30px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 1000;
}
.bar {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 40px;
	height: 2px;
	background: #00aeef;
	-webkit-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}
.bar.middle {
	top: 15px;
	opacity: 1;
}
.bar.bottom {
	top: 30px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}
.menu-btn__text {
	position: absolute;
	bottom: -15px;
	left: 0;
	right: 0;
	margin: auto;
	color: #00aeef;
	-webkit-transition: all .5s;
	transition: all .5s;
	display: block;
	visibility: visible;
	opacity: 1;
}
.menu-btn:hover .bar {
	background: #999;
}
.menu-btn:hover .menu-btn__text {
	color: #999;
}
.close-menu {
	position: fixed;
	top: 0;
	right: 300px;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0);
	cursor: url(/img/cross.svg),auto;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	visibility: hidden;
	opacity: 0;
}*/
@media screen and (min-width: 769px) {
	#checked,.menu-btn{
			display: none
		}
}
@media screen and (max-width: 768px) {
  .header_menu {
  }
  .header_menu ul {
    display: flex;
    justify-content: center;
    margin: auto;
    width: auto;
    max-width: 1020px
  }
  .header_menu ul li {
    font-weight: 800;
    padding: 10px 0;
    text-align: center;
	  border-bottom: 1px solid #fff
  }
	.header_menu ul li br{
		display: none
	}
	
  .header_menu ul li:last-child a {
    
  }
  .header_menu ul li a {
    color: #fff;
    display: block;
  }
  .header_menu ul li:hover {
    /*background: #63aa9c;
    opacity: .75*/
  }
/* ------------------------------------------------ drawer menu */
.drawer-menu {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 100%;
	padding: 120px 0;
	background: #222;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
	-webkit-transform: perspective(500px) rotateY(-90deg);
	transform: perspective(500px) rotateY(-90deg);
	opacity: 0;
}

.drawer-menu li {
	text-align: center;
}

.drawer-menu li a {
	display: block;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	color: #fff;
	-webkit-transition: all .8s;
	transition: all .8s;
}

.drawer-menu li a:hover {
	color: #1a1e24;
	background: #fff;
}

/* ------------------------------------------------ checkbox */
.check {
	display: none;
}
/* ------------------------------------------------ menu button */
.menu-btn {
	position: fixed;
	top: 20px;
	right: 20px;
	display: block;
	width: 40px;
	height: 40px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 3;
}

.bar {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 40px;
	height: 3px;
	background: #00aeef;
	-webkit-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}
.bar.middle {
	top: 15px;
	opacity: 1;
}
.bar.bottom {
	top: 30px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}
.menu-btn__text {
	position: absolute;
	bottom: -15px;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
	-webkit-transition: all .5s;
	transition: all .5s;
	display: block;
	visibility: visible;
	opacity: 1;
}
.menu-btn:hover .bar {
	background: #999;
}
.menu-btn:hover .menu-btn__text {
	color: #999;
}

.close-menu {
	position: fixed;
	top: 0;
	right: 300px;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0);
	cursor: url(/img/cross.svg),auto;
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	visibility: hidden;
	opacity: 0;
}
/* ------------------------------------------------ menu */
	.header_menu ul{
		flex-direction: column
	}
	.header_menu ul li{
		width: 100%
	}
/* ------------------------------------------------ checked */
.check:checked ~ .drawer-menu {
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	opacity: 1;
	z-index: 2;
}

.check:checked ~ .contents {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: translateX(-300px);
	-ms-transform: translateX(-300px);
	transform: translateX(-300px);
}

.check:checked ~ .menu-btn .menu-btn__text {
	visibility: hidden;
	opacity: 0;
}

.check:checked ~ .menu-btn .bar.top {
	width: 56px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.check:checked ~ .menu-btn .bar.middle {
	opacity: 0;
}

.check:checked ~ .menu-btn .bar.bottom {
	width: 56px;
	top: 40px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.check:checked ~ .close-menu {
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	background: rgba(0,0,0,.5);
	visibility: visible;
	opacity: 1;
	z-index: 3;
}

}

/*---------------------------------------------------------------------*/
/* contents */
/*---------------------------------------------------------------------*/
.contents {
    margin-bottom: 70px;
}
.wrap {
    width: 1020px;
    margin-left: auto;
    margin-right: auto;
}
/*-------------------------------------------------------------home*/
#home .area_service > .uk-grid > div{
	padding:40px
}

#home div[class^="img_0"],#home div[class*=" img_0"]{
	background-position: center center;
	background-size: cover;
    background-repeat: no-repeat
}
#home .area_service > .uk-grid > div:nth-last-child(-n+3) > ul{
	width: 65%
}
#home .img_01{
	background-image: url("/img/img_01.jpg")
}
#home .img_02{
	background-image: url("/img/img_02.jpg")
}
#home .img_03{
	background-image: url("/img/img_03.jpg")
}
#home .img_04{
	background-image: url("/img/img_04.jpg")
}
#home .img_05{
	background-image: url("/img/img_05.jpg")
}
#home .area_works{
	background: url("/img/img_works.png") top center no-repeat;
	background-size: 108%
}
#home .area_works p{
	margin: 33% auto 0;
	max-width: 90%;
	text-align: center
}
.ttl_box_black {
	background: #000;
	color: #fff
}
@media screen and (min-width: 640px) {
  #home .area_service > .uk-grid {
    margin-top: -160px;
	margin-top: min(-168px,-11.5vw);
  }
  #home .area_service > .uk-grid > div:nth-child(-n+2) {
    padding-top: 180px
  }
}
@media screen and (max-width: 639px) {
  #home .area_service > .uk-grid > div {
    padding: 40px 20px
  }
	#home .area_service > .uk-grid > div:nth-child(1){order: 1}
	#home .area_service > .uk-grid > div:nth-child(2){order: 2;padding-top: 50%}
	#home .area_service > .uk-grid > div:nth-child(3){order: 4;padding-top: 50%}
	#home .area_service > .uk-grid > div:nth-child(4){order: 3}
	#home .area_service > .uk-grid > div:nth-child(5){order: 5}
	#home .area_service > .uk-grid > div:nth-child(6){order: 6;padding-top: 50%}
	#home .area_service > .uk-grid > div:nth-child(7){order: 8;padding-top: 50%}
	#home .area_service > .uk-grid > div:nth-child(8){order: 7}
	#home .area_service > .uk-grid > div:nth-child(9){order: 9}
	#home .area_service > .uk-grid > div:nth-child(10){order: 10;padding-top: 50%}
	#home .area_works{background-size: 80vh}
}
/*-------------------------------------------------------------企業情報*/
#aboutus article section > *{
	width: 80%;
	margin-left: auto;
	margin-right: auto
}
#aboutus .map{
	margin-top:20px;
	width: 100%
}
/*-------------------------------------------------------------問い合わせ*/
.ttl_page {
    padding: 30px 0;
    margin-bottom: 30px;
    font-size: 24px;
    border-bottom: 1px solid #1d2088;
    color: #1d2088;
    text-align: center;
}
.post.page_narrow {
    padding: 0 70px;
}
.post .leadtext {
    margin-bottom: 2em;
}
.post > section {
    margin-bottom: 2em;
}
form#mailformpro {
    padding: 10px 0px;
}
.post .dl_form {
    width: 680px;
    margin: 0 auto;
}
.post .dl_form dt {
    color: #1d2088;
    font-weight: bold;
    float: left;
    clear: both;
    width: 250px;
    padding-bottom: 1.4em;
    padding-top: 0.3em;
}
.must {
    font-size: 10px;
    margin-left: 5px;
}
.post .dl_form dd {
    position: relative;
    margin-left: 250px;
    padding-bottom: 1.4em;
    line-height: 1;
}
input[type="text"], input[type="email"], input[type="tel"]{
    width: 100% !important;
    box-sizing: border-box;
    box-shadow: none;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #dddddd;
    padding: 10px 7px;
    font-size: 18px;
}
.post .dl_form dt.col1 {
    width: 100%;
    float: none;
}
.post .dl_form dd.col1 {
    width: 100%;
    margin-left: 0;
    float: none;
}
.post .dl_form .frame {
    height: 200px;
    margin-top: 10px;
    overflow-y: scroll;
    border: 1px solid #ddd;
    padding: 15px;
}
.mfp_element_textarea{
	width:430px;
	height: 180px;
	border: 1px solid #dddddd;
}
.message{
	margin: 30px auto;
	text-align: center;
	font-weight: bold;
	font-size: 36px;
}
.form_subject{
	padding-bottom: 1em;
	border-bottom: solid 1px #ccc;
	clear: both;
}
.form_subject label{
	margin: auto!important;
}
.uk-form-horizontal .uk-form-controls{
	min-height: 2em;
}
#thanks{
	height: 300px;
	font-size: 20px;
	line-height: 2em;
}
#sub_btn{
	background-color: #f26027;
}
@media screen and (max-width: 769px) {
	.wrap {
    	width: 100%;
	}
	.post.page_narrow {
		padding: 0 5%;
	}
	.post .dl_form {
		width: 100%;
	}
	.post .dl_form dt {
		float: none;
		width: auto;
		display: block;
		padding-bottom: 0;
	}
	.post .dl_form dd {
    	margin-left: 0;
		display: block;
	}
	.mfp_element_textarea{
		width: 100%;
	}
	h3.ttl_sub{
		font-size: 1.25rem;
	}
	.message{
		font-size: 1.25rem;
	}
}

/*---------------------------------------------------------------------*/
/* footer */
/*---------------------------------------------------------------------*/
.footer_upper > div{
	max-width: 1020px
}
footer {
	position: relative
}
footer > div {
/*	margin: 0 auto;
	padding: 60px 0 0 400px;
	width: 940px;
 	min-height: 390px; */
}
footer address {
	display: block;
	margin-top: 30px;
}
footer address span {
	font-size: 16px;
}
footer > p {
	margin: auto;
	font-size: 10px;
	color: #27339a;
	font-weight: bold;
	padding: 0 0 10px 85%;
	line-height: 1.3em;
}
.post .dl_form .agreement {
    padding: 10px;
    margin: 20px auto;
    text-align: center;
    position: relative;
}
form#mailformpro label.mfp_not_checked {
    padding: 3px;
}
div.mfp_buttons {
    clear: both;
    padding: 10px 0px;
    text-align: center;
}
.mfp_buttons p {
    width: 200px;
    margin: 0 auto;
    position: relative;
}
.mfp_buttons input[type="submit"] {
    border: 0;
    background: #1d2088;
    color: #fff;
    padding: 10px;
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    position: relative;
}
@media screen and (min-width: 769px) {
	.footer_inner_upper .uk-grid div:first-child{
		border-right:1px solid #40c2f3
	}
}
/* TAB･SP ---------------------------------------------------------------*/
@media screen and (max-width: 769px) {
	footer {
	}
	footer > div {
		padding: 30px 15px;
		background: none;
		min-height: auto;
	}
	footer div p {
		width: 60%;
		margin: 0 auto;
	}
	footer > p {
		margin: auto;
		padding-left: 0;
		text-align: center;
		font-size: 12px;
	}
	.footer_inner_upper .uk-grid div:first-child{
		border-bottom:1px solid #40c2f3
	}
}

/*------------------------------------------------------------------------------------*/
/* pageTop */
/*------------------------------------------------------------------------------------*/
#pageTop {
	position: fixed;
	right: 20px;
	bottom: 100px;
	width: 50px;
	height: 50px;
	padding-top: 20px;
	border-radius: 5px;
	background-color: rgba(0,0,0,0.4);
	text-align: center;
	font-size: 10px;
	line-height: 1em;
	cursor: pointer;
	display: none;
	z-index: 999
}
#pageTop.show{
	display: block;
}
/* TAB･SP ---------------------------------------------------------------*/
@media screen and (max-width: 769px) {
	#pageTop {
		right: 15px;
		bottom: 90px;
		padding: 20px 15px;
	}
}
/*------------------------------------------------------------------------------------*/
/* all */
/*------------------------------------------------------------------------------------*/
div[id^="anc_"]{margin-top: -70px;padding-top: 70px}
.col_blue{color:#00aeef}
.col_white{color:#fff}
.bg_light_blue{background-color:#e5f7fd}


/*------------------------------------------------------------------------------------*/
/* service */
/*------------------------------------------------------------------------------------*/


body#service #main_v .main_v_bottom{
	padding: 94px 0 95px;
}

@media only screen and (max-width:1040px) and (min-width:601px) {
	#service .wrap{
		width: 100%;
		box-sizing: border-box;
		padding-left: 2.5%;
		padding-right: 2.5%;
	}
}


.servicecnt{
	padding: 50px 0;
}

.servicebox{
	width: 32%;
	align-self: flex-start;
	margin: 0;
}
@media only screen and (max-width:600px) {
	.servicebox{
		width: 100%;
	}	
}
.servicebox h3.title{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;	
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 25px;
	text-align: left;
}

.servicebox .title span.img{
	width: 52px;
	height: auto;
	display: inline-block;
	margin-right: 10px;
}
.servicebox .title span.img img{
	width: 100%;
	height: auto;
}
.servicebox .title span{
	display: block;
}
.servicebox .title span.txt{
	width: calc(100% - 52px);
}
.servicebox .title span.txt span.title{
margin-bottom: 5px;
}
.servicebox .title span.txt span.en{
	font-size: 14px;
	font-weight: bold;
	color: #00AEEF;
}
.servicebox ul.txt{
	list-style: disc;
}
.servicebox ul.txt li{
	display: list-item;
    box-sizing: border-box;
    padding-left: 25px;
    color: #333;
    list-style-type: disc;
    list-style-position: inside;
}
@media only screen and (max-width:600px) {
	.servicebox .title span.img{
		width: 62px;
	}
	.servicebox{
		text-align: center;
		margin-bottom: 50px;
	}
	.servicebox ul.txt{

	}
	.servicebox ul.txt li{
		display: block;
		list-style: none;
		text-align: center;
		padding-left: 0;
	}
	.servicebox h3.title{
		display: inline-flex;
	}
	.servicebox .title span.txt{
		display: inline-block;
	}
	.servicebox .title span.txt span.title,
	.servicebox .title span.txt span.en{
		width: 100%;
		white-space: nowrap;
	}
}

#contactus {
	position: relative;
	display: block;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 150px 0 100px;
}
#contactus:before {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.48);
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
}
#contactus .main{
	position: relative;
	z-index: 1;
}
#contactus .main h3{
	border-left:5px solid #00AEEF;
	padding-left: 15px;
	padding-bottom: 7px;
	font-size: 26px;
	color: #FFF;
	font-weight: bold;
	line-height: 1.6;
}
#contactus .main h3 span{
	color: #00AEEF;
	font-size: 14px;
	display: block;
}
#contactus .main a{
    border-radius: 26px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 15px 135px 15px 15px;
    position: relative;
    margin-top: 25px;
    display: inline-block;
}
#contactus .main a:after{
	content: "";
	position: absolute;
	top: 50%;
	right:10px ;
	transform: translateY(-50%);
	background: #ffffff;
	height: calc(tan(60deg) * 21px / 2);
	width: 18px;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: all 300ms;
}

#contactus .main a:hover{
	text-decoration: none;
	background-color: #fff;
	color: #00AEEF;
	transition: all 300ms;

}
#contactus .main a:hover:after{
	background: #00AEEF;
	right: 5px;;
}

#clientpartner{
	padding: 100px 0 20px;
}

#clientpartner .client,
#clientpartner .partner{
	width: 100%;
	margin: 0;
}
#clientpartner .client{
	margin-bottom: 50px;
}

#clientpartner div.txt{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 20px;
}
#clientpartner div.txt .clientbox{
	width: 47%;
	margin: 0 0 35px;
}
@media only screen and (max-width:1040px) {
	#clientpartner div.txt .clientbox{
		width: 95%;
		margin: 0 2.5% 40px;
	}
}

@media only screen and (max-width:600px) {
	#clientpartner div.txt .clientbox{
		width: 100%;
		margin: 0 0 40px;
	}
}

#clientpartner div.txt .cuttitle{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
	color: #00AEEF;
}
#clientpartner div.txt .cuttitle:before{
	content: "■ ";
}

#clientpartner div.txt dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#clientpartner div.txt dl dt{
	width: 80%;
	text-align: left;
}
#clientpartner div.txt dl dd{
	width: 20%;
	text-align: right;
}

@media only screen and (min-width:861px) {
	br.pcview{display: inline-block;}
	br.tabview{display: none;}
	br.spview{display: none;}
}
@media only screen and (max-width:860px) {
	br.pcview{display: none;}
	br.tabview{display: inline-block;}
	br.spview{display: none;}
}


@media only screen and (max-width:600px) {
	#clientpartner .annnotation.pcdn{
		display: block;
	}
	br.pcview{display: none;}
	br.tabview{display: none;}
	br.spview{display: inline-block;}
	.servicebox .title span.img{
		margin-top: -2px;
	}
	.service.uk-text-large{
		font-size: 4vw;
	}

	h2.service{
		padding: 0 5%;
	}
	#contactus{
		padding: 150px 5% 100px;	
	}
	#clientpartner{
		padding: 50px 5%;
	}
	#clientpartner .client,
	#clientpartner .partner{
		width: 100%;
	}
	#clientpartner .client{
		margin-bottom: 50px;
	}
	#clientpartner .main section.boxflex{
		flex-direction: column;
	}
}



#clientpartner h3.title{
	display: block;
	box-sizing: border-box;
	padding-left: 15px;
	border-left:5px solid #00AEEF;
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 25px;
	line-height: 1.6;
	padding-bottom: 7px;
}
#clientpartner h3.title span{
	display: block;
}
#clientpartner h3.title span.en{
	font-size: 14px;
	color: #00AEEF;
}
#clientpartner p.txt{
    font-size: 14px;
    padding-left: 20px;
    line-height: 2.25;
}
#clientpartner .partner p.txt{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	text-align: left;
	box-sizing: border-box;
	justify-content: center;

}
@media only screen and (max-width:600px) {
	#clientpartner .partner p.txt{
		flex-direction: row;
		justify-content: center;
	}
	#clientpartner p.txt img{
		margin-right: auto !important;
	}
}	
#clientpartner p.txt img{
	width: auto;
    margin: 0;
	vertical-align: middle;
}

#clientpartner p.txt span{
	display: inline-block;
	width: 20%;
	margin-bottom: 50px;
	text-align: center;
}

#clientpartner p.txt img[src$="dnp.png"]{height: 28px;}
#clientpartner p.txt img[src$="lm.png"]{height: 34px; transform: translateY(0.25vh);}
#clientpartner p.txt img[src$="dentsu.png"]{height: 29px;}
#clientpartner p.txt img[src$="rosier.png"]{height: 29px;}
#clientpartner p.txt img[src$="spiral.png"]{height: 38px; transform: translateY(0.55vh);}
#clientpartner p.txt img[src$="gmo.png"]{height: 40px;}
#clientpartner p.txt img[src$="makeshop.png"]{height: 42px;}
#clientpartner p.txt img[src$="bcart.png"]{height: 43px;}
#clientpartner p.txt img[src$="fcode.png"]{height: 37px; transform: translateY(-0.05vh);}
#clientpartner p.txt img[src$="jintec.png"]{height: 55px; transform: translateY(0.85vh);}

@media only screen and (max-width:940px) {
	#clientpartner p.txt span{
		box-sizing: border-box;
		padding: 2% 2% 2% 0;
		width: 25%;
		text-align: center;
		margin: 0;
		align-self: center;

	}
	#clientpartner p.txt img{
		width: 80%;
		height: auto !important;
		transform: translateY(0) !important;
	}
	#clientpartner p.txt img[src$="dnp.png"]{width: 93%;}
	#clientpartner p.txt img[src$="lm.png"]{width: 87%;}
	#clientpartner p.txt img[src$="dentsu.png"]{}
	#clientpartner p.txt img[src$="rosier.png"]{width: 62%;}
	#clientpartner p.txt img[src$="spiral.png"]{width: 98%;}
	#clientpartner p.txt img[src$="gmo.png"]{width: 68%;}
	#clientpartner p.txt img[src$="makeshop.png"]{}
	#clientpartner p.txt img[src$="bcart.png"]{}
	#clientpartner p.txt img[src$="fcode.png"]{width: 100%;}
	#clientpartner p.txt img[src$="jintec.png"]{width: 55%;}
	
}

@media only screen and (max-width:600px) {
	#clientpartner p.txt span{
		width: 33%;
		text-align: center;
	}
	#clientpartner p.txt img[src$="jintec.png"]{width: 60%;}
	#clientpartner p.txt img[src$="dnp.png"]{width: 93%;}
	#clientpartner p.txt img[src$="lm.png"]{width: 87%;}
	#clientpartner p.txt img[src$="dentsu.png"]{}
	#clientpartner p.txt img[src$="rosier.png"]{width: 59.5%; transform: translateY(-0.35vh) !important;}
	#clientpartner p.txt img[src$="spiral.png"]{width: 98%; transform: translateY(-0.15vh) !important;}
	#clientpartner p.txt img[src$="gmo.png"]{width: 60%; transform: translateY(-0.45vh) !important;}
	#clientpartner p.txt img[src$="makeshop.png"]{}
	#clientpartner p.txt img[src$="bcart.png"]{}
	#clientpartner p.txt img[src$="fcode.png"]{width: 100%;}
	#clientpartner p.txt img[src$="jintec.png"]{width: 55%;}
}




#clientpartner .annnotation.pcdn{
	display: none;
}

#clientpartner .annnotation{
	width: 90%;
	margin: 15px 0;
}
#clientpartner .partner .annnotation{
	padding-left: 2.5%;
}

@media only screen and (max-width:600px) {
	#clientpartner .annnotation{
		margin: 15px 2.5%;
	}
}


#clientpartner .annnotation p{
	font-size: 12px;
	padding:0;
	box-sizing: border-box;
}

/*------------------------------------------------------------------------------------*/
/* flex-box */
/*------------------------------------------------------------------------------------*/

.boxflex{
	display: flex;

}
.fwrap{
	flex-wrap:wrap;
}
.nowrap{
	flex-wrap:nowrap;
}
.row{
	flex-direction:row;
}
.row2{
	flex-direction:row;
}
.row3{
	flex-direction:row;
}
.row-reverse{
	flex-wrap:wrap-reverse;
	flex-direction:row-reverse;
}
@media only screen and (max-width:600px) {
	.row{
		flex-direction:column;
	}
	.row2{
		flex-direction:column-reverse;
	}
	.row-reverse{
			flex-direction:column;
	}
}


.column{
	flex-direction:column;
}
.column-reverse{
	flex-direction:column-reverse;
}

.jtop{
	justify-content: top;
}
.jflex-start{
	justify-content: flex-start;
}
.jflex-center{
	justify-content: center;
}

.jflex-end{
	justify-content: flex-end;
}

.space-between{
	justify-content:space-between;
}

.ac-space-between{
	align-content: space-between;
}
.space-around{
	flex-wrap:wrap;
	justify-content:space-around;
}


.atop{
	align-items: flex-start;
}
.acenter{
	align-items: center;
}
.aflex-end{
	align-items: flex-end;
}
.flex1{
	flex:1;
}