@charset "utf-8";
/* CSS Document */

.sakura {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  position: fixed;
  animation: animate-leaf 8s linear, sway 2s ease-in-out infinite alternate;
  z-index: 100;
}

.sakura-1 {
  background-image: url('img/sakura-1.png');
}

.sakura-2 {
  background-image: url('img/sakura-2.png');
}

.sakura-3 {
  background-image: url('img/sakura-3.png');
}

.sakura-4 {
  background-image: url('img/sakura-4.png');
}

body {
	background-color: #191919;
	margin: 0;
	padding: 0;
	font-family: "Shippori Mincho B1", serif;
	color: #fff;
}

ul {
	margin: 0;
	padding: 0;
}

.ocs_background {
	width: 100%;
}

.ocs_container {
	width: 768px;
	margin: 0 auto;
	position: relative;
}

.ocs_header {
	background-color: #a34646;
	height: 2vw;
	width: 100%;
}

.story_context {
	font-size: 1.1vw;
}

.story_context2 {
	font-size: 2vw;
}

.ocs_title {
	display: flex;
	align-items: center;
	margin-top: 32px;
}

.ocs_title div {
	max-width: 30%;
	padding-left: 1.5%;
	padding-right: 1.5%;
}

.ocs_container img {
	width: 100%;
}

.context_logo {
	width: 20%;	
	margin: 100px auto 32px auto;
}

.context_logo_cast {
	width: 15% !important;	
}

.context_logo_staff {
	width: 15% !important;	
}

.context_logo_schedule {
	width: 62% !important; 
}

.context_logo_access {
	width: 25% !important;
}

.cast_list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 0;
	justify-content: center;
}

.cast_list_player {
	margin-bottom: 8px;
}

.cast_list li {
	max-width: 42%;
	padding-left: 4%;
	padding-right: 4%;
	color: #9fa0a0;
	text-align: center;
	margin-bottom: 6vw;
}

.cast_list_name {
	font-size: 1.5vw;
}

.cast_list_yaku {
	font-size: 1vw;
}

.cast_list_artist {
	width: 44%;
	margin: 8px auto;
}

.cast_list_artist_karino {
	width: 33% !important;
}

.cast_list_artist_gotou {
	width: 52% !important;
}

.cast_list_top {
	margin-top: 6vw;
}

.staff_list {
	font-size: 0;
}

.staff_list li {
	font-size: 1vw;
	margin: 0.5vw auto;
	text-align: center;
	list-style: none;
}

.staff_list_position {
	color: #9fa0a0;
}

.ocs_access {
	margin-bottom: 20vw;
}

.text_center {
	margin: 0 auto;
}

.sche_1 {
	width: 77%;
	margin-bottom: 5vw !important;
}

.sche_2 {
	width: 73%;
	margin-bottom: 5vw !important;
}

.sche_3 {
	width: 90%;
	margin-bottom: 3vw !important;
}

.sche_4 {
	width: 67%;
	margin-bottom: 1vw !important;
}

.sche_5 {
	width: 45%;
}

.access_1 {
	width: 82%;
	margin-bottom: 3vw !important;
}

.access_2 {
	width: 75%;
	margin-bottom: 3vw !important;
}

.ocs_schedule {
	text-align: center;
	font-size: 1.5vw;
}

.ocs_schedule a {
	color: #aaffff;
}

.ocs_link {
	margin: 32px auto 64px auto;
	font-size: 2vw;
	text-align: center;
}

.ocs_link a {
	color: #fff;
}

@media screen and (min-width: 769px) {
	.cast_list_artist_matuzaki {
		width: 100% !important;
	}
}

@media screen and (max-width: 768px) {
	.ocs_container {
		width: 94%;
		padding-left: 3%;
		padding-right: 3%;
		margin: 0 auto;
	}

	.story_context {
		font-size: 2.45vw;
	}

	.story_context2 {
		font-size: 4vw;
	}

	.cast_list_name {
		font-size: 3vw;
	}

	.cast_list_yaku {
		font-size: 2vw;
	}

	.ocs_schedule {
		font-size: 3.5vw;
	}

	.staff_list li {
		font-size: 3.5vw !important;
	}

	.ocs_link {
		margin: 10vw auto 30vw auto !important;
		font-size: 4vw;
	}
}

/* ===== 落ち葉が降るアニメーション ===== */
@keyframes sway {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(200px) rotate(90deg);
  }
}

@keyframes animate-leaf {
  0% {
    opacity: 0;
    top: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: 100vh;
  }
}