@charset "UTF-8";
/* ---------------------------------------------------------
	SPF トップページCSS
---------------------------------------------------------- */
/* ------------------------------
 style.cssの上書き
------------------------------ */
#toppage #wrapper {
  padding-bottom: 40px;
  background: #E3ECF0;
  position: relative;
}
#copyright{
  margin: 20px auto 0;
}
/* ------------------------------
 category color
------------------------------ */
/* プログレスナウ */
.category_SPFNow .label p,
.category_ProgressNow .label p {
  background: #010101;
}
.category_SPFNow .tip,  .category_SPFNow .label,
.category_ProgressNow .tip, .category_ProgressNow .label {
  border-color: #010101;
}

/* 一般 */
.category_SPF .label p {
  background: #19408F;
}
.category_SPF .tip,  .category_SPF .label {
  border-color: #19408F;
}

/* 汎アジア */
.category_SPAF .label p {
  background: #01A050;
}
.category_SPAF .tip,  .category_SPAF .label {
  border-color: #01A050;
}

/* 中東 */
.category_SMEIF .label p {
  background: #FEA002;
}
.category_SMEIF .tip,  .category_SMEIF .label {
  border-color: #FEA002;
}

/* 日中 */
.category_SJCFF .label p {
  background: #cc1212;
}
.category_SJCFF .tip,  .category_SJCFF .label {
  border-color: #cc1212;
}

/* 太平洋島 */
.category_SPINF .label p {
  background: #0BABC5;
}
.category_SPINF .tip,  .category_SPINF .label {
  border-color: #0BABC5;
}

/* 日米 */
.category_JPUS .label p {
  background: #691D8A;
}
.category_JPUS .tip,  .category_JPUS .label {
  border-color: #691D8A;
}
/* 海洋政策研究所 */
.category_OPRI .label p {
  background: #1E97FF;
}
.category_OPRI .tip,  .category_OPRI .label {
  border-color: #1E97FF;
}
/* 新領域開拓 */
.category_GFF .label p {
  background: #df678d;
}
.category_GFF .tip, .category_GFF .label {
  border-color: #df678d;
}
/* ------------------------------
 mainVisual
------------------------------ */
#mainVisual{
  display:none;
  padding-top:400px;
  width:100%;
  background:url(../image/home/sample.jpeg) no-repeat;
  background-size:100%;
  text-align:center;
}
#mainVisual h2{
  background:rgba(0,0,0,0.5);
  color:#FFF;
  font-size:12px;
  font-weight:normal;
  padding:20px 0 10px 0;
  line-height:150%;
}
#mainVisual h2 a{
  display:block;
  color:#FFF;
  font-size:30px;
  font-weight:normal;
  font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-decoration:none;
  padding-bottom:15px;
	text-shadow: 0 1px 3px #000;
}
/* ------------------------------
 categoryNav
------------------------------ */
#categoryNav {
  position: absolute;
  right: -785px;
  z-index: 100;
  width: 880px;
  height: 85px;
  top:28px;
  background: url(../image/home/category_navi_bg.png);
}
#categoryNav.open {
  background-position: 0 -86px;
}
#toggleCategoryNavButton {
  float: left;
  width: 95px;
  height: 0;
  padding: 86px 0 0 0;
  overflow: hidden;
}
#categoryNav ul {
  float: left;
  margin: 0 0 0 10px;
  height: 85px;
  list-style: none;
  background: #284895;
}
#categoryNav ul li {
  float: left;
  margin: 18px 2px;
  width: 46px;
  height: 46px;
  cursor: pointer;
}
#categoryNav ul li.btnLarge{
  margin: 12px 2px;
  width: 58px;
  height: 58px;
}
#categoryNav ul #genreAllButton{
  margin: 12px 5px 0 0;
}

#categoryNav ul li:hover img{
  opacity: 0.85;
  -moz-opacity: 0.85;
  filter: alpha(opacity=85);
  -ms-filter: "alpha(opacity=85)";
  -khtml-opacity: 0.85;
}
#categoryNavSP{
  display:none;
}
/* ------------------------------
 btn fix
------------------------------ */
#btnFix {
  position: absolute;
  right: 10px;
  top:130px;
  z-index: 100;
}
#btnFix li{
	margin-bottom:5px;
}
#btnFix a:hover img{
  opacity: 0.85;
  -moz-opacity: 0.85;
  filter: alpha(opacity=85);
  -ms-filter: "alpha(opacity=85)";
  -khtml-opacity: 0.85;
}
/* ------------------------------
 grid content
------------------------------ */
#gridContent {
  overflow: hidden;
  height: 0;
  list-style: none;
}
#gridContent li {
  width: 245px;
  height: auto;
  margin: 10px;
  background: #FFF;
  /* css3 */
  border-radius: 5px;
}
#gridContent li .tip {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  border-width: 12px;
  border-style: solid;
  border-bottom-color: transparent;
  border-left-color: transparent;
  opacity: 1;
  filter: alpha(opacity=100);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=100)";  /* ie 8 */
  /* css3 */
  border-top-right-radius: 5px;
}
#gridContent li:hover .tip {
  opacity: 0;
  filter: alpha(opacity=0);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=0)";  /* ie 8 */
  /* css3 */
  transition: opacity 0.3s ease;
}
#gridContent li .label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-width: 3px;
  border-style: solid;
  text-decoration: none;
  opacity: 0;
  filter: alpha(opacity=0);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=0)";  /* ie 8 */
  /* css3 */
  transition: opacity 0.3s ease;
  border-radius: 5px;
}
#gridContent li .label:hover {
  opacity: 1;
  filter: alpha(opacity=100);        /* ie lt 8 */
  -ms-filter: "alpha(opacity=100)";  /* ie 8 */
}
#gridContent li .label p {
  padding: 0 10px 0 0;
  height: 22px;
  line-height: 22px;
  text-align: right;
  color: #FFF;
  font-size: 13px;
}
#gridContent li .thumb {
  margin: 0 0 -10px 0;
}
#gridContent li .thumb img {
  /* css3 */
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
#gridContent li .data {
  clear: both;
  padding: 28px 0 10px 0;
}
#gridContent li .data .type {
  height: 22px;
  line-height: 22px;
  background: #999;
  color: #FFF;
  font-size: 12px;
  text-align: center;
  float: left;
  padding:0 5px;
}
#gridContent li .data .date {
  float: right;
  padding: 0 10px 0 0;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: #666;
}
#gridContent li .data .title {
  clear: both;
  font-size: 14px;
  font-weight:bold;
  padding:10px 10px 0 10px;
  color:#333;
}
#gridContent li .data .text {
  clear: both;
  font-size: 12px;
  padding: 10px;
  color:#555;
}
#gridContent li .linkIcon{
  position: absolute;
  bottom: 10px;
  right: 10px;
}
#gridContent .projectLink,
#gridContent .movieLink,
#gridContent .facebookLink
{
  height: 202px;
}
#gridContent .pioneerLink {
  height: 245px;
}

#gridContent li.specialLink{
  background:none;
  width: 510px !important;
  height: auto !important;
  background: none;
}
#gridContent li.specialLink img{
  border-radius: 5px;
}
#gridContent li.koukokuLink{
  background:none;
}

#gridContent li.spfnowlink{
	position:relative;
  width: 510px !important;
  height: 250px; !important;
  background: url(../image/top/spfnow_bg.png) 250px 16px no-repeat #FFF;
  border:2px solid #000;
	display:table;
}
#gridContent li.spfnowlink .spfnowMore{
	position:absolute;
	left:0;
	top:30px;
}
#gridContent li.spfnowlink .spfnowLogo{
	position:absolute;
	left:12px;
	top:100px;
}
#gridContent li.spfnowlink .spfnowContents{
	position:absolute;
	width:230px;
	vertical-align:middle;
	margin:15px;
	top:50%;
	right:0;
	-webkit-transform: translate(0%,-60%);
	-moz-transform: translate(0%,-60%);
	transform: translate(0%,-60%);
}
#gridContent li.spfnowlink .spfnowDate{
	color:#545454;
	margin-bottom:5px;
}
#gridContent li.spfnowlink .spfnowTxt{
/*	background: url(../images/top/spfnow_txt_bg.png); */
	line-height:170%;
	font-size:14px;
	font-weight:bold;
}
#gridContent li.spfnowlink .spfnowTxt a{
	color:#333;
}
#gridContent li.spfnowlink .spfnowPhoto img{
	width:80px;
	float:left;
	margin:10px 10px 0 0;
}
#gridContent li.spfnowlink .spfnowSubCopy{
	margin:10px 0 0 0;
	font-size:12px;
}
/* ------------------------------
 foundation link
------------------------------ */
#foundationLink{
  padding: 20px 0;
}
#foundationLink h4{
  font-size: 21px;
  font-weight:normal;
  text-align: center;
  background: none;
  margin:10px 0;
  padding:0;
}
#foundationLink p{
  font-size: 14px;
  line-height: 25px;
  text-align: center;
}
#foundationLinkList{
  clear: both;
  margin: 30px 0 0 0;
  text-align: center;
}
#foundationLinkList li{
  display: inline-block;
  margin: 0 10px;
}
/*ENGLISH*/
.english #categoryNav {
  background: url(../image/e/home/category_navi_bg.png);
}
.english #categoryNav.open {
  background-position: 0 -86px;
}
.english #gridContent li .data .type {
  font-size: 11px;
}
/* ------------------------------
 blogs
------------------------------ */
#blogs{
  padding: 20px 0;
  background:#EEE;
}
#blogs h4{
  font-size: 21px;
  font-weight:normal;
  text-align: center;
  background: none;
  padding:0;
  margin:10px 0;
}
#blogsList{
  clear:both;
  margin:20px auto;
  width:980px;
}
#blogsList li{
  width:310px;
  display: inline-block;
  margin: 0 5px;
  padding:0;
  font-size: 12px;
  border-radius: 5px;
  background:#FFF;
  vertical-align: top;
}
#blogsList li p{
  margin: 10px;
}
#blogsList li h5{
  margin:0 0 10px 0;
  color:#FFF;
  padding:7px 10px;
  font-size: 14px;
  background:#999;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;  
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;  
  -moz-border-radius-topright: 5px;
  font-weight:normal;
}
#blogsList li h5 a{
  color:#FFF;
}
#blogsList li dl{
  margin: 10px;
  width:275px;
}
#blogsList li dt{
  padding:3px 0 0 10px;
  background:url(../image/common/icon_arrow_right.png) no-repeat left;
}
#blogsList li dd{
  padding:0 0 3px 10px;
  border-bottom:#CCC 1px dotted;
}
#blogsList li dd:nth-child(6){
  border-bottom:none;
}
#blogsList li#OPRFBlog_en{
  width:70%;
  margin:0 15%;}
  
#blogsList li#OPRFBlog_en dl{
  width:95%;
}


/* Add 2017 **/
#gridContent li.spfnowlink{
  width: 470px !important;
  padding: 20px;
  height: auto!important;
  border:none!important;
  background: none!important;
  background: #FFF!important;
}

#gridContent li.spfnowlink .spfnowContents {
  width: 240px;
}

.spfnowLogo img {
  width: 170px!important;
  height: auto;
}

.spfnowMore img {
  width: 180px!important;
  height: auto;
}

.bnrBox {
  margin-bottom: 10px;
}

.bnrBox img {
  width: 100%;
  height: auto;
}

.btn_mail {
  width: 230px;
  float: right;
}

.btn_outline {
  width: 230px;
  float: left;
}

.spfnowBox {
  position: relative;
    border:2px solid #CCC;
    height: 250px;
    border-radius: 3px;
  background: url(../image/top/spfnow_bg.png) 200px 16px no-repeat #FFF;
}

.spfnowBox br {
  display: none;
}


#address {
  padding: 40px 0 60px;
}

#address h4 {
    font-size: 21px;
    font-weight: normal;
    text-align: center;
    background: none;
    padding: 0;
    margin: 10px 0;
}

#map {
  width: 450px;
  float: left;
}
.address_text {
  margin-top: 60px;
  width: 460px;
  float: right;
}

.mapLogo {
  margin-bottom: 20px;
}

.btnMap a{
  margin:20px 0;
  display:inline-block;
  background:#284895;
  color:#FFF;
  padding:5px 20px;
  text-decoration:none;
}