@charset "UTF-8";

/*---------------------------------------------
	Browser Default Initialization
  ---------------------------------------------*/

html {
	height: 100%;
	overflow-y: scroll;
}

body, div, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td,
section, nav, article, aside, header, address,
figure, figcaption {
	margin: 0;
	padding: 0;
	line-height: 180%;
}

address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}

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

caption, th {text-align: left;}

q:before, q:after {content: '';}

object, embed {vertical-align: top;}

legend {display: none;}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

img, abbr, acronym, fieldset {border: 0;}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
	-ms-interpolation-mode: bicubic;
}

ul li {list-style-type: none;}

*,
*:before,
*:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}


/* ------ Font ------ */

@font-face {
	font-family: "MyYuGothicM";
	src: local("YuGothic-Medium"),
 	     local("YuGothic-Regular");
}

@font-face {
	font-family: "MyYuGothicM";
	font-weight: bold;
	src: local("YuGothic-Bold");
}

@font-face {
	font-family: 'Noto Sans Japanese';
	src:url('/common/fonts/NotoSansJP-Light-sub.eot');
	src:url('/common/fonts/NotoSansJP-Light-sub.eot?#iefix') format('embedded-opentype'),
		url('/common/fonts/NotoSansJP-Light-sub.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src:url('/common/fonts/OpenSans-Light.eot');
	src:url('/common/fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
		url('/common/fonts/OpenSans-Light.woff') format('woff'),
		url('/common/fonts/OpenSans-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}


/* ------ Body ------ */

body {
	height: 100%;
	font-family: -apple-system, BlinkMacSystemFont, MyYuGothicM, "Yu Gothic", Meiryo, "Hiragino kaku Gothic ProN", sans-serif;
	color: #707070;
	line-height: 160%;
	text-align: left;
	background-color: #111213;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.chrome.win10 body {font-weight: 500;}


/* ------ Anchor ------ */

a {outline: none;}
a:link,
a:visited,
.sp a:hover,
.sp a:active {
	text-decoration: none;
	color: #0090d4;
}
.pc a:hover,
.pc a:active {
	text-decoration: underline;
	color: #1ab6ff;
}



/*---------------------------------------------
   for all
  ---------------------------------------------*/

/* ------ General Settings ------ */

.row {overflow: hidden;}

.col {float: left;}

.half {width: 50%;}
.oneThird {width: 33.33333333%;}
.twoThird {width: 66.66666666%;}
.quarter {width: 25%;}
.threeQuarters {width: 75%;}

.half.gutter:first-of-type {padding-right: 10px;}
.half.gutter:last-of-type {padding-left: 10px;}

.oneThird.gutter:first-of-type {padding-right: 13.33333333px;}
.oneThird.gutter:nth-of-type(2) {
	padding-left: 6.66666666px;
	padding-right: 6.66666666px;
}
.oneThird.gutter:last-of-type {padding-left: 13.33333333px;}

.img {text-align: center;}

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

.showNarrow,
.showTablet,
.showFablet,
.showSP,
.showJsOn {display: none;}

.js .showJsOn {display: block;}
.js br.showJsOn {display: inline;}

.img img {width: 100%;}

strong {
	color: #000;
	font-weight: bold;
}

em {color: #d7277a;}

.large {font-size: 100% !important;}
.small {font-size: 76% !important;}
ul .large,
ol .large,
dl .large,
td .large {font-size: 110% !important;}
ul .small,
ol .small,
dl .small,
td .small {font-size: 83% !important;}

#container {
	position: relative;
	width: 100%;
	height: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 40px 0 120px;
}


/* ------ Tag Line ------ */

#tagline {
	position: absolute;
	z-index: 1;
	height: 40px;
	right: 40px;
	padding: 12px 0 0;
	font-size: 60%;
	color: #fff;
	text-align: right;
}


/* ------ Header ------ */

header {
	position: fixed;
	z-index: 3;
	top: 40px;
	background-color: #0090d4;
}

#logo {width: 190px;}

#logo a {
	position :relative;
	display: block;
	height: 190px;
	padding: 50px 0 0 22px;
	overflow: hidden;
	transition: box-shadow 0.3s linear;
}
#logo a:link,
#logo a:visited,
.sp #logo a:hover,
.sp #logo a:active {color: #fff;}
.pc #logo a:hover,
.pc #logo a:active {
	color: #fff;
	text-decoration: none;
	box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
}
.pc #logo a:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #10a7ee;
	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out;
	-webkit-transition: left 0.2s ease-in-out;
	-o-transition: left 0.2s ease-in-out;
	-ms-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
.pc #logo a:hover:before {left: 140%;}

#logo p {
	position :relative;
	margin: 0 0 23px;
}
/*
#logo ul {position :relative;}

#logo li {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 83%;
	font-weight: bold;
	line-height: 130%;
}
#logo li:after {
	content: "X";
	padding: 0 0 0 3px;
	color: #a3daf3;
	font-family: 'Noto Sans Japanese';
	font-weight: normal;
}
#logo li:last-of-type:after {display: none;}

#logo span {
	padding: 0 3px 0 0;
	font-weight: normal;
}
*/

/* ------ Global Navigation ------ */

@media screen and (min-width: 980px) {

#spGnavBtn,
#spGnavCover {display: none;}

#gnav {
	position: fixed;
	z-index: 1000;
	height: 100%;
	top: 0;
	margin: 0 0 0 -120px;

	-moz-perspective: 1000px;
	-webkit-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
/*
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
*/
}

#gnav:after {
	content: "";
	position: fixed;
	z-index: 1001;
	width: 80px;
	height: 100%;
	top: 0;
	margin: 0 0 0 -80px;
	background-color: #111;
}

#gnav nav {
	position: relative;
	width: 80px;
	height: 100%;
	background-color: #111;

	-moz-transform: rotateY(95deg);
	-webkit-transform: rotateY(95deg);
	-o-transform: rotateY(95deg);
	-ms-transform: rotateY(95deg);
	transform: rotateY(95deg);

	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.opening #gnav nav {
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);

	-moz-transition: -moz-transform 0.3s ease-in-out;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-o-transition: -o-transform 0.3s ease-in-out;
	-ms-transition: -ms-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}

#mainNav,
#subNav {
	position :absolute;
	height: 100%;
	top: 0;
	left: 0;
}

#mainNav .spLocalNavBtn {display: none;}

#mainNav > li > a {
	position: absolute;
	display: block;
	width: 80px;
	height: 70px;
	padding: 40px 0 0;
	font-size: 67%;
/*	font-family: 'Noto Sans Japanese';*/
	text-align: center;
	overflow: hidden;

	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
#mainNav > li:nth-of-type(1) > a {top: 0;}
#mainNav > li:nth-of-type(2) > a {top: 70px;}
#mainNav > li:nth-of-type(3) > a {top: 140px;}
#mainNav > li:nth-of-type(4) > a {top: 210px;}
#mainNav > li:nth-of-type(5) > a {top: 280px;}
#mainNav > li:nth-of-type(6) > a {top: 350px;}
#mainNav > li:last-of-type > a {bottom: 0;}

#mainNav > li > a:link,
#mainNav > li > a:visited,
.sp #mainNav > li > a:hover,
.sp #mainNav > li > a:active {color: #bbb;}
.pc #mainNav > li > a:hover,
.pc #mainNav > li > a:active,
.pc #mainNav > li:hover > a {
	color: #fff;
	text-decoration: none;
}

#mainNav #gnavContact > a {background-color: #dd3ca2;}
#mainNav #gnavContact > a:link,
#mainNav #gnavContact > a:visited,
.sp #mainNav #gnavContact > a:hover,
.sp #mainNav #gnavContact > a:active {color: #f8d8ec;}
.pc #mainNav #gnavContact > a:hover,
.pc #mainNav #gnavContact > a:active,
#mainNav #gnavContact.current > a {color: #fff !important;}

#mainNav > li > a:after {
	content: "";
	position :absolute;
	width: 40px;
	height: 40px;
	top: 5px;
	left: 20px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	-moz-background-size: 420px 1040px;
	-webkit-background-size: 420px 1040px;
	-o-background-size: 420px 1040px;
	-ms-background-size: 420px 1040px;
	background-size: 420px 1040px;

	-moz-transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
#gnavService > a:after {background-position: -40px 0;}
#gnavPortfolio > a:after {background-position: -80px 0;}
#gnavCompany > a:after {background-position: -120px 0;}
#gnavRecruit > a:after {background-position: -160px 0;}
#gnavColumn > a:after {background-position: -200px 0;}
#gnavContact > a:after {background-position: -240px 0;}

#mainNav > li > a:link:after,
#mainNav > li > a:visited:after,
.sp #mainNav > li > a:hover:after,
.sp #mainNav > li > a:active:after {opacity: .7;}
.pc #mainNav > li > a:hover:after,
.pc #mainNav > li > a:active:after,
.pc #mainNav > li:hover > a:after,
#mainNav > li.current > a:after,
#mainNav > li.parent > a:after {opacity: 1;}
#mainNav #gnavContact > a:link:after,
#mainNav #gnavContact > a:visited:after,
.sp #mainNav #gnavContact > a:hover:after,
.sp #mainNav #gnavContact > a:active:after {opacity: .8;}
.pc #mainNav #gnavContact > a:hover:after,
.pc #mainNav #gnavContact > a:active:after,
#mainNav #gnavContact.current > a:after {opacity: 1;}

#mainNav > li > a > span {position: relative;}

#mainNav > li > a:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #0090d4;
	opacity: 0.3;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-webkit-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-o-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-ms-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	transition: left 0.2s ease-in-out, opacity 0.2s linear;
}
.pc #mainNav > li > a:hover:before,
#mainNav > li.current > a:before {
	left: 140%;
	opacity: 1;
}
#mainNav > li:hover > a:link,
#mainNav > li:hover > a:visited,
.sp #mainNav > li:hover > a:hover,
.sp #mainNav > li:hover > a:active {background-color: #252829;}
.pc #mainNav > li:hover > a:hover,
.pc #mainNav > li:hover > a:active {background-color: #111213;}

#mainNav > li.current > a,
#mainNav > li.parent > a {color: #fff;}

#mainNav #gnavContact > a:before {background-color: #f95dc0;}


/* ------ Sub Menu ------ */

#mainNav > li {
	position: absolute;
	z-index: 1;
	height: 100%;
	top: 0;
	left: 0;

	-moz-perspective: 1000px;
	-webkit-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
/*
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
*/
}
html.chrome #mainNav > li {transform-style: preserve-3d;}

#mainNav > li.hover {z-index: 2;}

#mainNav > li > ul {
	position: absolute;
	display: none\9;
	width: 240px;
	height: 100%;
	top: 0;
	left: 80px;
	background-color: #252829;

	-moz-transform: rotateY(95deg);
	-webkit-transform: rotateY(95deg);
	-o-transform: rotateY(95deg);
	-ms-transform: rotateY(95deg);
	transform: rotateY(95deg);

	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-moz-transition: -moz-transform 0.3s ease-in-out;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-o-transition: -o-transform 0.3s ease-in-out;
	-ms-transition: -ms-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}
#mainNav.localNavOpen > li > ul {
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
#mainNav > li.hover > ul > li {display: block;}

#mainNav > li > ul > li {
	position: absolute;
	z-index: 1;
	display: none;
	height: 100%;
	top: 0;

	-moz-perspective: 1000px;
	-webkit-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;

	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#mainNav > li > ul > li.hover {z-index: 2;}

#mainNav > li > ul > li > a {
	position :absolute;
	display: block;
	width: 240px;
	left: 0;
	padding: 0 15px;
	font-size: 76%;
	line-height: 55px;
	overflow: hidden;

	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
#mainNav > li > ul > li > a:link,
#mainNav > li > ul > li > a:visited,
.sp #mainNav > li > ul > li > a:hover,
.sp #mainNav > li > ul > li > a:active {color: #bbb;}
.pc #mainNav > li > ul > li > a:hover,
.pc #mainNav > li > ul > li > a:active,
.pc #mainNav > li > ul > li:hover > a {
	color: #fff;
	text-decoration: none;
}
#mainNav > li > ul > li:nth-of-type(1) > a {top: 0;}
#mainNav > li > ul > li:nth-of-type(2) > a {top: 55px;}
#mainNav > li > ul > li:nth-of-type(3) > a {top: 110px;}
#mainNav > li > ul > li:nth-of-type(4) > a {top: 165px;}
#mainNav > li > ul > li:nth-of-type(5) > a {top: 220px;}
#mainNav > li > ul > li:nth-of-type(6) > a {top: 275px;}
#mainNav > li > ul > li:nth-of-type(7) > a {top: 330px;}
#mainNav > li > ul > li:nth-of-type(8) > a {top: 385px;}
#mainNav > li > ul > li:nth-of-type(9) > a {top: 440px;}
#mainNav > li > ul > li:nth-of-type(10) > a {top: 495px;}

#mainNav > li:hover > ul > li > a > span {position: relative;}

#mainNav > li > ul > li > a:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #0090d4;
	opacity: 0.3;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-webkit-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-o-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-ms-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	transition: left 0.2s ease-in-out, opacity 0.2s linear;
}
.pc #mainNav > li > ul > li > a:hover:before,
#mainNav > li > ul > li.current > a:before {
	left: 140%;
	opacity: 1;
}

#mainNav > li > ul > li:hover > a:link,
#mainNav > li > ul > li:hover > a:visited,
.sp #mainNav > li > ul > li:hover > a:hover,
.sp #mainNav > li > ul > li:hover > a:active {background-color: #333739;}
.pc #mainNav > li > ul > li:hover > a:hover,
.pc #mainNav > li > ul > li:hover > a:active {background-color: #252829;}
#mainNav > li > ul > li.current > a,
#mainNav > li > ul > li.parent > a {color: #fff;}

#mainNav > li > ul > li > ul {
	position: absolute;
	width: 240px;
	height: 100%;
	top: 0;
	left: 240px;
	background-color: #333739;

	-moz-transform: rotateY(95deg);
	-webkit-transform: rotateY(95deg);
	-o-transform: rotateY(95deg);
	-ms-transform: rotateY(95deg);
	transform: rotateY(95deg);

	-moz-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-moz-transition: -moz-transform 0.3s ease-in-out;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-o-transition: -o-transform 0.3s ease-in-out;
	-ms-transition: -ms-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
/*
	-moz-transition: -moz-transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
	-webkit-transition: -webkit-transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
	-o-transition: -o-transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
	-ms-transition: -ms-transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
*/
}

#mainNav > li > .localNavOpen > li > ul {
/*	background-color: #333739;*/

	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

#mainNav > li > ul > li > ul > li {display: none;}
#mainNav > li > ul > li.hover > ul > li {display: block;}

#mainNav > li > ul > li > ul > li > a {
	position :relative;
	display: block;
	width: 240px;
	left: 0;
	padding: 0 15px;
	font-size: 76%;
	line-height: 55px;
	overflow: hidden;

	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
#mainNav > li > ul > li > ul > li > a:link,
#mainNav > li > ul > li > ul > li > a:visited,
.sp #mainNav > li > ul > li > ul > li > a:hover,
.sp #mainNav > li > ul > li > ul > li > a:active {color: #bbb;}
.pc #mainNav > li > ul > li > ul > li > a:hover,
.pc #mainNav > li > ul > li > ul > li > a:active {
	color: #fff;
	text-decoration: none;
}

#mainNav > li:hover > ul > li > ul > li > a > span {position: relative;}

#mainNav > li > ul > li > ul > li > a:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 101%;
	top: 0;
	left: 10%;
	background-color: #0090d4;
	opacity: 0.3;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-webkit-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-o-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-ms-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	transition: left 0.2s ease-in-out, opacity 0.2s linear;
}
.pc #mainNav > li > ul > li > ul > li > a:hover:before,
#mainNav > li > ul > li > ul > li.current > a:before {
	left: 140%;
	opacity: 1;
}

#mainNav > li > ul > li > ul > li.current > a,
#mainNav > li > ul > li > ul > li.parent > a {color: #fff;}


/* ------ Sub Navigation ------ */

#subNav a {
	position: absolute;
	display: block;
	width: 36px;
	height: 36px;
	left: 22px;
	text-align: center;
	overflow: hidden;
	border: solid 2px rgba(255, 255, 255, .4);
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;

	-moz-transition: color 0.2s linear, background-color 0.2s, linear;
	-webkit-transition: color 0.2s linear, background-color 0.2s, linear;
	-o-transition: color 0.2s linear, background-color 0.2s, linear;
	-ms-transition: color 0.2s linear, background-color 0.2s, linear;
	transition: color 0.2s linear, background-color 0.2s, linear;
}
#subNavNews a {bottom: 142px;}
#subNavNews a:before {
	content: "NEWS";
	font-family: Open Sans, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 32px;
}
#subNavEnglish a {bottom: 90px;}
#subNavEnglish a:before {
	content: "EN";
	font-family: Open Sans, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 32px;
}
#subNav a:link,
#subNav a:visited,
.sp #subNav a:hover,
.sp #subNav a:active {color: #bbb;}
.pc #subNav a:hover,
.pc #subNav a:active {
	color: #111213;
	text-decoration: none;
	background-color: #fff;
}

#subNav a span {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}


}


/* ------ Background Image ------ */

#bgImg,
#bgImgDummy,
#pageTitle {
	position: fixed;
	width: 100%;
	max-width: 1600px;
	height: 100%;
	top: 0;
	margin: 0 0 0 -120px;
	overflow: hidden;
}
#pageTitle {padding: 0 0 0 80px;}

#bgImg .img,
#bgImgDummy .img {
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
}
.fadeOut #bgImgDummy .img {
	opacity: 0;
	-moz-transition: opacity 0.3s linear 0.3s;
	-webkit-transition: opacity 0.3s linear 0.3s;
	-o-transition: opacity 0.3s linear 0.3s;
	-ms-transition: opacity 0.3s linear 0.3s;
	transition: opacity 0.3s linear 0.3s;
}


/* ------ Page Title ------ */

#pageTitle {z-index: 2;}

#pageTitle > div {
	position: relative;
	height: 100%;
	padding: 0 40px;
}

#pageTitle > div:before {
	content: "";
	float: right;
	display: block;
	width: 60%;
	max-width: 800px;
	margin: 0 0 0 40px;
	height: 100%;
}

#loader {
	position: absolute;
	width: 100%;
	top: 45%;
	left: -30px;
	padding: 0 40px;
	text-align: center;
	opacity: 0;
}
#loader:before {
	content: "";
	float: right;
	display: block;
	width: 60%;
	max-width: 800px;
	height: 80px;
	margin: 0 0 0 40px;
}
html.next #loader,
html.prev #loader {
	opacity: 1;

	-moz-transform: translate3d(30px, 0, 0);
	-webkit-transform: translate3d(30px, 0, 0);
	-o-transform: translate3d(30px, 0, 0);
	-ms-transform: translate3d(30px, 0, 0);
	transform: translate3d(30px, 0, 0);

	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out, opacity 0.3s ease-out;
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
/*
	-moz-transition: opacity 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	-ms-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
*/
}
html.next.fadeOut #loader,
html.prev.fadeOut #loader {
	opacity: 0;

	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

	-moz-transition: -moz-transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
	-webkit-transition: -webkit-transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
	-o-transition: -o-transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
	-ms-transition: -ms-transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
	transition: transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
}

#loader span {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;

	-moz-perspective: 500px;
	-webkit-perspective: 500px;
	-o-perspective: 500px;
	-ms-perspective: 500px;
	perspective: 500px;

	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

}
#loader span:before,
#loader span:after {
	content: "";
	position: absolute;
	display: block;
	width: 60px;
	height: 60px;
	top: 10px;
	left: 10px;
	background-image: url(../images/logo.svgz);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 44px 9px;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}
#loader span:before {
	-moz-transform-origin: right top;
	-webkit-transform-origin: right top;
	-o-transform-origin: right top;
	-ms-transform-origin: right top;
	transform-origin: right top;

	-moz-animation: loader1 0.3s linear infinite normal;
	-webkit-animation: loader1 0.3s linear infinite normal;
	-o-animation: loader1 0.3s linear infinite normal;
	-ms-animation: loader1 0.3s linear infinite normal;
	animation: loader1 0.3s linear infinite normal;
}
@-moz-keyframes loader1 {
	0% {background-color: #007bb5; -moz-transform: translate3d(-60px, 0, 0) rotateY(-90deg);}
	100% {background-color: #0090d4; -moz-transform: translate3d(0, 0, 0) rotateY(0deg);}
}
@-webkit-keyframes loader1 {
	0% {background-color: #007bb5; -webkit-transform: translate3d(-60px, 0, 0) rotateY(-90deg);}
	100% {background-color: #0090d4; -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);}
}
@-o-keyframes loader1 {
	0% {background-color: #007bb5; -o-transform: translate3d(-60px, 0, 0) rotateY(-90deg);}
	100% {background-color: #0090d4; -o-transform: translate3d(0, 0, 0) rotateY(0deg);}
}
@-ms-keyframes loader1 {
	0% {background-color: #007bb5; -ms-transform: translate3d(-60px, 0, 0) rotateY(-90deg);}
	100% {background-color: #0090d4; -ms-transform: translate3d(0, 0, 0) rotateY(0deg);}
}
@keyframes loader1 {
	0% {background-color: #007bb5; transform: translate3d(-60px, 0, 0) rotateY(-90deg);}
	100% {background-color: #0090d4; transform: translate3d(0, 0, 0) rotateY(0deg);}
}
#loader span:after {
	-moz-transform-origin: left top;
	-webkit-transform-origin: left top;
	-o-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;

	-moz-animation: loader2 0.3s linear infinite normal;
	-webkit-animation: loader2 0.3s linear infinite normal;
	-o-animation: loader2 0.3s linear infinite normal;
	-ms-animation: loader2 0.3s linear infinite normal;
	animation: loader2 0.3s linear infinite normal;
}
@-moz-keyframes loader2 {
	0% {background-color: #0090d4; -moz-transform: translate3d(0, 0, 0) rotateY(0deg);}
	100% {background-color: #10a7ee; -moz-transform: translate3d(60px, 0, 0) rotateY(90deg);}
}
@-webkit-keyframes loader2 {
	0% {background-color: #0090d4; -webkit-transform: translate3d(0, 0, 0) rotateY(0deg);}
	100% {background-color: #10a7ee; -webkit-transform: translate3d(60px, 0, 0) rotateY(90deg);}
}
@-o-keyframes loader2 {
	0% {background-color: #0090d4; -o-transform: translate3d(0, 0, 0) rotateY(0deg);}
	100% {background-color: #10a7ee; -o-transform: translate3d(60px, 0, 0) rotateY(90deg);}
}
@-ms-keyframes loader2 {
	0% {background-color: #0090d4; -ms-transform: translate3d(0, 0, 0) rotateY(0deg);}
	100% {background-color: #10a7ee; -ms-transform: translate3d(60px, 0, 0) rotateY(90deg);}
}
@keyframes loader2 {
	0% {background-color: #0090d4; transform: translate3d(0, 0, 0) rotateY(0deg);}
	100% {background-color: #10a7ee; transform: translate3d(60px, 0, 0) rotateY(90deg);}
}

#pageTitle .textArea {
	position: relative;
	top: 42%;
	left: 0;
	color: #fff;
	text-align: left;
	opacity: 1;
}
html.next #pageTitle .textArea,
html.prev #pageTitle .textArea {
	opacity: 0;

	-moz-transform: translate3d(30px, 0, 0);
	-webkit-transform: translate3d(30px, 0, 0);
	-o-transform: translate3d(30px, 0, 0);
	-ms-transform: translate3d(30px, 0, 0);
	transform: translate3d(30px, 0, 0);

	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out, opacity 0.3s ease-out;
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
/*
	-moz-transition: opacity 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	-ms-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
*/
}
html.next.fadeOut #pageTitle .textArea,
html.prev.fadeOut #pageTitle .textArea {
	opacity: 1;

	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

	-moz-transition: -moz-transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
	-webkit-transition: -webkit-transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
	-o-transition: -o-transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
	-ms-transition: -ms-transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
	transition: transform 0.3s ease-out 0.2s, opacity 0.3s ease-out 0.2s;
}

#pageTitle .text {margin: 0 0 20px;}

#pageTitle h1,
#pageTitle .copy {
	margin: 0 0 15px;
	line-height: 140%;
	font-size: 180%;
}

#pageTitle .copy strong {
	font-weight: normal;
	color: #fff;
}

#pageTitle .list {margin: 0 0 25px;}

#pageTitle .list:before {
	content: "";
	display: block;
	width: 50px;
	height: 2px;
	margin: 0 0 20px;
	background-color: #fff;
	opacity: .4;
}

#pageTitle .list li {
	position: relative;
	font-size: 90%;
	margin: 0 0 5px;
	overflow: hidden;
	letter-spacing: .05em;
}

#pageTitle .list li q {
	position: relative;
	float: left;
	display: block;
	padding: 0 20px;
	font-style: italic;
}
#pageTitle .list li q:before,
#pageTitle .list li q:after {
	position: absolute;
	display: block;
	width: 15px;
	height: 15px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	-moz-background-size: 420px 1040px;
	-webkit-background-size: 420px 1040px;
	-o-background-size: 420px 1040px;
	-ms-background-size: 420px 1040px;
	background-size: 420px 1040px;
	opacity: .4;
}
#pageTitle .list li q:before {
	content: '';
	top: 0;
	left: 0;
	background-position: -320px 0;
}
#pageTitle .list li q:after {
	content: '';
	bottom: 0;
	right: 0;
	background-position: -320px -15px;
}
/*
#pageTitle .btn {
	position: relative;
	display: inline-block;
	font-size: 90%;
}

.pc #pageTitle .btn:before {
	content: "";
	position: absolute;
	display: block;
	width: 120%;
	height: 100%;
	top: 0;
	left: 20%;
	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out 0.1s, background-color 0.1s linear 0.1s;
	-webkit-transition: left 0.2s ease-in-out 0.1s, background-color 0.1s linear 0.1s;
	-o-transition: left 0.2s ease-in-out 0.1s, background-color 0.1s linear 0.1s;
	-ms-transition: left 0.2s ease-in-out 0.1s, background-color 0.1s linear 0.1s;
	transition: left 0.2s ease-in-out 0.1s, background-color 0.1s linear 0.1s;
}
.pc #pageTitle .btn:hover:before {
	left: 130%;
	background-color: #fff;
}
*/
#pageTitle .btn a {
	position: relative;
	display: inline-block;
	min-width: 250px;
	font-size: 90%;
	text-align: center;
	overflow: hidden;

	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	-o-border-radius: 30px;
	-ms-border-radius: 30px;
	border-radius: 30px;

	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
#pageTitle .btn a:link,
#pageTitle .btn a:visited,
.sp #pageTitle .btn a:hover,
.sp #pageTitle .btn a:active {color: #fff;}
.pc #pageTitle .btn a:hover,
.pc #pageTitle .btn a:active {
	color: #000;
	text-decoration: none;
}
#pageTitle .btn a:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border: solid 2px #fff;
	opacity: .4;

	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	-o-border-radius: 30px;
	-ms-border-radius: 30px;
	border-radius: 30px;
}
.pc #pageTitle .btn a:before {
	content: "";
	position: absolute;
	display: block;
	width: 120%;
	height: 100%;
	top: 0;
	left: 20%;
	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out, background-color 0.1s linear;
	-webkit-transition: left 0.2s ease-in-out, background-color 0.1s linear;
	-o-transition: left 0.2s ease-in-out, background-color 0.1s linear;
	-ms-transition: left 0.2s ease-in-out, background-color 0.1s linear;
	transition: left 0.2s ease-in-out, background-color 0.1s linear;
}
.pc #pageTitle .btn a:hover:before,
.pc #pageTitle .btn a:active:before {
	left: 130%;
	background-color: #fff;
}

#pageTitle .btnText {
	position: relative;
	display: block;
	padding: 12px 40px 12px 30px;
	transition: color 0.2s linear 0.1s;
}

#pageTitle .btnText:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	margin: -4px 0 0;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);

	-moz-transition: border 0.2s linear, right 0.2s linear;
	-webkit-transition: border 0.2s linear, right 0.2s linear;
	-o-transition: border 0.2s linear, right 0.2s linear;
	-ms-transition: border 0.2s linear, right 0.2s linear;
	transition: border 0.2s linear, right 0.2s linear;
}
#pageTitle .btn a:link .btnText:after,
#pageTitle .btn a:visited .btnText:after,
.sp #pageTitle .btn a:hover .btnText:after,
.sp #pageTitle .btn a:active .btnText:after {
	right: 15px;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
}
.pc #pageTitle .btn a:hover .btnText:after,
.pc #pageTitle .btn a:active .btnText:after {
	right: 12px;
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
}
/*
.pc #pageTitle .btnBorderTop {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 2px;
	top: 0;
	left: 0;
	background-color: #fff;

	-moz-transition: width 0.2s linear;
	-webkit-transition: width 0.2s linear;
	-o-transition: width 0.2s linear;
	-ms-transition: width 0.2s linear;
	transition: width 0.2s linear;
}
.pc #pageTitle .btnBorderRight {
	content: "";
	position: absolute;
	display: block;
	width: 2px;
	height: 0;
	top: 0;
	right: 0;
	background-color: #fff;

	-moz-transition: height 0.2s linear;
	-webkit-transition: height 0.2s linear;
	-o-transition: height 0.2s linear;
	-ms-transition: height 0.2s linear;
	transition: height 0.2s linear;
}
.pc #pageTitle .btnBorderBottom {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 2px;
	bottom: 0;
	right: 0;
	background-color: #fff;

	-moz-transition: width 0.2s linear;
	-webkit-transition: width 0.2s linear;
	-o-transition: width 0.2s linear;
	-ms-transition: width 0.2s linear;
	transition: width 0.2s linear;
}
.pc #pageTitle .btnBorderLeft {
	content: "";
	position: absolute;
	display: block;
	width: 2px;
	height: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;

	-moz-transition: height 0.2s linear;
	-webkit-transition: height 0.2s linear;
	-o-transition: height 0.2s linear;
	-ms-transition: height 0.2s linear;
	transition: height 0.2s linear;
}
.pc #pageTitle .btn a:hover .btnBorderTop,
.pc #pageTitle .btn a:hover .btnBorderBottom {width: 100%;}
.pc #pageTitle .btn a:hover .btnBorderRight,
.pc #pageTitle .btn a:hover .btnBorderLeft {height: 100%;}
*/
#pageTitle .text,
#pageTitle h1,
#pageTitle .copy,
#pageTitle .list li,
#pageTitle .btn {font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;}


/* ------ Bread Crumb ------ */

#breadCrumb {
	overflow: hidden;
	padding: 0 0 20px;
}

#breadCrumb li {
	float: left;
	font-size: 67%;
}

#breadCrumb li:before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 10px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;

	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	opacity: .5;
}
#breadCrumb li:first-of-type:before {display: none;}

#breadCrumb a:link,
#breadCrumb a:visited,
.sp #breadCrumb a:hover,
.sp #breadCrumb a:active {
	color: #fff;
	text-decoration: none;
	opacity: .7;
}
.pc #breadCrumb a:hover,
.pc #breadCrumb a:active {
	color: #fff;
	text-decoration: none;
	opacity: 1;
}

#breadCrumb li:first-of-type a {
	display: block;
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: -9999px;
	background-image: url(/common/images/icon.png);
	background-repeat: no-repeat;
	background-position: right top;

	-moz-background-size: 420px 1040px;
	-webkit-background-size: 420px 1040px;
	-o-background-size: 420px 1040px;
	-ms-background-size: 420px 1040px;
	background-size: 420px 1040px;
}


/* ------ Article ------ */

html.next body,
html.prev body {overflow: hidden;}

#contentsArea {
	position :relative;
	z-index: 4;
	width: 60%;
	max-width: 800px;
	min-height: 100%;
	margin: 0 0 0 auto;
	padding: 40px 0;
}
html.next #contentsArea,
html.prev #contentsArea {
	height: 100%;

	-moz-perspective: 3000px;
	-webkit-perspective: 3000px;
	-o-perspective: 3000px;
	-ms-perspective: 3000px;
	perspective: 3000px;

	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

#contents {
	position :relative;
	z-index: 8;
	background-color: #fff;
}
#contents.portfolio {background-color: transparent;}

html.next #contents {
	width: 50%;
	top: 0;
	left: 0;
	overflow: hidden;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-moz-transform-origin: right top;
	-webkit-transform-origin: right top;
	-o-transform-origin: right top;
	-ms-transform-origin: right top;
	transform-origin: right top;

	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

html.next #contents > .inner {
	position: relative;
	width: 200%;
	top: 0;
	left: 0;
}

html.prev #contents {
	width: 50%;
	top: 0;
	left: 50%;
	overflow: hidden;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-moz-transform-origin: left top;
	-webkit-transform-origin: left top;
	-o-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;

	-moz-transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

html.prev #contents > .inner {
	position: relative;
	width: 200%;
	top: 0;
	left: -100%;
}

html.fadeOut #contents {
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);

	-moz-transition: -moz-transform .6s ease-in-out;
	-webkit-transition: -webkit-transform .6s ease-in-out;
	-o-transition: -o-transform .6s ease-in-out;
	-ms-transition: -ms-transform .6s ease-in-out;
	transition: transform .6s ease-in-out;
}

#contentsDummy1 {
	position :absolute;
	z-index: 6;
	top: 40px;
	overflow: hidden;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-moz-transition: -moz-transform .6s ease-in-out;
	-webkit-transition: -webkit-transform .6s ease-in-out;
	-o-transition: -o-transform .6s ease-in-out;
	-ms-transition: -ms-transform .6s ease-in-out;
	transition: transform .6s ease-in-out;
}

html.next #contentsDummy1 {
	width: 50%;
	left: 50%;

	-moz-transform-origin: left top;
	-webkit-transform-origin: left top;
	-o-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}
html.next #contentsDummy1 > .inner {
	position: relative;
	width: 200%;
	top: 0;
	left: -100%;
}

html.next.fadeOut #contentsDummy1 {
	-moz-transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

html.prev #contentsDummy1 {
	width: 50%;
	left: 0;

	-moz-transform-origin: right top;
	-webkit-transform-origin: right top;
	-o-transform-origin: right top;
	-ms-transform-origin: right top;
	transform-origin: right top;
}
html.chrome.prev #contentsDummy1 {
	width: 100%;
	transform-origin: center top;
}

html.prev #contentsDummy1 > .inner {
	position: relative;
	width: 200%;
	top: 0;
	left: 0;
}
html.chrome.prev #contentsDummy1 > .inner {
	position: static;
	width: 100%;
}

html.prev.fadeOut #contentsDummy1 {
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
html.chrome.prev.fadeOut #contentsDummy1 {transition: transform .3s ease-in;}

#contentsDummy2 {
	position: absolute;
	z-index: 7;
	width: 100%;
	height: 100%;
	top: 40px;
/*	background-color: #fff;*/
	overflow: hidden;
}
html.fadeOut #contentsDummy2 {width: 50%;}
html.next.fadeOut #contentsDummy2 {left: 0;}
html.prev.fadeOut #contentsDummy2 {right: 0;}

html.fadeOut #contentsDummy2 > .inner {
	position: relative;
	width: 200%;
	top: 0;
}
html.next.fadeOut #contentsDummy2 > .inner {left: 0;}
html.prev.fadeOut #contentsDummy2 > .inner {left: -100%;}

#contentsDummy3 {
	position: absolute;
	z-index: 5;
	width: 50%;
	height: 100%;
	top: 40px;
/*	background-color: #fff;*/
	overflow: hidden;
}
html.next #contentsDummy3 {right: 0;}
html.prev #contentsDummy3 {left: 0;}

#contentsDummy3 > .inner {
	position: relative;
	width: 200%;
	top: 0;
}
html.next.fadeOut #contentsDummy3 > .inner {left: -100%;}
html.prev.fadeOut #contentsDummy3 > .inner {left: 0;}

html.next footer,
html.prev footer {display: none;}

#cover {
	position: fixed;
	z-index: 10000;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
html.fadeIn #cover,
html.fadeOut #cover {display: block;}

html.fadeOut #contentsArea {height: 100%;}

html.fadeOut #contents,
html.fadeOut #contentsDummy1,
html.fadeOut #contentsDummy2,
html.fadeOut #contentsDummy3 {
	height: 100%;
	padding: 0 0 40px;
	background-color: #fff;

	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-o-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
}



/* ------ Contents ------ */

.contentsBox {
	padding: 40px 8% 20px;
	background-color: #fff;
}
.contentsBox.gray {background-color: #f1f5f8;}
.contentsBox.black {background-color: #333739;}
.contentsBox.blue {background-color: #588fe3;}
.contentsBox.skyBlue {background-color: #3aaade;}
.contentsBox.lightBlue {background-color: #27c0dc;}
.contentsBox.blueGreen {background-color: #02aa9f;}
.contentsBox.green {background-color: #219e62;}

.contentsBox:after {
	content: "";
	display: block;
	clear: both;
}

.contentsBox > h1,
.contentsBox > h2,
.listBox2 > h2,
.listBox4 > h2,
.listBox5 > h2,
#privacy h3 {
	padding: 40px 0;
	font-size: 150%;
	line-height: 140%;
	color: #000;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	text-align: center;
}
.contentsBox > h1 .sub,
.contentsBox > h2 .sub,
.listBox4 > h2 .sub {
	display: block;
	font-size: 60%;
	line-height: 140%;
	color: #999;
}
.contentsBox > h1,
.contentsBox > h2:first-of-type {padding: 0 0 40px;}

.contentsBox > h1 .sub {padding: 10px 0 0;}

.contentsBox > h3 {
	padding: 10px 0;
	font-weight: bold;
	color: #000;
}
.contentsBox > h2 + h3 {padding: 0 0 10px;}

.contentsBox p {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 0 20px;
	font-size: 90%;
}

.contentsBox.black > h2,
.contentsBox.blue > h2,
.contentsBox.skyBlue > h2,
.contentsBox.lightBlue > h2,
.contentsBox.blueGreen > h2,
.contentsBox.green > h2,
.contentsBox.black > h2 .sub,
.contentsBox.blue > h2 .sub,
.contentsBox.skyBlue > h2 .sub,
.contentsBox.lightBlue > h2 .sub,
.contentsBox.blueGreen > h2 .sub,
.contentsBox.green > h2 .sub,
.contentsBox.black > h3,
.contentsBox.blue > h3,
.contentsBox.skyBlue > h3,
.contentsBox.lightBlue > h3,
.contentsBox.blueGreen > h3,
.contentsBox.green > h2,
.contentsBox.black p,
.contentsBox.blue p,
.contentsBox.skyBlue p,
.contentsBox.lightBlue p,
.contentsBox.blueGreen p,
.contentsBox.green p,
.contentsBox.black li,
.contentsBox.blue li,
.contentsBox.skyBlue li,
.contentsBox.lightBlue li,
.contentsBox.blueGreen li,
.contentsBox.green li,
.contentsBox.black dt,
.contentsBox.blue dt,
.contentsBox.skyBlue dt,
.contentsBox.lightBlue dt,
.contentsBox.blueGreen dt,
.contentsBox.green dt,
.contentsBox.black dd,
.contentsBox.blue dd,
.contentsBox.skyBlue dd,
.contentsBox.lightBlue dd,
.contentsBox.blueGreen dd,
.contentsBox.green dd,
.contentsBox.black em,
.contentsBox.blue em,
.contentsBox.skyBlue em,
.contentsBox.lightBlue em,
.contentsBox.blueGreen em,
.contentsBox.green em {color: #fff;}


/* ------ Main Visual 1 ------ */

.mainvisual1 {
	position: relative;
	padding: 40px 8%;
	text-align: center;
}

.mainvisual1.blue {background-color: #588fe3;}
.mainvisual1.skyBlue {background-color: #3aaade;}
.mainvisual1.lightBlue {background-color: #27c0dc;}

.mainvisual1 .bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: .07;
}

.mainvisual1 .img {
	position: relative;
	display: inline-block;
	width: 150px;
	height: 150px;
	margin: 0 0 20px;
	overflow: hidden;

	-moz-border-radius: 75px;
	-webkit-border-radius: 75px;
	-o-border-radius: 75px;
	-ms-border-radius: 75px;
	border-radius: 75px;
}

.mainvisual1 img {
	position: absolute;
	display: block;
	width: 243px;
	max-width: none;
	height: 150px;
	top: 0;
	left: 50%;
	margin: 0 0 0 -121px;
}

.mainvisual1 h1 {
	position: relative;
	margin: 0 0 20px;
	color: #fff;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 140%;
	text-align: center;
	line-height: 160%;
}

.mainvisual1 .sub {
	margin: 0 15px 0 0;
	color: #fff;
	font-size: 60%;
	line-height: 160%;
	vertical-align: middle;
}

.mainvisual1 .text {
	position: relative;
	color: #fff;
	font-size: 90%;
	text-align: left;
}


/* ------ Main Visual 2 ------ */

.mainvisual2 section {
	float: none;
	width: 100%;
	background-color: #fff;
	overflow: hidden;
}

.mainvisual2 .imgArea {
	float: left;
	position: relative;
	width: 66.666666%;
	background-color: #000;
	overflow: hidden;
}

.mainvisual2 .imgArea .img {
	height: 18.5em;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;
}

.mainvisual2 .textArea {
	float: right;
	position: relative;
	width: 33.333333%;
	height: 18.5em;
	padding: 30px 3.33333333% 0;
	text-align: center;
}

.mainvisual2 h1 {
	position: relative;
	display: table-cell;
	width: 500px;
	height: 45px;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 90%;
	color: #000;
	line-height: 130%;
	vertical-align: middle;
}
.mainvisual2 section h1:before,
.mainvisual2 section h1:after {
	content: "";
	position: absolute;
	display: block;
	width: 100px;
	height: 1px;
	left: 50%;
	margin: 0 0 0 -50px;
	background-color: #000;
}
.mainvisual2 section h1:before {top: 0;}
.mainvisual2 section h1:after {bottom: 0;}

.mainvisual2 .logo {
	padding: 0 0 10px;
	font-size: 76%;
}

.mainvisual2 .text {
	padding: 15px 0 0;
	font-size: 76%;
}


/* ------ Main Visual ------ */

.mainvisual {background-color: #333739;}

.mainvisual .img {
	display: inline-block;
	width: 50%;
	vertical-align: middle;
}

.mainvisual img {width: 100%;}

.mainvisual .text {
	display: inline-block;
	width: 48%;
	padding: 0 5%;
	color: #fff;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 140%;
	text-align: center;
	line-height: 160%;
	vertical-align: middle;
}

.mainvisual .sub {
	display: block;
	color: #aaa;
	font-size: 60%;
	line-height: 160%;
}


/* ------ Definition List ------ */

.contentsBox dl {font-size: 90%;}
.contentsBox li dl,
.contentsBox table dl {
	padding: 0;
	font-size: 100%;
}

.contentsBox dt {
	color: #000;
	font-weight: bold;
}

.contentsBox dd {padding: 0 0 20px;}
.contentsBox table dl:last-child dd:last-child {padding: 0;}

.contentsBox dd + dd {margin-top: -20px;}
.contentsBox .marginSet dd + dd {margin-top: 0;}

.holizontal {
	padding: 0 0 20px;
	overflow: hidden;
}

.holizontal dt {
	clear: both;
	float: left;
	color: #707070;
	font-weight: normal;
}
.holizontal.w3em dt {width: 3em;}
.holizontal.w4em dt {width: 4em;}
.holizontal.w5em dt {width: 5em;}
.holizontal.w6em dt {width: 6em;}
.holizontal.w7em dt {width: 7em;}
.holizontal.w8em dt {width: 8em;}
.holizontal.w9em dt {width: 9em;}
.holizontal.banner dt {width: 160px;}

.holizontal dd {
	padding: 0;
	overflow: hidden;
}
.holizontal dd + dd {margin-top: 0;}
.holizontal dd:last-of-type {padding: 0;}
.holizontal.w3em dd {margin-left: 3em;}
.holizontal.w4em dd {margin-left: 4em;}
.holizontal.w5em dd {margin-left: 5em;}
.holizontal.w6em dd {margin-left: 6em;}
.holizontal.w7em dd {margin-left: 7em;}
.holizontal.w8em dd {margin-left: 8em;}
.holizontal.w9em dd {margin-left: 9em;}
.holizontal.banner dd {margin-left: 160px;}


/* ------ FAQ List ------ */

.faqList dt {
	position: relative;
	margin: 0 0 10px 50px;
}
.faqList dd {
	position: relative;
	margin: 0 0 0 50px;
}

.faqList dt:after,
.faqList dd:after {
	position: absolute;
	display: block;
	width: 38px;
	height: 38px;
	top: -5px;
	left: -50px;
	padding: 3px 0 0;
	font-family: Open Sans, Arial, Helvetica, sans-serif;
	text-align: center;
	background-image: url(/common/images/icon.png);
	background-repeat: no-repeat;
	background-position: -361px -1px;
	background-size: 420px 1040px;
}
.faqList dt:after {
	content: "Q";
	color: #fff;
	background-color: #3aaade;
}
.faqList dd:after {
	content: "A";
	color: #3aaade;
	background-color: #fff;
}
.faqList dd + dd:after {display: none;}


/* ------ List ------ */

.contentsBox ul {
	font-size: 90%;
	padding: 0 0 20px;
}
.contentsBox ul ul,
.contentsBox ol ul,
.contentsBox dd ul,
.contentsBox table ul {font-size: 100%;}

.contentsBox ul.marginSet {padding-bottom: 0;}

.contentsBox ul ul,
.contentsBox ol ul,
.contentsBox dd ul,
.contentsBox table ul {padding: 0;}

.contentsBox ul li {
	position: relative;
	padding: 0 0 0 1.2em;
}
.contentsBox ul li:after {
	content: "";
	position: absolute;
	display: block;
	width: 4px;
	height: 4px;
	top: 0.6em;
	left: 0.3em;
	background-color: #999;

	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-ms-border-radius: 2px;
	border-radius: 2px;
}
.contentsBox.black ul li:after,
.contentsBox.blue ul li:after,
.contentsBox.skyBlue ul li:after,
.contentsBox.lightBlue ul li:after,
.contentsBox.blueGreen ul li:after,
.contentsBox.green ul li:after {background-color: #fff;}

.contentsBox ul.marginSet > li {padding-bottom: 20px;}

.contentsBox .serviceList {
	overflow: hidden;
	padding-bottom: 0;
}

.contentsBox .serviceList li {
	float: left;
	width: 33.33333333%;
	padding-bottom: 10px;
}


/* ------ Number List ------ */

.contentsBox ol {
	margin: 0;
	padding: 0 0 20px 2em;
	font-size: 90%;
}
.contentsBox ul ol,
.contentsBox ol ol,
.contentsBox dd ol,
.contentsBox table ol {font-size: 100%;}

.contentsBox ol.marginSet {padding-bottom: 0;}

.contentsBox ul ol,
.contentsBox ol ol,
.contentsBox dd ol,
.contentsBox table ol {padding-bottom: 0;}

.contentsBox ol.marginSet > li {padding-bottom: 20px;}


/* ------ Figure ------ */

figure {
	padding: 0 0 20px;
	text-align: center;
}

figcaption {
	padding: 0 0 10px;
	font-size: 90%;
	font-weight: bold;
}


/* ------ Horizontal Rule ------ */

.contentsBox hr {
	position: relative;
	margin: 20px 0 40px;
	border: 0 none;
}
.contentsBox hr:after {
	content: "";
/*	position: absolute;*/
	display: block;
	width: 100%;
	height: 1px;
	top: 0;
	left: 0;
	background-color: #eee;
}


/* ------ Note ------ */

.contentsBox p.note,
.contentsBox ul.note > li,
.contentsBox dl dd.note {
	position: relative;
	padding-left: 1.5em;
}
.contentsBox p.note:before,
.contentsBox ul.note > li:before,
.contentsBox dl dd.note:before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}


/* ------ Button ------ */

p.btnLarge{
	display: table-cell;
	width: 980px;
	height: 150px;
	padding: 0 8%;
	text-align: center;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	background-color: #f1f5f8;
	vertical-align: middle;
}

p.btnLarge span {
	position: relative;
	display: block;
	max-width: 240px;
	margin: 0 auto;
	background-color: #dd3ca2;
	overflow: hidden;

	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	-o-border-radius: 30px;
	-ms-border-radius: 30px;
	border-radius: 30px;

	-moz-transition: box-shadow 0.3s linear;
	-webkit-transition: box-shadow 0.3s linear;
	-o-transition: box-shadow 0.3s linear;
	-ms-transition: box-shadow 0.3s linear;
	transition: box-shadow 0.3s linear;
}
.pc p.btnLarge span:hover {
	-moz-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	-webkit-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	-o-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	-ms-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
}
.pc p.btnLarge span:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #f95dc0;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out;
	-webkit-transition: left 0.2s ease-in-out;
	-o-transition: left 0.2s ease-in-out;
	-ms-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
.pc p.btnLarge span:hover:before {left: 140%;}

p.btnLarge a {
	position: relative;
	display: block;
	padding: 15px 20px;
}
p.btnLarge a:link,
p.btnLarge a:visited,
.sp p.btnLarge a:hover,
.sp p.btnLarge a:active {color: #fff;}
.pc p.btnLarge a:hover,
.pc p.btnLarge a:active {
	color: #fff;
	text-decoration: none;
}
p.btnLarge a:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	margin: -4px 0 0;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);

	-moz-transition: right 0.2s linear;
	-webkit-transition: right 0.2s linear;
	-o-transition: right 0.2s linear;
	-ms-transition: right 0.2s linear;
	transition: right 0.2s linear;
}
p.btnLarge a:link:after,
p.btnLarge a:visited:after,
.sp p.btnLarge a:hover:after,
.sp p.btnLarge a:active:after {right: 13px;}
.pc p.btnLarge a:hover:after,
.pc p.btnLarge a:active:after {right: 10px;}

.contentsBox .btnSubmit {text-align: center;}

.contentsBox .btnSubmit li {
	display: inline-block;
	min-width: 190px;
	margin: 0 0 20px;
	padding: 0;
	background-color: #dd3ca2;
	overflow: hidden;
	cursor: pointer;

	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	-o-border-radius: 30px;
	-ms-border-radius: 30px;
	border-radius: 30px;

	-moz-transition: box-shadow 0.3s linear;
	-webkit-transition: box-shadow 0.3s linear;
	-o-transition: box-shadow 0.3s linear;
	-ms-transition: box-shadow 0.3s linear;
	transition: box-shadow 0.3s linear;
}
.contentsBox .btnSubmit li + li {margin-left: 20px;}
.contentsBox .btnSubmit li.nolink {background-color: #bfc3c6;}

.pc .contentsBox .btnSubmit li:not(.nolink):hover {
	-moz-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	-webkit-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	-o-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	-ms-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
}

.pc .contentsBox .btnSubmit li:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #f95dc0;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out;
	-webkit-transition: left 0.2s ease-in-out;
	-o-transition: left 0.2s ease-in-out;
	-ms-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
.pc .contentsBox .btnSubmit li:not(.nolink):hover:before {left: 140%;}

.contentsBox .btnSubmit .submit:after {
	content: "";
	position: absolute;
	z-index: 2;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	left: auto;
	right: 13px;
	margin: -4px 0 0;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	background-color: transparent;

	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);

	-moz-transition: right 0.2s linear;
	-webkit-transition: right 0.2s linear;
	-o-transition: right 0.2s linear;
	-ms-transition: right 0.2s linear;
	transition: right 0.2s linear;
}
.pc .contentsBox .btnSubmit .submit:not(.nolink):hover:after {right: 11px;}

.contentsBox .btnSubmit .back:after,
.contentsBox .btnSubmit .top:after {
	content: "";
	position: absolute;
	z-index: 2;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	left: 13px;
	margin: -4px 0 0;
	border-left: solid 1px #fff;
	border-bottom: solid 1px #fff;
	background-color: transparent;

	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

	-moz-transition: left 0.2s linear;
	-webkit-transition: left 0.2s linear;
	-o-transition: left 0.2s linear;
	-ms-transition: left 0.2s linear;
	transition: left 0.2s linear;
}
.pc .contentsBox .btnSubmit .back:hover:after,
.pc .contentsBox .btnSubmit .top:hover:after {left: 11px;}

.contentsBox .btnSubmit a,
.contentsBox .btnSubmit input {
	position: relative;
	display: block;
	min-width: 190px;
	padding: 15px;
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 100%;
	color: #fff;
	text-align: center;
	line-height: 130%;
	border: 0 none;
	background-color: transparent;
}
.pc .contentsBox .btnSubmit li:not(.nolink) input {cursor: pointer;}
.contentsBox .btnSubmit a:hover,
.contentsBox .btnSubmit a:active {text-decoration: none;}

.contentsBox #btnPrivacy {
	position: relative;
	padding: 0;
	max-width: none;
	background-color: #bfc3c6;
	overflow: hidden;
}
.pc .contentsBox #btnPrivacy:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #caced1;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out;
	-webkit-transition: left 0.2s ease-in-out;
	-o-transition: left 0.2s ease-in-out;
	-ms-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
.pc .contentsBox #btnPrivacy:hover:before {left: 140%;}

.contentsBox #btnPrivacy a {
	position: relative;
	display: block;
	padding: 10px 15px;
	text-align: center;
}
.contentsBox #btnPrivacy a:link,
.contentsBox #btnPrivacy a:visited,
.contentsBox #btnPrivacy a:hover,
.contentsBox #btnPrivacy a:active {
	color: #fff;
	text-decoration: none;
}

.contentsBox #btnPrivacy:after {
	content: "";
	position: absolute;
	width: 29px;
	height: 29px;
	right: 10px;
	top: 50%;
	margin: -15px 0 0;
	text-indent: -9999px;
	overflow: hidden;
	border: solid 2px rgba(255, 255, 255, .4);
	cursor: pointer;

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}

.contentsBox #btnPrivacy a:before {
	content: "";
	position: absolute;
	display: block;
	width: 15px;
	height: 1px;
	right: 17px;
	top: 50%;
	margin: -1px 0 0;
	background-color: #fff;

	-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out, right 0.3s ease-in-out;
	-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out, right 0.3s ease-in-out;
	-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out, right 0.3s ease-in-out;
	-ms-transition: -ms-transform 0.3s ease-in-out, width 0.3s ease-in-out, right 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, right 0.3s ease-in-out;
}
.contentsBox #btnPrivacy a:after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 15px;
	right: 24px;
	top: 50%;
	margin: -8px 0 0;
	background-color: #fff;

	-moz-transition: -moz-transform 0.3s ease-in-out;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-o-transition: -o-transform 0.3s ease-in-out;
	-ms-transition: -ms-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
}
.pc .contentsBox #btnPrivacy:hover a:before,
.pc .contentsBox #btnPrivacy:hover a:after {
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.contentsBox #btnPrivacy.open a:before {
	width: 0;
	right: 24px;
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}
.contentsBox #btnPrivacy.open a:after {
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.pc .contentsBox #btnPrivacy.open:hover a:after {
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}


/* ------ Section Box 1 ------ */

.sectionBox1 {
	position: relative;
	min-height: 170px;
	padding: 25px 0 25px 75px;
	overflow: hidden;
}
.sectionBox1:first-of-type {margin-top: -20px;}
.sectionBox1:after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 100%;
	top: 150px;
	left: 75px;
	background-color: #fff;
	opacity: .3;
}
.sectionBox1:last-of-type:after {display: none;}

.sectionBox1 .heading {
	position: absolute;
	z-index: 2;
	width: 150px;
	height: 150px;
	top: 0;
	left: 0;
	border: solid 10px rgba(255, 255, 255, .3);

	-moz-border-radius: 75px;
	-webkit-border-radius: 75px;
	-o-border-radius: 75px;
	-ms-border-radius: 75px;
	border-radius: 75px;
}

.sectionBox1 h3 {
	display: table-cell;
	width: 130px;
	height: 130px;
	padding: 5px 10px 0;
	font-size: 76%;
	line-height: 140%;
	text-align: center;
	color: #999;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	vertical-align: middle;
	background-color: #fff;

	-moz-border-radius: 65px;
	-webkit-border-radius: 65px;
	-o-border-radius: 65px;
	-ms-border-radius: 65px;
	border-radius: 65px;
}

.sectionBox1 h3 .sub {
	display: block;
	margin: 0 0 7px;
	font-family: Open Sans, Arial, Helvetica, sans-serif;
	font-size: 180%;
	line-height: 100%;
}
.contentsBox.blue .sectionBox1 h3 .sub {color: #588fe3;}
.contentsBox.skyBlue .sectionBox1 h3 .sub {color: #3aaade;}
.contentsBox.lightBlue .sectionBox1 h3 .sub {color: #27c0dc;}
.contentsBox.blueGreen .sectionBox1 h3 .sub {color: #02aa9f;}
.contentsBox.green .sectionBox1 h3 .sub {color: #219e62;}

.sectionBox1 h3 .sub.jp {
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 140%;
	line-height: 140%;
}
.sectionBox1 h3 .sub.small {font-size: 150% !important;}
.sectionBox1 h3 .sub.jp.small {font-size: 120% !important;}

.sectionBox1 p,
.sectionBox1 dl {
	position: relative;
	display: table-cell;
	padding: 0 0 0 95px;
	height: 100px;
	font-size: 90%;
	vertical-align: middle;
}


/* ------ Section Box 2 ------ */

.sectionBox2 {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 0 10px 100px;
}
.sectionBox2:last-of-type {padding-bottom: 0;}
.sectionBox2:before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 30px;
	top: 0;
	left: 80px;
	background-color: #ddd;

	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}
.sectionBox2:after {
	position: absolute;
	display: block;
	width: 75px;
	top: 0;
	left: 0;
	font-family: Open Sans, Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 320%;
	line-height: 1em;
}
.sectionBox2:nth-of-type(1):after {content: "01"; color: #588fe3;}
.sectionBox2:nth-of-type(2):after {content: "02"; color: #3aaade;}
.sectionBox2:nth-of-type(3):after {content: "03"; color: #27c0dc;}
.sectionBox2:nth-of-type(4):after {content: "04"; color: #02aa9f;}
.sectionBox2:nth-of-type(5):after {content: "05"; color: #219e62;}
.sectionBox2:nth-of-type(6):after {content: "06"; color: #629f44;}
.sectionBox2:nth-of-type(7):after {content: "07"; color: #899f44;}

.sectionBox2 h3 {
	padding: 0 0 10px;
	font-size: 130%;
	line-height: 140%;
	color: #dd3ca2;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.sectionBox2:nth-of-type(1) h3 {color: #588fe3;}
.sectionBox2:nth-of-type(2) h3 {color: #3aaade;}
.sectionBox2:nth-of-type(3) h3 {color: #27c0dc;}
.sectionBox2:nth-of-type(4) h3 {color: #02aa9f;}
.sectionBox2:nth-of-type(5) h3 {color: #219e62;}
.sectionBox2:nth-of-type(6) h3 {color: #629f44;}
.sectionBox2:nth-of-type(7) h3 {color: #899f44;}

.sectionBox2 h3:only-child {
	min-height: 4em;
	font-size: 110%;
}


/* ------ Section Box 3 ------ */

.sectionBox3 {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 0 20px 170px;
}
.sectionBox3:after {
	left: 0;
	top: 0;
	opacity: .8;
}
.sectionBox3.web:after {background-position: 0 -440px;}
.sectionBox3.graphic:after {background-position: -140px -440px;}
.sectionBox3.movie:after {background-position: -280px -440px;}
.sectionBox3.text:after {background-position: -140px -640px;}
.sectionBox3.company:after {background-position: -140px -540px;}
.sectionBox3.recruit:after {background-position: -140px -740px;}

.sectionBox3 p {
	font-size: 90%;
}

.sectionBox3 h3 {
	padding: 0 0 10px;
	color: #fff;
	font-weight: bold;
}


/* ------ Contact List ------ */

.contactList {
	width: 100%;
	display: table;
}

.contactList li {
	display: table-cell;
	width: 50%;
	height: 150px;
	text-align: center;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	background-color: #f1f5f8;
	vertical-align: middle;
}

.contactList address {
	font-size: 90%;
	letter-spacing: 0.03em;
}

.contactList address span,
.contactList address a {
	margin: 0 0 3px;
	font-family: Open Sans, Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 220%;
	letter-spacing: 0;
	color: #d7277a;
}
.contactList address span {display: block;}
.contactList address a {display: none;}
.phone .contactList address span {display: none;}
.phone .contactList address a {display: block;}

.contactList address a:link,
.contactList address a:visited,
.contactList address a:hover,
.contactList address a:active {
	color: #d7277a;
	text-decoration: none;
}

.contactList .btnLarge{
	padding: 0 15px;
	border-left: solid 1px #fff;
}

.contactList .btnLarge span {
	position: relative;
	display: block;
	max-width: 240px;
	margin: 0 auto;
	background-color: #dd3ca2;
	overflow: hidden;

	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	-o-border-radius: 30px;
	-ms-border-radius: 30px;
	border-radius: 30px;

	-moz-transition: box-shadow 0.3s linear;
	-webkit-transition: box-shadow 0.3s linear;
	-o-transition: box-shadow 0.3s linear;
	-ms-transition: box-shadow 0.3s linear;
	transition: box-shadow 0.3s linear;
}
.pc .contactList .btnLarge span:hover {
	-moz-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	-webkit-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	-o-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	-ms-box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
	box-shadow: 0 0 20px 0 rgba(221,60,162,0.5);
}
.pc .contactList .btnLarge span:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #f95dc0;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out;
	-webkit-transition: left 0.2s ease-in-out;
	-o-transition: left 0.2s ease-in-out;
	-ms-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
.pc .contactList .btnLarge span:hover:before {left: 140%;}

.contactList .btnLarge a {
	position: relative;
	display: block;
	padding: 15px 20px;
}
.contactList .btnLarge a:link,
.contactList .btnLarge a:visited,
.sp .contactList .btnLarge a:hover,
.sp .contactList .btnLarge a:active {color: #fff;}
.pc .contactList .btnLarge a:hover,
.pc .contactList .btnLarge a:active {
	color: #fff;
	text-decoration: none;


}
.contactList .btnLarge a:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	margin: -4px 0 0;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);

	-moz-transition: right 0.2s linear;
	-webkit-transition: right 0.2s linear;
	-o-transition: right 0.2s linear;
	-ms-transition: right 0.2s linear;
	transition: right 0.2s linear;
}
.contactList .btnLarge a:link:after,
.contactList .btnLarge a:visited:after,
.sp .contactList .btnLarge a:hover:after,
.sp .contactList .btnLarge a:active:after {right: 13px;}
.pc .contactList .btnLarge a:hover:after,
.pc .contactList .btnLarge a:active:after {right: 10px;}


/* ------ Image List 1 ------ */

.imageList1 {
	max-width: 720px;
	margin: 0 auto;
}

.imageList1:after {
	content: "";
	display: block;
	clear: both;
}

.imageList1 dl {
	position: relative;
	float: left;
	width: 33.33333333%;
	padding: 60px 0 30px;
	text-align: center;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.imageList1 dl:after {
	content: "";
	position: absolute;
	display: block;
	width: 120px;
	height: 60px;
	top: 10px;
	left: 50%;
	margin: 0 0 0 -60px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	-moz-background-size: 420px 1040px;
	-webkit-background-size: 420px 1040px;
	-o-background-size: 420px 1040px;
	-ms-background-size: 420px 1040px;
	background-size: 420px 1040px;
}
.imageList1 .web:after {background-position: -10px -860px;}
.imageList1 .graphic:after {background-position: -150px -860px;}
.imageList1 .movie:after {background-position: -290px -860px;}
.imageList1 dl:nth-of-type(1):after {background-color: #588fe3;}
.imageList1 dl:nth-of-type(2):after {background-color: #3aaade;}
.imageList1 dl:nth-of-type(3):after {background-color: #27c0dc;}
.imageList1 dl:nth-of-type(4):after {background-color: #02aa9f;}
.imageList1 dl:nth-of-type(5):after {background-color: #219e62;}
.imageList1 dl:nth-of-type(6):after {background-color: #629f44;}
.imageList1 dl:nth-of-type(7):after {background-color: #899f44;}

.imageList1 dt {
	display: table-cell;
	width: 300px;
	height: 5.5em;
	color: #000;
	line-height: 130%;
	font-weight: normal;
	vertical-align: middle;
}

.imageList1 dd {
	font-size: 90%;
	padding: 0;
}

.imageList1 em {
	display: inline-block;
	width: 1.7em;
	margin: 0 5px 0 0;
	font-family: Open Sans, Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 400%;
	font-weight: normal;
	text-align: right;
}
.imageList1 dl:nth-of-type(1) em {color: #588fe3;}
.imageList1 dl:nth-of-type(2) em {color: #3aaade;}
.imageList1 dl:nth-of-type(3) em {color: #27c0dc;}
.imageList1 dl:nth-of-type(4) em {color: #02aa9f;}
.imageList1 dl:nth-of-type(5) em {color: #219e62;}
.imageList1 dl:nth-of-type(6) em {color: #629f44;}
.imageList1 dl:nth-of-type(7) em {color: #899f44;}


/* ------ Image List 2 ------ */

.contentsBox .imageList2 {padding: 0 0 5px;}

.contentsBox .imageList2 li {
	position: relative;
	margin: 0 0 15px;
	padding: 12px 15px;
	line-height: 140%;
	background-color: #f1f5f8;
	border-left: solid 42px #bfc9d0;

	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	-o-border-radius: 30px;
	-ms-border-radius: 30px;
	border-radius: 30px;
}
.contentsBox.gray .imageList2 li,
.contentsBox.blue .imageList2 li {background-color: #fff;}

.contentsBox .imageList2 li:after {
	content: "";
	position: absolute;
	display: block;
	width: 6px;
	height: 12px;
	top: 50%;
	left: -20px;
	margin: -8px 0 0;
	border-right: solid 2px #fff;
	border-bottom: solid 2px #fff;
	background-color: transparent;

	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	-o-border-radius: 0;
	-ms-border-radius: 0;
	border-radius: 0;

	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}


/* ------ List Box 1 ------ */

.listBox1 section {
	position: relative;
	z-index: 1;
	overflow: hidden;

	-moz-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-webkit-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-ms-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-o-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	transition: box-shadow 0.3s linear, z-index 0.3s linear;
}
.pc .listBox1 section:hover {
	z-index: 100;
	-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-ms-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
}
.listBox1 section:nth-of-type(1) {background-color: #588fe3;}
.listBox1 section:nth-of-type(2) {background-color: #3aaade;}
.listBox1 section:nth-of-type(3) {background-color: #27c0dc;}
.listBox1 section:nth-of-type(4) {background-color: #02aa9f;}
.listBox1 section:nth-of-type(5) {background-color: #219e62;}
.listBox1 section:nth-of-type(6) {background-color: #629f44;}
.listBox1 section:nth-of-type(7) {background-color: #899f44;}
.listBox1 section:nth-of-type(8) {background-color: #b1aa33;}
.listBox1 section:nth-of-type(9) {background-color: #c9ad3a;}
.listBox1 section:nth-of-type(10) {background-color: #cb952d;}

.pc .listBox1 section:before {
	content: "";
	position: absolute;
	display: block;
	width: 140%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #fff;
	opacity: .1;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.3s ease-in-out;
	-webkit-transition: left 0.3s ease-in-out;
	-o-transition: left 0.3s ease-in-out;
	-ms-transition: left 0.3s ease-in-out;
	transition: left 0.3s ease-in-out;
}
.pc .listBox1 section:hover:before {left: 150%;}

.listBox1 section a {
	position: relative;
	display: table;
	width: 100%;
	height: 200px;
}
.listBox1 section a:link,
.listBox1 section a:visited,
.listBox1 section a:hover,
.listBox1 section a:active {
	color: #fff;
	text-decoration: none;
}

.listBox1 .img,
.listBox1 .icon:before {
	content: "";
	position: relative;
	display: table-cell;
	width: 33.33333333%;
}
.listBox1 .icon:after {
	top: 0;
	bottom: 0;
	left: 16.66666666%;
	margin: auto -70px;

	-moz-transition: opacity 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	-ms-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
}
.listBox1 section .icon:link:after,
.listBox1 section .icon:visited:after,
.sp .listBox1 section .icon:hover:after,
.sp .listBox1 section .icon:active:after {opacity: .8;}
.pc .listBox1 section .icon:hover:after,
.pc .listBox1 section .icon:active:after {opacity: 1;}

.listBox1 .img span {
	position: absolute;
	display: block;
	width: 120px;
	height: 120px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	overflow: hidden;

	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	-o-border-radius: 60px;
	-ms-border-radius: 60px;
	border-radius: 60px;
}

.listBox1 img {
	position: absolute;
	display: block;
	width: 194px;
	max-width: none;
	height: 120px;
	top: 0;
	left: 50%;
	margin: 0 0 0 -97px;
}

.listBox1 .textArea {
	display: table-cell;
	width: 66.66666666%;
	padding: 30px 5% 30px 0;
	vertical-align: middle;
}

.listBox1 section a h2,
.listBox1 section a h3 {
	padding: 0  0 10px;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}
.listBox1 section a:link h2,
.listBox1 section a:link h3,
.listBox1 section a:visited h2,
.listBox1 section a:visited h3,
.listBox1 section a:hover h2,
.listBox1 section a:hover h3,
.listBox1 section a:active h2,
.listBox1 section a:active h3 {text-decoration: none;}

.listBox1 .text {font-size: 83%;}

.listBox1 section a + p {display: none;}


/* ------ List Box 2 ------ */

.listBox2 {
	width: 100.01%;
	background-color: #fff;
}
.listBox2:after {
	content: "";
	display: block;
	clear: both;
}
.listBox3 + .listBox2 {background-color: transparent;}

.listBox2 > h2 {padding: 40px 8%;}

.listBox2 section {
	float: left;
	width: 33.33333333%;
}

.listBox2 a {
	position: relative;
	display: block;
	height: 18.5em;
	overflow: hidden;

	-moz-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-webkit-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-ms-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-o-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	transition: box-shadow 0.3s linear, z-index 0.3s linear;
}
.listBox2 a:link,
.listBox2 a:visited,
.sp .listBox2 a:hover,
.sp .listBox2 a:active {
	z-index: 1;
	color: #707070;
	background-color: #000;
}
.pc .listBox2 a:hover,
.pc .listBox2 a:active {
	z-index: 100;
	color: #707070;
	text-decoration: none;

	-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-ms-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
}

.listBox2 .img {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;

	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;

	-moz-transition: -moz-transform 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}
.pc .listBox2 a:hover .img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.listBox2 .img:after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .6;
}

.listBox2 .textArea {
	position: relative;
	padding: 60px 0 0;
	text-align: center;
}

.listBox2 .time {
	padding: 0 10%;
	color: #3aaade;
	font-size: 76%;
}

.listBox2 .icon {
	position: relative;
	width: 60px;
	height: 60px;
	margin: 0 auto 30px;
	text-indent: -9999px;
	overflow: hidden;

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.listBox2 .icon:before {
	position: absolute;
	display: block;
	width: 60px;
	top: 28px;
	left: 0;
	font-family: Open Sans, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #fff;
	text-align: center;
	text-indent: 0;
}
.listBox2 .icon:after {
	width: 40px;
	height: 40px;
	top: 2px;
	left: 10px;
}
.listBox2 .iconColumn {background-color: #27c0dc;}
.listBox2 .iconNews {background-color: #e2962a;}

.listBox2 .iconColumn:before {content: "COLUMN";}
.listBox2 .iconNews:before {
	content: "NEWS";
	letter-spacing: 0.1em;
}

.listBox2 .iconColumn:after {background-position: -200px 0;}
.listBox2 .iconNews:after {background-position: -280px 0;}

.listBox2 section h2,
.listBox2 section h3 {
	padding: 0 10% 10px;
	color: #fff;
	font-size: 90%;
}

.listBox2 .text {
	padding: 0 10%;
	color: #fff;
	font-size: 76%;
}


/* ------ List Box 3 ------ */

.listBox3 {width: 100.01%;}

.listBox3:after {
	content: "";
	display: block;
	clear: both;
}

.listBox3 section {
	float: left;
	width: 33.33333333%;
}
/*
.listBox3 section:nth-of-type(3n) {float: right;}
*/
.listBox3 a {
	position: relative;
	display: block;
	height: 18.5em;
	padding: 140px 10% 0;
	text-align: center;
	overflow: hidden;

	-moz-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-webkit-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-o-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-ms-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	transition: box-shadow 0.3s linear, z-index 0.3s linear;
}
.listBox3 a:link,
.listBox3 a:visited,
.sp .listBox3 a:hover,
.sp .listBox3 a:active {
	z-index: 1;
	color: #fff;
}
.pc .listBox3 a:hover,
.pc .listBox3 a:active {
	z-index: 200;
	color: #fff;
	text-decoration: none;

	-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-ms-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
}
.pc .listBox3 a:before {
	content: "";
	position: absolute;
	display: block;
	width: 140%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #fff;
	opacity: .1;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out;
	-webkit-transition: left 0.2s ease-in-out;
	-o-transition: left 0.2s ease-in-out;
	-ms-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
.pc .listBox3 a:hover:before {left: 150%;}

.listBox3 section:nth-of-type(1) a {background-color: #588fe3;}
.listBox3 section:nth-of-type(2) a,
.listBox3 section:nth-of-type(4) a {background-color: #3aaade;}
.listBox3 section:nth-of-type(3) a,
.listBox3 section:nth-of-type(5) a,
.listBox3 section:nth-of-type(7) a {background-color: #27c0dc;}
.listBox3 section:nth-of-type(6) a,
.listBox3 section:nth-of-type(8) a,
.listBox3 section:nth-of-type(10) a {background-color: #02aa9f;}
.listBox3 section:nth-of-type(9) a,
.listBox3 section:nth-of-type(11) a,
.listBox3 section:nth-of-type(13) a {background-color: #219e62;}
.listBox3 section:nth-of-type(12) a,
.listBox3 section:nth-of-type(14) a,
.listBox3 section:nth-of-type(16) a {background-color: #629f44;}
.listBox3 section:nth-of-type(15) a,
.listBox3 section:nth-of-type(17) a,
.listBox3 section:nth-of-type(19) a {background-color: #899f44;}
.listBox3 section:nth-of-type(18) a,
.listBox3 section:nth-of-type(20) a,
.listBox3 section:nth-of-type(22) a {background-color: #b1aa33;}

.listBox3 a:after {
	top: 30px;
	left: 50%;
	margin: 0 0 0 -70px;

	-moz-transition: opacity 0.3s linear;
	-webkit-transition: opacity 0.3s linear;
	-o-transition: opacity 0.3s linear;
	-ms-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
}
.listBox3 a:link:after,
.listBox3 a:visited:after,
.sp .listBox3 a:hover:after,
.sp .listBox3 a:active:after {opacity: .8;}
.pc .listBox3 a:hover:after,
.pc .listBox3 a:active:after {opacity: 1;}

.listBox3 section h2 {
	position: relative;
	display: table-cell;
	width: 500px;
	height: 45px;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 90%;
	line-height: 130%;
	vertical-align: middle;
}
.listBox3 section h2:before,
.listBox3 section h2:after {
	content: "";
	position: absolute;
	display: block;
	width: 100px;
	height: 1px;
	left: 50%;
	margin: 0 0 0 -50px;
	background-color: #fff;
	opacity: .5;
}
.listBox3 section h2:before {top: 0;}
.listBox3 section h2:after {bottom: 0;}

.listBox3 .text {
	position: relative;
	padding: 15px 0 0;
	color: #fff;
	font-size: 76%;
}


/* ------ List Box 4 ------ */

.listBox4 {
	width: 100.01%;
	background-color: #fff;
}
.tag + .listBox4 {background-color: transparent;}

.listBox4:after {
	content: "";
	display: block;
	clear: both;
}

.listBox4 > h2 {padding: 40px 8%;}

.listBox4 section {
	position: relative;
	z-index: 1;
	float: left;
	width: 33.33333333%;
	background-color: #fff;

	opacity: 1;

	-moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s linear, box-shadow 0.3s linear, z-index 0.3s linear;
	-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s linear, box-shadow 0.3s linear, z-index 0.3s linear;
	-o-transition: -o-transform 0.2s ease-out, opacity 0.2s linear, box-shadow 0.3s linear, z-index 0.3s linear;
	-ms-transition: -ms-transform 0.2s ease-out, opacity 0.2s linear, box-shadow 0.3s linear, z-index 0.3s linear;
	transition: transform 0.2s ease-out, opacity 0.2s linear, box-shadow 0.3s linear, z-index 0.3s linear;
}
.pc .listBox4 section:hover {
	z-index: 100;

	-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-ms-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
}

.listBox4 section > a {
	position: relative;
	display: block;
	height: 25em;
}
.listBox4 section > a:hover,
.listBox4 section > a:active {text-decoration: none;}

.listBox4 .img {
	position: relative;
	overflow: hidden;
}
.pc .listBox4 section > a:hover .img {background-color: #000;}

.pc .listBox4 .img:before {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 101%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0;

	-moz-transition: opacity 0.3s ease-out;
	-webkit-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	-ms-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}
.pc .listBox4 section > a:hover .img:before {opacity: .6;}
.pc .listBox4 .img:after {
	content: "詳細を見る";
	position: absolute;
	z-index: 2;
	display: block;
	width: 150px;
	height: 40px;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 83%;
	line-height: 40px;
	color: #fff;
	text-align: center;
	border: solid 1px #fff;
	opacity: 0;

	-moz-transform: scale(1.3);
	-webkit-transform: scale(1.3);
	-o-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);

	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out, opacity 0.3s ease-out;
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;

}
.pc .listBox4 section > a[target] .img:after {content: "サイトを見る";}
.pc .listBox4 .enlarge .img:after {content: "画像を拡大";}
.pc .listBox4 .play .img:after {content: "映像を再生";}
.pc .listBox4 .playYouTube .img:after {content: "映像を再生";}

.pc .listBox4 section > a:hover .img:after {
	opacity: 1;

	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.listBox4 img {
	display: block;
	width: 100%;

	-moz-transition: -moz-transform 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}
.pc .listBox4 section > a:hover img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.listBox4 section > a h2,
.listBox4 section > a h3 {
	display: table-cell;
	width: 500px;
	height: 70px;
	padding: 10px 10% 5px;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	line-height: 140%;
	text-align: center;
	vertical-align: middle;
}
.listBox4 section > a:link h2,
.listBox4 section > a:visited h2,
.listBox4 section > a:hover h2,
.listBox4 section > a:active h2,
.listBox4 section > a:link h3,
.listBox4 section > a:visited h3,
.listBox4 section > a:hover h3,
.listBox4 section > a:active h3 {color: #000;}

.listBox4 section > a h2 span,
.listBox4 section > a h3 span {
	display: block;
	font-size: 76%;
	line-height: 140%;
}
.listBox4 section > a:link h2 span,
.listBox4 section > a:visited h2 span,
.listBox4 section > a:hover h2 span,
.listBox4 section > a:active h2 span,
.listBox4 section > a:link h3 span,
.listBox4 section > a:visited h3 span,
.listBox4 section > a:hover h3 span,
.listBox4 section > a:active h3 span {color: #999;}

.listBox4 .text {
	padding: 0 10% 15px;
	font-size: 83%;
	line-height: 160%;
}
.listBox4 section a:link .text,
.listBox4 section a:visited .text,
.listBox4 section a:hover .text,
.listBox4 section a:active .text {color: #707070;}

.listBox4 .btn {
	position: relative;
	clear: both;
	max-width: 240px;
	margin: 15px auto 30px;
	overflow: hidden;
}

.pc .listBox4 .btn:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #0090d4;
	opacity: 0;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-webkit-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-o-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	-ms-transition: left 0.2s ease-in-out, opacity 0.2s linear;
	transition: left 0.2s ease-in-out, opacity 0.2s linear;
}
.pc .listBox4 .btn:hover:before {
	left: 140%;
	opacity: 1;
}

.listBox4 .btn a {
	position: relative;
	display: block;
	padding: 10px 15px;
	font-size: 90%;
	text-align: center;
	border: solid 2px #707070;

	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.listBox4 .btn a:link,
.listBox4 .btn a:visited,
.sp .listBox4 .btn a:hover,
.sp .listBox4 .btn a:active {color: #707070;}
.pc .listBox4 .btn a:hover,
.pc .listBox4 .btn a:active {
	color: #fff;
	text-decoration: none;
}
.pc .listBox4 .btn a:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	margin: -4px 0 0;

	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);

	-moz-transition: right 0.2s linear, border 0.2s linear;
	-webkit-transition: right 0.2s linear, border 0.2s linear;
	-o-transition: right 0.2s linear, border 0.2s linear;
	-ms-transition: right 0.2s linear, border 0.2s linear;
	transition: right 0.2s linear, border 0.2s linear;
}
.listBox4 .btn a:link:after,
.listBox4 .btn a:visited:after,
.sp .listBox4 .btn a:hover:after,
.sp .listBox4 .btn a:active:after {
	right: 13px;
	border-right: solid 1px #b8bec1;
	border-bottom: solid 1px #b8bec1;
}
.pc .listBox4 .btn a:hover:after,
.pc .listBox4 .btn a:active:after {
	right: 10px;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
}

.listBox4 .hide {
	opacity: 0;

	-moz-transform: translate3d(0, 30px, 0);
	-webkit-transform: translate3d(0, 30px, 0);
	-o-transform: translate3d(0, 30px, 0);
	-ms-transform: translate3d(0, 30px, 0);
	transform: translate3d(0, 30px, 0);

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.listBox4 .portfolioLink{
	font-size: 76%;
	text-align: right;
	padding: 0 4.5% 20px;
	margin-top: -40px;
}

.listBox4 .portfolioLink a{
	color: #999;
	position: relative;
	padding-right: 10px;
	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}

.listBox4 .portfolioLink a:hover{
	text-decoration: none;
	color: #1ab6ff;
}

.listBox4 .portfolioLink a::after {
	right: 0;
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 50%;
	margin: -4px 0 0;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-moz-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.listBox4 .portfolioLink a:hover::after{
	right: -3px;
	color: #1ab6ff;
	border-color:  #1ab6ff;
}

/* ------ .listBox5 ------ */

.listBox5 {background-color: #fff;}

.listBox5 + .listBox5 {border-top: solid 1px #eee;;}

.listBox5 > h2 {padding: 40px 8%;}

.listBox5 section {position:relative;}
.listBox5 section:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	top: 0;
	left: 0;
	background-color: #eee;
}
.listBox5 section:first-of-type:before {display: none;}
.listBox5 h2 + section:first-of-type:before {display: block;}
.pc .listBox5 section:hover:before,
.pc .listBox5 section:hover + section:before {display: none !important;}

.listBox5 a {
	position: relative;
	display: block;

	-moz-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-webkit-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-o-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	-ms-transition: box-shadow 0.3s linear, z-index 0.3s linear;
	transition: box-shadow 0.3s linear, z-index 0.3s linear;
}
.listBox5 a:link,
.listBox5 a:visited,
.sp .listBox5 a:hover,
.sp .listBox5 a:active {z-index: 1;}
.pc .listBox5 a:hover,
.pc .listBox5 a:active {
	z-index: 100;
	text-decoration: none;

	-moz-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	-ms-box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 30px 0 rgba(0,0,0,0.3);
}

.listBox5 .imgArea {
	position: absolute;
	width: 50%;
	height: 100%;
	min-height: 240px;
	top: 0;
	left: 0;
	overflow: hidden;
}
.listBox5 .imgArea:before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	min-height: 240px;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: .7;
/*
	background: #0098bf;
	background: -moz-linear-gradient(-45deg, #0098bf 0%, #002e47 50%, #00010f 100%);
	background: -webkit-linear-gradient(-45deg, #0098bf 0%,#002e47 50%,#00010f 100%);
	background: linear-gradient(135deg, #0098bf 0%,#002e47 50%,#00010f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0098bf', endColorstr='#00010f',GradientType=1 );
*/
}

.listBox5 .img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

	-moz-transition: -moz-transform 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}
.pc .listBox5 a:hover .img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.listBox5 .title {
	position: relative;
	z-index: 2;
	display: table-cell;
	width: 500px;
	height: 240px;
	top: 0;
	left: 0;
	padding: 30px 10%;
	text-align: center;
	vertical-align: middle;
}

.listBox5 section h2,
.listBox5 section h3 {font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;}
.listBox5 section a:link h2,
.listBox5 section a:visited h2,
.listBox5 section a:hover h2,
.listBox5 section a:active h2,
.listBox5 section a:link h3,
.listBox5 section a:visited h3,
.listBox5 section a:hover h3,
.listBox5 section a:active h3 {color: #fff;}

.listBox5 .time {
	font-size: 76%;
}
.listBox5 a:link .time,
.listBox5 a:visited .time,
.listBox5 a:hover .time,
.listBox5 a:active .time {color: #3aaade;}


.listBox5 .textArea {
	position: relative;
	width: 50%;
	margin: 0 0 0 auto;
}

.listBox5 .text {
	display: table-cell;
	padding: 30px 10%;
	width: 100%;
	height: 240px;
	font-size: 83%;
	vertical-align: middle;
}
.listBox5 a:link .text,
.listBox5 a:visited .text,
.listBox5 a:hover .text,
.listBox5 a:active .text {color: #707070;}


/* ------ Icon for List Box ------ */

.icon:after {
	content: "";
	position: absolute;
	display: block;
	width: 140px;
	height: 100px;
	background-image: url(../../common/images/icon.png);
	background-repeat: no-repeat;
	background-size: 420px 1040px;
}
.iconSmart4meBiz:after {background-position: -140px -40px;}
.iconSmart4me:after {background-position: -140px -40px;}
.iconCrossMedia:after {background-position: -280px -40px;}
.iconRWD:after {background-position: 0 -140px;}
.iconSP:after {background-position: -140px -140px;}
.iconLarge:after {background-position: -280px -140px;}
.iconSystem:after {background-position: 0 -240px;}
.iconInternational:after {background-position: -140px -240px;}
.iconRecruitTool:after {background-position: -280px -240px;}
.iconResearch:after {background-position: 0 -340px;}
.iconSEO:after {background-position: -140px -340px;}
.iconTranslation:after {background-position: -280px -340px;}
.iconWeb:after {background-position: 0 -440px;}
.iconGraphic:after {background-position: -140px -440px;}
.iconMovie:after {background-position: -280px -440px;}
.iconCorporate:after {background-position: 0px -540px;}
.iconCompany:after {background-position: -140px -540px;}
.iconPhilosophy:after {background-position: -280px -540px;}
.iconAccess:after {background-position: 0px -640px;}
.iconNews:after {background-position: -140px -640px;}
.iconRecruitInfo:after {background-position: -280px -640px;}
.iconMessage:after {background-position: 0px -740px;}
.iconStaff:after {background-position: -140px -740px;}
.iconRecruit:after {background-position: -280px -740px;}
.iconUniversity:after {background-position: 0 -940px;}
.iconContents:after {background-position: 0 -40px;}


/* ------ Table ------ */

.contentsBox table {
	width: 100%;
	margin: 0 0 20px;
}

.contentsBox table th {
	width: 25%;
	padding: 15px 5% 15px 0;
	color: #000;
	font-size: 90%;
	vertical-align: top;
/*	border-right: 1px solid #eee;
	border-top: 1px solid #eee;*/
}
.blue table th,
.skyBlue table th,
.lightBlue table th {color: #fff;}

/*
.contentsBox table thead th {
	width: auto;
	padding-right: 0;
}
.contentsBox table tr:last-of-type th {border-bottom: 1px solid #eee;}
*/
.contentsBox table td {
	padding: 15px 0;
	font-size: 90%;
	vertical-align: top;
/*	border-top: 1px solid #eee;*/
}
/*
.contentsBox table tr:last-of-type td {border-bottom: 1px solid #eee;}
*/

.contentsBox table.price th,
.contentsBox table.price td {
	width: 33.33333333%;
	padding: 15px;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	line-height: 140%;
	text-align: center;
	vertical-align: middle;
	background-color: #fff;
	border-left: solid 1px #e4e8ec;
	border-bottom: solid 1px #e4e8ec;
}

.contentsBox table.price th {padding: 30px 15px;}

.contentsBox table.price td {
	padding: 12px 15px;
	font-size: 83%;
}

/*
.contentsBox table.price thead th:first-of-type {
	width: 15%;
	border: 0 none;
	background-color: transparent;
}

.contentsBox table.price tbody th {
	width: 15%;
	background-color: #e4e8ec;
	border: 0 none;
	border-bottom: solid 1px #fff;
}
.contentsBox table.price tbody tr:last-of-type th,*/
.contentsBox table.price tbody tr:last-of-type td {border-bottom: 0 none;}
.contentsBox table.price tbody tr:first-of-type td {padding: 30px 15px;}

.contentsBox table.price tbody td:first-of-type {border-left: 0 none;}

.contentsBox table.price em {
	font-family: Open Sans, Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 240% !important;
}

.contentsBox table.price .blue {
	background-color: #588fe3;
	border: 0 none;
	color: #fff;
}
.contentsBox table.price .skyBlue {
	background-color: #3aaade;
	border: 0 none;
	color: #fff;
}
.contentsBox table.price .lightBlue {
	background-color: #27c0dc;
	border: 0 none;
	color: #fff;
}


/* ------ Tab Navigation ------ */

.tabNav ul {
	background-color: #252829;
	overflow: hidden;
}

.tabNav li {
	position: relative;
	float: left;
	width: 25%;
	font-size: 83%;
	line-height: 140%;
	overflow: hidden;
}
.tabNav li:before {
	content: "";
	position: absolute;
	display: block;
	width: 130%;
	height: 100%;
	top: 0;
	left: 10%;
	background-color: #333739;

	-moz-transform: translateX(-120%) skewX(15deg);
	-webkit-transform: translateX(-120%) skewX(15deg);
	-o-transform: translateX(-120%) skewX(15deg);
	-ms-transform: translateX(-120%) skewX(15deg);
	transform: translateX(-120%) skewX(15deg);

	-moz-transition: left 0.2s ease-in-out;
	-webkit-transition: left 0.2s ease-in-out;
	-o-transition: left 0.2s ease-in-out
	-ms-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
.pc .tabNav li:hover:before,
.tabNav .current:before,
.tabNav .parent:before {left: 140%;}

.tabNav li a {
	position: relative;
	display: table-cell;
	width: 300px;
	height: 55px;
	padding: 0 15px;
	border-left: solid 1px #333739;
	text-align: center;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	vertical-align: middle;

	-moz-transition: color 0.2s linear;
	-webkit-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.tabNav li:first-of-type a {border-left: 0 none;}
.tabNav li a:link,
.tabNav li a:visited,
.sp .tabNav li a:hover,
.sp .tabNav li a:active {color: #bbb;}
.pc .tabNav li a:hover,
.pc .tabNav li a:active,
.tabNav .current a,
.tabNav .parent a {
	color: #fff !important;
	text-decoration: none;
}


/* ------ Tag Selector ------ */

.tag {
	padding: 30px 8% 15px;
	background-color: #333739;
	overflow: hidden;
}

.tag li {
	float: left;
	width: 33.33333333%;
	padding: 0 10px 15px;
	font-size: 67%;
}
.tag li:first-of-type,
.tag li:nth-of-type(3n+1) {
	clear: both;
	padding-left: 0;
}
.tag li:nth-of-type(3n) {padding-right: 0;}

.tag li a {
	position: relative;
	display: block;
	padding: 0 0 0 25px;
}
.tag li a:link,
.tag li a:visited,
.sp .tag li a:hover,
.sp .tag li a:active {color: #bbb;}
.pc .tag li a:hover,
.pc .tag li a:active,
.tag li.current a {
	color: #fff;
	text-decoration: none;
}
.tag li a:before {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	top: 0;
	left: 0;
	border: solid 1px #999;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}
.tag li.current a:before {border: solid 1px #fff;}

.tag li.current a:after {
	content: "";
	position: absolute;
	display: block;
	width: 8px;
	height: 8px;
	top: 4px;
	left: 4px;
	background-color: #fff;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
}


/* ------ Next Button ------ */

.nextBtn {
	position: relative;
	background-color: #333739;
	height: 75px;
}

.nextBtn li {
	position: absolute;
	width: 35px;
}
.nextBtn .prev {
	top: 20px;
	left: 50%;
	margin: 0 0 0 -80px;
}
.nextBtn .index {
	top: 20px;
	left: 50%;
	margin: 0 0 0 -17px;
}
.nextBtn .next {
	top: 20px;
	left: 50%;
	margin: 0 0 0 45px;
}

.nextBtn li a {
	display: block;
	height: 35px;
	overflow: hidden;
	text-indent: -9999px;
	border: solid 2px rgba(255, 255, 255, .4);

	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	-o-border-radius: 18px;
	-ms-border-radius: 18px;
	border-radius: 18px;

	-moz-transition: background-color 0.2s linear;
	-webkit-transition: background-color 0.2s linear;
	-o-transition: background-color 0.2s linear;
	-ms-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
}
.pc .nextBtn li a:hover {background-color: #fff;}

.nextBtn .prev a:before,
.nextBtn .next a:before {
	content: "";
	position: absolute;
	display: block;
	width: 15px;
	height: 1px;
	top: 17px;
	left: 10px;
	background-color: #fff;

	-moz-transition: left 0.2s linear, background-color 0.2s linear;
	-webkit-transition: left 0.2s linear, background-color 0.2s linear;
	-o-transition: left 0.2s linear, background-color 0.2s linear;
	-ms-transition: left 0.2s linear, background-color 0.2s linear;
	transition: left 0.2s linear, background-color 0.2s linear;
}
.pc .nextBtn .prev a:hover:before {
	left: 8px;
	background-color: #333739;
}
.pc .nextBtn .next a:hover:before {
	left: 12px;
	background-color: #333739;
}

.nextBtn .prev a:after,
.nextBtn .next a:after {
	content: "";
	position: absolute;
	display: block;
	width: 11px;
	height: 11px;
	top: 12px;

	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

	-moz-transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
	-webkit-transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
	-o-transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
	-ms-transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
	transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
}
.nextBtn .prev a:after {
	left: 10px;
	border-left: solid 1px #fff;
	border-bottom: solid 1px #fff;
}
.nextBtn .next a:after {
	right: 10px;
	border-right: solid 1px #fff;
	border-top: solid 1px #fff;
}
.pc .nextBtn .prev a:hover:after {
	left: 8px;
	border-left: solid 1px #333739;
	border-bottom: solid 1px #333739;
}
.pc .nextBtn .next a:hover:after {
	right: 8px;
	border-right: solid 1px #333739;
	border-top: solid 1px #333739;
}

.nextBtn .index a:before {
	content: "";
	position: absolute;
	display: block;
	width: 13px;
	height: 13px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;

	-moz-transition: border 0.2s linear;
	-webkit-transition: border 0.2s linear;
	-o-transition: border 0.2s linear;
	-ms-transition: border 0.2s linear;
	transition: border 0.2s linear;
}
.pc .nextBtn .index a:hover:before {
	border-top: solid 1px #333739;
	border-bottom: solid 1px #333739;
}
.nextBtn .index a:after {
	content: "";
	position: absolute;
	display: block;
	width: 13px;
	height: 1px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #fff;

	-moz-transition: background-color 0.2s linear;
	-webkit-transition: background-color 0.2s linear;
	-o-transition: background-color 0.2s linear;
	-ms-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
}
.pc .nextBtn .index a:hover:after {background-color: #333739;}



/* ------ Pagination ------ */

.pager .pagination {
	position: relative;
	background-color: #333739;
	height: 75px;
	padding: 20px 0 0;
	text-align: center;
}

.pager .pagination .page-numbers {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 35px;
	margin: 0 5px;
	overflow: hidden;
	line-height: 33px;
	font-family: Open Sans, Arial, Helvetica, sans-serif;
	color: #333739;
	background-color: #fff;
	border: solid 2px rgba(255, 255, 255, .4);

	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	-o-border-radius: 18px;
	-ms-border-radius: 18px;
	border-radius: 18px;

	-moz-transition: background-color 0.2s linear;
	-webkit-transition: background-color 0.2s linear;
	-o-transition: background-color 0.2s linear;
	-ms-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
}
.pager .pagination a.page-numbers:link,
.pager .pagination a.page-numbers:visited,
.sp .pager .pagination a.page-numbers:hover,
.sp .pager .pagination a.page-numbers:active {
	color: #ccc;
	background-color: transparent;
}
.pc .pager .pagination a.page-numbers:hover,
.pc .pager .pagination a.page-numbers:active {
	color: #333739;
	background-color: #fff;
	text-decoration: none;
}

.pager .pagination .prev,
.pager .pagination .next {text-indent: -9999px;}

.pager .pagination .prev:before,
.pager .pagination .next:before {
	content: "";
	position: absolute;
	display: block;
	width: 15px;
	height: 1px;
	top: 15px;
	left: 9px;
	background-color: #fff;

	-moz-transition: left 0.2s linear, background-color 0.2s linear;
	-webkit-transition: left 0.2s linear, background-color 0.2s linear;
	-o-transition: left 0.2s linear, background-color 0.2s linear;
	-ms-transition: left 0.2s linear, background-color 0.2s linear;
	transition: left 0.2s linear, background-color 0.2s linear;
}
.pc .pager .pagination .prev:hover:before {
	left: 7px;
	background-color: #333739;
}
.pc .pager .pagination .next:hover:before {
	left: 11px;
	background-color: #333739;
}

.pager .pagination .prev:after,
.pager .pagination .next:after {
	content: "";
	position: absolute;
	display: block;
	width: 11px;
	height: 11px;
	top: 10px;

	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

	-moz-transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
	-webkit-transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
	-o-transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
	-ms-transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
	transition: border 0.2s linear, left 0.2s linear, right 0.2s linear;
}
.pager .pagination .prev:after {
	left: 9px;
	border-left: solid 1px #fff;
	border-bottom: solid 1px #fff;
}
.pager .pagination .next:after {
	right: 9px;
	border-right: solid 1px #fff;
	border-top: solid 1px #fff;
}
.pc .pager .pagination .prev:hover:after {
	left: 7px;
	border-left: solid 1px #333739;
	border-bottom: solid 1px #333739;
}
.pc .pager .pagination .next:hover:after {
	right: 7px;
	border-right: solid 1px #333739;
	border-top: solid 1px #333739;
}


/* ------ Social Button ------ */

.social {
	position: relative;
	height: 75px;
	padding: 27px 0 0;
	text-align: center;
	background-color: #333739;
	border-left: solid 1px #474c4e;
}

.social .facebook {
	display: inline-block;
	width: 110px;
	height: 20px;
	overflow: hidden;
}

.social .twitter {
	display: inline-block;
	width: 80px;
	height: 20px;
	overflow: hidden;
}

.social .hatena {
	display: inline-block;
	width: 69px;
	height: 20px;
	overflow: hidden;
}

#contentsDummy1 .social > div,
#contentsDummy2 .social > div,
#contentsDummy3 .social > div {display: none;}


/* ------ Mail ------ */

.mail:before {content: "@";}


/* ------ Form ------ */

.field1,
.field2,
.field3 {
	height: 2em;
	padding: 0 5px;
	border: solid 1px #ddd;
}

.field1 {width: 50%;}
.field2 {width: 100%;}
.field3 {width: 20%;}
textarea.field2 {height: auto;}

input {vertical-align: middle;}

label {
	display: inline-block;
	padding: 0 0 0 5px;
	vertical-align: middle;
}
label + input {margin: 0 0 0 20px;}

.radioList dd,
.contentsBox table .radioList:last-child dd:last-child {padding-left: 1em;}

#privacyArea {margin: 0 0 30px;}

#privacy {
	display: none;
	padding: 0 7% 10px;
	background-color: #f1f5f8;
}

.contentsBox .errorText {
	padding: 5px 0 0;
	color: #d7277a;
}

.fieldalinebottom{
	vertical-align:bottom;
}
.fieldSelectWrap{
	position: relative;
	width: 50%;
}
.fieldSelectWrap::after{
	content: "";
	position: absolute;
	top: 7px;
	right: 11px;
	display: block;
	z-index: 1;
	width: 8px;
	height: 8px;
	border-right: solid 1px #aaa;
	border-top: solid 1px #aaa;
	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}
.fieldSelect{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height: 1em;
	padding-right: 28px;
	background-color: #FFF;
	cursor: pointer;
}
.fieldSelect::-ms-expand {
	display: none;
}


/* ------ Google Map ------ */

.googleMap {
	height: 500px;
	background-color: #e9e5dc;
}

.googleMap iframe {width: 100%;}

#map_canvas {height: 500px;}

#contentsDummy1 #map_canvas,
#contentsDummy2 #map_canvas,
#contentsDummy3 #map_canvas {display: none;}


/* ------ Modal Window for Images ------ */

#modalBG {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0;

	-moz-transition: opacity 0.5s linear;
	-webkit-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;}

#modalImg {
	position: absolute;
	z-index: 1002;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

#modalImgBG {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

#modalImgLoader {
	position: fixed;
	display: none;
	width: 32px;
	height: 32px;
	top: 50%;
	left: 50%;
	margin: -16px 0 0 -16px;
}

#modalText {
	position: absolute;
	height: 70px;
	left: 0;
	bottom: -70px;
	padding: 15px 0 0;
	font-size: 90%;
	color: #fff;
	text-align: left;
/*	opacity: 0;*/

	-moz-transform: translate3d(0, -45px, 0);
	-webkit-transform: translate3d(0, -45px, 0);
	-o-transform: translate3d(0, -45px, 0);
	-ms-transform: translate3d(0, -45px, 0);
	transform: translate3d(0, -45px, 0);
}

#modalClose {
	position: absolute;
	right: -5px;
	top: -45px;
/*	opacity: 0;*/

	-moz-transform: translate3d(0, 45px, 0);
	-webkit-transform: translate3d(0, 45px, 0);
	-o-transform: translate3d(0, 45px, 0);
	-ms-transform: translate3d(0, 45px, 0);
	transform: translate3d(0, 45px, 0);}

#modalClose a {
	display: block;
	width: 39px;
	height: 39px;
	right: 0;
	top: 0;
	text-indent: -9999px;
	overflow: hidden;
	opacity: .7;

	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

	-moz-transition: opacity 0.3s linear, -moz-transform 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-in-out;
	-o-transition: opacity 0.3s linear,-o-transform 0.3s ease-in-out;
	-ms-transition: opacity 0.3s linear, -ms-transform 0.3s ease-in-out;
	transition: opacity 0.3s linear, transform 0.3s ease-in-out;


}
#modalClose a:before {
	content: "";
	position: absolute;
	display: block;
	width: 39px;
	height: 1px;
	top: 19px;
	left: 0px;
	background-color: #fff;
}
#modalClose a:after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 39px;
	top: 0px;
	left: 19px;
	background-color: #fff;
}
.pc #modalClose a:hover {
	opacity: 1;

	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}

/*
#modalCover {
	position: fixed;
	z-index: 20000;
	display: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
/*
	background: #0098bf;
	background: -moz-linear-gradient(-45deg, #0098bf 0%, #002e47 50%, #00010f 100%);
	background: -webkit-linear-gradient(-45deg, #0098bf 0%,#002e47 50%,#00010f 100%);
	background: linear-gradient(135deg, #0098bf 0%,#002e47 50%,#00010f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0098bf', endColorstr='#00010f',GradientType=1 );
*//*
}

#modalLoader {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#modalContents {
	position: absolute;
	z-index: 20001;
	display: none;
	left: 0;
	right: 0;
	margin: auto;
	padding: 50px;
	text-align: center;
}

#modalContents .inner {
	position: relative;
	display: inline-block;
}

#modalContents .img {
	overflow: hidden;

	box-shadow: 0 0 35px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0 0 35px rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0 0 35px rgba(0, 0, 0, .5);
	-o-box-shadow: 0 0 35px rgba(0, 0, 0, .5);
	-ms-box-shadow: 0 0 35px rgba(0, 0, 0, .5);
}

#modalContents img {
	width: auto;
	max-width: 100%;
}

#modalContents video {
	float: left;
	background-color: #000;
}

#modalContents iframe {float: left;}

#modalContents .title p {
	padding: 15px 0 0;
	font-size: 90%;
	color: #fff;
	text-align: left;
}
#modalContents .title p span {padding-left: 1em;}

#modalContents .btnClose {
	position: absolute;
	right: -5px;
	top: -45px;
}

#modalContents .btnClose a {
	display: block;
	width: 39px;
	height: 39px;
	right: 0;
	top: 0;
	text-indent: -9999px;
	overflow: hidden;
	opacity: .7;

	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

	-moz-transition: opacity 0.3s linear, -moz-transform 0.3s ease-in-out;
	-webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-in-out;
	-o-transition: opacity 0.3s linear,-o-transform 0.3s ease-in-out;
	-ms-transition: opacity 0.3s linear, -ms-transform 0.3s ease-in-out;
	transition: opacity 0.3s linear, transform 0.3s ease-in-out;


}
#modalContents .btnClose a:before {
	content: "";
	position: absolute;
	display: block;
	width: 39px;
	height: 1px;
	top: 19px;
	left: 0px;
	background-color: #fff;
}
#modalContents .btnClose a:after {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 39px;
	top: 0px;
	left: 19px;
	background-color: #fff;
}
.pc #modalContents .btnClose a:hover {
	opacity: 1;

	-moz-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}

.youTube {
	max-width: 720px;
	max-height: 405px;
	margin: 0 auto;
	overflow: hidden;
}

.youTube > div {
	position: relative;
	width: 100%;
	height: 0;
	padding: 56.25% 0 0;
}

.youTube iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
*/

/* ------ Footer ------ */

footer {
	position :relative;
	z-index: 4;
	margin: 0 -40px 0 -120px;
	padding: 40px 40px 10px 120px;
	background-color: #212425;
	overflow: hidden;
}

#pageTop {
	position: absolute;
	width: 35px;
	top: 40px;
	right: 40px;
}

#pageTop a {
	display: block;
	height: 35px;
	overflow: hidden;
	text-indent: -9999px;
	border: solid 2px rgba(255, 255, 255, .4);

	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	-o-border-radius: 18px;
	-ms-border-radius: 18px;
	border-radius: 18px;

	-moz-transition: background-color 0.2s linear;
	-webkit-transition: background-color 0.2s linear;
	-o-transition: background-color 0.2s linear;
	-ms-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
}
.pc #pageTop a:hover,
.pc #pageTop a:active {background-color: #fff;}

#pageTop a:before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 15px;
	left: 17px;

	-moz-transition: top 0.2s linear, background-color 0.2s linear;
	-webkit-transition: top 0.2s linear, background-color 0.2s linear;
	-o-transition: top 0.2s linear, background-color 0.2s linear;
	-ms-transition: top 0.2s linear, background-color 0.2s linear;
	transition: top 0.2s linear, background-color 0.2s linear;
}
#pageTop a:link:before,
#pageTop a:visited:before,
.sp #pageTop a:hover:before,
.sp #pageTop a:active:before {
	top: 10px;
	background-color: #fff;
}
.pc #pageTop a:hover:before,
.pc #pageTop a:active:before {
	top: 8px;
	background-color: #333739;
}

#pageTop a:after {
	content: "";
	position: absolute;
	display: block;
	width: 11px;
	height: 11px;
	left: 12px;

	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

	-moz-transition: border 0.2s linear, top 0.2s linear;
	-webkit-transition: border 0.2s linear, top 0.2s linear;
	-o-transition: border 0.2s linear, top 0.2s linear;
	-ms-transition: border 0.2s linear, top 0.2s linear;
	transition: border 0.2s linear, top 0.2s linear;
}
#pageTop a:link:after,
#pageTop a:visited:after,
.sp #pageTop a:hover:after,
.sp #pageTop a:active:after {
	top: 11px;
	border-left: solid 1px #fff;
	border-top: solid 1px #fff;
}
.pc #pageTop a:hover:after,
.pc #pageTop a:active:after {
	top: 9px;
	border-left: solid 1px #333739;
	border-top: solid 1px #333739;
}

#footerMenu {
	margin: 0 -40px;
	padding: 0 40px;
	overflow: hidden;
}

#footerMenu .row {
	float: right;
	width: 60%;
	max-width: 800px;
	margin: 0 0 10px 40px;
}

#footerMenu .col {
	float: left;
	width: 33.33333333%;
	padding: 0 20px 0 0;
}

#footerMenu li {line-height: 140%;}

#footerMenu .col > ul > li {
	margin: 0 0 20px;
}

#footerMenu .col > ul > li > a {
	font-size: 83%;
	font-weight: bold;
}

#footerMenu .col > ul > li > a:link,
#footerMenu .col > ul > li > a:visited,
.sp #footerMenu .col > ul > li > a:hover,
.sp #footerMenu .col > ul > li > a:active {color: #fff;}
.pc #footerMenu .col > ul > li > a:hover,
.pc #footerMenu .col > ul > li > a:active {
	color: #1ab6ff;
	text-decoration: none;
}

#footerMenu li li:first-of-type {margin: 5px 0 0;}
#footerMenu .footerSubMenu li li:first-of-type {margin: 0;}

#footerMenu li li a {font-size: 67%}
#footerMenu li li a:link,
#footerMenu li li a:visited,
.sp #footerMenu li li a:hover,
.sp #footerMenu li li a:active {color: #999;}
.pc #footerMenu li li a:hover,
.pc #footerMenu li li a:active {
	color: #1ab6ff;
	text-decoration: none;
}

#footerMenu #footerAddress {
	font-size: 76%;
	color: #999;
}

#footerAddress p {padding: 0 0 80px;}

#footerAddress .logo {padding: 0 0 15px;}

#footerAddress .logo img {opacity: .5;}

#footerAddress dl{padding: 0 0 30px;}

#footerAddress dt {
	display: inline-block;
	margin: 0 10px 0 0;
}
#footerAddress dd {
	display: inline-block;
	margin: 0 20px 0 0;
}

#footerCopyright {
	position: absolute;
	bottom: 38px;
	left: 120px;
}
/*
#footerCopyright {
	padding: 0 0 30px;
	overflow: hidden;
}

#footerCopyright p {
	float: left;
	text-align: right;
}
*/
#footerCopyright small {font-size: 60%;}

#footerCopyright p a:link,
#footerCopyright p a:visited,
.sp #footerCopyright p a:hover,
.sp #footerCopyright p a:active {color: #707070;}
.pc #footerCopyright p a:hover,
.pc #footerCopyright p a:active  {
	text-decoration: none;
	color: #1ab6ff;
}
/*
#footerCopyright ul {
	float: right;
	overflow: hidden;
}

#footerCopyright li {
	display: inline-block;
	margin: 0 35px 0 0;
	font-size: 67%;
}

#footerCopyright li a:link,
#footerCopyright li a:visited,
.sp #footerCopyright li a:hover,
.sp #footerCopyright li a:active {color: #999;}
.pc #footerCopyright li a:hover,
.pc #footerCopyright li a:active {
	text-decoration: none;
	color: #1ab6ff;
}
*/
#footerAddress address br,
#footerCopyright br {display: none;}


/* ------ Top Page ------ */

.topMainvisualArea {
	position: relative;
	overflow: hidden;
}

.topMainvisualArea .inner {
	width: 100%;
	overflow: hidden;
}

.topMainvisualArea section {
	float: left;
	display: none;
	width: 100%;
}
.topMainvisualArea section:first-of-type {display: block;}

.topMainvisualArea section a {
	position: relative;
	display: block;
	width: 100%;
	background-color: #fff;
/*	transition: box-shadow 0.3s linear, z-index 0.3s linear;*/
}
.topMainvisualArea section a:link,
.topMainvisualArea section a:visited,
.sp .topMainvisualArea section a:hover,
.sp .topMainvisualArea section a:active {
	z-index: 1;
	color: #707070;
}
.pc .topMainvisualArea section a:hover,
.pc .topMainvisualArea section a:active {
	z-index: 100;
	text-decoration: none;
	color: #707070;
/*
	-moz-box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
	-o-box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
	-ms-box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.3);
*/
}
.topMainvisualArea section a:after {
	content: "";
	display: block;
	clear: both;
}

.topMainvisualArea .imgArea {
	float: left;
	position: relative;
	width: 66.666666%;
	overflow: hidden;
}
.pc .topMainvisualArea .imgArea:before {
	content: "";
	position: absolute;
	z-index: 3;
	display: block;
	width: 101%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0;

	-moz-transition: opacity 0.3s ease-out;
	-webkit-transition: opacity 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
}
.pc .topMainvisualArea a:hover .imgArea:before {opacity: .6;}

.pc .topMainvisualArea .imgArea:after {
	content: "詳細を見る";
	position: absolute;
	z-index: 4;
	display: block;
	width: 150px;
	height: 40px;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	font-size: 83%;
	line-height: 40px;
	color: #fff;
	text-align: center;
	border: solid 1px #fff;
	opacity: 0;

	-moz-transform: scale(1.3);
	-webkit-transform: scale(1.3);
	-o-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);

	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out, opacity 0.3s ease-out;
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.pc .topMainvisualArea a[target] .imgArea:after {content: "サイトを見る";}
.pc .topMainvisualArea section a:hover .imgArea:after {
	opacity: 1;

	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.topMainvisualArea .imgArea .img {
	height: 18.5em;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	background-size: cover;

	-moz-transition: -moz-transform 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}
.pc .topMainvisualArea a:hover .imgArea .img {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.topMainvisualArea .icon {
	position: absolute;
	z-index: 2;
	width: 60px;
	height: 60px;
	top: 50%;
	left: 50%;
	margin: -30px 0 0 -30px;
	text-indent: -9999px;
	overflow: hidden;

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.topMainvisualArea .icon:before {
	position: absolute;
	display: block;
	width: 60px;
	top: 28px;
	left: 0;
	font-family: Open Sans, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #fff;
	text-align: center;
	text-indent: 0;
}
.topMainvisualArea .icon:after {
	width: 40px;
	height: 40px;
	top: 2px;
	left: 10px;
}
.topMainvisualArea .iconPortfolio {background-color: #88c038;}
.topMainvisualArea .iconPortfolio:before {
	content: "WORK";
	letter-spacing: 0.1em;
}
.topMainvisualArea .iconPortfolio:after {background-position: -80px 0;}

.topMainvisualArea .textArea {
	float: right;
	position: relative;
	width: 33.333333%;
	height: 18.5em;
	padding: 30px 3.33333333% 0;
	text-align: center;
}

.topMainvisualArea h2 {
	position: relative;
	display: table-cell;
	width: 500px;
	height: 45px;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 90%;
	color: #000;
	line-height: 130%;
	vertical-align: middle;
	opacity: 0;

	-moz-transform: translate3d(30px, 0 ,0);
	-webkit-transform: translate3d(30px, 0 ,0);
	-o-transform: translate3d(30px, 0 ,0);
	-ms-transform: translate3d(30px, 0 ,0);
	transform: translate3d(30px, 0 ,0);
}
.topMainvisualArea section h2:before,
.topMainvisualArea section h2:after {
	content: "";
	position: absolute;
	display: block;
	width: 100px;
	height: 1px;
	left: 50%;
	margin: 0 0 0 -50px;
	background-color: #000;
}
.topMainvisualArea section h2:before {top: 0;}
.topMainvisualArea section h2:after {bottom: 0;}

.topMainvisualArea .currentImg h2 {
	opacity: 1;

	-moz-transform: translate3d(0, 0 ,0);
	-webkit-transform: translate3d(0, 0 ,0);
	-o-transform: translate3d(0, 0 ,0);
	-ms-transform: translate3d(0, 0 ,0);
	transform: translate3d(0, 0 ,0);

	-moz-transition: -moz-transform .3s cubic-bezier(.5,2.2,.61,1) .1s, opacity .3s linear .1s;
	-webkit-transition: -webkit-transform .3s cubic-bezier(.5,2.2,.61,1) .1s, opacity .3s linear .1s;
	-o-transition: -o-transform .3s cubic-bezier(.5,2.2,.61,1) .1s, opacity .3s linear .1s;
	-ms-transition: -ms-transform .3s cubic-bezier(.5,2.2,.61,1) .1s, opacity .3s linear .1s;
	transition: transform .3s cubic-bezier(.5,2.2,.61,1) .1s, opacity .3s linear .1s;
}

.topMainvisualArea .logo {
	position: relative;
	padding: 0 0 10px;
	font-size: 76%;
	opacity: 0;

	-moz-transform: translate3d(30px, 0 ,0);
	-webkit-transform: translate3d(30px, 0 ,0);
	-o-transform: translate3d(30px, 0 ,0);
	-ms-transform: translate3d(30px, 0 ,0);
	transform: translate3d(30px, 0 ,0);
}
.topMainvisualArea .currentImg .logo {
	opacity: 1;

	-moz-transform: translate3d(0, 0 ,0);
	-webkit-transform: translate3d(0, 0 ,0);
	-o-transform: translate3d(0, 0 ,0);
	-ms-transform: translate3d(0, 0 ,0);
	transform: translate3d(0, 0 ,0);

	-moz-transition: -moz-transform .3s cubic-bezier(.5,2.2,.61,1), opacity .3s linear;
	-webkit-transition: -webkit-transform .3s cubic-bezier(.5,2.2,.61,1), opacity .3s linear;
	-o-transition: -o-transform .3s cubic-bezier(.5,2.2,.61,1), opacity .3s linear;
	-ms-transition: -ms-transform .3s cubic-bezier(.5,2.2,.61,1), opacity .3s linear;
	transition: transform .3s cubic-bezier(.5,2.2,.61,1), opacity .3s linear;
}

.topMainvisualArea .text {
	position: relative;
	padding: 15px 0 0;
	font-size: 76%;
	opacity: 0;

	-moz-transform: translate3d(30px, 0 ,0);
	-webkit-transform: translate3d(30px, 0 ,0);
	-o-transform: translate3d(30px, 0 ,0);
	-ms-transform: translate3d(30px, 0 ,0);
	transform: translate3d(30px, 0 ,0);
}
.topMainvisualArea .currentImg .text {
	opacity: 1;

	-moz-transform: translate3d(0, 0 ,0);
	-webkit-transform: translate3d(0, 0 ,0);
	-o-transform: translate3d(0, 0 ,0);
	-ms-transform: translate3d(0, 0 ,0);
	transform: translate3d(0, 0 ,0);

	-moz-transition: -moz-transform .3s cubic-bezier(.5,2.2,.61,1) .2s, opacity .3s linear .2s;
	-webkit-transition: -webkit-transform .3s cubic-bezier(.5,2.2,.61,1) .2s, opacity .3s linear .2s;
	-o-transition: -o-transform .3s cubic-bezier(.5,2.2,.61,1) .2s, opacity .3s linear .2s;
	-ms-transition: -ms-transform .3s cubic-bezier(.5,2.2,.61,1) .2s, opacity .3s linear .2s;
	transition: transform .3s cubic-bezier(.5,2.2,.61,1) .2s, opacity .3s linear .2s;
}

.topMainvisualArea .btn {
	position: absolute;
	z-index: 101;
	width: 66.666666%;
	bottom: 0;
	left: 0;
}

.topMainvisualArea .btn li {
	position: absolute;
	width: 50px;
	bottom: 0;
}
.topMainvisualArea .btn .prev {right: 50px;}
.topMainvisualArea .btn .next {right: 0;}

.topMainvisualArea .btn li a {
	display: block;
	height: 50px;
	text-indent: -9999px;
	background-color: #fff;
	overflow: hidden;
}
.topMainvisualArea .btn .prev a:after,
.topMainvisualArea .btn .next a:after {
	content: "";
	position: absolute;
	display: block;
	width: 15px;
	height: 15px;
	top: 18px;

	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.topMainvisualArea .btn .prev a:after {
	left: 21px;
	border-left: solid 1px #aaa;
	border-bottom: solid 1px #aaa;

	transition: left 0.2s linear, border 0.2s linear;
}
.topMainvisualArea .btn .next a:after {
	right: 21px;
	border-right: solid 1px #aaa;
	border-top: solid 1px #aaa;

	transition: right 0.2s linear, border 0.2s linear;
}
.pc .topMainvisualArea .btn .prev a:hover:after,
.pc .topMainvisualArea .btn .prev a:active:after {
	left: 18px;
	border-left: solid 1px #3aaade;
	border-bottom: solid 1px #3aaade;
}
.pc .topMainvisualArea .btn .next a:hover:after,
.pc .topMainvisualArea .btn .next a:active:after {
	right: 18px;
	border-right: solid 1px #3aaade;
	border-top: solid 1px #3aaade;
}

.topMainvisualArea .btn .prev a:before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 30px;
	top: 10px;
	right: 0;
	background-color: #eee;
}

.topMainvisualArea .pagenation {
	position: absolute;
	z-index: 101;
	width: 66.666666%;
	height: 0;
	bottom: 0;
	left: 0;
	padding: 0 100px 0 0;
	text-align: center;
}
.spWebkit .topMainvisualArea .pagenation {padding: 0;}

.topMainvisualArea .pagenation li {
	position: relative;
	display: inline-block;
	width: 10px;
	margin: 0 10px;
	vertical-align: top;
}
/*
.topMainvisualArea .pagenation li.current {
	width: 20px;
	margin: 0 5px;
}
*/
.topMainvisualArea .pagenation li:before,
.topMainvisualArea .pagenation li:after {
	content: "";
	position: absolute;
	display: block;
	width: 10px;
	height: 1px;
	bottom: 25px;
	background-color: rgba(255, 255, 255, .3);
}
.topMainvisualArea .pagenation li:before {left: -10px;}
.topMainvisualArea .pagenation li:after {right: -10px;}
/*
.topMainvisualArea .pagenation li.current:before,
.topMainvisualArea .pagenation li.current:after {width: 5px;}
.topMainvisualArea .pagenation li.current:before {left: -5px;}
.topMainvisualArea .pagenation li.current:after {right: -5px;}
*/
.topMainvisualArea .pagenation li:first-of-type:before,
.topMainvisualArea .pagenation li:last-of-type:after {display: none;}

.topMainvisualArea .pagenation li span {
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	bottom: 20px;
	left: 0;
	text-indent: -9999px;
}
/*
.topMainvisualArea .pagenation li a:link,
.topMainvisualArea .pagenation li a:visited,
.sp .topMainvisualArea .pagenation li a:hover,
.sp .topMainvisualArea .pagenation li a:active {background-color: #fff;}
.pc .topMainvisualArea .pagenation li a:hover,
.pc .topMainvisualArea .pagenation li a:active {background-color: #3aaade;}

.topMainvisualArea .pagenation li.current span {
	background-color: #3aaade;
	width: 20px;
	height: 20px;
	bottom: 15px;
	background-color: rgba(58, 170, 222, .6);
}
*/
.topMainvisualArea .pagenation li span:after {
	content: "";
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;
	top: 0;
	left: 0;
	background-color: #fff;

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
}
.topMainvisualArea .pagenation li.current span:after {background-color: #3aaade;}

.topMainvisualArea .pagenation li span:before {
	content: "";
	position: absolute;
	display: none;
	width: 10px;
	height: 10px;
	top: 0;
	left: 0;
	background-color: #3aaade;
/*	border: solid 1px #3aaade;*/

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
/*
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
*/

}

.topMainvisualArea .pagenation li.current span:before {
	display: block;

	-moz-animation: pagenation 1s linear infinite normal;
	-webkit-animation: pagenation 1s linear infinite normal;
	-o-animation: pagenation 1s linear infinite normal;
	-ms-animation: pagenation 1s linear infinite normal;
	animation: pagenation 1s linear infinite normal;
}
@-moz-keyframes pagenation {
	0% {
		-moz-transform: scale(1);
		opacity: .6;
	}
	100% {
		-moz-transform: scale(3);
		opacity: 0;
	}
}
@-webkit-keyframes pagenation {
	0% {
		-webkit-transform: scale(1);
		opacity: .6;
	}
	100% {
		-webkit-transform: scale(3);
		opacity: 0;
	}
}
@-o-keyframes pagenation {
	0% {
		-o-transform: scale(1);
		opacity: .6;
	}
	100% {
		-o-transform: scale(3);
		opacity: 0;
	}
}
@-ms-keyframes pagenation {
	0% {
		-ms-transform: scale(1);
		opacity: .6;
	}
	100% {
		-ms-transform: scale(3);
		opacity: 0;
	}
}
@keyframes pagenation {
	0% {
		transform: scale(1);
		opacity: .6;
	}
	100% {
		transform: scale(3);
		opacity: 0;
	}
}


/* ------ News / Column ------ */

.news .contentsBox h2,
.column .contentsBox h2 {
	margin: 0 auto 20px;
	padding: 30px 0 10px;
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 120%;
	font-weight: bold;
	color: #000;
	text-align: left;
	border-bottom: solid 1px #eee;
}
.news .contentsBox h2:first-of-type,
.column .contentsBox h2:first-of-type {padding: 30px 0 10px;}

.column .time {padding-bottom: 0;}


/* ------ Contact ------ */

#contactBox {
	margin: 0 0 20px;
	padding: 0;
	font-family: Open Sans, Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 200%;
	text-align: center;
	background-color: #f1f5f8;
}

#contactBox a {
	display: block;
	padding: 20px 0;
}
#contactBox a:link,
#contactBox a:visited,
.sp #contactBox a:hover,
.sp #contactBox a:active {color: #dd3ca2;}
.pc #contactBox a:hover,
.pc #contactBox a:active {
	color: #f95dc0;
	text-decoration: none;
}

#telBox {
	display: block;
	margin: 0 0 20px;
	padding: 0;
	font-family: 'Noto Sans Japanese', '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 90%;
	text-align: center;
	letter-spacing: 0.03em;
	background-color: #f1f5f8;
}

#telBox a {
	display: block;
	padding: 25px 0 20px;
	cursor: text;
}
#telBox a:link,
#telBox a:visited,
#telBox a:hover,
#telBox a:active {
	color: #707070;
	text-decoration: none;
}

#telBox a:link span {
	display: block;
	padding: 0 0 5px;
	font-family: Open Sans, Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 220%;
	letter-spacing: 0;
}
#telBox a:link span,
#telBox a:visited span,
#telBox a:hover span,
#telBox a:active span {color: #dd3ca2;}


/* ------ Sitemap ------ */

.sitemap .contentsBox {padding-bottom: 40px;}

.sitemap h2 {
	margin: 0 0 20px;
	padding: 30px 0 10px;
	font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 100%;
	font-weight: bold;
	color: #000;
	text-align: left;
	border-bottom: solid 1px #eee;
}
.sitemap h2:first-of-type {padding: 30px 0 10px;}

.sitemap ul {padding-bottom: 0;}

.sitemap ul li {
	padding-bottom: 0;
	padding-left: 0;
	font-weight: bold;
}

.sitemap ul li:after {display: none;}
.sitemap ul li ul li {
	padding-left: 1.2em;
	font-weight: normal;
}
.sitemap ul li ul li:after {display: block;}

.sitemap ul li a {
	display: inline-block;
	margin-bottom: 10px;
}
.sitemap ul li ul li a {margin-bottom: 0;}
.sitemap ul li ul li:last-of-type a {margin-bottom: 10px;}

.sitemap h2 a:link,
.sitemap h2 a:visited,
.sp .sitemap h2 a:hover,
.sp .sitemap h2 a:active {color: #000;}
.pc .sitemap h2 a:hover,
.pc .sitemap h2 a:active {color: #1ab6ff;}


/*---------------------------------------------
	for 1420px-
  ---------------------------------------------*/

@media screen and (min-height: 700px) and (min-width: 1420px) {

	#pageTitle h1,
	#pageTitle .copy {font-size: 210%;}

	#container {padding: 0 40px 0 140px;}

	#gnav {margin: 0 0 0 -140px;}
	#gnav:after {
		width: 100px;
		margin: 0 0 0 -100px;
	}

	#gnav nav {width: 100px;}

	#mainNav > li:nth-of-type(2) > a {top: 90px;}
	#mainNav > li:nth-of-type(3) > a {top: 180px;}
	#mainNav > li:nth-of-type(4) > a {top: 270px;}
	#mainNav > li:nth-of-type(5) > a {top: 360px;}
	#mainNav > li:nth-of-type(6) > a {top: 450px;}

	#mainNav > li > a {
		width: 100px;
		height: 90px;
		padding: 48px 0 0;
		font-size: 76%;
	}
	#mainNav > li > a:after {
		top: 12px;
		left: 30px;
	}

	#mainNav > li > ul {left: 100px;}

	#subNav a {left: 32px;}
	#subNavNews a {bottom: 182px;}
	#subNavEnglish a {bottom: 120px;}

	#bgImg,
	#bgImgDummy,
	#pageTitle {margin: 0 0 0 -140px;}
	#pageTitle {padding: 0 0 0 100px;}

	footer {
		margin-left: -140px;
		padding-left: 140px;
	}

	#footerCopyright {left: 140px;}

}



/*---------------------------------------------
	for -1249px
  ---------------------------------------------*/

@media screen and (min-width: 980px) and (max-width: 1249px) {

	.col.half {
		float: none;
		width: auto;
	}

	.half.gutter:first-of-type {padding-right: 0;}
	.half.gutter:last-of-type {padding-left: 0;}

	.col.oneThird {
		float: none;
		width: auto;
	}
	.oneThird.gutter:first-of-type,
	.oneThird.gutter:nth-of-type(2),
	.oneThird.gutter:last-of-type {
		padding-left: 0;
		padding-right: 0;
	}

	.hideNarrow {display: none;}

	.showNarrow {display: block;}
	br.showNarrow {display: inline;}

	#logo {width: 150px;}

	#logo a {
		height: 150px;
		padding: 40px 0 0 15px;
	}

	#logo p {margin: 0 0 15px;}
	#logo p:first-of-type img {width: 105px;}
	#logo p:last-of-type img {width: 122px;}

	#pageTitle h1,
	#pageTitle .copy {font-size: 150%;}

	#pageTitle h1 br,
	#pageTitle .copy br {display: none;}

	#pageTitle .text {font-size: 90%;}

	.contentsBox > h2,
	.listBox4 > h2 {font-size: 130%;}

	.tag li {width: 50%;}
	.tag li:nth-of-type(3n+1) {
		clear: none;
		padding-left: 10px;
	}
	.tag li:nth-of-type(2n+1) {
		clear: both;
		padding-left: 0;
	}
	.tag li:nth-of-type(3n) {padding-right: 10px;}
	.tag li:nth-of-type(2n) {padding-right: 0;}

	.mainvisual2 .imgArea {width: 50%;}

	.mainvisual2 .textArea {width: 50%;}

	.imageList1 dt {font-size: 90%;}

	.imageList1 em {
		display: block;
		margin: 0 auto 15px;
		font-size: 350%;
	}

	.listBox2 section {width: 50%}

	.listBox3 section {width: 50%}

	.listBox3 section:nth-of-type(1) a {background-color: #588fe3;}
	.listBox3 section:nth-of-type(2) a,
	.listBox3 section:nth-of-type(3) a {background-color: #3aaade;}
	.listBox3 section:nth-of-type(4) a,
	.listBox3 section:nth-of-type(5) a {background-color: #27c0dc;}
	.listBox3 section:nth-of-type(6) a,
	.listBox3 section:nth-of-type(7) a {background-color: #02aa9f;}
	.listBox3 section:nth-of-type(8) a,
	.listBox3 section:nth-of-type(9) a {background-color: #219e62;}
	.listBox3 section:nth-of-type(10) a,
	.listBox3 section:nth-of-type(11) a {background-color: #629f44;}
	.listBox3 section:nth-of-type(12) a,
	.listBox3 section:nth-of-type(13) a {background-color: #899f44;}

	.listBox4 section {width: 50%}

	.listBox4 .portfolioLink{
		margin-top: -30px;
		padding: 0 5.2% 20px;
	}

	.contactList address {font-size: 83%;}

	#footerAddress address br {display: inline;}

	.topMainvisualArea .textArea,
	.topMainvisualArea .imgArea,
	.topMainvisualArea .btn,
	.topMainvisualArea .pagenation {width: 50%;}
/*	.topMainvisualArea .pagenation {padding: 0 100px 0 0;}*/

	.topMainvisualArea .textArea {
		padding-left: 5%;
		padding-right: 5%;
	}

}



/*---------------------------------------------
	for -979px
  ---------------------------------------------*/

@media screen and (max-width: 979px) {

	body {background-color: #111213;}

	.hideTablet {display: none;}

	.showTablet {display: block;}
	br.showTablet {display: inline;}

	#container {
		height: auto;
		margin: 0;
		padding: 0;
		-moz-transition: -moz-transform 0.3s ease-in-out;
		-webkit-transition: -webkit-transform 0.3s ease-in-out;
		-o-transition: -o-transform 0.3s ease-in-out;
		-ms-transition: -ms-transform 0.3s ease-in-out;
		transition: transform 0.3s ease-in-out;
	}

	#tagline {
		position: absolute;
		z-index: 5;
		width: 100%;
		height: auto;
		right: 0;
		bottom: 30px;
		padding: 0 15px;
		color: #707070;
		text-align: center;
	}
	.fadeOut #tagline {display: none;}
	.spGnavPerspective #tagline {display: none;}

	header {
		position: absolute;
		top: 15px;
		left: 15px;
	}

	#logo {width: 150px;}

	#logo a {
		height: 150px;
		padding: 40px 0 0 15px;
	}

	#logo p {margin: 0 0 15px;}
	#logo p:first-of-type img {width: 105px;}
	#logo p:last-of-type img {width: 122px;}
/*
	#logo li {font-size: 60%;}
*/
	#spGnavBtn {
		position: absolute;
		z-index: 10001;
		display: block;
		width: 24px;
		height: 22px;
		top: 18px;
		right: 15px;
		padding: 10px 0;
		cursor: pointer;
		opacity: .7;

		-moz-transition: opacity 0.2s linear, right 0.3s ease-in-out;
		-webkit-transition: opacity 0.2s linear, right 0.3s ease-in-out;
		-o-transition: opacity 0.2s linear, right 0.3s ease-in-out;
		-ms-transition: opacity 0.2s linear, right 0.3s ease-in-out;
		transition: opacity 0.2s linear, right 0.3s ease-in-out;
	}
	#spGnavBtn:before,
	#spGnavBtn:after {
		content: "";
		position: absolute;
		z-index: 100;
		display: block;
		width: 24px;
		height: 2px;
		right: 0;
		background-color: #fff;

		-moz-transition: -moz-transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, width 0.3s linear;
		-webkit-transition: -webkit-transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, width 0.3s linear;
		-o-transition: -o-transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, width 0.3s linear;
		-ms-transition: -ms-transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, width 0.3s linear;
		transition: transform 0.3s ease-in-out, top 0.3s linear, bottom 0.3s linear, width 0.3s linear;
	}
	#spGnavBtn:before {top: 0;}
	#spGnavBtn:after {bottom: 0;}
	.pc #spGnavBtn:hover {opacity: 1;}
	.pc #spGnavBtn:hover:before {width: 20px;}

	.strength #spGnavBtn:before,
	.strength #spGnavBtn:after {background-color: #111213;}

	#spGnavBtn a {
		position: absolute;
		display: block;
		width: 24px;
		height: 2px;
		right: 0;
		background-color: #fff;
		text-indent: -9999px;
		overflow: hidden;

		-moz-transition: width 0.3s linear;
		-webkit-transition: width 0.3s linear;
		-o-transition: width 0.3s linear;
		-ms-transition: width 0.3s linear;
		transition: width 0.3s linear;
	}
	.pc #spGnavBtn:hover a {width: 15px;}

	.strength #spGnavBtn a {background-color: #111213;}

	.spGnavOpen #spGnavBtn:before {
		width: 24px !important;
		top: 10px;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.spGnavOpen #spGnavBtn:after {
		width: 24px !important;
		bottom: 10px;
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.spGnavOpen #spGnavBtn a {width: 0 !important;}

	.spGnavOpen #container {
		-moz-transform: translate3d(-265px, 0, 0);
		-webkit-transform: translate3d(-265px, 0, 0);
		-o-transform: translate3d(-265px, 0, 0);
		-ms-transform: translate3d(-265px, 0, 0);
		transform: translate3d(-265px, 0, 0);
	}
	.spGnavPerspective #container {height: 100%;}

	#gnav {
		position: absolute;
		width: 265px;
		top: 0;
		right: 0;
		padding: 0 0 30px;
		background-color: #111213;
		overflow: hidden;

		-moz-transition: -moz-transform 0.3s ease-in-out;
		-webkit-transition: -webkit-transform 0.3s ease-in-out;
		-o-transition: -o-transform 0.3s ease-in-out;
		-ms-transition: -ms-transform 0.3s ease-in-out;
		transition: transform 0.3s ease-in-out;
	}

	.spGnavOpen #gnav {
		-moz-transform: translate3d(265px, 0, 0);
		-webkit-transform: translate3d(265px, 0, 0);
		-o-transform: translate3d(265px, 0, 0);
		-ms-transform: translate3d(265px, 0, 0);
		transform: translate3d(265px, 0, 0);
	}

	.spGnavPerspective #gnav {
		height: 100%;

		-moz-perspective: 1000px;
		-webkit-perspective: 1000px;
		-o-perspective: 1000px;
		-ms-perspective: 1000px;
		perspective: 1000px;
	}

	#gnav nav {
		-moz-transform: rotateY(-91deg);
		-webkit-transform: rotateY(-91deg);
		-o-transform: rotateY(-91deg);
		-ms-transform: rotateY(-91deg);
		transform: rotateY(-91deg);

		-moz-transform-origin: right top;
		-webkit-transform-origin: right top;
		-o-transform-origin: right top;
		-ms-transform-origin: right top;
		transform-origin: right top;

		-moz-transition: -moz-transform 0.3s ease-in-out;
		-webkit-transition: -webkit-transform 0.3s ease-in-out;
		-o-transition: -o-transform 0.3s ease-in-out;
		-ms-transition: -ms-transform 0.3s ease-in-out;
		transition: transform 0.3s ease-in-out;
	}

	.spGnavOpen #gnav nav {
		-moz-transform: rotateY(0deg);
		-webkit-transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}

	#spGnavCover {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #000;
		opacity: 0;
		-moz-transition: opacity 0.3s linear, z-index 0.3s linear;
		-webkit-transition: opacity 0.3s linear, z-index 0.3s linear;
		-o-transition: opacity 0.3s linear, z-index 0.3s linear;
		-ms-transition: opacity 0.3s linear, z-index 0.3s linear;
		transition: opacity 0.3s linear, z-index 0.3s linear;
	}
	.spGnavOpen #spGnavCover {
		z-index: 10000;
		opacity: .6;
	}

	#mainNav li {
		width: 265px;
		position: relative;
	}

	#mainNav a:first-of-type {
		position: relative;
		display: block;
		height: 60px;
		padding: 17px 15px 0 60px;
		font-size: 90%;
		overflow: hidden;
		-moz-transition: color 0.2s linear;
		-webkit-transition: color 0.2s linear;
		-o-transition: color 0.2s linear;
		-ms-transition: color 0.2s linear;
		transition: color 0.2s linear;
	}
	#mainNav a:first-of-type:link,
	#mainNav a:first-of-type:visited,
	.sp #mainNav a:first-of-type:hover,
	.sp #mainNav a:first-of-type:active {color: #bbb;}
	.pc #mainNav a:first-of-type:hover,
	.pc #mainNav a:first-of-type:active,
	#mainNav .current > a:first-of-type,
	#mainNav .parent > a:first-of-type {
		color: #fff;
		text-decoration: none;
	}
	#mainNav #gnavContact > a:first-of-type {background-color: #dd3ca2;}
	#mainNav #gnavContact > a:first-of-type:link,
	#mainNav #gnavContact > a:first-of-type:visited,
	.sp #mainNav #gnavContact > a:first-of-type:hover,
	.sp #mainNav #gnavContact > a:first-of-type:active {color: #f1b1da;}
	.pc #mainNav #gnavContact > a:first-of-type:hover,
	.pc #mainNav #gnavContact > a:first-of-type:active,
	#mainNav #gnavContact.current > a:first-of-type,
	#mainNav #gnavContact.parent > a:first-of-type {color: #fff;}

	#mainNav > li > a:first-of-type:after {
		content: "";
		position: absolute;
		display: block;
		width: 40px;
		height: 40px;
		top: 10px;
		left: 10px;
		background-image: url(../images/icon.png);
		background-repeat: no-repeat;
		-moz-background-size: 420px 1040px;
		-webkit-background-size: 420px 1040px;
		-o-background-size: 420px 1040px;
		-ms-background-size: 420px 1040px;
		background-size: 420px 1040px;

		-moz-transition: opacity 0.2s linear;
		-webkit-transition: opacity 0.2s linear;
		-o-transition: opacity 0.2s linear;
		-ms-transition: opacity 0.2s linear;
		transition: opacity 0.2s linear;
	}
	#mainNav > li > a:first-of-type:link:after,
	#mainNav > li > a:first-of-type:visited:after,
	.sp #mainNav > li > a:first-of-type:hover:after,
	.sp #mainNav > li > a:first-of-type:active:after {opacity: .5;}
	.pc #mainNav > li > a:first-of-type:hover:after,
	.pc #mainNav > li > a:first-of-type:active:after,
	#mainNav > li.current > a:first-of-type:after,
	#mainNav > li.parent > a:first-of-type:after {opacity: 1;}
	#mainNav #gnavContact > a:link:after,
	#mainNav #gnavContact > a:visited:after,
	.sp #mainNav #gnavContact > a:hover:after,
	.sp #mainNav #gnavContact > a:active:after {opacity: .7;}
	.pc #mainNav #gnavContact > a:hover:after,
	.pc #mainNav #gnavContact > a:active:after,
	#mainNav #gnavContact.current > a:first-of-type:after,
	#mainNav #gnavContact.parent > a:first-of-type:after {opacity: 1;}

	#gnavService > a:first-of-type:after {background-position: -40px 0;}
	#gnavPortfolio > a:first-of-type:after {background-position: -80px 0;}
	#gnavCompany > a:first-of-type:after {background-position: -120px 0;}
	#gnavRecruit > a:first-of-type:after {background-position: -160px 0;}
	#gnavColumn > a:first-of-type:after {background-position: -200px 0;}
	#gnavContact > a:first-of-type:after {background-position: -240px 0;}

	#mainNav a:first-of-type span {position: relative;}

	#mainNav a:first-of-type:before {
		content: "";
		position: absolute;
		display: block;
		width: 130%;
		height: 100%;
		top: 0;
		left: 10%;
		background-color: #0090d4;
		opacity: 0.3;

		-moz-transform: translateX(-120%) skewX(15deg);
		-webkit-transform: translateX(-120%) skewX(15deg);
		-o-transform: translateX(-120%) skewX(15deg);
		-ms-transform: translateX(-120%) skewX(15deg);
		transform: translateX(-120%) skewX(15deg);

		-moz-transition: left 0.2s ease-in-out, opacity 0.2s linear;
		-webkit-transition: left 0.2s ease-in-out, opacity 0.2s linear;
		-o-transition: left 0.2s ease-in-out, opacity 0.2s linear;
		-ms-transition: left 0.2s ease-in-out, opacity 0.2s linear;
		transition: left 0.2s ease-in-out, opacity 0.2s linear;
	}
	.pc #mainNav a:first-of-type:hover:before,
	#mainNav .current > a:first-of-type:before {
		left: 140%;
		opacity: 1;
	}
	#mainNav .current.parent > a:first-of-type:before {
		left: 10%;
		opacity: 0.3;
	}
	#mainNav #gnavContact > a:before {background-color: #f95dc0;}

	#mainNav li ul {
		position: relative;
		display: none;
	}

	#mainNav > li > ul {background-color: #252829;}

	#mainNav > li > ul > li > a:first-of-type {
		height: 55px;
		padding: 14px 15px 0 30px;
		font-size: 83%;
	}

	#mainNav > li > ul > li > ul {background-color: #333739;}

	#mainNav > li > ul > li > ul > li > a:first-of-type {
		height: 55px;
		padding: 14px 15px 0 45px;
		font-size: 83%;
	}

	#mainNav li ul:after {
		content: "";
		position: absolute;
		z-index: 2;
		display: block;
		width: 0;
		height: 0;
		top: 0;
		left: 40px;
		border-top: solid 11px #111213;
		border-left: solid 11px transparent;
		border-right: solid 11px transparent;
	}
	#mainNav > li > ul > li >ul:after {border-top: solid 11px #252829;}

	#mainNav .spLocalNavBtn {
		position: absolute;
		width: 39px;
		height: 39px;
		right: 10px;
		top: 10px;
		text-indent: -9999px;
		overflow: hidden;
		border: solid 2px #fff;
		opacity: .4;

		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		border-radius: 50%;

		-moz-transition: opacity 0.3s linear;
		-webkit-transition: opacity 0.3s linear;
		-o-transition: opacity 0.3s linear;
		-ms-transition: opacity 0.3s linear;
		transition: opacity 0.3s linear;
	}
	#mainNav .spLocalNavBtn:before {
		content: "";
		position: absolute;
		display: block;
		width: 17px;
		height: 1px;
		top: 17px;
		left: 9px;
		background-color: #fff;

		-moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out, left 0.3s ease-in-out;
		-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out, left 0.3s ease-in-out;
		-o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out, left 0.3s ease-in-out;
		-ms-transition: -ms-transform 0.3s ease-in-out, width 0.3s ease-in-out, left 0.3s ease-in-out;
		transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, left 0.3s ease-in-out;
	}
	#mainNav .spLocalNavBtn:after {
		content: "";
		position: absolute;
		display: block;
		width: 1px;
		height: 17px;
		top: 9px;
		left: 17px;
		background-color: #fff;

		-moz-transition: -moz-transform 0.3s ease-in-out;
		-webkit-transition: -webkit-transform 0.3s ease-in-out;
		-o-transition: -o-transform 0.3s ease-in-out;
		-ms-transition: -ms-transform 0.3s ease-in-out;
		transition: transform 0.3s ease-in-out;
	}
	.pc #mainNav .spLocalNavBtn:hover {opacity: 1;}
	.pc #mainNav .spLocalNavBtn:hover:before,
	.pc #mainNav .spLocalNavBtn:hover:after {
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	#mainNav li ul .spLocalNavBtn {top: 8px;}

	#mainNav .spLocalNavOpen > .spLocalNavBtn:before {
		width: 0;
		left: 18px;
		-moz-transform: rotate(270deg);
		-webkit-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
		transform: rotate(270deg);
	}
	#mainNav .spLocalNavOpen > .spLocalNavBtn:after {
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	.pc #mainNav .spLocalNavOpen > .spLocalNavBtn:hover:after {
		-moz-transform: rotate(270deg);
		-webkit-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
		transform: rotate(270deg);
	}

	#subNav {text-align: center;}

	#subNav li {
		display: inline-block;
		margin: 30px 10px 0;
	}

	#subNav a {
		display: block;
		width: 39px;
		height: 39px;
		text-align: center;
		overflow: hidden;
		border: solid 2px rgba(255, 255, 255, .4);

		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		-o-border-radius: 50%;
		-ms-border-radius: 50%;
		border-radius: 50%;

		-moz-transition: color 0.2s linear, background-color 0.2s, linear;
		-webkit-transition: color 0.2s linear, background-color 0.2s, linear;
		-o-transition: color 0.2s linear, background-color 0.2s, linear;
		-ms-transition: color 0.2s linear, background-color 0.2s, linear;
		transition: color 0.2s linear, background-color 0.2s, linear;
	}
	#subNavNews a:before {
		content: "NEWS";
		font-family: Open Sans, Arial, Helvetica, sans-serif;
		font-size: 11px;
		line-height: 35px;
	}
	#subNavEnglish a:before {
		content: "EN";
		font-family: Open Sans, Arial, Helvetica, sans-serif;
		font-size: 13px;
		line-height: 35px;
	}
	#subNav a:link,
	#subNav a:visited,
	.sp #subNav a:hover,
	.sp #subNav a:active {color: #bbb;}
	.pc #subNav a:hover,
	.pc #subNav a:active {
		color: #111213;
		text-decoration: none;
		background-color: #fff;
	}

	#subNav a span {
		display: block;
		text-indent: -9999px;
		overflow: hidden;
	}

	#bgImg,
	#bgImgDummy {
		position: absolute;
		z-index: 2;
		height: 400px;
		margin: 0;
		padding: 0;
		top: auto;
	}

	#pageTitle {
		position: relative;
		height: 400px;
		margin: 0;
		padding: 180px 15px 0;
	}

	#pageTitle > div {padding: 0;}
	#pageTitle > div:before {display: none;}

	#loader {top: 50px;}
	#loader:before {display: none;}

	#pageTitle .textArea {
		display: table-cell;
		width: 980px;
		height: 13em;
		top: 0;
		padding: 0;
		vertical-align: middle;
	}

	#pageTitle h1,
	#pageTitle .copy {font-size: 150%;}

	#pageTitle .copy br {display: none;}

	#breadCrumb {display: none;}

	.fadeOut #container,
	.fadeOut #contentsArea {height: 100%;}

	#contentsArea {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	#contentsDummy1,
	#contentsDummy2,
	#contentsDummy3 {top: 0;}
	.contentsBox > h1,
	.contentsBox > h2,
	.contentsBox > h3,
	.listBox2 > h2,
	.listBox4 > h2,
	.listBox5 > h2,
	.contentsBox > p,
	.contentsBox > ul,
	.contentsBox > ol,
	.contentsBox > dl,
	.contentsBox > table,
	.contentsBox > form > table,
	.contentsBox .row,
	.sectionBox1,
	.contentsBox #btnPrivacy,
	#privacyArea,
	#contactBox,
	#telBox {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}

	.tag {padding: 30px 5% 15px;}

	.mainvisual1 {padding: 40px 5%;}

	.mainvisual1 h1,
	.mainvisual1 .text {
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}

	.contentsBox {padding: 40px 5% 20px;}

	.listBox2 > h2,
	.listBox4 > h2,
	.listBox5 > h2 {padding: 40px 5%;}

	.listBox2,
	.tag + .listBox4 {background-color: #fff;}

	.listBox4 .portfolioLink{
		padding: 0 5% 20px;
	}

	footer {
		margin: 0;
		padding: 30px 5% 50px;
	}

	#pageTop {
		z-index: 2;
		top: 30px;
		right: 5%;
	}

	#footerAddress {
		max-width: 720px;
		margin: 0 auto;
		text-align: center;
	}

	#footerAddress p {padding: 0 0 30px;}
	#footerAddress .logo {padding: 0 0 15px;}

	#footerAddress address,
	#footerAddress dl {margin: 0;}

	#footerAddress dd:last-of-type {margin: 0;}


	#footerMenu .row {
		float: none;
		width: auto;
		max-width: none;
		margin: 0;
	}

	#footerMenu .col {
		float: none;
		display: block;
		width: auto;
		padding: 0;
	}

	#footerMenu ul {display: none;}
	#footerMenu .footerSubMenu,
	#footerMenu .footerSubMenu ul {
		display: block;
		text-align: center;
	}

	#footerMenu .footerSubMenu ul li {
		display: inline-block;
		padding: 0 10px;
	}
/*
	#footerCopyright ul {
		float: none;
		margin: 10px 0;
		text-align: center;
	}

	#footerCopyright li {margin: 0 10px;}
*/

	#footerCopyright {position: static;}

	#footerCopyright p {
		margin: 0 0 15px;
		text-align: center;
		line-height: 100%;
	}

}



/*---------------------------------------------
	for -719px
  ---------------------------------------------*/

@media screen and (max-width: 719px) {

	.col.half {
		float: none;
		width: auto;
	}

	.half.gutter:first-of-type {padding-right: 0;}
	.half.gutter:last-of-type {padding-left: 0;}

	.col.oneThird {
		float: none;
		width: auto;
	}
	.oneThird.gutter:first-of-type,
	.oneThird.gutter:nth-of-type(2),
	.oneThird.gutter:last-of-type {
		padding-left: 0;
		padding-right: 0;
	}

	.hideNarrow,
	.hideFablet {display: none;}

	.showNarrow,
	.showFablet {display: block;}
	br.showNarrow,
	br.showFablet {display: inline;}

	#pageTitle h1,
	#pageTitle .copy {font-size: 150%;}

	#pageTitle h1 br,
	#pageTitle .copy br {display: none;}

	#pageTitle .text {font-size: 90%;}

	.contentsBox > h2,
	.listBox4 > h2 {font-size: 130%;}

	.tag li {width: 50%;}
	.tag li:nth-of-type(3n+1) {
		clear: none;
		padding-left: 10px;
	}
	.tag li:nth-of-type(2n+1) {
		clear: both;
		padding-left: 0;
	}
	.tag li:nth-of-type(3n) {padding-right: 10px;}
	.tag li:nth-of-type(2n) {padding-right: 0;}

	.mainvisual2 .imgArea {width: 50%;}

	.mainvisual2 .textArea {width: 50%;}

	.imageList1 dt {font-size: 90%;}

	.imageList1 em {
		display: block;
		margin: 0 auto 15px;
		font-size: 350%;
	}

	.contentsBox .serviceList li {width: 50%;}

	.listBox2 section {width: 50%}

	.listBox3 section {width: 50%}

	.listBox3 section:nth-of-type(1) a {background-color: #588fe3;}
	.listBox3 section:nth-of-type(2) a,
	.listBox3 section:nth-of-type(3) a {background-color: #3aaade;}
	.listBox3 section:nth-of-type(4) a,
	.listBox3 section:nth-of-type(5) a {background-color: #27c0dc;}
	.listBox3 section:nth-of-type(6) a,
	.listBox3 section:nth-of-type(7) a {background-color: #02aa9f;}
	.listBox3 section:nth-of-type(8) a,
	.listBox3 section:nth-of-type(9) a {background-color: #219e62;}
	.listBox3 section:nth-of-type(10) a,
	.listBox3 section:nth-of-type(11) a {background-color: #629f44;}
	.listBox3 section:nth-of-type(12) a,
	.listBox3 section:nth-of-type(13) a {background-color: #899f44;}

	.listBox4 section {width: 50%}

	.listBox4 .portfolioLink{
		margin-top: -30px;
	}

	.tabNav li {font-size: 76%;}

	.tabNav li a {padding: 0 10px;}

	.contactList address {font-size: 76%;}
/*
	#modalContents .btnClose {right: 15px;}

	#modalContents {padding: 50px 0;}

	#modalContents .title p {padding-left: 20px;}
*/
	.topMainvisualArea .textArea,
	.topMainvisualArea .imgArea,
	.topMainvisualArea .btn,
	.topMainvisualArea .pagenation {width: 50%;}
/*	.topMainvisualArea .pagenation {padding: 0 100px 0 0;}*/

	.topMainvisualArea .textArea {
		padding-left: 5%;
		padding-right: 5%;
	}

}



/*---------------------------------------------
	for -479px
  ---------------------------------------------*/

@media screen and (max-width: 479px) {

	.hideSP {display: none;}

	.showSP {display: block;}
	br.showSP {display: inline;}

	#logo {width: auto;}

	#logo a {
		width: 90px;
		height: 90px;
		padding: 0;
	}

	#logo p:first-of-type {
		margin: 0;
		padding: 30px 0 0;
		text-align: center;
	}
	#logo p:last-of-type {display: none;}
	#logo p:first-of-type img {
		width: 70px;
		vertical-align: middle;
	}
/*
	#logo ul {display: none;}

	header {
		height: 50px;
		padding: 10px 15px 0;
	}

	#logo p {margin: 0 10px 0 0;}

	#logo img {width: 100px;}

	#logo li {font-size: 60%}
*/
	#spGnavBtn + label {top: 15px;}
/*
	#bgImg {height: 100px;}

	#pageTitle {padding: 20px 15px;}
*/

	#bgImg,
	#bgImgDummy {height: 300px;}

	#pageTitle {
		height: 300px;
		padding: 110px 15px 0;
	}

	#pageTitle .textArea {height: 11.5em;}

	#pageTitle h1,
	#pageTitle .copy {
		margin: 0 0 15px;
		font-size: 110%;
	}

	#pageTitle .list {margin: 0 0 15px;}

	#pageTitle .list li {
		margin: 0;
		font-size: 76%;
	}

	#pageTitle .btn a {display: block;}

	#container {min-width: 320px;}

	.mainvisual2 .imgArea,
	.mainvisual2 .textArea {
		float: none;
		width: auto;
	}

	.mainvisual2 .imgArea .img {
		height: 0;
		padding: 60.4166666% 0 0;
	}

	.mainvisual2 .textArea {
		height: auto;
		padding: 20px 5%;
	}

	.mainvisual2 .text {font-size: 83%;}

	.listBox1 section a {min-height: 150px;}

	.listBox1 .img,
	.listBox1 .icon:before {width: 120px;}

	.listBox1 .img span {
		width: 90px;
		height: 90px;
	}

	.listBox1 img {
		width: 146px;
		height: 90px;
		margin: 0 0 0 -73px;
	}

	.listBox1 .textArea {
		width: auto;
		padding: 20px 5% 20px 0;
	}

	.listBox1 .icon:after {
		left: 10px;
		margin: auto 0;
	}

	.listBox2 section {
		float: none;
		width: auto;
	}

	.listBox2 section a {height: 16em;}

	.listBox2 .icon:after {
		height: 40px;
		-moz-background-size: 420px 1040px;
		-webkit-background-size: 420px 1040px;
		-o-background-size: 420px 1040px;
		-ms-background-size: 420px 1040px;
		background-size: 420px 1040px;
	}

	.listBox2 .textArea {padding: 40px 0 0;}

	.listBox2 section h2 {padding: 0 5% 10px;}

	.listBox3 section {
		float: none;
		width: auto;
	}

	.listBox3 a {
		height: 16em;
		padding: 100px 5% 0;
	}

	.listBox3 a:after {
		top: 20px;
		margin: 0 0 0 -50px;
	}

	.listBox3 section:nth-of-type(1) a {background-color: #588fe3;}
	.listBox3 section:nth-of-type(2) a {background-color: #3aaade;}
	.listBox3 section:nth-of-type(3) a {background-color: #27c0dc;}
	.listBox3 section:nth-of-type(4) a {background-color: #02aa9f;}
	.listBox3 section:nth-of-type(5) a {background-color: #219e62;}
	.listBox3 section:nth-of-type(6) a {background-color: #629f44;}
	.listBox3 section:nth-of-type(7) a {background-color: #899f44;}
	.listBox3 section:nth-of-type(8) a {background-color: #b1aa33;}
	.listBox3 section:nth-of-type(9) a {background-color: #c9ad3a;}
	.listBox3 section:nth-of-type(10) a {background-color: #cb952d;}
	.listBox3 section:nth-of-type(11) a {background-color: #588fe3;}
	.listBox3 section:nth-of-type(12) a {background-color: #3aaade;}

	.listBox3 .text {font-size: 83%;}

	.listBox4 section {
		float: none;
		width: auto;
	}

	.listBox4 section a {height: auto;}

	.listBox4 section > a h2,
	.listBox4 section > a h3 {padding: 10px 5% 5px;}

	.listBox4 .text {padding: 0 5% 25px;}

	.listBox4 .portfolioLink{
		text-align: center;
		margin-top: -30px;
	}

	.listBox5 .imgArea {
		position: relative;
		width: auto;
		height: 200px;
		min-height: auto;
	}

	.listBox5 .title {
		height: 200px;
		padding: 20px 5%;
	}

	.listBox5 .textArea {width: auto;}

	.listBox5 .text {
		height: auto;
		padding: 20px 5%;
	}

	.icon:after {
		width: 100px;
		height: 70px;
		background-size: 300px 742px;
	}
	.iconSmart4meBiz:after {background-position: -100px -29px;}
	.iconSmart4me:after {background-position: -100px -29px;}
	.iconCrossMedia:after {background-position: -200px -29px;}
	.iconRWD:after {background-position: 0 -100px;}
	.iconSP:after {background-position: -100px -100px;}
	.iconLarge:after {background-position: -200px -100px;}
	.iconSystem:after {background-position: 0 -171px;}
	.iconInternational:after {background-position: -100px -171px;}
	.iconRecruitTool:after {background-position: -200px -171px;}
	.iconResearch:after {background-position: 0 -243px;}
	.iconSEO:after {background-position: -100px -243px;}
	.iconTranslation:after {background-position: -200px -243px;}
	.iconWeb:after {background-position: 0 -314px;}
	.iconGraphic:after {background-position: -100px -314px;}
	.iconMovie:after {background-position: -200px -314px;}
	.iconCorporate:after {background-position: 0px -386px;}
	.iconCompany:after {background-position: -100px -386px;}
	.iconPhilosophy:after {background-position: -200px -386px;}
	.iconAccess:after {background-position: 0px -457px;}
	.iconNews:after {background-position: -100px -457px;}
	.iconRecruitInfo:after {background-position: -200px -457px;}
	.iconMessage:after {background-position: 0px -529px;}
	.iconStaff:after {background-position: -100px -529px;}
	.iconRecruit:after {background-position: -200px -529px;}
	.iconContents:after {background-position: 0 -29px;}

	.sectionBox1 {padding: 0 0 20px;}
	.sectionBox1:after {display: none;}

	.sectionBox1 .heading {
		position: static;
		width: 130px;
		height: 130px;
		margin: 0 auto 20px;
	}

	.sectionBox1 h2 {
		width: 110px;
		height: 110px;
		left: 50%;
		margin: 0 0 0 -55px;
	}

	.sectionBox1 h3 {
		width: 110px;
		height: 110px;
		padding: 10px 5px 5px;
		font-size: 67%;
	}

	.sectionBox1 h3 br {display: none;}

	.sectionBox1 h3 .sub {font-size: 150%;}

	.sectionBox1 p,
	.sectionBox1 dl {
		display: block;
		height: auto;
		padding: 0;
		background-color: transparent;
	}

	.sectionBox1 dl dd {padding: 0;}

	.sectionBox2 {padding: 60px 0 10px;}

	.sectionBox2:before {
		top: 18px;
		left: 70px;
	}
/*
	.sectionBox2:before {
		height: 25px;
		left: 55px;
	}

	.sectionBox2:after {
		width: 50px;
		font-size: 240%;
	}
*/
	.sectionBox3 {padding: 0 0 20px 120px;}
	.sectionBox3.web:after {background-position: 0 -314px;}
	.sectionBox3.graphic:after {background-position: -100px -314px;}
	.sectionBox3.movie:after {background-position: -200px -314px;}
	.sectionBox3.text:after {background-position: -100px -457px;}
	.sectionBox3.company:after {background-position: -100px -386px;}
	.sectionBox3.recruit:after {background-position: -100px -529px;}

	.tabNav li {font-size: 67%;}

	.tabNav li a {padding: 0 5px;}

	.imageList1 dl {
		float: none;
		width: auto;
		padding: 0 0 30px 105px;
		text-align: left;
	}
	.imageList1 dl:after {
		left: -15px;
		margin: 0;
	}

	.imageList1 dt {
		display: block;
		width: auto;
		height: auto;
		padding: 0 0 15px;
	}

	.imageList1 br {display: none;}

	.imageList1 em {
		display: inline-block;
		margin: 0 5px 0 0;
	}

	.contactList {display: block;}

	.contactList li {
		display: block;
		width: auto;
		height: auto;
		padding: 25px 5% 10px;
		border: 0 none;
	}

	.contactList address {font-size: 90%;}

	.contactList .btnLarge {
		padding: 0 5% 25px;
		border-left: 0 none;
	}

	.contactList .btnLarge span {max-width: none;}

	p.btnLarge {
		display: block;
		width: auto;
		height: auto;
		padding: 25px 5%;
	}

	p.btnLarge span {max-width: none;}

	.contentsBox table:not(.price),
	.contentsBox table:not(.price) thead,
	.contentsBox table:not(.price) tbody,
	.contentsBox table:not(.price) tr,
	.contentsBox table:not(.price) th,
	.contentsBox table:not(.price) td {
		display: block;
		width: auto;
	}
	.contentsBox table:not(.price) th {
		padding: 0 0 10px;
		font-weight: bold;
	}
	.contentsBox table:not(.price) td {padding: 0 0 20px;}

	.field1 {width: 100%;}
	.field3 {width: 50%;}
	.field1,
	.field2,
	.field3 {
		margin: 0 0 5px;
		padding: 2px 5px;
		font-size: 110%;
	}

	.fieldSelectWrap{
		width: 100%;
	}
	.fieldSelectWrap::after{
		top: 9px;
	}

	.contentsBox .btnSubmit li {display: block;}
	.contentsBox .btnSubmit li + li {margin-left: 0;}

	.contentsBox .btnSubmit input {width: 100%;}

	.social {
		height: 45px;
		padding: 0;
	}

	.contentsBox table.price td {padding: 10px 5px;}

	.contentsBox table.price th,
	.contentsBox table.price tbody tr:first-of-type td {padding: 15px 5px;}

	.contentsBox table.price em {font-size: 180% !important;}

	#pageTop {
		position: relative;
		margin: 0 auto 20px;
		top: auto;
		right: auto;
	}

	#footerAddress address br,
	#footerCopyright br {display: inline;}

	.topMainvisualArea a {height: auto;}

	.topMainvisualArea .imgArea,
	.topMainvisualArea .textArea {
		float: none;
		width: auto;
	}

	.topMainvisualArea .imgArea .img {
		height: 0;
		padding: 60.4166666% 0 0;
	}
/*
	.topMainvisualArea .imgArea:after {
		top: auto;
		bottom: 0;
		right: auto;
		left: 50%;
		margin: 0 0 0 -15px;
		border-top: 0 none;
		border-bottom: solid 15px #fff;
		border-right: solid 15px transparent;
		border-left: solid 15px transparent;
	}
*/

	.topMainvisualArea .icon:after {
		height: 40px;
		-moz-background-size: 420px 1040px;
		-webkit-background-size: 420px 1040px;
		-o-background-size: 420px 1040px;
		-ms-background-size: 420px 1040px;
		background-size: 420px 1040px;
	}

	.topMainvisualArea .textArea {
		height: 16em;
		padding-left: 5%;
		padding-right: 5%;
	}

	.topMainvisualArea .logo {
		height: 90px;
		padding: 0;
		overflow: hidden;
	}

	.topMainvisualArea .text {font-size: 83%;}

	.topMainvisualArea .btn,
	.topMainvisualArea .pagenation {
		width: 100%;
		bottom: 16em;
	}

	#contactBox {font-size: 160%;}

}


/* ----------------------------------------

for Recruit page

----------------------------------------- */
@font-face {
  font-family: "Logotype-Gothic";
  src: url("/common/fonts/Logotype-Gothic.woff2") format("woff2"), url("/common/fonts/Logotype-Gothic.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
}
@font-face {
  font-family: "DIN Mittelschrift Alternate";
  src: url("/common/fonts/DINMittelschrift-Alternate.woff2") format("woff2"), url("/common/fonts/DINMittelschrift-Alternate.woff") format("woff");
}
/* ----------------------------------------

  page tab

------------------------------------------ */
/*  メニュータブ
------------------------------------------ */
.tabNav.nav-recruit li {
  width: 20%;
}
.tabNav.nav-recruit li .sp {
  display: none;
}

/*  contentsBox
------------------------------------------ */
.recruit-page .contentsBox {
  padding: 75px 55% 50px 8%;
  background: url(../../recruit/images/numbers/recruit-page-img.jpg) no-repeat center;
  background-size: cover;
  font-size: 0.875rem;
}
.recruit-page .contentsBox h2 {
  padding-bottom: 20px;
  text-align: left;
  color: #3aaade;
}

.recruit-page .about-climarks h2 {
  font-family: 'Logotype-Gothic', sans-serif;
  font-size: 1.75rem;
  text-align: center;
  letter-spacing: 0;
}

.recruit-page .about-climarks h3 {
  color: #0090d4;
  font-family: 'Logotype-Gothic', sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0;
}

.num {
  color: #0090d4;
  font-family: 'DIN Mittelschrift Alternate', sans-serif;
  font-size: 1.75rem;
}

.num-box {
  position: relative;
}

.data {
  position: relative;
  color: #0090d4;
}
.data span {
  font-family: 'DIN Mittelschrift Alternate', sans-serif;
}

.ballon {
  position: relative;
  font-size: .875rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.ballon-l {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 176px;
  height: 132px;
  font-size: 1rem;
  text-align: center;
  z-index: 2;
}
.ballon-l::before {
  display: block;
  position: absolute;
  width: 176px;
  height: 132px;
  background: url(../../recruit/images/numbers/ballon-l.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: -1;
}

.ballon-m {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 138px;
  height: 104px;
  font-size: 0.875rem;
  text-align: center;
  line-height: 1.25;
  z-index: 2;
}

.ballon-s {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 127px;
  height: 95px;
  font-size: 0.75rem;
  text-align: center;
  z-index: 2;
}
.ballon-s::before {
  display: block;
  position: absolute;
  width: 127px;
  height: 95px;
  background: url(../../recruit/images/numbers/ballon-s.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: -1;
}

.m-color {
  color: #0090d4;
}

.recruit-page em {
  color: #333;
}

.recruit-tit {
  position: relative;
  width: 100%;
  height: auto;
  background: url(../../recruit/images/numbers/tit-bottom.jpg) no-repeat bottom center, #0090d4;
  background-size: contain;
  color: #fff;
  text-align: center;
}

.recruit-tit::before {
  display: block;
  position: absolute;
  top: 1.5vw;
  right: 0;
  left: 0;
  width: 705px;
  height: 292px;
  margin: auto;
  z-index: 1;
}

.recruit-tit::after {
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: -15px;
  width: 109px;
  height: 117px;
  margin: auto;
  background: url(../../recruit/images/numbers/tree-img.png) no-repeat center;
  background-size: contain;
  content: "";
}

.recruit-tit .inner {
  position: relative;
  padding-top: 100px;
  padding-bottom: 135px;
}

.recruit-tit .inner::before {
  position: absolute;
  bottom: -30px;
  left: 180px;
  width: 71px;
  height: 156px;
  background: url(../../recruit/images/numbers/member-img06.png) no-repeat center;
  background-size: contain;
  content: "";
}

.recruit-tit .inner::after {
  position: absolute;
  bottom: -30px;
  right: 180px;
  width: 87px;
  height: 153px;
  background: url(../../recruit/images/numbers/member-img07.png) no-repeat center;
  background-size: contain;
  content: "";
}

@-webkit-keyframes charactor01 {
  0%, 100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  20% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  80% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes charactor01 {
  0%, 100% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  20% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  80% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@-webkit-keyframes charactor02 {
  0%, 100% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  20% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  80% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes charactor02 {
  0%, 100% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  20% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  80% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
.recruit-tit .text-box {
  position: relative;
}

.recruit-tit h2 {
  position: relative;
  font-family: 'Logotype-Gothic', sans-serif;
  font-size: 1.75rem;
  text-align: center;
  letter-spacing: 0;
}

.recruit-tit p {
  padding: 0 4vw;
  font-size: .88rem;
  line-height: 1.71;
}

/* for background-img */
.recruit-tit .text-box::before {
  display: block;
  position: absolute;
  right: 40px;
  bottom: -50px;
  width: 109px;
  height: 85px;
  background: url(../../recruit/images/numbers/recruit-tit-img02.png) no-repeat center;
  background-size: contain;
  content: "";
}

.recruit-tit .text-box::after {
  display: block;
  position: absolute;
  bottom: -30px;
  left: 25px;
  width: 109px;
  height: 85px;
  background: url(../../recruit/images/numbers/recruit-tit-img03.png) no-repeat center;
  background-size: contain;
  content: "";
}

.recruit-tit h2::before {
  display: block;
  position: absolute;
  top: -78px;
  right: 75px;
  width: 109px;
  height: 85px;
  background: url(../../recruit/images/numbers/recruit-tit-img01.png) no-repeat center;
  background-size: contain;
  content: "";
}

.recruit-tit h2::after {
  display: block;
  position: absolute;
  top: -55px;
  left: 62px;
  width: 175px;
  height: 84px;
  background: url(../../recruit/images/numbers/recruit-tit-img04.png) no-repeat center;
  background-size: contain;
  content: "";
}

/* ---------------------------------------------

  about Climarks

----------------------------------------------- */
.about-climarks {
  padding-bottom: 95px;
  background: #fff;
  color: #333;
}

.about-climarks .inner {
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 100px;
}

.row-box {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.flex-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* ----------------------------------------

  クライマークスってどんな会社

----------------------------------------- */
.about-climarks h2 {
  display: table;
  position: relative;
  margin: auto;
  padding-bottom: 155px;
  color: #0090d4;
  line-height: 1.35;
  z-index: 1;
}

.about-climarks h2::after {
  display: block;
  position: absolute;
  right: -30px;
  top: -25px;
  width: 67px;
  height: 51px;
  background: url(../../recruit/images/numbers/h2-ballon.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: -1;
}

.about-climarks h2 span {
  display: block;
  position: relative;
  color: #676767;
  font-family: "Noto Sans Japanese", sans-serif;
  font-size: 0.75rem;
}

.about-climarks h2 span:not(.scroll-bar)::after {
  display: block;
  position: absolute;
  bottom: -92px;
  right: 0;
  left: 0;
  width: 149px;
  height: 63px;
  margin: auto;
  background: url(../../recruit/images/numbers/colleagues.png) no-repeat center;
  background-size: contain;
  content: "";
}

.about-climarks h2 span.scroll-bar {
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 64px;
  margin: 0 auto;
}

.about-climarks h2 span.scroll-bar::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 2px;
  height: 64px;
  margin: auto;
  background: #0090d4;
  -webkit-animation: scroll-bar 1.5s linear infinite;
  animation: scroll-bar 1.5s linear infinite;
  content: "";
}

@-webkit-keyframes scroll-bar {
  0%, 100% {
    top: 0;
    height: 64px;
  }
  50% {
    top: 64px;
    height: 0;
  }
  51% {
    top: 0;
    height: 0;
  }
}
@keyframes scroll-bar {
  0%, 100% {
    top: 0;
    height: 64px;
  }
  50% {
    top: 64px;
    height: 0;
  }
  51% {
    top: 0;
    height: 0;
  }
}
/* ------- numbers --------- */
.numbers .zero {
  position: absolute;
  top: 69px;
  left: 119px;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transition-delay: 3s;
}

.numbers .one {
  position: absolute;
  top: 175px;
  left: 212px;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transition-delay: 6s;
}

.numbers .two {
  position: absolute;
  top: 160px;
  left: 19px;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transition-delay: 9s;
}

.numbers .three {
  position: absolute;
  top: 225px;
  right: 49px;
}

.numbers .five {
  position: absolute;
  top: -30px;
  right: 0;
}

.numbers .six {
  position: absolute;
  top: -80px;
  left: 19px;
}

.numbers .nine {
  position: absolute;
  top: 171px;
  right: 176px;
}

/* ----------------------------------------
  社員数
------------------------------------------- */
#row-box1 {
  margin-bottom: 0;
  padding-bottom: 40px;
}

.members .flex-box {
  -ms-align-items: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.about-climarks .members {
  overflow: hidden;
}

.about-climarks .members ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 370px;
  margin-top: 40px;
  margin-left: 95px;
  /* -webkit-align-items: flex-end;
  -ms-align-items: flex-end;
  align-items: flex-end; */
}

.about-climarks .members li {
  width: calc(100% / 4);
  text-align: center;
}

.about-climarks .members li.member-pro {
  width: calc(25% + 5%);
}

.about-climarks .members li.member-dire {
  width: calc(25% + 5%);
}

.about-climarks .members li.member-de {
  width: calc(25% - 2%);
}

.about-climarks .members li.member-en {
  position: relative;
  width: calc(25% - 8%);
}

.about-climarks .members li dl dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-align-items: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  position: relative;
  height: 177px;
  margin-bottom: 10px;
}

.about-climarks .members dt .num {
  display: inline-block;
  position: absolute;
  right: 0;
  left: 0;
  display: block;
}

.about-climarks .members .member-pro .num {
  top: 0;
  left: 14px;
}

.about-climarks .members .member-dire .num {
  top: -35px;
  right: 23px;
}

.about-climarks .members .member-de .num {
  top: 0;
  right: 25px;
}

.about-climarks .members .member-en .num {
  top: 60px;
}

.abotu-climarks .members dt img {
  display: block;
  position: relative;
  width: 100%;
  height: 177px;
  margin: auto;
}

.about-climarks .members dd {
  font-size: 0.75rem;
  line-height: 1.25;
}

.members .num-box {
  position: relative;
  margin-bottom: 25px;
  margin-left: 30px;
}

.members .num-box .ballon {
  position: absolute;
  top: -130px;
  right: -7vw;
  width: 176px;
  height: 132px;
  padding-top: 30px;
  font-weight: bold;
  background: url(../../recruit/images/numbers/ballon-l.png) no-repeat center;
  background-size: contain;
  z-index: 0;
}

.members .data {
  position: relative;
  font-size: 2.1875rem;
  color: #333;
  z-index: 1;
}

.members .data span {
  color: #0090d4;
  font-size: 7rem;
}

.members::before {
  display: block;
  position: absolute;
  top: 3.5vw;
  right: 3vw;
  width: 495px;
  height: 280px;
  margin: auto;
  background: url(../../recruit/images/numbers/members-bg.png) no-repeat center;
  background-size: contain;
  content: "";
}

/* ----------------------------------------

  #row-box2  男女比　年齢

----------------------------------------- */
#row-box2 {
  margin-bottom: 60px;
}
#row-box2 .flex-inner {
  position: relative;
  width: 42%;
  z-index: 2;
}
#row-box2 .flex-inner h3 {
  text-align: center;
}
#row-box2 .flex-inner .img {
  margin-left: 2vw;
}
#row-box2 .flex-inner .img img {
  max-width: 251px;
  max-height: 214px;
  width: 22vw;
}
#row-box2 .num-box {
  position: relative;
  margin-top: -20px;
  font-size: 3.5625rem;
  line-height: 1;
  text-align: right;
}
#row-box2 .num-box .data {
  color: #333333;
}
#row-box2 .num-box .data .female {
  color: #ed95b3;
  letter-spacing: .1em;
}
#row-box2 .num-box .data em {
  display: inline-block;
  position: relative;
  top: 6px;
  font-size: 3.5625rem;
  text-align: center;
  letter-spacing: .1em;
  line-height: 1;
  font-family: 'DIN Mittelschrift Alternate', sans-serif;
}
#row-box2 .num-box .data em.male {
  margin-left: 5px;
}
#row-box2 .num-box .data em span {
  display: block;
  position: absolute;
  bottom: -10px;
  right: 0;
  left: -5px;
  margin: auto;
  font-size: .88rem;
  text-align: center;
  letter-spacing: 0;
}
#row-box2 .num-box .ballon {
  position: absolute;
  top: -35px;
  left: 10%;
  left: calc(5vw - 10px);
  width: 138px;
  height: 104px;
  padding-top: 45px;
  background: url(../../recruit/images/numbers/ballon-m-d.png) no-repeat center;
  background-size: contain;
  font-size: .88rem;
  line-height: 1.28;
}

#row-box2 .flex-inner.age {
  position: relative;
  width: calc(58% - 115px);
  margin-top: 60px;
  padding-left: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 1;
}

#row-box2 .flex-inner.age::before {
  display: block;
  position: absolute;
  top: 35px;
  right: -60px;
  width: 102px;
  height: 139px;
  background: url(../../recruit/images/numbers/age-img.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: 5;
}

#row-box2 .flex-inner.age::after {
  display: block;
  position: absolute;
  top: -80px;
  right: -110px;
  width: 309px;
  height: 140px;
  background: url(../../recruit/images/numbers/age-bg.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: -1;
}

#row-box2 .flex-inner.age h3 {
  margin-bottom: 5px;
  text-align: left;
}

#row-box2 .bar-graph {
  padding-bottom: 10px;
  border-bottom: 8px solid #f6f5f5;
}

#row-box2 .bar-graph li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2px;
}

#row-box2 .bar-graph .bar {
  display: block;
  margin: 5px 0 5px 15px;
}

.bar-graph.animation .twenties .bar {
  width: 25%;
  height: 20px;
  background: #0090d4;
  -webkit-animation: bar01 .8s linear;
  animation: bar01 .8s linear;
}

.bar-graph.animation .thirties .bar {
  width: 57%;
  height: 20px;
  background: #0076ad;
  -webkit-animation: bar02 .8s linear;
  animation: bar02 .8s linear;
}

.bar-graph.animation .forties .bar {
  width: 50%;
  height: 20px;
  background: #006696;
  -webkit-animation: bar03 .8s linear;
  animation: bar03 .8s linear;
}

@-webkit-keyframes bar01 {
  0% {
    width: 0;
  }
  100% {
    width: 25%;
  }
}
@keyframes bar01 {
  0% {
    width: 0;
  }
  100% {
    width: 25%;
  }
}
@-webkit-keyframes bar02 {
  0% {
    width: 0;
  }
  100% {
    width: 57%;
  }
}
@keyframes bar02 {
  0% {
    width: 0;
  }
  100% {
    width: 57%;
  }
}
@-webkit-keyframes bar03 {
  0% {
    width: 0;
  }
  100% {
    width: 50%;
  }
}
@keyframes bar03 {
  0% {
    width: 0;
  }
  100% {
    width: 50%;
  }
}
#row-box2 .flex-inner.age .ballon {
  position: absolute;
  top: 10px;
  right: -30px;
  width: 138px;
  height: 104px;
  z-index: 2;
}

#row-box2 .flex-inner.age .ballon span {
  font-weight: bold;
  font-size: 1.562rem;
}

#row-box2 .flex-inner.age .ballon::before {
  display: block;
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  width: 138px;
  height: 104px;
  background: url(../../recruit/images/numbers/ballon-m-d.png) no-repeat center;
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
  background-size: contain;
  content: "";
  z-index: -2;
}

#row-box2 .flex-inner.age dd {
  display: inline-block;
  position: absolute;
  top: 95px;
  right: -5px;
  font-family: "Logotype-Gothic", sans-serif;
  font-size: 0.75rem;
}

/* -----------------------------------------------

  出身地・定着率・結婚率・Mac vs Win

------------------------------------------------- */
#row-box3 {
  position: relative;
  width: 100%;
  height: 490px;
  margin-bottom: 85px;
  padding: 0 30px;
}
#row-box3 .tree {
  display: inline-block;
  position: absolute;
  top: -35px;
  left: 52%;
  max-width: 109px;
}

.home-town-box {
  position: relative;
  width: 47.5%;
  height: inherit;
  padding-top: 60px;
  z-index: 2;
}
.home-town-box::before {
  display: block;
  position: absolute;
  top: 100px;
  left: -10px;
  width: 386px;
  height: 374px;
  background: url(../../recruit/images/numbers/ranking-hometown-img.png) no-repeat center;
  background-size: contain;
  mix-blend-mode: multiply;
  content: "";
}
.home-town-box::after {
  display: block;
  position: absolute;
  top: 175px;
  left: -10px;
  width: 204.5px;
  height: 187px;
  background: url(../../recruit/images/numbers/ranking-hometown-bg.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: -1;
}
.home-town-box h3 {
  margin-bottom: 20px;
}
.home-town-box .ballon-m {
  position: absolute;
  top: 395px;
  left: 180px;
}
.home-town-box .ballon-m::before {
  display: block;
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  width: 138px;
  height: 104px;
  background: url(../../recruit/images/numbers/ballon-m.png) no-repeat center;
  background-size: contain;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
  content: "";
  z-index: -1;
}

.home-town {
  width: 160px;
  height: 186px;
  margin-left: 35px;
  padding: 18px 15px 20px 15px;
  border: 3px solid #bfdce9;
  border-radius: 3px;
  background: #fff;
  color: #0090d4;
}

.home-town li {
  position: relative;
  margin: 0 0 3px 0;
  padding: 0 0 0 27px;
  line-height: 1.25;
}

.home-town li span {
  display: inline-block;
  width: 55px;
  text-align: right;
}

.home-town li.rank-top::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  height: 17px;
  background: url(../../recruit/images/numbers/rank-top.png) no-repeat center;
  background-size: contain;
  content: "";
}

.home-town li.rank-sec::before {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  height: 15px;
  background: url(../../recruit/images/numbers/rank-sec.png) no-repeat center;
  background-size: contain;
  content: "";
}

.colleagues-number-box {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 30px;
  text-align: center;
}
.colleagues-number-box h3 {
  margin-bottom: 25px;
}
.colleagues-number-box .data {
  max-width: 251px;
  max-height: 250px;
  width: 17.4vw;
  height: 17.3vw;
  padding-top: 53%;
  font-family: -apple-system, BlinkMacSystemFont, MyYuGothicM, "Yu Gothic", Meiryo, "Hiragino kaku Gothic ProN", sans-serif;
  font-size: 2.375rem;
  color: #fff;
  z-index: 2;
}
.colleagues-number-box .data::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 251px;
  height: 250px;
  background: url(../../recruit/images/numbers/members-number-img.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: -1;
}
.colleagues-number-box .data::after {
  display: block;
  position: absolute;
  right: 10px;
  bottom: -10px;
  width: 108.5px;
  height: 121px;
  background: url(../../recruit/images/numbers/members-number-bg.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: -2;
}
.colleagues-number-box .data span {
  font-size: 5.437rem;
  font-family: 'DIN Mittelschrift Alternate', sans-serif;
}

.mac-vs-win-box {
  position: absolute;
  top: 290px;
  left: 375px;
}
.mac-vs-win-box h3 {
  font-size: 1rem !important;
}
.mac-vs-win-box dl {
  text-align: center;
}
.mac-vs-win-box P {
  position: relative;
  font-size: 3.562rem;
  line-height: 1;
  letter-spacing: .1em;
}
.mac-vs-win-box P em {
  position: relative;
  top: 6px;
  display: inline-block;
  font-size: 3.562rem;
  font-family: 'DIN Mittelschrift Alternate', sans-serif;
  line-height: 1;
}
.mac-vs-win-box P em span {
  display: block;
  position: absolute;
  font-size: 0.875rem;
  letter-spacing: 0;
}
.mac-vs-win-box P .mac {
  color: #0090d4;
}
.mac-vs-win-box P .mac span {
  bottom: -10px;
}
.mac-vs-win-box P .win {
  color: #006696;
}
.mac-vs-win-box P .win span {
  right: 0;
  left: -10px;
  bottom: -10px;
  margin: auto;
}

.be-married-box {
  position: absolute;
  right: 28px;
  bottom: -15px;
}
.be-married-box::before {
  display: block;
  position: absolute;
  top: -35px;
  left: -110px;
  width: 229px;
  height: 170px;
  background: url(../../recruit/images/numbers/be-married-img.png) no-repeat center;
  background-size: contain;
  content: "";
}
.be-married-box h3 {
  font-size: 1rem !important;
}
.be-married-box .data {
  font-family: -apple-system, BlinkMacSystemFont, MyYuGothicM, "Yu Gothic", Meiryo, "Hiragino kaku Gothic ProN", sans-serif;
  font-size: 2.312rem;
}
.be-married-box .data span {
  font-family: 'DIN Mittelschrift Alternate', sans-serif;
  font-size: 5rem;
}

/* -----------------------------------------

  働いとことのある業種

-------------------------------------------- */
#row-box4 {
  position: relative;
  margin-bottom: 40px;
  padding: 0 30px;
}
#row-box4::before {
  display: block;
  position: absolute;
  right: 0;
  bottom: -60px;
  width: 146.5px;
  height: 230px;
  background: url(../../recruit/images/numbers/pre-job-bg.png) no-repeat right bottom;
  background-size: contain;
  content: "";
}
#row-box4 ul {
  position: relative;
  width: 100%;
  height: 235px;
  z-index: 2;
}
#row-box4 ul li {
  display: inline-block;
  position: absolute;
  font-size: 0.875rem;
  line-height: 1.42;
  text-align: center;
  z-index: 0;
}
#row-box4 ul li:first-child {
  top: 10px;
  left: 21%;
  width: 119px;
  height: 89px;
  padding-top: 22px;
  background: url(../../recruit/images/numbers/ballon01.png) no-repeat center;
  background-size: contain;
}
#row-box4 ul li:nth-child(2) {
  top: 0;
  left: 44%;
  width: 131px;
  height: 97px;
  padding-top: 33px;
  background: url(../../recruit/images/numbers/ballon02.png) no-repeat center;
  background-size: contain;
}
#row-box4 ul li:nth-child(3).painter {
  top: 40px;
  left: 65%;
  width: 101px;
  height: 75px;
  padding-top: 22px;
  background: url(../../recruit/images/numbers/ballon03.png) no-repeat center;
  background-size: contain;
}
#row-box4 ul li:nth-child(3).painter::before {
  display: block;
  position: absolute;
  top: -25px;
  right: -60px;
  width: 81px;
  height: 115px;
  background: url(../../recruit/images/numbers/pre-job-img02.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: 2;
}
#row-box4 ul li:nth-child(4) {
  top: 42px;
  right: 0;
  width: 97px;
  height: 72px;
  padding-top: 22px;
  background: url(../../recruit/images/numbers/ballon04.png) no-repeat center;
  background-size: contain;
}
#row-box4 ul li:nth-child(5) {
  top: 50px;
  left: 5px;
  width: 163px;
  height: 121px;
  padding-top: 35px;
  background: url(../../recruit/images/numbers/ballon05.png) no-repeat center;
  background-size: contain;
}
#row-box4 ul li:nth-child(6).lottery {
  top: 92px;
  left: 26%;
  width: 147px;
  height: 111px;
  padding-top: 32px;
  background: url(../../recruit/images/numbers/ballon06.png) no-repeat center;
  background-size: contain;
}
#row-box4 ul li:nth-child(6).lottery::before {
  display: block;
  position: absolute;
  top: -20px;
  right: -10px;
  width: 79px;
  height: 56px;
  background: url(../../recruit/images/numbers/pre-job-img01.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: 2;
}
#row-box4 ul li:nth-child(7) {
  top: 108px;
  left: 48%;
  width: 147px;
  height: 110px;
  padding-top: 35px;
  background: url(../../recruit/images/numbers/ballon07.png) no-repeat center;
  background-size: contain;
}
#row-box4 ul li:nth-child(8) {
  top: 130px;
  right: 5%;
  width: 182px;
  height: 109px;
  padding-top: 36px;
  background: url(../../recruit/images/numbers/ballon08.png) no-repeat center;
  background-size: contain;
}

/* -------------------------------------------------

  社員旅行

-------------------------------------------------- */
#row-box5 {
  position: relative;
  margin-bottom: 50px;
  padding: 0 30px;
}
#row-box5::before {
  display: block;
  position: absolute;
  top: -85px;
  left: 30px;
  width: 128.5px;
  height: 137px;
  background: url(../../recruit/images/numbers/trips-bg.png) no-repeat center;
  background-size: contain;
  content: "";
}
#row-box5 .img-box {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 5px;
}
#row-box5 .img-box ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#row-box5 .img-box ul li {
  width: 20%;
}
#row-box5 .img-box ul li img {
  width: 100%;
  height: auto;
}
#row-box5 .img-box .ballon-l {
  position: absolute;
  right: 20px;
  bottom: -40px;
}
#row-box5 .img-box .ballon-l::before {
  display: block;
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  width: 176px;
  height: 132px;
  margin: auto;
  background: url(../../recruit/images/numbers/ballon-l.png) no-repeat center;
  background-size: contain;
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
  z-index: -1;
  content: "";
}

/* --------------------------------------------

  連続増収年数

---------------------------------------------- */
#row-box6 {
  position: relative;
  width: 100%;
  height: 296px;
  margin-bottom: 60px;
}
#row-box6 .row-box-inner {
  position: relative;
  max-width: 359.5px;
  max-height: 296px;
  width: 24.9vw;
  height: 20.5vw;
  margin: 0 auto;
  padding: 0;
}
#row-box6 .img-box {
  position: relative;
  margin: auto;
  padding-top: 90px;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2;
}
#row-box6 .img-box::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: -15px;
  max-width: 359.5px;
  max-height: 296px;
  width: 24.9vw;
  height: 20.5vw;
  margin: auto;
  background: url(../../recruit/images/numbers/sales-img.png) no-repeat center;
  background-size: contain;
  content: "";
  z-index: -1;
}
#row-box6 h3 {
  color: #fff;
  line-height: 1;
  text-align: center;
}
#row-box6 .data {
  font-family: "Logotype-Gothic", sans-serif;
  font-size: 1.312rem;
  font-weight: normal;
  color: #fff;
  line-height: 1;
}
#row-box6 .data span {
  display: block;
  font-family: 'DIN Mittelschrift Alternate', sans-serif;
  font-size: 7.187rem;
}
#row-box6 .ballon-s {
  position: absolute;
  top: 55px;
  left: -150px;
}
#row-box6 .ballon-s::before {
  top: 8px;
  left: 0;
  right: 0;
  margin: auto;
}
#row-box6 .ballon-l {
  position: absolute;
  top: 53px;
  right: -170px;
  font-size: .75rem;
}
#row-box6 .ballon-l:before {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/* ----------------------------------------------

  制作ジャンル・直接取引率・平均プロジェクト

----------------------------------------------- */
#row-box7 {
  position: relative;
  margin-bottom: 75px;
  padding: 0 30px;
}
#row-box7 .flex-inner {
  width: 33.33333%;
}
#row-box7 .flex-inner:nth-child(2) {
  width: calc(33.3333% + 5%);
}
#row-box7 .flex-inner:last-child {
  width: calc(33.3333% - 5%);
}
#row-box7 .flex-inner h3 {
  margin-bottom: 25px;
  text-align: center;
  line-height: 1.2;
}
#row-box7 .flex-inner:last-child h3 {
  margin-top: -10px;
  margin-bottom: 35px;
}
#row-box7 .flex-inner ul.works-ganre {
  position: relative;
  width: 246px;
  height: 226px;
  margin: auto;
}
#row-box7 .flex-inner ul.works-ganre::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -10px;
  width: 246px;
  height: 226px;
  background: url(../../recruit/images/numbers/genre-img.png) no-repeat center;
  background-size: contain;
  content: "";
}
#row-box7 .flex-inner ul.works-ganre li {
  position: absolute;
  width: 100px;
  top: 80px;
  right: 18px;
}
#row-box7 .flex-inner ul.works-ganre li dl {
  position: relative;
  color: #fff;
  text-align: center;
}
#row-box7 .flex-inner ul.works-ganre li dl dt {
  position: absolute;
  right: 0;
  left: 0;
  bottom: -28px;
  margin: auto;
  font-size: 0.75rem;
  line-height: 1.2;
}
#row-box7 .flex-inner ul.works-ganre li dl dd {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  font-size: 1.25rem;
  line-height: 1;
}
#row-box7 .flex-inner ul.works-ganre li dl dd span {
  font-family: 'DIN Mittelschrift Alternate', sans-serif;
  font-size: 2.625rem;
}
#row-box7 .flex-inner ul.works-ganre li:nth-child(2), #row-box7 .flex-inner ul.works-ganre li:nth-child(3) {
  top: 145px;
  left: 52px;
}
#row-box7 .flex-inner ul.works-ganre li:nth-child(2) dt, #row-box7 .flex-inner ul.works-ganre li:nth-child(3) dt {
  bottom: -18px;
}
#row-box7 .flex-inner ul.works-ganre li:nth-child(2) dd span, #row-box7 .flex-inner ul.works-ganre li:nth-child(3) dd span {
  font-size: 2.062rem;
}
#row-box7 .flex-inner ul.works-ganre li:nth-child(3) {
  top: 78px;
  left: 11px;
}
#row-box7 .flex-inner ul.works-ganre li:last-child {
  top: 24px;
  left: 42px;
}
#row-box7 .flex-inner ul.works-ganre li:last-child dt {
  bottom: -16px;
}
#row-box7 .flex-inner ul.works-ganre li:last-child dd {
  font-size: 0.75rem;
}
#row-box7 .flex-inner ul.works-ganre li:last-child dd span {
  font-size: 1.25rem;
}
#row-box7 .direct-rate {
  position: relative;
  width: 220px;
  height: 220px;
  margin: auto;
  background: url(../../recruit/images/numbers/direct-rate-img.png) no-repeat center;
  background-size: contain;
}
#row-box7 .direct-rate .data {
  position: absolute;
  bottom: 20px;
  left: 62px;
  color: #fff;
  font-size: 1.625rem;
  font-weight: normal;
}
#row-box7 .direct-rate .data span {
  font-family: 'DIN Mittelschrift Alternate', sans-serif;
  font-size: 4.687rem;
}
#row-box7 .average-per-capita {
  position: relative;
  width: 155px;
  height: 183px;
  margin: auto;
  background: url(../../recruit/images/numbers/average-per-capita.png) no-repeat center;
  background-size: contain;
}
#row-box7 .average-per-capita .data {
  position: absolute;
  top: 58px;
  right: 0;
  left: -10px;
  margin: auto;
  font-size: 1.562rem;
  text-align: center;
}
#row-box7 .average-per-capita .data span {
  display: block;
  font-size: 3.5rem;
}

/* ---------------------------------------------

  案件に関わるメンバー

----------------------------------------------- */
#row-box8 {
  position: relative;
  margin-bottom: 80px;
  padding: 0 30px;
}
#row-box8 h3 {
  margin-bottom: 30px;
  text-align: center;
}
#row-box8 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 430px;
}
#row-box8 ul li {
  width: 20%;
}
#row-box8 ul li:first-child {
  width: calc(20% + 5%);
}
#row-box8 ul li:nth-child(3) {
  width: calc(20%);
}
#row-box8 ul li:nth-child(4) {
  width: calc(20% - 2%);
}
#row-box8 ul li:nth-child(5) {
  width: calc(20% - 3%);
}
#row-box8 ul li dl dt {
  margin-bottom: 20px;
}
#row-box8 ul li dl dt img {
  display: block;
  margin: auto;
}
#row-box8 ul li dl dd {
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.2;
}
#row-box8 .ballon {
  position: absolute;
  top: 45px;
  right: 1.5vw;
  width: 280px;
  height: 210px;
  background: url(../../recruit/images/numbers/ballon.png) no-repeat center;
  background-size: contain;
}
#row-box8 .ballon .data {
  position: absolute;
  top: 35px;
  right: 0;
  left: 0;
  margin: auto;
}
#row-box8 .ballon .data p:first-child {
  font-size: 1.875rem;
}
#row-box8 .ballon .data p:first-child span {
  font-size: 5.062rem;
}
#row-box8 .ballon .data p:last-child {
  font-size: 0.75rem;
  line-height: 1.45;
}

/* -------------------------------------------------

  message

-------------------------------------------------- */
.message {
  padding: 0 1vw;
  font-family: "Logotype-Gothic", sans-serif;
  font-size: 1.125rem;
  color: #0090d4;
  text-align: center;
}

/* --------------------------------------------------

  works-climarks

----------------------------------------------------- */
.works-climarks {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px 4vw 30px;
  background: url(../../recruit/images/numbers/works-climarks.jpg) no-repeat center;
  background-size: cover;
  text-align: center;
  color: #fff;
  z-index: 1;
}
.works-climarks::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: inherit;
  background: rgba(0, 0, 0, 0.7);
  content: "";
  z-index: -1;
}
.works-climarks h2 {
  margin-bottom: 25px;
  font-size: 1.25rem;
  color: #fff;
}
.works-climarks p {
  margin-bottom: 50px;
}
.works-climarks .btn a {
  display: inline-block;
  padding: 10px 32px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 0.937rem;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.works-climarks .btn a:hover {
  background: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

/* ----------------------------------------------

 フェードイン

------------------------------------------------- */
.fadein {
  opacity: 0;
  -webkit-transform: translate3d(0, 35px, 0);
  transform: translate3d(0, 35px, 0);
}

/*---------------------------------------------
	for 1400px -
---------------------------------------------*/
@media screen and (max-width: 1400px) {
  .recruit-page .recruit-tit::before {
    width: 680px;
    width: 51vw;
  }
  .recruit-page .about-climarks h3 {
    font-size: 1.125rem;
  }
  .recruit-page .about-climarks .members ul {
    margin-left: 3.2vw;
  }
  .recruit-page .about-climarks .members .num-box {
    margin-left: 1.5vw;
  }
  .recruit-page .about-climarks .members .num-box .ballon {
    right: -6vw;
  }

  #row-box2 .flex-inner.age .ballon {
    top: -0.5vw;
  }

  /* 出身地ランキング & 社員定着率　etc.
  --------------------------------- */
  #row-box3 .home-town-box::before {
    top: 8.5vw;
    width: 27vw;
    height: 26vw;
  }
  #row-box3 .home-town-box .ballon-m {
    top: 29vw;
    left: 13vw;
  }
  #row-box3 .home-town {
    margin-left: 1.5vw;
  }
  #row-box3 .colleagues-number-box {
    margin-right: 10px;
    padding-right: 0;
  }
  #row-box3 .colleagues-number-box .data {
    width: 18vw;
    height: 18vw;
    padding-top: 53%;
  }
  #row-box3 .colleagues-number-box .data span {
    font-size: 5rem;
  }
  #row-box3 .colleagues-number-box .data::before {
    width: 17vw;
    height: 17vw;
    width: 18vw;
    height: 18vw;
  }
  #row-box3 .mac-vs-win-box {
    left: 27vw;
  }
  #row-box3 .be-married-box::before {
    top: -35px;
    left: -100px;
    width: 209px;
    height: 150px;
  }
  #row-box3 .be-married-box .data span {
    font-size: 5.5vw;
    font-size: 4.375rem;
  }
  #row-box3 .tree {
    width: 7.5vw;
  }

  #row-box4 ul li:nth-child(8) {
    right: 0.3vw;
  }

  #row-box6 .img-box {
    padding-top: 6vw;
  }
  #row-box6 .data span {
    font-size: 8vw;
  }
  #row-box6 .ballon-s {
    left: -135px;
  }
  #row-box6 .ballon-l {
    right: -150px;
  }

  #row-box8 .ballon {
    width: 260px;
    height: 195px;
  }
  #row-box8 .ballon .data {
    top: 25px;
  }
}
/* -----------------------------------------

for -1360px

------------------------------------------- */
@media screen and (max-width: 1360px) {
  .recruit-tit p {
    padding: 0 8.7vw;
  }
  .recruit-tit p br {
    display: none;
  }

  /* for background-img */
  .recruit-tit::after {
    width: 94px;
    height: 102px;
  }

  .recruit-tit .text-box::before {
    bottom: -70px;
    right: 20px;
  }

  .recruit-tit .text-box::after {
    bottom: -58px;
    left: 18px;
  }

  .recruit-tit h2::before {
    top: -78px;
    right: 55px;
    width: 109px;
    height: 85px;
  }

  .recruit-tit h2::after {
    top: -55px;
    left: 42px;
    width: 175px;
    height: 84px;
  }

  .recruit-tit .inner::before {
    left: 127px;
    width: 56px;
    height: 141px;
    z-index: 9;
  }

  .recruit-tit .inner::after {
    right: 127px;
    width: 72px;
    height: 138px;
    z-index: 9;
  }

  /*  社員数
  ---------------------------------- */
  .members::before {
    right: 1.2vw;
  }

  /* 出身地
  ---------------------------------- */
  #row-box3 {
    min-height: 40vw;
    min-height: 39.5vw;
  }
  #row-box3 .home-town-box .ballon-m {
    top: 21vw;
    left: 24vw;
  }
  #row-box3 .mac-vs-win-box {
    top: 30vw;
    left: 14vw;
  }
  #row-box3 .mac-vs-win-box h3 {
    margin-bottom: 15px;
  }
  #row-box3 .mac-vs-win-box dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  #row-box3 .mac-vs-win-box dl dt {
    margin-right: 15px;
  }
  #row-box3 .be-married-box {
    right: 2vw;
    bottom: 2vw;
  }
  #row-box3 .tree {
    left: 28vw;
  }
  #row-box3 .tree img {
    width: 80%;
  }

  /*  社員旅行
  ---------------------------------- */
  #row-box5 .img-box .ballon-l {
    bottom: -3.8vw;
  }
  #row-box5 .img-box .ballon-l::before {
    top: 0;
    width: 12vw;
    height: 9.1vw;
  }

  /*  WEBサイト制作ジャンル
  ---------------------------------- */
  #row-box7 .flex-box .flex-inner {
    width: 50%;
  }
  #row-box7 .flex-box .flex-inner:last-child h3 {
    margin: 0 0 25px 0;
  }
  #row-box7 .flex-box .flex-inner ul.works-ganre::before {
    margin: auto;
  }
  #row-box7 .flex-box .flex-inner:last-child {
    width: 100%;
  }

  /* ひとつの案件に関わるメンバー
  ----------------------------------- */
  #row-box8 ul {
    padding-top: 195px;
    margin: auto;
  }
  #row-box8 .ballon {
    right: 0;
    left: 0;
    margin: auto;
  }

  /* メッセージ
  ------------------------------------ */
  .message {
    padding: 0 4vw;
  }
  .message br {
    display: none;
  }
}
/*---------------------------------------------

	for -1249px

---------------------------------------------- */
@media screen and (min-width: 1061px) and (max-width: 1249px) {
  .recruit-page .listBox3 section {
    width: 33.3333%;
  }

  .recruit-page .listBox3 section a {
    height: 19.5em;
    padding-bottom: 10px;
    box-sizing: border-box;
  }

  .recruit-page .listBox3 section:nth-of-type(3) a {
    background-color: #27c0dc;
  }

  .recruit-page .listBox3 a::before {
    left: 8%;
    width: 160%;
  }

  .pc .listBox3 a:hover:before {
    left: 160%;
  }

  .recruit-page .about-climarks #row-box1 {
    padding-bottom: 40px;
  }
  .recruit-page .about-climarks .members::before {
    right: 2.3vw;
  }
  .recruit-page .about-climarks .members ul {
    width: 365px;
    width: 34.5vw;
    margin-left: 1vw;
  }
  .recruit-page .about-climarks .members .num-box {
    margin-left: .8vw;
    margin-bottom: 20px;
    z-index: 1;
  }
  .recruit-page .about-climarks .members .num-box .ballon {
    top: -115px;
    right: -20px;
    width: 160px;
    height: 122px;
    z-index: 0;
  }
  .recruit-page .about-climarks .members .data span {
    font-size: 8.5vw;
  }

  #row-box2 .flex-box {
    display: block;
  }
  #row-box2 .flex-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
  }
  #row-box2 .flex-inner h3 {
    display: block;
    width: 100%;
    text-align: center;
  }
  #row-box2 .flex-inner .img {
    width: 55%;
    margin: 0;
    max-width: none;
    max-height: none;
    clear: both;
  }
  #row-box2 .flex-inner .img img {
    float: right;
    width: 100%;
    max-width: 251px;
    max-height: 214px;
  }
  #row-box2 .num-box {
    width: 45%;
    margin: 0;
    padding-left: 30px;
  }
  #row-box2 .num-box .data {
    display: table;
    margin-top: 75px;
  }
  #row-box2 .num-box .ballon {
    top: auto;
    left: -224px;
    top: 157px;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
  #row-box2 .flex-inner.age {
    display: block;
    width: 60%;
    margin-left: 7.5vw;
  }
  #row-box2 .flex-inner.age::before {
    bottom: -25px;
  }
  #row-box2 .flex-inner.age dd {
    right: 0;
    bottom: 33px;
  }

  #row-box3 {
    height: 41vw;
    min-height: 520px;
  }
  #row-box3 .home-town-box::before {
    top: 9.8vw;
    top: 115px;
    width: 27vw;
    height: 26vw;
    min-width: 332px;
    min-height: 319px;
  }
  #row-box3 .home-town-box .ballon-m {
    top: 250px;
    left: 300px;
  }
  #row-box3 .mac-vs-win-box {
    top: 400px;
    left: 9.5vw;
    bottom: auto;
  }
  #row-box3 .be-married-box {
    right: 20px;
    bottom: 0;
  }

  #row-box4 ul {
    height: 28vw;
    height: 19vw;
  }
  #row-box4 ul li:nth-child(5) {
    left: -15px;
  }
  #row-box4 ul li:nth-child(6).lottery {
    left: 9vw;
  }
  #row-box4 ul li:nth-child(7) {
    left: 20vw;
  }
  #row-box4 ul li:nth-child(8) {
    top: 145px;
    right: -1vw;
  }

  #row-box5 .img-box .ballon-l {
    width: 13vw;
    height: 10vw;
  }
  #row-box5 .img-box .ballon-l::before {
    top: -10px;
    width: 13vw;
    height: 10vw;
  }

  #row-box6 {
    height: auto;
    padding: 0;
  }
  #row-box6 .row-box-inner {
    max-width: none;
    max-height: none;
    width: 100%;
    height: auto;
    padding-top: 80px;
  }
  #row-box6 .row-box-inner .img-box {
    width: 359.5px;
    height: 296px;
    padding-top: 7vw;
    padding-top: 100px;
  }
  #row-box6 .img-box::before {
    width: 359.5px;
    height: 296px;
  }
  #row-box6 .data span {
    font-size: 7.5vw;
  }
  #row-box6 .ballon-s {
    top: 13px;
    top: 4vw;
    left: -90px;
    left: 1vw;
  }
  #row-box6 .ballon-l {
    top: 0;
    right: -116px;
    right: 0.5vw;
    width: 166px;
    height: 122px;
  }
  #row-box6 .ballon-l::before {
    width: 166px;
    height: 122px;
  }

  #row-box7 .flex-box .flex-inner {
    width: 50%;
  }
  #row-box7 .flex-box .flex-inner:last-child h3 {
    margin: 0 0 25px 0;
  }
  #row-box7 .flex-box .flex-inner ul.works-ganre {
    margin: auto;
  }
  #row-box7 .flex-box .flex-inner ul.works-ganre::before {
    margin: auto;
  }
  #row-box7 .flex-box .flex-inner:last-child {
    width: 100%;
  }

  #row-box8 ul {
    margin: auto;
  }
  #row-box8 .ballon {
    right: 0;
    left: 0;
    margin: auto;
  }
}
@media screen and (min-width: 980px) and (max-width: 1060px), print {
  .listBox3 section {
    width: 33.3333%;
  }

  .recruit-page .listBox3 section:nth-of-type(3) a {
    background-color: #27c0dc;
  }

  .recruit-tit h2,
  .recruit-page .about-climarks h2 {
    font-size: 1.5rem;
  }

  .pc .listBox3 a:hover:before {
    left: 160%;
  }

  .pc .listBox3 a:before {
    width: 160%;
    left: 0;
  }

  /* for background-img */
  .recruit-tit .text-box::before {
    right: 1.5;
    bottom: -70px;
    width: 100px;
    height: 75px;
  }

  .recruit-tit .text-box::after {
    bottom: -50px;
    left: 1vw;
    width: 100px;
    height: 75px;
  }

  .recruit-tit h2::before {
    top: -60px;
    right: 30px;
    width: 109px;
    height: 85px;
    width: 100px;
    height: 75px;
  }

  .recruit-tit h2::after {
    top: -55px;
    left: 25px;
    width: 175px;
    height: 84px;
    width: 165PX;
    height: 74PX;
  }

  .about-climarks .members dd {
    font-size: 0.687rem;
  }

  .numbers .zero {
    top: 6.5vw;
    left: 9vw;
  }
  .numbers .zero img {
    width: 3vw;
  }

  .numbers .one {
    top: 16.5vw;
    left: 13.5vw;
  }
  .numbers .one img {
    width: 3vw;
  }

  .numbers .two {
    top: 15.5vw;
    left: 1.5vw;
  }
  .numbers .two img {
    width: 13vw;
  }

  .numbers .three {
    top: 29.1vw;
    top: 22vw;
    right: 3vw;
  }
  .numbers .three img {
    width: 4vw;
  }

  .numbers .five {
    top: -1.5vw;
  }
  .numbers .five img {
    width: 14vw;
  }

  .numbers .six {
    top: -5.2vw;
    left: 1.5vw;
  }
  .numbers .six img {
    width: 10vw;
  }

  .numbers .nine {
    top: 18vw;
    right: 10vw;
  }
  .numbers .nine img {
    width: 6vw;
  }

  .recruit-page .about-climarks h2::after {
    top: -20px;
    right: -25px;
    width: 57px;
    height: 41px;
  }
  .recruit-page .about-climarks h2 span::after {
    width: 135px;
    height: 63px;
  }
  .recruit-page .about-climarks .members {
    padding-bottom: 40px;
  }
  .recruit-page .about-climarks .members::before {
    top: 1vw;
    right: -5vw;
  }
  .recruit-page .about-climarks .members ul {
    width: 33vw;
    margin-left: 1vw;
  }
  .recruit-page .about-climarks .members ul li dl dt {
    height: 165px;
  }
  .recruit-page .about-climarks .members ul li dd {
    font-size: 0.687rem;
  }
  .recruit-page .about-climarks .members ul li.member-pro img {
    width: 61px;
    height: 122px;
  }
  .recruit-page .about-climarks .members ul li.member-dire img {
    width: 72px;
    height: 155px;
  }
  .recruit-page .about-climarks .members ul li.member-de img {
    width: 62px;
    height: 120px;
  }
  .recruit-page .about-climarks .members ul li.member-en img {
    width: 25px;
    height: 70px;
  }
  .recruit-page .about-climarks .members .num-box {
    margin-bottom: 20px;
  }
  .recruit-page .about-climarks .members .num-box .ballon {
    top: -105px;
    right: -15px;
    width: 150px;
    height: 112px;
    padding-top: 25px;
  }
  .recruit-page .about-climarks .members .data span {
    font-size: 8.5vw;
  }

  /*  男女比 & 年齢
  --------------------------------- */
  #row-box2 .flex-box {
    display: block;
  }
  #row-box2 .flex-inner {
    display: -webkit-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
  }
  #row-box2 .flex-inner h3 {
    width: 100%;
    text-align: center;
  }
  #row-box2 .flex-inner .img {
    width: 60%;
    margin: 0;
    clear: both;
  }
  #row-box2 .flex-inner .img img {
    float: right;
    width: 100%;
  }
  #row-box2 .num-box {
    width: 40%;
    margin: 0;
    padding-left: 30px;
  }
  #row-box2 .num-box .data {
    display: table;
    padding-top: 6vw;
  }
  #row-box2 .num-box .ballon {
    top: auto;
    left: -225px;
  }
  #row-box2 .flex-inner.age {
    display: block;
    width: 70%;
    margin-left: 3.5vw;
  }
  #row-box2 .flex-inner.age::before {
    bottom: -25px;
  }
  #row-box2 .flex-inner.age dd {
    right: 0;
    bottom: 33px;
  }

  /*   出身地 & 定着率 etc.
  --------------------------------- */
  #row-box3 {
    min-height: 560px;
    margin-bottom: 65px;
  }
  #row-box3 .home-town-box::before {
    top: 125px;
    left: -2vw;
    width: 32vw;
    height: 31vw;
  }
  #row-box3 .home-town-box .home-town {
    margin-left: .5vw;
  }
  #row-box3 .home-town-box .ballon-m {
    top: 260px;
    left: 28.5vw;
  }
  #row-box3 .colleagues-number-box {
    top: 0;
    right: 1vw;
    width: 17vw;
    padding-right: 0;
  }
  #row-box3 .colleagues-number-box .data {
    padding-top: 50%;
  }
  #row-box3 .colleagues-number-box .data span {
    font-size: 4.5rem;
    text-align: center;
  }
  #row-box3 .colleagues-number-box .data::before {
    width: 17vw;
    height: 17vw;
  }
  #row-box3 .mac-vs-win-box {
    top: 425px;
    left: 5vw;
  }
  #row-box3 .be-married-box {
    bottom: 3vw;
  }
  #row-box3 .tree {
    left: 47%;
  }

  #row-box4 {
    padding: 0 15px;
  }
  #row-box4 ul {
    height: 32vw;
    height: 250px;
  }
  #row-box4 ul li:nth-child(4) {
    top: 70px;
  }
  #row-box4 ul li:nth-child(5) {
    left: -5px;
  }
  #row-box4 ul li:nth-child(6).lottery {
    top: 135px;
    left: 10%;
  }
  #row-box4 ul li:nth-child(7) {
    top: 95px;
    left: 37%;
  }
  #row-box4 ul li:nth-child(8) {
    top: 130px;
  }

  #row-box5 {
    margin-bottom: 180px;
    margin-bottom: 100px;
  }
  #row-box5 .img-box .ballon-l {
    bottom: -7vw;
    width: 140px;
    height: 106px;
  }
  #row-box5 .img-box .ballon-l::before {
    top: -10px;
    width: 140px;
    height: 106px;
  }

  #row-box6 {
    height: auto;
    padding: 0 15px;
  }
  #row-box6 .row-box-inner {
    max-width: none;
    max-height: none;
    width: 100%;
    height: auto;
    padding-top: 80px;
  }
  #row-box6 .img-box {
    width: 31vw;
    height: 25.5vw;
    width: 35vw;
    height: 28vw;
    padding-top: 75px;
    padding-top: 8.5vw;
  }
  #row-box6 .img-box::before {
    width: 31vw;
    height: 25.5vw;
    width: 35vw;
    height: 28vw;
  }
  #row-box6 .data span {
    font-size: 10vw;
  }
  #row-box6 .ballon-s {
    top: 0;
    left: 1vw;
  }
  #row-box6 .ballon-l {
    top: -30px;
    right: -1vw;
    width: 166px;
    height: 122px;
  }
  #row-box6 .ballon-l::before {
    width: 166px;
    height: 122px;
  }

  #row-box7 {
    margin-bottom: 35px;
    padding: 0 15px;
  }
  #row-box7 .flex-box .flex-inner {
    width: calc(50% + 5%);
    margin-bottom: 30px;
  }
  #row-box7 .flex-box .flex-inner:nth-child(2) {
    width: calc(50% - 5%);
  }
  #row-box7 .flex-box .flex-inner:last-child h3 {
    margin-bottom: 25px;
  }

  #row-box8 ul {
    order: 1;
  }
  #row-box8 .ballon {
    margin: auto;
    order: 0;
  }
}
/*---------------------------------------------
	for -979px
  ---------------------------------------------*/
@media screen and (min-width: 720px) and (max-width: 979px) {
  .recruit-tit .inner {
    padding-bottom: 150px;
  }
  .recruit-tit .inner::before {
    left: 32vw;
  }
  .recruit-tit .inner::after {
    right: 32vw;
  }
  .recruit-tit .text-box::before {
    bottom: -85px;
  }
  .recruit-tit .text-box::after {
    bottom: -75px;
    left: 15px;
  }

  .recruit-page .about-climarks .members::before {
    right: 14vw;
  }
  .recruit-page .about-climarks .members ul {
    width: 50vw;
    margin-left: 10vw;
  }
  .recruit-page .about-climarks .members .num-box {
    margin-left: 5vw;
  }
  .recruit-page .about-climarks .members .num-box .ballon {
    right: -12vw;
  }

  #row-box2 .flex-inner:not(.age) {
    max-width: 330px;
  }
  #row-box2 .flex-inner:not(.age) .img img {
    width: 32vw;
  }
  #row-box2 .num-box .ballon {
    left: 7vw;
  }
  #row-box2 .flex-inner.age::before {
    top: 35px;
    right: -60px;
  }
  #row-box2 .flex-inner.age dd {
    top: 94px;
    right: 5px;
  }

  #row-box3 {
    min-height: 560px;
  }
  #row-box3 .home-town-box::before {
    top: 100px;
    left: -25px;
    width: 380px;
    height: 367px;
  }
  #row-box3 .home-town-box .ballon-m {
    top: 395px;
    left: 175px;
  }
  #row-box3 .colleagues-number-box {
    margin-right: 4vw;
  }
  #row-box3 .colleagues-number-box .data {
    width: 250px;
    height: 251px;
  }
  #row-box3 .colleagues-number-box .data span {
    font-size: 5.437rem;
  }
  #row-box3 .colleagues-number-box .data::before {
    width: 26vw;
    height: 26vw;
    width: 250px;
    height: 251px;
  }
  #row-box3 .mac-vs-win-box {
    top: 290px;
    left: 49vw;
  }
  #row-box3 .mac-vs-win-box dl {
    display: block;
  }
  #row-box3 .be-married-box {
    left: 85vw;
    left: 82.5vw;
    bottom: -5vw;
  }
  #row-box3 .be-married-box::before {
    left: -110px;
    width: 229px;
    height: 170px;
  }
  #row-box3 .tree {
    left: 50vw;
    width: 12.5vw;
  }
  #row-box3 .tree img {
    width: 100%;
  }

  #row-box4 ul {
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
  }

  #row-box5 .img-box .ballon-l {
    right: 6vw;
    width: 176px;
    height: 132px;
  }
  #row-box5 .img-box .ballon-l::before {
    top: -10px;
    width: 176px;
    height: 132px;
  }

  #row-box6 .row-box-inner {
    width: 359.5px;
    height: 296px;
  }
  #row-box6 .img-box {
    width: 100%;
    height: inherit;
    padding-top: 90px;
  }
  #row-box6 .img-box::before {
    width: 359.5px;
    height: 296px;
  }
  #row-box6 .img-box .data span {
    font-size: 7.187rem;
  }

  #row-box7 .flex-box .flex-inner,
  #row-box7 .flex-box .flex-inner:last-child {
    width: 33.333%;
  }
  #row-box7 .flex-box .flex-inner:first-child {
    width: calc(33.3333% + 5%);
  }
  #row-box7 .flex-box .flex-inner:last-child {
    width: calc(33.3333% - 5%);
  }

  #row-box8 .box-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    max-width: 800px;
    margin: 0 auto;
  }
  #row-box8 ul {
    width: 430px;
    margin: 0;
    padding-top: 0;
  }
  #row-box8 .ballon {
    position: relative;
    top: -10px;
    width: 280px;
    height: 210px;
  }
}
/*---------------------------------------------

	for -719px

  ---------------------------------------------*/
@media screen and (max-width: 719px) {
  .tabNav li .sp {
    display: block;
  }

  .listBox3 section {
    float: none;
    width: auto;
  }
  .listBox3 section h2 {
    width: 700px;
  }
  .listBox3 section:nth-of-type(3) a {
    background-color: #27c0dc;
  }
  .listBox3 section a {
    text-align: center;
  }
  .listBox3 section a .textArea {
    text-align: center;
  }

  /* for background-img */
  .recruit-tit::after {
    width: 84px;
    height: 90px;
  }
  .recruit-tit .text-box::before {
    right: 5px;
    bottom: -100px;
  }
  .recruit-tit .text-box::after {
    left: 5px;
    bottom: -105px;
  }
  .recruit-tit h2 {
    font-size: 1.5rem;
  }
  .recruit-tit h2::before {
    right: 2vw;
    width: 100px;
    height: 75px;
  }
  .recruit-tit h2::after {
    left: 2vw;
    width: 155px;
    height: 64px;
  }
  .recruit-tit .inner {
    padding-bottom: 170px;
  }
  .recruit-tit .inner::before {
    left: 24vw;
    height: 123px;
  }
  .recruit-tit .inner::after {
    right: 22vw;
    height: 123px;
  }

  /* -----------------------------------------------
    クライマークスってどんな会社
  ------------------------------------------------- */
  .recruit-page .about-climarks {
    padding-bottom: 70px;
  }
  .recruit-page .about-climarks .inner {
    padding-top: 60px;
  }
  .recruit-page .about-climarks h2 {
    font-size: 1.5rem;
    font-size: 1.375rem;
  }
  .recruit-page .about-climarks h2::after {
    top: -20px;
    right: -20px;
    width: 57px;
    height: 41px;
  }
  .recruit-page .about-climarks h2 span::after {
    width: 130px;
    height: 43px;
  }

  .recruit-page .about-climarks h3 {
    color: #0090d4;
    font-family: 'Logotype-Gothic', sans-serif;
    font-size: 1.125rem;
    font-size: 1rem;
    letter-spacing: 0;
  }

  .numbers .zero {
    top: 8.4vw;
    top: 9.5vw;
    left: 15vw;
  }
  .numbers .zero img {
    width: 6vw;
  }

  .numbers .one {
    top: 24.5vw;
    top: 26.5vw;
    left: 29.5vw;
  }
  .numbers .one img {
    width: 6.5vw;
  }

  .numbers .two {
    top: 22.3vw;
    top: 26.4vw;
    left: 2.7vw;
  }
  .numbers .two img {
    width: 22vw;
  }

  .numbers .three {
    top: 29.1vw;
    top: 34vw;
    right: 6.3vw;
  }
  .numbers .three img {
    width: 8vw;
  }

  .numbers .five {
    top: -4vw;
  }
  .numbers .five img {
    width: 28vw;
  }

  .numbers .six {
    top: -10.8vw;
    left: 2.5vw;
  }
  .numbers .six img {
    width: 19vw;
  }

  .numbers .nine {
    top: 25vw;
    top: 29vw;
    right: 26vw;
  }
  .numbers .nine img {
    width: 11vw;
  }

  #row-box1,
  #row-box2,
  #row-box3,
  #row-box4,
  #row-box5,
  #row-box6,
  #row-box7,
  #row-box8 {
    padding: 0 4vw;
  }

  /* ----------------------------------------
    社員数
  ------------------------------------------ */
  .recruit-page {
    overflow: hidden;
  }
  .recruit-page #row-box1 {
    padding-bottom: 40px;
  }
  .recruit-page .about-climarks .members::before {
    top: 21vw;
    top: 180px;
    right: 0;
  }
  .recruit-page .about-climarks .members h3 {
    margin-bottom: 80px;
  }
  .recruit-page .about-climarks .members ul {
    width: 100%;
    max-width: 500px;
    margin: 35px auto 0;
    order: 1;
  }
  .recruit-page .about-climarks .members ul li.member-pro {
    width: 25%;
  }
  .recruit-page .about-climarks .members ul li.member-pro .num {
    top: 10px;
  }
  .recruit-page .about-climarks .members ul li.member-pro img {
    width: 61px;
    height: 122px;
  }
  .recruit-page .about-climarks .members ul li.member-dire .num {
    top: -25px;
  }
  .recruit-page .about-climarks .members ul li.member-dire img {
    width: 72px;
    height: 155px;
  }
  .recruit-page .about-climarks .members ul li.member-de {
    width: calc(25% - 5%);
  }
  .recruit-page .about-climarks .members ul li.member-de .num {
    top: 12px;
  }
  .recruit-page .about-climarks .members ul li.member-de img {
    width: 62px;
    height: 121px;
  }
  .recruit-page .about-climarks .members ul li.member-en {
    width: 25%;
  }
  .recruit-page .about-climarks .members ul li.member-en .num {
    top: 50px;
  }
  .recruit-page .about-climarks .members ul li dl dt {
    height: 168px;
  }
  .recruit-page .about-climarks .members .num-box {
    display: inline-block;
    margin: 0 auto;
    padding-left: 3vw;
    order: 0;
  }
  .recruit-page .about-climarks .members .num-box .ballon {
    top: -85px;
    right: -105px;
    width: 156px;
    height: 112px;
    padding-top: 23px;
  }

  /* ----------------------------------------
    男女比
  ----------------------------------------- */
  #row-box2 {
    overflow: hidden;
  }
  #row-box2 .flex-box {
    display: block;
  }
  #row-box2 .flex-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 50px;
  }
  #row-box2 .flex-inner h3 {
    width: 100%;
    text-align: center;
  }
  #row-box2 .flex-inner .img {
    width: 60%;
    margin: 0;
    clear: both;
  }
  #row-box2 .flex-inner .img img {
    float: right;
    max-width: 251px;
    max-height: 214px;
    width: 100%;
  }
  #row-box2 .num-box {
    width: 40%;
    margin: 0;
    padding-left: 30px;
  }
  #row-box2 .num-box .data {
    display: table;
    padding-top: 85px;
  }
  #row-box2 .num-box .ballon {
    top: 157px;
    left: -224px;
  }
  #row-box2 .flex-inner.age {
    display: block;
    width: 75%;
    margin-left: 3.5vw;
  }
  #row-box2 .flex-inner.age::before {
    right: -75px;
    bottom: -25px;
  }
  #row-box2 .flex-inner.age dd {
    right: -15px;
    bottom: 33px;
  }

  #row-box3 {
    min-height: 580px;
  }
  #row-box3 .home-town-box::before {
    top: 28.5vw;
    top: 125px;
    left: -15px;
    max-width: 330px;
    max-height: 320px;
    width: 64vw;
    height: 61vw;
  }
  #row-box3 .home-town-box .ballon-m {
    top: 320px;
    left: 285px;
  }
  #row-box3 .colleagues-number-box {
    width: 40%;
  }
  #row-box3 .colleagues-number-box .data {
    max-width: 240px;
    max-height: 240px;
    width: 40vw;
    height: 40vw;
    margin: auto;
    padding-top: 20vw;
  }
  #row-box3 .colleagues-number-box .data::before {
    max-width: 240px;
    max-height: 240px;
    width: 40vw;
    height: 40vw;
  }
  #row-box3 .mac-vs-win-box {
    position: absolute;
    top: 390px;
    left: 23vw;
    width: auto;
    text-align: center;
  }
  #row-box3 .mac-vs-win-box dl {
    display: block;
  }
  #row-box3 .mac-vs-win-box dl dt {
    margin-right: 0;
  }
  #row-box3 .be-married-box {
    right: 6vw;
    bottom: 0;
  }
  #row-box3 .be-married-box::before {
    top: -30px;
  }
  #row-box3 .tree {
    top: -70px;
    left: 45vw;
    width: 16vw;
  }
  #row-box3 .tree img {
    width: 100%;
  }

  #row-box4 ul {
    max-width: 760px;
    width: 100%;
    height: 235px;
    margin: 0 auto;
  }
  #row-box4 ul li:nth-child(3).painter::before {
    right: -30px;
    width: 60px;
    height: 86px;
  }
  #row-box4 ul li:nth-child(4) {
    top: 50px;
  }
  #row-box4 ul li:nth-child(5) {
    left: -10px;
  }
  #row-box4 ul li:nth-child(6).lottery {
    top: 100px;
    left: 22vw;
  }
  #row-box4 ul li:nth-child(7) {
    top: 115px;
    left: 45vw;
  }
  #row-box4 ul li:nth-child(8) {
    top: 130px;
    right: -1vw;
  }

  #row-box5 {
    margin-bottom: 80px;
  }
  #row-box5 .img-box ul {
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #row-box5 .img-box ul li {
    width: 33.3333%;
  }
  #row-box5 .img-box .ballon-l {
    right: -4vw;
    right: 11.5vw;
    bottom: -5vw;
    width: 166px;
    height: 122px;
  }
  #row-box5 .img-box .ballon-l::before {
    top: -10px;
    width: 166px;
    height: 122px;
  }

  #row-box6 {
    height: auto;
    margin-bottom: 70px;
  }
  #row-box6 .row-box-inner {
    max-width: 380px;
    max-height: 310px;
    width: 55vw;
    height: 46vw;
  }
  #row-box6 .data {
    font-size: 3.5vw;
  }
  #row-box6 .data span {
    font-size: 16.5vw;
  }
  #row-box6 .img-box {
    width: 55vw;
    height: 46vw;
    padding-top: 110px;
    padding-top: 14.5vw;
  }
  #row-box6 .img-box::before {
    max-width: 380px;
    max-height: 310px;
    width: 55vw;
    height: 46vw;
  }
  #row-box6 .ballon-s {
    top: -5px;
    left: -16vw;
  }
  #row-box6 .ballon-l {
    top: -22px;
    right: -22vw;
  }

  #row-box7 {
    margin-bottom: 20px;
  }
  #row-box7 .flex-box {
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  #row-box7 .flex-box .flex-inner {
    width: 100%;
    margin-bottom: 40px;
  }
  #row-box7 .flex-box .flex-inner h3 {
    margin-bottom: 20px;
  }

  #row-box8 {
    margin-bottom: 60px;
  }
  #row-box8 ul {
    max-width: 520px;
    width: 100%;
    order: 1;
  }
  #row-box8 ul li dl dt img {
    width: auto;
    height: 110px;
  }
  #row-box8 ul li dl dd {
    font-size: 0.625rem;
  }
  #row-box8 .ballon {
    order: 0;
  }
  #row-box8 .ballon .data p.first-child {
    font-size: 1.562rem;
  }
}
/* ---------------------------------------
  for -620px
------------------------------------------ */
@media screen and (max-width: 620px) {
  #row-box4 ul {
    height: 265px;
  }
  #row-box4 ul li:nth-child(4) {
    top: 85px;
  }
  #row-box4 ul li:nth-child(6).lottery {
    top: 128px;
    left: 10vw;
  }
  #row-box4 ul li:nth-child(7) {
    top: 118px;
    left: 37vw;
  }
  #row-box4 ul li:nth-child(8) {
    top: 155px;
    right: -3vw;
  }

  #row-box6 {
    padding-top: 70px;
  }
  #row-box6 .row-box-inner {
    width: 65vw;
    height: 54vw;
  }
  #row-box6 .row-box-inner .img-box {
    width: 65vw;
    height: 54vw;
    padding-top: 95px;
  }
  #row-box6 .row-box-inner .img-box::before {
    width: 65vw;
    height: 54vw;
  }
  #row-box6 .ballon-s {
    top: -10vw;
    left: -11vw;
  }
  #row-box6 .ballon-l {
    top: -21vw;
    right: -17vw;
  }
}
/* ---------------------------------------
  for -480px
------------------------------------------ */
@media screen and (max-width: 480px) {
  #row-box2 .num-box {
    padding-left: 5vw;
  }
  #row-box2 .num-box .data {
    padding-top: 70px;
  }
  #row-box2 .num-box .ballon {
    top: 34vw;
    left: -54vw;
  }

  #row-box3 {
    height: 210vw;
    margin-bottom: 70px;
  }
  #row-box3 .home-town-box {
    height: 100vw;
    padding-top: 0;
  }
  #row-box3 .home-town-box::before {
    top: 65px;
    left: 10px;
    max-width: none;
    max-height: none;
    width: 83vw;
    height: 80vw;
  }
  #row-box3 .home-town-box .ballon-m {
    top: 80vw;
    left: 50vw;
  }
  #row-box3 .colleagues-number-box {
    width: 50vw;
    position: relative;
  }
  #row-box3 .colleagues-number-box .data {
    width: 50vw;
    height: 50vw;
    padding-top: 25vw;
  }
  #row-box3 .colleagues-number-box .data span {
    font-size: 4.5rem;
  }
  #row-box3 .colleagues-number-box .data::before {
    width: 50vw;
    height: 50vw;
  }
  #row-box3 .colleagues-number-box .data::after {
    right: -90px;
    bottom: 80px;
  }
  #row-box3 .mac-vs-win-box {
    top: 145vw;
    left: 55vw;
  }
  #row-box3 .be-married-box {
    right: 44vw;
    bottom: 0;
  }
  #row-box3 .be-married-box::before {
    right: -10px;
    left: auto;
    max-width: 209px;
    max-height: 150px;
    width: 59vw;
    height: 42.5vw;
  }
  #row-box3 .tree {
    left: 50vw;
    width: 20vw;
  }

  #row-box4 ul {
    height: 380px;
  }
  #row-box4 ul li:first-child {
    left: 15vw;
  }
  #row-box4 ul li:nth-child(2) {
    left: 46vw;
  }
  #row-box4 ul li:nth-child(3).painter {
    top: 65px;
    left: 64vw;
  }
  #row-box4 ul li:nth-child(3).painter::before {
    top: -28px;
    right: -15px;
    width: 50px;
    height: 72px;
  }
  #row-box4 ul li:nth-child(4) {
    top: 210px;
    right: -3vw;
  }
  #row-box4 ul li:nth-child(5) {
    top: 80px;
  }
  #row-box4 ul li:nth-child(6).lottery {
    top: 200px;
    left: 3vw;
  }
  #row-box4 ul li:nth-child(6).lottery::before {
    top: -3px;
    width: 60px;
    height: 43px;
  }
  #row-box4 ul li:nth-child(7) {
    top: 130px;
    left: 40vw;
  }
  #row-box4 ul li:nth-child(8) {
    top: 270px;
    right: 9vw;
  }

  #row-box5 {
    margin-bottom: 100px;
  }
  #row-box5 .img-box .ballon-l {
    right: 0;
    bottom: -10vw;
  }

  #row-box6 .row-box-inner {
    width: 80vw;
    height: 65vw;
  }
  #row-box6 .row-box-inner .img-box {
    width: 80vw;
    height: 65vw;
    padding-top: 22vw;
  }
  #row-box6 .row-box-inner .img-box::before {
    width: 80vw;
    height: 65vw;
  }
  #row-box6 .data {
    font-size: 4.5vw;
  }
  #row-box6 .data span {
    font-size: 22vw;
  }
  #row-box6 .ballon-s {
    top: -26.5vw;
    left: -9vw;
  }
  #row-box6 .ballon-l {
    top: -32vw;
    right: -9vw;
  }
}
/* ---------------------------------------
  for -320px;
--------------------------------------- */
@media screen and (max-width: 320px) {
  .recruit-tit::after {
    width: 72px;
    height: 78px;
  }
  .recruit-tit .inner::before {
    left: 22vw;
    height: 100px;
  }
  .recruit-tit .inner::after {
    right: 20vw;
    height: 100px;
  }

  .recruit-tit h2,
  .recruit-page .about-climarks h2 {
    font-size: 1.25rem;
  }

  .ballon-l {
    font-size: 0.875rem;
  }

  /* ----------------------------------------
    社員数
  ------------------------------------------ */
  .recruit-page .about-climarks .inner {
    padding-top: 60px;
  }
  .recruit-page .about-climarks h2::after {
    right: -10px;
    width: 52px;
    height: 36px;
  }
  .recruit-page .about-climarks h2 span::after {
    width: 134px;
    height: 48px;
  }
  .recruit-page .about-climarks .members li dl dt {
    height: 165px;
  }
  .recruit-page .about-climarks .members li dl dt span {
    font-size: 1.5rem;
  }
  .recruit-page .about-climarks .members li dl dd {
    font-size: 0.625rem;
  }
  .recruit-page .about-climarks .members .num-box .data {
    font-size: 2rem;
  }
  .recruit-page .about-climarks .members .num-box .data span {
    font-size: 6rem;
  }
  .recruit-page .about-climarks .members .num-box .ballon {
    right: -90px;
  }

  #row-box2 .flex-inner:not(.age) {
    margin-bottom: 75px;
  }
  #row-box2 .flex-inner:not(.age) .img {
    min-width: 180px;
    min-height: 154px;
  }
  #row-box2 .flex-inner:not(.age) .num-box {
    width: calc(100% - 180px);
  }
  #row-box2 .flex-inner:not(.age) .num-box .ballon {
    top: 105px;
    left: -185px;
  }
  #row-box2 .flex-inner.age {
    padding-left: 0;
  }
  #row-box2 .flex-inner.age::before {
    right: -65px;
    width: 87px;
    height: 124px;
  }
  #row-box2 .flex-inner.age dd {
    right: -16px;
    font-size: 0.625rem;
  }
  #row-box2 .flex-inner.age .ballon {
    right: -60px;
  }

  #row-box3 {
    min-height: 250vw;
    margin-bottom: 30px;
  }
  #row-box3 h3 {
    margin-bottom: 20px;
  }
  #row-box3 .home-town-box {
    padding-top: 0;
  }
  #row-box3 .home-town-box::before {
    top: 76px;
    width: 87vw;
    height: 84vw;
  }
  #row-box3 .home-town-box .home-town {
    width: 150px;
    height: auto;
    font-size: .88rem;
  }
  #row-box3 .home-town-box .ballon-m {
    top: 90vw;
    left: 45vw;
  }
  #row-box3 .colleagues-number-box {
    top: 10vw;
  }
  #row-box3 .colleagues-number-box .data {
    padding-top: 24vw;
  }
  #row-box3 .colleagues-number-box .data span {
    font-size: 3.8rem;
  }
  #row-box3 .colleagues-number-box .data::after {
    bottom: 40px;
  }
  #row-box3 .mac-vs-win-box {
    top: 165vw;
    left: 52vw;
  }
  #row-box3 .be-married-box h3 {
    margin-bottom: 40px;
  }
  #row-box3 .be-married-box::before {
    top: 20px;
    right: auto;
    left: -70px;
    width: 184px;
    height: 125px;
    width: 150px;
  }
  #row-box3 .tree {
    width: 20vw;
  }

  #row-box4 h3 span {
    display: block;
  }
  #row-box4::before {
    width: 110px;
    height: 173px;
  }
  #row-box4 ul {
    height: 380px;
  }
  #row-box4 ul li {
    font-size: 0.812rem;
  }
  #row-box4 ul li:first-child {
    top: 20px;
    left: 3vw;
  }
  #row-box4 ul li:nth-child(2) {
    top: 0;
    left: 33vw;
  }
  #row-box4 ul li:nth-child(3).painter {
    top: 61px;
    left: 62vw;
  }
  #row-box4 ul li:nth-child(3).painter::before {
    top: -25px;
    right: -10px;
    width: 51px;
    height: 85px;
  }
  #row-box4 ul li:nth-child(4) {
    top: 115px;
    right: 12vw;
  }
  #row-box4 ul li:nth-child(5) {
    top: 90px;
    left: -3vw;
  }
  #row-box4 ul li:nth-child(6).lottery {
    top: 211px;
    left: 1vw;
  }
  #row-box4 ul li:nth-child(6).lottery::before {
    top: -10px;
    width: 69px;
    height: 46px;
  }
  #row-box4 ul li:nth-child(7) {
    top: 181px;
    left: 49.5vw;
  }
  #row-box4 ul li:nth-child(8) {
    top: 280px;
    right: 14vw;
  }

  #row-box5::before {
    top: -65px;
    left: 15px;
    width: 100px;
    height: 107px;
  }
  #row-box5 .img-box .ballon-l {
    width: 131px;
    height: 99px;
  }
  #row-box5 .img-box .ballon-l::before {
    width: 131px;
    height: 99px;
    background: url(../../recruit/images/numbers/ballon-s.png) no-repeat center;
    background-size: contain;
    transform: scale(-1, -1);
  }

  #row-box6 {
    margin-bottom: 60px;
    padding-top: 80px;
  }
  #row-box6 .row-box-inner .img-box {
    padding-top: 21vw;
  }
  #row-box6 .data span {
    font-size: 5rem;
  }
  #row-box6 .ballon-s {
    top: -32vw;
  }
  #row-box6 .ballon-l {
    top: -43vw;
  }

  #row-box7 .average-per-capita .data {
    font-size: 1.375rem;
  }
  #row-box7 .average-per-capita .data span {
    font-size: 3rem;
  }

  #row-box8 ul {
    padding-top: 175px;
  }
  #row-box8 ul li dl dt img {
    height: 90px;
  }
  #row-box8 ul li dl dd {
    font-feature-settings: "palt";
  }
  #row-box8 .ballon {
    width: 230px;
    height: 175px;
  }
  #row-box8 .ballon .data {
    top: 20px;
  }
  #row-box8 .ballon .data p:first-child {
    font-size: 1.562rem;
  }
  #row-box8 .ballon .data p:first-child span {
    font-size: 3.75rem;
  }

  .message p {
    font-size: 1rem;
  }
}
@media print {
  .fadein {
    opacity: 1;
  }

  /* 社員数
  ----------------------------- */
  .recruit-page .about-climarks .members ul {
    width: 100%;
    margin: 0 auto;
    order: 1;
  }
  .recruit-page .about-climarks .members .num-box {
    display: inline-block;
    margin: 0 auto 20px;
    order: 0;
  }
  .recruit-page .about-climarks .members .num-box .ballon {
    top: -30px;
    right: -120px;
  }

  /*  年齢
  ----------------------------- */
  #row-box2 .flex-inner.age::before {
    display: none;
  }
  #row-box2 .bar-graph .twenties .bar {
    display: block;
    width: 25%;
    height: 20px;
    background: #0090d4;
    animation: none;
  }
  #row-box2 .bar-graph .thirties .bar {
    width: 57%;
    height: 20px;
    background: #0076ad;
  }
  #row-box2 .bar-graph .forties .bar {
    width: 50%;
    height: 20px;
    background: #006696;
  }

  /* 出身地 定借率..ect.
  ---------------------------- */
  #row-box3 {
    min-height: 600px;
  }
  #row-box3 .home-town-box::before {
    display: none;
    top: 120px;
    width: 365px;
    height: 345px;
    z-index: -2;
  }
  #row-box3 .home-town-box .ballon-m {
    left: 23vw;
  }
  #row-box3 .max-vs-win-box {
    top: 300px;
    left: 12vw;
  }
  #row-box3 .be-married-box::before {
    display: none;
  }
  #row-box3 .be-married-box .data span {
    font-size: 3.5rem;
  }
  #row-box3 .tree img {
    width: 60px;
  }

  /* 前職
  ----------------------------- */
  #row-box4 ul {
    height: auto;
  }
  #row-box4 ul li:first-child, #row-box4 ul li:nth-child(2), #row-box4 ul li:nth-child(3), #row-box4 ul li:nth-child(4), #row-box4 ul li:nth-child(5), #row-box4 ul li:nth-child(6), #row-box4 ul li:nth-child(7), #row-box4 ul li:nth-child(8) {
    display: inline-block;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    background: none;
  }

  /* 旅行先
  ------------------------------ */
  #row-box5::before {
    display: none;
  }
  #row-box5 .img-box .ballon-l {
    top: 30px;
    bottom: auto;
  }

  /* 連続増収年数
  ----------------------------- */
  #row-box6 .img-box {
    padding-top: 6vw;
  }
  #row-box6 .data span {
    font-size: 6rem;
  }
  #row-box6 .ballon-s {
    top: 40px;
    z-index: 3;
  }
  #row-box6 .ballon-s::before {
    display: none;
  }
  #row-box6 .ballon-l {
    top: 30px;
    z-index: 3;
  }
  #row-box6 .ballon-l::before {
    display: none;
  }

  /* 制作ジャンル　取引率　etc.
  ----------------------------- */
  #row-box7 .flex-inner .works-genre::before {
    display: none;
  }
  #row-box7 .flex-inner .direct-rate {
    background: none;
  }

  /* 関わるメンバー
  ----------------------------- */
  #row-box8 ul {
    margin: 0 auto;
    padding-top: 195px;
  }
}


/*---------------------------------------------
  portfolio-詳細
  ---------------------------------------------*/

.portfoliomainvisual{
	background: #fff;
	text-align: center;
	color: #000000;
}

.portfoliomainvisual h1{
	font-size: 200%;
}


.portfoliomainvisual img{
	display: block;
	margin: 0 auto;
}

.portfoliomainvisual span{
	color: #b2b2b2;
	margin: 0 0 30px 0;
	display: block;
}

.detailread{
	font-size: 180%!important;
	color: #000000;
	text-align: center;
	margin: 0 auto 20px auto!important;
}

.detail{
	background: #f1f5f6;
	padding: 40px 30px!important;
	margin: 0 0 40px 0!important;
}

.detail span{
	font-size: 150%;
	display: block;
	margin:0 0 20px 0;
}

.detailimage{
	display: block;
	border:solid 1px #eeeeee;
	margin: 0 auto 40px ;
}

.detailblank{
	position: relative;
}

.detailblank a::after{
	position: absolute;
	content: "";
	top: 50%;
	right: -15px;
	width: 10px;
	height: 10px;
	margin-top: -3px;
	background: url("../../portfolio/web/tamagawaeizai/blank.svg") top left no-repeat;
	background-size: 10px 10px;
}

.detailbox{
	overflow: hidden;
}

.detailbox .left{
	width: 47%;
	float: left;
	margin: 0;
}

.detailbox .right{
	width: 47%;
	float: right;
	margin: 0;
}

.detailbox .left img, .detailbox .right img{
	width: 100%;
}

.detailmb0{
	margin: 0;
}

@media screen and (max-width: 979px) {

	.detailread br{
		display: none;
	}

}