@charset "utf-8";

*,
*:after,
*:before {
  box-sizing: border-box; }


a,  address,  article, aside,  b, blockquote, body, caption, dd, div, dl, dt, em, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, i, iframe, img, label, li, nav, object, ol, p, pre, section, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr,  u, ul
{   border: 0;  margin: 0;  padding: 0; }

html,body{ height:100%;width: 100%;}

article, aside,section {   display: block; }

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}


br {  letter-spacing:normal; }


html {
   overflow-y:scroll;
}

body {
	font-family : verdana, sans-serif;
	font-size: 98%;
	color: #454545;
	line-height : 1.5
}

a {
   color:#134D99;
   text-decoration:none;
}

a:hover {
   color:#134D99;
   text-decoration:underline;
}

h1,h2,h3,h4,h5,h6 { margin-bottom : 12px}

h3 {font-size: 16px; }

section, article {margin-bottom: 12px;}

.container  { 
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:before,
.clearfix:after,
.container:before,
.container:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container:after {
  clear: both;
}

.clearfix,
.container,  {
  zoom: 1;
}

/*box*/

header h1,
.header_navi,
.topi,
.main_l,
.main_r,
.top_column,
.footmenu
 {
  margin-left: 10px;
  margin-right: 10px;
  display: inline;
  float: left;
}

/*角丸*/
.top_column,
.information h3,
/*.top_column h3,*/
.top_column,
.outline li a,
.banner li,
.submenu,
.submenu h3,
aside.container,
aside.banner,
aside.outbanner,
aside.banner img,
aside.outbanner img,
.catch_copy a,
.edi,
.engi,
.face,
.outlink,
.outlink img,
#pageTop {
      -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}


i {font-weight: normal;}

/* header */

header {padding-top:36px}

header h1 {
  margin-top: -12px;
  margin-bottom: -24px;
  width: 340px;
}
header h1 a {text-decoration: none;}

.jlogo {position: relative;top:-8px;left:8px}
.elogo {position: relative;top:-30px;left:108px;}


.header_navi {  width: 580px; }
.q_menu, .site_menu { text-align: right;}
.q_menu li, 
.site_menu li {
   display: inline;margin-left: 10px;
}

.q_menu {font-size: 12px;margin-bottom: 12px;}
.q_menu li {
   font-size:12px;
   overflow:hidden;
   margin:0;
   padding:0 0 0 15px;
}
.q_menu li a {
   color:#454545;
   outline:none;
}
.q_menu li a:hover {
   color:#0080c0;
   text-decoration:underline;
}
.q_menu li a:before,
.more a:before,
.eqe a:before
 {
   content: "\0025b6";padding-right: 5px;
   color:#0080c0;font-size: 0.9em;
}
.q_menu li.enavi a:before {
   content: "\0025b6";padding-right: 5px;
   color:#ff8000;font-size: 0.9em;
}

.site_menu {font-size: 14px;}
.site_menu li a {
   font-weight:bold;
   color:#454545;
   outline:none;
}
.site_menu li a:hover {
   color:#454545;
   border-bottom:3px solid #770000;
   padding-bottom: 2px;
   text-decoration:none;
}
/*
.site_menu li.mnavi a:before {
   content: "\0025b6";padding-right: 2px;
   color:#ff8000;
}
*/
.site_menu li.mnavi i {padding-right: 2px;
   color:#0080c0;
}
/*google*/
#cse-search-box {display: inline;} 


/* cover image */
.topimg {
   position: relative;
   max-height: 480px;
   overflow: hidden;
   text-align: center;
   background-color: #efefef;
}
.topimg img.cover{
   max-width: 100%;
   min-width: 960px;
   min-height: 320px;
}




/*土木とは*/
.topi {
background-color: #ffffff;
width: 320px;
height: 320px;
position: absolute;
top: -330px;
left:-20px;
      -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
/*    filter: alpha(opacity=70);*/
    -moz-opacity: 0.70;
    box-shadow:#ddd 1px 1px 1px

}
.topi h2 {color: #f58735;font-size: 16px;text-shadow:#ffffff 1px 1px 1px}
.topi_in {widt:200px;margin:60px}
.topi_in p {margin-bottom: 1em;font-size: 15px;}

/*パンフレットリンクボタン*/

a.pamp  {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 22;
  -moz-border-radius: 22;
  border-radius: 22px;
  font-family: Arial;
  color: #ffffff; text-shadow:#2980b9 1px 1px 1px;
  font-size: 13px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

a.pamp :hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

/*左右コンテナ*/
.main_l,
.main_r {
  font-size: 15px;
  margin-top: 1em;
}
.main_l {
  width: 620px;
}
.main_r{
  margin-bottom: 10px;
  width: 300px;
}

/*3列コラム*/


.top_column {
  position: relative;
  margin-bottom: 10px;
  margin-top: 30px;
  width: 300px;
  height:240px;
   background-color: #fffbf8;
/* border-bottom: 1px #ffcda1 solid; */
  border: 1px #ffcda1 solid;
}

.top_column h3 { 
   padding:5px 0 5px 2em; 
color:#454545;
/*     border-top: 1px #ffcda1 solid; 

background-color: #ffe6ca;
    position: relative;
text-shadow: #cccccc 1px 1px 3px;
*/  
    margin: 0.5em 0.5em 1em 0.5em;
font-weight: 600;
border-bottom:#f58735 2px dotted ;

}

.top_column h3:before{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border:2px solid #f58735;
  position:absolute;
  top:20px;
  left:1em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 
.top_column h3:before{
    content: "\0025b6";
    font-size: 120%;
    color: #ff6b6e;
    padding-right: 10px;
}

 
.top_column h3 i{
    font-size: 120%;
    color: #ff6b6e;
    padding-right: 10px;
}
*/

.top_column p,
.top_column ul {
   margin:0.5em 1em ;
/*   margin:0.5em 1em 0 2em;*/

   font-size: 14px;
}


.top_column li{ 
   margin-left: 1em;
   font-size: 13px;
   list-style-type: circle;
}


/*会長*/
.cbox {display: flex;flex-direction: column;}
.cinbox {display: flex;justify-content:space-between;margin-bottom: 1em;}

.ytb { margin-top: auto;}

/*.chair {width:70px;float: right;}*/
/*#feeds_p li::after{content:"New!";color:red;font-size:0.96em}*/
/*#feeds_p li:first-child {display: none;} 
/*feedの一行目を非表示*/

.ytb a {text-shadow:#005d8c 1px 1px 1p;display: block;border: #006db5 1px solid ;padding:0.1em;background-color: #ffffff;border-radius:5px;text-align: center;font-size:0.96em}
/*.ytb a::before {font-family: FontAwesome;content: "\f16a";color:#FF0000;font-size:1.2em}
 */

.ytb a::before {
 content: "";
 display: inline-block;
 width: 20px;
 height: 14px;
 background-image:url(../images/youtube_social_icon_white.png);
 background-size: contain;
 vertical-align: middle;}
.ytb a {text-shadow:#005d8c 1px 1px 1p;display: block;border: #006db5 1px solid ;padding:0.2em;background-color: #ffffff;}
.ytb a:hover {position: relative;top: 1px;text-decoration: none;background-color: #d7ebff;}



/*学会紹介*/
.outline {display: flex; display: -webkit-flex; flex-wrap : wrap;-webkit-flex-wrap : wrap;padding-top: 0.5em;}
.outline li {width:120px;list-style-type: none;margin-bottom:0.5em;text-align: center;
float: left\9;}
.outline li.j2020 {width:254px;}
.outline li a {text-shadow:#005d8c 1px 1px 1p;display: block;border: #006db5 1px solid ;padding:0.1em;background-color: #ffffff;}
.outline li a:hover {position: relative;top: 1px;text-decoration: none;background-color: #d7ebff;}



/*バナーリンク*/
.banner li { 
  position: relative;
  list-style-type: none;
  display: inline;
  float: left;
  margin-bottom: 10px;
  height:60px;
  width: 300px;
  overflow: hidden;
}
.banner li span {
   font-size: 11px;
   position: relative;
   top:-28px;
   left:120px;
   letter-spacing: -0.5px;
}


.banner li a {
   display: block;
   font-size: 14px; 
   color: #454545;   
   text-shadow: 0 1px 1px #7f7f7f;
   background-repeat: no-repeat ;
   background-position:  5px;
   padding-left:120px;
   height: 58px;
   line-height: 50px;
  border: 1px #cccccc solid;
}

.main_l .banner li a {
   background-color: #f5f5f5;
}
.main_r .banner li a {
   background-color: #f7fbff;
}

.banner li a:hover {
   background-color: #ffffe1;
   color:#134D99;
   text-decoration: none;
}


.lef {
  margin-left: 0;
  margin-right: 10px;
}/*左*/
.rig {
  margin-left: 10px;
  margin-right: 0;
}/*右*/

.committees {background-image: url(../images/ico_com.jpg);}
.publication {background-image: url(../images/ico_pub.jpg);}
.jjournal {background-image: url(../images/ico_jj.jpg);}
.journal {background-image: url(../images/ico_journal.jpg);}
.cpd  {background-image: url(../images/ico_cpd.jpg);}
.branch {background-image: url(../images/ico_branch.jpg);}

.events {background-image: url(../images/ico_events.jpg);}
.library {background-image: url(../images/ico_lib.jpg);}
.day {background-image: url(../images/ico_day.jpg);}
.day2 {background-image: url(../images/ico_day.png);}

.prize {background-image: url(../images/ico_prize.jpg);}
.heritage {background-image: url(../images/ico_heritage.jpg);}
.dvd {background-image: url(../images/ico_dvd.jpg);}
.jscejp {background-image: url(../images/ico_jp.jpg);}


.zenkoku {background-image: url(../images/h26zenkoku.jpg);}
.edi_banner {background-image: url(../images/ico_edi.jpg);}
.banner li em {font-style: normal;font-size: larger;margin: 0 5px;}


.ico {background-image: url(../images/ico.jpg);}


/*新刊本バナー*/
.bookpr {height: 150px;border: 1px #cccccc solid;background-color: #fffff4;display: flex; display: -webkit-flex;
      -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
 margin-top: 0.8em;}
.bookpr a {text-decoration: none;display: block;}
.bookpr a:hover {position: relative;top: 1px;}
.bookpr img {border: 1px #cccccc solid;margin: 5px;float:left;}
.bookpr div {text-align: center;margin: 0;}
.bookpr  p {color:#ff6868;font-weight: bold;letter-spacing: 0.1em}
.bookpr > div + div {font-size: 0.8em;}
.bookpr h3 {margin-top:1em ;}
.bookpr span {font-size: 0.76em;}



/*PR*/

.prbanner {padding: 0 0.5em;display: flex; display: -webkit-flex; 
/*justify-content:space-between;-webkit-justify-content: space-between;*/
flex-wrap : wrap;-webkit-flex-wrap : wrap;
justify-content:space-between;-webkit-justify-content:space-between;
margin-top: 1em;}

.prbanner::after{
  content:"";
  display: block;
  width:300px;
}
/*PR枠が空欄１の場合左に詰める*/


.prbanner aside {width: 300px;text-align: center;height: 100px;border: 1px #cccccc solid;margin-bottom: 0.5em;}
.prbanner aside img {max-width: 100%;max-height: 100%;}

/*
.prbanner a {display: block;width: 100%;}
*/
.prbanner aside a:hover {  text-decoration: none; position: relative;top: 1px;}


.doboi {background-image: url(../images/doboiback.jpg);}
a.dobokui {font-size: 16px; color: #007400; text-shadow: 0 1px 1px #7f7f7f;}
a.dobokui span {color: #750000;}
.doboi p {font-size:9pt;background-color: #ffffff;height:50px;text-align: left;padding:4px}
.doboi p a::before {content:url(../images/shimatani_r2.jpg);float:left;margin-right:0.5em}



/*Footer*/
footer {background-color: #5ea9da; 
margin-top: 24px;}

footer .container{
   background-color: #5ea9da;
   padding-top: 24px;
   padding-bottom: 24px;
   color: #ffffff;
   font-size: 13px;
}

footer a {color: #ffffff;}

.footmenu {  width: 220px; }
.footmenu h4 {margin-bottom: 0;}
.footmenu ul {margin-bottom: 1em;}
.footmenu li {margin-left: 1.5em;}

address {font-style: normal;}
.copy {text-align: left;padding: 24px 0 6px 0;}


/* INFORMATION */

.information {
   width:620px;
}

.information h3 {
   padding:0 10px;
   line-height:2.0;
   font-size:15px;
   font-weight:normal;
   margin:0 0 0.5em 0;
   color:#000;
   border:1px solid #ddd;
   background:#ccc;
   text-shadow: 0 1px 1px #7f7f7f;
}

.information h4{   
    margin-top: 0.5em;
    border-color:#cccccc;
    border-style: solid;
    border-width: 1px 1px 1px 8px;
    
    display:block;   
    padding:3px 0 3px 10px 
} 


.information dl {
   margin:0;
}
.information dt {
   float:left;
   padding-top:5px;
   margin-left: 5px;
   border-radius:3px;
}

.information dd {
   margin:0;
   padding:5px 0px 5px 9em;
   background-color:#ffffff
}


.topics dt {width:8.5em;text-align: center;font-size:11px;background-color: #ffc68c;}
.topics dt.zenkokunews {background-color: #e1ffe1;}
.topics dt.strategy {background-color: #0080c0;color:#ffffff}
.topics dt.pickup {background-color: #8080ff;color:#ffffff}

/*
dl.maintenance,
dl.topics {
	margin:15px 0 ;
}
*/
dl.maintenance dt {width:8.5em;text-align: center;
	background-color:#ff8040;color:#ffffff;font-size:11px;letter-spacing: -0.1px;
}



/*news tab*/
#tabs {
/*通常時



height: 410px;
*/
/*
総会バナー有

height: 490px;*/

/*全国大会バナー有*/

height:550px;
}

ul.tab
{ 
  margin: 0 ;
  padding: 0;
  float: left;
  list-style: none;
  height: 32px;
  border-bottom: 1px solid #c4c4c4;
  border-left: 1px solid #c4c4c4;
  width: 100%;
}

.tab li{
  float: left;
  margin: 0;
  padding: 0;
  height: 31px;
  line-height: 31px;
  border: 1px solid #c4c4c4;
  border-left: none;  
  border-bottom: none;
  margin-bottom: -1px;
  position: relative;
   background:#eeeeee;
   font-size: 12px;
		text-shadow:#fff 1px 1px 2px

}
.tab li a{
  text-decoration: none;
  color: #000000;
  display: block;
  padding: 0 20px;
  border: 1px solid #ffffff;
  outline: none;

}
.tab li a:hover
{
  background: #cccccc;
}

.ui-tabs-active a{
    background-color:#ffffff;
    text-decoration:none;
    color:#333;
    cursor:default;
}
.panel{
  border: 1px solid #c4c4c4;
  border-top: none;
  clear: both;
  float: left;
  width: 100%;
/*通常時


  height: 380px;  */
/*総会バナー有

  height: 460px; */ 

  
/*全国大会バナー有  */

  height: 500px;

overflow-y: auto;
  background: #ffffff;
}


.nbox {margin: 0.5em 0; font-size: 13px;}
.panel div:not(.news_topics) {margin:1em 0.5em}

/*右トピ*/
aside.banner a:hover {
    opacity: 0.85;
    filter: alpha(opacity=85);
    -moz-opacity: 0.85;
}

/*総会バナー*/


.rb_box{width:300px;
	border:1px solid #dddddd;border-radius:4px;
	
	background-color:#fff;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MTEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNDAuNjA4NjA3NzQ1NTYxNDQlIiB5MT0iMzQuMTg3MDUzNDMzNDI1MTM1JSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI2JiZGRmZiIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzgxMSkiIC8+Cjwvc3ZnPg==);
	padding:1em;text-align: center;
}
	.soukai {
		position: relative;
		color: #fff;
		display: inline-block;
		padding: 5px;
		overflow: hidden;
	} 
	
.ribon {
  position: absolute;
  top: 0;
  right: 0;
  width: 85px;
  height: 85px;
  overflow: hidden;
  }

.ribon span {
  display: inline-block;
  position: absolute;
  padding: 5px 0;
  left: -24px;
  top: 20px;
  width: 160px;
  text-align: center;
  font-size: 13px;
  line-height: 13px;
  background: #ff0000;
  color: #fff;
  letter-spacing: 0.05em;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 0 0 0 2px rgb(227, 0, 0);
  
  border-top: dashed 1px rgba(255, 255, 255, 0.65);
  border-bottom: dashed 1px rgba(255, 255, 255, 0.65);
}

.soukai h3 {width:80%;border-bottom:2px #006699 dotted;margin:0 auto;margin-bottom: 0.5em;padding-bottom: 0.5em;}
.soukai h3 span {font-weight: normal;}
.soukai h3+p, .soukai h3+p a{color:#454545;display: block;width: 100%;}
.soukai a:hover {text-decoration: none;position: relatie;top:1px;}



/*論説*/

.edi {border: 1px #eee solid;margin-top: 1em;
min-height: 160px;max-height: 160px;overflow: hidden;
background-image: url(../images/edi_back.jpg);}
.edi i,
.engi i {font-size: 15px;margin-right:5px ;}
.edi h3,
.engi h3
 {font-size: 13px;padding:5px 8px 0 8px;margin: 0.5em 0;letter-spacing: 0.1em;color: #006699;
 
}
#feed_editorial,
#feed_engi 
	 {margin:5px 10px;}
/*
#feed_editorial li,
#feed_engi li
	{ 
	overflow:hidden;font-size:9pt;width:260px;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis; 
	-o-text-overflow: ellipsis; 
	white-space: nowrap;
}
*/
#feed_editorial li {list-style-type: none;font-size: 0.8em;margin: 0.5em;}
#feed_editorial li a:before,
#feed_engi li a:before
 {
	content:"\002666";padding-right: 5px;font-size: 0.9em;
}



/*facebook*/
.face {
   width:300px;
/*通常時

   height:600px;
 /*総会、全国大会バナーサイズに合わせて適宜書き換え**indexの数値も修正
*/   height:440px; 
 /*  height: 520px;
*/

    padding:5px;
	background-color: #ffffff;
	border:#aed5e8 1px solid ;
}


/*新刊*/
#feed_publication {display: flex;flex-wrap:wrap;}
#feed_publication .post {width:154px;margin-right:10px;padding:8px;box-shadow:#c0c0c0 1px 1px 6px;font-size:0.9em}
#feed_publication .post img {margin:5px}
.pub_thumnail {text-align:center}


/* 外部リンク*/
aside.outbanner {text-align: center;	background-color: #e6fff2;
	border:#aed5e8 1px solid ;
	padding: 0.5em;
}
aside.outbanner h3{font-size: 0.8em;font-weight: normal;}
aside.outbanner  a {font-size: x-small;}

/* footer外部リンク*/

.outlink {border:1px #9bc9e8 solid;min-height:21em}
.outlink h4 {margin-bottom: 1em;}
.outlink p {margin: 1.2em 0.8em;border-bottom:1px #9bc9e8  dotted;}
.outlink span {font-size: x-small;}


/* footer SNSアイコン */
#sns ul {margin-left: -1.8em;display: flex;}
#sns li {list-style-type:none;width: 6em;text-align: center;}
#sns li a {text-decoration:none;display:block;font-size:0.96em}
#sns li a:hover {position:relative;top:1px;}
#sns .tw a::before {content:url(../images/slogo_Twitter.png);position:relative;top:6px;}
#sns .fb a::before {content:url(../images/slogo_fb.png);position:relative;top:6px;}
#sns .nt {padding-top: 1em;}


/* --------PAGRTOP--------= */
#pageTop {
   position:fixed;
   right:0;
   bottom:0;
   padding:10px;
   background:#589fcb
}

#pageTop a {
   padding:0 0 0 12px;
   color:#fff;
   font-size:11px;
}