@charset "utf-8";

/*===============================================
●共通
===============================================*/
body {
	color: #000;
	background-color :#ffffff;
	font-size: 100%; /* 1em=16pxに設定 */
	position: relative;
}
body,
th,
td {
	font-family: "Amiri", serif;
	line-height:1.3em;
}
p {
	text-align:justify;
	text-justify:distribute;
}
img {
	max-width:100%;
	height:auto;
	vertical-align:middle;
	-ms-interpolation-mode:bicubic;
}
a {text-decoration: none;}
a:link {color:#000;}
a:visited {color:#000;}
a:hover {text-decoration:none;}
a:active {color:#000;}
a:hover img {opacity: 0.8;}

/* trandmark */
.trademark {
	color: #fff;
	text-align: center;
	line-height: 1.5;
	width: 100%;
	margin: 0 auto;
	padding: 0.3em 0 0;
}


/* header
---------------------------------------- */
#header #headerTrademark {
	background-color: #5F844C;
	margin-top: 1.2em;
}
#mainMenu li a {color: #3A7232;}
#mainMenu li:last-child {padding-right:0;}

/* pageTop
---------------------------------------- */
#pageTop a {display: block;}

/* footer
---------------------------------------- */
#footerInner {font-size: 0.75em;}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){

	/* 全般
	---------------------------------------- */
	body {
		min-width: 320px;
		-webkit-text-size-adjust: none;
		line-height: 1.5em;
	}
	.spNone {display: none;}
	.inner {padding: 0 1.5em;}
	
	/* trademark */
	.trademark {
		font-size: 10px;
		max-width: 78px;
	}

	/* header
	---------------------------------------- */
	#header {
		background: url("../../images/multi_common/header_tex.jpg") #fff repeat-x left top / contain;
		position: fixed;
		width: 100%;
		height: 122px;
		top: 0;
		left: 0;
		color: #fff;
		z-index: 9999;
		transition: all 0.3s;
	}
	#headerInner {
		display: flex;
		height: 122px;
		position: relative;
		align-items: center;
		justify-content: space-between;
	}
	#header #headerTop {
		max-width: 86px;
		width: 100%;
		margin: 0 auto;
	}

	/* menuBtn */
	#menuBtn {
		position: absolute;
		top: 2.5em;
		right: 1.88em;
	}
	#menuBtn a {
		display: block;
		width: 24px;
		height: 20px;
		position: relative;
		z-index: 100;
	}
	#menuBtn a span {
		display: inline-block;
		position: absolute;
		width: 24px;
		height: 1px;
		background-color: #5F844C;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	#menuBtn span:nth-child(1) {top: 0px;}
	#menuBtn span:nth-child(2) {top: 10px;}
	#menuBtn span:nth-child(3) {top: 20px;}

	#menuBtn .close span:nth-child(1) {transform: translateY(8px) rotate(-45deg);}
	#menuBtn .close span:nth-child(2) {opacity: 0;}
	#menuBtn .close span:nth-child(3) {transform: translateY(-12px) rotate(45deg);}

	/* mainMenu */
	#mainMenu {
		background-color: #fff;
		display: none;
		position: absolute;
		top: 122px;
		left: 0;
		width: 100%;
		padding: 0.5em 0 0 0;
		z-index: 10;
	}
	#mainMenu li a {
		display: block;
		font-size: 1.13em;
		padding: 0.7em 0 0.7em 2.78em;
	}
	#mainMenu li:last-child a {padding-bottom: 1.4em;}
	
	/* pageTop
	---------------------------------------- */
	#pageTop {right: 1em;}
	#pageTop img {
		max-width: 3em;
		width: 100%;
		height: auto;
	}

	/* footer
	---------------------------------------- */
	#footer {
		background: url("../../images/multi_common/footer_tex.jpg") #fff repeat-x left bottom / contain;
		height: 130px;
		padding: 1.25em 0;
		box-sizing: border-box;
	}
	#footer ul {display: none;}
	#footerInner {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
	}
	#footerLogo img {
		width: 86px;
		margin-bottom: 1.67em;
	}

	/* main
	---------------------------------------- */
	main {margin-top: 122px;}

}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){

	/* 全般
	---------------------------------------- */
	#menuBtn,
	.pcNone {display: none!important;}
	.inner {
		width: 100%;
		max-width: 1080px;
		padding: 0 10px;
		margin: 0 auto;
		box-sizing: border-box;
	}
	/* trademark */
	.trademark {
		font-size: 0.75em;
		max-width: 88px;
	}
	
	/* header
	---------------------------------------- */
	#header {
		padding: 2.2em 0 3em;
		background:url("../../images/multi_common/header_tex.gif") repeat-x left top;
	}
	#header #headerInner {
		max-width: 1050px;
		position: relative;
		margin: 0 auto;
	}
	#header #headerTop {
		margin-bottom: 30px;
	}
	#header #headerLogo {
		text-align: center;
	}

	/* mainMenu */
	#mainMenu {
		max-width: 1050px;
		margin: 0 auto;
		padding: 0 1em;
	}
	#mainMenu ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#mainMenu li {padding-right: 1.78em;}
	#mainMenu li a {
		font-size: 16px;
	}
	#mainMenu li a:hover {color:#000;}

	/* current */
	body.history #mainMenu li.history a {color: #000;}
	
	/* pageTop
	---------------------------------------- */
	#pageTop {right: 3.4em;}

	/* footer
	---------------------------------------- */
	#footer {
		background: url("../../images/multi_common/footer_tex.jpg") #fff repeat-x left top 90%;
		padding: 30px 0 0;
	}
	#footerInner {
		max-width: 980px;
		padding: 0 10px 80px 10px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}
	#footer ul {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20px;
		margin-bottom: 5px;
	}
	#footer ul li {
		display: inline-block;
		margin-right: 20px;
	}
	#footer ul li a {color: #3A7232;}
	#footer ul li a:hover {
		color: #FF3300;
		text-decoration: underline;
	}
	#footer small {font-size: 1em;}
}