@charset "UTF-8";

body {
  font-family: Arial, Roboto, 'Droid Sans', '游ゴシック', YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  margin: 0;
  padding: 0;
  z-index: 0;
  width: 100%;
  background-color: transparent;
}

/* ============================================
   PC用（画面の横幅が769px以上）
===============================================*/
@media screen and (min-width: 769px){

/* ～以下、画面の横幅が768pxまでの場合のスタイル記入～ */


.sb-slidebar *,
.smart * {
  display: none;
}

/* ==================================== */
/* イメージ（広告） */

#image {
  position: relative;
  float: none;
  margin: 80px 0 0 0;
  padding: 0;
  top: 0px;
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
  line-height: 1em;
  font-size: 20px;
  color: #000000;
  background-color: transparent;
  z-index;1;
}
.slider{
    margin: 0 auto;
    padding: 0;
    width: 80%;
}
.slider img{
    height: auto;
    width: 100%;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}
/* ==================================== */
/* グローバルメニュー関連 */
#g_nav {
  display: block;
  position: static;
  top: 0px;
  width: 100%;
  height: 40px;
  padding: 0;
  margin: 5px 0;
  background-color:  transparevt;
  overflow: hidden;
  text-align: right;  
  z-index: 1;
}
#g_nav a {
  display: inline-block;
  float: right;
  position: relative;
  color: #ffffff;
  background-color: transparevt;
  width: 100px;
  height: 36px;
  padding: 0;
  margin: 2px;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  line-height: 36px;
  z-index: 1;
}
#g_nav a.g_nav_bt:hover{
  color: #000000;
  background-color: transparevt;
}

/* ==================================== */
/* ヘッダー（ロゴ）*/
#header {
  position: absolute;
  display: block;
  margin: 0;
  padding: 10px 0 0 10px;
  float: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80px;
  overflow: hidden;
  text-align: left;
  line-height: 1em;
  font-size: 50px;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
  border-bottom: solid 4px #000000;
  z-index: 0;
}
#header a{
  text-decoration: none;
  color: #ffffff;
}
/* ==================================== */
/* サブメニュー関連 */
#s_nav {
  display: block;
  position: absolute;
  top: 50px;
  width: 100%;
  height: 34px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: transparent;
  z-index: 1000;
}
#s_nav a.s_nav_bt {
  position: relative;
  display: inline-block;
  text-decoration: none;
  float: right;
  color: #000000;
  width: 100px;
  height: 30px;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
}

#s_nav a.s_nav_bt::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 4px;
  background: transparent;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
#s_nav a.s_nav_bt:hover::after {
  transform: scale(1, 1);
}

/* ================== */
/* メインメニュー関連 */
#menu {
  position: relative;
  display: inline-block;
  text-decoration: none;
  float: none;
  width: 90%;
  height: 80px;
  padding: 0 5%;
  margin: 0;
  background-color:  transparevt;
  overflow: hidden;
  text-align: center;  
  z-index: 1;
}
#menu a {
  display: inline-block;
  float: left;
  position: relative;
  color: #ffffff;
  background-color: #efefef;
  width: 33%;
  height: 80px;
  padding: 0;
  margin: 0 ;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 80px;
  z-index: 1;
}
#menu a#prop {
  background-color: #5191FD;
}
#menu a#balance {
  background-color: #F6A615;
}
#menu a#visual {
  background-color: #D82732;
}
#menu a:hover{
  color: #000000;
  background-color: transparevt;
}




/* ================ */
/* トップメッセージ */
#message {
  position: absolute;
  top: 80px;
  display: block;
  text-decoration: none;
  float: none;
  color: #000000;
  width: 90%;
  height: 700px;
  margin-bottom: 100px;
  padding: 5%;
  font-size: 1.2em;
  line-height: 1.5em;
  text-align: left;
}
#message h1{
  font-family: 'M PLUS 1c';
  font-size: 80px;
  line-height: 85px;
  font-weight: Black 900;
}




/* ================ */
/* 情報表示欄 */
#info {
  position: absolute;
  top: 80px;
  display: block;
  text-decoration: none;
  float: none;
  color: #000000;
  width: 90%;
  height: 90%;
  margin-bottom: 100px;
  padding: 5%;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: center;
}
#info img{
  background-color: #666666;
  width: 80%;
  object-fit: contain;
}

/* ==================================== */
/* アクティブマトリックスの領域（外枠） */
#am_waku {
  position: relative;
  float: none;
  margin-bottom: 100px;
  padding: 0;
  width: 100%;
  min-height: 250px;
  overflow: auto;
  text-align: center;
  z-index;90;
  background-color: transparent;
}
/* アクティブマトリックス（検索） */
#am_search {
  display: none;
  position: relative;
  float: none;
  margin: 3% auto;
  padding: 0;
  width: 50%;
  height: 40px;
}
#am_search input{
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 1em;
  font-size: 20px;
  color: #ffffff;
  background-color: transparent;
}
/* アクティブマトリックス（ジャンルタブメニュー） */
#am_select ul {
  display: none;
  position: relative;
  float: none;
  margin: 0 auto 10px 10px;
  padding: 0;
  width: auto;
  height: 40px;
  text-align: center;
  list-style-type: none;
  background-color: transparent;
}
#am_select ul li{
  position: relative;
  float: left;
  margin: 0 1px;
  padding: 5px;
  width: 106px;
  max-width: 200px;
  height: 40px;
  text-align: center;
  line-height: 1em;
  font-size: 18px;
  color: #666666;
  z-index: 1;
  background-color:#cfcfcf;
}
#am_select ul li.select,
#am_select ul li.select:hover{
  background:#ffffff;
  font-weight:bold;
  color:#000000;
  z-index: 5;
}
#am_select ul li:hover{
  background:#ffffff;
  font-weight:bold;
  color:#000000;
  z-index: 2;
}

/* アクティブマトリックス（コンテンツBOX表示） */
#am_waku #list {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 250px;
  color: transparent;
  text-align: center;
  z-index: 200;
}


/* 画像時 */
#am_waku #list .vdoff {
  float:left;
  height: 300px;
  width: 24.5%;
  margin: 0;
  overflow:hidden;
  background-color: transparent;
  border: solid 1px #ffffff;
}
#am_waku #list .vdoff img {
  float:none;
  min-width: 20%;
  max-height: 150px;
  margin: 0;
  padding: 0;
}

/* 文字関係 */
.vdoff a,
.vdon a {
  text-decoration: none;
  color: #000000;
}
p.title {
  float: none;
  display: none;
  width: 100%;
  margin: 0 5%;
  color: #000000;
  text-align: center;
  text-decoration: none;
}
p.title:hover {
  color: #000000;
  font-weight: bold;
}

.vdoff p,
.vdon p{
  float: none;
  width: 90%;
  margin-top: 10px;
  color: #000000;
  text-align: left;
}

.vdoff p.title,
.vdon p.title{
  display: inline-block;
  text-align: center;
  font-size: 20px;
  line-height: 26px;
}
.vdoff p.date,
.vdon p.date{
  display: none;
  min-height: 11px;
  font-size: 9px;
  line-height: 1em;
}
.vdoff p.comment,
.vdon p.comment{
  display: block;
  margin: 10%;
  width: 80%;
  text-align: left;
  font-size: 1em;
  line-height: 1.2em;
/*はみだす長文をマスクする*/
	white-space: nowrap;
	overflow:hidden;
	text-overflow: ellipsis;
	-webkit-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
}
.vdon p.comment{
	text-overflow: auto;
}
.vdoff p.comment img,
.vdon p.comment img{
  display: block;
  margin: 0 auto;
  height: 40px;
}

/* ビデオ時 */
#am #list .vdon {
  display: none;
  float:left;
  height: 350px;
  width: 250px;
  margin:10px;
  overflow:hidden;
  background-color: transparent;
  border: solid 1px #ffffff;
   z-index: 300;
}
#am #list .vdon * video {
  float:left;
  width: 100%;
  height: 140px;
  margin-bottom: 8px;
  padding: 0;
  z-index: 400;
}


/* ==================================== */
/* フッター */
#footer{
  position: fixed;
  float: none;
  diaplay: block;
  margin: 0;
  padding: 0;
  bottom: 0px;
  width: 100%;
  height: 20px;
  overflow: hidden;
  text-align: center;
  line-height: 2em;
  font-family: '游ゴシック', 'Yu Gothic', YuGothic, メイリオ, 'Noto Sans Japanese', 'Lucida Grande', 'bitstream vera sans', 'trebuchet ms', sans-serif, verdana;
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  border-top: solid 4px #000000;
  z-index: 100;
}
#footer .submenu {
  width: 100%;
  height: 30px;
  margin: 0 0 15px 0;
  padding: 0;
}
#footer .submenu a{
  display: block;
  float: left;
  margin: 7.5px 35px;
  padding: 0;
  height: 15px;
  width: auto;
  text-decoration: none;
  line-height: 15px;
  font-size: 15px;
  color: #ffffff;
  background-color:transparent;
}

/* ==================================== */
/* SNS関連 */
#sns {
  position: relative;
  width: 100%;
  height: 160px;
  float: none;
  margin:0;
  padding: 16px;
  top: 0px;
  overflow: hidden;
  text-align: left;
  line-height: 1em;
  font-size: 30px;
  color: #ffffff;
  background-color: transparent;
  z-index;10000;
}
#sns span.snslink {
  float:right;
  width:150px;
}


video {
  z-index: 10000;
  display: block;
  float: left;
  width: 95%;
  height: auto;
  padding: 20px;
}




}

/*===============================================
●スマホ・小タブレット用 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){

body{
  width: 100%;
}

/* ==================================== */
/* スマホ用スライドメニュー関連 */
.sb-slidebar ul{
  list-style: none;
  background-color: #efefef;
  z-index: 100;
}
.sb-slidebar ul li{
  display: block;
  margin: 0;
  padding-left: 10px;
  width: 100%;
  height:42px;
  font-size: 20px;
  line-height: 42px;
  text-align: left;
  background-color: #efefef;
  z-index: 100;
}
.sb-slidebar ul li:hover{
  background-color: #dfdfdf;
  font-weight: bold;
}
.sb-slidebar ul li a{
  text-decoration: none;
  color: #000000;
  z-index: 100;
}
/* ハンバーガーアイコン関連 */
.smart{
  position: fixed;
  float: none;
  diaplay: block;
  margin: 5px;
  padding: 0;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 40px;
  list-style: none;
  color: #ffffff;
  z-index: 100;
}
.smart * img {
  width: 40px;
  height: 40px;
}
/* ==================================== */
/* スライダー */
#image {
  position: relative;
  float: none;
  margin: 20px 0 0 0;
  padding: 0;
  top: 0px;
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
  line-height: 1em;
  font-size: 20px;
  color: #000000;
  background-color: transparent;
  z-index;1;
}

.slider{
    margin: 0;
    padding: 0;
    width: 100%;
}
.slider img{
    margin: 0;
    padding: 0;
    height: auto;
    width: 100%;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

/* グローバルメニュー関連 */
#g_nav {
  display: block;
  position: static;
  top: 0px;
  width: 90%;
  height: 40px;
  padding: 5px 0 0 0;
  margin: 0;
  background-color: transparevt;
  overflow: hidden;
  text-align: right;  
  z-index: 1;
}
#g_nav a {
  display: inline-block;
  float: right;
  position: relative;
  color: #ffffff;
  background-color: transparevt;
  width: 50px;
  height: 36px;
  padding: 0;
  margin: 2px;
  font-size: 16px;
  text-align: left;
  text-decoration: none;
  line-height: 36px;
  z-index: 1;
}
/* ==================================== */
/* ヘッダー（ロゴ）*/
#header {
  position: absolute;
  display: block;
  margin: 0;
  padding: 5px 0 0 5px;
  float: none;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 60px;
  overflow: hidden;
  text-align: left;
  line-height: 1em;
  font-size: 40px;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
  border-bottom: solid 4px #000000;
  z-index: 0;
}
#header a{
  text-decoration: none;
  color: #ffffff;
}
/* ==================================== */
/* サブメニュー */
#s_nav {
  display: none;
}
/* ================== */
/* メインメニュー関連 */
#menu {
  position: relative;
  display: inline-block;
  text-decoration: none;
  float: none;
  width: 90%;
  height: 80px;
  padding: 0 5%;
  margin: 0;
  background-color:  transparevt;
  overflow: hidden;
  text-align: center;  
  z-index: 1;
}
#menu a {
  display: inline-block;
  float: left;
  position: relative;
  color: #ffffff;
  background-color: #efefef;
  width: 33%;
  height: 80px;
  padding-top: 25px;
  margin: 0;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 1em;
  z-index: 1;
}
#menu a span.sub_title {
  display: inline-block;
  float: none;
  font-size: 0.7em;
  font-weight: normal;
}
#menu a#prop {
  background-color: #5191FD;
}
#menu a#balance {
  background-color: #F6A615;
}
#menu a#visual {
  background-color: #D82732;
}
#menu a:hover{
  color: #000000;
  background-color: transparevt;
}
/* ================ */
/* トップメッセージ */
#message {
  position: absolute;
  top: 80px;
  display: inline-block;
  text-decoration: none;
  float: none;
  color: #000000;
  width: 90%;
  height: 200px;
  margin: 0;
  padding: 5%;
  font-size: 1em;
  line-height: 1.5em;
  text-align: left;
}
#message h1{
  font-family: 'M PLUS 1c';
  font-size: 44px;
  line-height: 48px;
  font-weight: Black 900;
}
/* ================ */
/* 情報表示欄 */
#info {
  position: absolute;
  top: 80px;
  display: block;
  text-decoration: none;
  float: none;
  color: #000000;
  width: 90%;
  height: 90%;
  margin-bottom: 20px;
  padding: 5%;
  font-size: 1em;
  line-height: 1.5em;
  text-align: left;
}
#info img{
  width: 100%;
  object-fit: contain;
  background-color: #666666;
}

/* ==================================== */
/* アクティブマトリックスの領域（外枠） */
#am_waku {
  position: absolute;
  top: 300px;
  float: none;
  margin-bottom: 100px;
  padding: 0;
  width: 100%;
  min-height: 250px;
  overflow: auto;
  text-align: center;
  z-index;90;
  background-color: transparent;
}

/* アクティブマトリックス（検索） */
#am_search {
  display: none;
}
/* アクティブマトリックス（ジャンルタブメニュー） */
#am_select ul {
  display: none;
}

/* アクティブマトリックス（コンテンツBOX表示） */
#am_waku #list {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 220px;
  color: transparent;
  text-align: center;
  z-index: 200;
}


/* 画像時 */
#am_waku #list .vdoff {
  float:left;
  height: 250px;
  width: 49%;
  margin: 0;
  overflow:hidden;
  background-color: transparent;
  border: solid 1px #ffffff;
}
#am_waku #list .vdoff img {
  float:none;
  min-width: 20%;
  max-height: 150px;
  margin: 0;
  padding: 0;
}

/* 文字関係 */
.vdoff a,
.vdon a {
  text-decoration: none;
  color: #000000;
}
p.title {
  float: none;
  display: none;
  width: 100%;
  margin: 0 5%;
  color: #000000;
  text-align: center;
  text-decoration: none;
}
p.title:hover {
  color: #000000;
  font-weight: bold;
}

.vdoff p,
.vdon p{
  float: none;
  width: 90%;
  margin-top: 10px;
  color: #000000;
  text-align: left;
}

.vdoff p.title,
.vdon p.title{
  display: inline-block;
  text-align: center;
  font-size: 20px;
  line-height: 26px;
}
.vdoff p.date,
.vdon p.date{
  display: none;
  min-height: 11px;
  font-size: 9px;
  line-height: 1em;
}
.vdoff p.comment,
.vdon p.comment{
  display: block;
  margin: 10%;
  width: 80%;
  text-align: left;
  font-size: 1em;
  line-height: 1.2em;
}

.vdoff p.comment img,
.vdon p.comment img{
  display: block;
  margin: 0 auto;
  height: 40px;
}


/* ビデオ時 */
#am #list .vdon {
  display: inline-flex;
  float:none;
  width: 45.5%;
  height: auto;
  margin:0;
  overflow:auto;
  background-color: transparent;
  border: solid 1px #ffffff;
  z-index: 300;
}
#am #list .vdon * video {
  float:none;
  width: 90%;
  height: auto;
  margin: 0 0 8px 0;
  padding: 0;
  z-index: 400;
}


/* ==================================== */
/* フッター */
#footer{
  position: fixed;
  float: none;
  diaplay: block;
  margin: 0;
  padding: 0;
  bottom: 0px;
  width: 100%;
  height: 20px;
  overflow: hidden;
  text-align: center;
  line-height: 2em;
  font-family: '游ゴシック', 'Yu Gothic', YuGothic, メイリオ, 'Noto Sans Japanese', 'Lucida Grande', 'bitstream vera sans', 'trebuchet ms', sans-serif, verdana;
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  border-top: solid 4px #000000;
  z-index: 100;
}

video {
  z-index: 10000;
  display: block;
  float: left;
  width: 95%;
  height: auto;
  padding: 20px;
}

}