@charset "utf-8";

* {
    padding: 0px;
    margin: 0px;
}
body {
  padding: 0px;
  margin: 0px;
  font-size: 16px;
  background-color: #b9cdd6;
  font-family: verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
  /* background-image: url("https://www.transparenttextures.com/patterns/cubes.png"); */
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
 }
p {
  line-height: 30px;
  padding: 0px;
  margin: 0px;
}
h3 {
  margin-top: inherit;
  border-bottom: 3px double #d3d9de;
  overflow: hidden;
  color: #0f0f0f;
  font-size: 17px;
  text-align: center;
}
h2 {
    padding: 5px;
    background-color: rgb(149, 185, 202);
    font-size: 15px;
    color: #FFFFFF;
    position: relative;
    padding-left: 36px;
    z-index: 1;
    line-height: 33px;
    overflow: hidden;
    margin-bottom: 10px;
}
h2:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    top: 12px;
    border-radius: 99px;
    left: 8px;
    background: #fff;
    border-width: 0px;
    border-color: rgb(255, 255, 255);
    border-style: solid;
}

h2:after {
    content: "";
    position: absolute;
    height: 24px;
    top: 8px;
    width: 24px;
    border-radius: 99px;
    z-index: -1;
    left: 4px;
    border-width: 2px;
    border-color: rgb(255, 255, 255);
    border-style: solid;
}
.cont_contents {
  margin: 0 auto;
  clear: both;
  width: 1100px;
  overflow: hidden;
}
.menu_bar{
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  background: #aac1cc;
  text-align: center;
  border-top: 5px solid #b7cada;
  border-bottom: 5px solid #b7cada;
}
.menu_bar ul{
  padding: 0px;
  margin: 0px;
}
.menu_bar ul li {
  display: inline-block;
  line-height: 30px;
  list-style-type: none;
  text-align: center;
}
.menu_bar ul li a{
  display: block;
  padding: 10px;
  color: #000000;
  text-align: center;
  text-decoration: none;
  border-right: 3px solid #c6d9e2;
  font-size: 15px;
  text-align: center;
  /* background: #c8c4c2; */
}
.menu_bar ul li:last-child a{
  border-right:0;
}
.menu_bar ul li a:hover{
  color: #1c6f98;
}
#charater_top_Img{
  margin-top: 10px !important;
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  /* float: right; */
}

div#charater_top_Img img {
    /* width: 100%; */
}
.menu_bars{
  width: 30%;
  float: left;
  overflow: hidden;
  background: #2196F3;
  text-align: center;
  display: none;
}
.menu_bars ul {
  padding: 0px;
  margin: 0px;
}
.menu_bars ul li {
  display: block;
  padding: 0px;
  border-bottom: 2px solid #fff;
}
.menu_bars ul li a{
  padding:10px;
  display: block;
  text-decoration: none;
  color: #fff;
  border-right: 5px solid #fff;
}
.menu_bars ul li a:hover{
  color: blue;
}
.sle_charater{
  /* width: 1000px; */
  margin: 0 auto;
  overflow: hidden;
  /* background: #f9fafc; */
  /* border-bottom: 5px double #f1d9d0; */
}
.cont_contents{
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.charater_top_Img{
  width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  clear: both;
}
.charater_controller{
  clear: both;
  overflow: hidden;
  width: 1000px;
  margin: 5px auto;
  border: 1px solid #ffffff;
}
.charater_cont{
  /* padding: 10px; */
  margin: 5px;
  overflow: hidden;
  clear: both;
  background: #fff;
}
.charater_left{
  float: left;
  width: 250px;
}
.charater_middle{
  /* width: 740px; */
  /* float: left; */
  
   /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
  margin-top: 5px;
 }
.charater_right{
  float: right;
  width: 250px;
  
}

.charater_block{
  clear: both;
  overflow: hidden;  
}
.charater_01 p{
  padding:10px;
}
.charater_01{
  overflow: hidden;
  clear: both;
  /* padding: 10px; */
  margin: 5px;
  box-shadow: 0 0 10px;
}
.charater_01 h2{
  background:none;
  /* padding-top:20px; */
  padding: 10px;
  border: none;
  text-align: center;
  border-bottom: 1px solid gray;
  font-size: 15px;
}
.charater_01 h2:before,
.charater_01 h2:after{
  display:none;
}
.charater_01 h2 a{
  color:#f00;
}
.charater_01 h2 a:hover{
  color:blue;
}
img.charater_img{
  width: 100%;
  padding: 0px;
  margin: 0;
  border-top: 5px solid #c50828;
  border-bottom: 5px solid #c50828;
}

.cont_link{
  padding: 10px;
  margin: 5px;
  clear: both;
  overflow: hidden;
  /* box-shadow: 0 0 10px; */
  border: 1px solid #efefef;
}
.cont_link ul {
  padding: 0px;
  margin: 0px;
}
.cont_link ul li {
   list-style: none;
   line-height: 40px;
}
.cont_link h3{
  text-align:left;
}
.menu_sitebar{
  padding: 10px;
  margin: 5px;
  overflow: hidden;
  clear: both;
  background: #c50828;
  text-align: center;
}
.menu_sitebar ul{
  padding: 0px;
  margin: 0px;
}
.menu_sitebar ul li {
  display: block;
  list-style-type: none;
  /* border-bottom: 1px solid #f00; */
}
.menu_sitebar ul li a{
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid #fff;
  font-size: 13px;
}
.menu_sitebar ul li:last-child{
  border-bottom:0px;
}
.menu_sitebar ul li a:hover{
  color: #a6d3f7;
}
.charater_04{
  overflow: hidden;
  clear: both;
  padding: 10px;
  margin: 5px;
  /* box-shadow: 0 0 10px; */
  /* background: #fff; */
  border: 10px solid #efefef;
  /* border-radius: 20px; */
}

img.charater_img04{
  width: 40%;
  float: left;
  margin: 9px 10px 2px 0px;
  border: 1px solid gainsboro;
}
.charater_topcontent{
  padding: 10px;
  margin: 5px;
  overflow: hidden;
  clear: both;
  /* box-shadow: 0 0 10px; */
  border: 1px solid #efefef;
}

.charater_topcontent img{
  float: left;
  width: 40%;
  padding: 0;
  margin: 9px 10px 0 0;
  border: 1px solid gainsboro;
}
.charater_03{
  width: 48%;
  float: left;
  overflow: hidden;
  /* padding: 10px; */
  margin: 5px;
  /* box-shadow: 0 0 10px gray; */
  /* box-sizing: border-box; */
  /* background: #fff; */
  /* border-bottom-right-radius: 20px; */
  /* border-bottom-left-radius: 20px; */
  /* border-bottom: 10px solid gainsboro; */
  /* border-top: 10px solid gainsboro; */
  /* border-top-left-radius: 20px; */
  /* border-top-right-radius: 20px; */
  border: 1px solid #EFEFF3;
}

img.charater_img03 {
  width: 100%;
  padding: 0 0 0 0;
  margin: 0;
  /* border-bottom: 5px solid #E91E63; */
  /* border-top: 5px solid #E91E63; */
}
.charater_03 p{
  padding:10px;
}
a{
  color: #e82a2a;
}
.cont_link ul li a:hover{
  /* color: blue; */
}
.charater_01 a{
  color: #fff;
}
.charater_01 a:hover{
  color: #f00;
}
p.readmore a{
  float: right;
  padding: 5px 20px;
  display: block;
  background: #d8e3ea;
  /* border-bottom: 5px solid #ffc107; */
  /* border-bottom-left-radius: 10px; */
  color: #151312;
  text-decoration: none;
  margin-bottom: 11px;
  /* border-top-right-radius: 10px; */
  /* border-top: 5px solid #FFC107; */
  border: 1px solid #ccc;
}
p.readmore a:hover{
  color: #181a1b;
  background: #dddfe0;
}
.footer_menu{
  width: 1000px;
  margin: 5px auto;
  clear: both;
  overflow: hidden;
  background: #d1d6da;
  text-align: center;
  border-bottom: 5px solid #b7cada;
  border-top: 5px solid #b7cada;
}
.footer_menu ul{
  padding: 0px;
  margin: 0px;
}
.footer_menu ul li {
  display: inline-block;
  line-height: 24px;
}
.footer_menu ul li a{
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #040404;
  border-right: 1px solid #fff;
  font-size: 13px;
}
.footer_menu ul li:last-child a{
  border-right: 0px;
}
.footer_menu ul li a:hover{
  color: #3c7ddc;
}
.footer {
  /* width: 1200px; */
  margin: 0 auto;
  overflow: hidden;
  clear: both;
  padding-top: 20px;
  text-align:center;
  padding-bottom: 20px;
  background: #5789a0;
}
.foot{
  width: 100%;
  margin: auto;
  text-align: center;

}

.foot a {
    color: #fff;
}
.foot p{
  text-align: center;
}
.foot a:hover{
  /* color: blue; */
}
.sub{
  overflow: hidden;
  clear: both;
  /* box-shadow: 0 0 10px; */
  padding: 10px;
  margin: 5px;
}
.sub img{
  float: left;
  width: 40%;
  padding: 0;
  margin: 3px 10px 0 0;
  /* border: 5px solid gray; */
}
.title_header{
  /* float: left; */
  /* width: 68%; */
  text-align: center;
}
.social_sha{
  float: left;
  width: 32%;
  padding-top: 10px;
  text-align: center;
}
.title_header h1{
  font-size: 16px;
  padding-left: 10px;
  background: #9bbece;
  padding: 10px 0px;
}
.title_header h1 a{
  color: #fefefe;
}
.title_header h1 a:hover{
  /* color:blue; */
  text-decoration: none;
}
.charater_01 p a{
  color: #f00;
}
.charater_01 p a:hover{
  color: blue;
}
a:hover{
  /* color: blue; */
  text-decoration: none;
}

@media screen and (max-width: 480px){
  body{
    background: none;
  }
  
  .title_header{
    float: none;
    margin: auto;
    width: auto;
    text-align: center;
  }
  .title_header h1{
    padding: 15px;
    font-size: 13px;
  }
  .social_sha{
    float: none;
    margin: auto;
    width: auto;
  }
  div#boxArea {
    margin: auto;
}
  .cont_contents{
    width: auto;
    margin: 0;
  }
  #charater_top_Img{
    width:auto;
    float:none;
  }
  .menu_bars{
    width:auto;
    float:none;
  }
  .charater_top_Img{
    width: auto;
  }
  .main_image {
    width: auto;
  }
  .charater_controller{
    width: auto;
    margin: auto;
    border: none;
    overflow: hidden;
  }
  .charater_cont{
    width: auto;
    padding: 10px;
    margin: 5px;
    overflow: hidden;
  }
  .charater_left{
    width: auto;
    float: none;
  }
  .charater_right{
    width: auto;
    float: none;
  }
  .charater_middle{
    width: auto;
    float: none;
    background: none;
    padding: 0px;
    margin: 0;
  }
  .charater_block{
    width: auto !important;
    overflow: hidden;
    clear: both;
  }
  .charater_01{
    width: auto;
    margin: 5px;
    padding: 10px;
  }
  img.charater_img{
    width:100%;
    border:none;
    border-radius: 0;
  }
  .charater_04{
    width: auto;
    margin: 5px;
    padding: 10px;
    background: #fff;
    /* box-shadow: 0 0 10px; */
  }
  .charater_topcontent img{
    float:none;
    width:100%;
    padding:0px;
    margin:0;
    border: none;
    border-radius: 0px;
  }
  img.charater_img04{
    width:100%;
    margin:0px;
    padding:0px;
    float:none;
    border: none;
    border-radius: 0;
  }
  .charater_topcontent{
      margin: 5px;
      padding: 10px;
      background: #fff;
      border: 1px solid #ccc;
  }
  .charater_03{
    width: auto;
    margin: 5px;
    padding: 10px;
    float: none;
  }
  img.charater_img03{
    width:100%;
    border: none;
    border-radius: 0px;
    margin: 0;
  }
  .cont_link{
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc;
  }
 
  .sub{
    width: auto;
    padding: 10px;
    margin: 5;
  }
  .sub img{
    float:none;
    width:100%;
    border: 0;
    margin: 0;
  }

  .main_image img{
    width: 100%;
  }
  .menu_bar {
    width: auto;
  }
  .menu_bar ul li {
    display: block;
    padding: 0px;
    border-bottom: 1px solid #fff;
  }
  .menu_bar ul li a{
    padding: 10px;
    display: block;
    border: none;
  }
  .sle_charater{
    width: auto;
    margin: auto;
  }
  .footer_menu{
    width: auto;
    margin: auto;
  }
  .footer_menu ul li{
    display: block;
    border-bottom: 1px solid #fff;
  }
  .footer_menu ul li a{
    display: block;
    padding: 10px;
  }
  .footer{
    width: auto;
    margin: auto;
  }
  .charater_01 p{
    padding: 10px;
  }
  .menu_bars ul li a{
    border:none;
  }
  .footer_menu ul li:last-child{
    border-bottom: 0px;
  }

}
/*menu style*/
.nav10 {
    width: 1000px;
    margin: 0px auto;
}
.nav10 ul {
      padding:0;
      list-style:none;

}
.nav10 ul li{
      display:inline-block;
}
.nav10 ul li  a{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background-color: #E1E1E1;
  text-decoration:none;
  padding: 15px 45px;
  color:#000;
}
.nav10 ul li  a:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.nav10 ul li  a:hover:before, .hvr-curl-top-left:focus:before, .hvr-curl-top-left:active:before {
  width: 25px;
  height: 25px;
}
@media screen and (max-width: 480px) {
.nav10{width:100% !important;}
.nav10 ul li{
      display:block;
      width:100%;
      text-align:center;
}
.nav10 ul li  a{
  display:block;
  border-bottom:1px solid #fff;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background-color: #E1E1E1;
  text-decoration:none;
  padding:15px 25px;
  color:#000;
}
.nav10 ul li  a:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: width, height;
  transition-property: width, height;
}
.nav10 ul li  a:hover:before, .hvr-curl-top-left:focus:before, .hvr-curl-top-left:active:before {
  width: 25px;
  height: 25px;
}
}  
div#block02_container {
    float: right;
}