@charset "utf-8";
/* CSS Document commonlayout*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,500,600,700,900');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300,400,500,600,700,900&display=swap');
/* 1: common
=========================================*/
* {
  margin: 0;
  box-sizing: border-box
}
html {
  margin: 0;
}
body {
  width: 100%;
  min-width: 1280px;
  line-height: 1.75;
  font: 16px 'Noto Sans JP', serif;
  color: #fff;
  letter-spacing: 0.06em;
  background-color: #000;
  word-wrap: break-word;
  font-weight: 400;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: cover;
  background-attachment: fixed;
}
#loading {
  width: 100px;
  height: 100px;
  display: none;
  position: fixed;
  _position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  z-index: 999;
  background-image: url(../images/loading.svg);
  background-repeat: no-repeat;
  background-position: center center;
}
#fade {
  width: 100%;
  height: 100vh;
  display: none;
  background-color: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 998;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  height: auto
}
.inner {
  margin: 0 auto;
  width: 1280px;
}
/* 画面外にいる状態 */
.fadein {
  opacity: 0.1;
  transform: translate(0, 50px);
  transition: all 500ms;
}
/* 画面内に入った状態 */
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
*:focus {
  outline: none;
}
.btnInfo a {
  background-color: #6E9DAB;
  color: #FFFCAF;
  background-image: url(../images/icon_arrow02.png);
  background-repeat: no-repeat;
  background-position: 96% 50%;
  margin: 20px auto 0;
  width: 580px;
  padding: 15px 65px 15px 30px;
  display: block;
  font-weight: 400;
  font-size: 24px;
  transition: 0.3s
}
.btnInfo a:hover {
  opacity: 0.8
}
table {
  width: 1000px;
  margin: 60px auto;
  font-size: 14px;
  border-collapse: collapse;
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  opacity: 0.9;
  background-color: rgba(0, 0, 0, 0.5);
  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Meiryo", "メイリオ", "Osaka", "MS PGothic", arial, helvetica, sans-serif;
}
table th {
  padding: 5px 0;
  text-align: center;
  border: 1px solid #FFFFFF;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.7);
}
table td {
  padding: 5px 10px;
  border: 1px solid #FFFFFF;
}
table td.add {
  white-space: nowrap
}
table td span {
  display: block;
}
table td a {
  text-decoration: underline !important;
  color: #FFffff !important;
}
table td.area {
  text-align: center;
  width: 50px;
}
.tableStyle01 {
  border-collapse: collapse;
  border-top: 1px solid #ccc;
  margin: 60px 0 0px;
  width: 100%
}
.tableStyle01 tr {
  border-bottom: 1px solid #ccc
}
.tableStyle01 th, .tableStyle01 td {
  padding: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
}
.tableStyle01 th {
  background-color: #FCFAF9;
  font-weight: 600;
}
/* sp
=========================================*/
@media screen and (max-width: 767px) {
  * {
    -webkit-appearance: none;
  }
  body {
    font-size: 14px;
    line-height: 1.6;
    padding-top: 0;
    border-top: none;
  }
  body, html, body {
    width: 100%;
    min-width: 100%;
  }
  body, html, body * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  .sp-none {
    display: none !important;
  }
  .sp-only {
    display: block !important;
  }
  p {
    word-break: break-all;
  }
  .inner {
    width: 100%;
    padding: 0 4%
  }
  table {
    width: 100%;
    margin: 30px 0%;
  }
  .btnInfo a {
    margin: 20px auto 0;
    width: 100%;
    padding: 10px 30px 10px 15px;
    font-size: 14px;
    background-size: 12px auto;
  }
  .tableStyle01 {
    margin: 30px 0 0px;
    width: 100%
  }
  .tableStyle01 th, .tableStyle01 td {
    padding: 10px;
    display: block;
    width: 100%
  }
}
/* Link
========================================*/
a, a:link {
  text-decoration: none;
  outline: none;
  transition: 0.3s
}
a:visited {}
a:hover, a:active {}
a.alpha:hover {
  opacity: 0.8
}
.button {
  -webkit-animation: my-fade-in 3s ease 2.5s 1 forwards;
  animation: my-fade-in 3s ease 2.5s 1 forwards;
  display: inline-block;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: .3s;
  z-index: 1;
  overflow: hidden;
}
.button::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: '';
  width: 130%;
  height: 100%;
  transform-origin: right top;
  transform: skewX(-30deg) scale(0, 1);
  transition: transform .3s;
}
.button:hover::before {
  transform-origin: left top;
  transform: skewX(-30deg) scale(1, 1);
}
@media screen and (max-width: 767px) {}
/* スマホ、PC切替用
========================================*/
.sp-none {
  display: block;
}
.sp-only {
  display: none;
}
/* 2: header
=========================================*/
#header {
  margin: 0;
  position: relative;
  overflow: hidden;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  font-weight: 400;
}
#header nav {
  width: 100%
}
#header nav #gnav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}
#gnav ul li a, #gnav ul li.nolink {
  display: block;
  color: #ffea00;
  padding: 5px 20px;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Noto Serif JP', serif;
  position: relative;
}
#gnav ul li span {
  font-size: 80%
}
#gnav ul li.nolink {
  color: #7C7C7C
}
#gnav ul li a:hover {
  background-color: #000;
}
#header .contactBtn {
  width: 20%
}
#header .contactBtn a {
  display: block;
  color: #FFFFFF;
  padding: 23px 30px;
  font-size: 18px;
  background-image: linear-gradient(to right, rgba(0, 82, 67, 1.00) 50%, rgba(44, 167, 225, 1.00) 50%);
}
@media (max-width: 830px) {
  #header {
    padding: 0px;
    height: auto;
  }
  #header nav, #header .contactBtn {
    display: none;
  }
}
#subHeader {
  padding: 20px 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
}
#subHeader #header {}
#subHeader.scroll {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.95;
  z-index: 9999;
  width: 100%;
  overflow: visible !important;
}
@media (min-width: 829px) {
  .drawer-hamburger.open {
    display: none;
  }
}
.drawer-nav {
  background-color: #000 !important
}
.drawer-hamburger.open {
  top: 0px;
  position: fixed;
  z-index: 999999
}
.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before {
  background-color: #fff !important;
}
.drawer-nav .drawer-hamburger {
  display: block !important;
  transition: all .25s ease !important;
  -webkit-transition: all .25s ease !important;
  position: absolute;
  top: 10px;
  left: 30px;
}
.drawer-hamburger-icon:after {
  width: 80%
}
.drawer-open .drawer-hamburger-icon:after {
  width: 100%
}
.drawer-nav .drawer-hamburger-icon {
  border-bottom-color: #FFFFFF;
  background-color: #000;
}
.drawer-open .drawer-hamburger-icon, .drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {
  height: 2px
}
.drawer-close .drawer-nav .drawer-hamburger-icon, .drawer-close .drawer-nav .drawer-hamburger-icon:before, .drawer-close .drawer-nav .drawer-hamburger-icon:after {
  border-bottom-color: #FFFFFF !important;
  background-color: #FFFFFF !important;
  -webkit-transform: rotate(45deg) !important;
  transform: rotate(45deg) !important;
  top: 0;
  height: 3px !important;
}
.drawer-open .drawer-nav .drawer-hamburger:hover {
  transform: rotate(90deg) !important;
  -webkit-transform: rotate(90deg) !important;
}
.drawer--right .drawer-nav {
  padding: 50px 35px;
}
.drawer--right .drawer-nav li.ja a {
  font-size: 13px;
}
.drawer--right .drawer-nav a, .drawer-nav .nolink {
  font: 400 16px/2.8 "roboto", sans-serif;
  color: #ffea00;
  border-bottom: 1px solid #D5D5D5;
  display: block;
}
.drawer-nav .nolink {
  color: rgba(255, 234, 0, 0.3);
}
.drawer--right .drawer-nav a:hover {
  text-decoration: none;
}
.drawer-menu {
  margin-top: 40px !important;
  margin-left: 10px !important;
  margin-bottom: 50px !important;
  height: auto;
}
.drawer-menu ul {
  margin-top: 20px;
  padding-top: 20px !important;
  border-top: 1px solid #E1E0E1;
}
.drawer-menu ul li {}
.drawer--right .drawer-nav { /* IE用スクロールバーカラー */
  scrollbar-arrow-color: #333; /* 矢印 */
  scrollbar-face-color: #333; /* スクロールバー表面 */
  scrollbar-3dlight-color: #E1E0E1; /* ボタン外側の左と上の枠 */
  scrollbar-darkshadow-color: #E1E0E1; /* ボタン外側の右と下の枠 */
}
.drawer--right .drawer-nav::-webkit-scrollbar { /* スクロールバー幅 */
  width: 5px;
  height: 5px;
}
.drawer--right .drawer-nav::-webkit-scrollbar-track { /* 背景 */
  background: #fff;
  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.0);
  border-radius: 5px;
}
.drawer--right .drawer-nav::-webkit-scrollbar-thumb { /* 表面 */
  background: #E1E0E1;
  border-radius: 5px;
}
@media (max-width: 830px) {
  .drawer-overlay {
    z-index: 2 !important;
    -webkit-transform: translate3d(0, 0, 0);
  }
  .drawer-hamburger.open {
    padding: 30px 15px 35px !important;
    width: 2.4rem !important;
    background-color: #000;
  }
  .drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before {
    background-color: #fff;
  }
  .drawer-open .drawer-hamburger-icon {
    background-color: transparent !important;
  }
  .open .drawer-hamburger-icon {
    margin-top: 5px;
  }
}
/* footer
=========================================*/
#footer {
  width: 100%;
  padding: 30px 0 20px;
  text-align: center;
  color: #FFFFFF;
  font: 14px 'Noto Serif JP', serif;
}
#footer .copyright {
  color: #fff;
  font-size: 12px;
  text-align: center;
  font-weight: 400
}
.topBtn {
  position: fixed; /*固定*/
  bottom: 20px; /*場所を右下に移動*/
  right: 20px; /*場所を右下に移動*/
  display: block; /*aタグをblock要素に変更*/
  background-color: #c2010c;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 12px;
  height: 82px;
  width: 82px;
  text-align: center;
  line-height: 1.2;
  border-radius: 50%;
  padding-top: 35px;
  box-sizing: border-box;
  z-index: 1000
}
.topBtn:before {
  content: url(../images/icon_arrow01.svg);
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.topBtn:hover {
  opacity: 0.7;
}
#footerBtn {
  display: none
}
/* sp
=========================================*/
@media screen and (max-width: 767px) {
  #footer {
    width: 100%;
    padding: 30px 0 60px;
  }
  .topBtn {
    padding-top: 25px;
    right: 4%;
    bottom: 50px;
    font-size: 10px;
    height: 62px;
    width: 62px;
  }
  .topBtn:before {
    top: 5px;
  }
}
/* contents
=========================================*/
#main {
  padding: 30px 0;
  margin-bottom: 120px;
}
#main .fL {
  padding: 10px;
  width: 50%
}
#main .fR {
  width: 50%
}
#main .tx01 {
  position: relative;
  left: -50px;
  margin-top: 60px;
  margin-bottom: 10px;
}
#main .logo {
  text-align: center;
}
#main .tx02 {
  background-color: rgba(0, 0, 0, 0.80);
  color: rgba(255, 255, 255, 1.00);
  font: 20px/2.0 'Noto Serif JP', serif;
  padding: 60px 30px;
  margin-top: 80px;
  margin-left: 20px;
  margin-right: 20px;
}
#main .tx02 .comment {
  text-align: center
}
#main .tx02 .comment a {
  font-size: 14px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  color: rgba(255, 255, 255, 1.00);
  border: 1px solid rgba(255, 255, 255, 1.00);
  display: inline-block;
  padding: 5px 20px;
  text-align: center;
}
#main .tx03 {
  text-align: center;
  margin-top: 30px
}
#main .tx03 a img:hover {
  opacity: 0.7
}
#main .tx04 {
  text-align: center;
  margin-top: 120px
}
#main .tx04 a:hover {
  opacity: 0.7
}
#main .tx05 {
  text-align: center;
  margin-top: 120px
}
#main .tx05 a:hover {
  opacity: 0.7
}
#main .spec {
  text-align: center;
  margin-top: 120px;
  font-size: 12px
}
h2 {
  color: #C2010C;
  font-size: 30px;
  letter-spacing: 0.06em;
  font-weight: bold;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 60px;
}
h3 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 10px
}
#introduction {
  margin: 120px 0
}
#introduction .fL {
  width: 50%;
  padding: 20px 30px
}
#introduction .fR {}
#introduction .fR .thumb {
  margin-bottom: 30px
}
#theater {
  margin: 120px 0
}
#theater .info {
  margin: 30px auto;
  width: 80%;
  padding: 20px;
  color: #ff0000;
  text-align: center;
  font-size: 18px;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
}
#theater table td span.red {
  display: inline-block;
  background-color: red;
  color: #fff;
  padding: 3px 5px;
  font-size: 12px;
  margin-left: 10px
}
#story {
  margin: 120px 0
}
#story .fL {
  width: 50%;
  padding: 20px 30px
}
#story .fR {}
#story .fR .thumb {
  margin-bottom: 30px
}
#about {
  margin: 120px 0
}
#about h3 {
  margin-bottom: 20px;
  margin-top: 30px;
  font-size: 16px
}
#about .bookList {
  display: flex;
  justify-content: center;
}
#about .bookList li {
  padding: 0 15px
}
#restore {
  margin: 120px 0
}
#restore h3 {
  margin-bottom: 20px;
  margin-top: 30px;
  font-size: 16px
}
#restore p {
  margin-bottom: 1.5em
}
#restore .fL{width: 48%}
#restore .fR{width: 48%}
#en {
  margin: 120px 0
}
#en h3 {
  margin-bottom: 20px;
  margin-top: 30px;
}
#en h3.links {
  margin-bottom: 20px;
  margin-top: 30px;
  text-align: right;
  font-size: 16px
}
#en h3 a {
	color: #DF0003;
  text-align: right;
	text-decoration: underline;
}
#en p {
  margin-bottom: 1.5em
}
#en .comment {
	width: 70%;
	margin: 30px auto 0
}
#en .fL{
  width: 48%
}
#en .fR{
  width: 48%
}
@media screen and (max-width: 767px) {
  #main {
    padding: 30px 0;
    margin-bottom: 30px;
  }
  #main .fL {
    padding: 10px;
    width: 100%
  }
  #main .fR {
    width: 100%
  }
  #main .tx01 {
    position: relative;
    left: 0px;
    margin-top: 30px;
    margin-bottom: 10px;
  }
  #main .tx02 {
    font: 18px/2.0 'Noto Serif JP', serif;
    padding: 60px 30px;
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
  }
  #main .tx03 {
    margin-top: 40px
  }
  #main .tx04 {
    margin-top: 40px
  }
  #main .spec {
    margin-top: 60px;
    font-size: 12px
  }
  h2 {
    font-size: 22px;
    margin-bottom: 30px;
  }
  h3 {
    font-size: 16px;
    margin-bottom: 10px
  }
  #introduction {
    margin: 30px 0
  }
  #introduction .fL {
    width: 100%;
    padding: 20px 0px
  }
  #introduction .fR {
    width: 100%;
  }
  #introduction .fR .thumb {
    margin-bottom: 30px
  }
  #theater {
    margin: 30px 0
  }
  #story {
    margin: 30px 0
  }
  #story .fL {
    width: 100%;
    padding: 20px 0px
  }
  #story .fR {
    width: 100%;
  }
  #story .fR .thumb {
    margin-bottom: 30px
  }
  #about {
    margin: 30px 0
  }
  #about .bookList {
    display: block
  }
  #restore {
    margin: 30px 0
  }
  #restore .bookList {
    display: block
    }
  #restore .fL{width: 100%}
  #restore .fR{width: 100%}
#en .comment {
	width: 100%;
	margin: 20px auto 0
}
#en .fL{
  width: 100%
}
#en .fR{
  width: 100%
}
}