@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
}
html {
	overflow: auto;
	font-size: 14px;
}
body {
	background: #fffafa;
}
img {
	width: 100%;
	vertical-align: bottom;
}
.pc_br {
    display: none;
}
ul li {
	list-style: none;
    font-family: 'Montserrat', sans-serif;    
}
a {
	font-size: 0.8rem;
	text-decoration: none;
}
small {
	font-size: 0.7em;
}
h1 {
    font-family: 'Oswald', sans-serif;
    line-height: 0.7;
    text-align: center;
    margin: 10px 0;
}
.talk_event {
	display: flex;
	max-width: 900px;
	padding: 5px;	
	justify-content: center;
}
.talk_event > p {
	margin-right: 2%;
	text-align: left;
}
.talk_event > img {
	width: 30%;
	max-width: 180px;
}
.tx_c {
	text-align: center;
}
.tx_l {
	text-align: left;
}
.tx_r {
	text-align: right;
}

.site_link a {
	font-size: 0.8em;	
	color: #000;
	border-bottom: solid 1px #333;
	background: #fff;	
}
h1 > span {
    font-family: 'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
    font-size: 0.4em;
    line-height: 1;
    font-weight: normal;
}
.s_txt {
	font-size: 0.7em;
	line-height: 1.5;
}
.category {
	margin: 20px 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
	font-size: 1em
}

.category::before,
.category::after {
	content: '';
	width: 70px;
	height: 1px;
	background-color: #333;
}

.category::before {
	margin-right: 20px;
}
.category::after {
	margin-left: 20px;
}
.category_txt {
	font-size: 0.9em;
}

main,footer {
	position: relative;
	top: 50px;
}

/*========= モーダル表示のためのCSS ===============*/

.movie-content-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movie-content-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mfp-content {
	max-width: 800px;
	padding-top: 44px;
}
.mfp-fade01.mfp-bg {
	opacity: 0;
	transition: all 0.2s ease-out;
}
.mfp-fade01.mfp-bg.mfp-ready {
	opacity: 0.7;
}
.mfp-fade01.mfp-bg.mfp-removing {
	opacity: 0;
}
.mfp-fade01.mfp-wrap .mfp-content {
	opacity: 0;
	transition: all 0.2s ease-out;
}
.mfp-fade01.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade01.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}
/*----------- header -----------*/

header {
    text-align: center;
	width:100%;
	position: fixed; 
	z-index: 1000; 
	background: #000;
	top: 0;
}
header > div {
    position: relative;
	height: 50px;
}
.logo a img {
    width: auto;
	max-height: 20px;
	margin: 15px 0;
    box-sizing: border-box;
    animation-name: logofadeIn;
    animation-duration: 3s;
    animation-fill-mode: forwards;    
}

@keyframes logofadeIn { 
  0% {opacity: 0;} 
  100% {opacity: 1}; 
}



nav ul {
	display: none;
    height: 100vh;
	flex-direction: column;
    text-align: center;
	position: absolute;
	top: 48px;
	width: 100vw;
	background: rgba(0,0,0,0.7);
    z-index: 10;
}
nav ul li:not(:last-of-type){
	border-bottom: solid 1px #777;
}
nav ul li a {
	display: block;
	font-size: 1.2em;
    color: #fff;
    padding: 20px 0;
}
nav ul li a > span {
    font-size: 0.7em;
}
.fade:hover {
    animation-name: fadeIn;
    animation-duration: 0.7s;
    animation-fill-mode: both;
}
@keyframes fadeIn { 
  0% {color: #fff;} 
  100% {color: #daa520;} 
}

/*=============================
.btn-trigger
=============================*/
.btn-trigger {
  position: relative;
  width: 25px;
  height: 22px;
  cursor: pointer;
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 10px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}


/*=============================
#btn01
=============================*/
#btn01 {
    position: absolute;
    top: 16px;
    right: 16px;
}
#btn01.active span:nth-of-type(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
#btn01.active span:nth-of-type(2) {
  opacity: 0;
}
#btn01.active span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
  transform: translateY(-10px) rotate(45deg);
}
/*----------- article -----------*/
article {
	top: 50px;
    position: relative;
}
.main_img > p {
    display: none
}
.main_img {
    width: 100%;
	height: 200px;
    background: url(../images/top/top_img.jpg);
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;  
    z-index: -100;
}
.main_img::before {
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

/*----------- main -----------*/

.menu {
	width: calc(100% - 20px);
	margin: 0 auto;
}
.title {
    line-height: 1;    
}
/*----------- about -----------*/
.about {
    margin-bottom: 50px;
}
about > p:first-of-type {
    margin: 20px auto;
	text-align: center;
}

.dl_btn a {
    display: inline-block;
    border: solid 1px #000;
    padding: 5px 10px;
    color: #000;
    font-weight: bold;
    text-align: center;
    line-height: 1.4em;
}
.dl_btn a:hover {
    background: #cca952;
}
.end_txt {
    text-align: center;
    margin: 20px 0;
}
.event_btn a {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 1.4em;
    background: #000;
}
.event_btn a:hover {
    background: #cca952;
}
/*----------- Event -----------*/
.event_list {
    margin: 0 0 100px;
}
.event_list > div {
    text-align: center;
}
.event_list > div > h2 {
    max-width: 900px;
    margin: 0 auto;
    padding: 5px;
    font-size: 1.3em;
    border-top: dotted 1px #000;
    border-bottom: dotted 1px #000;
}
.event_list > div > p {
    max-width: 900px;
    margin: 0 auto;
    padding: 5px;
    font-size: 1em;
}
.price {
	max-width: 500px;	
	text-align: left;
	margin: 10px auto;
}
.price_small {
	max-width: 500px;
	margin: 10px auto;
	text-align: left;
	font-size: 0.8em;
	line-height: 1.5;	
}
.price_small > a {
	color: #000;
}


.sample_img {
	min-width: 140px;
	padding:  10px;
	box-sizing: border-box;
	font-size: 0.7em;
}
.biiku {
	margin: 10px 0;
	max-width: 300px;
}
.amamizu {
	margin-bottom: 3px;
	display: inline-block;
	font-weight: bold;
	font-size: 1rem;
	color: #333;
	border-bottom: solid 1px #333;
}
.amamizu:hover {
	opacity: .7;
}

.event_pic {
	max-width: 600px;
	margin: 0 auto;
	display: flex;	
	justify-content: flex-end;
}
.biiku_pic {
	width: 60%;
}
.biiku_pic > p {
	text-align: left;
	font-size: 0.8em;
}
.event_pic > p {
	padding: 10px;
}
.event_pic > p:nth-of-type(1) {
	width: 40%; 
	max-width: 300px;	
}

.event_pic > p:nth-of-type(2) {
	width: 40%; 
	max-width: 300px;	
}
.event_pic > p:nth-of-type(3) {
	width: 20%;
	max-width: 200px;	
}
.event_fl {
	width: 40%;
	display: flex;
	flex-direction: column;
}
/*----------- movie -----------*/
.mov {
	margin-bottom: 80px;
}
.mov_area > a,.mov_area > a:visited  {
    color: #000;
}
.fl {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.mov_area {
	width: calc(96% / 2);	
	margin: 1%;
    height: auto;
}
.mov_btn {
    border: solid 1px #d8dfe6;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 7px;
}
.mov_btn_click {
    border: solid 1px #d8dfe6;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 7px;
	background: #d8dfe6;
}
.mov_btn:hover {
    opacity: 0.7;
}
.mov_img {
	position: relative;
	overflow: hidden;
	width: 100%; 
	height: 100px; 
}
.mov_img img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}
.mov_img > img {
	min-height: 90px;
}
.mov_title {
	font-size: 0.9rem;
    text-align: center;    
    margin: 5px 0 0;
    line-height: 1.3;
}
.column_btn {
	margin: 1% 0  40px;
	text-align: center;
}
.column_btn > a p:hover {
	background: #b3881b;
	color: #fff;
}
.column_btn > a p {
	display: inline-block;
	font-size: 1rem;
	padding: 5px 15px;
	border: solid 1px #333;
	color: #333;
	background: #fff;
	box-shadow: 5px 5px 0 #ccc;
	font-weight: bold;
}
.column_btn > a > p > span {
	font-size: 1.2em;
}


@media screen and (min-width: 751px) {
	.mov_area {
		width: calc(94% / 3);	
		margin: 1%;
	}	
	.mov_img {
		height: 120px; 
	}	
}


/*---====== movie_caption ======---*/
/*----------- slider -----------*/
#movie_area {
	max-width: 1000px;
	margin: 0 auto 80px;

}
.caption,.story {
	width: calc(100% - 40px);
	margin: 20px auto;
}
.caption > .movie_title:nth-of-type(2) {
margin-top: 20px;}

.slider > div {
	max-width: 500px;
	height: auto;
	margin: 0 auto;
	position: relative;
}
.slider > div > ul {
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	font-size:0;
	overflow:hidden;
	white-space:nowrap;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
}
.slider img {
	width:100%;
	height:100%;
	object-fit:contain;
	image-rendering:-webkit-optimize-contrast;
}
.slider > div > ul > li {
	list-style:none;
	display:inline-block;
	scroll-snap-align:center;
	width:100%;
	height:100%;
}
.slider .arrow:before {
	content:'';
	position:absolute;
	width:10px;
	height:10px;
	border-left:4px solid gray;
	border-bottom:4px solid gray;
}
.slider .arrow {
	top:0;
	position:absolute;
	width:8%;
	height:100%;
	background:rgba(255,255,255,0);
	cursor:pointer;
}
.slider .arrow:hover {
	background:rgba(255,255,255,0.3);
}
.slider .left {
	left:0px;
}
.slider .left:before {
	top:calc(50% - 10px);
	left:calc(50% - 4px);
	transform:rotate(45deg);
}
.slider .right {
	right:0;
}
.slider .right:before {
	top:calc(50% - 10px);
	right:calc(50% - 6px);
	transform:rotate(-135deg);
}


.flag {
	margin-bottom: 5px;
}
.flag > img {
	width: 50px;
	border: solid 1px #ccc;
}
.flag > img:first-of-type {
	margin-right: 3px;
}
.flag > img:not(:first-of-type) {
	margin: 0 3px;
}
.cap_txt ,.story_txt{
	margin: 10px 0 ;
	font-size: 1rem;
}
.kokuchi {
	background: #ccc;	
	margin-bottom: 20px;
	display: inline-block;
}
.tag_area {
	margin: 5px 0;
}
.tag1 {
	display: inline-block;
    background: #33C;
    color: #fff;
    padding: 3px 10px;
    font-weight: bold;
    border-radius: 3px;	
}









@media screen and (max-width:480px) {
	.slider > div > ul {
		overflow-x:auto;
	}
}
.slider .thumbs {
	max-width: 500px;
	list-style:none;
	margin: 0 auto;
	padding:0;
	font-size:0;
}
.slider .thumbs li {
	display:inline-block;
	cursor:pointer;
	width: 25%;
	opacity:0.5;
	margin-top: 3px;
}
.slider .thumbs li.selected {
	opacity:1;
}
.slider .thumbs img {
	width:100%;
	object-fit:contain;
	padding:0;
}
@media screen and (min-width: 751px) {
	#movie_area {
		top: 0;
	}	
	.movie_caption  {
		display: flex;
		justify-content: center;
		align-items: flex-start;
	}
	.caption {
		width: 60%;
		margin: 0 auto 20px;
		padding-left: 30px;
		box-sizing: border-box;		
	}	
	.story {
		width: 100%;
	}
}



/*----------- attention -----------*/
.attention {
    margin: 100px auto;
    width: calc(100% - 20px);  
}
.attention > h2 {
    margin: 30px 0 10px;
    font-size: 1.3em    
}
.attention_box {
	max-width: 600px;
	margin: 0 auto;
    display: flex;
    flex-wrap: wrap;	
}
.attention_box > p {
	width: calc(96% / 2);
	min-width: 120px;
    font-size: 0.8em;
    line-height: 1.2em;
    text-align: center;
}
.attention > div > p > img {
    width: 50%;
    margin: 5px 0;
    min-width: 120px;   
}
.attention ul {
    margin: 10px 0;
}
.attention_txt li {
    list-style: circle;
    margin-left: 1em;      
}
.attention_red {
    color: #dc143c;
}
.attention > p > a {
    font-weight: bold;
    color: #000;
    display: inline-block;
    margin-bottom: 10px;
    border-bottom: solid 1px #000;
}
.attention > p > a:hover {
    opacity: .7;
}
.ticket {
    color: #b3881b;
}
.ticket > span {
    font-size: 0.9em;
    padding: 4px 8px;
    margin-right: 10px;
    border: solid 1px #b3881b;
    color: #b3881b;
}
.attention_small {
    font-size: 0.8em;
}
.attention_small li {
    text-indent: -1em;
    padding-left: 1em;   
    list-style: none;    
}
.attention_txt2 li {
    text-indent: -1em;
    padding-left: 1em;   
    list-style: none;    
}
.attention_txt2 > li::before {
    content:  "◎";
}
.special_gift {
    display: inline-block;
    margin: 20px 0 5px;
    padding: 5px 10px;
    color: #fff;
    background: #dc143c;
}
.ticket_buy {
    margin-top: 20px;
}
.ticket_buy_txt {
    font-size: 1.1em;
}
.ticket_buy_txt > span {
    font-weight: bold;
    font-size: 0.9em;
    padding: 4px 8px;
    margin-right: 10px;
    border: solid 1px #000; 
}
.pay_area {
    max-width: 200px; 
    display: block;
    padding: 5px 10px;
    margin: 10px 0;
    border: solid 1px #000;
}
.pay_area > div {
    display: flex;
    justify-content: space-around;
    padding: 10px 0 0;
}
/*----------- Schedule -----------*/
.schedule_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.schedule {
    width: 48%;
    margin: 1%;
    text-align: center;
    box-sizing: border-box;
    border: solid 1px #000;
	position: relative;
}
.afternoon1,.afternoon2 {
	width: 100%;
	position: absolute;
}
.afternoon1 {
	top: 8em;
}
.afternoon2 {
	top: 10em;
}

.schedule > .day {
    background: #000;
    font-size: 1.2em;
    font-weight: bold;
    padding: 5px 0;  
    color: #fff;
}
.schedule > .red {
	color: #ffc0cb;
}
.schedule > .blue {
	color: #bfdfff;
}
.schedule > .day > span {
    font-size: 0.8em;
}

.time {
    background: #f5ecdc;
    padding: 3px 0;
    font-size: 1.1em;      
}
.schedule_box {
    padding: 10px 3px;
}
.schedule_box > .mov_title {
    font-size: 1em;
    line-height: 1.1em;
    font-weight: bold;
    margin: 0;
}
.schedule_box > .mov_title > span {
    font-size: 0.6em;
}
.mov_box {
    display: inline-block;
    margin: 5px 0;
    padding: 0 10px;
    background: #777;
    color: #fff;
    font-size: 0.7em;
    border-radius: 3px;
}
.mov_time {
    font-size: 0.8em;
}
.talk {
    background: #b3881b;
    color: #fff;
    font-weight: bold;
    padding: 3px 0;
    font-size: 1.1em;      
}
/*----------- FOOD -----------*/


#food {
    margin: 50px auto 80px;
}
#food > h1 img {
    max-width: 500px;
}
.food_shop {
	margin: 0 auto;	
}
.fa-facebook-square:before {
    content: "\f082";
}
.shop_area {
    display: flex;
    flex-wrap: wrap;
}
.shop {
    width: 100%; 
	max-width: 350px;
	margin: 10px auto;
    border: #EAB08E 1px solid;
    background: #FCFFDB;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;    
}
.shop > div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 10px;
}
.present_store a {
    color: #000;
    font-weight: bold;
    font-size: 1.2em; 
    line-height: 1;
}
.no_sub {
    margin-bottom: 2em;
}
.present_store i {
    font-size: 1.3em;
    color: #3b5998;
    margin-right: 10px;
}
.sub_small{
    font-size: 0.7em;
    padding-left: 1.5em; 
}
.present_name {
    width: 50%;
    font-size: 1em;
    line-height: 1.5em;
    font-weight: bold;
    color: #dc143c;
    text-align: center;
    transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);    
}
.present_pct {
    width: 50%;
    min-width: 130px;
}
.present_img > img {
    width: 110px;
    padding: 10px;
    
}
address {
    font-style: normal;    
    font-size: 0.8em;
}
.shop a {
    color: #000;
}
.tel {
    background: #555;
    color: #fff;
    padding: 3px 5px;
    margin-right: 3px;
    border-radius: 2px;
}
.small {
    font-size: 0.8em;
    display: inline-block;
}
@media screen and (min-width: 551px)  {
	.shop {
		width: calc(96% / 2); 
		margin: 1% auto;
	}	
}	
@media screen and (min-width: 1000px)  {
	.shop {
		width: calc(94% / 3); 
		margin: 1%;
	}	
}
	
/*--------- ご協賛企業 ---------*/	
.sponser > ul {
	display: flex;
	align-items: center;
}	
.sponser > ul > li {
	padding: 10px;
	box-sizing: border-box;
}	
.sponser > ul > li:first-of-type {
	width: 40%;
}
.sponser > ul > li:not(:first-of-type) {
	width: 20%;
}
/*----------- プロフィール -----------*/
.prof {
	display: flex;
	justify-content: center;
	max-width: 800px;
	margin: 10px auto;
	box-sizing: border-box;
	padding: 20px;
	border-bottom: solid 1px #ccc;	
	
}
.prof_img {
	width: 30%;
	max-width: 200px;
}
.prof_tx {
	width: 70%;
	padding-left: 20px;
	box-sizing: border-box;
}
.prof_name {
	margin: 10px 0;
}
.prof_tx > p:nth-of-type(2) {
	font-size: 0.9em;
}

.clm {
	width: calc(100% - 40px);
	margin: 50px auto;
}
.clm > h2 {
	margin-bottom: 20px;
}
.clm > .tx_r {
	margin: 20px 0;
}


@media screen and (min-width: 751px) {
	.prof {
		align-items: center;
		border: solid 1px #b3881b;		
	}	
}

/*----------- Access -----------*/
.map {
    max-width: 700px;
    margin: 0 auto;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}
.map iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
/*----------- Archive -----------*/
#archive {
    max-width: 500px;
    margin: 50px auto;
}
#archive > div {
	width: 100%;
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#archive > div > p a {
    text-align: center;
    width: 80px;
    box-sizing: border-box;
    color: #000;
    display: block;
    margin: 5px 0 10px;
    padding: 3px 10px;
    font-size: 1em;

}
#archive > div > p:not(:last-of-type) a {
    border-right: solid 1px #000;    
}

/*----------- supporter -----------*/
.supporter {
    margin: 0 auto;
    background: #e6e6e6;
    padding: 30px 0;
}


.supporter_inr {
    margin: 10px;
}
.supporter_inr dt {
    width: 88px;
    float: left;
    clear: both;
    font-weight: bold;
}
.supporter_inr dd {
    padding: 0 0 5px 95px;
}


/*footer*/
footer {
	margin-top: 50px;
}

.copy {
    text-align: center;
	width: 100%;
	margin: 0 auto;
    padding: 10px 0 15px;
	font-size: 0.8rem;
	line-height: 1.5rem;
	border-top: 0;
	color: white;
	background: #000;
}




/*--------- scrollTop ---------*/
#fixedTop {
	position: fixed;
	bottom: 10%;
	right: 5px;
	z-index: 9999;
}
#fixedTop .fas {
	color: rgba(0,0,0,0.6);
	font-size: 50px;
}

/*--------- scroll animation ---------*/
.scroll-animation-obj {
  opacity: 0;
  transition: all 0.5s ease 0.5s;
}

.scroll-animation-right {
  transform: translate(120px,0);
}
/* --------- 750px以上 ---------- */
@media screen and (min-width: 751px) {
	html {
		font-size: 16px;
	}	
	main,footer {
		position: relative;
		top: 150px;
	}	

    .sp_br {
        display: none;
    }
    .pc_br {
        display: block;
    }  
    .hr_txt {
        text-align: center;
    }
    .pc_center {
        text-align: center;
    }
    header {
        text-align: center;
        width:100%;
        height: 100px;
        position: fixed; 
        z-index: 1000; 
        background: #000;
    }
	.logo a img {
		max-height: 30px;
		margin: 10px 0; 
	}	
	article {
		top: 30px;
	}
    .btn-trigger  {
        display: none;
    }
    body {
        background: url(../imgs/bg.jpg);
    }
    
    .main_img {
		position: relative;
		top: 70px;
        height: 450px;
    }
   
    main {
        width: 90%;
        max-width: 1000px;
        margin: 0 auto;
    }


    nav ul {
		display: flex;
        width: 100%;
        height: auto;
        background: #000;
        flex-direction: row;
        justify-content: center;
    }

    nav ul li {
        width: 25%;
        max-width: 135px;
    }
 
    nav ul li a > span {
        font-size: 0.6em;
    }    
    nav ul li:not(:last-of-type){
        border-bottom: 0;
    }

    nav ul li a {
        display: block;
        line-height: 1;
        color: white;
        font-size: 1.2em;
        box-sizing: border-box;
        padding: 5px;        
    }
	.attention_box > p {
		width: calc(92% / 4);
		margin: 1% auto;
	}
    .oisca, .others {
        padding: 20px 50px;
    } 
    .schedule {
        max-width: 250px;

    }   
	#archive > div {
		justify-content: flex-start;
	}	
    .fb {
        margin: 40px auto;
        display: flex;
    }


  
	.biiku_tx {
		max-width: 900px;
		margin: 0 auto;
		display: flex;
		align-items: flex-end
	}

    
}