@charset "UTF-8";
/* Common */
	html, body, div, span, applet, object, iframe, h1, 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
	{ font-family: "azo-sans-web",sans-serif; font-style: normal; font-weight: 300; vertical-align: baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
	img { width /***/:auto; max-width: 100%; height: auto; }
	ul { list-style: none; }
	h2,
	h3,
	h4,
	h5,
	h6 { font-weight: normal; }
	body { background: #fff; }
	/* Link */
		a,
		a.noLink,
		a.noLink:hover { color: #fff; }
		a { text-decoration: none; }
		a:hover { -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; }
		a.noLink { cursor: default; }
		.pageLink.otherLink a { margin: 0 1em; }
		/* Page Top Anchor */
			#pageTopAnchor div { height: 0; }
			#pageTopArrow { position: fixed; z-index: 9999; }
			#pageTopArrow a,
			#pageTopArrow span { display: block; }
			#pageTopArrow a { position: relative; box-sizing: content-box; }
			#pageTopArrow span { margin: 0 auto; text-align: center; position: absolute; }
			#pageTopArrow span:before { font-family: "icomoon"; font-weight: lighter; content:"\ea3a"; }

	/* Text */
		.jaText { font-family: "a-otf-ud-shin-go-pr6n",sans-serif; font-style: normal; font-weight: 300; }
		/* Color */
			.fontBlack { color: #303030; }
			.fontGray { color: #777; }
		/* Layout */
			.ls_1 { text-indent: 0.1em; letter-spacing: 0.1em; }
			.ls_25 { text-indent: 0.25em; letter-spacing: 0.25em; }

	/* Background */
		/* Color */
			.bgBlack { background: #303030; }
			.bgLGray { background: #ccc !important; }
			.bgGray { background: #eee !important; }
			.bgDGray { background: #777 !important; }
			.bgLGreen { background: #59c942 !important; }
			.bgGreen { background: #48a435 !important; }
			.bgOrange { background: #ff8a02 !important; }
		/* Pattern */
			.bgNoiseBlack { background: url(../../images/bgNoiseBlack.png); }
			.bgNoiseRed { background: url(../../images/bgNoiseRed.png); }
			.bgNoiseWhite { background: url(../../images/bgNoiseWhite.png); }
			.bgSlashGray { background: -webkit-repeating-linear-gradient(-45deg, #eee, #eee 5px, #fff 5px, #fff 10px); background: repeating-linear-gradient(-45deg, #eee, #eee 5px, #fff 5px, #fff 10px); }
		/* Transparent */
			.bgBlue { background: rgba(0,160,233,0.8) !important; }
			.bgPink { background: rgba(234,104,162,0.8) !important; }
			.bgGreen { background: rgba(72,164,53,1) !important; }
			.bgTransparentBlack { background: rgba( 48, 48, 48, 0.7); }
			.bgTransparentWhite { background: rgba( 255, 255, 255, 0.7); }

	/* Parts */
		.flexBox,
		.flexInlineBox { -webkit-justify-content: center; justify-content: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
		.flexBox { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; }
		.flexInlineBox { display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flex; display: -o-inline-flex; display: inline-flex; }
		/* Title */
			.titleL { border-top: 2px #303030 solid; border-bottom: 2px #303030 solid; }
			.titleM { border-top: 2px #303030 dashed; border-bottom: 2px #303030 dashed; }
			.detail { margin: 1em 0; background: #777; border-radius: 0.25em !important; }
		/* Contents */
			section { padding: 0; }
			article { text-align: center; }
			.siteContents .descBlock { width: 90%; margin: 2em auto 0; }
			.minimalIcon { font-size:1.75em; }
			.hGroupBox,
			.contentBox { margin: 1em auto 0; }
			.hGroupBox { width: 90%; }
		/* socialBookMark */
			.socialBookMark { width: 100%; }
			.detailPage .socialBookMark { margin-top: 1em; }
		/* Mark */
			.genre { margin-right: 0.25em; padding: 0.4em 0.4em 0.3em; color: #fff; font-size: 0.8em; /*background: rgba(144, 144, 144, 0.25);*/ border: 1px #fff solid; line-height: 0.9em; display: inline-block; }
			.genre:first-child { margin-right: 0.25em; }
			.genre:before { margin-right: 0.25em; font-family: "icomoon"; font-weight: lighter; vertical-align: top; }
			.genre:after { font-style: normal; letter-spacing: 0.1em; }
			.genre.webService:before { content: "\e956"; }
			.genre.webService:after { content: "Web"; }
			.genre.androidService:before { content: "\eac0"; }
			.genre.androidService:after { content: "Android"; }

			/* h1 */
				#pageTop > h1 a { position: absolute; }
			/* h2 */
				h2 { margin-bottom: 0!important; }
				h2.worksTitle.titleIcon:before { font-family: "icomoon"; font-weight: lighter; display: block; }
				/* HOME */
					h2.worksTitle.titleIcon.home:before { content:"\e902"; }
				/* NEWS */
					h2.worksTitle.titleIcon.news:before { content:"\e9c9"; }
				/* ABOUT */
					h2.worksTitle.titleIcon.about:before { content:"\ea0c"; }
				/* SERVICE LIST */
					h2.worksTitle.titleIcon.service:before { content:"\e90e"; }
				/* MEDIA */
					h2.worksTitle.titleIcon.media:before { content:"\e904"; }
			/* h3 */
				h3,
				h3 p { margin: 0; }
				h3 { padding: 0.5em 0; }
				h3 p { font-weight: normal; line-height: 1.5em; }
				h3 p:before { font-family: "icomoon"; font-size: 3em; font-weight: lighter; line-height: 1em; display: block; }
				/* HOME */
					h3.home p:before { content:"\e902"; }
				/* NEWS */
					h3.news p:before { content:"\e9c9"; }
				/* ABOUT */
					h3.about p:before { content:"\ea0c"; }
				/* SERVICE LIST */
					h3.service p:before { content:"\e90e"; }
				/* MEDIA */
					h3.media p:before { content:"\e904"; }
				h3 .jaText { text-indent: 0.5em; letter-spacing: 0.5em; display: block; }
				h3 .jaText:before,
				h3 .jaText:after { font-size: 0.5em; font-family: "themify"; font-weight: lighter; content:"\e622"; }
				h3 span { display: block; }
				h3 .subTitle { font-weight: lighter; line-height: 1.75em; }
				h3 .mainTitle { font-weight: bold; letter-spacing: 0.2em; }
			/* h4 */
				h4.detail { padding: 0.25em 0 0.1em; font-size: 1.25em; font-weight: lighter; color: #fff; border: 0px; line-height: 1em; box-sizing: content-box; }
				h4.detail p { margin: 0; font-size: 0.75em; line-height: 1.25em; }
				h4.detail span { font-size: 0.6em; letter-spacing: 0.5em; text-indent: 0.5em; display: block; }
				h4.detail span:before,
				h4.detail span:after { font-size: 0.5em; font-family: "themify"; font-weight: lighter; content:"\e622"; }
			/* h5 */
				h5 { margin: 0.75em auto 0.25em; font-size: 0.75em; }
				.descBlock h5 { color: #777; line-height: 2em; }
		/* Tool Icon List */
			ul.toolBlock { margin: 1em auto; }
			ul.toolBlock:last-of-type { margin-bottom: 0; }
			ul.toolBlock li { margin: 0 0.25em; list-style: none; display: inline-block; }

		/* Text */
			.descBlock { margin: 0.25em auto; line-height: 1.5em; border-radius: 0.25em; background: #fff; box-sizing: content-box; }
			.descBlock.headLine { padding: 0!important; font-weight: 800; background: none; }
			.descBlock p { margin: 0; }
			.descBlock .linkBlock { margin: 1.25em auto 0.5em; display: block; }
			.descBlock .linkBlock a { padding: 1em 2em; color: #fff; font-size: 0.8em; border-radius: 0.25em; background: #303030; }
			.descBlock .linkBlock a:hover { color: #fff !important; background: #ff3838; -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; }

		/* Button */
			.btnBlock { margin: 3.5em auto; -webkit-justify-content: space-between; justify-content: space-between; }
			.btn,
			.btn i { font-weight: normal; }
			.btn:hover,
			.btn.noLink,
			.btn.noLink:hover { color: #fff; }
			.btn { color: #48a435; border: 4px solid #fff; box-shadow: 0 0 0 4px #303030; display: inline-block; position: relative; box-sizing: content-box; }
			.btn p { margin: 0; font-weight: normal; }
			.btn:not(.noLink):hover { background: #59c942 !important; -moz-transition: background-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; -webkit-tap-highlight-background-color: transparent; }
			.btn > div { width: 100%; text-align: center; position: absolute; }
			.btnSquare { padding: 1em 2em; font-size: 1.25em; }
			/*  */
			.descBlock .btn a,
			.descBlock .btn a p:before { display: block; }
			.descBlock .btn { margin: 1em auto; }
			.descBlock .btn a { color: #303030; padding: 1em 0.5em 0.25em; box-sizing: content-box; }
			.descBlock .btn a p { font-weight: 400; }
			.descBlock .btn a:hover { color: #fff; }
			.descBlock .btn a p:before { margin-bottom: 0.25em; }
			.url p:before { font-size: 3em; font-family: "icomoon"; display: block; }
			.url.downLoad p:before { content:"\e95e"; }
			.url.webSite p:before { content:"\e9cb"; }
			.url.fb p:before { content:"\ea90"; }

			/* Bottom Link */
				.btnBlock .menuIcon:before { margin: 0.1em auto 0.2em; font-size: 2.5em; font-family: "icomoon"; font-size: 2.5em; font-weight: lighter; display: block; }
				/* HOME */
					.btnBlock .home:before { content:"\e902"; }
				/* NEWS */
					.btnBlock .news:before { content:"\e9c9"; }
				/* ABOUT */
					.btnBlock .about:before { content:"\ea0c"; }
				/* SERVICE LIST */
					.btnBlock .service:before { content:"\e90e"; }
				/* MEDIA */
					.btnBlock .media:before { content:"\e904"; }
			/* Page Link */
				.pageLink { margin: 2em auto; }
				.pageLink div { margin: 0 1em; }
				.pageLink div a { padding: 0.5em 0; display: block; box-sizing: border-box; }
				.pageLink div p { margin: 0; font-size: 1em; font-weight: 400; line-height: 1.25em; }
				.pageLink div p:after { font-family: "icomoon"; content:"\ea3e"; display: block; }
				.pageLink div p span { margin: 0 0.25em; }

	/* Nav(SP) */
		.headBar h1,
		.headBar a { color: #fff; position: absolute; }
		.headBar a[href="#nav"] { right: 1em; }
		.headBar a[href="#nav"] span { font-size: 2em; }
		.headBar .minimalIcon { top:0.25em; position: relative; }
		.headBar { height: 4em; line-height: 4em; }
		.headBar h1 { margin: 0; padding: 0; top: 0; left: 0.75em; font-size: 1.5em; display: inline-block; }
		.headBar h1 a { font-size: 1em; }
		/* Nav Inner */
			#nav { max-width: 70%; height: 100%; padding: 4em 2em; top: 0; right: 0; -moz-transform: translateX(20em); -webkit-transform: translateX(20em); -ms-transform: translateX(20em); transform: translateX(20em); -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; -webkit-overflow-scrolling: touch; box-shadow: none; color: #fff; overflow-y: auto; position: fixed; visibility: hidden; z-index: 10002; }
			#nav .close { width: 7em; height: 4em; top: 0; right: 0; padding-right: 1.25em; text-decoration: none; -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; border: 0; color: #fff; cursor: pointer; display: block; line-height: 4em; position: absolute; text-align: right; vertical-align: middle; }
			#nav .close:before { content: "\ea0f"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: icomoon; font-style: normal; font-weight: normal; text-transform: none !important; }
			#nav .close:before { font-size: 2em; }
			#nav .close:hover { color: #ffff7f; }
			#nav.visible { -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2); visibility: visible; }
			#nav ul { margin: 0; }
			#nav ul { list-style: none; padding: 0; }
			#nav ul li { padding: 0em !important; text-align: left; border-bottom: 1px #fff dashed; }
			#nav ul li a { padding: 1.5em 1em 0.75em; color: #fff !important; font-size: 1em; border: 0; border-top: solid 1px transparent; color: inherit; display: block; line-height: 1em; text-decoration: none; -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; }
			#nav ul li:first-child a { border-top: 0; }
			#nav ul li a:hover { color: #ffff7f; }
			#nav ul li a span { font-size: 1.5em; line-height: 0em; vertical-align: text-top; }
			#nav ul li a:before { width: 1.25em; margin-right: 0.5em; font-family: "icomoon"; font-size: 2em; font-weight: lighter; text-align: center; display: inline-block; }
			/* HOME */
				#nav ul li.home a:before { content:"\e902"; }
			/* NEWS */
				#nav ul li.news a:before { content:"\e9c9"; }
			/* ABOUT */
				#nav ul li.about a:before { content:"\ea0c"; }
			/* SERVICE LIST */
				#nav ul li.service a:before { content:"\e90e"; }
			/* MEDIA */
				#nav ul li.media a:before { content:"\e904"; }

	/* Nav(PC) */
		#navL { width: 100%; height: auto; top: 0; right: 0; padding: 0; -webkit-overflow-scrolling: touch; box-shadow: none; color: #fff; border-bottom: 0.25em rgba( 255, 255, 255, 0.8) solid; overflow-y: auto; position: fixed; z-index: 10002; }
		#index #navL { border-bottom: 0; }
		#navL ul { width: 100%; margin: 0; }
		#navL ul { padding: 0; box-sizing: content-box; }
		#navL ul li { width: calc(100%/5); padding: 0em !important; text-align: center; }
		#navL ul li a { padding: 0 !important; border: 0; color: #fff !important; text-decoration: none; display: block; position: relative; }
		#navL ul li a span { font-weight: normal; }
		#navL ul li a span:before { margin-right: 0.5em; font-family: "icomoon"; font-size: 1em; font-weight: lighter; vertical-align: bottom; }
		#navL ul li.home a span:before { content: "\e902"; }
		#navL ul li.news a span:before { content: "\e9c9"; }
		#navL ul li.about a span:before { content: "\ea0c"; }
		#navL ul li.service a span:before { content: "\e90e"; }
		#navL ul li.media a span:before { content: "\e904"; }
		#navL ul li a.noLink { background: #ff8a02; }
		#navL ul li a:not(.noLink):hover { background: #59c942; -moz-transition: background-color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; -webkit-tap-highlight-background-color: transparent; }

	/* Contents */
		/* Index */
			/* Logo Mark */
				#logoMark .logoImg { width: 12.5em; height: auto; margin: 0 auto 1.5em; text-align: center; position: relative; }
				#logoMark .logoImg img { width: 100%; }
			/* Catch */
				.catch { width: 80%; margin: 2em auto; font-size: 1.5em; font-weight: bold; line-height: 1.5em; }
				.aboutBlock { margin: 0 auto 1.5em; display: inline-block; }
				.aboutBlock .btn { padding: 0.5em 1em; }
				.aboutBlock a { font-size: 1.25em; display: block; }
				.aboutBlock a:before { font-size: 2em; font-family: "icomoon"; font-weight: lighter; content:"\ea0c"; }
				.aboutBlock a p,
				.aboutBlock a p span { font-weight: bold; }
			/* SERVICE LIST */
				/* Thumbnail */
					.worksTitleImg { margin: 1em auto 0; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
					.worksTitleImg .genre,
					.worksTitleImg .genre:before,
					.worksTitleImg a span:before { display: inline-block; }
					.worksTitleImg img,
					.worksTitleImg a { display: block; }
					.worksTitleImg .thumbnail { margin: 0.25em 0.125em 0; text-align: left; box-sizing: border-box; border: 4px #fff solid; box-shadow: 0 0 0 4px #303030; position: relative; }
					.worksTitleImg .thumbnail:hover { border: 4px #ff8a02 solid; box-shadow: 0 0 0 4px #303030; }
					.worksTitleImg img { width: 100%; }
					.worksTitleImg .genreIcon { top: 0.5em; left: 0.5em; position: absolute; z-index: 2; }
			/* NEWS,MEDIA */
				.descBlock.listBlock { width: 90%; margin: 1em auto; padding: 0; }
				.descBlock.listBlock div { border-bottom: 1px #303030 dashed; }
				.descBlock.listBlock p { line-height: 3em; }
				.descBlock.listBlock p a { color: #48a435; }
				.descBlock.listBlock p a:hover { color: #ff8a02; }
		/* ABOUT */
			.memberList { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
			.memberList div { color: #fff; position: relative; }
			.memberList div p,
			.memberList .jobs { color: #303030; position: absolute; }
			.memberList div p { width: 100%; bottom:-1em; text-align: center; }
			.memberList div img { width: 100%; }
			.memberList .jobs { width: 100%; box-sizing: content-box; font-size: 1em; }
			.memberList .jobs:before { font-family: "icomoon"; font-weight: lighter; }
			.memberList .se:before { content:"\e996"; }
			.memberList .wd:before { content:"\e997"; }
		/* SERVICE DETAIL */
			.otherWorks,
			.otherWorks dt,
			.otherWorks dd { margin: 0; padding: 0; }
			.otherWorks dd { margin: 0 0.5em 1em; }
			.otherWorks a { padding: 0.25em 0.5em; color: #303030; border-bottom: 1px #303030 dashed; }
			.otherWorks a.noLink { color: #ff8a02; border-bottom: 1px #ff8a02 dashed; }
			.otherWorks a:not(.noLink):hover { color: #ad0004; border-bottom: 1px #ad0004 dashed; }
			/* Image */
				.gallery { margin: 1.5em auto; }
				ul.view { margin: 2em auto 0; padding: 0; }
				ul.view li { width: 100%; margin: 0 auto 1em; list-style: none; }
				ul.view li img { margin: 0 auto; display: block; }
				ul.view li p { margin: 0; line-height: 2em; background: #fff; }
				ul.view li.rowImgModal { overflow: hidden; position: relative; }
				.btnCloseModal { margin: 0 auto; padding: 0 0.5em; color: #fff; font-size: 2em; line-height: 1.75em; display: inline-block; cursor: pointer; }
				.btnCloseModal span { margin-right: 0.5em; font-size: 0.75em; font-weight: bold; }
				.btnCloseModal:hover { color: #ff8a02; -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; }
				.contentBox.modalBox { text-align: center; }

			/* Icon */
				/* Common */
					.toolBox { margin: 0 auto; padding: 1em 0 0; border-top: 2px #777 solid; }
					.toolBox div { width: 4.5em; margin: 0 0.25em 0.5em; padding: 0.5em 0 0; border-radius: 0.25em; background: #fff; }
					.toolIcon:before,
					.toolIcon:after { text-align: center; display: block; }
					.toolIcon:before { font-family: "icomoon"; font-size: 2em; line-height: initial; }
					.toolIcon:after { color: #777; font-size: 0.75em; font-weight: 400; line-height: 2em; }
				/* OS */
					/* Android */
						.toolIcon.android:before { color: #a7c93c; content:"\eac0"; }
						.toolIcon.android:after { content:"Android"; }
					/* PC */
						.toolIcon.deskTop:before { color: #999; content:"\e956"; }
						.toolIcon.deskTop:after { content:"PC"; }
					/* SP */
						.toolIcon.mobile:before { color: #999; content:"\e958"; }
						.toolIcon.mobile:after { content:"SP"; }

				/* Browser */
					/* IE */
						.toolIcon.ie:before { color: #1ebbee; content:"\eadb"; }
						.toolIcon.ie:after { content:"IE"; }
					/* Edge */
						.toolIcon.edge:before { color: #0078d7; content:"\eadc"; }
						.toolIcon.edge:after { content:"Edge"; }
					/* Safari */
						.toolIcon.safari:before { color: #29aae2; content:"\eadd"; }
						.toolIcon.safari:after { content:"Safari"; }
					/* Chrome */
						.toolIcon.chrome:before { color: #64b54c; content:"\ead9"; }
						.toolIcon.chrome:after { content:"Chrome"; }
					/* Firefox */
						.toolIcon.firefox:before { color: #e57a18; content:"\eada"; }
						.toolIcon.firefox:after { content:"Firefox"; }
					/* Opera */
						.toolIcon.opera:before { color: #fd1a2c; content:"\eade"; }
						.toolIcon.opera:after { content:"Opera"; }

	/* Footer */
		#footer { width: 100%; margin: 4em 0 0; padding: 2em 0; color: #fff; text-align: center; position: absolute; }
		.icons { margin: 0; padding: 0; }
		.icons a span { margin: 0 0.25em; }
		.icons a span:hover { -moz-transition: color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; }
		.icons a .icon-twitter:hover { color: #55acee !important; }
		.icons a .icon-book:hover { color: #2b8c3b !important; }
		.icons a .icon-facebook:hover { color: #315096 !important; }
		.copyright { margin: 2em auto 0; padding: 0; line-height: 1.5em; }

	/* jQuery */
		/* Scroll */
			.scrollTrigger { transition: transform 1.0s ease, opacity 1.0s ease; transform: translate(0,0); opacity: 1.0; }
			.invisible { transition: opacity 0.5s ease; opacity: 0.0; }
			.visible { transition: opacity 0.5s ease; opacity: 1.0; }
		/* Slider */
			.flexslider { margin: 2em auto 4em; border: 3px #fff solid; border-radius: 0; }