@charset "UTF-8";
/*
---------------------------------------------------------
common style
---------------------------------------------------------
*/

body {
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  background-image: url(../images/bg-body.png);
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: #000;
  color: #fff;
}
a {
  transition: opacity 0.3s ease-in-out;
}
a:hover {
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}
/* wrapper */

.wrapper {
}
.drawer-on .wrapper {
}
/* secondary common */

.button {
  text-decoration: none;
  margin: 0 1px 0.5rem 1px;
  font-weight: bold;
  padding: 1.2em 3.5em;
}
.button.reverse {
  background-color: transparent;
  border: solid 1px #fff;
  color: #fff;
}
.button.tiny {
  font-size: .6rem;
  padding: 0.85em 1em;
}
.button.secondary {
}
/* more button */
.button.more {
  display: inline-block;
  padding: 0.5rem 1rem 0.4rem 1rem;
  line-height: 1;
  margin: 0 0 5px 0;
  font-size: 0.7rem;
  color: #fff;
  border: solid 1px #fff;
  background-color: transparent;/*  box-shadow: 0px 0px 5px rgba(255,255,0,1)*/
}
.button.more.large {
  font-size: 1.3rem;
}
/* article-title */

#main article {
  padding-bottom: 10rem;
}

@media only screen and (max-width: 40em) {
#main article {
  padding-bottom: 5rem;
}
}
#main a {
  word-break: break-all !important;
}
#main img {
  max-width: 100%;
  height: auto !important;
}
/* pagination */

.pagination {
  padding-top: 5rem;
}
/* hr */

hr {
  opacity: 0.25;
}
/* no-padding */

.no-padding {
  padding: 0;
  margin: 0;
}
/*
---------------------------------------------------------
header
---------------------------------------------------------
*/

#header {
  /*  padding: 60px 0 35px 0;*/
  text-align: center;
  position: fixed;
  z-index: 7700;
  width: 100%;
}
.second #header {
  height: 140px;
  background-color: rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(5px);
}

@media only screen and (max-width: 40em) {
.second #header {
  height: 60px;
}
}
#header .logo {
  width: 100px;
  margin: 0 0 0 -50px;
  position: absolute;
  top: 10px;
  left: 50%;
}
#header .logo img {
  width: 100%;
  height: auto;
}
.home #header .logo {
  display: none;
}

@media only screen and (max-width: 40em) {
#header .logo {
  width: 36px;
  margin: 0 0 0 -18px;
}
}
#header .nav-map {
  position: absolute;
  right: 10px;
  top: 0px;
  width: 120px;
}

@media only screen and (max-width: 40em) {
#header .nav-map {
  width: 50px;
}
}
#header .nav-map img {
  max-width: 100%;
  height: auto;
}
.home #header .nav-map {
  display: none;
}
/* drawer */

.drawer {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 0;
  height: 0vh;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 7800;
  overflow: hidden;
  transition-property: height;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}
.drawer-on .drawer {
  /*    min-height: 100%;*/
  /*    min-height: 100vh;*/
  height: 100%;
  /*height: 100vh;background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);*/
  transition-property: height;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* drawer body */

.drawer .body {
  /*padding: 150px 0 35px 0;*/
  padding: 80px 0 0px 0;
}

@media only screen and (max-width: 40em) {
.drawer .body {
  padding: 70px 0 35px 0;
  font-size: 0.8rem
}
}
.drawer-nav> ul>li {
  padding: 0 0 1.5rem 0;
}

@media only screen and (max-width: 40em) {
.drawer-nav> ul>li {
  padding: 0 0 0.7rem 0;
}
}
.drawer-nav ul,
.drawer-nav li {
  list-style: none;
}
.drawer-nav a {
  text-decoration: none;
  display: block;
  /* padding: 0.5rem 0;*/
  padding: 0.1rem 0;
  text-align: center;
  font-family: "ＭＳ Ｐ明朝", MS PMincho, "ヒラギノ明朝 Pro W3", Hiragino Mincho Pro, serif;
  font-size: 2rem;
  color: #fff;
}

@media only screen and (max-width: 40em) {
.drawer-nav a {
  font-size: 1rem;
}
}
.drawer-nav .bottom-nav {
  text-align: center;
  padding: 4rem 0 0 0;
}

@media only screen and (max-width: 40em) {
.drawer-nav .bottom-nav {
  text-align: center;
  padding: 1rem 0 0 0;
}
}
.drawer-nav .bottom-nav a {
  display: inline-block;
  padding: 0.5rem 1rem;
}

@media only screen and (max-width: 40em) {
.drawer-nav .bottom-nav a {
  display: inline-block;
}
.drawer-nav .bottom-nav a img {
  width: 90px;
}
}
.drawer-nav .sns ul,
.drawer-nav .sns li,
.drawer-nav .sns a {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline;
}
.drawer-nav .sns {
  padding: 2rem 0 0 0;
  text-align: center;
}
.drawer-nav .official a {
  font-size: 1.2rem;
}
/* toggle */

.toggle {
  width: 40px;
  height: 40px;
  position: fixed;
  top: 20px;
  left: 1rem;
  z-index: 7900;
}

/*.pc.drawer-on .toggle {
  right:32px;
}*/

@media only screen and (max-width: 40em) {
.toggle {
  top: 0.3rem;
  left: 5px;
}
}
.toggle .open {
  display: block;
}
.toggle .close {
  display: none;
}
.drawer-on .toggle .open {
  display: none;
}
.drawer-on .toggle .close {
  display: block;
}
/*
---------------------------------------------------------
footer
---------------------------------------------------------
*/

#footer {
  /*  background-color: #000;*/
  padding: 3rem 0 10rem 0;
  text-align: center;
}
#footer ul,
#footer li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline;
}
#footer a {
  text-decoration: none;
  color: #fff;
}
/* sns */

#footer .sns {
  padding: 0;
}
/* official */

#footer .official {
  padding: 1rem 0 1rem 0;
}
#footer .official a {
/*  display: block;*/
}
/* copyright */

.copyright {
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  margin: 2rem 0;
}
/*page top
------------------------------------------------*/

.global-pagetop {
  position: fixed;
  right: 20px;
  bottom: 50px;
  z-index: 6000;
  width: 50px;
  height: 50px;
}
.global-pagetop a {
  display: block;
  font-size: 60px;
  line-height: 1;
}
.global-pagetop a:hover {
  text-decoration: none;
  opacity: 0.5;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
/*
---------------------------------------------------------
home 
---------------------------------------------------------
*/

.site-title {
  text-align: center;
  height: 90vh;
  position: relative;
}
.site-title .nav {
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
}
.site-title .nav img {
  width: 50px;
  height: auto;
}
/* banner
------------------------------------------------*/

.banner-list {
  display: table;
  margin: auto;
}

@media only screen and (max-width: 40em) {
.banner-list {
  display: block;
}
}
.banner-list .tr {
  display: table-row;
}

@media only screen and (max-width: 40em) {
.banner-list .tr {
  display: block;
}
}
.banner-list .item {
  display: table-cell;
}

@media only screen and (max-width: 40em) {
.banner-list .item {
  display: block;
}
.banner-list .item img {
  width: 100%;
}
}
.banner-list {
}
.banner {
}
.banner .body {
  padding: 5rem 0;
}
/* area map
------------------------------------------------*/

.area-map {
}
#map_canvas {
  height: 500px;
  width: 100%;
}
.sp #map_canvas {
  height: 300px;
}
.map_canvas-body {
  margin: 4rem 0;
}
.area-map .article-title {
  text-align: center;
}
.area-map .thumbnail {
}
.area-map .thumbnail img {
  margin-top: -10px;
}
.area-map .title {
  font-size: 1rem;
  padding: 0.3rem 0;
}
.area-map .map-entry {
  font-size: 0.8rem;
}
.area-map .entry-title {
  font-size: 1rem;
  font-weight: bold;
}
.area-map .entry {
  margin-bottom: 4rem;
}
.area-map .media-object a {
  color: #fff;
  /*  background-color: #FF0004;*/
  display: block;
}
.area-map .media-object a:hover {
  transition: opacity 0.3s ease;
  opacity: .5;
}
.area-map .map-main a {
  color: #000;
}
/* 
------------------------------------------------*/
.new-release .article-title {
  text-align: center;
}
.new-release .title {
  font-size: 1rem;
  padding: 0.3rem 0 6rem 0;
}

@media only screen and (max-width: 40em) {
.new-release .title {
  padding: 0.3rem 0 0rem 0;
}
}
.new-release .release-header {
  padding: 3rem 0;
}
.new-release .release-title {
  font-size: 3rem;
}
.new-release .entry {
  display: block;
}
.new-release .description {
  padding: 0 0 1rem 0;
  min-height: 8rem;/*  background-color: #ff0000;*/
}
.new-release .type {
  font-size: 1.2rem;
}
.new-release .label {
  display: inline-block;
  padding: 0.2rem 2rem;
  font-size: 0.8rem;
  color: #000;
  background-color: #fff;
}
.new-release .image {
  text-align: center;
  padding: 0 0 5rem 0;
}
/*
---------------------------------------------------------
second 
---------------------------------------------------------
*/
.second .page-title {
  padding: 13rem 0 6rem 0;
}

@media only screen and (max-width: 40em) {
.second .page-title {
  padding: 4.5rem 0 6rem 0;
}
}
.second .page-title img {
  width: 100%;
  height: auto;
}
/*  */
.second .section {
  padding: 0 0 6rem 0;
}
.second .section-title {
  padding: 0 0 2rem 0;
}
.second .section-title img {
  vertical-align: middle;
  margin: -0.3rem 0.5rem 0 0;
}
.second .border-box {
  padding: 1rem;
  border: solid 1px #fff;
  margin: 1rem;
}
.second .border-box.bg-box {
  background-color: #111111;
  border: solid 1px #333333 !important;
}
.second .lnav {
  padding: 0 0 6rem 0;
}
.second .lnav a {
  font-size: 1.2rem;
}
/*
---------------------------------------------------------
 news detail
---------------------------------------------------------
*/
.news-detail {
}
.news-detail .social {
  padding: 4rem 0;
}
/*
---------------------------------------------------------
1611251523 テーブル
---------------------------------------------------------
*/
.sample-list {
  width: 100%;
  min-width: 1100px;
}

@media only screen and (max-width: 40em) {
.sample-list {
  font-size: 0.8rem;
  min-width: 700px;
}
}
.sample-list *,
 .sample-list tbody,
 .sample-list tbody tr:nth-child(even),
 .sample-list tr,
 .sample-list th,
 .sample-list td {
  background-color: transparent;
  border: none;
}
.sample-list th,
 .sample-list td {
  vertical-align: top;
}
.sample-list th {
  text-align: left;
  background-color: #fff;
  color: #000;
  border-right: 2px solid #000;
}
.sample-list td {
  border-bottom: 1px solid #fff;
}
.sample-list .item1 {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

@media only screen and (max-width: 40em) {
.sample-list .item1 {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  width: 2rem;
  text-align: center;
}
}

@media only screen and (max-width: 40em) {
.sample-list .item2 {
  width: 250px;
}
.sample-list .item3 {
  width: 200px;
}
}
.table-scroll {
  overflow-x: auto
}
.table-scroll table {
  width: auto
}
.sp .table-scroll {
  /*-webkit-overflow-scrolling: touch;*/
  margin-bottom: 30px;
}
 .table-scroll::-webkit-scrollbar {
                    /* 横方向のスクロールバー本体 */
                    height: 10px;
 width: 60px;
 background: #1e1e1e;
}
 .table-scroll::-webkit-scrollbar-track {
                    /* スクロールバーの動く部分 */
                    background: #1e1e1e;
}
 .table-scroll::-webkit-scrollbar-thumb {
                    /* 横方向のスクロールバーの動く部分 */
                    background: #a3a3a3;
}

/*
---------------------------------------------------------
Media Queries
---------------------------------------------------------
*/


/* Small screens
------------------------------------------------*/

@media only screen {
}

/* Define mobile styles */

@media only screen and (max-width: 40em) {
}

/* max-width 640px, mobile-only styles, use when QAing mobile issues */


/* Medium screens
------------------------------------------------*/

@media only screen and (min-width: 40.063em) {
}

/* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
}

/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */


/* Large screens
------------------------------------------------*/

@media only screen and (min-width: 64.063em) {
}

/* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) {
}

/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */


/* XLarge screens
------------------------------------------------*/

@media only screen and (min-width: 90.063em) {
}

/* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) {
}

/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */


/* XXLarge screens
------------------------------------------------*/

@media only screen and (min-width: 120.063em) {
}


/* min-width 1921px, xxlarge screens */