@charset "UTF-8";
/*
Theme Name: ManaSys
Template: basic
Author: Trendmake
Copyright: (c) 2020 Trendmake
Version: 20200403
*/

/*******************************
Common Setting
*******************************/
body .site {
	font-family: a-otf-midashi-mi-ma31-pr6n, serif;
	font-family: 'Nuosu SIL',"HG正楷書体-PRO",a-otf-midashi-mi-ma31-pr6n,serif;
	font-weight: normal;
	font-style: normal;
}
.font--Time {
	font-family: "Times New Roman","游明朝", YuMincho, "ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","メイリオ", Meiryo,"ＭＳ Ｐ明朝", serif;
}
.font--Garamond{
	font-family: 'EB Garamond', serif;
}
body {
	font-family: 'YuGothic', 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', 'Meiryo', 'ＭＳ ゴシック', sans-serif;
	font-size: 16px;
	line-height: 2;
}

#content {
	padding: 0;
}
/* Those Classes change row_inner width,
   when you set the Themify Builder > Row Options > Row Width to Default and Boxed. */
.module_row > .row_inner,
.module-layout-part .module_row.fullwidth_row_container > .row_inner {
	width: 100%;
}

/*******************************
Header Fix
*******************************/
#header.header {
	height: auto;
	border-bottom: none;
}

/* Header Site Branding */
#site-logo,
#site-description {
	position: static;
}
#site-logo {
	line-height: 1;
}
#site-logo a,
#site-logo a img {
	display: block;
}
/* Search Form in Header */
#headerwrap #header #searchform {
	position: static;
}
#headerwrap #header #searchform #s {
	float: none;
}

	/* Mobile Menu Button */
	#menu-button{
		visibility:hidden;
		opacity:0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		z-index: 900;
		top: 0;
		right: 0;
		width: 48px;
		height: 48px;
		background-color: #fafafa;
	}
	#menu-button.nav-on {
		visibility:visible;
		opacity:1;
	}
	#menu-button .ham-lines {
		position: relative;
		margin: 0 auto;
		width: 32px;
		height: 32px;
	}
	#menu-button .ham-lines span,
	#menu-button .ham-lines::before,
	#menu-button .ham-lines::after {
		position: absolute;
		display: block;
		right: 0;
		left: 0;
		margin: 0 auto;
		width: 28px;
		height: 2px;
		background-color: #111;
		border-radius: 1px;
	}
	#menu-button .ham-lines span {
		bottom: 15px;
		transition: all .25s .25s;
		opacity: 1;
	}
	#menu-button .ham-lines::before,
	#menu-button .ham-lines::after {
		content: "";
	}
	#menu-button .ham-lines::before{
		bottom: 24px;
		animation: menu-bar01 .75s forwards;
	}
	#menu-button .ham-lines::after {
		bottom: 6px;
		animation: menu-bar03 .75s forwards;
	}
	#menu-button .ham-text {
		font-size: 12px;
		line-height: 1;
	}
	#menu-button.is-active .ham-lines span {
		opacity: 0;
	}
	#menu-button.is-active .ham-lines::before {
		animation: active-menu-bar01 .5s forwards;
	}
	#menu-button.is-active .ham-lines::after {
		animation: active-menu-bar03 .5s forwards;
	}
	@keyframes menu-bar01 {
		0% {
			transform: translateY(9px) rotate(45deg);
		}
		50% {
			transform: translateY(9px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}
	@keyframes menu-bar03 {
		0% {
			transform: translateY(-9px) rotate(-45deg);
		}
		50% {
			transform: translateY(-9px) rotate(0);
		}
		100% {
			transform: translateY(0) rotate(0);
		}
	}
	@keyframes active-menu-bar01 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(9px) rotate(0);
		}
		100% {
			transform: translateY(9px) rotate(45deg);
		}
	}
	@keyframes active-menu-bar03 {
		0% {
			transform: translateY(0) rotate(0);
		}
		50% {
			transform: translateY(-9px) rotate(0);
		}
		100% {
			transform: translateY(-9px) rotate(-45deg);
		}
	}
	/* Mobile Header Menu Container */
	nav.nav-off{
		display:none;
	}
	#main-menu-container.is-active {
		position: fixed;
		z-index: 700;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding-top: 64px;
		overflow-y: auto;
		background-color: rgba(0,0,0,.92);
		display:block;
	}
	/* Header Main Menu */
	#main-menu-container.is-active .main-menu,
	#main-menu-container.is-active .sub-menu {
		margin: 0;
		list-style: none;
	}
	#main-menu-container.is-active .menu-item {
		margin: 0;
		padding: 8px 0 0 16px;
	}
	#main-menu-container.is-active .main-menu {
		position: static;
		width: 100%;
		max-width: 94%;
		margin: 0 auto 16px;
		padding: 0;
		border: none;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
	}
	#main-menu-container.is-active .main-menu>li {
		margin: 0 16px;
		padding: 8px;
		border-bottom: dotted 1px #ccc;
	}
	#main-menu-container.is-active .main-menu>li:last-of-type {
		border-bottom: none;
	}
	#main-menu-container.is-active .main-menu li a {
		font-size: 16px;
		line-height: 2;
		color: #eee;
	}


/*******************************
Footer Fix
*******************************/
#footer {
	border-top: none;
	clear: none;
	padding: 0;
}
#pc-backtop {
	display: block;
	position: fixed;
	z-index: 500;
	bottom: 50px;
	right: 50px;
	opacity: 0;
	transition: opacity .3s;
}
#pc-backtop.is-visible {
	opacity: 1;
}
#pc-backtop.is-visible:hover {
	opacity: .7;
}
#pc-backtop a,
#pc-backtop a img {
	display: block;
}
.sp-footer-icons-container {
	display: none;
}



/************************************************
***************** Media Query *******************
*************************************************/
@media screen and (max-width: 1024px) {
	/*******************************
	Body, Header and Footer Fix
	*******************************/
	#pagewrap {
		position: relative;
		padding-bottom: 51px;
	}

	/*******************************
	Header Fix
	*******************************/
	#header.header {
		padding-top: 0;
	}
	/* Mobile Header Site Brand */
	.header-brand-container #site-description {
		margin: 0;
		padding-bottom: 8px;
	}

	/* Search Form in Header Nav */
	#headerwrap #header #searchform {
		position: static;
		width: auto;
		margin: 0 auto;
		padding: 8px 16px;
		text-align: center;
	}
	#headerwrap #header #searchform #s {
		float: none;
		width: 80%;
		height: auto;
		font-size: 16px;
		line-height: 1.6;
	}

	#menu-button{
		visibility:visible;
		opacity:1;
	}
	#main-menu-container:not(.is-active){
		display:none;
	}
	/*******************************
	Footer Fix
	*******************************/
	#pc-backtop {
		display: none;
	}
	.sp-footer-icons-container {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		z-index: 600;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
	}
	.sp-footer-icons-container a {
		display: block;
		width: 100%;
		line-height: 1;
		text-align: center;
		background-color: #fafafa;
		text-decoration: none;
		font-size:10px;
		padding: 10px 0 6px;
		border-left:1px solid #1f7bb6;
	}
	.sp-footer-icons-container a:first-child{
		border-left:0;
	}
	.sp-footer-icons-container a i {
		display: block;
		font-size: 16px;
		margin-bottom: 8px;
	}
	.sp-footer-icons-container a i svg{
		height: 16px;
		fill: white;
	}
	
}