@charset "UTF-8"; 


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

html, body, .container, .header {
	height: 100%;
        
	font-size: 18px;
        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;
}


body{
margin-top:-30px!important;
}

.clearfix{
    clear:both;
}


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

.grid {
	width: 800px;
        height:600px;
        margin: 90px auto 90px auto;
	perspective: 500px; /*For 3d*/
}

.grid img{
        width:100px;
        height:100px;
        display:block;
        float:left;
}

.grid-title{
	width: 800px;
        height:600px;
        margin:50px auto 50px auto;
        background-image: url(../img/insect-logo.png);
        background-position:50% 50%;
        background-repeat:no-repeat;
        display:none;
}

.skip{
    position:fixed;
    bottom:30px;
    right:30px;
    background-color:#666666;
    padding:5px 10px;
    font-weight:bold;
    color:#ffffff;
    border-radius: 10px;   
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px;  
     font-size:12px;
}

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

.menu-area{
    height:90px;
    overflow:hidden;
}

.main-logo{
    float:left;
}

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

.next-logo{
    float:right;
}

.next-logo img{
    margin: 30px 30px 20px 30px;
    height:25px;
    
}




/* 背景 ----------------------------------------- */
    
/*	BigVideo Styles 
	You may need to adjust these styles to get this working right in your design. 

#big-video-wrap{overflow:hidden;position:fixed;height:100%;width:100%;top:0;left:0;}
#big-video-vid,#big-video-image{position:absolute;}
#big-video-control-container{position:fixed;bottom:0;padding:10px;width:100%;background:rgba(0,0,0,.25);
  -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;}
#big-video-control{width:100%;height:16px;position:relative;}
#big-video-control-middle{margin: 0 56px 0 24px;}
#big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;}
#big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;}
#big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;}
#big-video-control-bound-left{left:0;}
#big-video-control-bound-right{right:-1px}
#big-video-control-track .ui-slider-handle {opacity:0;}
#big-video-control-playhead{left:30%;}
#big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('bigvideo.png');}
#big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;}
#big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;}
#big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;}
.transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;}
.vjs-big-play-button{display:none !important;}

*/

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

.ri-grid ul {
    list-style: none;
    display: block!important;
    width: 100%!important;
    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;
}

.cover{
    background-image:url(../img/tenten.png);
}


/* Grid wrapper sizes */
.ri-grid-size-1{
	width: 55%;
}
.ri-grid-size-2{
	width: 100%;
}
.ri-grid-size-3{
	width: 100%!important;
	margin-top: 0px;
	display: block;
	margin: 0 auto 0 auto;
	text-align: center;
	padding-left: 25px;
}

/* 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:980px;
 margin: 0 auto 70px auto;
}    

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

.honbun .section-title{
margin: 50px 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: 36px;
line-height:1.35;
color:#030015;
}

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

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

.honbun .section-title2{
margin: 50px 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: 40px;
overflow: hidden;
background-color: rgba(0, 0, 0, .5);
position: fixed;
z-index: 750;
left: 0;
bottom: 0;
}

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

#fb{
margin-left:15px;
margin-top: 10px;
float:left;
}

.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:30px 0 80px 0;
width:100%;
}

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

.last-area-right-text{
float:right;    
text-align:right;
color:#666666;

font-size: 15px;
}

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

.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;
bottom:100px;
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 20px 13px;
  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: 56px;
  line-height: 56px;
  padding: 20px 20px;
  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: 30px;
  line-height: 30px;
  font-weight:bold;
  padding: 15px 20px;
  color: #fff;
  text-shadow: 0 0 1px #000;
}

.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: 20px;
  margin-left: 8px;
  margin-top: 2px;
}

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

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


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

.syousai{
    margin-bottom:30px!important;
}

.left320{
width:340px;
float:left;
}


.right660{
width:600px;
float:right;
}

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

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

.image-link-item{
margin-right: 15px!important;
margin-bottom: 15px!important;
}

.lightbox-area img{
width: 180px;
height: 180px;   
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:20px;
}
    
.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;
}


/* -------------------------------
昔のブラウザ対策
------------------------------- */

.old-orientation-alart{
width:100%;
height:100%;
background:#333333;
background:rgba(30,30,30,0.8);
position:fixed;
top:0px;
left:0px;
z-index:500000;
}

.orientation-alart{
position:relative;
width:100%;
height:100%;
}

.orientation-alart-image{
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}