@charset "utf-8";
/* CSS Document */

/*--- mobile layout ---*/
#mobile {
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
    background-image: url("../images/mcontent/mbackground.jpg");
    background-size: contain;
	background-repeat:repeat-y;
	overflow:auto;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling: touch;
	-moz-overflow-scrolling: touch;
	-o-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

.mtop {
	position: fixed;
	top:0;
	left:0;
	width:100vw;
	z-index:1;
}

.mtop input {
	display: none;
}

.mtop label {
	cursor:default;
}

.mtopbg{
    position: absolute;
    top: 0;
    left: 0;
	width:100vw;
    z-index: 1;
    /*background: #803738;*/
}

.mtopbg img {
    width: 100%;
}

.mtop input[type=checkbox]:checked~ .mmenu {
	left: 0;
}

.mmenubtn {
	position: fixed;
	/*background: #5DFFA1;*/
	border:0.2vw #ffe100 solid;
	border-radius:1vw;
	top:33vw;
	left:4.5vw;
	width: 8vw;
	height: 7vw;
	z-index: 3;
}

.mfbbutton {
    position: fixed;
    top: 24vw;
    left: 3.2vw;
    height: 4.7vw;
    z-index: 3;
}

.mfbbutton img{
    height: 100%;
}

.migbutton {
    position: fixed;
    top: 24vw;
    left: 10vw;
    height: 4.7vw;
    z-index: 3;
}

.migbutton img{
    height: 100%;
}

.mytbutton {
    position: fixed;
    top: 24vw;
    left: 17vw;
    height: 4.7vw;
    z-index: 3;
}

.mytbutton img{
    height: 100%;
}

.backtotop {
	position:fixed;
	/*background: #5DFFA1;*/
	border:0.2vw #640000 solid;
	border-radius:1vw;
	bottom:12vw;
	right:6vw;
	width: 8vw;
	height: 7vw;
	z-index: 6;
	/*display:none;*/
}

.bttlleft {
	position: relative;
	background: #640000;
	border-radius: 1.5vw;
	top: 3.3vw;
	left: 0.5vw;
	width: 4vw;
	height: 0.5vw;
	transform: rotate(-45deg) translate(0.2vw,-0.2vw);
}

.bttlright {
	position: relative;
	background: #640000;
	border-radius: 1.5vw;
	top: 3.3vw;
	left: 3.4vw;
	width: 4vw;
	height: 0.5vw;
	transform: rotate(45deg) translate(-0.5vw,-0.5vw);
}

.mbl {
	position: relative;
	background: #ffe100;
	border-radius: 1.5vw;
	top: 3.3vw;
	left: 1vw;
	width: 6vw;
	height: 0.5vw;
	transition:all 0.3s ease-in-out;
}

.mbl:before {
	top: -1.7vw;
}

.mbl:after {
	top: 1.7vw;
}

.mbl:before, .mbl:after {
	position: absolute;
	background: #ffe100;
	border-radius: 1.5vw;
	width: 6vw;
	height: 0.5vw;
	content: "";
	transition:all 0.3s ease-in-out;
}

.mtop input[type=checkbox]:checked ~ .mmenubtn .mbl {
	background: transparent;
}

.mtop input[type=checkbox]:checked ~ .mmenubtn .mbl:before {
	transform: rotate(45deg) translate(1.2vw,1.2vw);
}

.mtop input[type=checkbox]:checked ~ .mmenubtn .mbl:after {
	transform: rotate(-45deg) translate(1.2vw,-1.2vw);
}

.mmenu {
	position:absolute;
	background:rgba(55,35,35,0.9);
	top:44vw;
	left:-100vw;
	width:100vw;
	height:90vw;
	transition: left 0.5s;
	z-index:2;
}

.mmenu a {
	cursor:default;
}

.mmenu img {
	width:100%;
}

.mnewsmenu {
	position:relative;
	top:7vw;
	left:50vw;
	width: 25vw;
	padding:3.5vw;
	margin-left:-17vw;
}

.mnewsmenu img {
	width:100%;
}

.maboutmenu {
	position:relative;
	top:7vw;
	left:50vw;
	width:29vw;
	padding:3.5vw;
	margin-left:-18.6vw;
}

.maboutmenu img {
	width:100%;
}

.mlecturemenu {
	position:relative;
	top:7vw;
	left:50vw;
	width:35vw;
	padding:3.5vw;
	margin-left:-22.5vw;
}

.mlecturemenu img {
	width:100%;
}

.mcharitablemenu {
	position:relative;
	top:7vw;
	left:50vw;
	width:41vw;
	padding:3.5vw;
	margin-left:-25.5vw;
}

.mcharitablemenu img {
	width:100%;
}

.mcontactmenu {
	position:relative;
	top:7vw;
	left:50vw;
	width:25vw;
	padding:3.5vw;
	margin-left:-17vw;
}

.mcontactmenu img {
	width:100%;
}

.mcontent {
	position:relative;
	width:100vw;
}

#mnewscontent {
	position:relative;
	width:100vw;
}

#maboutcontent {
	position:relative;
	width:100vw;
}

#mlecturecontent {
	position:relative;
	width:100vw;
}

#mcharitablecontent {
	position:relative;
	width:100vw;
}

#mcontactcontent {
	position:relative;
	width:100vw;
}
/*--- End of mobile layout ---*/