@charset "UTF-8"; 


/* --------------------------------------------------------------
トップページ・共通要素
-------------------------------------------------------------- */

body {
  -webkit-text-size-adjust: 100%;
}


html, body, .container, .header {
	height: 100%;
        
	font-size: 15px;
        font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
	line-height: 1.7;
        color:#030015;
}

.clearfix{
    clear:both;
}


.wrapper{
        width:100%;
        height:auto;
}    

.main-unit{
    max-width:100%;
    margin: 0 auto;
}

.menu-area{
    height: 60px;
    overflow:hidden;
    z-index: 10;
    margin: -20px 0 10px 0;
}

.main-logo{
    float:left;
}

.menu-area img{
    margin:10px 10px 10px 10px;
    height: 50px;
}

.next-logo{
    float:right;
}

.next-logo img{
    margin: 10px 10px 20px 10px;
    height:17px;
    
}


/* 背景 ----------------------------------------- */
    




/* ri-grid ----------------------------------------- */
    
.ri-grid{
	margin: 30px auto 10px;
	position: relative;
	height: auto;
}

.ri-grid ul {
	list-style: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.ri-grid ul:before,
.ri-grid ul:after{
	content: '';
    display: table;
}

.ri-grid ul:after {
    clear: both;
}

.ri-grid ul {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
} 

.ri-grid ul li {
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-o-perspective: 400px;
	-ms-perspective: 400px;
	perspective: 400px;	
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	display: block;
	overflow: hidden;
	background: #000;
}

.ri-grid ul li a{
	display: block;
	outline: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #333;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* Grid wrapper sizes */
.ri-grid-size-1{
	width: 55%;
}
.ri-grid-size-2{
	width: 100%;
}
.ri-grid-size-3{
	width: 100%;
	margin-top: 0px;
}

/* Shadow style */
.ri-shadow:after,
.ri-shadow:before{
	content: "";
	position: absolute;
	z-index: -2;
	bottom: 15px;
	left: 10px;
	width: 50%;
	height: 20%;
	max-width: 300px;
	max-height: 100px;
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	transform: rotate(-3deg);
}
.ri-shadow:after{
	right: 10px;
	left: auto;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
}

.ri-grid-loading:after,
.ri-grid-loading:before{
	display: none;
}

.ri-loading-image{
	display: none;
}

.ri-grid-loading .ri-loading-image{
	position: relative;
	width: 30px;
	height: 30px;
	left: 50%;
	margin: 100px 0 0 -15px;
	display: block;
}


/* 昆虫の名前の追加 ----------------------------------------- */

.grid-comment{
display:none;
width:100%;
height:100%;
}

.grid-comment-inner{
width:100%;
height:100%;
background-color:rgba(60,60,60,0.75);
color:#ffffff;
overflow:hidden;
display:table;
}

.grid-comment p{
display:table-cell;
text-align:center;
vertical-align:middle;
line-height:1.5em;
font-weight:bold;
font-size:18px;
}


/* コンテンツエリア ----------------------------------------- */

.area980{
 width: 100%;
 margin: 0 auto 20px auto;
 padding: 0 10px;
}    

.honbun{
/* padding-top: 30px; */
/* padding-bottom: 30px; */
margin: 0px auto 0;
padding:0px 10px 0 10px;
/* width:980px; */
overflow:hidden;
}

.honbun .section-title{
margin: 10px 0 10px 0;
/*background-image:url(http://www.kobe-np.co.jp/rentoku/sinsai/graph/img/honbun-section-midashi-image.png);
background-position:top left;
background-repeat:repeat-y;　*/
overflow: hidden;
}

.honbun .section-title p{
padding: 0px 0px;
font-size: 24px;
line-height: 1.35;
color:#030015;
}

.left470{
width:470px;
float:left;
}

.right470{
width:470px;
float:right;
}

.honbun .section-title2{
margin: 20px auto 10px auto;
/*background-image:url(http://www.kobe-np.co.jp/rentoku/sinsai/graph/img/honbun-section-midashi-image.png);
background-position:top left;
background-repeat:repeat-y;　*/
overflow: hidden;
}

.honbun .section-title2 p{
padding: 0px 0px;
font-size: 24px;
line-height:1.35;
color:#030015;
}

.border-dotted{
border-top:1px solid #bbbbbb;    
}



/* リストビュー ----------------------------------------- */

.list-box {
  border-bottom: 1px solid #bbbbbb;
  display: table;
  width: 100%;
}


.list-img{
  display: table-cell;
  vertical-align: middle;
  line-height: 1;
  margin: 0;
  padding: 0;
}


.list-text {
  display: table-cell;
  vertical-align: middle;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}
.list-img img {
  width: 80px;
  margin: 5px 10px 3px 5px;
  border-radius: 5px;  
-webkit-border-radius: 5px; 
-moz-border-radius: 5px;  
}
.list-cat1 {
  background-color: #085A16;
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  padding: 3px 6px;

}

.list-cat2 {
  background-color: #EB61EF;
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  padding: 3px 6px;
}

.list-date {
  color: #444444;
  font-size: 12px;
  margin-left: 5px;
}
.list-title {
  font-size: 16px;
  line-height: 2.0;
  margin-right: 10px;
}



/* フッター表示 ----------------------------------------- */

.footer {
width: 100%;
height: 70px;
overflow: hidden;
background-color: rgba(0, 0, 0, .5);
}

#twt{
margin-left: 20px;
margin-top: 15px;
}

#fb{
margin-left: 20px;
margin-top: 00px;
}

.backlink{
float: right;
margin-right: 20px;
}

.backlink a{
color:#ffffff;
height: 40px;
line-height:40px;
font-size:14px;
font-weight:bold;
text-decoration:none;
}

.last-section{
background-color:#E6E7E6;
padding:20px 0 0px 0;
width:100%;
overflow:hidden;
}

.last-area-left-text{
float:left;
color:#666666;
}

.last-area-right-text{
text-align:right;
color:#666666;
font-size: 13px;
}

.last-area-right-text img{
margin-top:20px;
margin-bottom:20px;
width:140px;
}

.copy-text{
/* margin-top:20px; */
margin-bottom:20px;
border-top:1px solid #bbbbbb;
text-align:right;    
font-size: 13px;
color: #666;  
}




/* --------------------------------------------------------------
詳細記事ページ
-------------------------------------------------------------- */


.front-detail-area{
position:absolute;
top:60px;
left:0;
}

.front-detail-catting {
  background: #000;
  background: rgba(0,0,0,0.8);
  display: inline-block;
  font-size: 20px;
  line-height: 20px;
  padding: 10px;
  margin-bottom:15px;
  color: #fff;
  text-shadow: 0 0 1px #fff;
}

.front-detail-title {
  background: #000;
  background: rgba(0,0,0,0.8);
  display: inline-block;
  font-size: 26px;
  line-height: 26px;
  padding: 10px 10px;
  margin-bottom:15px;
  color: #fff;
  font-weight:bold;
  text-shadow: 0 0 1px #000;
}


.front-detail-name {
  background: #000;
  background: rgba(0,0,0,0.8);
  display: inline-block;
  font-size: 16px;
  line-height: 16px;
  font-weight:bold;
  padding: 15px 20px;
  color: #fff;
  text-shadow: 0 0 1px #000;
  width:100%;
  text-align:right;
}

.front-detail-cat1 {
  background-color: #085A16;
  border-radius: 10px;
  color: #fff;
  font-size:16px;
  padding: 5px 9px;

}

.front-detail-cat2 {
  background-color: #EB61EF;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  padding: 3px 6px;
  margin-left:15px;
}

.front-detail-date {
  color: #ffffff;
  font-size: 16px;
  margin-left: 8px;
  margin-top: 2px;
}

.front-detail-name-a {
  color: #fff;
  font-size: 14px;
  margin-left: 10px;
  text-shadow: 0 0 1px #000;
}

.front-detail-name-b {
  color: #fff;
  font-style: oblique; 
  font-size: 14px;
  margin-left: 10px;
  text-shadow: 0 0 1px #000;
}


.front-detail-scrolldown{
    position:absolute;
    bottom:0px;
    width:100%;
    text-align:center;
    
}

.syousai{
margin-top:25px!important;
margin-bottom:5px!important;
}

.syousai2{
margin-top:25px!important;
margin-bottom:25px!important;

}

.left320{
width:100%;
text-align:center;
}


.right660{
width:100%;
}

.right660 .honbun-text{
line-height: 1.6;       
}

.lightbox-area{
margin-top:30px;
margin-bottom:30px;
}

.image-link-item{
margin-left: 2%!important;
margin-right: 2%!important;
margin-bottom: 10px!important;
}

.lightbox-area img{
width: 45%;
margin:0;
padding:0;
border-radius: 7px;  
-webkit-border-radius: 7px; 
-moz-border-radius: 7px;  
}

.sankoubunken{
margin-top:0;
}

.sankoubunken ul{
padding:0!important;
  -webkit-padding-start: 0px!important;

}

.sankoubunken li{
margin-bottom:20px;
}

.paddingtop40{
padding-top:40px;   
}

.margintop50{
/* margin-top:50px; */    
}

.float-left{
/* float:left; */
}

.video{
width:600px;
}

.catting-general-canvas{
text-align:center;
border-bottom:1px dotted #999;
padding-bottom:10px;
padding-top:10px;
}
    
.catting-general-canvas .front-detail-cat1 {
  background-color: #ceded0;
  border-radius: 10px;
  color: #085A16;
  font-size:16px;
  padding: 5px 9px;

}

.catting-general-canvas .front-detail-date {
  color: #666;
  font-size: 18px;
  padding: 3px 6px;
  margin-left:0;
  font-weight:bold;

}

.canvas_chart {
text-align:center;
}


/* -- ローディング --     */

.loading{
    text-align:center;
    margin:200px auto;
    overflow:hidden;
    
}