/* ==============================================

  TOP SLIDER STYLES

================================================*/
body{
	position:relative;
}

.slider-wrapper {
	position:relative;
	overflow:hidden;
	width:100%;
	margin:50px auto 0;
	background:#FFF;
}

.slider{
	position:relative;
	width:90%;
	margin:0 auto;
	background:#fff;
	z-index:1;
}

.topics_box {
	width:30%;
	padding:3% 5%;
	text-align:center;
	line-height:180%;
	color: #666;
	background-color: rgba(190, 190, 190, 0.7);
	border: 1px solid #ddd;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 0px 0px 4px #000000;
	-webkit-box-shadow: 0px 0px 4px #000000;
	box-shadow: 0px 0px 4px #000000;
}

.topics_lead {
	font-size:108%;
	text-align:center;
}

.topics_title {
	font-size:123.1%;
	font-weight:bold;
}

.slider a {
	text-decoration: none;
	color: #666;
	font-size:120%;
}
.slider a:hover {
	color: #333;
	text-decoration: none;
}

.link_box {
	width:110px;
	height:110px;
	background:url(../images/dummy.gif) 0 0 no-repeat;
}
.link_box a {
	display:block;
	height:100%;
	width:100%;
}

.link_box_smartm {
	width:680px;
	height:74px;
	background:url(../images/dummy.gif) 0 0 no-repeat;
}
.link_box_smartm a {
	display:block;
	height:100%;
	width:100%;
}

.link_box_news {
	width:280px;
	height:250px;
	background:url(../images/dummy.gif) 0 0 no-repeat;
}
.link_box_news a {
	display:block;
	height:100%;
	width:100%;
}


/* Loading Image */

#loader {
    width: 31px;
    height: 31px;
    background:url(../images/loading.gif) 0 0 no-repeat;
    text-indent:-9999px;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 50%;
    left: 50%;
    margin-top:-15px;
    margin-left:-15px;
    z-index: 8000;
	visibility:hidden;
}
 
#fade {
    width: 100%;
    height: 100%;
    visibility:hidden;
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 50;
}

/* ==============================================

  Common Style

================================================*/
body.second {
	background:url(../images/waves3.png) 50% 50% fixed no-repeat;
}
body.business {
	background: #000;
}

#container,
#container2 {
	margin:50px auto 20px;
	padding:20px 0;
}
#container3 {
	margin:50px auto 20px;
	padding:0px 5% 20px 10%;
}


.page_title {
	color:#5A77AC;
	font-size:174%;
	padding-top:25px;
}

.page_title span {
	padding-left:40px;
	font-size:70%;
}

footer {
	position: fixed;
	bottom:0;
	right:10px;
	height:15px;
	padding-right:20px;
	font-size:90%;
	color:#999;
	z-index:800;
}

footer a {
	color:#666;
}

footer a:hover {
	text-decoration:none;
}

.hidd {
	visibility:hidden;
	margin:0;
	height:0;
}


/* ==============================================

  PC Style
  指定したCSSはie_style.cssへコピーする。

================================================*/

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


/* Layout
-------------------- */
#container {
	width:940px;
}

#container2 {
	width:725px;
}

#container3 {
	width:90%;
	min-width: 600px; /* 最小幅 */  
	max-width: 1300px; /* 最大幅 */  
}

/* Header */
header {
	background:url(../images/nav_bg.png) 0 0 repeat-x;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:50px;
	z-index: 1000;
}

header .header_inner {
	width:1000px;
	margin:0 auto;
}

header h1 {
	width:300px;
	text-align:center;
	float:left;
}

.pushmenu li {
	float:left;
}

.pushmenu li a {
	display:block;
	width:160px;
	height:50px;
	background:url(../images/nav_img.png) 0 0 no-repeat;
	text-indent:-9999px;
}

.pushmenu li#menu01 a {background-position: 0 0;}
.pushmenu li#menu02 a {background-position: -160px 0;}
.pushmenu li#menu03 a {background-position: -320px 0;}
.pushmenu li#menu04 a {background-position: -480px 0; width:162px;}

/* Hover & Current */
.pushmenu li#menu01 a:hover,
.pushmenu li#menu01.current a {background-position: 0 -54px;}
.pushmenu li#menu02 a:hover,
.pushmenu li#menu02.current a {background-position: -160px -54px;}
.pushmenu li#menu03 a:hover,
.pushmenu li#menu03.current a {background-position: -320px -54px;}
.pushmenu li#menu04 a:hover,
.pushmenu li#menu04.current a {background-position: -480px -54px;}

#nav_list {
	display:none;
}

/*   Case Studie MediansFree
==================================================== */

/* masonry */

.masonry {
	position:relative;
	margin-left:-10px;
	overflow:hidden;
	padding:10px 0;
}

.item {
	width:205px;
	height:320px;
	float:left;
	margin:0 10px 20px;
	padding:7px 5px;
	border:1px solid #eee;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;
	box-shadow: 0px 0px 3px #000000;
}

.item img {
	display:block;
	margin:0 auto 20px;
	border:1px solid #ccc;
}

.item .case_title {
	color:#555;
	font-size:108%;
	padding-bottom:5px;
	border-bottom:1px dotted #999;
}

.item .case_title span {
}

.item dl {
	color:#555;
}

.item dl dt {
	margin-top:10px;
	font-weight:bold;
}

/* Select Menu */
.select {
	margin:20px 0;
}

.select #tab {
	overflow:hidden;
	background-color:#ccc;
}

.select #tab li {
	float:left;
}

.select #tab li a {
	display:block;
	padding:5px 20px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	text-align:center;
}
.select #tab li a:hover,
.select #tab li a.sel {
	background-color:#5A77AC;
}

.tab {
	background-color:#5A77AC;
	overflow:hidden;
}

.tab li {
	float:left;
}

.tab li a {
	display:block;
	padding:5px 20px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	text-align:center;
}

.tab li a:hover {
	background-color:#ccc;
}

.no_style {
	text-decoration:none;
	color: #666;
}

/*   About MediansFree
==================================================== */

.about_box {
	padding:3px 30px;
	margin:30px auto;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;
	box-shadow: 0px 0px 3px #000000;
}

.about_box table {
	width:100%;
}

.about_box table th {
	width:103px;
	padding:8px 0;
	text-align:left;
	border-bottom:1px dotted #ccc;
	vertical-align:top;
}

.about_box table td {
	padding:8px 0;
	border-bottom:1px dotted #ccc;
}

.about_box table tr.last th,
.about_box table tr.last td {
	border:none;
}

.office_info {
	margin-bottom:20px;
	position:relative;
}

.access_map {
	position:absolute;
	top:13px;
	right:81px;
}
.p_mark {
	position:absolute;
	top:0px;
	right:81px;
}

/*   Business
==================================================== */

.sub_navi {
	margin-left:20%;
	margin-bottom: 50px;
}

.sub_navi ul li{
	float:left;
	margin-left:3%;
}


/*   Contact
==================================================== */
.contact_box {
	padding:3px 30px;
	margin:30px auto;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;
	box-shadow: 0px 0px 3px #000000;
}

.contact_box table {
	width:100%;
}

.contact_box table th {
	width:103px;
	padding:8px 0;
	text-align:left;
	border-bottom:1px dotted #ccc;
}

.contact_box table td {
	padding:8px 0;
	border-bottom:1px dotted #ccc;
}

.contact_box table tr.last th,
.contact_box table tr.last td {
	border:none;
}

.contact_box p.cont_lead {
	margin:20px 0;
}
.contact_box dl {
}
.contact_box dl dt {
	padding:5px 0;
	font-weight:bold;
}
.contact_box dl dd {
	padding-bottom:20px;
}
.contact_box dl dd .madoguchi {
	margin:20px 0 0 150px;
}

.contact_box .con_button {
	text-align:center;
	margin:20px 0;
}
.contact_box .con_button input {
	margin:0 10px;
}

.contact_form {
}

.contact_form input,
.contact_form textarea {
	padding:.3em .5em;
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.contact_form input:focus,
.contact_form textarea:focus {
border-color: #129FEA;
}
.contact_form textarea {
	width:100%;
	height:10em;
	overflow:auto;
}

.contact_form [type="submit"],
.submit {
	border:none;
	background-color:#06F;
	color:#fff;
	padding:.5em 1.5em;
	border-radius: 4px;
	box-shadow:none;
}
.contact_form [type="submit"]:hover,
.submit:hover {
	background-color:#09F;
}

.contact_form table th {
	width:120px;
}

/*   News
==================================================== */

.news_box {
	padding:3px 30px;
	margin:30px auto;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;
	box-shadow: 0px 0px 3px #000000;
	color: #666;
}

.new {
	width:100%;
	border-bottom:1px dotted #ccc;
	margin:10px 0;
	padding:10px 0;
	overflow:hidden;
}

.news_title {
	margin-bottom:10px;
	color: #333;
}

.news_title a {
	font-weight:bold;
	text-decoration: none;
	color: #333;
}

.news_title a:hover {
	background-color:#E4F3F0;
}

.new img {
	border:1px solid #ccc;
	margin-right:10px;
	float:left;
}

.date {
	text-align:right;
}

.top_news_box {
	padding:45px 0px 20px 20px;
	margin:40px 0 0 80px;
	background-color: #FFF;
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	color: #666;
	height:180px;
}
.bold {
	font-weight:bold}

.top_news_box img {
	width:100%}
}


/* ==============================================

  SmartPhone Style

================================================*/

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

/* Layout
-------------------- */
#container,
#container2,
#container3 {
	width:90%;
	padding:0;
}
/* Header */
header {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:50px;
	z-index:1000;
}

header h1 {
	background:url(../images/nav_bg.png) 0 0 repeat-x;
	height:50px;
}

.pushmenu {
        background: #3c3933;
        font-family: Arial, Helvetica, sans-serif;
        position: fixed;
        width: 240px;
        height: 100%;
        top: 0;
        z-index: 1000;
}
 
.pushmenu h3 {
        color: #cbbfad;
        font-size: 14px;
        font-weight: bold;
        padding: 15px 20px;
        margin: 0;
        background: #282522;   
        height: 16px;
}
 
.pushmenu a {
        display: block;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        border-top: 1px solid #57544e;
        border-bottom: 1px solid #312e2a;
        padding: 14px;
		z-index: 1000;
}

.pushmenu a span {
	font-size:77%;
	display:block;
}
 
.pushmenu a:hover {
        background:#258ecd;     
}
 
.pushmenu a:active {
        background: #454f5c;
        color: #fff;   
}
 
.pushmenu-left {
        right: -240px;  
}
 
.pushmenu-left.pushmenu-open {
        right: 0px;     
}
 
.pushmenu-push {
        overflow-x: hidden;
        position: relative;
        right: 0;       
}
 
.pushmenu-push-toright {
        right: 240px;   
}
 
/*Transition*/
.pushmenu, .pushmenu-push {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;     
}
 
#nav_list {
        background: url(../images/icon_nav.png) no-repeat left top;
        cursor: pointer;
        height: 27px;
        width: 33px;
		display:block;
       text-indent: -99999em;
	   z-index:100;
	   position:absolute;
	   top:10px;
	   right:10px;
}
 
#nav_list.active {
        background-position: -33px top;
}
 
.buttonset {
        background: linear-gradient(center top , #6b85b3, #334d86);
        background:-moz-linear-gradient(center top , #6b85b3, #334d86);
    background: -webkit-gradient(linear, center top, center bottom, from(#6b85b3), to(#334d86));
        height: 16px;
        padding: 10px 20px 20px;
}
 
section.content {
        font-family: Arial, Helvetica, sans-serif;
        padding: 10px 20px;    
}

.off_screen {
	opacity:0.3;
	background-color:#000;
	height:100%;
	width:100%;
	display:none;
	z-index:500;
	position:fixed;
	top:0;
	left:0;
}

/*   About MediansFree
==================================================== */

.about_box {
	padding:30px;
	margin:30px auto;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;
	box-shadow: 0px 0px 3px #000000;
}

.about_box table,
.about_box thead,
.about_box tbody,
.about_box th,
.about_box td,
.about_box tr {
        display: block;
		text-align:left;
}

.about_box tr {
	margin-bottom:1em;
}


/*   Business
==================================================== */

.sub_navi {
	margin-left:20%;
	margin-bottom: 50px;
}

.sub_navi ul li{
	float:left;
	margin-left:3%;
}

/*   Case Studie MediansFree
==================================================== */

/* masonry */

.masonry {
	position:relative;
	margin-left:-10px;
	overflow:hidden;
	padding:10px 0;
}

.item {
	width:99%;
	margin:0 3px 20px;
	padding:10px 10px;
	border:1px solid #eee;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;
	box-shadow: 0px 0px 3px #000000;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.item img {
	display:block;
	margin-right:10px;
	float:left;
	max-width:30%;
	height:auto;
	border:1px solid #ccc;
}


.item dl dt {
	margin-top:10px;
	font-weight:bold;
}

/* Select Menu */
.select {
	margin:20px 0;
}

.select #tab {
	overflow:hidden;
	background-color:#ccc;
}

.select #tab li {
	float:left;
}

.select #tab li a {
	display:block;
	padding:5px 20px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	text-align:center;
}
.select #tab li a:hover,
.select #tab li a.sel {
	background-color:#5A77AC;
}

.tab {
	background-color:#5A77AC;
	overflow:hidden;
}

.tab li {
	float:left;
}

.tab li a {
	display:block;
	padding:5px 20px;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	text-align:center;
}

.tab li a:hover {
	background-color:#ccc;
}

.no_style {
	text-decoration:none;
	color: #666;
}

/*   Contact
==================================================== */
.contact_box {
	padding:30px;
	margin:30px auto;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;
	box-shadow: 0px 0px 3px #000000;
}

.contact_box table,
.contact_box thead,
.contact_box tbody,
.contact_box th,
.contact_box td,
.contact_box tr {
        display: block;
		text-align:left;
}

.contact_box tr {
	margin-bottom:1em;
}

.contact_box p.cont_lead {
	margin:20px 0;
}
.contact_box dl {
}
.contact_box dl dt {
	padding:5px 0;
	font-weight:bold;
}
.contact_box dl dd {
	padding-bottom:20px;
}
.contact_box dl dd .madoguchi {
	margin:20px 0 0 20px;
}

.contact_box .con_button {
	text-align:center;
	margin:20px 0;
}
.contact_box .con_button input {
	margin:0 10px;
}

.contact_form {
}

.contact_form input[type="text"],
.contact_form textarea {
	padding:.3em .5em;
	border: 1px solid #ccc;
	box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
	width:100% !important;	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.contact_form input[type="text"]:focus,
.contact_form textarea:focus {
border-color: #129FEA;
}
.contact_form textarea {
	height:10em;
	overflow:auto;
}

.contact_form [type="submit"],
.submit {
	border:none;
	background-color:#06F;
	color:#fff;
	padding:.5em 1.5em;
	border-radius: 4px;
	box-shadow:none;
}
.contact_form [type="submit"]:hover,
.submit:hover {
	background-color:#09F;
}

/*   News
==================================================== */

.news_box {
	padding:3px 30px;
	margin:30px auto;
	background-color: rgba(255,255,255,0.9);
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	-webkit-box-shadow: 0px 0px 3px #000000;
	box-shadow: 0px 0px 3px #000000;
	color: #666;
}

.new {
	width:100%;
	border-bottom:1px dotted #ccc;
	margin:10px 0;
	padding:10px 0;
	overflow:hidden;
}

.news_title {
	margin-bottom:10px;
	color: #333;
}

.news_title a {
	font-weight:bold;
	text-decoration: none;
	color: #333;
}

.news_title a:hover {
	background-color:#E4F3F0;
}

.new img {
	border:1px solid #ccc;
	margin-right:10px;
	float:left;
}

.date {
	text-align:right;
}

.top_news_box {
	padding:45px 0px 20px 20px;
	margin:40px 0 0 80px;
	background-color: #FFF;
	border: 1px solid #cccccc;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	-moz-box-shadow: 0px 0px 3px #000000;
	color: #666;
	height:180px;
}
.bold {
	font-weight:bold}

.top_news_box img {
	width:100%}

}