@charset"UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Serif+JP:wght@200..900&display=swap');
/* Micro clearfix */

.cf{ zoom:1; }
.cf:before, .cf:after{ content:"";display:table; }
.cf:after{ clear:both; }

/*全体の初期設定*/

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

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

html{
	font-size:62.5%;
/* 62.5%を指定すると「1.0rem=10px」 */

	-webkit-text-size-adjust:100%;
}

body{
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #ecf0f1;
    font-size: 100%;
    line-height: 1.25;
}

body.removeHighlight {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a{
	color: #95a5a6;
	text-decoration: none;
	overflow:hidden;
	outline:none;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0)!important;
}

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

a:link,
a:visited,
a:active,
a:hover { /* FireFox リンク選択時の点線を消す */
	overflow: hidden;
	outline: none;
}

h1,h2,h3,h4,h5,h6{
	margin: 0;
	/*font-weight:300;*/
	font-weight: bold;
        background-color: #003;
}

div,p{
        color: #333;
        font-size:14px;
        font-size:1.4rem;
	line-height: 1.3;
	text-align: left;
	margin:0 auto;
}

li{
	margin: 0.2em 0;
	color: #333;
	font-size:14px;
	font-size:1.4rem;
	line-height: 1.3;
	text-align: left;
}

.clr { clear:both; }  

ul{
	margin: 0 0 2em;
	padding: 0;
	list-style-position: inside;
}

svg {
	margin: 0;
}

section {
	padding: 0 2em;
	text-align: center;
}

section h1 {
	font-weight: 300;
	font-size: 2em;
	padding: 1em 0;
}

.nontext {
 	text-indent: -9999px !important; overflow: hidden !important;
}
.nontext a {
 	width: 100%; display: block; height: 100%; text-decoration: none
}

/*header*/

#header{
	margin: 0;
	padding:0.5em;
	background-color:#fff;
	line-height:0;
	aheight:38px;
	width: 100%;
	height: auto;
	padding:0.5em;
}

/*container*/

#container{
	padding: 0;
	margin: 0 auto;
}

/*footer*/

#footer{
	clear:both;
	height:auto;
	padding: 0;
	margin: 0 auto;
	background-color: #003;
	text-align: center;
	line-height:2em;
	padding: 5px 8px;
}

#footer p {
	margin:0.5em 0;
	text-align:center;
	color: #fff;
	font-weight: bold;
}


/*.box*/

.box {
	width: 300px;
	height: 180px;
	position: relative;
	background: rgba(255,255,255,0);
	display: inline-block;
	margin: 0 10px 20px;
	padding:5px;
	cursor: pointer;
	color: #fff;
	-webkit-transition: background 0.4s 0.5s;
	transition: background 0.4s 0.5s;
	overflow:hidden;
	behavior: url("/css/PIE.htc");
	clear:both;
}

.box:hover {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.box h3 {
        font-size: 1.6rem;
	font-size: 16px;
	line-height: 1.8;
	margin: 0;
	font-weight: 400;
	width: 100%;
	border-bottom:1px dashed #fff;
}

.box span {
	display: block;
	font-weight: 400;
	letter-spacing: 1px;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 6em 1em 0;
	margin:0;
	text-align:right;
}

.box h3,
.box span {
	-webkit-transition: color 0.4s 0.5s;
	transition: color 0.4s 0.5s;
}

.box:hover h3,
.box:hover span {
	color: #fff;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.box svg {
	position: absolute;
	top: 0;
	left: 0;
}

.box svg line {
	stroke-width: 2;
	stroke: #fff;
	fill: none;
	-webkit-transition: all .8s ease-in-out;
	transition: all .8s ease-in-out;
}

.box:hover svg line {
	stroke: #fff;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.box svg line.top,
.box svg line.bottom{
	stroke-dasharray: 590 500;
}

.box svg line.left,
.box svg line.right {
	stroke-dasharray: 330 240; 
}

.box:hover svg line.top {
	-webkit-transform: translateX(-600px);
	transform: translateX(-600px);
}

.box:hover svg line.bottom{
	-webkit-transform: translateX(600px);
	transform: translateX(600px);
}

.box:hover svg line.left {
	-webkit-transform: translateY(360px);
	transform: translateY(360px);
}

.box:hover svg line.right{
	-webkit-transform: translateY(-360px);
	transform: translateY(-360px);
}

/*.box2*/

.box2 {
	width: 300px;
	height: 160px;
	margin: 0 auto;
}

.bd{
    width: 300px;
    height: 160px;
    text-align: center;
    position: relative;
    padding: 0;
    margin: 0;
}

div.bd div{
    background: #fff;
    position:absolute;
    -webkit-transition:all .3s ease-in-out .3s;
    transition:all .3s ease-in-out .3s;
    }

.active .bd div{
    background: #fff;
}

.active .bd div.bdT{
    width: 100%;
    height:1px;
    top:0;
    left:0;
}
.active .bd div.bdB{
    width: 100%;
    height:1px;
    bottom:0;
    right:0;
}
.active .bd div.bdR{
    height:100%;
    width :1px;
    right:0;
    top:0;
}
.active .bd div.bdL{
    height:100%;
    width :1px;
    left:0;
    bottom:0;
}
.bd div.bdT{
    width: 0;
}
.bd div.bdB{
    width: 0;
}
.bd div.bdR{
    height:0;
}
.bd div.bdL{
    height:0;
}

.box2:hover .bd div.bdT{width: 0;}
.box2:hover .bd div.bdB{width: 0;}
.box2:hover .bd div.bdR{height:0;}
.box2:hover .bd div.bdL{height:0;}

.path{    
    stroke:#fff;
    fill:#000;
    stroke-width:0.5;    
    stroke-dasharray: 3000;
    stroke-dashoffset:2900;
    -moz-animation:DASH 4s ease-in-out 2s forwards;
    -webkit-animation:DASH 4s ease-in-out 2s forwards;
    -o-animation:DASH 4s ease-in-out 2s forwards;
    animation:DASH 4s ease-in-out 2s forwards;
    -webkit-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}
@keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#000;}
    80% {stroke-dashoffset:2000;fill:#000;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-moz-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#000;}
    80% {stroke-dashoffset:2000;fill:#000;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-webkit-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#000;}
    80% {stroke-dashoffset:2000;fill:#000;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-o-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#000;}
    80% {stroke-dashoffset:2000;fill:#000;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-ms-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#000;}
    80% {stroke-dashoffset:2000;fill:#000;}
    100%{stroke-dashoffset:0;fill:#fff;}
}


/*logo*/

#logo {
	width:80px;
	height:auto;
}	

#andit {
	margin: 0 auto;
	padding:0;
	width:290px;
	height:auto;
	position:relative;
	top:50%;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
}

/*svg非対応ブラウザ*/

#logoping {
	width:80px;
	height:28px;
}	

#anditpng {
	margin: -5em auto;
	padding:0;
	width:290px;
	height:124px;
}


div.title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #003;
    text-align: center;
}

div.logo {
    text-align: center;
}
.we_are_andit {
    padding: 1em 2em;
}
.we_are_andit p {
    line-height: 1.5em;
}

/*company,recruit,work*/

#container {
    color: #333;
}


#content dl {
	color: #333;
	font-size:14px;
	font-size:1.4rem;
	line-height: 1.5em;
	overflow: hidden;
	background: #fff;
	border: none;
	padding: 0;
	margin: 0px 0px 1px;
	width: 100%
	height: 5em;
}

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

#container div dl.company dt,
#container div dl.company dd,
#container div dl.work dt,
#container div dl.work dd,
#container div dl.work p {
        margin: 0;
	voice-family: inherit;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#container div dl.company dt {
	float: left;
	font-weight: bold;
	color: #886241;
	padding: 10px;
	text-align: center;
	width: 25%;
}

#container div dl.company dd {
	float: right;
	padding: 10px;
	width:75%;
}

#container div dl.work dt {
	font-weight: bold;
	color: #886241;
	padding: 0.5em 2em 0;
	text-align: left;
	width: 100%;
}

#container div dl.work dd {
	padding: 0.5em 4em;
	width:100%;
}

#container div dl.work p {
	font-weight: normal;
	padding: 0 2em 0.5em;
	text-align: left;
	width: 100%;
}

#container div dl.work dd label {
	margin-left: -2em ;
}

#content h1 {
	font-size:16px;
	font-size:1.6rem;
	padding: 5px 8px;
	margin: 0;
	width: 100%;
	line-height:1.8em;
	text-align: center;
	color: #fff;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#container div ul {
	margin:0.5em;
	padding:0;
}

#container div ul li {
	list-style-type: disc;
	list-style-position: outside;
	padding:0.2em;
}

dl.company dd img {
	width:270px;
	height:270px;
	margin:0 auto;
}


/*other details*/

#contact a {
	display: block;
}

/*Media Queriesによる切り替え*/

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

body {
	width: auto;
	padding: 0;
}

section {
	padding: 0;
}

.box svg line,
.box:hover svg line {
	stroke: none;
}

.box {
	margin: 0.4em auto ;
	border: 1px solid #fff;
	transition-property: border, width, height;
	transition-duration:1s;
	transition-timing-function:ease-in-out;
}

    .box#recruit,
    .box#contact {
	margin-top : 0.3em;
}

.box:hover {
	border: 1px solid #003;
	transition-property: border, width, height;
	transition-duration:1s;
	transition-timing-function:ease-in-out;

	-moz-transition-property: border, width, height;
	-webkit-transition-property: border, width, height;
	-o-transition-property: border, width, height;
	-ms-transition-property: border, width, height;

	-moz-transition-duration:1s;
	-webkit-transition-duration:1s;
	-o-transition-duration:1s;
	-ms-transition-duration:1s;

	-moz-transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	-o-transition-timing-function:ease-in-out;
	-ms-transition-timing-function:ease-in-out;
}

.bd,
.box2 {
	width: 100%;
	height:120px;
	margin:0 auto;
}


#container,
#footer {
	width: 100%;
}

#container div dl.work dt,
#container div dl.work p {
	padding: 0.5em;
}

#container div dl.work dd {
	padding: 0 1.5em;
}

#container div dl.work dd label {
	margin-left: -1em ;
}

   dl.company dd img {
	width:100%;
	height:auto;
	margin:0;
}

}

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

body {
	-webkit-text-size-adjust:100%;
	width:100%;
}

section {
	width:100%;
}

#andit {
	width: 80%;
	text-align: center;
}