@charset "utf-8";
/*
 *  Copyright 2019 PASTORALE CO., LTD.
 *
 *  signage.css
 */

 body {
	color:#000000;
}

h1 {
	margin-bottom:0.5em;
	padding:0.1em 0;
	width:100%;
	font-size:200%;
	line-height:1;
	text-align:center;
	border-bottom:solid #cccccc 1px;
}

.top-mes {
	/* padding:1em 0 0 0; */
	/* text-align:center; */
	font-size:120%;
	font-weight:bold;
  flex: none;
  width: fit-content;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  margin: auto;
}

.top-mes #totalpage{
	margin:0 3px ;
	color:#0733e0;
	font-size:140%;
}

.top-mes #page{
	margin:0 3px ;
	color:#ff0000;
	font-size:140%;
}

#slider {
	width:96%;
	margin: 0 auto;
	overflow:hidden;
}

#slider-area {
	overflow:hidden;
}

#slider table {
	width: 100%;
  float:left;
	margin:0 10px 0 0;
	font-size:100%;
	border-collapse:collapse;
}

#slider table.table-head {
	float:none;
}

#slider table th {
	padding:2px 0;
	font-size:120%;
	border:solid #379c77 1px;
	background:#ececec;
}

#slider table td {
	padding:6px 5px;
	line-height:130%;
	font-size:140%;
	font-weight:bold;
	border:solid #aaaaaa 1px;
}

#slider table tr.trs1 {background:#fffff0;}
#slider table tr.trs2 {background:#e8e8ff;}

.day-mes{
  margin: auto;
	font-size:140%;
}

.telop, .title {
  width: 100%;
  height: calc(1em * 1.2);
  /* font-size: 1em; */
  line-height: calc(1em * 1.2);
  overflow: hidden;
  position: relative;
  list-style: none;
  background-color: rgba(0, 0, 0, 0.0);
  opacity: 0;
}
.title {
  position: fixed;
}
.title.left li {
  left: 0px;
}
.title.center li {
  width: fit-content;
  left: 0;
  right: 0;
  margin: auto;
}
.title.right li {
  right: 0px;
}
.telop.white li, .title.white li {
  color: white;
}
.telop.whiteBack, .title.whiteBack {
  background-color: rgba(255, 255, 255, 0.5);
}
.telop.blackBack, .title.blackBack {
  background-color: rgba(0, 0, 0, 0.5);
}
.telop.bold li, .title.bold li {
  font-weight: bold;
}
.telop.shadow1 li, .title.shadow1 li {
  text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
}
.telop.shadow2 li, .title.shadow2 li {
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 1.0);
}
.telop li, .title li {
  position: absolute;
  color: #333;
  white-space: nowrap;
  transition: transform 0s linear;
  opacity: 0;
}
.fadeOutDown {
  opacity: 1;
}
.fadeOutDown.run {
  animation: fadeOutDown 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.carousel-telop, .carousel-title {
  width: 100%;
  position: absolute;
  /* order: 4; */
}

.swiper {
  height: 100%;
  margin: auto;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.swiper-slide img.auto, .swiper-slide .youtube.auto {
  display: block;
  object-fit: contain;
  height: 100%;
  width: 100%;
  /* width: 50vw; */
}
.swiper-slide img.height, .swiper-slide .youtube.height {
  object-fit: cover;
  height: 100%;
}
.swiper-slide img.width, .swiper-slide .youtube.width {
  object-fit: cover;
  width: 100%;
  /* width: 50vw; */
}

#vwrap {
  height: 100vh;
  width: 100vw;
  display:flex;
  flex-direction:column;
  overflow: hidden;
}
#vwrap-head {
  width: 100%;
  flex: none;
  order:2;
}
#vwrap-content {
  width: 100%;
  flex: none;
  order:4;
  overflow: hidden;
}
#vwrap-telop {
  width: 100%;
  flex: none;
  order: 5;
}
#vwrap-telop.top {
  order: 1;
}
#vwrap-telop.middle {
  order: 3;
}
#hwrap {
  height:100%;
  display: flex;
  flex-direction: row;
}
#hwrap:has(>.right){
  flex-direction: row-reverse;
}
#hwrap-gallery {
  width: 50vw;
  flex: none;
  display: flex;
  flex-direction: column;
}
#hwrap-gallery.full {
  width: 100vw !important;
}
#hwrap-gallery:has(>.bottom) {
  flex-direction: column-reverse;
}
#carousel-title {
  flex: none;
  order: 1;
  position: relative;
}
#gallery-carousel {
  flex: none;
  order: 2;
}
#hwrap-day-mes {
  width: 100%;
  display: flex;
  align-items: center;
}
#hwrap-slider {
  width: 100%;
  position: relative;
}