@charset "UTF-8";
@font-face {
  font-family: "headerFont";
  src: url(../font/RocknRoll_One/RocknRollOne-Regular.ttf);
}
/* header */
header {
  height: 150px;
  display: block;
  position: relative;
  padding: 30px 30px 0px 30px;
  z-index: 1000;
}

@media screen and (max-width: 700px) {
  header {
    padding: 0px;
  }
}
/* ロゴ、タイトル、タイプコンテナ----------------------------------------------- */
#page-title {
  position: absolute;
  display: inline-block;
  /* float: left; */
  user-select: none;
  vertical-align: top;
  text-align: center;
  font-family: "Arial Black", "Arial Black", "Trebuchet MS", sans-serif;
}
#page-title a {
  text-decoration: none;
}
#page-title a h1 {
  color: var(--main-clr-1);
  font-size: 30px;
  padding: 0px 0px 2px 0px;
  margin: 0px;
  line-height: 40px;
  border-top: solid 5px var(--main-clr-1);
  border-bottom: solid 5px var(--main-clr-1);
  transition: 0.3s;
  /* transform: translate(0px, -50%); */
}
#page-title a h1:hover {
  padding: 15px 0px;
  line-height: 45px;
}
#page-title h3#now-type {
  font-size: 23px;
  line-height: 45px;
  color: var(--main-clr-2);
  background-color: var(--main-clr-1);
  margin: 0px;
  cursor: pointer;
}
#page-title h3#now-type:hover + #other-type {
  height: 140px;
}
#page-title #other-type {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 100%;
  height: 0px;
  padding: 0px;
  text-align: center;
  overflow: hidden;
  transition: 0.7s;
  vertical-align: top;
}
#page-title #other-type:hover {
  height: 140px;
}
#page-title #other-type a {
  display: block;
  color: var(--main-clr-2);
  width: 100%;
  background-color: var(--main-clr-1);
  text-decoration: none;
  margin: 0px;
  font-size: 23px;
  line-height: 45px;
}
#page-title #other-type a:hover {
  filter: brightness(80%);
}

@media screen and (max-width: 700px) {
  #page-title {
    padding: 10px 0px 0px 10px;
  }
}
@media screen and (max-width: 700px) {
  #page-title #other-type a {
    margin-left: 10px;
  }
}
/* ページリンクリスト----------------------------------------------- */
#page-link-container {
  position: absolute;
  left: 200px;
  display: inline-block;
  margin: 0px 12px;
  /* z-index: 1000; */
}
#page-link-container .link-container {
  position: relative;
  display: inline-block;
  margin-right: 10px;
}
#page-link-container button {
  z-index: 10;
  display: inline-block;
  background-color: var(--main-clr-1);
  color: var(--main-clr-2);
  text-decoration: none;
  font-size: 28px;
  font-family: "Arial Black", "Arial Black", "Trebuchet MS", sans-serif;
  font-weight: 900;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 100px;
  border: none;
  width: 120px;
  height: 120px;
  margin-right: 10px;
  cursor: pointer;
  transition: 0.3s;
}
#page-link-container button h2 {
  font-size: 28px;
  font-weight: normal;
}
#page-link-container button:hover {
  transform: rotate(40deg);
}
#page-link-container button:active {
  transform: rotate(720deg);
}
#page-link-container button p {
  color: var(--main-clr-2);
}
#page-link-container a {
  text-decoration: none;
}
#page-link-container .page-link {
  z-index: 1000;
  width: 134px;
  border: none;
  transition: 0.6s;
  /* overflow: scroll; */
  font-family: "headerFont";
  /* clip-path: polygon(16% 0%, 84% 0%, 83% 0%, 17% 0%); */
  padding: 0px;
}
#page-link-container .page-link::-webkit-scrollbar {
  width: 6px;
  height: 0px;
  /* background-color:var(--dark-text); */
}
#page-link-container .page-link::-webkit-scrollbar-track {
  background: none;
}
#page-link-container .page-link::-webkit-scrollbar-thumb {
  background: var(--dark-text);
  opacity: 50%;
  border-radius: 100px;
}
#page-link-container .page-link:hover {
  /* height: 430px; */
  /* clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%); */
}
#page-link-container .page-link a {
  font-family: YuGothic, "Yu Gothic", "ヒラギノ角ゴ StdN", "Hiragino Kaku Gothic StdN", "ヒラギノ角ゴシック", "Hiragino Sans", sans-serif;
  text-decoration: none;
  /* background-color: var(--main-clr-1); */
  width: 120px;
  margin: 0px;
  padding: 0px;
}
#page-link-container .page-link p:not(p.link-img-text) {
  display: table-cell;
  width: 130px;
  height: 70px;
  font-family: "headerFont";
  font-size: 20px;
  line-height: 23px;
  color: var(--dark-text);
  background-color: var(--main-clr-2);
  text-align: center;
  vertical-align: middle;
}
#page-link-container .page-link p:not(p.link-img-text):hover {
  filter: brightness(85%);
}
#page-link-container .page-link img {
  /* position: absolute; */
  width: 100%;
  height: 70px;
  object-fit: cover;
  background-color: var(--main-clr-1);
  vertical-align: top;
  filter: brightness(80%);
}
#page-link-container .page-link h3.genre {
  font-size: 16px;
  font-family: "headerFont";
  font-weight: normal;
  width: 100px;
  min-height: 50px;
  padding: 0px 6px;
  margin: 0px;
  color: var(--main-clr-2);
  background-color: var(--main-clr-1);
  border-top: 4px solid var(--sub-clr-1-2);
  border-left: 4px solid var(--sub-clr-1-2);
  border-bottom: 4px solid var(--sub-clr-1);
  border-right: 4px solid var(--sub-clr-1);
  display: flex;
  justify-content: center;
  align-content: flex-end;
  align-items: center;
}
#page-link-container .page-link h3.genre::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0px;
  border-top: solid 2px var(--main-clr-2);
  border-right: solid 2px var(--main-clr-2);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
}
#page-link-container .link-img {
  position: relative;
}
#page-link-container .link-img:hover {
  filter: brightness(77%);
}
#page-link-container p.link-img-text {
  position: absolute;
  top: 0px;
  display: table-cell;
  width: 120px;
  height: 70px;
  font-family: "headerFont";
  font-size: 20px;
  line-height: 23px;
  color: var(--white-text);
  text-shadow: 0px 2px var(--dark-text), 2px 0px var(--dark-text), -2px 0px var(--dark-text), 0px -2px var(--dark-text), 0px 0px 5px var(--dark-text);
  text-align: center;
  vertical-align: middle;
}

/* #page-link-container button:hover + .page-link {
height: 430px;
} */
/* #page-link-container a:hover + .page-link {
height: 430px;
} */
#sub-link-container {
  display: inline-block;
  position: relative;
  z-index: 100;
  /* margin-left: 20px; */
}
#sub-link-container .sub-link {
  -webkit-transform: scale(0.7);
  transform: scale(70%);
  transition: 0.2s;
  margin-right: -20px;
  z-index: 1000;
}
#sub-link-container .sub-link:hover {
  -webkit-transform: scale(1);
  transform: scale(100%);
}

.openbtn {
  display: none;
}

@media screen and (max-width: 700px) {
  #page-link-container {
    display: none;
  }

  .openbtn {
    display: inline-block;
  }
}
@media screen and (max-width: 1000px) and (min-width: 701px) {
  .main-link,
#sub-link-container {
    display: none;
  }

  .openbtn {
    display: inline-block;
  }

  #g-nav ul {
    margin: 0px;
  }
}
/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
_:lang(x) + _:-webkit-full-screen-document,
.page-link {
  top: 150px;
}

/* ------------------------------------------------------------- */
/* ------------------------------------------------------------- */
#fix-btn-container {
  /* display: inline-block; */
  position: fixed;
  top: 10px;
  right: 10px;
  /* float: right; */
  z-index: 100000;
}
#fix-btn-container #tweet-container i {
  color: var(--main-clr-1);
}
#fix-btn-container .fa-twitter:before {
  display: table-cell;
  background-color: var(--main-clr-2);
  box-shadow: 0px 0px 5px var(--main-clr-1);
  border-radius: 100px;
  width: 60px;
  height: 60px;
  text-align: center;
  vertical-align: middle;
}
#fix-btn-container button.newiine_btn {
  position: relative;
  cursor: pointer;
  background: transparent;
  background-color: var(--main-clr-2);
  border: none;
  box-shadow: 0px 0px 5px var(--main-clr-1);
  color: var(--main-clr-1);
  font-size: 20px;
  border-radius: 100px;
  transition: 0.3s;
  z-index: 10;
  /* margin-right: 10px; */
  width: 60px;
  height: 60px;
  margin: 0px;
}

@media screen and (max-width: 1000px) {
  #fix-btn-container {
    position: fixed;
    top: 60px;
    right: 10px;
  }
  #fix-btn-container .fa-twitter:before {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  #fix-btn-container button.newiine_btn {
    width: 40px;
    height: 40px;
    font-size: 10px;
  }

  button.newiine_btn span.material-icons-round {
    display: block;
    font-size: 13px;
  }
}
#tweet-container,
#iine-container {
  text-align: center;
}

#g-nav-list h2 {
  color: var(--sub-clr-2);
  font-size: 40px;
  font-family: "Arial Black", "Arial Black", "Arial", sans-serif;
  margin: 15px 0px 0px 0px;
}
#g-nav-list a:hover {
  background-color: var(--sub-clr-2);
  color: black;
}
#g-nav-list a::after {
  content: "";
  display: block;
  width: 100%;
  top: -10px;
}

.bg {
  width: 100%;
  height: 200px;
  background-color: black;
}

/*========= ナビゲーションドロップダウンのためのCSS ===============*/
/*==ナビゲーション全体の設定*/
nav#wideNav {
  text-align: center;
}
nav#wideNav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0px;
}
nav#wideNav ul ul {
  display: block;
}
nav#wideNav ul li {
  display: inline-block;
  position: relative;
}
nav#wideNav ul li a {
  display: block;
  text-decoration: none;
  color: #999;
  /* transition: all .3s; */
}
nav#wideNav ul li li {
  display: block;
}
nav#wideNav ul li li a {
  padding: 10px 35px;
}
nav#wideNav ul li a:hover {
  color: #fff;
}
nav#wideNav li.has-child ul {
  /*絶対配置で位置を指定*/
  position: absolute;
  left: 0;
  top: 125px;
  padding: 0px;
  z-index: 4;
  /*形状を指定*/
  /* background: #28BFE7; */
  /* width: 180px; */
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  /* transition: all .3s; */
}
nav#wideNav li.has-child:hover > ul,
nav#wideNav li.has-child ul li:hover > ul, nav#wideNav li.has-child:active > ul {
  visibility: visible;
  opacity: 1;
}
nav#wideNav li.has-child ul li:active > ul {
  visibility: visible;
  opacity: 1;
}
nav#wideNav li.has-child ul li a {
  color: #fff;
  /* border-bottom: solid 1px rgba(255, 255, 255, 0.6); */
}
nav#wideNav li.has-child ul li:last-child a {
  /* border-bottom: none; */
}
nav#wideNav li.has-child ul li a:hover, nav#wideNav li.has-child ul li a:active {
  /* background: #3577CA; */
}
nav#wideNav li.has-child ul ul {
  top: 0;
  left: 120px;
  /* background: #66ADF5; */
  padding: 0px;
}
nav#wideNav li.has-child ul ul li a:hover, nav#wideNav li.has-child ul ul li a:active {
  /* background: #448ED3; */
}

/*ナビゲーションを横並びに*/
/*2階層目以降は横並びにしない*/
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
/*ナビゲーションのリンク設定*/
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
/*hoverしたら表示*/
/*ナビゲーションaタグの形状*/
/*==3階層目*/
/*3階層目の位置*/
/*==768px(現在は1px)以下の形状*/
@media screen and (max-width: 1px) {
  nav#wideNav {
    padding: 0;
  }
  nav#wideNav ul {
    display: block;
  }
  nav#wideNav li.has-child ul {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    visibility: visible;
    /*JSで制御するため一旦表示*/
    opacity: 1;
    /*JSで制御するため一旦表示*/
    display: none;
    /*JSのslidetoggleで表示させるため非表示に*/
    transition: none;
    /*JSで制御するためCSSのアニメーションを切る*/
  }
  nav#wideNav li.has-child ul ul {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    visibility: visible;
    /*JSで制御するため一旦表示*/
    opacity: 1;
    /*JSで制御するため一旦表示*/
    display: none;
    /*JSのslidetoggleで表示させるため非表示に*/
    transition: none;
    /*JSで制御するためCSSのアニメーションを切る*/
  }
  nav#wideNav ul li a {
    border-bottom: 1px solid #ccc;
  }
  nav#wideNav ul li.has-child::before {
    left: 20px;
  }
  nav#wideNav ul ul li.has-child::before {
    transform: rotate(135deg);
    left: 20px;
  }
  nav#wideNav ul li.has-child.active::before {
    transform: rotate(-45deg);
  }

  /*矢印の位置と向き*/
}