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

@media screen and (min-width: 320px) and (max-width: 1280px)/*タブレット・PC等*/
{
/*サイト全体の横幅*/

#container
{
width: 100%;
}


#main
{
margin-top:70px;
}

#inner
{
}

/*パンくずリストのCSSここから*/

#topic_path
{
margin-bottom:50px;
}

#topic_path li
{
float:left;
font-size:12px;
margin-right:5px;
}

#topic_path li a,#topic_path li a:visited
{
font-size:12px;
color:#9BA2AA;
text-decoration:none;
margin-right:5px;
}

#topic_path li a:hover
{
font-size:12px;
color:#333;
text-decoration:none;
margin-right:5px;
}

/*パンくずリストのCSSここまで*/

/*メニューバーのCSSここから*/

#sub
{
width:100%;
background-color:#FFF;
position:fixed;
top:0;
z-index:999;
border-bottom:1px solid #D6D6D6;
margin-bottom:15px;
}

#site_logo
{
padding:10px;
margin:0;
width:171px;
height:40px;
float:left;
}

/* クリックエリアと位置を指定 ---------------------- */
.btnHamburger {
  position: fixed;
  top: 0;
  right: 0;
  margin-left: -25px;
  width: 60px; /* クリックエリアの横幅*/
  height: 60px; /* クリックエリアの高さ*/
  cursor: pointer;
}

/* 3本線の1本ごとに共通するスタイルを指定 ---------------------- */
.btnHamburger .line {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px; /* 横幅 */
  height: 3px; /* 1本辺りの高さ */
  background: #000; /* 線の色 */

  /* 適用するプロパティ、変化する時間、変化する速度 */
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
 }

/* 3本線の各線の位置を指定 ---------------------- */
.btnHamburger .line_01 { top: 14px; }
.btnHamburger .line_02 { top: 24px; }
.btnHamburger .line_03 { top: 34px; }



/* 最上部の線のスタイル ---------------------- */
.btnHamburger.is-active .line_01 {
  top: 24px; /* 上から2番目の線の位置に変更 */

  /* 線を45度回転 */
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 上から2番目の線のスタイル ---------------------- */
.btnHamburger.is-active .line_02 {
  opacity: 0; /* 不透明度を下げて線を消す */
}

/* 最下部の線のスタイル ---------------------- */
.btnHamburger.is-active .line_03 {
  top: 24px; /* 上から2番目の線の位置に変更 */

  /* 線を135度回転 */
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.gloval_menu_box
{
width:320px;
background-color:#444;
position:fixed;
top:60px;
right:0;
display:none;
}

.category_menu_medium
{
transition: background-color 0.5s linear 0.1s;
cursor:pointer;
border-bottom:1px dotted #FFFFFF;
}

.category_menu_1st_medium
{
transition: background-color 0.5s linear 0.1s;
cursor:pointer;
}

.category_menu_1st_medium:hover,.category_menu_medium:hover
{
background-color:#333;
cursor:pointer;
}

.category_menu_1st_list_medium,.category_menu_list_medium
{
cursor:pointer;
}

.category_menu_1st_title_medium,.category_menu_title_medium
{
padding:10px 20px 10px 20px;
font-size:12px;
display:block;
cursor:pointer;
color:#FFF;
}

.category_menu_1st_medium a:link,.category_menu_medium a:link
{
font-size:12px;
color:#FFF;
text-decoration:none;
}

.category_menu_1st_medium:hover a,.category_menu_medium:hover a
{
font-size:12px;
color:#FFF;
text-decoration:none;
}

.category_menu_1st_medium a:visited,.category_menu_medium a:visited
{
font-size:12px;
color:#FFF;
text-decoration:none;
}

.category_menu_2nd_medium
{
width:100%;
}

.category_menu_2nd_list_medium
{
transition: background-color 0.5s linear 0.1s;
background-color:#444;
border-top:1px dotted #FFFFFF;
}

.category_menu_2nd_list_medium:hover
{
background-color: #333;
}

.category_menu_2nd_title_medium
{
font-size:12px;
display:block;
cursor:pointer;
padding:10px 20px 10px 50px;
}

.category_menu_3rd_medium
{
width:100%;
}

.category_menu_3rd_list_medium
{
transition: background-color 0.5s linear 0.1s;
background-color:#444;
border-top:1px dotted #FFFFFF;
}

.category_menu_3rd_list_medium:hover
{
background-color: #333;
}

.category_menu_3rd_title_medium
{
padding:10px 35px 10px 80px;
font-size:12px;
display:block;
cursor:pointer;
}

/*メニューバーのCSSここまで*/

/*フッターのCSSここから*/

#footer
{
width:100%;
background-color:#000;
opacity:0.8;
padding:10px 0 10px 0;
text-align:center;
}

#footer p
{
color:#FFF;
font-size:12px;
line-height:12px;
}

.to_top_mark
{
width:30px;
position:fixed;
right:10px;
bottom:60px;
}

.to_top_mark img
{
display:block;
padding:0;
margin-bottom:5px;
}

/*フッターのCSSここまで*/

/*固定フッター（SNSボタン）のCSSここから*/

#footer_sns
{
width:100%;
background-color:100%;
background-color:#333;
padding:5px 0 5px 0;
position:fixed;
bottom:0;
}

.circle_group
{
width:320px;
margin:0 auto;
}

.sns_circle
{
position:relative;
width:30px;
height:30px;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
float:left;
list-style:none;
transition: all 1s ease;
-webkit-transition: all 1s ease;
margin:0 5px 0 5px;
}
 
/* Webフォントに関する指定 */
.sns_circle span
{
position:absolute;
padding:7px;
font-size:16px;
line-height:16px;
color:#FFF;/* 文字の色 */
}
 
/* リンク領域をブロック全体に */
.sns_circle a
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
text-indent:-999px;
color:#FFF;/* 文字の色 */
}
 
/* マウスオーバー */
.sns_circle:hover
{
transform: rotate(675deg);
-webkit-transform: rotate(675deg);
} 
 
/* アイコン毎の配色と配置 */
.sns_circle.feedly
{
background-color: #6CC655;
}
 
.sns_circle.facebook
{
background-color: #265a96;
}
 
.sns_circle.twitter
{
background-color: #00acec;
}
 
.sns_circle.hatebu
{
background-color: #006fbb;
}
 
.sns_circle.pocket
{
background-color: #EE4256;
}
 
.sns_circle.googleplus
{
background-color: #dd4b39;
}
 
.sns_circle.line
{
background-color: #2cbf13;
}
 
.sns_circle.feed
{
background-color: #ff9900;
}
 
.sns_circle.youtube
{
background-color: #e22d26;
}

/*固定フッター（SNSボタン）のCSSここまで*/

}

@media screen and (max-width: 1000px)/*スマートフォン*/
{
	
/*オーバーレイ広告のCSSここから*/

#overlay
{
position:fixed;
bottom:0;
background:#333;
width:100%;
}

.overlay_ad
{
display:block;
padding:0;
margin:0 auto;
width:100%;
max-width:468px;
height:auto;
}

#overlay img
{
display: block;
padding:0;
}

/*オーバーレイ広告のCSSここまで*/
	
}