/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*-------------------------------------
common
--------------------------------------*/


@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");
/*!
 * Bootswatch v3.1.1
 * Homepage: http://bootswatch.com
 * Copyright 2012-2014 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */



*{
  margin:0;
  padding:0;
  zoom:1;
}

html {
  font-family: sansation-regular-webfont, meiryo, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 13x;
  line-height: 1.5;
  color: #000000;
  background-color: #ffffff;
  margin: 0;
  padding-top: 0px;
}

@font-face {
   font-family: sansation-regular-webfont;
   src: url('/font/sansation-regular-webfont.woff'),
        url('/font/sansation-regular-webfont.ttf'),
        url('/font/sansation-regular-webfont.eot'),
        url('/font/sansation-regular-webfont.svg')
        ;
}

.center{
  text-align: center;
}

.right{
  text-align: right;
}

.left{
  text-align: left;
}

.htag{
  font-size:20px;
  border-left: 5px solid #0699f4;
  color: #0699f4;
  text-align: left;
  line-height: 200%;
  transition: 0.1s;
  padding-left: 15px;
}

h1,h2,h3,h4,h5,span,p{
  margin: 0px 0px 0px 0px;
}


.btn{
  color:#fff;
  font-size:16px;
  padding:10px 30px;
  background:#0699f4;
  border-radius:0
}

.btn:focus,
.btn:hover{
  color:#fff;
  background:#0699f4;
  opacity: 0.8;
  transition: 0.3s;
}

label{
  font-size: 16px;
  letter-spacing:1px;
  font-weight: normal;
  line-height: 30px;
  padding: 0px 10px 0px 10px;
}

input{
  letter-spacing:1px;
  font-weight: normal;
  border: 1px solid #0699f4;
  line-height: 33px;
  padding: 0px 0px 0px 10px;
}

select {
  height: 30px;
  letter-spacing:1px;
  font-weight: normal;
  border: 1px solid #0699f4;
  background-color: #ffffff;
  line-height: 30px;
  padding: 0px 0px 0px 10px;
}

textarea {
  letter-spacing:1px;
  font-weight: normal;
  border: 1px solid #0699f4;
  line-height: 40px;
  padding: 0px 0px 0px 5px;
}

a{
  color: #0699f4;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: none;
  transition: 0.3s;
  opacity: 0.8;
}

.font26{
  font-size:26px;
  line-height: 150%;
}

.font24{
  font-size:24px;
  line-height: 150%;
}

.font22{
  font-size:22px;
  line-height: 150%;
}

.font20{
  font-size:20px;
  line-height: 150%;
}

.font18{
  font-size:18px;
  line-height: 150%;
}

.font16{
  font-size:16px;
  line-height: 150%;
}

.font14{
  font-size:14px;
  line-height: 150%;
}

.font12{
  font-size:12px;
  line-height: 150%;
}

.font10{
  font-size:10px;
  line-height: 150%;
}

.font8{
  font-size:8px;
  line-height: 150%;
}

.depth5{
  margin: auto auto 5px auto;  
}

.depth10{
  margin: auto auto 10px auto;  
}

.depth20{
  margin: auto auto 20px auto;  
}

.depth30{
  margin: auto auto 30px auto;  
}

.depth40{
  margin: auto auto 40px auto;  
}

.depth50{
  margin: auto auto 50px auto;  
}

.depth60{
  margin: auto auto 60px auto;  
}

.depth70{
  margin: auto auto 70px auto;  
}

.depth80{
  margin: auto auto 80px auto;  
}

.depth90{
  margin: auto auto 90px auto;  
}

.depth100{
  margin: auto auto 100px auto;  
}

.depth110{
  margin: auto auto 110px auto;  
}

.depth120{
  margin: auto auto 120px auto;  
}

.depth130{
  margin: auto auto 130px auto;  
}

.depth140{
  margin: auto auto 140px auto;  
}

.depth150{
  margin: auto auto 150px auto;  
}

.depth250{
  margin: auto auto 250px auto;  
}

.depth350{
  margin: auto auto 350px auto;  
}

.logo_w{
  width: 25%;
  margin: 20px 0px 20px 0px;
}

.logo_comsys{
  width: 12%;
  margin: 10px 20px 0px 0px;
}

.bgblue{
  background-color: #21a0db;
}

.fontblue{
  color: #21a0db;
}

.menu_bottom{
  border-bottom: 7px solid #174191;  
}

.menu_margin{
  margin: 0px 0px 5px 0px;
}

.menu_margin2{
  margin: 0px 0px 20px 0px;
}

a.menu {
  color: #ffffff;
  line-height: 100%;
  background-color: #21a0db;
  text-decoration: none;
  height: 55px;
  padding-top: 20px ;
  border-right: 1px solid #ffffff;  
  border-left: 1px solid #ffffff;  
}

a.menu:hover,
a.menu:focus {
  background-color: #8bc4d8;
  text-decoration: underline;
  transition: 0.3s;
  opacity: 0.5;
}

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

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

.top_img2{
  width: 0%;
  margin: 20px 0px 20px 0px;
}

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

.topic_img{
  width: 50%;
  margin: 20px 0px 20px 0px;
  float: center;
}

.cate_bottom{
  padding: 5px 0px 5px 20px; 
  border-left: 3px solid #21a0db;  
  border-bottom: 3px solid #174191;  
}

.cate_pad{
  padding: 0px 10px 20px 10px; 
}

.cate_pad2{
  padding: 20px 0px 0px 0px; 
}

a.cate_link {
  color: #000000;
  line-height: 100%;
  text-decoration: none;
}

a.cate_link:hover,
a.cate_link:focus {
  text-decoration: underline;
  transition: 0.3s;
  opacity: 0.8;
}

.topix_box{
  color: #ffffff;
  background-color: #21a0db;
  padding: 5px 0px 5px 20px; 
}


.saiyo_box{
  color: #000000;
  background-color: #f39800;
  padding: 5px 0px 5px 20px; 
}

.saiyo_pad{
  padding: 20px 0px 0px 10px; 
}

.saiyo_pad2{
  padding: 2px; 
}


a.saiyo_link {
  color: #000000;
  line-height: 100%;
  text-decoration: none;
}

a.saiyo_link:hover,
a.saiyo_link:focus {
  text-decoration: underline;
  transition: 0.3s;
  opacity: 0.8;
}

a.under_link {
  color: #ffffff;
  line-height: 100%;
  text-decoration: none;
}

a.under_link:hover,
a.under_link:focus {
  text-decoration: underline;
  transition: 0.3s;
  opacity: 0.8;
}

.pad0_5{
  padding: 0px 5px 0px 5px; 
}

.info_pad{
  padding: 20px 20px 0px 20px; 
}

.under_cate{
  background: #174191;
}

.bold{
  font-weight: bold;
}


.under_pad{
  padding: 20px 0px 20px 0px; 
}

.under_pad2{
  padding: 5px 0px 0px 0px; 
}

.colorwhite{
  color: #ffffff;

}



.comp_main {
  color: #ffffff;
  background-color: #0699f4;
  padding: 5px; 
}

.comp_sub {
  padding: 5px; 
}


.group_pad{
  padding: 10px 0px 10px 10px; 
}
.group_bottom{
  border-bottom: 1px solid #174191;  
}

.must{
  font-size:10px;
  color: #e60012;
  padding: 0px 10px 0px 10px; 
}
.option{
  font-size:10px;
  color: #174191;
  padding: 0px 10px 0px 10px; 
}

a.saiyou_link {
  color: #ffffff;
  line-height: 100%;
  background-color: #21a0db;
  text-decoration: none;
  height: 55px;
  padding: 20px ;
  border-right: 1px solid #ffffff;  
  border-left: 1px solid #ffffff;  
  float: center;
}

a.saiyou_link:hover,
a.saiyou_link:focus {
  background-color: #8bc4d8;
  text-decoration: underline;
  transition: 0.3s;
  opacity: 0.5;
}

.saiyou_bord{
  border: 2px double #0699f4;
  padding: 10px; 
  margin-bottom: 10px;
}