@charset "UTF-8";

/*ページ背景*/
.contentsBox {
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	margin: 0 auto 0 auto;
}

/* ホバー */
.mouseHvr {
	opacity: 1;
}

.mouseHvr:hover {
	opacity: 0.7;
}



/*ヘッダー*/

#header {
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-justify-content: space-around;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

#logo{
	width:100%;
	margin: 0 auto;	
	margin-bottom:0;
	padding:0;
	text-align:center;
}

#logo img{
	max-width:1100px;
}


/*ロゴ*/
h1{
	width: 800px;
	margin:0 auto 0;
	padding-top:1em;

}


@media screen and (max-width:1000px) {
	h1{
		width:98%;
		margin:0 auto 0;
	}
}

/*ラインナビ*/

#navi-line{
	width:100%;
	max-width:1100px;
	margin: 0 auto;
	padding-top:0.5em;
	padding-bottom:0.5em;	
	display: -webkit-flex;
	-webkit-justify-content: center;
	-webkit-flex-direction:row;
	display: flex;
	justify-content: center;
	flex-direction: row;
}



#navi-line li a {
	display: block;
	text-align:center;
	text-decoration:none;
	padding:0.5em;
	box-shadow: 2px 2px 4px;
	width:7.5em;
	margin:0 2px 0 2px;
}

@media screen and (max-width:800px) {
	#navi-line{
		flex-direction: column;
	}
}

@media screen and (max-width:800px) {
	#navi-line li a{
		width:100%;
	}
}



/*ポップアップナビ*/
.fn-box .navi-button{
	padding:0.5em 0.5em;;
	position: fixed;
	top:0;
	right:0;
	width:3em;
}

.navi-button:hover{
	opacity: 0.7;
}

#navi-pupup{
	width:1000px;
	margin:0 auto;
	background:#ffffff;
	text-align:center;
}

#navi-pupup li{
	border-top: dashed thin #000000;
	padding:0.5em;
}

#navi-pupup li a , .navi-close{
	display: block;
	text-decoration:none;
}

#navi-pupup li a:hover , .navi-close:hover{
	color:red;
	cursor: pointer;
}

#navi-pupup h2{
	padding:0.5em;;
}

@media screen and (max-width:800px) {
	#navi-pupup{
		width:98%;
	}

}

/*コンテンツエリア*/
.contentsArea {
	max-width: 1100px;
	margin: 1em auto 0;
	text-align:center;
}

.contentsArea  > div{
	text-align:left;
}



/*サイドコンテンツ*/

.contentsRight{
	width:100%;
	display: inline-block;
	vertical-align:top;
}

.contentsRight a{
	display: block;
}

.contentsRight > div {
	border: thin #544a47 solid;
	margin-bottom: 1em;
	padding-bottom: 0px;
	text-align: center;
	
}


.contentsRight h2{
	font-size:1em;
	padding-top:0.5em;
	padding-bottom:0.5em;
}

.contentsRight > div h3{
	padding-top:0.5em;
	
}

.sidenavi li{
	padding:0.3em 0.5em;
}

.basic p,.basic h3{
	padding:0 0.5em;
}


/*メインコンテンツ*/

.contentsLeft{
	width:100%;
	vertical-align:top;
}

.contentsLeft{
	text-align:left;
}


.contentsLeft > div:not(.top-button){
	margin-bottom: 2em;
}


.contentsLeft ul{
	padding:0.5em 1em 0.5em 2em;

}

.contentsLeft ol{
	padding:0.5em 1em 0.5em 2em;
}

.contentsLeft li{
	padding-left:0em;
}


h2{
	font-size:1.2em;
	padding:0.5em 0.5em 0.5em 1em;
}


/*機能ボタン*/

.menu-button{
	padding:0em;
	position: fixed;
	right:0.2em;
	top:0.5em;
	width:2.5em;
	background:rgba(255,193,7,1);
	border-radius:25%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	opacity: 0.9;
}

.top-button{
	padding:0em;
	position: fixed;
	right:0.2em;
	bottom:0.2em;
	width:2.5em;
	background:rgba(255,193,7,1);
	border-radius:50%;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
	opacity: 0.9;
}







/*フッター*/
.footer {
	width: 100%;
	padding: 1em 0 ;

}



.footer >div {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

/*デザインd（2段組み）*/

.design-d #navi-line{
	display:none;
}

.design-d .contentsLeft{
	width:100%;
}
.design-d .contentsRight{
	width:100%;
}

@media screen and (min-width:800px) {
	.design-d .contentsArea {
		display: -webkit-flex;
		-webkit-flex-direction: column;
		-webkit-justify-content: space-around;
		display:flex;
		flex-direction:column;
		justify-content:space-around ;
		align-items: center;

	}


	.design-d .contentsLeft{
		width:80%;
	}
	.design-d .contentsRight{
		width:80%;
	}
}

@media screen and (min-width:1000px) {
	.design-d .contentsLeft{
		width:73%;
	}

	.design-d .contentsRight{
		width:23%;
		padding-left:2%;
		padding-top:2em;
	}

	.design-d .contentsRight >div{
		text-align:left;
	}

	.design-d .contentsArea {
		display: -webkit-flex;
		-webkit-flex-direction: row;
		-webkit-justify-content: space-around;
		display:flex;
		flex-direction:row;
		justify-content:space-around ;
		align-items: flex-start;

	}
}


@media screen and (min-width:1000px) {
	.design-r .contentsArea {
		flex-direction:row-reverse;
	}
}




/*デザインc（1段組み）*/




.design-c #header {
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-justify-content: space-around;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.design-c.index #header {
	height:100vh;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	-webkit-justify-content: space-around;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}







.design-c .contentsLeft{
	width:100%;
}
.design-c .contentsRight{
	display:none;
}

.design-c #navi-line{
	width:100%;
	justify-content:row ;
	
}



@media screen and (min-width:800px) {
	.design-c .contentsArea {
		display: -webkit-flex;
		-webkit-justify-content: center;
		display:flex;
		justify-content:center ;
	}
	.design-c .contentsLeft{
		width:80%;
	}
}




@media screen and (min-width:1000px) {
	.design-r .contentsArea {
		flex-direction:row-reverse;
	}
}