// スタイルシート common

@charset "utf-8";

@import "mixin";

body{
	@include root;
	position: relative;
}

img, video{
	max-width: 100%;
	height: auto;
}

a:hover {
	opacity: .75;
}

.default {
	@include contentdefault;
}

@media screen and (min-width: 901px) {
	.fadein_object {
		opacity:0;
		transform: translateY(120px);
		transition: 1.5s;
		//&[data-top="already"] {
		[data-already="1"] & {
			opacity:1;
			transform: translateY(0);
		}
	}
}


#wrapper {
	background-color:#777;
}



//#header {display:none !important;}
//#mainVisual {display:none !important;}
//#toppageOverview {display:none !important;}
//#toppageWorks {display:none !important;}
//#toppageNewsTopics {display:none !important;}
//#toppageInformation {display:none !important;}
//#toppageContact {display:none !important;}
//#footer {display:none !important;}



div#header {
	&:before {
		content:'';
		display:block;
		background-color:$themecolor;
		height:10px;
	}
	position:absolute;
	body.subpage & {
		position:static;
	}
	top:0;
	right:0;
	left:0;
	z-index:1;
	background-color:rgba($themecolor, .35);
	color:$themetextcolor;
	div.container {
		//@include container(1740, 20);
		display:flex;
		max-width: 1740px;
		margin:auto;
		@include maxwidth(1945){
			margin: 0 100px 0 30px;
		}
		@include maxwidth(900){
			margin-right: 70px;
		}
		@include maxwidth(420){
			margin-left: 15px;
		}
		align-items:center;
		height:80px;
		div.title {
			margin-right:auto;
			h1 {
				a {
					img {
						width:233px;
					}
				}
			}
		}
		@include maxheight(420){
			height:50px;
			div.title {
				h1 a img { width:150px;}
			}
		}
		nav {
			//flex: 0 0 auto;
			div#toppageNav {
				font-family: Oswald;
				@include f_all(16);
				@include maxwidth(1500){
					@include f_all(14);
				}
				@include maxwidth(1400){
					display:none;
				}
				ul {
					display:flex;
					li {
						margin-right: 32px;
						@include maxwidth(1400){
							margin-right:20px;
						}
						&:last-child { margin-right: 0; }						
					}
				}
			}
		}
		div#headerSns {
			margin-left: 15px;
			ul{
				display: flex;
				li{
					a{
						display: inline-flex;
						align-items: center;
						justify-content: center;
						background-color: rgba($themecolor,.65);
						border-radius: 5px;
						width: 42px;
						height: 42px;
						@include maxwidth(520){
							width: 32px;
							height: 32px;
						}
						img{
							width: 15px;
							height: auto;
						}
					}
					&:nth-child(2){
						margin-left: 8px;
						a{
							img{}
						}
					}
					&:nth-child(3){
						margin-left: 8px;
						a{
							img{
								width: 21px;
							}
						}
					}
				}
			}
		}
		div#headerContact {
			margin-left: 25px;
			// margin-left: 60px;
			//@include maxwidth(550){
			@include maxwidth(900){
				display:none;
			}
			a {
				span.number {
					@include f_all(26, 84, "");
					font-family: Oswald;
					padding-left: 25px;
					background: url(../images/icon-smartphone-white.png) left center / auto 23px no-repeat;
					height:23px;
					display:flex;
					align-items:center;
					margin-bottom:9px;
				}
				span.time {
					font-family: Oswald, "Noto Sans JP";
					display:block;
					@include f_all(12);
				}
			}
		}
	}
}


div#mainVisual {
	div.container {
		position:relative;
		background-color:$basetextcolor;
		color:$basecolor;


		div.video {
			height:100vh;
			video {
				width: 100%;
				height: 100%;
				object-fit: cover;
				vertical-align: bottom

				source {
				}
				p {
				}
			}
			span.mask {
				//本当は疑似要素 after などがよいがなぜかIEで表示されないので
				//原因不明だがこだわるべき部分でもないので
				//staticなspan.maskを設置している
				content:'';
				display:block;
				background:url(../images/movie-mask.png);
				position:absolute;
				top:0;
				//right:0;
				//bottom:0;
				left:0;
				height:100%;
				width: 100%;
				//width: 100%;
				pointer-events: none;
				//z-index:100;
			}
			&.loaded {
				div#floatingCirclesG {
					display:none;
				}
			}
			div#floatingCirclesG {

				body.browser-ie & {
					display: none!important;//IEの場合、最初から使用しない
				}

				//display: none;

				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				width: 125px;
				height: 125px;
				margin: auto;
				transform: scale(0.6) translateY(40px);
				z-index: 100;
				div.f_circleG {
					position: absolute;
					background-color: transparent;
					height: 22px;
					width: 22px;
					border-radius: 12px;
					animation-name: f_fadeG2;
					animation-duration: 1.2s;
					animation-iteration-count: infinite;
					animation-direction: normal;
					&#frotateG_01 {
						left: 0;
						top: 51px;
						animation-delay: 0.45s;
					}
					&#frotateG_02 {
						left: 15px;
						top: 15px;
						animation-delay: 0.6s;
					}
					&#frotateG_03 {
						left: 51px;
						top: 0;
						animation-delay: 0.75s;
					}
					&#frotateG_04 {
						right: 15px;
						top: 15px;
						animation-delay: 0.9s;
					}
					&#frotateG_05 {
						right: 0;
						top: 51px;
						animation-delay: 1.05s;
					}
					&#frotateG_06 {
						right: 15px;
						bottom: 15px;
						animation-delay: 1.2s;
					}
					&#frotateG_07 {
						left: 51px;
						bottom: 0;
						animation-delay: 1.35s;
					}
					&#frotateG_08 {
						left: 15px;
						bottom: 15px;
						animation-delay: 1.5s;
					}
				}
			}
		}


		div.slides {

			display:none;
			body.smartphone & {
				display:block;
			}

			div.slide_frame {
				p {
					height:100vh;
					//@include maxheight(560){
					//	height:600px;
					//}
					span {
						display:block;
						height:100%;
						width:100%;
						background:none center / cover no-repeat;
						transform: scale(1.0);
					}
					&.zoom_effect span {
						transform: scale(1.2);
						transition: 12s linear;
						//表示時間＋遷移時間よりも長ければいくらでも長く取っていいので、6sの間に1.1まで見せたいなら12sで1.2にすればよい（linearなので問題ない）
						//※スライドの遷移して少し後、前のスライドの.zoom_effectは外されて即1.0に戻る
					}
				}
			}
		}
		div.overlay {
			position:absolute;
			top:0;
			right:0;
			bottom:0;
			left:0;
			display:flex;
			align-items:center;
			justify-content:center;
			@include maxwidth(1100){
				flex-direction: column;
			}
			animation:mv_overlay_animation_01 1.2s 0s both;
			pointer-events: none;
			span.text, &:after {
				content:'';
				font-family:Oswald;
				@include f_all(75, "", 83);
				max-width:386px;
				@include maxwidth(1100){
					text-align:center;
					margin-bottom: 40px;
				}
				@include maxwidth(500){
					@include f_all(35, "", 39);
				}
				@include maxheight(700){
					@include f_all(35, "", 39);
					margin-bottom:20px;
				}
			}
			&:after {
				@include maxwidth(1100){
					display:none;
				}
			}
			span.image {
				width:137px;
				margin: 0 150px;
				@include maxwidth(1330){
					margin: 0 60px;
				}
				@include maxheight(700){
					width: 80px;
					margin: 0 10px;
				}
			}
		}
		div.headerScroll {
			position:absolute;
			right:0;
			bottom:0;
			left:0;
			margin:auto;
			width:100px;
			a {
				display:block;
				text-align:center;
				font-family: Oswald;
				@include f_all(14);
				&:after {
					content:'';
					display:block;
					height:35px;
					width:1px;
					background-color:currentcolor;
					margin:auto;
					margin-top:15px;
				}
			}
		}
	}
}

@keyframes mv_overlay_animation_01 {
	0% {
		opacity:0;
		filter: blur(20px);
		//transform: translateY(30px);
	}
	50% {
	}
	100% {
		opacity:1;
		filter: blur(0);
		//transform: translateY(0);
	}
}

span.slash_decoration {
	display:inline-block !important;
	position:relative;
	&:before {
		content:'';
		display:block;
		width: 100%;
		height:1px;
		@include absolute_centering;
		background-color:currentcolor;
		transform: translateY(7px) rotateZ(45deg) scaleX(1.4);
	}
}

div#subpageTopicPath {
	padding:75px 0 30px;
	background-color:$basecolor;
	color:$basetextcolor;
	div.container {
		@include container(1920, 240);
		@include f_all(16, "", 24);
		@include maxwidth(1440){
			margin-left: 30px;
			margin-right: 30px;
		}
		@include maxwidth(900){
			@include f_all(14, "", 21);
		}
		ul {
			li {
				display:inline;
				&:before {
					content:'―';
					margin: 0 1em;
					@include maxwidth(900){
						margin: 0 0.7em;
					}
				}
				&:first-child:before {
					display:none;
				}
			}
		}
	}
}

div#content {
	section {
		*.button_area a {
			font-family:Oswald;
			width: 200px;
			height: 44px;
			display:inline-flex;
			background-color:$themecolor;
			color:$themetextcolor;
			border-radius:5px;
			justify-content:center;
			align-items:center;
			@include f_all(16);
		}


		div#subpageHeading {
			background-color:$basecolor;
			color:$basetextcolor;
			div.container {
				//@include container(1920,240);
				margin-left:240px;
				@include maxwidth(1440){
					margin-left: 30px;
				}
				h2 {
					padding: 75px 0 75px;
					position:relative;
					@include maxwidth(900){
						padding: 50px 30px 50px 0;
					}
					@include maxwidth(450){
						padding-top: 30px;
					}
					&[data-heading]:before {
						content:attr(data-heading);
						@include f_all(205);
						opacity:.05;
						position:absolute;
						height:205px;
						overflow:hidden;
						white-space: nowrap;
						font-family:Oswald;
						left: 270px;
						right:0;
						top:0;
						bottom:0;
						display:flex;
						align-items:center;
						text-indent: .15em;
						@include maxwidth(1440){
							@include f_all(140);
							left: 150px;
						}
						@include maxwidth(900){
							@include f_all(90);
							top: -20px;
							left: 90px;
						}
					}
					span {
						display:block;
						&.heading_en {
							font-family:Oswald;
							@include f_all(48, "", 50);
							margin-bottom:5px;
							@include maxwidth(900){
								@include f_all(40, "", 42);
							}
						}
						&.heading_ja {
							@include f_all(20, "", 30);
							@include fw_b;
						}
					}
				}
				div.decoration {
					background: none center / cover no-repeat;
					height:320px;
					margin-left:240px;
					@include maxwidth(1440){
						margin-left: 30px;
					}
				}
			}
		}

		div#subpageContent {
			padding: 100px 0 230px;
			background-color:$basecolor;
			color:$basetextcolor;
			div.container {
				@include container(920,240);
				@include maxwidth(1200){
					margin-left: 30px;
					margin-right: 190px;
				}
				@include maxwidth(900){
					margin-left: 30px;
					margin-right: 30px;
				}
			}
		}

		div#subpageHeadingVisual {
			background-color:$basecolor;
			div.container {
				span {
					display:block;
					background: none center / cover no-repeat $basetextcolor;
					height:320px;
					margin-left:240px;
					@include maxwidth(1440){
						margin-left: 30px;
						height: 230px;
					}
					@include maxwidth(900){
						height: 180px;
					}
				}
			}
		}

		div#toppageOverview {
			background-color:$basecolor;
			color:$basetextcolor;
			div.container {
				//height:100vh;
				//@include maxwidth(900){
				//	height:auto;
				//}
				@include container(1920, 0);
				display:flex;
				flex-direction: column;//タテ
				div.r1_frame{
					@include container(990, 0);
					// padding:62px 120px 40px;
					padding:62px 0px 40px;
					box-sizing: border-box;
					div.r1 {
						//flex: 1 1 443px;
						flex: 0 0 auto;
						display:flex;
						flex-direction:column;
						justify-content:center;						
						@include maxwidth(550){
							padding-left:30px;
							padding-right:30px;
						}
						div.text {
							@include f_all(22, "", 44);
							text-align:center;
							@include fw_b;
							@include maxwidth(1280){
								@include f_all(22, "", 32);
							}
							@include maxwidth(550){
								@include f_all(20, "", 30);
							}
							@include maxwidth(380){
								@include f_all(18, "", 25);
							}
							strong {
								font-weight: inherit;
							}
						}
						div.image {
							img {}
						}
						&.left{
							div.text {
								margin-bottom:38px;
							}
							div.image {
								text-align:center;
								margin-bottom:29px;
								img {
									width: 137px;
									//@include maxheight(1000){
									//	width:90px;
									//}
								}
							}
							div.text2 {
								text-align:center;
								@include f_all(22, "", 44);
								font-weight: 900;
								font-family: "BIZ UDPGothic","HG明朝E","游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
								font-style: normal;
								@include maxwidth(380){
									@include f_all(18, "", 25);
									font-weight: 900;
								}
							}
						}

					}
				}
				div.r2 {
					//flex: 1 1 637px;
					flex: 0 0 auto;
					padding-bottom:50px;
					padding-top:50px;
					background:none left 28.4vw center / cover no-repeat;
					div.frame {
						//background-color:#d4d7db;
						background: linear-gradient(180deg, transparent 120px, #d4d7db 120px);
						@include maxheight(1000){
							background: linear-gradient(180deg, transparent 60px, #d4d7db 60px);
						}
						max-width:800px;
						box-sizing: border-box;
						padding:0 70px 27px 136px;
						@include maxwidth(900){
							padding-right:30px;
							padding-left: 30px;
							margin-right: 120px;
							width:auto;
						}
						@include maxwidth(500){
							margin-right:20px;
						}
						div.heading {
							margin-bottom:53px;
							color:$themecolor;
							@include maxwidth(500){
								text-align:center;
							}
							h2 {
								font-family:Oswald;
								span.num {
									@include f_all(178);
									@include maxwidth(1000){
										@include f_all(132);
									}
								}
								span.title {
									@include f_all(29);
								}
							}
						}
						div.body {
							@include f_all(16, "", 36);
							@include maxheight(1000){
								@include f_all(14, "", 32);
							}
							margin-bottom:25px;
							@include fw_b;
						}
						div.more.button_area {
							text-align:center;
							p{
								&.button1{
									margin-bottom: 15px;
								}
								a{}
							}
						}
					}
				}
			}
		}


		div#toppageBusiness {
			background-color:$basecolor;
			color:$basetextcolor;
			display:flex;
			align-items:center;
			//height: 100vh;
			width:100%;
			//@include maxwidth(1020){
			//	height:auto;
			//}
			//@include maxheight(900){
			//	height:auto;
			//}
			padding:100px 0 50px;
			@include maxwidth(1000){
				padding:50px 0 0;
			}
			div.container {
				width:100%;
				div.heading {
					text-align:center;
					color:$themecolor;
					padding-bottom:110px;
					@include maxwidth(1000){
						padding-bottom:50px;
					}
					h2 {
						font-family:Oswald;
						span { display:block; }
						span.num {
							@include f_all(178);
							margin-bottom:30px;
							@include maxwidth(1000){
								@include f_all(132);
								margin-bottom:10px;
							}
						}
						span.title {
							@include f_all(29);
						}
					}
				}
				div.body {
					//background-color:#d4d7db;
					padding-bottom:60px;
					@include maxwidth(1000){
						padding-bottom:0;
					}
					width: 100%;
					div.items {
						@include container(1660, 95);
						display:flex;
						justify-content:center;
						flex-wrap:wrap;
						@include maxwidth(1020){
							display:block;
						}
						@include maxwidth(600){
							margin-left:0;
							margin-right:0;
						}
						&.focusframe{
							display: flex;
							justify-content: space-between;
							margin-bottom: 25px;
							@include maxwidth(1020){
								display: block;	
							}
							div.item{
								flex: 0 1 calc(100% / 2 - 10px);
								background-color: #d4d7db;
								padding: 20px 30px 70px 30px;
								box-sizing: border-box;
								color: $basetextcolor;
								font-weight: bold;
								position: relative;
								@include f_all(16, "", 32);
								display: flex;
								justify-content: space-between;
								flex-direction: column;
								@include maxwidth(1020){
									padding: 20px 30px 20px 30px;
								}
								@include maxwidth(600){
									padding: 20px;
								}
								&::before{
									content: none;
								}
								&.focus1{
									margin-right: 10px;
									@include maxwidth(1020){
										margin-right: 0;
										margin-bottom: 15px;
									}
									@include maxwidth(600){
										margin-left: 15px;
										margin-right: 15px;
									}
								}
								&.focus2{
									margin-left: 10px;
									@include maxwidth(1020){
										margin-left: 0;
									}
									@include maxwidth(600){
										margin-left: 15px;
										margin-right: 15px;
									}
								}
								p.heading{
									@include f_all(21, "", 32);
									margin-bottom: 10px;
								}
								p.text{	
									margin-bottom: 15px;
									// min-height: 96px;
									@include maxwidth(1020){
										min-height: auto;
									}								
									// br.m-d-b{
									// 	display: none;
									// 	@include maxwidth(1000){
									// 		display: block;
									// 	}
									// }
									@include maxwidth(1020){
										margin-top: 0;
										margin-bottom: 30px;
										@include f_all(14, "", 22);
									}
									@include maxwidth(570){
										br{
											display: none;
										}
									}
								}
								div.detail{
									text-align: center;
									padding: 20px;
									background-color:#E5E7E9;
									margin-bottom: 15px;
									box-sizing: border-box;
									display: flex;
									flex-direction: column;
									align-items: center;
									justify-content: center;
									min-height: 400px;
									width: 100%;
									@include maxwidth(1020){
										min-height: auto;
										padding: 25px;
									}
									p{
										font-weight: bold;
										@include f_all(16, "", 32);										
										margin-bottom: 30px;
										@include maxwidth(570){
											@include f_all(14, "", 28);
										}
									}
									img{
										width: 320px;
										height: auto;	
									}
								}
								div.more{
									text-align: center;
									position: absolute;
									left: 0;
									right: 0;
									bottom: 20px;
									@include maxwidth(1020){
										position: static;
									}
									a{
										@include fw_b;
									}
								}

								div.area-l{
									@include maxwidth(1020){
										width: auto;
										text-align: center;
										margin-right: 0;
									}

									p.banner{
										margin-bottom: 30px;
										text-align: center;
										img{
											width: 319px;
											height: auto;
											@include maxwidth(570){
												width: 260px;
											}
										}								
									}
								}						
								div.area-r{
									// display: flex;
									// justify-content: space-between;
									// align-items: center;
									text-align: center;
									padding: 30px 50px;
									background-color:#E5E7E9;
									width: 580px;
									display: flex;
									flex-direction: column;
									justify-content: center;
									// margin-left: auto;
									// margin-right: auto;
									box-sizing: border-box;
									@include maxwidth(1020){
										width: auto;
									}
									@include maxwidth(570){
										padding: 20px 20px;
										margin: 0 -10px;
									}	

								}
							}
						}
						div.item {
							//flex: 0 0 33.33%;
							flex: 0 0 50%;
							//height:460px;
							@include maxwidth(1020){
								height:auto;
							}
							background:none center / cover no-repeat;
							position:relative;
							background-color:$themecolor;
							color:$themetextcolor;
							&:before {
								content:'';
								@include absolute_centering;
								background-color:rgba($themecolor, .65);
							}
							& > * {position:relative;z-index:1;}
							//display:flex;
							//flex-direction: column;
							//h3,ul {outline: 1px solid red;}
							@include maxwidth(1020){
								display:block;
								padding: 0 0 60px 0;
							}
							h3 {
								height:125px;
								@include f_all(32);
								@include fw_b;
								text-align:center;
								&:before {
									content:'';
									display:block;
									width:1px;
									height:65px;
									background-color:currentcolor;
									margin: 0 auto 22px;
								}
								@include maxwidth(1020){
									@include f_all(24);
									margin-bottom:40px;
									//&:before {
									//	height:25px;
									//	margin-bottom:10px;
									//}
								}
							}
							div.link {
								min-height: 335px;
								display:flex;
								justify-content:center;
								align-items:center;
								padding: 20px 0;
								box-sizing: border-box;
								ul {
									display:flex;
									flex-wrap:wrap;
									justify-content:center;
									padding: 0 20px;
									li {
										margin:0 7px 22px;
										a {
											width:276px;
											height:44px;
											display:flex;
											justify-content:center;
											align-items:center;
											border:1px solid currentcolor;
											box-sizing: border-box;
											border-radius:5px;
											@include fw_b;
										}
									}
								}
							}
						}
					}
				}
			}
		}



		div#toppageWorks {
			//height:100vh;
			//@include maxwidth(1100){
			//	height:auto;
			//}
			width:100%;
			background: linear-gradient(180deg, $basecolor 160px, #d4d7db 160px, #d4d7db calc(100% - 120px), $basecolor calc(100% - 120px));
			@include maxwidth(1000){
				background: linear-gradient(180deg, $basecolor 160px, #d4d7db 160px, #d4d7db calc(100% - 20px), $basecolor calc(100% - 20px));
			}
			color:$basetextcolor;
			//display:flex;
			//align-items:center;
			position:relative;
			padding: 50px 0 225px;
			@include maxwidth(1000){
				padding: 50px 0 85px;
			}
			div.container {
				//@include container(1280,0);
				//width:100%;
				div.heading {
					text-align:center;
					color:$themecolor;
					//transform: translateY(15px);
					z-index:1;
					position:relative;
					@include maxwidth(1100){
						transform:none;
						padding:20px 0 35px;
					}
					margin-bottom:100px;
					@include maxwidth(1000){
						margin-bottom:40px;
					}
					h2 {
						font-family:Oswald;
						span { display:block; }
						span.num {
							@include f_all(178);
							//margin-bottom:30px;
							@include maxwidth(1000){
								@include f_all(132);
								//margin-bottom:0;
							}
						}
						span.title {
							@include f_all(29);
						}
					}
				}
				div.body {
					margin-bottom:70px;
					ul {
						@include clearfloat;
						width: 1280px;
						margin:auto;
						li {
							float: left;
							width: 320px; height:320px;
							&:first-child { width: 640px; height:640px; }
							a {
								display:block;
								width:100%;
								height:100%;
								position:relative;
								span.image {
									display:block;
									width:100%;
									height:100%;
									background:none center / cover no-repeat;
								}
								span.text {
									position:absolute;
									top:0;
									right:0;
									bottom:0;
									left:0;
									display:flex;
									justify-content:center;
									align-items:center;
									flex-direction: column;
									background-color:rgba($basetextcolor, .65);
									color:$basecolor;
									transition: .25s;
									opacity:0;
									padding:0 20px;
									box-sizing: border-box;
									& > span {
										transform: translateY(10px);
										transition: .75s;
									}
									span.title {
										opacity:0;
										@include f_all(16, "", 24);
									}
								}
								&:hover {
									opacity:1;
									span.text {
										opacity:1;
										& > span {
											transform: translateY(0);
											opacity:1;
										}
									}
								}
							}
						}
						@include maxwidth(1340){
							width: 960px;
							li {
								width: 240px; height:240px;
								&:first-child { width: 480px; height:480px; }
							}
						}
						@include maxwidth(1040){
							width: 640px;
							li {
								width: 160px; height:160px;
								&:first-child { width: 320px; height:320px; }
								a {
									span.text span.title {
										@include f_all(12, "", 20);
									}
								}
							}
						}
						@include maxwidth(700){
							width: 100vw;
							li {
								width: 50vw; height:50vw;
								&:first-child { width: 100vw; height:100vw; }
								a {
									span.text{
										opacity:1 !important;
										background-color:rgba($basetextcolor, .35);
										top:auto;
										padding:12px;
										span.title {
											opacity:1 !important;
											@include f_all(15, "", 22);
											transform: translateY(0);
										}
									}
								}
							}
						}
						@include maxwidth(500){
							li {
								a {
									span.text span.title {
										@include f_all(12, "", 20);
									}
								}
							}
						}
					}
					div.noposts {
					}
				}
				div.more {
					text-align:center;
				}
			}
		}

		.newstopics_headline {
			ul {
				li {
					position:relative;
					&:before, &:after {
						content:'';
						position:absolute;
						height:1px;
						left:0;
						bottom:0;
					}
					&:before {
						background-color:#dbdbdb;
						width:100%;
					}
					&:after {
						background-color:$themecolor;
						width:187px;
					}
					a {
						padding: 18px 0;
						display:flex;
						align-items:center;
						span.terms {
							@include f_all(12);
							margin-right:15px;
							display: inline-flex;
							span.term {
								display:inline-flex;
								height:27px;
								align-items:center;
								padding:0 12px;
								background-color:$themecolor;
								color:$themetextcolor;
								@include fw_b;
								border-radius:15px;
								margin-right:5px;
								margin-bottom: 3px;
								&:last-child { margin-right:0; }
								white-space: nowrap;
							}
						}
						span.date {
							@include f_all(13);
							@include fw_b;
							margin-right: 20px;
							white-space: nowrap;
						}
						span.title {
							@include f_all(14, "", 22);
							@include fw_b;
						}
						@include maxwidth(900){
							flex-wrap:wrap;
							span.title {
								flex: 1 0 100%;
								margin-top:7px;
							}
						}
					}
				}
			}
		}

		div.newstopics_nav {
			ul {
				display:flex;
				flex-wrap:wrap;
				li {
					margin: 0 20px 20px 0;
					@include maxwidth(1100){
						text-align:center;
					}
					@include maxwidth(700){
						margin: 0 5px 10px;
					}
					a {
						background-color:$themetextcolor;
						color:$themecolor;
						@include f_all(14);
						@include fw_b;
						height:30px;
						display:inline-flex;
						align-items:center;
						padding: 0 15px;
						border-radius:5px;
						@include fw_b;
						@include maxwidth(450){
							@include f_all(12);
							height:25px;
							padding:0 10px;
						}
						&.current {
							background-color: #dbdbdb;
						}
					}
				}
			}
		}

		div.monthly_archive_link {
			//@include container(800,10);
			margin-top:35px;
			@include f_all(14);
			a.show_archive_links {
				display:block;
				width:200px;
				height:30px;
				display:flex;
				justify-content:center;
				align-items:center;
				background-color:mix($basetextcolor,$basecolor,.1);
				//margin:auto;
				border-radius:5px;
				position:relative;
				@include fw_b;
				&:after {
					content:'>';
					display:inline-block;
					transform: rotateZ(90deg) scaleX(.5);
					position:absolute;
					right:30px;
					top:0;
					bottom:0;
					margin:auto;
				}
			}
			ul {
				margin-top:20px;
				display:none;
				&.show {display:flex;}
				//justify-content:center;
				flex-wrap:wrap;
				li {
					margin: 0 10px 10px 0;
					flex: 0 0 113px;
					text-align:center;
					a {
						display:block;
						background-color:mix($basetextcolor,$basecolor,.05);
						padding: 7px 0;
						border-radius:3px;
					}
				}
			}
		}

		div#subpageNewstopicsArchive {
			background-color:$basecolor;
			color:$basetextcolor;
			padding:100px 0;
			div.container {
				//@include container(1000, 20);
				margin-left:240px;
				margin-right: 240px;
				@include maxwidth(1440){
					margin-left: 30px;
					margin-right: 190px;
				}
				@include maxwidth(900){
					margin-left: 30px;
					margin-right: 30px;
				}
				div.nav {
					margin-bottom:40px;
					ul {
						li {
							a {
								box-shadow: 0 0 0 1px #ddd;
							}
						}
					}
				}
				div.body {
					margin-bottom:70px;
				}
			}
		}

		div#subpageWorksArchive {
			background-color:$basecolor;
			color:$basetextcolor;
			padding:100px 0;
			div.container {
				margin-left:240px;
				margin-right: 80px;
				@include maxwidth(1440){
					margin-left: 120px;
					margin-right: 90px;
					// margin-right: 190px;
				}
				@include maxwidth(900){
					margin-left: 30px;
					margin-right: 30px;
				}
				div.body {
					margin-bottom:70px;
					ul {
						display:flex;
						flex-wrap:wrap;
						//justify-content:center;
						@include maxwidth(900){
							max-width: 700px;
							width: 100%;
							margin-left: auto;
							margin-right: auto;
						}
						li {
							flex: 0 0 290px;
							margin: 0 40px 35px 0;
							@include maxwidth(1440){
								flex: 0 0 32%;
								max-width: 290px;
								margin: 0 1% 35px 0;
							}
							@include maxwidth(900){
								flex: 0 0 49%;
								max-width: none;
								margin: 0 1% 35px 0;
							}
							@include maxwidth(600){
								flex: 0 0 100%;
							}
							a {
								display:block;

								span {
									display:block;
									&.image {
										display:block;
										height:290px;
										margin-bottom: 10px;
										background-size: cover;
										background-repeat: no-repeat;
										background-position: center;
										@include maxwidth(1440){
											height: 30vw;
											max-height: 290px;
										}
										@include maxwidth(900){
											height: 50vw;
											max-height: 230px;
										}
										@include maxwidth(600){
											height: 100vw;
										}
									}
									&.title {
										@include f_all(15, "", 22);
									}
								}
							}
						}
					}
				}
			}
		}

		div#toppageNewsTopics {
			//height:100vh;
			//@include maxwidth(1100){
			//	height:auto;
			//}
			width:100%;
			background-color:$basecolor;
			color:$basetextcolor;
			display:flex;
			align-items:center;
			position:relative;
			padding-bottom:220px;
			padding-top:60px;
			@include maxwidth(1000){
				padding-top:0;
				padding-bottom:100px;
			}
			&:before {
				content:'';
				display:block;
				background-color:#d4d7db;
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				clip-path: polygon(60% 0%, 90% 0%, 40% 100%, 10% 100%);
				z-index:1;
				@include maxwidth(1100){
					clip-path: polygon(100% 0%, 100% 60%, 0 100%, 0 40%);
				}
			}
			&:after {
				content:'';
				display:block;
				width:70vw;
				height:585px;
				background-color:rgba(#e8e8e8, .55);
				position:absolute;
				bottom:82px;
				right:0;
				z-index:0;
				@include maxwidth(1100){
					display:none;
				}
			}
			div.container {
				width: 100%;
				//transform: translateY(-60px);
				z-index:2;
				div.heading {
					text-align:center;
					color:$themecolor;
					transform: translateY(15px);
					z-index:1;
					position:relative;
					@include maxwidth(1100){
						transform: translateY(-25px);
					}
					@include maxwidth(1000){
						transform:none;
						padding:20px 0 55px;
					}
					h2 {
						font-family:Oswald;
						span { display:block; }
						span.num {
							@include f_all(178);
							margin-bottom:30px;
							@include maxwidth(1000){
								@include f_all(132);
								margin-bottom:20px;
							}
						}
						span.title {
							@include f_all(29);
						}
					}
				}
				div.frame {
					display:flex;
					@include maxwidth(1100){
						display:block;
					}
					div.nav {
						background-color:$themecolor;
						color:$themetextcolor;
						height:535px;
						flex: 1 1 800px;
						display:flex;
						justify-content:flex-end;
						align-items: flex-start;
						transform: translateY(-73px);
						z-index:1;
						@include maxwidth(1100){
							transform:none;
							height:auto;
						}
						ul {
							//outline: 1px solid red;
							width: 360px;
							margin: 150px 180px 0 40px;
							@include maxwidth(1750){
								margin-right: 60px;
							}
							justify-content:flex-start;
							@include maxwidth(1100){
								width: auto;
								justify-content:center;
								margin:25px 90px 5px;
							}
							@include maxwidth(700){
								margin:10px 0 0;
							}
							li {
								&:first-child { flex: 1 0 100%;}
							}
						}
					}
					div.body {
						flex: 1 1 1120px;
						height:561px;
						@include maxheight(810){
							height: 500px;
						}
						background-color:rgba($basecolor, .85);
						color:$basetextcolor;
						transform: translateX(-169px);
						@include maxwidth(1400){
							transform: translateX(-90px);
							height:auto;
						}
						@include maxwidth(1100){
							transform:none;
							//padding: ;
						}
						ul {
							margin: 107px 60px 40px 247px;
							@include maxwidth(1400){
								margin-left:140px;
							}
							max-width:660px;
							@include maxwidth(1100){
								margin: 0;
								padding:40px;
								max-width: none;
							}
						}
						div.noposts {
						}
					}
				}
			}
		}


		div#toppageInformation {
			//height:100vh;
			//@include maxwidth(900){
			//	height:auto;
			//}
			display:flex;
			align-items:center;
			justify-content:center;
			background: none center / cover no-repeat;
			//@include maxwidth(900){
				padding:200px 0 100px;
			//}
			@include maxwidth(1000){
				padding: 140px 0;
			}
			div.container {
				background-color:rgba(#d4d7db, .75);
				//@include container(1280, 20);
				width: 1280px;
				margin:auto;
				padding:0 10px 120px;
				//@include maxheight(920){
				//	padding-bottom:40px;
				//}
				@include maxwidth(1340){
					width:940px;
					padding-bottom:80px;
				}
				@include maxwidth(1160){
					width:auto;
					margin: 0 100px;
				}
				box-sizing: border-box;
				position:relative;
				div.heading {
					color:$themecolor;
					//transform: translateY(-100px);
					padding:0 200px 0 0 ;
					position:absolute;
					// top:-100px;
					top: 20px;
					//@include maxheight(800){
					//	top: -75px;
					//}
					@include maxwidth(1340){
						padding-right: 30px;
					}
					@include maxwidth(1000){
						text-align:center;
						top: 60px;
						// top: -95px;
						padding-right:0;
						left:0;
					}
					right:0;
					h2 {
						font-family:Oswald;
						display:flex;
						flex-direction: row-reverse;
						align-items:flex-end;
						@include maxwidth(1000){
							justify-content:center;
						}
						span.num {
							@include f_all(178);
							margin-bottom:30px;
							@include maxwidth(1000){
								@include f_all(132);
							}
						}
						span.title {
							@include f_all(29);
							transform: translateY(-1.25em);
							margin-right:35px;
							@include maxwidth(1000){
								margin-right:15px;
							}
						}
					}
				}
				div.body {
					display:flex;
					justify-content:center;
					flex-wrap:wrap;
					padding-top:250px;
					//@include maxheight(800){
					//	padding-top:100px;
					//}
					@include maxwidth(1000){
						padding-top:220px;
					}
					div.item {
						background-color:$basecolor;
						color:$basetextcolor;
						margin: 0 10px 20px;
						a {
							display:block;
							width: 280px;
							padding:0 0 17px;
							span {
								display:block;
							}
							span.image {
								width: 100%;
								height:280px;
								margin-bottom:25px;
								background-color: none center / cover no-repeat;
							}
							span.heading-ja {
								@include f_all(14);
								@include fw_b;
								margin:0 17px 12px;
							}
							span.heading-en {
								font-family:Oswald;
								font-weight:600;
								@include f_all(21);
								margin:0 17px;
							}
						}
					}
				}
			}
		}


		div#toppageContact {
			background-color:$basecolor;
			color:$basetextcolor;
			//height: 100vh;
			padding:320px 0 220px;
			@include maxwidth(1000){
				padding:220px 0 120px;
			}
			display:flex;
			width:100%;
			position:relative;
			//@include maxheight(700){
			//	padding-top:25px;
			//	height:auto;
			//}
			@include maxwidth(700){
				padding: 220px 0 120px;
			}
			&:before, &:after {
				content:'';
				display:block;
				position:absolute;
				width:38vw;
				height:38vw;
			}
			&:before {
				right: 0;
				top:0;
				clip-path: polygon(0 0, 100% 0, 100% 100%);
				background-color:rgba($themecolor, .65);
			}
			&:after {
				left: 0;
				bottom:0;
				clip-path: polygon(0 0, 100% 100%, 0 100%);
				background-color:$themecolor;
			}
			div.container {
				width: 1280px;
				margin:auto;
				background-color:#d4d7db;
				padding: 0 20px 33px;
				box-sizing: border-box;
				z-index:1;
				position:relative;
				div.heading {
					color:$themecolor;
					//transform: translateY(-100px);
					position:absolute;
					left:0;
					right:0;
					text-align:center;
					top:-160px;
					//@include maxheight(700){
					//	top:-100px;
					//}
					//@include maxwidth(700){
					//	top:-100px;
					//}
					h2 {
						font-family:Oswald;
						text-align:center;
						span { display:block; }
						span.num {
							@include f_all(178);
							margin-bottom:30px;
							@include maxwidth(1000){
								@include f_all(132);
								margin-bottom:20px;
							}
						}
						span.title {
							@include f_all(29);
						}
					}
				}
				div.body {
					padding-top:200px;
					//@include maxheight(700){
					//	padding-top:130px;
					//}
					@include maxwidth(1000){
						padding-top:70px;
					}
					div.text {
						max-width: 600px;
						margin:auto;
						margin-bottom:65px;
						@include maxheight(700){
							margin-bottom:40px;
						}
						p.h {
							@include f_all(24, "", 44);
							margin-bottom:20px;
							@include fw_b;
						}
						p {
							@include f_all(16, "", 36);
						}
					}
					div.items {
						display:flex;
						justify-content:center;
						@include maxwidth(800){
							flex-direction: column;
							align-items:center;
						}
						div.item {
							margin:0 40px 40px;
							@include maxwidth(700){
								margin: 0 0 20px;
							}
							a {
								width:287px;
								@include maxwidth(700){
									width: 277px;;
								}
								height:80px;
								display:flex;
								border-radius:5px;
							}
						}
						div.item.tel {
							a {
								border: 1px solid $themecolor;
								background-color: $themetextcolor;
								flex-direction: column;
								align-items:center;
								justify-content:center;
								span.num {
									@include f_all(26, 84, "");
									font-family:Oswald;
									margin-bottom:9px;
									padding-left: 25px;
									background:url(../images/icon-smartphone-black.png) left center / auto 24px no-repeat;
									min-height: 24px;
									display:flex;
									align-items:center;
								}
								span.tel_time {
									@include f_all(12);
								}
							}
						}
						div.item.mail {
							a {
								background-color: $themecolor;
								color:$themetextcolor;
								align-items:center;
								justify-content:center;
								&:before {
									content:'';
									display:block;
									width: 19px;
									height:19px;
									background: url(../images/icon-mail-white.png) center / contain no-repeat;
									margin-right:16px;
									vertical-align:middle;
								}
								@include fw_b;
								@include f_all(16, "", 24);
							}
						}
					}
				}
			}
		}
	}
}


div#totop {
	div.container {
		a {
			display:flex;
			flex-direction: column;
			justify-content:center;
			align-items:center;
			width:70px;
			height:70px;
			font-family:Oswald;
			@include f_all(12, "", 14);
			background-color:rgba($themecolor, .75);
			color:$themetextcolor;
			position:fixed;
			right: 90px;
			bottom:0;
			z-index:1000;
			text-align:center;
			&:before {
				content:'';
				display:block;
				background-color:currentcolor;
				clip-path: polygon(50% 0, 100% 100%, 0 100%);
				width:8px;
				height:7px;
				margin-bottom:7px;
			}
			@include maxwidth(900){
				right:auto;
				left:0;
				background-color:transparent;
			}
		}
	}
}


div#footer {
	background-color:#d4d7db;
	padding:110px 0 0;
	div#footerLogo {
		text-align:center;
		margin-bottom:120px;
		@include maxwidth(1000){
			margin-bottom:60px;
		}
		div.logomark {
			margin-bottom:30px;
			img {
				width:137px;
			}
		}
		div.logotype {
			text-align:center;
			@include f_all(22, "", 32);
			font-weight: 900;
			font-family: "BIZ UDPGothic","HG明朝E","游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
			font-style: normal;
		}
	}

	div#footerContent {
		margin-bottom:220px;
		@include maxwidth(1000){
			margin-bottom:100px;
		}
		div.container {
			@include container(1660, 100);
			display:flex;
			justify-content:space-between;
			//@include maxwidth(1660){
			//	width:auto;
			//	margin:0 20px;
			//}
			@include maxwidth(1440){
				flex-direction: column;
				justify-content:flex-start;
				align-items:center;
				margin:0 20px;
			}
			div#footerAddress {
				@include f_all(16, "", 26);
				@include fw_b;
				margin-right:100px;
				@include maxwidth(1440){
					margin-right:0;
					margin-bottom:120px;
				}
				@include maxwidth(1000){
					@include f_all(14, "", 21);
					margin-bottom:60px;
				}
			}
			div#footerMenu {
				display:flex;
				@include maxwidth(900){
					display:block;
					text-align:center;
				}
				div.area {
					margin-right: 80px;
					&.area1 {
						width:550px;
						// width:607px;
						@include maxwidth(900){
							width:auto;
						}
					}
					&.area2{
						width:200px;
						@include maxwidth(900){
							width: auto;
						}
					}
					@include maxwidth(1440){
						margin-right:60px;
					}
					@include maxwidth(800){
						margin-right:0;
						&.area2 div.item1 {
							margin-bottom:40px;
						}
					}
					&:last-child {
						@include maxwidth(1680){
							margin-right:0;
						}
					}
					h4 {
						@include f_all(16);
						line-height: 150%;
						font-family:Oswald;
						margin-bottom:12px;
						border-bottom:1px solid currentcolor;
						margin-bottom:14px;
						@include maxwidth(900){
							margin-bottom:20px;
							@include f_all(24);
						}
					}
					div.items {
						//display:flex;
						@include maxwidth(900){
							display:block;
							margin-bottom:40px;
						}
						div.row {
							display:flex;
							margin-bottom:90px;
							justify-content:space-between;
							&:last-child {
								margin-bottom:0;
							}
							div.item {
								flex: 0 0 260px;
							}
							@include maxwidth(900){
								display:block;
								margin-bottom:30px;
								div.item {
									margin-bottom:30px;
								}
							}
						}
						div.item {
							//margin-right:110px;
							//@include maxwidth(1440){
							//	margin-right:40px;
							//}
							//@include maxwidth(800){
							//	margin-right:0;
							//}
							//&:last-child {
							//	margin-right:0;
							//}
							h5 {
								@include f_all(16, "", 20);
								@include fw_b;
								margin-bottom:12px;
							}
							ul {
								@include f_all(15, "", 22);
								@include fw_b;
								margin-bottom:30px;
								@include maxwidth(900){
									@include f_all(14, "", 18);
									display:flex;
									flex-wrap:wrap;
									//justify-content:center;
									margin-bottom:10px;
									width:336px;
									margin: 0 auto 10px;
								}
								@include maxwidth(350){
									width: 280px;
								}
								li {
									margin-bottom:6px;
									a {
										display:block;
										padding-left:1em;
										position:relative;
										&:before {
											content:'－';
											left:0;
											position:absolute;
										}
									}
									@include maxwidth(900){
										margin: 0 4px 5px;
										background-color:#e5e7e9;
										border-radius:5px;
										a {
											padding-left:0;
											width:160px;
											padding: 8px 6px;
											display:flex;
											box-sizing: border-box;
											justify-content:center;
											&:before {
												display:none;
											}
										}
									}
									@include maxwidth(350){
										a {
											width:132px;
										}
									}
								}
							}
							p {
								@include f_all(16, "", 36);
								@include fw_b;
								margin-bottom:40px;
							}
						}
					}
				}
			}
		}
	}
	div#footerAsideMenu {
		div.container {
			ul {
				display:flex;
				justify-content:center;
				flex-wrap:wrap;
				@include f_all(16, "", 24);
				@include maxwidth(800){
					@include f_all(13, "", 13);
				}
				@include fw_b;
				li {
					margin: 0 1.5em;
					a {
					}
					@include maxwidth(800){
						margin: 0 5px;
						a {
							display:flex;
							align-items:center;
							padding: 0 10px;
							height:30px;
							box-sizing: border-box;
							white-space: nowrap;
							background-color:#e5e7e9;
							color:#444;
							border-radius:15px;
						}
					}
				}
			}
		}
	}
	div#footerCopy {
		@include maxwidth(900){
			padding-bottom: 70px;
		}
		div.container {
			text-align:center;
			padding:35px 10px;
			@include f_all(12, "", 36);
			font-family:Oswald;
			p {
			}
		}
	}
}


div#sideBar {

	//@include maxheight(900){
	//	display:none !important;
	//}

	position:fixed;
	top:0;
	body.admin-bar & {
		top:32px;
	}
	right:0;
	bottom:0;
	background-color:$themecolor;
	background: url(../images/logomark-white-new.png) center bottom 20px / 56px auto no-repeat rgba($themecolor, .9);
	color:$themetextcolor;
	width:90px;
	z-index:100;
	//transform: translateX(90px);
	//transition: 1s;
	//body.menubutton_scrollout & {
	//	transform: translateX(0);
	//}
	@include maxwidth(900){
		top:auto !important;
		left:0;
		width:auto;
		height:70px;
		background: url(../images/logomark-white-new.png) right 10px center / auto 49px no-repeat rgba($themecolor, .9);
		//transform: none !important;
	}

	div.container {
		div#sideToppageNav {
			padding-top:200px;
			@include maxheight(1010){ padding-top:140px; }
			@include maxheight(900){ padding-top:90px; }
			@include maxheight(700){ padding-top:80px; }

			@include maxheight(650){ display:none; }

			ul {
				display:flex;
				flex-direction: column;
				width:100%;
				li {
					a {
						@include f_all(16);
						font-family:Oswald;
						height:50px;
						@include maxheight(800){
							height:35px;
						}
						display:flex;
						align-items:center;
						justify-content:center;
						position:relative;
						&:before {
							content:'';
							display:block;
							height:1px;
							width: 0;
							background-color:currentcolor;
							position:absolute;
							top:0;
							left:0;
							bottom:0;
							margin:auto;
							transition: 1s;
						}
						&.active {
							&:before {
								width:25px;
							}
						}
						transition: 1s;
					}
					&:first-child, &:last-child {
						display:none;
					}
				}
			}
		}


		div#sideContact {
			a {
				width: 220px;
				height:90px;
				display:flex;
				flex-direction: column;
				justify-content:center;
				//background-color:red;
				transform:translateX(90px) rotateZ(-90deg);
				transform-origin: left bottom;
				position:absolute;
				bottom:160px;
				@include maxheight(800){
					bottom:130px;
				}
				left:0;
				@include maxwidth(900){
					transform:none;;
					bottom:0;
					right:0;
					margin:auto;
					height:70px;
					align-items:center;
				}
				span.number {
					@include f_all(26, 84, "");
					margin-bottom:9px;
					font-family:Oswald;
					background: url(../images/icon-smartphone-white.png) left center / auto 24px no-repeat;
					padding-left:25px;
				}
				span.time {
					@include f_all(12);
				}
			}
		}
	}
}

div#gnav {
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba($themecolor, .85);
	color:$themetextcolor;
	transform: scaleX(0);
	z-index:10000;
	overflow: auto;
	display:flex;
	justify-content:center;
	align-items:center;
	body.admin-bar & {
		top:32px;
	}
	body.menu_open & {
		transform: scaleX(1);
	}
	div.container {
		width: 280px;
		a.close_button {
			&:hover {
				opacity:1;
			}
			width:46px;
			height:46px;
			position:absolute;
			right:10px;
			top:10px;
			background-color:$themetextcolor;
			background-color:#e00;
			border-radius:3px;
			&:before, &:after {
				content:'';
				display:block;
				background-color:#fff;
				width:25px;
				height:1px;
				@include absolute_centering;
			}
			&:before {
				transform:rotateZ(45deg);
			}
			&:after {
				transform:rotateZ(-45deg);
			}
		}
		ul {
			li {
				a {
					display:block;
					text-align:center;
					border:1px solid rgba($basecolor, .25);
					padding:1.5em 10px;
					border-width: 0 0 1px 0;

					transform-origin:center top;
					position:relative;
					&:after {
						content:'';
						display:block;
						position:absolute;
						left:0;
						right:0;
						bottom:0;
						margin:auto;
						height:1px;
						width:0;
						background-color:$basecolor;
						transition: .35s;
					}
					&:hover {
						&:after {
							width: 100%;
						}
					}
				}
				body.menu_open & {
					a {
						animation:menu_animation_01 .5s both;
					}
					&:nth-child(1) a {animation-delay:0.0s;}
					&:nth-child(2) a {animation-delay:0.05s;}
					&:nth-child(3) a {animation-delay:0.1s;}
					&:nth-child(4) a {animation-delay:0.15s;}
					&:nth-child(5) a {animation-delay:0.2s;}
					&:nth-child(6) a {animation-delay:0.25s;}
					&:nth-child(7) a {animation-delay:0.3s;}
					&:nth-child(8) a {animation-delay:0.35s;}
				}
				//&:first-child {
				//	a {
				//		border-width: 2px  0;
				//	}
				//}
			}
		}
	}
}

@keyframes menu_animation_01 {
	0% {
		opacity:0;
		transform: translateY(30px);
	}
	50% {
	}
	100% {
		opacity:1;
		transform: translateY(0);
	}
}

div#gnavtoggleWrapper {
	div.container {
		div#gnavToggle {
			a {
				width:50px;
				height:50px;
				position:fixed;
				right:20px;
				top:25px;
				body.admin-bar & {
					top:calc(32px + 25px);
				}
				@include maxwidth(900){
					right: 10px;
				}
				@include maxheight(420){
					top: 8px;
					body.admin-bar & {
						top:calc(32px + 8px);
					}
				}
				display:block;
				transition: 1s;
				z-index:1000;
				@include maxwidth(900){
					//body.menubutton_scrollout & ,
					//body.menu_open & {
					body.menubutton_scrollout & {
						background-color:$themecolor;
						right:8px;
						top:8px;
						width:50px;
						height:50px;
						border-radius:5px;
					}
					//body.admin-bar.menubutton_scrollout & ,
					//body.menu_open.menubutton_scrollout & {
					body.admin-bar.menubutton_scrollout & {
						top:calc(32px + 8px);
					}
				}
				color:$themetextcolor;
				span.b {
					transition: .5s;
					display:block;
					height:1px;
					width:30px;
					@include absolute_centering;
					background-color:currentcolor;
					&.b1 { transform: translateY(-10px); }
					&.b2 {}
					&.b3 { transform: translateY(10px); }
				}
				&:hover { opacity:1; }
				//body.menu_open & {
				//	background-color: $accentcolor;
				//	span.b {
				//		&.b1 { transform: rotateZ(45deg); }
				//		&.b2 { opacity:0; }
				//		&.b3 { transform: rotateZ(-45deg); }
				//	}
				//}
			}
		}
	}
}

div.pager {
    text-align: center;
    font-size: .875em;
    @media screen and (max-width: 540px) {
        font-size: .6875em;
    }
    a, span {
        display: inline-block;
        margin: 0 0.25em 0.75em;
        min-width: 3em;
        padding: 1em 1em;
        box-sizing: border-box;
        background-color: #eeeeee;
        &.current {
            background-color: $themecolor;
            color: $themetextcolor;
        }
        border-radius: 10px;
    }
}