@charset "utf-8";

@maincolor: #3fa9f5;
@imgdir: "/assets/images";
.marginCenter {
  margin-left:auto;
  margin-right:auto;
}
.clearfix {
	display:block;
	clear:both;
}




/* Body Style
-------------------------------------------------------------------------------*/
body {
	font-family:"Noto Sans Japanese", sans-serif;
	font-size:15px;
	line-height:1.8em;
	color:#3f3f3f;
}

#wrap {

}




/* Header Style
-------------------------------------------------------------------------------*/
#main-header {
	border-top:10px solid @maincolor;

	.inner {
		background:url("@{imgdir}/header/bg_img.png") 610px bottom no-repeat;
		width:1000px;
		margin:0 auto;
	}
	.inner:after {
		content:"";
		.clearfix;
	}

	.left-area {
		float:left;
	}
	.right-area {
		float:right;
		text-align:right;

		.tel {
			background:url("@{imgdir}/header/icon_tel.svg") left center no-repeat;
			font-size:26px;
			line-height:1.6em;
			padding-left:30px;
			margin-bottom:3px;
			margin-right:10px;
			display:inline-block;
			vertical-align: top;
		}
		.fax {
			background:url("@{imgdir}/header/icon_fax.svg") left center no-repeat;
			font-size:26px;
			line-height:1.6em;
			padding-left:30px;
			margin-bottom:3px;
			display:inline-block;
			vertical-align: top;
		}
		.btn-contact {
			margin-bottom:5px;
			padding-right:7px;
		}
		.message {
			font-size:10px;
			line-height:1.6em;
		}
	}

	.screen-reader-text {
	    position: absolute;
	    display: block;
	    white-space: nowrap;
	    width: 1px;
	    height: 1px;
	    overflow: hidden;
	}
}








/* Footer Style
-------------------------------------------------------------------------------*/
.pagetop {
	img {
		position:fixed;
		bottom:40px;
		right:30px;
		display:none;
	}
}
#main-footer {
	.inner {
		background:url("@{imgdir}/footer/bg_img.png") 610px bottom no-repeat;
		width:1000px;
		margin:0 auto;
	}
	.inner:after {
		content:"";
		.clearfix;
	}

	.left-area {
		float:left;

      .logo {
         margin-bottom:10px;
      }
	}
	.right-area {
		float:right;
		text-align:right;

		.tel {
			background:url("@{imgdir}/footer/icon_tel.svg") left center no-repeat;
			font-size:26px;
			line-height:1.6em;
			padding-left:30px;
			margin-bottom:3px;
			margin-right:10px;
			display:inline-block;
			vertical-align: top;
		}
		.fax {
			background:url("@{imgdir}/footer/icon_fax.svg") left center no-repeat;
			font-size:26px;
			line-height:1.6em;
			padding-left:30px;
			margin-bottom:3px;
			display:inline-block;
			vertical-align: top;
		}
		.btn-contact {
			margin-bottom:5px;
			padding-right:7px;
		}
		.message {
			font-size:10px;
			line-height:1.6em;
		}
	}

	.copyright {
		text-align:center;
		color:#FFF;
		background-color:@maincolor;
		font-size:11px;
	}
}
#f-menu {
	width:1000px;
	.marginCenter;
	margin-top:65px;
	margin-bottom:40px;
	text-align:center;

	ul {
		list-style:none;
		padding:0;

		li {
			display:inline-block;
			vertical-align:top;
			font-size:13px;
			margin-left:50px;

			a {
				color:#3f3f3f;
			}
		}
		li:first-of-type {
			margin-left:0;
		}
	}
}






/* Common Style
-------------------------------------------------------------------------------*/
#g-menu {
	ul {
		text-align:center;
		font-size:0;
		line-height:0;
		padding:0;
	}

	li {
		display:inline-block;
		vertical-align:top;
		width:104px;
		height:80px;
		margin-left:21px;

		a {
			display:block;
			height:100%;
			background-repeat:no-repeat;
			background-position:center center;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}
		a:hover {
			opacity:0.6;
		}
	}
	li:first-of-type {
		margin-left:0;
	}
	.menu1 {
		a { background-image:url("@{imgdir}/header/menu1.svg"); }
	}
	.menu2 {
		a { background-image:url("@{imgdir}/header/menu2.svg"); }
	}
	.menu3 {
		a { background-image:url("@{imgdir}/header/menu3.svg"); }
	}
	.menu4 {
		a { background-image:url("@{imgdir}/header/menu4.svg"); }
	}
	.menu5 {
		a { background-image:url("@{imgdir}/header/menu5.svg"); }
	}
	.menu6 {
		a { background-image:url("@{imgdir}/header/menu6.svg"); }
	}
	.menu7 {
		a { background-image:url("@{imgdir}/header/menu7.svg"); }
	}
	.menu8 {
		a { background-image:url("@{imgdir}/header/menu8.svg"); }
	}
}



a:link {

}
a:visited {

}
a:hover {

}
a:active {

}

a {
	img {
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
}
a:hover,
a.touch {
	img {
		opacity:0.6;
	}
}


h1 {
	font-weight:normal;
	font-size:12px;
}

h2 {

}

h3 {

}

img { max-width:100%; }

.loading {
   position:fixed;
   background:url("@{imgdir}/home/loading.jpg") center center no-repeat;
   background-color:#FFF;
   width:100%;
   height:100%;
   top:0;
   left:0;
   z-index:9999;

   .leaf01, .leaf02, .leaf03, .leaf04 {
      background-repeat:no-repeat;
      background-size:contain;
      background-position:center center;
      width:40px;
      height:40px;
      position:fixed;
      top:-40px;
      left:-40px;
   }
   .leaf01 {
      background-image:url("@{imgdir}/home/leaf01.png");
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fall01;
      animation-duration: 5s;
      animation-name: fall01;
   }
   .leaf02 {
      background-image:url("@{imgdir}/home/leaf02.png");
      -webkit-animation-duration: 4s;
      -webkit-animation-name: fall02;
      animation-duration: 4s;
      animation-name: fall02;
   }
   .leaf03 {
      background-image:url("@{imgdir}/home/leaf03.png");
      -webkit-animation-duration: 4s;
      -webkit-animation-name: fall03;
      animation-duration: 4s;
      animation-name: fall03;
   }
   .leaf04 {
      background-image:url("@{imgdir}/home/leaf04.png");
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fall04;
      animation-duration: 5s;
      animation-name: fall04;
   }
   .txt {
      font-size:2.2rem;
      position:absolute;
      top:50%;
      left:50%;
      margin-top:-180px;
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
   }

}
@-webkit-keyframes fall01 {
   from {
      top:-10%;
      left:-10%;
   }
   to {
      top:110%;
      left:110%;
   }
}
@keyframes fall01 {
   from {
      top:-10%;
      left:-10%;
   }
   to {
      top:110%;
      left:110%;
   }
}
@-webkit-keyframes fall02 {
   from {
      top:0%;
      left:0%;
   }
   to {
      top:105%;
      left:105%;
   }
}
@keyframes fall02 {
   from {
      top:-10%;
      left:-15%;
   }
   to {
      top:115%;
      left:108%;
   }
}
@-webkit-keyframes fall03 {
   from {
      top:18%;
      left:-5%;
      -moz-transform: rotate(0);
      -webkit-transform: rotate(0);
      -o-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
   }
   to {
      top:111%;
      left:103%;
      -moz-transform: rotate(160deg);
      -webkit-transform: rotate(160deg);
      -o-transform: rotate(160deg);
      -ms-transform: rotate(160deg);
      transform: rotate(160deg);
   }
}
@keyframes fall03 {
   from {
      top:18%;
      left:-5%;
      -moz-transform: rotate(0);
      -webkit-transform: rotate(0);
      -o-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
   }
   to {
      top:111%;
      left:103%;
      -moz-transform: rotate(160deg);
      -webkit-transform: rotate(160deg);
      -o-transform: rotate(160deg);
      -ms-transform: rotate(160deg);
      transform: rotate(160deg);
   }
}
@-webkit-keyframes fall04 {
   from {
      top:-5%;
      left:10%;
      -moz-transform: rotate(0);
      -webkit-transform: rotate(0);
      -o-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
   }
   to {
      top:110%;
      left:98%;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
   }
}
@keyframes fall04 {
   from {
      top:-5%;
      left:10%;
      -moz-transform: rotate(0);
      -webkit-transform: rotate(0);
      -o-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
   }
   to {
      top:110%;
      left:98%;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
   }
}






/* Sidebar Style
-------------------------------------------------------------------------------*/
#sidebar {
	width:200px;
	float:right;
}

#sidebar ul {
	list-style:none;
	margin-bottom:35px;
}






/* Home Style
-------------------------------------------------------------------------------*/
.slick-slider {
	margin-bottom:0;
   min-width:920px;
}
#main-visual.home {
   position:relative;
   overflow-x: hidden;

   .logo {
      width:auto;
      height:70%;
      position:absolute;
      top:50%;
      left:50%;
      -moz-transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
   }
}

#wrapper.home {
	background:url("@{imgdir}/home/bg_wrapper.png") center top no-repeat;
	background-size:100% auto;

	#sec01 {
		background:url("@{imgdir}/home/bg_sec01.png") 58% 30px no-repeat;
		position:relative;
		padding:180px 0 280px;
		text-align:center;
		overflow-x:hidden;

		p, img.chara, img.pic {
			position:absolute;
			left:50%;
		}
		p {
			-ms-writing-mode: tb-rl;
         -webkit-writing-mode:vertical-rl;
			writing-mode: vertical-rl;
			text-align:left;
		}
		p.txt01 {
			top:120px;
			margin-left:310px;
		}
		p.txt02 {
			top:350px;
			margin-left:-60px;
		}

		h2 {
			display:inline-block;
			vertical-align: top;
			margin:0 0 0 250px;
		}

		img.pic {
			margin-left:-740px;
			bottom:125px;
		}
		img.chara {
			margin-left:416px;
			bottom:0;
		}
	}

	#sec01-bottom {
		.border {
			height:41px;
			background:url("@{imgdir}/home/sec01_bottom_border.jpg") center top repeat;
		}
		.inner {
			height:300px;
			background:url("@{imgdir}/home/sec01_bottom_bg.jpg") center center no-repeat;
			background-size:cover;
		}
	}

	#sec02 {
		background:url("@{imgdir}/home/bg_sec02.jpg") center top no-repeat;
		background-size:cover;
		min-height:916px;
		padding:55px 0 25px;
		text-align:center;
		position:relative;
      overflow-x:hidden;

		h2 {
			margin:0 0 18px;
		}
		p {
			font-size:20px;
			line-height:1.6em;
		}
		.txt-small {
			font-size:14px;
			margin-bottom:25px;
		}
		img.chara01 {
			position:absolute;
			left:0;
			bottom:0;
		}
		img.chara02 {
			position:absolute;
			left:50%;
			bottom:0;
			margin-left:400px;
		}

		dl {
			background-color:rgba(149,211,249,0.5);
			padding:15px;
			width:442px;
			text-align:left;
			position:absolute;
			left:50%;

			dt {
				font-size:26px;
				line-height:1.6em;
			}
			dd {
				font-size:15px;
				line-height:1.9em;

				span {
					display:block;
					margin-top:8px;
				}
			}
		}
		dl.prof01 {
			bottom:285px;
			margin-left:-350px;
		}
		dl.prof02 {
			bottom:120px;
			margin-left:0;
		}
		.btn-company {
			display:inline-block;
			margin-top:550px;
         position:relative;
		}
	}

	#sec03 {
		text-align:center;
		background:url("@{imgdir}/home/bg_sec03.png") center bottom no-repeat;

		h2 {
			background:url("@{imgdir}/home/bg_sec03_title.svg") center top no-repeat;
			height:197px;
			font-size:26px;
			line-height:1.6em;
			text-align:center;
			padding-top:90px;
			margin:90px auto 35px;

			span {
				display:block;
				font-size:16px;
				line-height:1.6em;
				margin-top:10px;
			}
		}
		.alert{
			color:#ff0000;
		}

		ul {
			list-style:none;
			padding:0;
			font-size:0;
			line-height:0;
			text-align:center;

			li {
				display: inline-block;
				vertical-align: top;
				background-repeat:no-repeat;
				background-position:center top;
				width:232px;
				height:490px;
				color:#FFF;
				margin:0 5px 30px;
				position:relative;

				h3 {
					font-size:20px;
					line-height:1.8em;
					font-weight:normal;
					margin-top:60px;
				}
				p {
					font-size:15px;
					line-height:1.8em;
					margin-top:290px;
					text-align:left;
					padding:0 4px;
					position:absolute;
					bottom:0;
					left:0;
				}
			}
			.menu1 {
				background-image:url("@{imgdir}/home/sec03_li_bg01.png");
			}
			.menu2 {
				background-image:url("@{imgdir}/home/sec03_li_bg02.png");
			}
			.menu3 {
				background-image:url("@{imgdir}/home/sec03_li_bg03.png");
			}
			.menu4 {
				background-image:url("@{imgdir}/home/sec03_li_bg04.png");
			}
		}
		.btn-strong {
			display:inline-block;
			margin:50px 0 130px;
		}
	}

	#sec04 {
		text-align:center;
		background:url("@{imgdir}/home/bg_sec04.png") left top no-repeat;
		min-height:920px;

		h2 {
			background:url("@{imgdir}/home/bg_sec04_title.svg") center top no-repeat;
			height:197px;
			font-size:26px;
			line-height:1.6em;
			text-align:center;
			padding-top:90px;
			margin:162px auto 35px;

			span {
				display:block;
				font-size:16px;
				line-height:1.6em;
				margin-top:10px;
			}
		}

		ul {
			list-style:none;
			padding:0;
			width:800px;
			.marginCenter;
		}
		.post {
			padding:20px 15px;
			border-bottom:1px dashed @maincolor;
			text-align:left;

			a { color:#3f3f3f; }

			.title {
				margin:12px 0;
				font-size:20px;
			}
			.cat-area {
				li {
					display:inline-block;
					vertical-align:top;
					margin-right:10px;

					a {
						display:block;
						color:#FFF;
						background-color:#ff931e;
						padding:0 10px;
						font-size:13px;
						line-height:1.6em;
					}
				}
			}
		}
		.btn-news {
			display:inline-block;
			margin-top:140px;
		}
		.bg-bottom {
			background:url("@{imgdir}/home/bg_sec03.png") center top no-repeat;
			max-width:1007px;
			height:21px;
			margin:140px auto 0;
		}
	}

	#sec05 {
		text-align:center;
		background:url("@{imgdir}/home/bg_sec05.png") center 260px no-repeat;

		h2 {
			background:url("@{imgdir}/home/bg_sec05_title.svg") center top no-repeat;
			height:197px;
			font-size:26px;
			line-height:1.6em;
			text-align:center;
			padding-top:90px;
			margin:90px auto 160px;

			span {
				display:block;
				font-size:16px;
				line-height:1.6em;
				margin-top:10px;
			}
		}

		ul {
			list-style:none;
			text-align:center;
			padding:0;
			font-size:0;
			line-height:0;
			margin-bottom:40px;

			li {
				display:inline-block;
				vertical-align:top;
				margin:0 10px;
				position:relative;

				a {
					display:block;
				}
				a:after {
					content:"";
					display:block;
					border-left:4px solid #3f3f3f;
					border-bottom:4px solid #3f3f3f;
					width:12px;
					height:12px;
					position:absolute;
					top:36%;
					right:15px;
					-moz-transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
					-o-transform: rotate(-45deg);
					-ms-transform: rotate(-45deg);
					transform: rotate(-45deg);
				}
			}
		}
      .sp-btn-car-message,
      .sp-btn-train-message {
         display:none;
      }
		.map {
			font-size:0;
			line-height:0;

			iframe {
				width:100%;
			}
		}
		.btn-contact {
			display:inline-block;
			margin-top:100px;
		}
		.car-message,
		.train-message {
			position:absolute;
			top:60px;
			left:0;
			width:291px;
			height:300px;
			color:#FFF;
			background-color:@maincolor;
			padding:8px 12px;
			font-size:15px;
			line-height:1.7em;
			text-align:left;
			display:none;
		}
	}

}




/* Page Style
-------------------------------------------------------------------------------*/
#main-visual.page {
   background:url("@{imgdir}/common/bg_main_visual.jpg") center top repeat-x;
   background-size:auto 100%;
   padding:78px;

   h2 {
      margin:0;
      text-align:center;
   }
}
#wrapper.page {
	background:url("@{imgdir}/common/bg_wrapper.png") center top no-repeat;
	background-size:100% auto;

}
#wrapper {
   .bg-bottom {
      background:url("@{imgdir}/common/bg_wrapper_bottom.png") center top no-repeat;
      max-width:997px;
      width:100%;
      height:36px;
      .marginCenter;
      margin-top:60px;
   }
}


/* company */
#wrapper.company {
   #main-contents {
      background:url("@{imgdir}/company/bg_main_contents.png") center top no-repeat;
      padding:60px 0 60px * 2;
   }

   h3 {
      margin-top:140px;
      margin-bottom:60px;
      text-align:center;
   }

   table{
      width:700px;
      .marginCenter;

      tr {
         border-bottom:1px solid #3fa0ec;
      }
      th {
         font-weight:normal;
         width:110px;
         padding:12px 8px;
      }
      td {
         text-align:left;
         padding:12px 8px;
      }
   }

   #greeting {
      width:700px;
      .marginCenter;
      margin-top:60px;

      .content {
         margin-top:15px;
      }

      .thumb {
         width:125px;
         height:125px;
      }
   }
   h4 {
      border-bottom:1px solid #3fa0ec;
      margin:0 0 25px;
      padding:12px 8px;
      font-size:18px;
      line-height:1.8em;
   }


}



/* strong */
#wrapper.strong {
   #main-contents {
      background:url("@{imgdir}/strong/bg_main_contents.png") center top no-repeat;
      padding:60px 0 60px * 2;
      text-align:center;
   }

   h3 {
      margin:155px auto;
   }
   .top-message {
      .marginCenter;
      margin-bottom:80px;
      max-width:1000px;
      width:94%;
   }

   section {
      background-color:@maincolor;
      margin-bottom:50px;
      width:1000px;
      height:480px;
      .marginCenter;
      position:relative;

      h4 {
         font-size:26px;
         line-height:1.8em;
      }
   }
   #sec01 {
      background-image:url("@{imgdir}/strong/bg_sec01.jpg");
      background-position: right top;
      background-repeat:no-repeat;

      h4 {
         float:right;
         width:375px;
         text-align:left;
         margin:28px auto 30px;
      }
      .content {
         float:right;
         width:470px;
         text-align:left;
         margin-right:10px;
      }
      .message {
         position:absolute;
         bottom:88px;
         right:318px;
      }
      .thumb {
         position:absolute;
         top:15px;
         left:15px;
         width:470px;
         height:450px;
      }
   }
   #sec02 {
      background-image:url("@{imgdir}/strong/bg_sec02.jpg");
      background-position: left top;
      background-repeat:no-repeat;

      h4 {
         float:left;
         width:375px;
         text-align:left;
         margin:28px auto 30px 115px;
      }
      .content {
         float:left;
         width:465px;
         text-align:left;
         margin-left:15px;
      }
      .message {
         position:absolute;
         bottom: 118px;
         left: 306px;
      }
      .thumb {
         position:absolute;
         top:15px;
         right:15px;
         width:470px;
         height:450px;
      }
   }
   #sec03 {
      background-image:url("@{imgdir}/strong/bg_sec03.jpg");
      background-position: right top;
      background-repeat:no-repeat;

      h4 {
         float:right;
         width:375px;
         text-align:left;
         margin:28px auto 30px;
      }
      .content {
         float:right;
         width:470px;
         text-align:left;
         margin-right:10px;
      }
      .message {
         position:absolute;
         bottom: 118px;
         right: 306px;
      }
      .thumb {
         position:absolute;
         top:15px;
         left:15px;
         width:470px;
         height:450px;
      }
   }
   #sec04 {
      background-image:url("@{imgdir}/strong/bg_sec04.jpg");
      background-position: left top;
      background-repeat:no-repeat;

      h4 {
         float:left;
         width:375px;
         text-align:left;
         margin:28px auto 30px 115px;
      }
      .content {
         float:left;
         width:465px;
         text-align:left;
         margin-left:15px;
      }
      .message {
         position:absolute;
         bottom: 118px;
         left: 306px;
      }
      .thumb {
         position:absolute;
         top:15px;
         right:15px;
         width:470px;
         height:450px;
      }
   }

}



/* business */
#wrapper.business {
   #main-contents {
      background:url("@{imgdir}/business/bg_main_contents.png") center top no-repeat;
      padding:60px 0 60px * 2;
      text-align:center;
   }
   h3 {
      margin:155px auto 78px;
   }
   .top-message {
      .marginCenter;
      margin-bottom:80px;
      max-width:405px;
      width:94%;
   }

   .list-title {
      margin:50px auto 90px;
   }
   ul.description-list {
      list-style: none;
      font-size:0;
      line-height:0;
      max-width:1000px;
      width:94%;
      padding:0;
      .marginCenter;

      li {
         display:inline-block;
         vertical-align:top;
         margin-bottom:135px;
      }
      li:nth-of-type(even) {
         margin-left:35px;
      }
   }
   ul.btn-area {
      list-style:none;
      padding:0;
      font-size:0;
      line-height:0;
      margin:80px auto;

      li {
         display: inline-block;
         vertical-align:top;
         margin:0 15px;
      }
   }

}




/* works */
body.archive-works {
   -webkit-transition: all 0.6s ease;
   -moz-transition: all 0.6s ease;
   -ms-transition: all 0.6s ease;
   -o-transition: all 0.6s ease;
   transition: all 0.6s ease;
}
body.search-active {
   -moz-transform: scale(0.8);
   -webkit-transform: scale(0.8);
   -o-transform: scale(0.8);
   -ms-transform: scale(0.8);
   transform: scale(0.8);
}
#wrapper.works {
   #main-contents {
      background:url("@{imgdir}/works/bg_main_contents.png") center top no-repeat;
      padding:60px 0 60px * 2;
      text-align:center;
   }

   h3 {
      margin:155px auto 70px;
   }
   ul.search-area {
      list-style:none;
      padding:0;
      font-size:0;
      line-height:0;

      li {
         display:inline-block;
         vertical-align:top;
         margin:0 12px 40px;
      }
   }
   .category-box,
   .month-box {
      max-width:500px;
      width:94%;
      padding:25px 25px 25px 0;
      border:2px solid @maincolor;
      position:absolute;
      left:50%;
      z-index:9999;
      background-color:rgba(255,255,255,0.6);
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      transition: all 0.6s ease;
      -moz-transform: translateX(-50%) scale(0);
      -webkit-transform: translateX(-50%) scale(0);
      -o-transform: translateX(-50%) scale(0);
      -ms-transform: translateX(-50%) scale(0);
      transform: translateX(-50%) scale(0);

      .title {
         padding-left:25px;
         text-align:center;
         font-size:2.2rem;
         line-height:1.2em;
         position:relative;

         .btn-close {
            position:absolute;
            display:block;
            top:0;
            right:0;
            font-size:4rem;
            line-height:0.6em;
         }
      }
      ul {
         text-align:left;
      }
      li {
         border-bottom:1px solid @maincolor;
         font-size:2rem;
         padding:15px 0;
      }
      a {
         color:#333;
      }
   }
   .category-box.active,
   .month-box.active {
      -moz-transform: translateX(-50%) scale(1.2);
      -webkit-transform: translateX(-50%) scale(1.2);
      -o-transform: translateX(-50%) scale(1.2);
      -ms-transform: translateX(-50%) scale(1.2);
      transform: translateX(-50%) scale(1.2);
   }
   .list-title {
      margin:140px auto 90px;
   }
   ul.works-list {
      list-style:none;
      padding:0;
      font-size:0;
      line-height:0;
      text-align:left;
      margin:0 auto 60px;
      max-width:1000px;
      width:94%;

      li {
         display:inline-block;
         vertical-align:top;
         background:url("@{imgdir}/works/bg_post.png") left top no-repeat;
         width:280px;
         height:500px;
         margin:0 25px 50px;
         position:relative;

         .thumb {
            width:260px;
            height:200px;
            background-repeat:no-repeat;
            background-size:cover;
            background-position:center center;
            margin:50px auto 15px;
         }
         .date {
            font-size:1.4rem;
            line-height:1.8em;
            width:260px;
            .marginCenter;
         }
         .category {
            font-size:2rem;
            line-height:1.8em;
            width:260px;
            .marginCenter;
            border-bottom:1px solid #ff8a1e;
         }
         .title,
         .content {
            font-size:1.7rem;
            line-height:1.8em;
            width:260px;
            .marginCenter;
         }
         .content {
            font-size:1.5rem;
            height:6em;
            overflow:hidden;
         }
         .readmore {
            display:block;
            width:102px;
            height:19px;
            background:url("@{imgdir}/works/readmore.svg") center center no-repeat;
            position:absolute;
            bottom:12px;
            right:15px;
         }
         .readmore:hover {
            opacity:0.6;
         }
      }
   }

}
.bg-search-active {
   display:none;
   position:fixed;
   top:0;
   left:0;
   z-index:9998;
   width:100%;
   height:100%;
   background-color:rgba(255,255,255,0.8);
}
#wrapper.works.single {

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

   .post {
      width:1000px;
      padding:0 20px;
      .marginCenter;
      text-align:left;

      .date {
         margin-right:20px;
      }
      .title {
         font-size:2.2rem;
         line-height:1.8em;
         margin-bottom:30px;
      }
   }

}


/* recruit */
#wrapper.recruit {
   #main-contents {
      background:url("@{imgdir}/recruit/bg_main_contents.png") center top no-repeat;
      padding:60px 0 60px * 2;
      text-align:center;
   }
   h3 {
      margin:155px auto 78px;
   }
   .top-message {
      .marginCenter;
      margin-bottom:80px;
      max-width:405px;
      width:94%;
   }

   section {
      max-width:1000px;
      width:94%;
      padding:25px 20px;
      .marginCenter;
      margin-top:120px;
      border-bottom:1px solid @maincolor;

      h4 {
         font-size:2.3rem;
         line-height:1.8em;
         margin-bottom:20px;
      }
      .thumb {
         width:450px;
         height:450px;
         background-size:cover;
         background-repeat:no-repeat;
         background-position:center center;
         .marginCenter;
         margin-bottom:20px;
      }
      table {
         width:94%;
         .marginCenter;
         margin-bottom:50px;
      }
      tr {
         border-bottom:1px dashed @maincolor;
      }
      th, td {
         font-weight:normal;
         text-align: left;
         font-size:1.6rem;
         line-height:1.8em;
         padding:12px;
      }
      th {
         width:20%;
      }
   }
   p.end {
      margin-top:130px;
      font-size:2.25rem;
   }

}



/* faq */
#wrapper.faq {
   #main-contents {
      background:url("@{imgdir}/faq/bg_main_contents.png") center top no-repeat;
      padding:60px 0 60px * 2;
      text-align:center;
   }
   h3 {
      margin:185px auto 50px;
   }
   .top-message {
      .marginCenter;
      margin-bottom:80px;
      max-width:1000px;
      width:94%;
   }

   section {
      text-align:left;
      max-width:1000px;
      width:94%;
      .marginCenter;
      margin-bottom:50px;

      h4 {
         background:url("@{imgdir}/faq/icon_title.svg") 10px 0.4em no-repeat;
         font-size:3.6rem;
         line-height:1.8em;
         padding-left:1.6em;
      }
      dt {
         border:1px solid #d9ecfb;
         background:url("@{imgdir}/faq/icon_q.svg") 55px 1.55em no-repeat;
         background-color:#d9ecfb;
         padding:28px 108px;
         font-weight:normal;
         font-size:1.8rem;
         line-height:1.8em;
         position:relative;
         cursor:pointer;
      }
      dt:after {
         content:"+";
         display:block;
         color:#FFF;
         font-size:7rem;
         position:absolute;
         top:50%;
         right:25px;
         margin-top:-17px;
      }
      dt.active:after {
         content:"－";
      }
      dd {
         border:1px solid #d9ecfb;
         background:url("@{imgdir}/faq/icon_a.svg") 55px 1.55em no-repeat;
         padding:28px 108px;
         font-size:1.8rem;
         line-height:1.8em;
         display:none;
      }
      .close-area {
         display:block;
         text-align:center;
         border-top:1px solid #d9ecfb;
         margin-top:40px;
      }

   }

}




/* contact */
#wrapper.contact {
   #main-contents {
      padding:60px 0 60px * 2;
      text-align:center;
   }
   h3 {
      margin:50px auto 78px;
      font-size:3rem;
      line-height:1.8em;
      border-bottom:1px solid @maincolor;
      max-width:1000px;
      width:94%;
   }
   .top-message {
      .marginCenter;
      margin-bottom:80px;
      max-width:600px;
      width:94%;
   }

   .screen-reader-response {
      display:none;
   }
   .wpcf7-not-valid-tip {
      display:inline-block;
      vertical-align: top;
      border:2px solid red;
   }
   .wpcf7-validation-errors {
      display: inline-block;
      vertical-align: top;
      border:2px solid yellow;
   }
   .wpcf7-mail-sent-ok {
      display: inline-block;
      vertical-align: top;
      border:2px solid green;
   }

}
.cf-title {
   font-size:2.2rem;
   line-height:1.8em;
   text-align:center;
   margin:15px auto 25px;
}
.cf-area {
   max-width:1000px;
   width:94%;
   .marginCenter;
   text-align:center;

   table {
      width:100%;
      margin-bottom:30px;
   }
   th,td {
      padding:10px;
      text-align:left;
      vertical-align:top;
      font-weight:normal;
   }
   th {
      width:38%;

      .required {
         color:#ff0000;
         display:inline-block;
         float:right;
      }
   }
   th:after {
      content:"";
      display:block;
      clear:both;
   }
   input[type="text"],
   input[type="tel"],
   input[type="email"],
   textarea {
      border:2px solid @maincolor;
      background-color:#e8f1f7;
      -webkit-border-radius: 6px 6px 6px 6px;
      border-radius: 6px 6px 6px 6px;
   }
   input[type="text"],
   input[type="tel"] {
      max-width:300px;
      width:94%;
   }
   input[type="email"],
   input.address,
   textarea {
      max-width:460px;
      width:94%;
   }
   textarea { height:200px; }
   .privacy {
      margin-bottom:30px;
   }
   .btn-send {
      margin:25px auto;
   }
}
#form-confirm {
   iframe {
      border:0;
      max-width:1000px;
      width:94%;
      height:100%;
      position:fixed;
      top:0;
      left:50%;
      z-index:0;
      opacity: 0;
      visibility: hidden;
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
   }
}
#form-confirm:before {
   content:"";
   display:block;
   position:fixed;
   top:0;
   left:0;
   background:rgba(0,0,0,0.7);
   width:100%;
   height:100%;
   z-index:0;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
#form-confirm.active {
   iframe {
      opacity: 1;
      visibility: visible;
      z-index: 10001;
   }
}
#form-confirm.active:before {
   opacity: 1;
   visibility: visible;
   z-index: 10000;
}
a#btn-form-close {
   display:block;
   background:#000;
   color:#FFF;
   font-size:5rem;
   line-height:1em;
   padding:15px;
   position:fixed;
   top:0;
   left:50%;
   margin-left:-500px;
   z-index:0;
   opacity: 0;
   visibility: hidden;
}
a#btn-form-close.active {
   opacity: 1;
   visibility: visible;
   z-index: 10002;
}
a#btn-form-close:hover {
   text-decoration:none;
}






/* Archive Style
-------------------------------------------------------------------------------*/
/* news */
body.archive-news {
   -webkit-transition: all 0.6s ease;
   -moz-transition: all 0.6s ease;
   -ms-transition: all 0.6s ease;
   -o-transition: all 0.6s ease;
   transition: all 0.6s ease;
}
body.search-active {
   -moz-transform: scale(0.8);
   -webkit-transform: scale(0.8);
   -o-transform: scale(0.8);
   -ms-transform: scale(0.8);
   transform: scale(0.8);
}
#wrapper.news {
   #main-contents {
      background:url("@{imgdir}/news/bg_main_contents.png") center top no-repeat;
      padding:60px 0 60px * 2;
      text-align:center;
   }

   h3 {
      margin:155px auto 70px;
   }
   ul.search-area {
      list-style:none;
      padding:0;
      font-size:0;
      line-height:0;

      li {
         display:inline-block;
         vertical-align:top;
         margin:0 12px 40px;
      }
   }
   .category-box,
   .month-box {
      max-width:500px;
      width:94%;
      padding:25px 25px 25px 0;
      border:2px solid @maincolor;
      position:absolute;
      left:50%;
      z-index:9999;
      background-color:rgba(255,255,255,0.6);
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      transition: all 0.6s ease;
      -moz-transform: translateX(-50%) scale(0);
      -webkit-transform: translateX(-50%) scale(0);
      -o-transform: translateX(-50%) scale(0);
      -ms-transform: translateX(-50%) scale(0);
      transform: translateX(-50%) scale(0);

      .title {
         padding-left:25px;
         text-align:center;
         font-size:2.2rem;
         line-height:1.2em;
         position:relative;

         .btn-close {
            position:absolute;
            display:block;
            top:0;
            right:0;
            font-size:4rem;
            line-height:0.6em;
         }
      }
      ul {
         text-align:left;
      }
      li {
         border-bottom:1px solid @maincolor;
         font-size:2rem;
         padding:15px 0;
      }
      a {
         color:#333;
      }
   }
   .category-box.active,
   .month-box.active {
      -moz-transform: translateX(-50%) scale(1.2);
      -webkit-transform: translateX(-50%) scale(1.2);
      -o-transform: translateX(-50%) scale(1.2);
      -ms-transform: translateX(-50%) scale(1.2);
      transform: translateX(-50%) scale(1.2);
   }
   .list-title {
      margin:140px auto 90px;
   }
   ul.news-list {
      list-style: none;
      padding:0;
      max-width:1000px;
      width:94%;
      .marginCenter;
      margin-bottom:50px;

      > li {
         border-bottom:1px solid @maincolor;
         text-align:left;
         padding-bottom:30px;
         margin-bottom:50px;
      }
      > li:after {
         content:"";
         display:block;
         clear:both;
      }
      header {
         .date,ul,li {
            display: inline-block;
            vertical-align: top;
            margin-right:12px
         }
         li {
            a {
               display:block;
               background-color:@maincolor;
               color:#FFF;
               padding:0 15px;
            }
         }
      }
      .title {
         font-size:2rem;
         line-height:1.8em;
         margin:10px auto;

         a { color:#333; }
      }
      .thumb {
         width:150px;
         height:150px;
         float:right;
      }
      .content {
         width:100%;
      }
      .content.thumb-true {
         width:74%;
         float:left;
      }
   }

}
#wrapper.news.single {

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

   .post {
      width:1000px;
      padding:0 20px;
      .marginCenter;
      text-align:left;

      header {
         ul {
            padding-left:0;
         }
         .date,ul,li {
            display: inline-block;
            vertical-align: top;
            margin-right:12px
         }
         li {
            a {
               display:block;
               background-color:@maincolor;
               color:#FFF;
               padding:0 15px;
            }
         }
      }
      .title {
         font-size:2.2rem;
         line-height:1.8em;
         margin-bottom:30px;
      }
   }

}



.page-navi {
   max-width:1000px;
   width:94%;
   .marginCenter;
   text-align:center;

   span, a{
      display:inline-block;
      vertical-align:top;
      line-height:1em;
      font-size:2rem;
      border:1px solid @maincolor;
      padding:12px;
      margin:4px;
   }
   a {
      background-color:@maincolor;
      color:#FFF;
   }
   a:hover,
   a.touch {
      text-decoration:none;
      background-color:#d9ecfb;
      color:@maincolor;
   }
}






/* Single Style
-------------------------------------------------------------------------------*/
.single article.post {
	padding-bottom:30px;
	margin-bottom:40px;
}



.pagelink {
	border-top:2px solid @maincolor;
	padding-top:15px;
	margin-top:20px;
   position:relative;

   .pageback {
      position:absolute;
      top:25px;
      left:50%;
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translateX(-50%);
   }
}

.pagelink a {
	color:#000;
	text-decoration:none;
}
.pagelink a:hover {
	opacity:0.6;
}

.pageprev {
	float:left;
	text-align:left;
}

.pagenext {
	float:right;
	text-align:right;
}