@charset "utf-8";
/* CSS Document */

/*===============
base
=================*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
form,input,p,blockquote,th,td {
margin:0;
padding:0;
}  
img{
border:0;
vertical-align: top;
}

body{
font-size: 100%;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
line-height:1.4;
color:#333;
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
body{
min-width: 320px;
}
}

a:link,
a:visited,
a:active{
color:#036;
text-decoration:none;
}

a:hover{
color:#069;
text-decoration:none;
}

ul,ol{
list-style: none;
}

/*clearfix*/
.clearfix:after{  
visibility:hidden;/*見えなくする*/ 
height:0;/*見えなくする*/
display: block;/*block要素にする*/
font-size: 0;  
content: " ";  
clear: both;  

}  
* html .clearfix             { zoom: 1; } /* IE6 */  
*:first-child+html .clearfix { zoom: 1; } /* IE7 */




p,dd{
font-size:1.2em;
}

/*footerの背景指定*/
html{
background-color:#0099CC;
}

.nonpc{
display: none;
}

.pc{
display:block;
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
.nonpc{
display:block;
}
.pc{
display:none;
}
}

/*==================
header
====================*/

#header{
width:100%;
background:url(../images/header_bg.gif) repeat-x left bottom;
height: 71px;
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#header{
background:none;
}
}

#header_top{
padding:25px 0;
width:960px;
margin:0 auto;
} 

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#header_top{
width:100%;
} 
}

/*header左側の設定*/

#logogroup{
width:700px;
float:left;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#logogroup{
width:330px;
padding-left:30px;
} 
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#logogroup{
width:300px;
padding: 0 10px;
}
}


/*header右側の設定*/

#subnav{
width:260px;
float:right;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#subnav{
width:200px;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#subnav{
width:200px;
margin: 15px 10px 0;
float: left;
}
}

#subnav li{
float:left;
font-size:1.1em;
}

#subnav li.sitemap{
background:url(../images/icon_sitemap.gif) no-repeat 0 2px;
padding:0 0 0 15px;
margin:0 24px 0 0;
}

#subnav li.rss{
background:url(../images/icon_rss.gif) no-repeat 0 1px;
padding:0 0 0 16px;
}

/*グローバルナビゲーション*/

#nav{
width:960px;
margin:0 auto;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#nav{
width:768px;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#nav{
width:100%;
}
}

#nav li{
float:left;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#nav li{
padding-bottom: 10px;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#nav li{
float:left;
padding-bottom: 20px;
padding-left: 10px;
}
}


/*==================
contents
====================*/
#contents{
width:920px;
margin:0 auto;
padding-bottom: 20px; 
min-height: calc(100% - 203px);
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#contents{
width:768px;
padding-bottom: 20px;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#contents{
width:100%;
padding-bottom: 20px;
}
}

#info{
width:685px; 
float:left;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#info{
width:768px;
margin: 0 auto;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#info{
width:100%;
}
}

#sidebar{
width:235px;
float:right;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#sidebar {
width:768px;
margin: 0 auto;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#sidebar{
width:100%;
}
}

/*イベント情報*/

#info h2{
background:url(../img/i_object.jpg) no-repeat 0 0;
padding:0 0 3px 25px;
line-height:29px;
border-bottom:1px solid #CCC;
margin:25px 26px 0 0;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#info h2{
margin:25px 0 0 0;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#info h2{
background:url(../img/i_object.jpg) no-repeat 10px 0;
padding:0 0 3px 30px;
}
}

#info h3{
font-size:1.5em;
/*
background:url(../../img/common/blue_btn_02.gif) no-repeat 0 2px;
padding-left:18px;
*/
margin:20px 0 10px 0;
line-height:150%;
padding-left: 1.2em;
position:relative;}
#info h3:before{
content: "\f054";
font-family: FontAwesome;
color: #069;
position:absolute;
	left:0;
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#info h3{
/*
background:url(../../img/common/blue_btn_02.gif) no-repeat 10px 2px;
*/
padding-left: 1em;
margin-left: 5px;
}
}

.section{
width:316px;
float:left;
margin-right:26px;
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
.section{
/*
width:128px;
float:left;
margin-right:26px;
*/
width:100%;
margin-right:0;
padding-bottom: 1em;
border-bottom:solid 1px #CCC;
}
.section p{
	padding-right:10px;
}
}


/*更新情報*/


#event img{
float:left;
margin-right:10px;
/*
border:1px solid #ccc;
*/
padding:1px;
}
.asp{
	float: left;
    margin-right: 10px;
/*
    border: 1px solid #ccc;
*/
    padding: 1px;
	}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#event img{
margin:0 10px;
}
}


/*==================
sidebar
====================*/

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#sideber,
#sidebox{
	width:768px;
	float:left;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#sideber,
#sidebox{
	width:100%;
}
}

#name{
margin-top:25px;
/*background: url(../images/bg_title_01.gif) repeat;*/
}
#name h2{
color: white;
font-size: 2.5em;
}
#name p{
color: white;
margin: 0;
padding: 0;
background-color: #006699;
}

@media screen and (max-width: 768px){
#name{
margin-top:25px;
/*background: url(../images/bg_title_01.gif) repeat;*/
}

}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#sidebar h2{
padding-left:25px;
text-align:center;
margin:0 10px;
}
}

#sidebar p{
border:1px solid #ccc;
border-top:none;
padding:10px 7px 10px 10px;
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#sidebar p{
margin:0 10px;
}
}

#bnrarea{
margin-top:20px;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#bnrarea{
margin-top:24px;
float:left;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#bnrarea{
text-align:center;
width: 100%;
}
}

#bnrarea li{
margin-bottom:10px;
border:1px solid #ccc;
padding:1px;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#bnrarea li{
margin:20px 30px 10px 0;
float:left;
}
#bnrarea li:last-child{
	margin-right:0;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#bnrarea li,
#bnrarea li:last-child{
margin:20px auto;
width:231px;
float: none;
}
}

/*==================
footer
====================*/
#footer{
width:100%;
margin:0 auto;
background-color:#0099CC;
height:60px;
/*
background:#dedede url(../images/footer_bg.gif) repeat-x;
margin-top:60px;
text-align:right;
    background-image: url(../../img/common/foot.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
*/
}

#footer_inner{
width:960px;
margin:0 auto;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#footer_inner{
width:100%;
}
}
*/
/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#footer_inner{
width:100%;
}
}

#footer_inner address{
padding:15px 0 4px;
font-size:1.2em;
}

/*タブレットのウインドウサイズ（1024px）以下の場合の指定*/
/*
@media screen and (max-width: 1024px){
#footer_inner address{
padding:15px 15px 4px;
}
#footer_inner p{
padding:0 15px 15px;
font-size:1.2em;
}
}
*/


/*==================
list.html
====================*/

#list img{
margin-right:10px;
border:1px solid #ccc;
padding:1px;
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#list img{
margin:0 10px;
}
}

.listsection{
padding:0 10px 3px 10px;
border-bottom:1px solid #CCC;
margin:25px 26px 0 0;
}

.listsection li{
background:url(../../img/common/grey_btn_02.gif) no-repeat 0 2px;
padding:0 0 0 15px;
margin:0 24px 0 0;
}

#list td{
padding: 5px;
margin: 5px;
font-size: 12px;
}
#list td p{
font-size: 12px;
}



/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
.listsection{
/*
width:128px;
float:left;
margin-right:26px;
*/
width:100%;
margin-right:0;
border-bottom:solid 1px #ccc;
}
.section p{
	margin-left:10px;
	padding-right:10px;
}
}

.product{
font-size:1.5em;
padding-left:18px;
margin:20px 0 10px 0;
background-color: #069;
color: white;
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
.product{
padding-left:28px;
background-color: #069;
color: white;
}
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
.old{
	font-size: 14px;
	width:100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.old p:first-child{
	width:150;
}
.old p:last-of-type{
/*
	vertical-align: middle;
*/
}
.old p{
	}
	}


/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
#regist{
	display: none
	font-size: 12px;
	width:100%;
/*
	display: flex;
	align-items: center;
*/
	margin: 5px 0;
	padding: 5px 0;
/*
	border-bottom: dotted 1px #CCC;
*/
}
#regist p:first-child{
	width:180px;
}
#regist2{
	font-size: 12px;
	width:100%;
/*
	display: flex;
	align-items: center;
*/
}
#regist2 p:first-child{
	width:180px;
}
}

#regist{
	font-size: 12px;
	width:100%;
/*
	display: flex;
	align-items: center;
*/
	margin: 5px 0;
	padding: 5px 0;
/*
	border-bottom: dotted 1px #CCC;
*/
}
#regist p:first-child{
	width:180px;
}
#regist2{
	font-size: 12px;
	width:100%;
/*
	display: flex;
	align-items: center;
*/
}
#regist2 p:first-child{
	width:180px;
}


.redl{
float: right;
}
.serial{
float: left;
}
.genre{
float: left;
}
.os{
float: left;
}
.date{
float: right;
}

input[type="image"] {
float:left;
margin-top: -5px;
margin-right:10px;
padding:1px;
width: 40px;
}

#mini_navi {
    float: right;
    padding-top: 0px;
}
#header {
    background-image: url(../../img/common/head_back.jpg);
    background-repeat: no-repeat;
    background-position: right top;
}
#foot-link {
	color: white;
    text-align: right;
    padding-bottom: 0px;
    margin-left: 0px;
}
#foot-link a:link,
#foot-link a:visited,
#foot-link a:active{
color:white;
text-decoration:none;
}

#foot-link a:hover{
color:white;
text-decoration:none;
}



/*各種ボタン用指定*/
/*
.square_btn:link,
.square_btn:visited,
.square_btn:active,
*/
.square_btn{
	padding: 10px 30px;
	margin:10px;
    position: relative;
    display: inline-block;
	border-radius: 7px;
    font-weight: bold;
	font-size: 16px;
    text-decoration: none;
	color: #036;
    background: #ECECEC;
    transition: .4s;
  }

.square_btn:hover {
    color: white;
    background: #00bcd4;
}
.textlink{
	padding: 10px 0px;
	margin:10px;
    font-weight: bold;
	font-size: 16px;
    text-decoration: none;
	color: #036;
}
.textlink:hover {
    color: #900;
}

/*画面左上ロゴ*/
.rogo {
    margin-left: 16px;
    margin-top: 15px;
    float: left;
}

.i_caution
{
	color:#FF0000;
}


#sample1 {
  position:relative;
}
.sample1-tooltips {
  display: none;
  position: absolute;
  bottom: -7.5em;
  left: 0.3em;
  z-index: 9999;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  background: #c72439;
  border-radius: 0.5em;
}
.sample1-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 31.5em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}

/*スマートフォンのウインドウサイズ（768px）以下の場合の指定*/
@media screen and (max-width: 768px){
.sample1-tooltips {
  display: none;
  position: absolute;
  bottom: -9em;
  left: 0.3em;
  z-index: 9999;
  padding: 0.3em 0.5em;
  color: #FFFFFF;
  background: #c72439;
  border-radius: 0.5em;
}
.sample1-tooltips:after {
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  left: 19em;
  top: -8px;
  border-top:8px solid transparent;
  border-left:8px solid #c72439;
}
}
#sample1 li:hover .sample1-tooltips {
  display: block;
}

/**/
.bicon {
    height:1.1em;
    vertical-align:-0.2em;
}