@charset "utf-8";
/* CSS Document */

/*==============================BASE*/
body {
	margin			: 0px;
	padding			: 0px;
	background-color: #ffffff;
	/*text-align		: center;*/
	width:100%;
	height:100%;
	color:#555;
	font-family:'メイリオ','Meriyo',Arial,Helvetica,sans-serif;
	font-size:14px;
	line-height:24px;
}

*{
	margin			: 0;
	padding			: 0;
	font: 100%;
	}

.clear {
	clear			: both;
	}


a {
	cursor: pointer;
	color:#00a1de;
}
a:hover{color:#72c7e7;}
a:hover{opacity:0.8;}
a img:hover{
	filter:alpha(opacity=70);
	opacity: 0.7;
}

h1, h2, h3, h4, h5, h6 {
line-height: 1.5;
margin: 0 0 0 0;
padding-bottom: .1em;
color: #002776;
}

h1{
line-height: 1.1;
font-size: 2.4em;	
color: #002776;
font-weight: 300;
}
h2{
line-height: 1.2;
color: #92d400;
font-size: 2.4em;
font-weight: 300;
}
h3{
line-height: 1.3;
font-size: 2em;
color: #002776;
font-weight: 300;
}
h4{
line-height: 1.2;
color: #002776;
font-size: 1.4em;
font-weight: 700;	
}
h5{
color: #333;
font-size: 1.25em;
font-weight: 700;	
}
b{
font-weight: bold;
font-size: 1em;
color: #333;
}


/*----- header -----*/
#header{
	top:0px; left:0px; clear:both; height:65px; 
	/*padding:0px 32px 0px 32px; */
	padding:0px;
	background-color:#ffffff; 
	border-bottom:#f1f1f1 1px solid;
}

.header_in{
	width:100%; 
	max-width:1200px; 
	margin:0 auto;
}

img#logo {
	float:left;
	background-image:url(../img/deloitte_logo.gif);
	background-repeat:no-repeat;
	margin: 12px 15px 0px 0px;
}
img#duallogo {
	float:right;
	background-image:url(../img/japanese_logo.gif);
	background-repeat:no-repeat;
	margin: 11px 0 0 0;	
}


/*==============================LAYOUT*/

#wrapper{width:100%; margin:10px auto 0; clear:both; text-align: left; background-color: #f3f3f3;}
#container{width:100%; margin:0 auto; overflow: hidden; background-color: #f3f3f3;}
#component{
	width: 70%;
	min-height: 100px;
	max-width: 900px;
	margin:10px auto;
	padding: 20px 40px 20px 40px;
	background-color: #ffffff;	
	box-shadow: 2px 3px 4px rgba(0,0,0,0.1);
	-webkit-border-radius: 5px;     /* for Safari and Chrome */
	-moz-border-radius: 5px;    /* for Firefox */
	-o-border-radius: 5px;  /* when Opera Presto 2.3 or later is released */
	-khtml-border-radius:5px;   /* Linux browsers */
	border-radius: 5px;     /* CSS3 */
	behavior: url(border-radius.htc);   /* for IE */
}


/*==============================tabs*/

#dropmenu{
	position:relative;
	list-style-type: none;
	width:800px;
	height:40px;
	margin:0.8% auto 0 auto;
	padding:0;
	text-align:right;
	z-index:1000;
}

#dropmenu li{
  position: relative;
  width: 20%;
  float: left;
  margin: 1% 0 0 0;
  padding: 0;
  text-align:center;
  font-weight:100;
}

#dropmenu li a{
  display: block;
  padding: 15px 0 11px;
  color: #00a1de;
  font-size: 16px;
  font-weight:100;
  line-height: 1;
  text-decoration: none;
}

#dropmenu li:hover > a{
  background: #fff;
  color: #00a1de;
}



#dropmenu li ul{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin:0;
  padding: 0;
}


#dropmenu li ul li{
  overflow: hidden;
  height: 0;
  color: #00a1de;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
  width:2000px;
  margin:-700px 0 0 0;
}

#dropmenu li ul li:hover > a{
  background:#343434;
  color: #00a1de;
}

#dropmenu li ul li a{
	vertical-align:middle;
  padding: 25px 10px;
  font-size: 13px;
  font-weight: normal;
  text-align:center;
}

#dropmenu li:hover ul li{
  overflow: visible;
  height: 60px;
}


#dropmenu li ul li span{
	width: 150px;
	height:60px;
	vertical-align:middle;
  padding:5px 0;
  background:#343434;
  text-align:center;
  float:left;
}

#dropmenu li ul li .navi1{
	width: 2500px;
	height:80px;
	vertical-align:middle;
    background:#343434;
	padding:0 0 0 40%;
}

#dropmenu li ul li .navi2{
	width: 100%;
	height:80px;
	vertical-align:middle;
    background:#343434;
	padding:0 0 0 23%;
}

#dropmenu li ul li .navi3{
	width: 100%;
	height:80px;
	vertical-align:middle;
    background:#343434;
	padding:0 0 0 45%;
}

#dropmenu li ul li .navi4{
	width: 100%;
	height:80px;
	vertical-align:middle;
    background:#343434;
	padding:0 0 0 40%;
}

#dropmenu li ul li .navi5{
	width: 100%;
	height:80px;
	vertical-align:middle;
    background:#343434;
	padding:0 0 0 50%;
}



/*==============================footer*/

#footer-section{width:100%;}
#footer_wrap{
	margin:0 auto; 
	max-width: 1000px;	
	width:100%;
}
#footer_menu_warp{
	margin:0 auto; 
	max-width: 1000px;	
	width:90%;
}

.footer-column{
	width: 30%;
	max-width: 330px;	
	float:left;
	margin:40px 2px 20px 2px;
	text-align:center;
	line-height:1;
}

.footer-col li{
	font-size:12px;
	line-height:2.5em;
	}
	
.footer-col li a:link{
	text-decoration:none;
	color:#00A1DE;
	}

.footer-col li a:visited{
	text-decoration:none;
	color:#00a1de;
	}

.footer-col li a:hover{
	text-decoration:none;
	color:#002776;
	}		

.headline{
	line-height:1.5em;
	}

.footer_link{
	width:100%;
	max-width:1300px;
	margin:0 auto;
	clear:both;
	line-height:5em;
	}
	
.footer_link a{
	font-size:12px;
	}
	
.footer_link a:link{
	text-decoration:none;
	color:#00A1DE;
	}
	
.footer_link a:visited{
	text-decoration:none;
	color:#00A1DE;
	}

.footer_link a:hover{
	text-decoration:none;
	color:#002776;
	}
		
.copyright{
	float:left;
	text-align:left;
	font-size:11px;
	max-width: 1300px;
	margin: 20px 5% 20px 5%;
	line-height:1.5em;
	}
	
.sns_link {
	float:left;
	width:100%;
	text-align:left;
	margin-left: 5%;

	
}


.sns_link img{
	-webkit-filter: grayscale(1); /* Webkit */
	filter: gray; /* IE6-9 */
	filter: grayscale(1); /* W3C */
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

}
.sns_link img:hover{
	-webkit-filter: grayscale(0); /* Webkit */
	filter: none; /* IE6-9 */
	filter: grayscale(0); /* W3C */
}



/* dott animation */
div.green-dots-container{background-image:url(../img/dcom-sprite-v1.png);background-position:0 -216px;background-repeat:repeat-x;clear:right;-webkit-animation-duration:450ms;-webkit-animation-iteration-count:1;-webkit-animation-name:dots-anim;animation-duration:450ms;animation-iteration-count:1;animation-name:dots-anim;-moz-animation-duration:450ms;-moz-animation-iteration-count:1;-moz-animation-name:dots-anim;-o-animation-duration:450ms;-o-animation-iteration-count:1;-o-animation-name:dots-anim;animation-duration:450ms;animation-iteration-count:1;animation-name:dots-anim;padding:1px;margin:1.1em 0;position:relative;height:4px;width:0;opacity:0}
@-ms-keyframes dots-anim{0%{width:0}
10%{width:10%}20%{width:20%}30%{width:30%}40%{width:40%}50%{width:50%}60%{width:60%}70%{width:70%}80%{width:80%}90%{width:90%}100%{width:100%}
}
@-webkit-keyframes dots-anim{0%{width:0}
10%{width:10%}20%{width:20%}30%{width:30%}40%{width:40%}50%{width:50%}60%{width:60%}70%{width:70%}80%{width:80%}90%{width:90%}100%{width:100%}
}
@-moz-keyframes dots-anim{0%{width:0}
10%{width:10%}20%{width:20%}30%{width:30%}40%{width:40%}50%{width:50%}60%{width:60%}70%{width:70%}80%{width:80%}90%{width:90%}100%{width:100%}
}
@-o-keyframes dots-anim{0%{width:0}
10%{width:10%}20%{width:20%}30%{width:30%}40%{width:40%}50%{width:50%}60%{width:60%}70%{width:70%}80%{width:80%}90%{width:90%}100%{width:100%}
}

div.green-dots-container{opacity:1;width:99%}