@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);


/*
---------------------------------------------------------------------------
Powerd by B-support
URL：http://www.b-sup.co.jp/
---------------------------------------------------------------------------*/

body {
    color: #333333;
    margin: 0px;
    padding: 0px;
    text-align: center;
    /*font: 13px/1.5 Verdana, Roboto, "Droid Sans", "Noto Sans Japanese", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;*/

    font: 13px/1.5 Verdana, Roboto, "Droid Sans",   "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",  "Noto Sans Japanese", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    background: #FFFFFF;
}
h1,h2,h3,h4,h5,ul,li,ol,dl,dt,dd,form{
    margin: 0px;
    padding: 0px;
}

p{
    margin  : 0px;
    padding : 0px;
}

ul{
    list-style-type: none;
}
ol{
    margin-left : 20px;
}
img {
    border: none;
}
input,textarea,select {
    font-size: 1em;
}
form {
    margin: 0px;
}
table {
    border-collapse:collapse;
    font-size: 100%;
    border-spacing: 0;
}

/* Anchor
---------------------------------------------------------------------------*/
a {
    color: #333333;
}
a:hover {
    color: #339999;
    text-decoration: none;
}

/* container
---------------------------------------------------------------------------*/
#container {
    text-align: left;
    width: 982px;        
    margin-right: auto;
    margin-left: auto;
    /*background: url(../images/container_bg.gif) repeat-y;    */

    /*border-left  : solid 5px #51A8A8;*/
    /*border-right : solid 5px #4169e1; *//* royal blue */
}

h1 {
    font-size: 14px;        
/*    text-align: right;        
    line-height: 40px;
    background: #FFF;*/
}
h1 a {
    text-decoration: none;
}

/*-----------------------------------------
               Header
-----------------------------------------*/
#header {
    text-align: left;
    height: 86px;    
    width: 100%;
    position: relative;
    background: url(../images/header_bg.jpg) no-repeat;    
}

#header .logo {
    position : absolute;
    left     : 15px;
    top      : 3px;
    float    :left ;
}


#header .facebook{
    width         :285px ;
    height        : 60px ;
    margin-top    : 15px ;
    padding-right : 0px ;
    padding-left  : 695px ;
    text-align    : right;
    position      : absolute;
/*        float         : right ;*/
}

.mod_headerbox_size {
      width      : 90px;
      margin-top    : 15px ;   /* when include header */
/*      margin-top    : 0px ;  */  /* when include pre-header */
      padding-right : 15px ;
      position   : relative;
      overflow   : hidden;
      float      : right ;
    }
.mod_headerbox_size ul {
}
.mod_headerbox_size ul li {
      float    : left;
      width    : 30px;
      height   : 30px;
      overflow : hidden;
}
.mod_headerbox_size ul li span {
      display: block;
      cursor: pointer;
}
.mod_headerbox_size ul li.active span {
      margin-top: -30px;
}
.mod_headerbox_size ul li span:hover{
    margin-top:-30px;
}

.mod_headerbox_fblink {
    text-align  : right ;
}

.mod_headerbox_lang {
  width         : 90px;
  margin-top    : 15px ;
  padding-right : 15px ;
  position   : relative;
  overflow   : hidden;
  float      : right ;
}
.mod_headerbox_lang ul {
}
.mod_headerbox_lang ul li {
  float    : left;
  width    : 45px;
  height   : 30px;
  overflow : hidden;
}
.mod_headerbox_lang ul li span {
    display: block;
    cursor: pointer;
}
.mod_headerbox_lang ul li.active span {
    margin-top: -30px;
}
.mod_headerbox_lang ul li span:hover{
    margin-top:-30px;
}


.marquee {
    padding          : 0.5em 0 0 0;
    overflow         : hidden;
    background-color : transparent;
    position         : relative;
}

.marquee img:after {
    content      :"owl";
    white-space  : nowrap;
    padding-right: 50px;
}

.marquee img {
    margin:0;
    padding-left :100%;
    display      :inline-block;
    white-space  :nowrap;
    -webkit-animation-name:marquee;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:marquee;
    -moz-animation-timing-function:linear;
    -moz-animation-duration:10s;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:marquee;
    -ms-animation-timing-function:linear;
    -ms-animation-duration:10s;
    -ms-animation-iteration-count:infinite;
    -o-animation-name:marquee;
    -o-animation-timing-function:linear;
    -o-animation-duration:10s;
    -o-animation-iteration-count:infinite;
    animation-name:marquee;
    animation-timing-function:linear;
    animation-duration:10s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}
/*-----------------------------------------
               Contents
-----------------------------------------*/

#contents {
    clear        : left;
    width        : 100%;
    margin-right : auto;
    margin-left  : auto;
    margin-top   : 10px ;
}

/*-----------------------------------------
           Contents main
-----------------------------------------*/
#main {
    float  : right;    
    width  : 750px;    

    padding-bottom : 30px;
    margin-top     :  0px;
}

#main h2 {
    clear            : both;
    width            : 740px;
    font-size        : 100%;    
    color            : #FFFFFF;        
    background-color : #008E94 ;  /* #00B1BB;  #51A8A8;*/
    margin-bottom    : 10px ;
    padding-left     : 10px;
    line-height      : 40px;
    height           : 40px;
    overflow         : hidden;
}
#main h2 img{
    vertical-align   : middle;
}

#main p {
    padding-left  : 0em ;
    padding-right : 0em ;
    text-indent   : 0.5em ;    
}
#main p.hanging {
    margin-left :  0.5em ;
    text-indent : -0.5em ;
}


/*-----------------------------------------
           Contents Sub
-----------------------------------------*/
/*--   #sub  .submenu (common)  -- */
#sub {
    float           : left;
    width           : 221px;
    padding-bottom  : 30px;
    padding-left    :   0px;
    margin-top      :   0px;
}


#sub p {
    padding  : 0.5em 0px;
}

#sub ul.submenu {
    margin-bottom : 1em;
    border-left   : solid 1px #008e94;  /* #339999; */
    border-right  : solid 1px #008e94;  /* #339999; */
    border-bottom : solid 1px #008e94;  /* #339999; */

}

#sub ul.submenu li a {
    display         : block;
    text-decoration : none;
    color           : #FFFFFF;
    background      : #008e94;  /* #339999; */
    width           : 100%   ;
}
#sub ul.submenu li {
    text-indent     : 0.5em;
    line-height     : 180% ;
    margin-bottom   : 1px;
}

#sub ul.submenu li a:hover {
    color           : #008e94;  /* #339999; */
    background      : #FFFFFF;
}

#sub ul.submenu h3 {
    font-family   : 'Montserrat',  "Noto Sans Japanese", sans-serif;
    font-size     : 100%;
    padding       : 15px 10px;
    text-indent   : -1em;
    border-top    : solid  5px  #044c0a;
    margin-bottom : 1px;
    color         : #044c0a;
    background    : #fff url(../images/bg1.png) no-repeat left top
}

/*--    .menuIndex    -- */

#sub ul.menuIndex li {
}
/*--    .links     -- */
#sub ul.links {
    background      : #008e94;  /* #339999; */
}

#sub ul.links li{
    width           : 100%;
    text-indent     : 0em ;
    line-height     : 100%;
    margin          : 0 ;
}
#sub ul.links li:first-child{
    line-height     : 180%;
}

#sub ul.links li:last-child{
/*    border-bottom   : solid 1px #008e94;  *//* #339999; */
}

#sub ul.links li a:hover {
    color           : #FFFFFF;
    background      : #008e94;  /* #339999; */
}
#sub ul.links li img {
    width       : 100% ;
    max-height  : 120px ;
}

#sub ul.links li img:hover{
      cursor: pointer;
    -webkit-filter: sepia(70%);
    -moz-filter: sepia(70%);
    -o-filter: sepia(70%);
    -ms-filter: sepia(70%);
    filter: sepia(70%);
}

/*--    .selectLang    -- */
#sub ul.selectLang li {
    line-height     : 220% ;
}
#sub ul.selectLang li img{
    padding         : 2px 0px;
    vertical-align  : middle;
}


/*-----------------------------------------
           goto top
-----------------------------------------*/
div#gotoTop {
    clear            : both    ;
    width            : 100%    ;
    text-align       : right   ;
    font-size        : 13px    ;

}
div#gotoTop a{
    background-color : #00687c;  /* #008E94;  royalblue ;*/
    color            : #FFFFFF ;
    padding           : 0  1em  ;
    text-decoration  : none    ;
}
div#gotoTop a:hover{
    color            : #E6E6E6 ;
}

/*-----------------------------------------
           footer
-----------------------------------------*/
#footer {
    text-align: center;
    clear: both;
    width: 100%;
    background-color: #00687c;  /* #008E94; royalblue ;*/
    color : #fff ;
    font-size : 11px ;
    padding-top: 10px;
    padding-bottom: 10px;
}
#footer a {
    text-decoration: none;
}


/*-----------------------------------------
           etc ... common class
-----------------------------------------*/

.txt_right {
    text-align : right ;
}
.article{
    margin-left : 10px ;
}

div.article{
    margin-bottom :25px ;

}

.look {
    background-color: #dcdcdc;
}
.mb1em {
    margin-bottom: 1em;
}
.clear {
    clear: both;
}
ul.disc {
    padding: 0em 25px 1em;
    list-style: disc;
}


.fontS { font-size: 85% }
.fontM { font-size: 100% }
.fontL { font-size: 110% }


/* select Language */
    .mod_operation{
      margin-top    : 40px ;
      padding-right : 15px ;
      font-size     : 85%  ;
      text-align    : right ; 
      position      : relative;
      overflow      : hidden;
      float         : right ;
      color         : white ;
    }
    .mod_operation a{
      color           : white ;
      text-decoration : none ;
    }


    .mod_operation a:hover{
      color           : orange ;
      text-decoration : underline ;
    }