@charset "utf-8";

html {width: 100%; height: 100%;}
body { font-family:  Roboto, "ヒラギノ丸ゴ ProN W4","ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic ProN", "ヒラギノ角ゴ Pro",  "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo; font-size: 13px; line-height:1.5; color:#4c4948; background: #f8f8f8; width:100%; height: 100%; overflow-x: hidden; }

/********** LAYOUT **********/
#content-wrapper{
  width: 100%;
/*
background-color: #e8ece4;
background-image: linear-gradient(45deg, #d9dcd4 15%, transparent 15%, transparent 50%, #d9dcd4 50%, #d9dcd4 65%, transparent 65%, transparent);
background-image: -webkit-linear-gradient(45deg, #d9dcd4 15%, transparent 15%, transparent 50%, #d9dcd4 50%, #d9dcd4 65%, transparent 65%, transparent);
background-size: 5px 5px;
*/
padding-bottom: 46px;
}
#content-wrapper:before{content:"";display: block;width: 100%;height: 20px;
/*
 background-image: url("../img/backline.png"); background-position: center top; background-repeat: no-repeat;background-size: contain;
*/
 margin-top: 40px;}

#header-wrapper {width: 100%; height: 50px; }
#header{width: 960px; margin: 0 auto;}

div.index-siteinfo{float: left;}
#content{width: 960px; height: 100%; padding: 0 10px; margin: 0 auto;}

/********** HEADER **********/
#header p.index-site{ margin: 20px 20px 0 0px;}
#header a.index-sitetop{ font-size: 24px; line-height: 1.2; color: #000000; font-weight: 700;}
#header a.index-sitetop:hover{color: #666666;}
#header p.index-description{font-size: 13px; font-weight: 300; line-height: 1.6em; width: 290px; margin: 10px 20px 0 10px; display: block; float: left;}
#header div.index-mark{float: left; margin: -7px 0 0 0;}

.menu ul{font-family:'Roboto Condensed'; font-size: 16px; color: #648344; margin:15px 0 0 30px; float: left;}
.menu ul li{ float: left; /*position: relative;*/ }
.menu ul li a{color: #787878;  font-weight: 700; letter-spacing: 0.1; display: block; height: 28px; line-height: 28px; padding-left: 20px; padding-right: 20px; margin-top: 10px; }

/*
.menu ul li:hover{background-color: #787878;}
.menu ul li a:hover{color: #ffffff;}
*/

.menu ul li ul{list-style: none; position: absolute; z-index: 100; top: 0; left: 100%; margin: 0; padding: 0;}
.menu ul li ul li{overflow: hidden; height: 0; color: #fff; transition: .2s;}
.menu ul li ul li a{height: 28px; width: 300px; padding: 0 14px 0 14px; background: #779b50; text-align: left; font-size: 12px; color: #ffffff; font-weight: 400;}
.menu ul li ul li a:hover {background: #648344;}
.menu ul li:hover > ul > li {overflow: visible; height: 28px;}
.menu ul > li:hover > a {color: #fff;}

div.movie{float: right; width: 120px; height: 120px;}

/********** MENU **********/
ul.module-menu{}
ul.module-menu li{float: left; position: relative;margin-top: -60px;}
ul.module-menu li a{text-align: center;font-family:'Roboto Condensed';  font-size: 16px; line-height: 1.1; font-weight: 300; color: #fff;}

ul.module-menu li a.m1a{width: 158px; margin-right:2px; float: left; padding: 395px 0 24px 0;background-color: #0c870f; background-image: url(../img/m1img_mono.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m2a{width: 158px; margin-right:2px; float: left; padding: 395px 0 24px 0;background-color: #15888a; background-image: url(../img/m2img_mono.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m3a{width: 158px; margin-right:2px; float: left; padding: 395px 0 24px 0;background-color: #c2bb21; background-image: url(../img/m3img_mono.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m4a{width: 158px; margin-right:2px; float: left; padding: 395px 0 24px 0;background-color: #1c88b9; background-image: url(../img/m4img_mono.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m5a{width: 158px; margin-right:2px; float: left; padding: 395px 0 24px 0;background-color: #998818; background-image: url(../img/m5img_mono.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m6a{width: 158px; margin-right:2px; float: left; padding: 395px 0 24px 0;background-color: #d51893; background-image: url(../img/m6img_mono.jpg); background-repeat:no-repeat; background-position:0px 0px;}

ul.module-menu li a.m1a:hover{background-color: #0E9E10; background-image: url(../img/m1img.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m2a:hover{background-color: #1AA0A3; background-image: url(../img/m2img.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m3a:hover{background-color: #DBD227; background-image: url(../img/m3img.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m4a:hover{background-color: #219CD1; background-image: url(../img/m4img.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m5a:hover{background-color: #B29E1C; background-image: url(../img/m5img.jpg); background-repeat:no-repeat; background-position:0px 0px;}
ul.module-menu li a.m6a:hover{background-color: #ED1CA7; background-image: url(../img/m6img.jpg); background-repeat:no-repeat; background-position:0px 0px;}


ul.module-menu li div.dep{width: 158px; text-align: center; z-index: 10; position: absolute; top:360px; filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;}
ul.module-menu li div.dep a{ font-size: 16px; font-weight: 700; border-bottom:1px solid;}
ul.module-menu li div.dep a:hover{background-color: #e2e2e2;}


/********** CONTENT **********/
h2.index-h{font-size: 30px; color: #648344; text-align: center; margin: 50px 0 15px 0;}

div.partner-wrapper{width: 100%; background-color: #d0dac7; padding: 35px 0 20px 0;}
div.partners{margin: 0 auto; width: 520px;}
p.o-page{font-size: 18px; text-align: center; margin: 15px 0 0 0;}
p.o-page a{color: #648344; border-bottom: 1px solid; font-weight: 700;}
p.o-page a:hover{background-color: #e2e2e2;}

.mod-country li a:hover{background-color: #e2e2e2;}


ul#items {


}

li.item {
  margin: 0px 5px 20px 5px;
  font-size: 13px;
  float: left;
  width: 230px;
}

#items li div.title {
  position: relative;
/*
  background-image: linear-gradient(to bottom, #fff, #ddd);  
*/
  font-size: 11.5px;
  padding: 0.7em 1.1em 0.3em 1.6em;
  float: left;
  text-decoration: none;
  color: #fff;
/*
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
*/
  border-radius: 5px 0 0 0;
/*
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
*/
}

li.topics div.title {
  background: #0074ff;
}

li.topics div.title:after {
  content:'';
  position:absolute;
  z-index: 10;
  top: 0;
  right: -.5em;  
  bottom: -1px;
  width: 1em;
  background: #0074ff;
/*
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
*/
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
  -webkit-transform: skew(10deg);  
  -moz-transform: skew(10deg);  
}

li.society div.title {
  background: #2fa439;
}

li.society div.title:after {
  content:'';
  position:absolute;
  z-index: 10;
  top: 0;
  right: -.5em;  
  bottom: -1px;
  width: 1em;
  background: #2fa439;
/*
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
*/
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
  -webkit-transform: skew(10deg);  
  -moz-transform: skew(10deg);  
}

li.works div.title {
  background: #e54b92;
}

li.works div.title:after {
  content:'';
  position:absolute;
  z-index: 10;
  top: 0;
  right: -.5em;  
  bottom: -1px;
  width: 1em;
  background: #e54b92;
/*
  background-image: linear-gradient(to bottom, #fff, #ddd);  
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
*/
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
  -webkit-transform: skew(10deg);  
  -moz-transform: skew(10deg);  
}




li.item img {
/*  margin-top: 5px; */
  clear:both;
}

div.date {
  float: right;
  padding-top: 5px;
  padding-right: 5px;
  color: #9d9d9e;
}

.content {
  border-top-style: solid;
  border-top-width: 3px;
  width: 196px;
  padding: 14px 17px;
  background-color: #fff;
  clear:both;
  color: #4c4948;
  line-height: 1.8em;
  overflow: hidden;
}

li.society div.content {
  border-color: #2fa439;
}
li.works div.content {
  border-color: #e54b92;
}
li.topics div.content {
  border-color: #0074ff;
}




li.topimg {
  width: 480px;
  height: 350px;
  float: left;
/*
  background-color: #ccc;
*/
}
img.topimg {
  max-width: 475px;
  height: auto;
}

/********************* 
02. LAYOUT & GRID STYLES */
#contents{width: 960px; padding: 50px 10px; margin: 0 auto;}
.menu{margin-bottom: 20px;}
.menu2{margin-top: 80px;margin-bottom: 20px;}
.basic-text{width: 700px}

/*******************************
03. H1, H2, H3, H4, H5 STYLES */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 , h6 , .h6{ font-family: "Roboto Condensed", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", Meiryo;
font-weight: bold; clear:both;}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a , h6 a, .h6 a { text-decoration: none; color:#4b4b4b;}
h1,.h1 {font-size: 30px;}
h2,.h2 {font-size: 26px;}
h3,.h3 {font-size: 24px;}
h4,.h4 {font-size: 22px;}
h5,.h5 {font-size: 20px;}
h6,.h6 {font-size: 18px;}

h1.menu-en{font-size: 22px; display: inline; padding-right: 26px; padding-left: 5px;}
h1.menu-ja{font-size: 14px; display: inline; vertical-align: 2px;}
h2.subline{font-size: 22px; font-weight: normal; margin-bottom: 15px;}

/*********************
04. LINK STYLES */

a{color: #1e8cbe; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
a:visited {}
/*
a:hover, a:visited:hover{ background-color: #dcdcdc;}
*/
a:focus, a:visited:focus {}
a:link, a:visited:link {}

/******************
05. IMAGE SYTLES */
/*ボタンを固定する*/
#page-top {
    position: fixed;
    top: 30px;
    right: 40px;
}
/*ボタンをデザインする*/
#page-top a {
    width: 30px;
    height: 30px;
    background: #ccc;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    text-align: center;
    display: block;
    border-radius: 30px;
}
#page-top a:hover {
    text-decoration: none;
    background: #aaa;
}

/**********************
06. NAVIGATION STYLES */


/*********************
13. GROUP */
.group-img{width: 940px; margin: 50px 0 40px 0;}
.group-map-box{width: 940px; margin: 0;padding: 0;    position: relative;}
p.group-map{width: 940px; height: 454px; margin: 0;padding: 0;position: absolute; right: 0; top: 0;  }
ul.group1, .group2, .group3, .group4{width: 235px;display: block;float: left; margin-top: 454px; font-size: 11.5px; line-height: 1.6;}
.group-map-box{color: #999999;}
.group-map-box ul li a:hover{ position: static; }
.group-map-box ul li a .mapImage { display: none; opacity: 0;}
.group-map-box ul li a:hover .mapImage { display: block;  position: absolute; top: 0px; left: 0px;  opacity: 1;
      animation-duration: 0.5s;
      animation-name: fade-in;
      -moz-animation-duration: 0.5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-name: fade-in;}
      @keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }
.group-map-box a:hover, a:visited:hover{ background-color: #dcdcdc; padding: 0 3px;}

/*********************
13. GK KYOTO */
.gkkyoto-box{font-size: 14px; margin-top: 50px;}
.gkkyoto-box2{font-size: 14px; margin-top: 50px; width: 620px; float: left;}
.timelineimage{display: inline-block; width: 170px; margin-top: 50px; margin-left: 20px;}
img.le{display: block; clear: both;}
img.ri{display: block; float: right;}
.gkkyoto li{list-style-type: decimal; margin-left: 13px; padding-left: 5px}
.gkkyoto dl{width: 750px;}
.gkkyoto dt{float: left; width: 180px; clear : both; padding-bottom: 1em;}
.gkkyoto dd{width: 570px; margin-left: 180px; padding-bottom: 1em;}

/*********************
13. TIME LINE */

.gkkyototimeline{position: relative;}
.timeline:before{ background: none repeat scroll 0 0 #656565; bottom: 0; content: ""; left: 49px; position: absolute; top: 8px; width: 2px; z-index: -1;}

.year{width: 42px; float: left; clear: both; font-size: 15px;}
.dot{text-indent: -9999px; width: 16px; float: left; font-size: 14px; background-image: url(../img/dot1.png);background-repeat: no-repeat; background-position: 0 2px;}
.dot2{text-indent: -9999px;width: 16px; float: left; font-size: 14px; background-image: url(../img/dot2.png);background-repeat: no-repeat; background-position: 0 2px;}
.text{width: 550px; float: left; font-size: 14px; padding-bottom: 1em; padding-left: 10px;}


#menu-topnavi {font-family:'Roboto'; font-size: 16px; color: #648344; margin:15px 0 0 30px; float: left;}
#menu-topnavi li{ float: left; position: relative; padding-top: 5px;}
#menu-topnavi li a {color: #787878;  font-weight: 700; letter-spacing: 0.1; display: block; height: 1.5em; line-height: 1.5em; padding-left: 8px; padding-right: 40px; margin-top: 10px; }
#menu-topnavi li a { text-decoration: none; }
#menu-topnavi li ul{list-style: none; position: absolute; z-index: 100; top: 28px; left: 0; margin: 0; padding: 0;}
#menu-topnavi li ul li{overflow: hidden; height: 0; color: #ccc; float:left; }
#menu-topnavi li ul li a{height: 20px; padding: 0 14px 0 8px; text-align: left; font-size: 14px; font-weight: 400; font-family:'Roboto';}
/*
#menu-topnavi li:hover > ul > li {overflow: visible; height: 28px; }
*/
#menu-topnavi li a { border-width: 5px; }
#menu-topnavi li a { border-left-color: #ecdf00; }
#menu-topnavi li a:hover { color: #4b4b4b; }

ul.sub-menu {
  left: 0 !important;
  top: 45px !important;
  width: 600px;
}

ul.sub-menu li { margin-right: 10px; }


#menu-topnavi > li.current-page-parent > a {
  border-left-style: solid; margin-left:-5px; color: #4b4b4b; height: 35px;
}
#menu-topnavi > li.menu-item-has-children > a {
  height: 27px;
}

#menu-topnavi li.current-page-parent ul li, #menu-topnavi li.current-menu-item ul li {
  overflow: visible; height: 20px;
}

#menu-topnavi > li.current-page-parent > ul > li.current-page-item {
  color: #4b4b4b;
}
#menu-topnavi > li.current_page_item > a { border-left-style: solid; margin-left:-5px; color: #4b4b4b!important; }
li.current_page_item > a {color:#4b4b4b!important;}

#menu-item-50 { text-indent: -2000px; height: 0px!important; }
#menu-item-50 a { background-image: url("./img/btn_search.png"); height: 34px!important; width: 34px; margin-top:5px!important; background-repeat: no-repeat; border-style:none;}
#menu-item-50.current_page_item > a { margin-left:0px; background-position-y: -34px; }


/* SOCIETY */
li.bosai-design div.title {
  background: #26549e;
}

li.bosai-design div.title:after {
  content:'';
  position:absolute;
  z-index: 10;
  top: 0;
  right: -.5em;  
  bottom: -1px;
  width: 1em;
  background: #26549e;
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
  -webkit-transform: skew(10deg);  
  -moz-transform: skew(10deg);  
}

li.univehicle div.title {
  background: #db9d1e;
}

li.univehicle div.title:after {
  content:'';
  position:absolute;
  z-index: 10;
  top: 0;
  right: -.5em;  
  bottom: -1px;
  width: 1em;
  background: #db9d1e;
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
  -webkit-transform: skew(10deg);  
  -moz-transform: skew(10deg);  
}

li.kyoto-dentoukougei div.title {
  background: #803074;
}

li.kyoto-dentoukougei div.title:after {
  content:'';
  position:absolute;
  z-index: 10;
  top: 0;
  right: -.5em;  
  bottom: -1px;
  width: 1em;
  background: #803074;
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
  -webkit-transform: skew(10deg);  
  -moz-transform: skew(10deg);  
}

li.kyoto-machidukuri div.title {
  background: #278f97;
}

li.kyoto-machidukuri div.title:after {
  content:'';
  position:absolute;
  z-index: 10;
  top: 0;
  right: -.5em;  
  bottom: -1px;
  width: 1em;
  background: #278f97;
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
  -webkit-transform: skew(10deg);  
  -moz-transform: skew(10deg);  
}


li.univehicle div.title {
  background: #db9d1e;
}

li.bosai-design div.content {
  border-color: #26549e;
}
li.kyoto-dentoukougei div.content {
  border-color: #803074;
}
li.univehicle div.content {
  border-color: #db9d1e;
}
li.kyoto-machidukuri div.content {
  border-color: #278f97;
}

div.thum-img-box{
  width: 195px;
  height: 125px;
  overflow: hidden;
}
div.thumbnail img {
  width: 100%;
  height: auto;
}

#base_slider {
  position: relative;
  margin-left: 5px;
}

#slider {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 40;
}

#wrap-slider {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
}

p.tpcs-title { 
    font-family: Roboto Condensed, "ヒラギノ角ゴ Pro",  "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo;
  font-weight: bold;
  font-size: 14px; 
  line-height: 1.5; 
  height: 3em;
  overflow: hidden;
}

p.ellipsis{
  line-height: 1.6;
  padding-top: 12px;
  height: 66px;
  overflow: hidden;
}

/* 161222 seminer */
div.semi {width:400px; margin-bottom: 15px;display: block;
 margin-left: auto;
 margin-right: auto;}
div.semi img{-webkit-transition: 0.3s ease-in-out;
     -moz-transition: 0.3s ease-in-out;
       -o-transition: 0.3s ease-in-out;
          transition: 0.3s ease-in-out;}
div.semi img:hover{opacity: 0.5;filter: alpha(opacity=50);}