﻿@charset "UTF-8";

/*---------------------------------------------------
common
---------------------------------------------------*/
div.topConts {
    position: relative;
    padding: 0;
    background: #f9f9f9;
    width: 100%;
}
div.topConts div.cntTtlSet {
    width: 100%;
    text-align: center;
    margin: 40px auto;
    position: relative;
}
div.topConts div.cntTtlSet::after{
    line-height: 1em;
    content: "Event";
    display: block;
    position: absolute;
    left: 102%;
    top: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    z-index: 1;
    white-space: nowrap;
}

div.topConts div.cntTtlSet h1 {
     width: 90%;
    margin: 0 auto 10px;
    text-align: left;
}
div.topConts div.cntTtlSet p {
     width: 90%;
    margin: 0 auto;
    text-align: left;
}

@media screen and (min-width:641px) {
    div.topConts div.cntTtlSet h1 {
    text-align: center;
}
    div.topConts div.cntTtlSet p {
    text-align: center;
}
}

@media screen and (min-width:961px) {
}

@media screen and (min-width:1281px) {
    div.topConts div.cntTtlSet {
        margin: 80px auto;
    }
}

/* ==================================================
Body
================================================== */
.movieBlk{
    margin: 0 auto 0px;
    padding: 0 0 80px;
    width: 90%;
    max-width: 1100px;
    position: relative;
    z-index: 2;
}

.movieBlk .movSet {
    background-color: #fff;
    -webkit-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
    width: 100%;
    position: relative;
}

.entry-box {
	margin-bottom:20px;
	position:initial;
	top:40px;
	right:40px;
	text-align:center;
}

.movieBlk .movSet .entry-box p{
	padding:10px !important;
	margin-bottom:10px;
	border:solid 2px #ff0000;
	color:#ff0000;
	font-weight:bold;
	text-align:center;
}

.movieBlk .movSet .entry-box span{
	padding:20px;
	font-weight:bold;
	border-bottom:solid 1px #000;
}


.movieBlk .movSet .entry-box a{
	text-decoration:underline;
}

.movieBlk .movSet + .movSet{
    margin-top: 40px;
}

.movieBlk .movSet .movArea {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.movieBlk .movSet .movArea iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.movieBlk .movSet h3 {
  text-align: left;
    padding: 15px;
	font-size: 1.6em;
	line-height:1.4;
}

.movieBlk .movSet p {
  text-align: left;
    padding: 0 15px 15px;
}
@media screen and (min-width:641px) {
    .movieBlk{
    padding: 0 0 120px;
}
    .movieBlk .movSet + .movSet{
    margin-top: 70px;
}
.movieBlk .movSet h3 {
    padding: 20px;
}

.movieBlk .movSet p {
    padding: 0 20px 20px;
}
}
@media screen and (min-width:961px) {
		.entry-box {
			margin-bottom:20px;
			position:absolute;
			top:40px;
			right:40px;
			text-align:center;
		}

		.movieBlk .movSet .entry-box p{
			padding:10px !important;
			margin-bottom:5px;
			border:solid 2px #ff0000;
			color:#ff0000;
			font-weight:bold;
			text-align:center;
		}

		.movieBlk .movSet .entry-box span {
		    padding: 20px;
		    font-weight: bold;
		    border-bottom: none;
		}

		.movieBlk .movSet .entry-box a{
			text-decoration:underline;
		}
    .movieBlk{
    padding: 0 0 160px;
}
    .movieBlk .movSet + .movSet{
    margin-top: 100px;
}
.movieBlk .movSet h3 {
		font-size:1.8em;
    padding: 30px 30px 15px;
}

.movieBlk .movSet p {
    padding: 0 30px 30px;
}
}
@media screen and (min-width:1281px) {
	.movieBlk .movSet h3 {
	    padding: 40px 40px 20px;
	}

	.movieBlk .movSet p {
	    padding: 0 40px 40px;
	}

}


.timetable_ttl {
	font-size: 2.0rem;
	color:#fff;
	width:80%;
	margin:30px auto 10px;
	background-color:#4472c4;
	border-radius:10px;
	font-weight: bold;
	padding:5px;
}

.timetable {
	width:96%;
	margin:0 auto 30px;
	background-color:#dce5f4;
	border-radius:10px;
	padding:20px;
}

.program_timetable {
	width:94%;
	display:block;
	vertical-align:top;
	text-align:left;
	font-weight: bold;
	line-height: 2.6rem;
	font-size: 1.2rem;
}

@media screen and (min-width:761px) {

	.movieBlk .eventArea{
	    margin-bottom:6px;
	}

	.movieBlk .eventArea img{
	    width:800px;
	}

	.timetable_ttl {
		font-size: 2.2rem;
		color:#fff;
		width:30%;
		margin:30px auto 10px;
		background-color:#4472c4;
		border-radius:10px;
		font-weight: bold;
		padding:5px;
	}

	.timetable {
		width:96%;
		margin:0 auto 30px;
		background-color:#dce5f4;
		border-radius:10px;
		padding:20px;
	}

	.program_timetable {
		width:calc(98% / 3);
		display:inline-block;
		vertical-align:top;
		text-align:left;
		font-weight: bold;
		line-height: 2.6rem;
	}


}


.event_area {
	margin:0 auto;
	width:70%;
}

.event_btn {
		width:calc(98% / 2);
    display: inline-block;
}

.event_btn a {
    color: #fff;
    position: relative;
    display: block;
    border-radius: 20px;
    background: #29abe2;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 35%);
    padding: 20px;
    transition: all .2s ease-in-out;
    font-weight: bold;
		font-size: 1.8rem;
		text-align:center;
}

.event_btn.sun a {
    background: #e24229;
}

.event_btn_long {
    width: 80%;
    display: block;
    text-align: center !important;
    color: #fff;
    position: relative;
    display: block;
    border-radius: 20px;
    background: #e24229;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 35%);
    padding: 20px;
    transition: all .2s ease-in-out;
    font-weight: bold;
    font-size: 1.8rem;
    text-align: center;
    padding: 20px !important;
    margin: 60px auto 20px;
}

.vol1 {
  margin: 0 auto 0px;
  font-weight: bold;
  font-size: 1.8rem;
  text-decoration: underline;
  text-align: center !important;
}



@media screen and (max-width:761px) {

	.event_area {
		margin:0 auto;
		width:100%;
	}

	.event_btn {
			width:100%;
	    display: block;
	}

	.event_btn a::after {
  	  top: calc(50% - 8px);
	    right: 15px;
	}

}