@charset "utf-8";

body {
  background: #011E31;
}

#wrapper,
#wrapper_inner {
  position: relative;
}

#wrapper::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(0deg, rgba(1, 30, 49, .8), rgba(1, 30, 49, .8)),
    url(../../images/main/common/bg.jpg) top right / cover;
  background-blend-mode: multiply;
}

#contents_main {
  /* overflow: hidden; */
}

@media screen and (min-width: 900px){
  #contents_inner {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  #contents_main {
    flex-grow: 1;
    position: relative;
    z-index: 4;
  }

  #contents_main_inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #header,
  #main {
    width: 100%;
  }

  #side {
    width: calc( 100% * 240 / 1024 );
    flex-shrink: 0; 
    min-height: 100vh;
    position: relative;
    z-index: 3;
  }

  #side::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: 
      url(../../images/main/common/bg_sidemenu.png);
    opacity: 1;
  }

  #side_inner {
    padding: 15px 9px;
  }

  #footer {
    /* margin: auto 0 0; */
  }
}

@media screen and (min-width: 1200px){
  #side {
    width: calc( 100% * 320 / 1440 );
  }
}

@media screen and (min-width: 1600px){
  #side {
    /* width: calc( 100% * 440 / 1600 ); */
  }
}

@media screen and (min-width: 1900px){
  #side {
    /* width: calc( 100% * 600 / 1920 ); */
    /* max-width: 600px; */
  }
}


#header {
  position: relative;
  z-index: 3;
}

#main {
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 900px){
  #main {
    padding: 0 15px;
  }
}


#footer {
  /* position: relative; */
  /* z-index: 0; */
  /* color: #fff; */
}

#footer_inner {
  /* position: relative; */
  /* width: 100%; */
  /* max-width: 1080px; */
  /* margin: 0 auto; */
  /* padding: 300px 15px 15px; */
  /* z-index: 2; */
}

/* 
======================== */

body[data-lang="ja"] .js-trans:not([lang="ja"]) {
  display: none;
}

body[data-lang="en"] .js-trans:not([lang="en"]) {
  display: none;
}

/* NEWマーク
======================== */
.new_ic {
  display: inline-block;
}

#list_01 .new_ic>a{
  display: inline;
}

.new_ic::before {
  content:" NEW";
  background: #bb4a4a;
  color: #fafafa;
  font-weight: 300;
  font-size: 1.1rem;
  padding: .2em .2em .1em;
  margin: 0 .5em 0 0;
}

/* Youtube
======================== */
/*
  width = ウィンドウ幅 - 左右マージンの合計
  height = width * 9/16
  ※単位vwはスクロールバーを含めた値になるため、PCの場合は少しずれる。
  　スマホは問題ない。
*/

.read iframe {
  margin: 1em 0;
  max-width: 760px;
  max-height: calc( 760px * 9 / 16 );
  width: calc( 100vw - 80px );
  height: calc( ( 100vw - 80px ) * 9 / 16 );
  
}

@media screen and (min-width: 900px){
  .read iframe {
    width: calc( 100vw - 320px - 80px );
    height: calc( ( 100vw - 320px - 80px ) * 9 / 16 );
  }
}


/* ページネーション（ネクストバック）
======================== */

/* ネクストバックナビ */
.nb_navi {
  text-align: center;
  margin-top: 50px;
}

/* 件数表示 */
.page {
}

/* 件数件表示（数字） */
.page>.nom {
}

/* ページネーション（リスト） */
.page_navi>ul {
  margin: 0;
  display: flex;
  justify-content: center;
}

/* ページネーション（ページ数、前、次） */
.page_navi li {
}

/* ページネーション（前、次のみ） */
.page_navi li.nb_pre,
.page_navi li.nb_nex {
  margin: 0 1em;
}

/* ページネーション（ページ数のみ） */
.page_navi li.nb_crt,
.page_navi li.nb_link {
  margin: 0 .5em;
}

/* ページネーション（ページ数 カレント） */
.page_navi li.nb_crt {
}

/* ページネーション（リンク） */
.page_navi a {
  text-decoration: none;
}

.page_navi a:hover {
}

/* ページネーション リンクなし */
.page_navi li>span {
  opacity: .2;
}


.linkButton {
  text-align: center;
  margin: 1em 0;
}

.linkButton a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: #011E30;
  padding: .3em 1em;
  line-height: 1.2;
  min-width: 180px;
}