@charset "utf-8";
@media screen and (min-width: 641px){
body{
font-family: 'Open Sans', sans-serif;
color:#555555;
}

#wrap{
width:980px;
margin:0 auto 50px auto;
}

.basic_area{
margin:0 0 10px 0;
}

::selection {
background: #607DD0;
color: white;
}

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

共通

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

.content_ttl{
clear:both;
padding:10px;
margin:0 0 10px 0;
font-weight:bold;
font-size:14px;
border-bottom:solid 1px #607DD0;
}

.display-none {
    display:none;
}



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

パンクズ

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

#bread{
line-height:1;
overflow: hidden;
zoom: 1;
width: 660px;
margin: 0 0 10px 0;
padding: 10px 15px;
font-size:11px;
background:#EFEFEF;
}

#bread li {
  color:#fff;
  float: left;
}

#bread li a {
color:#fff;
border-right:1px solid #ccc;
padding:0 10px 0 0;
margin:0 10px 0 0;
text-decoration: none;
}


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

下層ページタイトル

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

#in_title{
width: 690px;
height: 130px;
margin:0 0 20px 0;
position: relative;
}

#in_title h2{
letter-spacing: 3px;
position: absolute;
left: 20px;
/* 画像の高さにより調節 */
top:45px;
background-color: rgba(96,125,208,0.6);
/*background: #607DD0;*/
color: white;
line-height: 1;
padding: 10px;
}

#in_title span{
margin:0 0 0 5px;
font-size:14px;
}


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

下層ページテーブル系

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

.in_list {
overflow:hidden;
  padding: 0 0px 10px 10px;
  line-height: 1.8;
}

.in_list h3 {
  font-weight: bold;
  padding: 10px;
  border-bottom: solid 1px #ccc;
  width: 150px;
  float: left;
}
.in_list .in_list_r {
  padding: 10px;
  border-bottom: dotted 1px #ccc;
  width: 480px;
  float: left;
}
.in_list .in_list_r h4 {
  margin: 0 0 2px 0;
  font-weight: bold;
}
.in_list .in_list_r ul {
  margin: 0 0 5px 0;
}



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

フォームテーブル系

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


.basic_table {
padding:0px 10px 10px 10px;
vertical-align: top;
}

.basic_table table{
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

.basic_table table th{
border-bottom: solid 1px #ccc;
text-align: left;
width: 200px;
padding: 10px;
}

.basic_table table td {
border-bottom: dotted 1px #ccc;
padding: 10px;
}

.basic_table table td input,.basic_table table td input textarea,.basic_table table td input select{
margin: 3px 2pt !important;
padding: 3px 1pt;
}

.auth-captcha {
  width: 430px;
  margin: 10px auto;
}

.submit {
  text-align: center;
}

.submit .btn-gray{
cursor: pointer;
font-size: 14px;
font-weight: bold;
color: white;
padding: 10px 20px;
margin:0 10px 0 0;
border: none;
background: #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

.submit .btn-orange{
margin:20px 0 0 0;
cursor: pointer;
font-size: 14px;
font-weight: bold;
color: white;
padding: 10px 20px;
border: none;
background: #607DD0;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

.submit .btn-red{
margin:20px 0 0 0;
cursor: pointer;
font-size: 14px;
font-weight: bold;
color: white;
padding: 10px 20px;
border: none;
background: #607DD0;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

#flashMessage {
padding: 10px 20px;
margin: 15px auto!important;
color: #C30;
font-weight: bold;
border: 5px solid #C30;
}

.error-message {
color: #C30;
font-weight: bold;
font-size: small;
}


/* submitページ */

#mail_thanks{
line-height:1.9;
}

#mail_thanks p{
margin:0 0 5px 0;
}


#mail_thanks a{
color:#607DD0;
text-decoration:underline;
}


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

widget

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

.widget {
margin-top:30px;
}
.widget h2 {
clear: both;
padding: 10px;
margin: 0 0 10px 0;
font-weight: bold;
font-size: 14px;
border-bottom: solid 1px #607DD0;
}

.widget ul li {
padding-left:16px;
line-height:20px!important;
font-size:12px;
}
.widget li.current a,
.widget li.selected a{
font-weight: bold;
color:#360;
}
h3.contents-head {
margin-bottom:20px!important;
padding:5px 10px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #e2e2e2;
margin-left:30px;
margin-right:20px;
color:#607DD0;
}
h4.contents-head {
padding:5px 10px;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #607DD0;
margin:10px 10px!important;
}
#blogDescription {
margin-left:35px;
margin-right:35px;
}
#contentsBody p {
line-height: 2em!important;
}
#contentsBody .section {
margin:0 35px 20px 35px;
}
#contentsBody ul,
.post ul {
margin:3px 35px 20px 35px;
}
#ContentsNavi {
margin-top:50px;
margin-bottom:20px;
text-align: center;
}


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

blog

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


/* blog-description
---------------------------------------------------*/
.blog-description {
line-height:1.8;
margin:0 0 20px 0;
padding: 10px 10px 10px 10px;
border: dotted 1px #CCC;
}
/* post
---------------------------------------------------*/
.post {
margin:0 0 20px 0;
padding: 10px 10px 10px 10px;
border: dotted 1px #CCC;
}
.post-body,
#post-detail {
margin-left:10px;
margin-right:10px;
margin-bottom:30px;
line-height:2em;
}
.more {
text-align:right;
margin:20px 10px 40px 10px;
}
/* meta
---------------------------------------------------*/
.meta {
background-color:#F3F3F3;
color:#999999;
font-size:0.85em;
padding-bottom:5px;
padding-right:10px;
padding-top:5px;
text-align:right;
}
/* tag
---------------------------------------------------*/
.tag {
color:#999999;
font-size:0.85em;
padding-bottom:5px;
padding-right:10px;
padding-top:5px;
text-align: right;
}
/* calendar
----------------------------------------------- */
.widget-blog-calendar table {
width:100%;
}
.widget-blog-calendar th {
border-bottom:1px solid #e2e2e2;
}
.widget-blog-calendar th,
.widget-blog-calendar td {
padding:2px 3px;
font-size:12px;
text-align: center;
}
.widget-blog-calendar .sunday {
color:#ff6633;
}
.widget-blog-calendar .saturday {
color:#3366FF;
}
.widget-blog-calendar .today {
background-color:#e2e2e2;
}

/* BlogComment
----------------------------------------------- */
#BlogComment {
margin-top:40px;
padding: 0px 10px 10px 10px;
}
#BlogCommentList {
padding:10px 20px;
margin-top:20px;
}
#BlogCommentAddForm {
padding:10px 20px;
}
#BlogCommentList .comment {
padding-bottom:8px;
border-bottom:1px dashed #CCCCCC;
margin-bottom:20px;
}
/* contentsNavi
----------------------------------------------- */
#contentsNavi {
text-align:center;
}

#BlogCommentAddForm table {
padding:0px 10px 10px 10px;
vertical-align: top;
}

#BlogCommentAddForm table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

#BlogCommentAddForm table  th{
border-bottom: solid 1px #ccc;
text-align: left;
width: 70px;
padding: 10px;
}

#BlogCommentAddForm table  td {
border-bottom: dotted 1px #ccc;
padding: 10px;
}

#BlogCommentAddForm table  td input,.basic_table table td input textarea,.basic_table table td input select{
margin: 3px 2pt !important;
padding: 3px 1pt;
}


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

サービス案内

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

.service_content p{
padding:0 10px 10px 10px;
line-height:1.9;
}


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

会社概要

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

.map{
padding:0px 10px 10px 10px;
}


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

header

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

#herder{
padding:45px 0 0 0;
position:relative;
}

#herder #ttl{
font-family: 'Open Sans', sans-serif;
position:absolute;
top:40;
left:0;
}

#herder #ttl h1{
font-style:italic;
font-weight:bold;
font-size:28px;
margin:0 0 2px -2px;
}

#herder #ttl h1 a:hover{
color:#fff;
background:#607DD0;
}

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

TOP

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

#sitemap{
padding:10px;
}

#sitemap .mt20{
margin:20px 0 0 0;
}

#sitemap a{
display:block;
margin:0 0 10px 0;
padding:0 0 0 10px;
border-left: 2px solid #EBEBEB;
}

#sitemap a:hover{
border-left: 2px solid #607DD0;
}



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




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

#main{
width:980px;
height:311px;
margin:0 0 20px 0;
position:relative;
}

#main img{
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;  
-webkit-border-top-left-radius: 50px;  
    -webkit-border-bottom-right-radius: 50px;  
   -moz-border-top-left-radius: 50px;  
    -moz-border-bottom-right-radius: 50px;  
}

#copy{
font-style:italic;
letter-spacing:3px;
font-weight:bold;
margin:-22px 0 0 0;
position:absolute;
left: 20px;
top: 50%;
/*background:#607DD0;*/
background-color: rgba(96,125,208,0.6);
color:#FFF;
line-height:1;
padding:10px;
}



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

content

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

#content{
overflow:hidden;zoom:1;
}


#content a{
color:#607DD0;
}


#content a:hover{
color:#555555;
}


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

main_col

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


#content #main_col{
font-size: 14px;
width:690px;
float:left;
}

#main_col li{
  display: inline-block;
  width: 300px;
  text-align: center
  font-size: 16px;
  color: #607dd0;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 24px;
  position: relative;
  border: 1px solid #607dd0;
  transition: .4s;
}

#main_col li:hover {
  border: 2px solid transparent;
  color: #71ecf5;
}

#main_col li:before, .btn-box:after {
  width: 100%;
  height: 100%;
  z-index: 3;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transform: scale(0);
  transition: .2s;
}

#main_col li:before {
  border-bottom: 2px solid #71ecf5;
  border-left: 2px solid #6df2dc;
  transform-origin: 100% 0%;
}

#main_col li:after {
  border-top: 2px solid #71ecf5;
  border-right: 2px solid #6df2dc;
  transform-origin: 0% 100%;
}

#main_col li:hover:after,
#main_col lix:hover:before {
  transform: scale(1);
}

#main_col table{
  width: 100%;
  border-collapse:separate;
  border-spacing: 0;
}

#main_col table th:first-child{
  border-radius: 5px 0 0 0;
}

#main_col table th:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}

#main_col table th{
  text-align: center;
  color:white;
  background: linear-gradient(#607DD0,#5287fa);
  border-left: 1px solid #607DD0;
  border-top: 1px solid #607DD0;
  border-bottom: 1px solid #607DD0;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  width: 25%;
  padding: 10px 0;
}

#main_col table td{
  text-align: center;
  border-left: 1px solid #607DD0;
  border-bottom: 1px solid #607DD0;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: 25%;
  padding: 10px 0;
}

#main_col table td:last-child{
  border-right: 1px solid #607DD0;
}

#main_col table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

#main_col table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}

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

side_col

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


#side_col{
float:right;
width:260px;
}

#side_company_info_in{
padding:0 10px 10px 10px;
}

#side_company_info_in h3{
font-size:12px;
margin:0 0 3px 0;
font-weight:bold;
}


#side_company_info_in p{
line-height:1.8;
}

#side_company_info_in img{
margin:0 0 2px 0;
}

#side_company_info_in li {
position: relative;
display: block;
width: 235px;
padding: 0.3em;
text-align: center;
border: 3px solid #607dd0;
text-decoration: none;
outline: none;
transition: all .4s;
}
#side_company_info_in li::before,
#side_company_info_in li::after {
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
z-index: 2;
content: '';
transition: all .4s;
}
#side_company_info_in li::before {
border-top: 3px solid #71ecf5;
border-bottom: 3px solid #71ecf5;
transform: scale(0, 1);
}
#side_company_info_in li::after {
border-right: 3px solid #6df2dc;
border-left: 3px solid #6df2dc;
transform: scale(1, 0);
}
#side_company_info_in li:hover {
color: #7ce3fc;
}
#side_company_info_in li:hover::after,
#side_company_info_in li:hover::before {
transform: scale(1);
}

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

footer

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

/* pagetop */

#btn_pagetop{
font-size:11px;
line-height:1;
width:980px;
margin:0 auto;
text-align:right;
}

#btn_pagetop a{
border-top:dotted 1px #607DD0;
border-left:dotted 1px #607DD0;
border-right:dotted 1px #607DD0;
padding:10px;
letter-spacing:2px;
display:inline-block;
color:#607DD0;
}

#btn_pagetop a:hover{
color:#555555;
}

#footer_in{
border-top:dotted 1px #607DD0;
border-bottom:solid 8px #607DD0;
clear:both;
}

#footer_nav a{
color:#607DD0;
}

#footer_nav a:hover{
color:#555555;
}

#footer_nav{
margin:20px auto 0 auto;
font-weight:bold;
overflow:hidden;zoom:1;
width:980px;
}

#footer_nav ul{
float:left;
}


#footer_nav li{
margin:0 20px 0 0;
float:left;	
}

#copyright{
font-style:italic;
width:980px;
padding:0 0 30px 0;
margin:8px auto 0px auto;
font-size:10px;
clear:both;
}


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

TOP

/* メニューボタン */
a.cp_btn {
position: relative;
display: block;
width: 225px;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #607dd0;
background: #fff;
border:solid 1px #607dd0;
overflow: hidden;
}
a.cp_btn:before {
content:"";
position: absolute;
top: -25px;
left: -20px;
height:90px;
width:20px;
background : #607dd0;
opacity: 0.3;
transform: rotate(40deg);
transition: 0.3s;
}
a.cp_btn:hover:before {
left:98%;
}

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


/* news */

.news_in{
padding:10px;
clear:both;
overflow:hidden;zoom:1;
border-bottom:dotted 1px #ccc;
}

.news_in_date{
font-weight:bold;
font-style:italic;
float:left;
margin:0 10px 0 0
}

.news_in p{
float:left;
}

#content .news_in a:hover{
color:#607DD0;
}

#news .box_hover{
background:#fbfbfb;
border-bottom:dotted 1px #607DD0;
}


#news .box_hover .news_in_date{
color:#607DD0;
}


.news_in_more{
text-align:right;
}

.news_in_more a{
display:block;
padding:10px;
border-bottom:dotted 1px #ccc;
}

.news_in_more a:hover{
color:#607DD0;
background:#fbfbfb;
border-bottom:dotted 1px #607DD0;
}

/* service */

#service{
overflow:hidden;zoom:1;
margin:0 0 10px 0;
}

.service_in{
float:left;
overflow:hidden;zoom:1;
width:210px;
padding:0 10px 10px 10px; 
}

.service_in h3{
font-size:12px;
margin:0 0 3px 0;
font-weight:bold;
}

.service_in_text{ 
line-height:1.8;
margin:0 0 10px 0;
}



.service_in_more{
text-align:right;
}

.service_in_more a{
display:block;
border-top:dotted 1px #ccc;
border-bottom:dotted 1px #ccc;
padding:10px;
}

.service_in_more a:hover{
color:#607DD0;
background:#fbfbfb;
}

.service_in img{
margin:0 0 2px 0;
}

}

@media screen and (max-width:640px){
body{
font-family: 'Open Sans', sans-serif;
color:#555555;
}

#wrap{
max-width:100%;
margin:auto;
}

.basic_area{
margin:0 0 10px 0;
}

::selection {
background: #607DD0;
color: white;
}

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

共通

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

.content_ttl{
clear:both;
padding:10px;
margin:0 0 10px 0;
font-weight:bold;
font-size:14px;
border-bottom:solid 1px #607DD0;
}

.display-none {
    display:none;
}



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

パンクズ

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

#bread{
line-height:1;
overflow: hidden;
zoom: 1;
width: 100%;
margin: 0 0 10px 0;
padding: 10px 15px;
font-size:11px;
background:#EFEFEF;
}

#bread li {
  color:#fff;
  float: left;
}

#bread li a {
color:#fff;
border-right:1px solid #ccc;
padding:0 10px 0 0;
margin:0 10px 0 0;
text-decoration: none;
}


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

下層ページタイトル

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

#in_title{
max-width: 100%;
height: 130px;
margin:0 0 20px 0;
position: relative;
}

#in_title h2{
letter-spacing: 3px;
position: absolute;
left: 20px;
/* 画像の高さにより調節 */
top:45px;
background-color: rgba(96,125,208,0.6);
/*background: #607DD0;*/
color: white;
line-height: 1;
padding: 10px;
}

#in_title span{
margin:0 0 0 5px;
font-size:14px;
}


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

下層ページテーブル系

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

.in_list {
overflow:hidden;
  padding: 0 0px 10px 10px;
  line-height: 1.8;
}

.in_list h3 {
  font-weight: bold;
  padding: 10px;
  border-bottom: solid 1px #ccc;
  width: 150px;
  float: left;
}
.in_list .in_list_r {
  padding: 10px;
  border-bottom: dotted 1px #ccc;
  width: 100%;
  float: left;
}
.in_list .in_list_r h4 {
  margin: 0 0 2px 0;
  font-weight: bold;
}
.in_list .in_list_r ul {
  margin: 0 0 5px 0;
}



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

フォームテーブル系

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


.basic_table {
padding:0px 10px 10px 10px;
vertical-align: top;
}

.basic_table table{
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

.basic_table table th{
border-bottom: solid 1px #ccc;
text-align: left;
width: 200px;
padding: 10px;
}

.basic_table table td {
border-bottom: dotted 1px #ccc;
padding: 10px;
}

.basic_table table td input,.basic_table table td input textarea,.basic_table table td input select{
margin: 3px 2pt !important;
padding: 3px 1pt;
}

.auth-captcha {
  width: 100%;
  margin: 10px auto;
}

.submit {
  text-align: center;
}

.submit .btn-gray{
cursor: pointer;
font-size: 14px;
font-weight: bold;
color: white;
padding: 10px 20px;
margin:0 10px 0 0;
border: none;
background: #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

.submit .btn-orange{
margin:20px 0 0 0;
cursor: pointer;
font-size: 14px;
font-weight: bold;
color: white;
padding: 10px 20px;
border: none;
background: #607DD0;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

.submit .btn-red{
margin:20px 0 0 0;
cursor: pointer;
font-size: 14px;
font-weight: bold;
color: white;
padding: 10px 20px;
border: none;
background: #607DD0;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

#flashMessage {
padding: 10px 20px;
margin: 15px auto!important;
color: #C30;
font-weight: bold;
border: 5px solid #C30;
}

.error-message {
color: #C30;
font-weight: bold;
font-size: small;
}


/* submitページ */

#mail_thanks{
line-height:1.9;
}

#mail_thanks p{
margin:0 0 5px 0;
}


#mail_thanks a{
color:#607DD0;
text-decoration:underline;
}


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

widget

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

.widget {
margin-top:30px;
}
.widget h2 {
clear: both;
padding: 10px;
margin: 0 0 10px 0;
font-weight: bold;
font-size: 14px;
border-bottom: solid 1px #607DD0;
}

.widget ul li {
padding-left:16px;
line-height:20px!important;
font-size:12px;
}
.widget li.current a,
.widget li.selected a{
font-weight: bold;
color:#360;
}
h3.contents-head {
margin-bottom:20px!important;
padding:5px 10px;
border-bottom-width: 5px;
border-bottom-style: solid;
border-bottom-color: #e2e2e2;
margin-left:30px;
margin-right:20px;
color:#607DD0;
}
h4.contents-head {
padding:5px 10px;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #607DD0;
margin:10px 10px!important;
}
#blogDescription {
margin-left:35px;
margin-right:35px;
}
#contentsBody p {
line-height: 2em!important;
}
#contentsBody .section {
margin:0 35px 20px 35px;
}
#contentsBody ul,
.post ul {
margin:3px 35px 20px 35px;
}
#contentsBody img {
max-width: 100%;
}
#ContentsNavi {
margin-top:50px;
margin-bottom:20px;
text-align: center;
}


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

blog

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


/* blog-description
---------------------------------------------------*/
.blog-description {
line-height:1.8;
margin:0 0 20px 0;
padding: 10px 10px 10px 10px;
border: dotted 1px #CCC;
}
/* post
---------------------------------------------------*/
.post {
margin:0 0 20px 0;
padding: 10px 10px 10px 10px;
border: dotted 1px #CCC;
}
.post-body,
#post-detail {
margin-left:10px;
margin-right:10px;
margin-bottom:30px;
line-height:2em;
}
.more {
text-align:right;
margin:20px 10px 40px 10px;
}
/* meta
---------------------------------------------------*/
.meta {
background-color:#F3F3F3;
color:#999999;
font-size:0.85em;
padding-bottom:5px;
padding-right:10px;
padding-top:5px;
text-align:right;
}
/* tag
---------------------------------------------------*/
.tag {
color:#999999;
font-size:0.85em;
padding-bottom:5px;
padding-right:10px;
padding-top:5px;
text-align: right;
}
/* calendar
----------------------------------------------- */
.widget-blog-calendar table {
width:100%;
}
.widget-blog-calendar th {
border-bottom:1px solid #e2e2e2;
}
.widget-blog-calendar th,
.widget-blog-calendar td {
padding:2px 3px;
font-size:12px;
text-align: center;
}
.widget-blog-calendar .sunday {
color:#ff6633;
}
.widget-blog-calendar .saturday {
color:#3366FF;
}
.widget-blog-calendar .today {
background-color:#e2e2e2;
}

/* BlogComment
----------------------------------------------- */
#BlogComment {
margin-top:40px;
padding: 0px 10px 10px 10px;
}
#BlogCommentList {
padding:10px 20px;
margin-top:20px;
}
#BlogCommentAddForm {
padding:10px 20px;
}
#BlogCommentList .comment {
padding-bottom:8px;
border-bottom:1px dashed #CCCCCC;
margin-bottom:20px;
}
/* contentsNavi
----------------------------------------------- */
#contentsNavi {
text-align:center;
}

#BlogCommentAddForm table {
padding:0px 10px 10px 10px;
vertical-align: top;
}

#BlogCommentAddForm table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

#BlogCommentAddForm table  th{
border-bottom: solid 1px #ccc;
text-align: left;
width: 70px;
padding: 10px;
}

#BlogCommentAddForm table  td {
border-bottom: dotted 1px #ccc;
padding: 10px;
}

#BlogCommentAddForm table  td input,.basic_table table td input textarea,.basic_table table td input select{
margin: 3px 2pt !important;
padding: 3px 1pt;
}


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

サービス案内

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

.service_content p{
padding:0 10px 10px 10px;
line-height:1.9;
}


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

会社概要

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

.map{
padding:0px 10px 10px 10px;
}


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

header

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

#herder{
padding:45px 0 0 0;
position:relative;
}

#herder #ttl{
font-family: 'Open Sans', sans-serif;
position:absolute;
top:40;
left:0;
}

#herder #ttl h1{
font-style:italic;
font-weight:bold;
font-size:28px;
margin:0 0 2px -2px;
}

#herder #ttl h1 a:hover{
color:#fff;
background:#607DD0;
}

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

TOP

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

#sitemap{
padding:10px;
}

#sitemap .mt20{
margin:20px 0 0 0;
}

#sitemap a{
display:block;
margin:0 0 10px 0;
padding:0 0 0 10px;
border-left: 2px solid #EBEBEB;
}

#sitemap a:hover{
border-left: 2px solid #607DD0;
}



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

main

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

#main{
width:100%;
height:311px;
margin:0 0 20px 0;
position:relative;
}

#main img{
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;  
-webkit-border-top-left-radius: 50px;  
    -webkit-border-bottom-right-radius: 50px;  
   -moz-border-top-left-radius: 50px;  
    -moz-border-bottom-right-radius: 50px;  
}

#copy{
font-style:italic;
letter-spacing:3px;
font-weight:bold;
margin:-22px 0 0 0;
position:absolute;
left: 20px;
top: 50%;
/*background:#607DD0;*/
background-color: rgba(96,125,208,0.6);
color:#FFF;
line-height:1;
padding:10px;
}



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

content

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

#content{
overflow:hidden;zoom:1;
}


#content a{
color:#607DD0;
}


#content a:hover{
color:#555555;
}


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

main_col

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


#content #main_col{
font-size: 15px;
max-width:640px;
}

#main_col li{
  display: inline-block;
  max-width: 300px;
  text-align: center
  font-size: 16px;
  color: #607dd0;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 24px;
  position: relative;
  border: 1px solid #607dd0;
  transition: .4s;
}

#main_col li:hover {
  border: 2px solid transparent;
  color: #71ecf5;
}

#main_col li:before, .btn-box:after {
  width: 100%;
  height: 100%;
  z-index: 3;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transform: scale(0);
  transition: .2s;
}

#main_col li:before {
  border-bottom: 2px solid #71ecf5;
  border-left: 2px solid #6df2dc;
  transform-origin: 100% 0%;
}

#main_col li:after {
  border-top: 2px solid #71ecf5;
  border-right: 2px solid #6df2dc;
  transform-origin: 0% 100%;
}

#main_col li:hover:after,
#main_col lix:hover:before {
  transform: scale(1);
}

#main_col table{
  width: 100%;
  border-collapse:separate;
  border-spacing: 0;
}

#main_col table th:first-child{
  border-radius: 5px 0 0 0;
}

#main_col table th:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}

#main_col table th{
  text-align: center;
  color:white;
  background: linear-gradient(#607DD0,#5287fa);
  border-left: 1px solid #607DD0;
  border-top: 1px solid #607DD0;
  border-bottom: 1px solid #607DD0;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  width: 25%;
  padding: 10px 0;
}

#main_col table td{
  text-align: center;
  border-left: 1px solid #607DD0;
  border-bottom: 1px solid #607DD0;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: 25%;
  padding: 10px 0;
}

#main_col table td:last-child{
  border-right: 1px solid #607DD0;
}

#main_col table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

#main_col table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}

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

side_col

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


#side_col{
width:100%;
}

#side_company_info_in{
padding:0 10px 10px 10px;
}

#side_company_info_in h3{
font-size:12px;
margin:0 0 3px 0;
font-weight:bold;
}


#side_company_info_in p{
line-height:1.8;
}

#side_company_info_in img{
margin:0 0 2px 0;
}

#side_company_info_in li {
position: relative;
display: block;
max-width: 235px;
padding: 0.3em;
text-align: center;
border: 3px solid #607dd0;
text-decoration: none;
outline: none;
transition: all .4s;
}
#side_company_info_in li::before,
#side_company_info_in li::after {
position: absolute;
top: -3px;
right: -3px;
bottom: -3px;
left: -3px;
z-index: 2;
content: '';
transition: all .4s;
}
#side_company_info_in li::before {
border-top: 3px solid #71ecf5;
border-bottom: 3px solid #71ecf5;
transform: scale(0, 1);
}
#side_company_info_in li::after {
border-right: 3px solid #6df2dc;
border-left: 3px solid #6df2dc;
transform: scale(1, 0);
}
#side_company_info_in li:hover {
color: #7ce3fc;
}
#side_company_info_in li:hover::after,
#side_company_info_in li:hover::before {
transform: scale(1);
}

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

footer

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

/* pagetop */

#btn_pagetop{
font-size:11px;
line-height:1;
max-width:640px;
margin:0 auto;
text-align:right;
}

#btn_pagetop a{
border-top:dotted 1px #607DD0;
border-left:dotted 1px #607DD0;
border-right:dotted 1px #607DD0;
padding:10px;
letter-spacing:2px;
display:inline-block;
color:#607DD0;
}

#btn_pagetop a:hover{
color:#555555;
}

#footer_in{
border-top:dotted 1px #607DD0;
border-bottom:solid 8px #607DD0;
clear:both;
}

#footer_nav a{
color:#607DD0;
}

#footer_nav a:hover{
color:#555555;
}

#footer_nav{
margin:20px auto 0 auto;
font-weight:bold;
overflow:hidden;zoom:1;
width:100%;
}

#footer_nav ul{
float:left;
}


#footer_nav li{
margin:auto;
float:left;
}

#copyright{
font-style:italic;
width:100%;
padding:0 0 30px 0;
margin:8px auto 0px auto;
font-size:10px;
clear:both;
}


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

TOP

/* メニューボタン */
a.cp_btn {
position: relative;
display: block;
width: 225px;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #607dd0;
background: #fff;
border:solid 1px #607dd0;
overflow: hidden;
}
a.cp_btn:before {
content:"";
position: absolute;
top: -25px;
left: -20px;
height:90px;
width:20px;
background : #607dd0;
opacity: 0.3;
transform: rotate(40deg);
transition: 0.3s;
}
a.cp_btn:hover:before {
left:98%;
}

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


/* news */

.news_in{
padding:10px;
clear:both;
overflow:hidden;zoom:1;
border-bottom:dotted 1px #ccc;
}

.news_in_date{
font-weight:bold;
font-style:italic;
float:left;
margin:0 10px 0 0
}

.news_in p{
float:left;
}

#content .news_in a:hover{
color:#607DD0;
}

#news .box_hover{
background:#fbfbfb;
border-bottom:dotted 1px #607DD0;
}


#news .box_hover .news_in_date{
color:#607DD0;
}


.news_in_more{
text-align:right;
}

.news_in_more a{
display:block;
padding:10px;
border-bottom:dotted 1px #ccc;
}

.news_in_more a:hover{
color:#607DD0;
background:#fbfbfb;
border-bottom:dotted 1px #607DD0;
}

/* service */

#service{
overflow:hidden;zoom:1;
margin:0 0 10px 0;
}

.service_in{
float:left;
overflow:hidden;zoom:1;
width:210px;
padding:0 10px 10px 10px; 
}

.service_in h3{
font-size:12px;
margin:0 0 3px 0;
font-weight:bold;
}

.service_in_text{ 
line-height:1.8;
margin:0 0 10px 0;
}



.service_in_more{
text-align:right;
}

.service_in_more a{
display:block;
border-top:dotted 1px #ccc;
border-bottom:dotted 1px #ccc;
padding:10px;
}

.service_in_more a:hover{
color:#607DD0;
background:#fbfbfb;
}

.service_in img{
margin:0 0 2px 0;
}

}
}