@charset "UTF-8";

/*=====================
		基本設定
=====================*/
/*
@import url(https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i);*/

@main-color: #103377;//メインカラー
@sub-color: #34c1e5;//サブカラー
@accent-color: #f5ea43;//アクセントカラー
@light-color: #e1f0f5;//一番薄いサブカラー
@deep-color: #aaa;//一番濃いサブカラー
@light-base: #fff;//一番薄いbody背景色

/*=====================
	スタイル設定まとめ
=====================*/

/*角丸*/
.radius (@radius: 5px) {
	border-radius: @radius;/* CSS3草案 */
    -webkit-border-radius: @radius;/* Safari,Google Chrome用 */
    -moz-border-radius: @radius;/* Firefox用 */
}

/*線・パディング込のボックスサイズ*/
.box-border-box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

/*ゆっくり変わる*/
.transition(@transition: 0.1s) {//デフォルト0.1秒
-webkit-transition: @transition ease-in-out;
   -moz-transition: @transition ease-in-out;
     -o-transition: @transition ease-in-out;
        transition: @transition ease-in-out;
}

/*flexbox*/
.disp-flex {
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -o-flexbox;
    display: flexbox;
    display: -webkit-box;
    display: flex;
}

/*明朝文字スタイル*/

.font-mincho {
	font-family: 'Noto Serif', "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

/*背景cover*/
.bg-cover {
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
	background-position: center;
}

/*マウスオーバー時の透過設定(数値が低いほど薄い)*/
.over_alpha a:hover {
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);  /* For IE 5-7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* For IE 8 */
}
a{
	&:hover{
		opacity: .7;
	}
}
.contents-text{
	.box-border-box;

	@media screen and (min-width: 641px) and (max-width: 1000px){
		width: 70%;
	}

	@media screen and (max-width: 640px){
		width: 100%;
		padding-left: 0;
		line-height: 1.5em;
	}
	h2 {
		font-weight: bold;
		color: #000;
		font-size: 1.4rem;
		margin-bottom: 20px;
		line-height: 1.4em;
	}
	.contact-number{
		font-size: 1.5rem;
		margin-top: 20px;
		a{
			padding: 10px 25px;
			border-radius: 22px;
			background: @accent-color;
		}
	}
	p{
		line-height: 2em;
		span{
			display: block;
			text-align: right;
			font-weight: bold;
		}
	}
}
.section-title{
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	padding-bottom: 50px;
	color: @main-color;
	@media screen and (max-width: 640px){
		padding-bottom: 20px;
	}
	h2{
		@media screen and (max-width: 640px){
			font-size: 18px;
		}
	}
}
.section-title-before{
	position: relative;
	margin-top: 70px;
	@media screen and (max-width: 640px){
		margin-top: 40px;
	}
	&::before{
		content: "";
		position: absolute;
		display: block;
		left: 50%;
		top: -70px;
		background-repeat: no-repeat;
		background-size: contain;
		@media screen and (max-width: 640px){
			top: -50px;
		}
	}
}
 #before-greeting{
	 &:before{
		 background-image: url("../img/section-title-greeting.png");
		 width: 294px;
		 height: 43.5px;
		 margin-left: -147px;
		 @media screen and (max-width: 640px){
			 width: 176px;
			 height: 26px;
			 margin-left: -88px;
		 }
	 }
 }
  #before-require{
 	 &:before{
 		 background-image: url("../img/section-title-require.png");
 		 width: 266px;
 		 height: 47px;
 		 margin-left: -133px;
		 @media screen and (max-width: 640px){
			 width: 160px;
			 height: 28.2px;
			 margin-left: -80px;
		 }
 	 }
  }
	 #before-philosophy{
		 &:before{
			 background-image: url("../img/section-title-philosophy.png");
			 width: 380px;
			 height: 43.5px;
			 margin-left: -190px;
			 @media screen and (max-width: 640px){
				 width: 228px;
				 height: 26px;
				 margin-left: -114px;
			 }
		 }
	 }
 	 #before-jobs{
 		 &:before{
 			 background-image: url("../img/section-title-jobs.png");
 			 width: 154px;
 			 height: 43.5px;
 			 margin-left: -72px;
			 @media screen and (max-width: 640px){
				 width: 92px;
				 height: 26px;
				 margin-right: -46px;
			 }
 		 }
 	 }
 	 #before-schedule{
 		 &:before{
 			 background-image: url("../img/section-title-schedule.png");
 			 width: 315px;
 			 height: 43.5px;
 			 margin-left: -157px;
			 @media screen and (max-width: 640px){
				 width: 189px;
				 height: 26px;
				 margin-left: -94px;
			 }
 		 }
 	 }
 	 #before-system{
 		 &:before{
 			 background-image: url("../img/section-title-system.png");
 			 width: 240px;
 			 height: 43.5px;
 			 margin-left: -120px;
			 @media screen and (max-width: 640px){
				 width: 144px;
				 height: 26px;
				 margin-left: -72px;
			 }
 		 }
 	 }
 	 #before-flow{
 		 &:before{
 			 background-image: url("../img/section-title-flow.png");
 			 width: 165px;
 			 height: 43.5px;
 			 margin-left: -82px;
			 @media screen and (max-width: 640px){
				 width: 99px;
				 height: 26px;
				 margin-left: -50px;
			 }
 		 }
 	 }
 	 #before-recruit{
 		 &:before{
 			 background-image: url("../img/section-title-recruit.png");
 			 width: 216px;
 			 height: 43.5px;
 			 margin-left: -108px;
			 @media screen and (max-width: 640px){
				 width: 130px;
				 height: 26px;
				 margin-left: -65px;
			 }
 		 }
 	 }
 	 #before-faq{
 		 &:before{
 			 background-image: url("../img/section-title-faq.png");
 			 width: 115px;
 			 height: 43.5px;
 			 margin-left: -57px;
			 @media screen and (max-width: 640px){
				 width: 69px;
				 height: 26px;
				 margin-left: -35px;
			 }
 		 }
 	 }
 	 #before-about{
 		 &:before{
 			 background-image: url("../img/section-title-about.png");
 			 width: 209px;
 			 height: 43.5px;
 			 margin-left: -105px;
			 @media screen and (max-width: 640px){
				 width: 125px;
				 height: 26px;
				 margin-left: 63px;
			 }
 		 }
 	 }
 	 #before-contact{
 		 &:before{
 			 background-image: url("../img/section-title-contact.png");
 			 width: 286px;
 			 height: 43.5px;
 			 margin-left: -143px;
			 @media screen and (max-width: 640px){
				 width: 172px;
				 height: 26px;
				 margin-left: -86px;
			 }
 		 }
 	 }
.large-text{
	font-size: 28px;
	font-weight: bold;
	line-height: 1.4em;
	padding: 10px 0;
	text-align: center;
	@media screen and (max-width: 640px){
		font-size: 20px;
		text-align: left;
	}
}
.phrase-text{
	padding: 100px 0;
	position: relative;
	width: 70%;
	margin: 0 auto;
	&::before{
		content: "";
		display: block;
		background-image: url("../img/phrase-before.png");
		width: 33px;
		height: 28px;
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		left: -50px;
	}
	&::after{
		content: "";
		display: block;
		background-image: url("../img/phrase-after.png");
		width: 33px;
		height: 28px;
		top: 100px;
		right: 0;
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		right: -50px;
	}
}
.section-bottom-none{
	@media screen and (max-width: 640px){
		padding-bottom: 0 !important;
	}
}
/*=====================
       基本・共通
=====================*/

body {
	font-family: "Noto Sans", YuGothic, "游ゴシック", sans-serif;
	color: #000;/*基本のテキストのカラー設定*/
	width: 100%;
	font-size: 15px;
	word-wrap: break-word;
	background-color: @light-base;
	line-height: 1.5em;
}
/*
.page-inpage {
	padding-top: 90px;

	@media screen and (max-width: 640px){
		padding-top: 50px;
	}
}
*/
.contents-padding {
	padding: 100px 0 0;
	&:last-child{
		padding-bottom: 100px;
	}

}

.contents-width {
	width: 1100px;
	margin: 0 auto;
	.box-border-box;

	@media screen and (max-width: 1200px){
		width: 100%;
		padding: 0 10px;
		.box-border-box;
	}
}

/*
.sub-contents {
	width: 1000px;
	margin: 0 auto;
	.box-border-box;

	@media screen and (max-width: 1020px){
		width: 100%;
		padding: 0 10px;
		.box-border-box;
	}
}

.slim-contents {
	width: 800px;
	margin: 0 auto;
	.box-border-box;

	@media screen and (max-width: 900px){
		width: 100%;
		padding: 0 10px;
		.box-border-box;
	}
}*/

#Page-title-bg {
	position: relative;
	overflow: hidden;
	height: 200px;
	@media screen and (max-width: 640px){
		height: 30px;
	}

	z-index: -2;
	.bg-cover;
	padding: 80px 0;
	.page-title{
		position: absolute;
		left: 10%;
		top: 50%;
		@media screen and (max-width: 640px){
			left: 5%;
		}
	}
	.page-title-philosophy{
		width: 510px;
		height: 109.5px;
		margin-top: -54.75px;
		@media screen and (max-width: 640px){
			width: 306px;
			height: 66px;
			margin-top: -33px;
		}
	}
	.page-title-jobs{
		width: 207px;
		height: 108.5px;
		margin-top: -54px;
		@media screen and (max-width: 640px){
			width: 124px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-system{
		width: 321px;
		height: 109px;
		margin-top: -54px;
		@media screen and (max-width: 640px){
			width: 193px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-recruit{
		width: 345px;
		height: 109px;
		margin-top: -54px;
		@media screen and (max-width: 640px){
			width: 207px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-faq{
		width: 344px;
		height: 110px;
		margin-top: -55px;
		@media screen and (max-width: 640px){
			width: 206px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-contact{
		width: 385px;
		height: 110px;
		margin-top: -55px;
		@media screen and (max-width: 640px){
			width: 231px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-complete{
		width: 426px;
		height: 110px;
		margin-top: -55px;
		@media screen and (max-width: 640px){
			width: 256px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-about{
		width: 282px;
		height: 110px;
		margin-top: -55px;
		@media screen and (max-width: 640px){
			width: 169px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-interview{
		width: 437px;
		height: 110px;
		margin-top: -55px;
		@media screen and (max-width: 640px){
			width: 262px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-blog{
		width: 208;
		height: 110px;
		margin-top: -55px;
		@media screen and (max-width: 640px){
			width: 125px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-privacy{
		width: 348px;
		height: 110px;
		margin-top: -55px;
		@media screen and (max-width: 640px){
			width: 209px;
			height: 65px;
			margin-top: -32px;
		}
	}
	.page-title-404{
		width: 182px;
		height: 108px;
		margin-top: -54px;
		@media screen and (max-width: 640px){
			width: 109px;
			height: 65px;
			margin-top: -32px;
		}
	}
	@media screen and (max-width: 640px){
		margin-top: 50px;
	}
/*
	.page-title {
		color: #fff;
		font-size: 150%;
		background-color: rgba(0,0,0,0.7);
		display: inline-block;
		padding: 1em 2em;
		letter-spacing: 0.1em;
		line-height: 1.5em;

		@media screen and (max-width: 640px){
			font-size: 120%;
		}
	}*/
}

.page-title-bg-default {
	padding: 80px 0;
	background-image: url(../img/page-title-bg-default.jpg);
}

#Two-column {
	.disp-flex;
	flex-flow: row nowrap;
	padding: 0 20px;

	@media screen and (min-width: 641px) and (max-width: 1000px){
		padding: 0 10px;
	}

	@media screen and (max-width: 640px){
		flex-flow: column wrap;
		padding: 0;
	}

	#Main {
		width: 70%;
		padding: 50px 30px 50px 0;
		.box-border-box;

		@media screen and (max-width: 640px){
			width: 100%;
			padding-right: 0;
			//order: 2;
		}
	}

	#Side {
		width: 30%;
		background: #FFF;

		@media screen and (max-width: 640px){
			width: 100%;
			//order: 1;
		}

		.side-title {
			color: @main-color;
			font-weight: bold;
			margin-bottom: 0.5em;
			padding: 0.3em 0 0.3em 1em;
			border-left: 3px solid @main-color;
		}

		.side-contents-padding {
			padding: 10px;
		}

		#Side-author-name {
			.disp-flex;
			flex-flow: row nowrap;
			align-items: center;
			background: @light-color;
			padding: 10px 15px;

			#Author-photo {
				width: 20%;

				img {
					.radius(@radius:100px);
					border: 2px solid @sub-color;
					display: block;
				}
			}

			#Author-text {
				width: 80%;
				padding-left: 1em;
				.box-border-box;

				.author-nick {
					font-size: 90%;
				}
			}
		}

		#Side-author-post {
			border: 5px solid @light-color;

			.author-entry {

				a {
					display: block;
					padding: 5px 0;
					border-bottom: 1px dotted @deep-color;
				}

				.date {
					font-size: 80%;
				}

				.entry {
					font-size: 90%;
					padding-left: 0.5em;
				}
			}

			.author-more {
				padding-top: 10px;

				a {
					background-color: @main-color;
					color: #fff;
					padding: 0.3em 0;
					display: block;
					text-align: center;
				}
			}
		}

		#Side-category {
			padding: 10px;

			ul {
				li {
					padding-bottom: 5px;

					a {
						display: block;
						background-color: @light-color;
						padding: 0.5em 1em;
					}

					.sub-menu {

						li {
							padding: 5px 0 5px 10px;

							a {
								border: 3px solid @light-color;
								color: @main-color;
								padding: 0.3em 1em;
								font-size: 90%;
								background-color: #FFF;
							}
						}
					}
				}
			}
		}

		#Side-recommend {

			li {
				list-style: none;
			}

			.side-recommend-list {

				.side-recommend-content {
					.disp-flex;
					flex-flow: row nowrap;
					padding: 5px 0;

					a {
						display: block;

						&:first-child {
							width: 20%;
						}

						&:last-child {
							width: 80%;
							font-size: 90%;
							padding-left: 1em;
							.box-border-box;
						}
					}
				}
			}
		}
	}
}

.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;

	iframe {
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}
}
.pc{
	@media screen and (max-width: 640px){
		display: none !important;
	}
}
.sp{
	@media screen and (min-width: 641px){
		display: none !important;
	}
}
/*=====================
        記事関連
=====================*/

/* ==== post-list ==== */
.blog-content{
	background-image: url("../img/blog-bg");
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;
	margin-top: 40px;
	padding-top: 110px;
	@media screen and (max-width: 640px){
		background-size: auto;
	}
	.blog-title{
		width: 207px;
		position: absolute;
		top: -40px;
		@media screen and (max-width: 640px){
			width: 177px;
		}
	}
}

.post-list {
	.disp-flex;
	flex-flow: row wrap;
	justify-content: space-between;
	@media screen and (max-width: 1000px){
		width: 640px;
		margin: 0 auto;
		.disp-flex;
		flex-flow: column wrap;
		padding: 0 10px;
		.box-border-box;
	}

	@media screen and (max-width: 660px){
		width: 100%;
		padding: 0;
	}

	.post-box {
		width: 46%;

		@media screen and (max-width: 1000px){
			width: 100%;
			.disp-flex;
			flex-flow: row-reverse nowrap;
			align-items: flex-start;
			border-bottom: 1px solid @deep-color;
			padding: 10px 0;
			.box-border-box;
		}

		a {
			display: block;

			@media screen and (max-width: 1000px){
				width: 40%;
			}

			.post-thumnail {
				height: 370px;
				margin-bottom: 15px;
				.bg-cover;

				@media screen and (max-width: 1000px){
					height: 180px;
				}

				@media screen and (max-width: 640px){
					height: 120px;
				}

				.date {
					@media screen and (max-width: 1000px){
						display: none;
					}
				}
			}

			.post-no-tumnail {
				background-image: url(../img/no-thumbnail.png);
			}

		}
	}
}

/* ==== system-content ==== */
.system-content{
	margin-top: 40px;
	.contents-width{
		position: relative;
	}
	img{
		width: 322px;
		position: absolute;
		left: 0;
		top: -40px;
		@media screen and (max-width: 640px){
			width: 273px;
			left: 10px;
		}
	}
	.system-bg{
		display: flex;
		li{
			height: 300px;
			display: flex;
			flex-wrap: wrap;
		}
		.system-bg-small{
			width: 5%;
		}
		.system-bg-large{
			width: 30%;
			@media screen and (max-width: 640px){
				width: 50%;
			}
		}
		.system-bg-item{
			width: 100%;
			background-size: cover;
			background-position: center;
		}
		.system-bg-01,
		.system-bg-02,
		.system-bg-04,
		.system-bg-05,
		.system-bg-06{
			height: 50%;
		}
		.system-bg-05,
		.system-bg-06{
			width: 50%;
		}
		.system-bg-01{
			background-image: url("../img/system-bg01.jpg");
		}
		.system-bg-02{
			background-image: url("../img/system-bg02.jpg");
		}
		.system-bg-03{
			background-image: url("../img/system-bg03.jpg");
		}
		.system-bg-04{
			background-image: url("../img/system-bg04.jpg");
		}
		.system-bg-05{
			background-image: url("../img/system-bg05.jpg");
		}
		.system-bg-06{
			background-image: url("../img/system-bg06.jpg");
		}
		.system-bg-07{
			background-image: url("../img/system-bg07.jpg");
		}
		.system-bg-08{
			background-image: url("../img/system-bg08.jpg");
		}
	}
}

/* ==== more ==== */

.more {
	text-align: center;
	margin-top: 50px;

	a {
		display: inline-block;
		background: @main-color;
		color: #fff;
		line-height: 50px;
		font-size: 120%;
		letter-spacing: 0.1em;
		.transition;
		width: 300px;

		&:hover {
			letter-spacing: 0.2em;
		}
	}
}

/*=====================
        記事ページ
=====================*/

#Single-info {

	.post-title {
		padding-bottom: 1.5em;
		font-size: 25px;
		font-weight: bold;
		h1{
			line-height: 1.5em;
		}
		h2 {
			font-size: 200%;
			line-height: 1.3em;

			@media screen and (max-width: 640px){
				font-size: 150%;
			}
		}
	}

	.post-info {
		.disp-flex;
		flex-flow: row nowrap;
		align-items: center;
		padding-bottom: 1em;

		.post-date	{
			margin-right: 0.5em;
		}

		.post-category {
			a {
				color: @main-color;
			}
		}
	}
}

#Single-post {
	border-bottom: 1px dashed @main-color;
	margin-bottom: 2em;

	.post-thumbnail {
		height: 500px;
		.bg-cover;
		border: 5px solid #fff;

		@media screen and (max-width: 640px){
			height: 230px;
		}
	}

	.post-nothumnail {
		display:block;
		width: 100%;
		height: 1px;
		border: 0;
		border-top: 1px dashed @main-color;
		margin: 0;
	}
}

.post-box-content {
	padding: 2em 0;

	a {
		color: @accent-color;
		padding-bottom: 0.2em;
		border-bottom: 1px solid @accent-color;
	}

	a.btn {
		background: @accent-color;
		color: #fff;
		padding: 0.2em 1em;
		border-bottom: 0;
		display: inline-block;
	}

	h1,h2,h3,h4,h5,h6 {
		margin: 1em 0 0.5em;
	}

	h2 {
		background-color: @main-color;
		color: #fff;
		padding: 0.5em;
		font-size: 150%;
	}

	h3 {
		font-size: 140%;
		background: @sub-color;
		color: #fff;
		padding: 0.5em;
	}

	h4 {
		font-size: 135%;
		background: @deep-color;
		color: #fff;
		padding: 0.5em;
	}

	h5 {
		font-size: 130%;
		font-weight: bold;
		color: @main-color;
		border-bottom: 2px solid @main-color;
		padding-bottom: 0.3em;
	}

	h6 {
		font-size: 130%;
		font-weight: bold;
		padding-bottom: 0.3em;
	}

	hr {
		display:block;
		width: 100%;
		height: 1px;
		border: 0;
		border-top: 1px dotted @deep-color;
		margin: 2.5em 0;
	}

	blockquote {
		margin: 0.5em 0;
		padding: 0 1.5em;
		border-left: 5px solid @main-color;
		background-color: #fff;

		p {
			&:first-child {
				padding-top: 1em;
			}
		}
	}

	ul {
		padding: 1em 0;

		li {
			padding-bottom: 0.3em;

			&:before {
				content: "\f0da";
				font-family: FontAwesome;
				padding-right: 0.7em;
			}
		}
	}

	ol {
		padding: 1em 0 1em 1.5em;

		li {
			list-style: decimal;
			padding-bottom: 0.3em;
		}
	}

	table {
		width: 100%;
		background: #FFF;
		word-break: break-all;

		tr {

			th,td {
				border: 1px solid @deep-color;
				padding: 5px;
				.box-border-box;
				vertical-align: middle;
			}
		}
	}

	p {
		padding-bottom: 1em;
		clear: both;
		overflow: hidden;
	}

	img {
		padding: 10px 0;
	}
	img.alignright {
		float: right;
	}

	img.alignleft {
		float: left;
	}

	img.aligncenter {
		margin: 0 auto;
		display: block;
	}

	strong {
		font-weight: bold;
	}
}
.interview-text{
	h6{
		position: relative;
		display: inline-block;
	 	margin: 0 0 1.6em 15px;
		padding: 15px 20px;
		min-width: 120px;
	 	max-width: 100%;
		color: #000;
		font-weight: normal;
		font-size: 16px;
		background: #d9d9d9;
		&:before{
			content: "";
			position: absolute;
			top: 50%;
			left: -23px;
		 	margin-top: -8px;
			border: 8px solid transparent;
			border-right: 15px solid #d9d9d9;
		}
	}
}

.post_pagelink {
	.disp-flex;
	flex-flow: row nowrap;
	align-items: center;
	background-color: #FFF;

	@media screen and (max-width: 1000px){
		flex-flow: row wrap;
	}

	&:before {
		content: "〈";
		width: 5%;
		text-align: center;

		@media screen and (max-width: 1000px){
			width: 10%;
		}
	}

	&:after {
		content: "〉";
		width: 5%;
		text-align: center;

		@media screen and (max-width: 1000px){
			width: 10%;
		}
	}

	p {
		width: 45%;
		padding: 10px 5px;
		.box-border-box;
		position: relative;

		@media screen and (max-width: 1000px){
			width: 90%;
			padding: 5px;
		}

		a {
			display: block;
			padding: 10px 20px;
			color: #fff;
			background-color: @main-color;
		}
	}
}

/*=====================
        ヘッダー
=====================*/

#Loader-bg {
	background-color: #fff;
	position: fixed;
	width: 100%;
	height: 100vh;
	z-index: 111;
	text-align: center;
	top: 0;
	left: 0;

	#Loader {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		width: 200px;
		height: 200px;
		margin-top: -100px;
		margin-left: -100px;
		text-align: center;
		z-index: 222;

		i {
			color: @light-color;
		}

		p {
			padding-top: 1em;
			color: @main-color;
		}
	}
}

#Header {
	height: 90px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;

	@media screen and (max-width: 640px){
		height: 50px;
	}

	.disp-imp {
		display: block!important;
	}
}
/*
#Header-top {
	background-color: @light-color;
	padding: 0.5em;
	height: 35px;
	.box-border-box;
	.disp-flex;
	flex-flow: row nowrap;
	justify-content: space-between;


	@media screen and (max-width: 640px){
		display: none;
	}

	ul {
		.disp-flex;
		flex-flow: row nowrap;
		align-items: center;

		#Header-sns{
			padding-right: 1em;

			a {
				color: @main-color;
				padding: 0 0.3em;

				i {
					font-size: 150%;
				}
			}
		}

		#Header-tel {
			font-size: 90%;
		}
	}

	#Header-subnavi {
		li {
			padding: 0 0.5em;

			a {
				font-size: 80%;

				&:before {
					content: "\f105";
					font-family: FontAwesome;
					padding-right: 0.5em;
					padding-left: 0em;
					.transition(@transition:.1s);
				}

				&:hover {
					&:before {
						padding-right: 0.3em;
						padding-left: 0.2em;
					}
				}
			}
		}
	}
}*/

#Header-content {
	overflow: hidden;
	position: relative;
	height: 55px;
	width: 95%;
	margin: 15px auto 0;

	@media screen and (max-width: 640px){
		height: 50px;
		width: 100%;
		margin: 0;
	}

	#Header-smpmenu-btn {
		float: right;
		padding: 20px;
		cursor: pointer;

		@media screen and (min-width: 641px) and (max-width: 1000px){
			padding: 15px 20px;
		}

		@media screen and (max-width: 640px){
			padding: 15px;
			background: @accent-color;
			position: absolute;
			top: 0;
			right: 0;
		}

		i {
			font-size: 200%;

			@media screen and (max-width: 640px){
				font-size: 150%;
			}
		}

		@media screen and (min-width: 1001px){
			display: none;
		}
	}

	.header-logo {
		float: left;
		a{
			display: block;
		}
		img {
			width: 170px;
			padding: 7px 20px;
			.box-border-box;

			@media screen and (max-width: 1000px){
				width: 100px;
				padding: 7px 0;
			}
		}

		@media screen and (max-width: 1000px){
			padding: 0;
			width: 130px;
			height: 50px;
		}

		@media screen and (max-width: 640px){
	    width: 140px;
			height: 40px;
			padding-left: 10px;
			position: absolute;
			left: 0;
		}
	}

	.header-content {
		float: right;
		display: flex;
		@media screen and (max-width: 1000px){
			display: none;
		}
		li{
			a{
				padding: 0 20px;
				font-size: 1rem;
				color: #fff;
				line-height: 40px;
			}
			&:last-child{
				background: @accent-color;
				border-radius: 20px;
				a{
					padding: 0 30px;
					color: #000;
					font-weight: bold;
				}
			}
		}

/*
		.menu-main-navi-container {

			ul {
				.disp-flex;
				flex-flow:row nowrap;
				align-items: center;

				li {
					height: 55px;
					padding-top: 0.5em;
					.box-border-box;

					a {
						padding: 0.7em 1em;
						display: block;
						color: #fff;
						position: relative;

						&::after {
							position: absolute;
							bottom: -4px;
							left: 0;
							content: '';
							width: 0;
							height: 4px;
							background-color: @main-color;
							transition: .3s;
						}

						&:hover {
							&::after {
								width: 100%;
							}
						}
					}
				}
			}
		}*/
	}

	.header-contact {
		float: right;

		p {
			width: 100%;
			text-align: right;
		}

		.header-contactbtn {

			a {
				display: block;
				color: #fff;
				padding: 1em;
				background: @accent-color;
				min-width: 55px;
				height: 55px;
				.box-border-box;
				.transition(@transition:.4s);
				outline: none;
				position: relative;
				z-index: 2;
				border: 2px solid @accent-color;

				@media screen and (max-width: 800px){
					text-align: center;
					.radius(@radius: 0px);
					display: block;
					float: left;
				}

				@media screen and (max-width: 640px){
					padding: 0.3em 0.1em;
					width: 50px;
					height: 50px;
				}

				i {
					font-size: 120%;
					padding-right: 0.2em;

					@media screen and (max-width: 640px){
						padding: 10px 0;
					}
				}

				span {

					@media screen and (max-width: 640px){
						display: none;
					}
				}

				&::after {
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					-webkit-transform: scale(.3);
					transform: scale(.3);
					position: absolute;
					z-index: -1;
					display: block;
					content: '';
					.transition(@transition:.4s);
					.box-border-box;
				}

				&:hover {
					background-color: #FFF;
					color: @accent-color;
					border: 2px solid @accent-color;

					&::after {
						background: #fff;
						-webkit-transform: scale(1);
						transform: scale(1);
					}
				}
			}
		}
	}
}

#Header-smpmenu {
	display: none;
	position: fixed;
	top: 90px;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.85);

	@media screen and (max-width: 640px){
		top: 0;
	}

	/*#Header-smpmenu-top {
		background-color: @light-color;
		text-align: center;
		padding: 10px;

		@media screen and (min-width: 640px){
			display: none;
		}

		#Header-sns {
			a {
				color: @main-color;
				margin: 5px;

				i {
					font-size: 150%;
				}
			}
		}
	}*/

/*	.header-menulist {
		width: 600px;
		margin: 0 auto;

		@media screen and (max-width: 640px){
			width: 100%;
			padding: 0 10px;
			.box-border-box;
		}

		.smpmenu-title {
			text-align: center;
			padding: 10px 0;
			font-size: 130%;
		}

		.smp-menu {

			ul {
				.disp-flex;
				flex-flow:row wrap;

				li {
					width: 100%;
					text-align: left;
					border-left: 1px solid @deep-color;
					border-right: 1px solid @deep-color;
					border-bottom: 1px solid @deep-color;
					.box-border-box;

					a {
						display: block;
						width: 100%;
						padding: 10px 7px;
						.box-border-box;

						@media screen and (max-width: 640px){
							padding: 7px;
						}

						&:before {
							content: "\f0da";
							font-family: "FontAwesome";
							padding: 0 0.5em;
						}
					}
				}
			}

			.smp-menu-top {
				li {
					width: 100%;
					border: 1px solid @deep-color;
				}
			}

			.menu-sub-navi-container {
				li {
					width: 50%;

					&:nth-child(odd) {
						border-right: 0;
					}

					a {
						padding: 5px 7px;
						font-size: 80%;
					}
				}
			}

			.smp-menu-bottom {

				li {
					width: 100%;
				}

				a {
					color: #fff;
					padding: 10px 7px;
					.box-border-box;
					background-color: @accent-color;
					text-align: center;

					&:before {
						content: none;
					}

					i {
						padding: 0 0.5em;
					}
				}
			}
		}
	}*/
	.header-smp-menu-list{
		position: absolute;
		top: 50px;
		left: 50px;
		li{
			a{
				display: block;
				height: 35px;
			}
		}
	}
}

/*=====================
       フッター
=====================*/


#Footer-contact {
	background-image: url(../img/contact-bg.jpg);
	margin-top: 69px;
	.bg-cover;
	.contents-width{
		position: relative;
		@media screen and (max-width: 640px){
			display: inline-block;
		}
		.contact-flex{
			display: flex;
			@media screen and (max-width: 640px){
				display: inline-block;
			}
			.contact-text{
				margin: 50px 0;
				@media screen and (max-width: 640px){
					text-align: center;
				}
				h2{
					font-size: 35px;
			    line-height: 1.5em;
			    color: #fff;
			    font-weight: bold;
					margin-bottom: 30px;
					letter-spacing: -0.1em;
					span{
						font-size: 40px;
						letter-spacing: -2.8px;
					}
				}
				img{
					width: 308px;
					height: 101px;
					padding-bottom: 20px;
				}
				a{
					width: 300px;
					text-align: center;
					display: block;
					line-height: 50px;
					font-weight: bold;
					background: @accent-color;
					border-radius: 25px;
					@media screen and (max-width: 640px){
						margin: 0 auto;
					}
				}
			}
			.contact-pic{
				position: absolute;
				bottom: 0;
				right: 0;
				line-height: 0;
				@media screen and (max-width: 640px){
					position: inherit;
					height: 300px;
					display: inline;
					vertical-align: text-bottom;;
				}
				img{
					width: 515.5px;
				}
			}
		}
	}
}

#Footer-bg {
	background-color: #565656;
	padding: 40px 0;

	@media screen and (max-width: 640px){
		display: none;
	}

	.contents-width {
		font-size: 80%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;

		@media screen and (min-width: 641px) and (max-width: 1200px){
			flex-flow: row wrap;
			padding: 0 20px;
		}

		li {
			h2 {
				color: @main-color;
				font-size: 120%;
				font-weight: bold;
			}
		}
	}

	#Footer-sitemap {
		.disp-flex;
		flex-flow: row nowrap;
		padding: 0 10px;
		ul{
			padding-right: 50px;
			li{
				padding: 5px 0 0;
			}
		}
	}
}

#Copyright {
	background: #565656;
	width: 100%;
	font-size: 70%;
	text-align: center;
	color: #fff;
	position: relative;
	@media screen and (max-width: 640px){
		padding-top: 30px;
	}
	.contents-width{
		border-top: 1px solid #fff;
		@media screen and (max-width: 640px){
			border: none;
		}
		.footer-logo{
			float: left;
			padding-top: 15px;
			@media screen and (max-width: 640px){
				float: inherit;
			}
			img{
				width: 128px;
			}
		}
		.sroll{
			position: absolute;
			top: -42.5px;
			right: 10px;
		}
		p{
			line-height: 65px;
			@media screen and (max-width: 640px){
				line-height: inherit;
				font-size: .75rem;
			}
			&:last-child{
				@media screen and (max-width: 640px){
					line-height: 45px;
					border-top: 1px solid #fff;
					margin-top: 10px;
				}
			}
		}

	}
}

/*=====================
      トップページ
=====================*/

#Full-Slider {
	width: 100%;
	height: 90vh;
	background-image: url("../img/main-visual.jpg");
	background-size: cover;
	position: relative;
	@media screen and (max-width: 640px){
		height: 80vh;
		background-position: center;
	}
	img{
		position: absolute;
	}
	.catch-pc{
		width: 761px;
		top: 60%;
		left: 50px;
	}
	.catch-sp{
		width: 280px;
		top: 45vh;
		left: 10px;
	}
/*
	#Full-Slider-content {
		width: 100%;
		padding-top: 40vh;

		h1,h2 {
			text-align: center;
			color: #fff;
			text-shadow: 0 0 5px #555;
		}

		h1 {
			font-size: 400%;
			line-height: 1.3em;

			@media screen and (min-width: 641px) and (max-width: 1000px){
				font-size: 300%;
			}

			@media screen and (max-width: 640px){
				font-size: 200%;
			}
		}

		h2  {
			font-size: 180%;
			padding-top: 0.5em;

			@media screen and (min-width: 641px) and (max-width: 1000px){
				font-size: 150%;
			}

			@media screen and (max-width: 640px){
				font-size: 100%;
			}
		}
	}*/
}
.leading-content{
	display: flex;
	justify-content: space-between;
	height: 460px;
	position: relative;
	margin-bottom: 26.5px;
	@media screen and (max-width: 640px){
		height: 400px;
	}
	img{
		position: absolute;
		top: -26.5px;
		left: 50%;
		width: 371px;
		margin-left: -165.5px;
		@media screen and (max-width: 640px){
			width: 310px;
			top: -14px;
			margin-left: -155px;
		}
	}
	.leading-left,
	.leading-right{
		width: 45%;
		background-size: cover;
		background-position: center;
	}
	.leading-left{
		background-image: url("../img/leading-pic-left.jpg");
	}
	.leading-right{
		background-image: url("../img/leading-pic-right.jpg");
	}
}

#Slick-Slider {
	padding: 20px 0 0;

	.slick-slide-content {

		button {
			&:before {
				color: @main-color;
			}
		}

		.slick-slide {
			padding: 0 35px;
			width: 98vw;
			.box-border-box;

			a {
				display: block;

				.slick-slide-inner {
					position: relative;
					.post-thumnail {
						height: 240px;
						margin-bottom: 20px;
						.bg-cover;
					}

					.post-no-tumnail {
						background-image: url(../img/no-thumbnail.jpg);
					}
					.contents-title{
						margin-bottom: 0;
					}
				}

				/*.slick-slide-text {
					width: 100%;
					position: absolute;
					top: 230px;
					left: 0;
					z-index: 9;
					text-align: center;
					color: #FFF;
					text-shadow: 0 0 5px #555;

					@media screen and (min-width: 641px) and (max-width: 1000px){
						top: 130px;
					}

					@media screen and (max-width: 640px){
						top: 60px;
					}

					h2 {
						font-size: 400%;
						line-height: 1.3em;

						@media screen and (min-width: 641px) and (max-width: 1000px){
							font-size: 300%;
						}

						@media screen and (max-width: 640px){
							font-size: 200%;
						}
					}

					h3  {
						font-size: 180%;
						padding-top: 0.5em;

						@media screen and (min-width: 641px) and (max-width: 1000px){
							font-size: 150%;
						}

						@media screen and (max-width: 640px){
							font-size: 100%;
						}
					}
				}*/

				img {
					@media screen and (min-width: 641px) and (max-width: 1000px){
						width: 600px;
						height: auto;
					}

					@media screen and (max-width: 640px){
						width: 96vw;
						height: auto;
					}
				}
			}
		}
	}
}

.half-strong-contents {
	padding-top: 40px;
	.disp-flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: strech;
	@media screen and (max-width: 640px){
		padding: 0 10px 0;
		box-sizing: border-box;
		position: relative;
	}
	.interview-title{
		@media screen and (max-width: 640px){
			width: 365px;
			position: absolute;
			top: -40px;
			left: 10px;
		}
	}

	@media screen and (max-width: 700px){
		flex-flow: column wrap;
		align-items: center;
	}
	.contents-title{
		color: #fff;
	}
	p {
		color: #fff;
		font-size: 180%;
		line-height: 1.5em;

		@media screen and (max-width: 1000px){
			font-size: 130%;
		}
	}

	.half-strong-left {
		background-image: url(../img/interview-pic.jpg);
		@media screen and (max-width: 640px){
			height: 300px;
			box-sizing: border-box;
		}

	}

	.half-strong-right {
		background-image: url(../img/interview-bg.png);
		margin-bottom: 160px;
		position: relative;
		.interview-title{
			width: 438px;
			position: absolute;
			top: -40px;
			right: 140px;
		}
		.more{
			position: absolute;
			bottom: -54%;
	    left: 50%;
	    margin-left: -150px;
			@media screen and (max-width: 640px){
				width: 300px;
			}
		}
	}

	.half-strong-contentsbox {
		width: 50%;
		.bg-cover;
		text-align: center;
		padding: 140px 50px 30px;
		.box-border-box;

		@media screen and (min-width: 701px) and (max-width: 1000px){
			padding: 70px 30px;
		}

		@media screen and (max-width: 700px){
			width: 100%;
			padding: 70px 10px 50px;
		}
	}
}


.greeting-contents {
	padding-top: 160px;
	position: relative;
	.disp-flex;
	flex-flow: row nowrap;

	@media screen and (max-width: 640px){
		flex-flow: column wrap;
		padding: 10px;
	}
	.title-message{
		width: 378.5px;
		position: absolute;
		top: 0;
		@media screen and (max-width: 640px){
			width: 321.5px;
			left: 0;
		}
	}
	.greeting-contents-img {
		width: 40%;
		.bg-cover;
		background-image: url(../img/message-pic.jpg);
		background-position: top;

		@media screen and (min-width: 641px) and (max-width: 1000px){
			width: 30%;
		}

		@media screen and (max-width: 640px){
			width: 100%;
			height: 280px;
			margin-bottom: 10px;
			margin-top: 100px;
		}
	}
	.page-greeting-contents-img{
		@media screen and (max-width: 640px){
			margin-top: 0;
		}
	}
	.contents-text{
		width: 55%;
		@media screen and (max-width: 640px){
			width: 100%;
		}
	}
}

/*=====================
     下層ページ
=====================*/
#Main{
	.page-contents{
		padding-bottom: 100px;
		&:nth-child(1){
			padding-top: 100px;
		}
	}
}
.page-table{
	width: 100%;
	th{
		width: 25%;
		background: #565656;
		color: #fff;
		border: 1px solid #fff;
		vertical-align: middle;
		@media screen and (max-width: 640px){
			display: block;
			border: none;
			width: 100%;
		}
	}
	td{
		width: 75%;
		border: 1px solid #565656;
		@media screen and (max-width: 640px){
			display: block;
			width: 100%;
		}
	}
	th,
	td{
		padding: 10px 20px;
		box-sizing: border-box;
	}
}
.about-pic{
	padding-top: 50px;
	display: flex;
	justify-content: space-between;
	li{
		background-position: center;
		background-size: cover;
		height: 300px;
		@media screen and (max-width: 640px){
			height: 150px;
		}
	}
}
.about-pic01,
.about-pic02,
.about-pic03{
	width: 30%;
}
.about-pic04,
.about-pic05{
	width: 47%;
}
.about-pic01{
	background-image:url("../img/about01.jpg");
}
.about-pic02{
	background-image:url("../img/about02.jpg");
}
.about-pic03{
	background-image:url("../img/about03.jpg");
}
.about-pic04{
	background-image:url("../img/leading-pic-left.jpg");
}
.about-pic05{
	background-image:url("../img/leading-pic-left.jpg");
}
// philosophy
.page-contents{
	.greeting-contents{
		padding-top: 0;
	}
}
.page-greeting-box{
	text-align: center;
	width: 70%;
	margin: 0 auto;
	padding: 30px 0;
	@media screen and (max-width: 640px){
		width: 100%;
	}
	h2{
		@media screen and (max-width: 640px){
			text-align: left;
		}
	}
}
.flex-contents{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	.flex-img{
		width: 47%;
		background-position: center;
		background-size: cover;
		@media screen and (max-width: 640px){
			width: 100%;
		}
	}
	.flex-img-system{
		background-image: url("../img/leading-pic-left.jpg");
	}
	.flex-img-training{
		background-image: url("../img/leading-pic-left.jpg");
	}
	.flex-img-jobs{
		background-image: url("../img/leading-pic-left.jpg");
	}

	.contents-text{
		width: 47%;
		@media screen and (max-width: 640px){
			width: 100%;
		}
	}
}
.decoration-text-box{
	background-image: url("../img/box-bg.png");
	padding: 50px;
		@media screen and (max-width: 640px){
			padding: 15px;
		}
	span{
		font-weight: bold;
	}
	strong{
		border-bottom: 4px solid @accent-color;
	}
}
.require-section{
	.page-greeting-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		@media screen and (max-width: 640px){
			width: 85%;
		}
		li{
			width: 40%;
			padding: 10px 0;
			font-size: 1.2em;
			text-align: left;
			@media screen and (max-width: 640px){
				width: 100%;
			}
			h2{
				border-bottom: 5px solid @accent-color;
				@media screen and (max-width: 640px){
					display: inline-block;
				}
				&:before{
					content: "■";
					color: @main-color;
					padding-right: 5px;
				}
			}
		}
	}
}
.philosophy-section{
	.contents-text{
		h2{
			background: @main-color;
			padding: 5px 10px;
			color: #fff;
			margin-top: 20px;
		}
	}
}
// jobs
.lesson-flex{
	justify-content: space-between;
	li{
		width: 30%;
		color: #fff;
		padding: 20px;
		background: @sub-color;
		box-sizing: border-box;
		position: relative;
		@media screen and (max-width: 640px){
			width: 80%;
			margin: 0 auto 40px;
		}
		&:before{
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: -22px;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: bottom;
		}
	}
	.lesson01{
		&:before{
			background-image: url("../img/LESSON01.png");
			width: 148px;
			height: 22px;
		}
	}
	.lesson02{
		&:before{
			background-image: url("../img/LESSON02.png");
			width: 154px;
			height: 22px;
		}
	}
	.lesson03{
		&:before{
			background-image: url("../img/LESSON03.png");
			width: 153px;
			height: 22px;
		}
	}
}
.case-flex{
	justify-content: space-between;
	li{
		img{
			width: 309px;
		}
		@media screen and (max-width: 640px){
			margin-bottom: 40px
		}
	}
}
//system
.curriculum-section{
	.decoration-text-box{
		display: flex;
		flex-wrap: wrap;
	}
}
.curriculum-list{
	width: 50%;
	li{
		padding: 5px 0;
		h2{
			font-weight: bold;
			&:before{
				content: "◼︎";
				color: @sub-color;
				padding-right: 5px;
				font-size: 20px;
			}
		}
		p{
			font-size: .8em;
		}
	}
	@media screen and (max-width: 640px){
		width: 100%;
	}
}
// recruit
.flow-steps{
	li{
		padding-bottom: 50px;
		margin-bottom: 50px;
		position: relative;
		.contents-text{
				padding-left: 0;
		}
		.cv-btn{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			margin: 40px 0;
			a{
				width: 300px;
		    text-align: center;
		    display: block;
				height: 50px;
		    font-weight: bold;
		    background: #f5ea43;
		    border-radius: 25px;
			}
			.contact-btn{
				line-height: 50px;
				@media screen and (max-width: 640px){
					margin-bottom: 30px;
				}
			}
			.tel-btn{
				box-sizing: border-box;
				line-height: 0.9em;
				padding-top: 11px;
				font-size: 18px;
				span{
					font-weight: normal;
					font-size: .6em;
				}
			}
		}
		.decoration-text-box{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.decoration-text{
				width: 40%;
				@media screen and (max-width: 640px){
					width: 100%;
					padding: 10px 0;
				}
				.map-btn{
					padding: 5px 15px;
					color: #fff;
					margin-top: 10px;
					background: @sub-color;
					line-height: 20px;
					border-radius: 15px;
					display: inline-block;
				}
			}
		}
		&:after{
			content: "";
			display: block;
			position: absolute;
			bottom: -22px;
			left: 50%;
			width: 0;
			border-right: 30px solid transparent;
			border-top: 45px solid @sub-color;
			border-left: 30px solid transparent;
			margin-left: -30px;
		}
	}
	.step06{
		&:after{
			display: none;
		}
		padding-bottom: 0;
		margin-bottom: 0;
	}
}
.step-title{
	color: #fff;
	background: @main-color;
	padding: 10px 20px;
	font-size: 25px;
	font-family: bold;
	margin-bottom: 20px;
	&:before{
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: -22px;
		background-size: contain;
		background-repeat: no-repeat;
	}
}
.step01{
	.step-title{
		&:before{
			background-image: url("../img/STEP01.png");
			width: 107px;
			height: 22px;
		}
	}
}
.step02{
	.step-title{
		&:before{
			background-image: url("../img/STEP02.png");
			width: 113px;
			height: 22px;
		}
	}
}
.step03{
	.step-title{
		&:before{
			background-image: url("../img/STEP03.png");
			width: 113px;
			height: 22px;
		}
	}
}
.step04{
	.step-title{
		&:before{
			background-image: url("../img/STEP04.png");
			width: 113px;
			height: 22px;
		}
	}
}
.step05{
	.step-title{
		&:before{
			background-image: url("../img/STEP05.png");
			width: 113px;
			height: 22px;
		}
	}
}
.step06{
	.step-title{
		&:before{
			background-image: url("../img/STEP06.png");
			width: 113px;
			height: 22px;
		}
	}
}
//contact
.contact-section{
	.contents-text{
			text-align: center;
	}
	.contents-text-border{
		padding: 30px 0 10px;
		border: 1px solid @main-color;
		max-width: 600px;
		margin: 0 auto;
		a{
			&:before{
				content: "■";
		    color: #103377;
		    padding-right: 5px;
			}
		}
	}
}
/*=====================
     テンプレート毎
=====================*/
.accordionbox{
	dl{
		margin-bottom: 30px;
	}
}
.accordionlist dt{
  display:block;
  background: @main-color;
	color: #fff;
  padding: 20px 0 10px 5px;
  border-top: 1px solid #DFDFDF;
}
.accordionlist dt:first-child{
  border-top: none !important;
}
.accordionlist dt .acordion-title{
  padding-left: 10px;
	float: left;
}
.accordionlist dd{
  display:none;
	background: #fff;
	padding:20px 0 20px 15px;
}
.accordion_icon,
.accordion_icon span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.accordion_icon {
	position: relative;
	width: 30px;
	height: 30px;
	float: right;
	margin-right: 5px;
}
.accordion_icon span {
	position: absolute;
  left: 6px;
  width: 50%;
	height: 2px;
  background-color: #fff;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
}
.accordion_icon span:nth-of-type(1) {
  top: 5px;
	transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}
.accordion_icon span:nth-of-type(2) {
  top: 5px;
	transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
/*＋、－切り替え*/
.accordion_icon.active span:nth-of-type(1) {
	display:none;
}
.accordion_icon.active span:nth-of-type(2) {
	top: 5px;
	transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* ==== カテゴリデフォルト ==== */
.page-contents{
	max-width: 1100px;
	margin: 0 auto;
	box-sizing: border-box;
	@media screen and (max-width: 1100px){
		padding: 0 50px;
	}
	@media screen and (max-width: 640px){
		padding: 0 10px;
	}
	.post-list{
		justify-content: flex-start;
		.post-box{
			width:30%;
			margin-bottom: 50px;
			margin-right: 5%;
			a{
				@media screen and (max-width: 640px){
					width: 100%;
				}
			}
			@media screen and (max-width: 640px){
				width: 100%;
			}
			.post-thumnail{
				height: 230px;
			}
			&:nth-child(3n){
				margin-right: 0;
			}
		}
	}
}
.single-contents{
	width: 900px;
	margin: 100px auto;
	@media screen and (max-width: 640px){
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
		margin: 55px auto;
	}
}

/* ==== マップテンプレート ==== */

#Map-main {
	padding: 0 0 30px;

	h3 {
		font-size: 120%;
		.font-mincho;
		margin-bottom: 0.5em;
	}

	p {
		font-size: 90%;

		span {
			padding-right: 0.5em;

			@media screen and (max-width: 640px){
				display: block;
				padding-right: 0;
			}
		}
	}
}

#GoogleMap {
	width: 100%;

	.map-inner {
		position: relative;
		padding-bottom: 30%; // これが縦横比
		height: 0;
		overflow: hidden;

		@media screen and (min-width: 641px) and (max-width: 1000px){
			padding-bottom: 50%; // これが縦横比
		}

		@media screen and (max-width: 640px){
			padding-bottom: 75%;
		}

		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
		}
	}
}

#Map-content {
	table {

		@media screen and (max-width: 640px){
			border-bottom: 1px solid @deep-color;
		}

		tr {
			td {
				padding: 10px;

				&:first-child {
					min-width: 20%;
					max-width: 40%;
					background: @light-color;

					@media screen and (max-width: 640px){
						display: block;
						width: 100%;
						max-width: 100%;
						border-bottom: 0;
						padding: 5px;
						font-size: 90%;
					}
				}

				@media screen and (max-width: 640px){
					display: block;
					width: 100%;
					border-bottom: 0;
					padding: 5px;
					font-size: 90%;
				}
			}
		}
	}
}

#Map-photo {
	ul {
		.disp-flex;
		flex-flow: row wrap;

		li {
			width: 33.333%;
			padding: 10px;
			.box-border-box;

			@media screen and (min-width: 641px) and (max-width: 1000px){
				width: 50%;
			}

			@media screen and (max-width: 640px){
				width: 100%;
				padding: 15px 0;
			}

			.map-photo {
				height: 300px;
				.bg-cover;

				@media screen and (max-width: 640px){
					height: 230px;
				}
			}

			p {
				font-size: 90%;
				padding-top: 0.5em;
			}
		}
	}
}

/* ==== ボックステンプレート ==== */

.box-list {
	dl {
		width: 100%;
		.disp-flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		background-color: @light-color;

		@media screen and (max-width: 640px){
			flex-flow: column wrap;
		}

		dt {
			width: 50%;
			padding: 20px;
			.box-border-box;
			background-color: #FFF;

			@media screen and (max-width: 640px){
				width: 100%;
			}

			.box-title {
				padding: 30px 0px;
				text-align: center;

				span {
					font-size: 150%;
    				padding-bottom: 0.5em;
    				border-bottom: 1px solid @main-color;
    				color: @main-color;
    				.font-mincho;
				}
			}

			.box-photo {
				height: 350px;
				.bg-cover;

				@media screen and (max-width: 640px){
					height: 230px;
				}
			}
		}

		dd {
			width: 50%;
			padding: 20px 100px;
			.box-border-box;

			@media screen and (min-width: 641px) and (max-width: 1000px){
				padding: 20px;
			}

			@media screen and (max-width: 640px){
				width: 100%;
				padding: 40px 20px;
			}

			h3 {
				font-size: 130%;
				margin-bottom: 1em;
			}

			p {
				@media screen and (max-width: 640px){
					font-size: 90%;
				}
			}
		}

		&:nth-child(2n+1) {
			flex-flow: row-reverse nowrap;

			@media screen and (max-width: 640px){
				flex-flow: column wrap;
			}
		}
	}
}

/* ==== ウィンドウテンプレート ==== */

.window-list {
	dl {
		.bg-cover;
		.disp-flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;

		@media screen and (max-width: 800px){
			flex-flow: column wrap;
		}

		dt {
			width: 50%;
			.box-border-box;

			@media screen and (max-width: 800px){
				width: 100%;
				padding: 100px 20px;
			}

			h3 {
				text-align: center;
				color: #fff;
				text-shadow: 0 0 5px #000;
				.font-mincho;
				font-size: 200%;
			}
		}

		dd {
			width: 50%;
			background-color: rgba(255,255,255,0.6);
			padding: 50px;
			.box-border-box;

			@media screen and (max-width: 800px){
				width: 100%;
				padding: 20px;
			}

			p {
				background-color: #FFF;
				padding: 50px;
				width: 75%;
				margin: 0 auto;
				.box-border-box;
				text-align: justify;

				@media screen and (min-width: 1001px) and (max-width: 1200px){
					width: 85%;
				}

				@media screen and (max-width: 1000px){
					width: 100%;
					padding: 20px;
					font-size: 90%;
				}
			}
		}

		&:nth-child(2n+1) {
			flex-flow: row-reverse nowrap;

			@media screen and (max-width: 800px){
				flex-flow: column wrap;
			}
		}
	}
}

/* ==== フローテンプレート ==== */

.flow-list {
	.disp-flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;

	dl {
		width: 50%;
		padding: 20px;
		.box-border-box;

		@media screen and (max-width: 640px){
			width: 100%;
			padding: 15px 0;
		}

		dt {
			.flow-photo {
				height: 330px;
				.bg-cover;
				margin-bottom: 15px;

				@media screen and (max-width: 640px){
					height: 250px;
				}
			}
		}

		dd {

			h3 {
				.font-mincho;
				color: @main-color;
				font-size: 130%;
				margin-bottom: 0.3em;
			}

			p {
				@media screen and (max-width: 640px){
					font-size: 90%;
				}
			}
		}
	}
}

/* ==== アイテムテンプレート ==== */

.item-list {
	dl {
		.disp-flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: stretch;
		margin-bottom: 30px;

		@media screen and (max-width: 1200px){
			margin-bottom: 10px;
		}

		@media screen and (max-width: 640px){
			flex-flow: column wrap;
		}

		dt {
			width: 35%;
			.bg-cover;

			@media screen and (max-width: 640px){
				width: 100%;
				height: 250px;
			}
		}

		dd {
			width: 65%;
			background-color: #FFF;
			padding: 30px;
			.box-border-box;
			min-height: 250px;

			@media screen and (max-width: 640px){
				width: 100%;
				padding: 15px 10px;
				min-height: auto;
			}

			h3 {
				font-size: 150%;
				color: @main-color;
				.font-mincho;
				margin-bottom: 0.5em;
			}

			.item-text {
				margin-bottom: 0.5em;

				@media screen and (max-width: 640px){
					font-size: 90%;
				}
			}

			.item-option {
				color: @sub-color;
			}

			.item-number {
				text-align: right;
				color: @accent-color;
				font-size: 200%;
				font-weight: bold;
				.font-mincho;
				padding-top: 1em;
			}
		}
	}
}

/* ==== ビューテンプレート ==== */

.views-list {
	.views-box {
		margin-bottom: 50px;

		.views-title {
			text-align: center;
			font-size: 150%;
			.font-mincho;
			margin-bottom: 0.3em;
		}

		h3 {
			text-align: center;
			margin-bottom: 1em;
		}

		.flow-photo {
			.bg-cover;

			p {
				color: #fff;
				font-size: 200%;
				.font-mincho;
				text-shadow: 0 0 5px #000;
				text-align: center;
				padding: 200px 10px;
				line-height: 1.4em;

				@media screen and (max-width: 640px){
					padding: 100px 10px;
					text-align: left;
					font-size: 150%;
				}
			}
		}

		.views-text {
			padding: 20px;
			width: 70%;
			margin: 0 auto;
			.box-border-box;
			line-height: 2em;

			@media screen and (max-width: 1200px){
				width: 100%;
			}

			@media screen and (max-width: 640px){
				width: 100%;
				padding: 10px;
				font-size: 90%;
				line-height: 1.5em;;
			}
		}
	}
}

/*=====================
       カスタム投稿
=====================*/

.customone {
	padding-bottom: 2em;

	p {
		font-weight: bold;
		background: @light-color;
		.radius;
		padding: 1em;
	}
}

/*=====================
       ギャラリー
=====================*/

#Gallery-list {
	padding: 5px;

	.gallery-list {
		.disp-flex;
		flex-flow: row wrap;
		align-items: stretch;

		.gallery-box {
			width: 33.333%;
			padding: 5px;
			.box-border-box;

			@media screen and (max-width: 1300px){
				width: 50%;
			}

			a {
				display: block;

				.gallery-thumbnail {
					height: 350px;
					.bg-cover;

					@media screen and (max-width: 640px){
						height: 190px;
					}
				}
			}
		}
	}
}

.gallery-photo {
	width: 100%;
	text-align: center;
	position: relative;
	.box-border-box;

	@media screen and (min-width: 641px) and (max-width: 1300px){
		padding: 0 30px;
	}

	p {
		position: absolute;

		i {
			font-size: 200%;
			color: @sub-color;

			@media screen and (max-width: 640px){
				font-size: 150%;
			}
		}
	}

	.oldpage {
		left: -30px;
		top: 50%;
		margin-top: -30px;

		@media screen and (max-width: 1300px){
			left: 0;
		}

		@media screen and (max-width: 640px){
			margin-top: -20px;
			left: 5px;
		}
	}

	.newpage {
		right: -30px;
		top: 50%;
		margin-top: -30px;

		@media screen and (max-width: 1300px){
			right: 0;
		}

		@media screen and (max-width: 640px){
			margin-top: -20px;
			right: 5px;
		}
	}
}

#Gallery-info {
	padding: 1.5em 0;
	border-bottom: 1px dashed @main-color;

	.post-title {
		padding-bottom: 1.5em;

		@media screen and (max-width: 640px){
			padding-bottom: 0.8em;
		}

		h1 {
			font-size: 200%;
			line-height: 1.5em;

			@media screen and (max-width: 640px){
				font-size: 150%;
			}
		}
	}
}

/*=====================
        ユーザー
=====================*/

#User-icon {
	.disp-flex;
	flex-flow: row wrap;
	align-items: stretch;

	.user-icon-box {
		width: 20%;
		padding: 5px;
		.box-border-box;

		@media screen and (min-width: 641px) and (max-width: 1200px){
			width: 25%;
		}

		@media screen and (max-width: 640px){
			width: 100%;
			padding: 5px 0;
		}

		.user-icon-box-inner {
			background-color: #FFF;
			padding: 10px;
			height: 100%;

			@media screen and (max-width: 640px){
				height: auto;
				overflow: hidden;
			}
		}
	}

	.user-icon-thumbanil {

		@media screen and (max-width: 640px){
			float: left;
			width: 30%;
		}

		img {
			border: 2px solid @sub-color;
			.box-border-box;
			display: block;
			margin: 0 auto;

			@media screen and (max-width: 640px){
				margin: 0 auto 10px;
			}
		}
	}

	.user-icon-nick {
		font-size: 90%;
		font-weight: bold;

		@media screen and (max-width: 640px){
			float: right;
			width: 70%;
			padding-left: 10px;
			.box-border-box;
		}
	}

	h3 {
		color: @main-color;
		font-weight: bold;
		font-size: 110%;
		margin-bottom: 0.5em;

		@media screen and (max-width: 640px){
			float: right;
			width: 70%;
			padding-left: 10px;
			.box-border-box;
		}
	}

	.user-icon-description {
		font-size: 90%;

		@media screen and (max-width: 640px){
			float: right;
			width: 70%;
			padding-left: 10px;
			.box-border-box;
		}
	}

	.user-icon-link {
		text-align: right;

		@media screen and (max-width: 640px){
			float: right;
			width: 70%;
			padding-left: 10px;
			.box-border-box;
		}

		a {
			color: @sub-color;

			&:before {
				content: "\f0da";
				font-family: "FontAwesome";
				padding-right: 0.5em;
			}
		}
	}
}

#User-list {
	.disp-flex;
	flex-flow: row wrap;
	align-items: stretch;

	.user-list-box {
		width: 50%;
		padding: 5px;
		.box-border-box;

		@media screen and (max-width: 640px){
			width: 100%;
			padding: 5px 0;
		}

		.user-list-box-inner {
			.disp-flex;
			flex-flow: row nowrap;
			align-items: stretch;
			padding: 10px;
			.box-border-box;
			background-color: #FFF;
			height: 100%;

			.user-list-thumbanil {
				width: 30%;

				img {
					border: 2px solid @sub-color;
					.box-border-box;
					display: block;
				}
			}

			.user-list-text {
				width: 70%;
				padding-left: 10px;
				.box-border-box;

				.user-list-nick {
					font-size: 90%;
					font-weight: bold;
				}

				h3 {
					color: @main-color;
					font-weight: bold;
					font-size: 110%;
					margin-bottom: 0.5em;
				}

				.user-list-description {
					font-size: 90%;
				}

				.user-list-link {
					text-align: right;

					a {
						color: @sub-color;

						&:before {
							content: "\f0da";
							font-family: "FontAwesome";
							padding-right: 0.5em;
						}
					}
				}
			}
		}
	}
}

#User-content {

	.user-content-box {
		padding: 10px;

		@media screen and (max-width: 640px){
			padding: 5px 0;
		}

		.user-content-box-inner {
			background-color: #FFF;
			padding: 20px;
			overflow: hidden;

			@media screen and (max-width: 640px){
				padding: 10px;
			}

			.user-content-thumbanil {
				width: 25%;
				float: left;

				img {
					border: 2px solid @sub-color;
					.box-border-box;
					display: block;
				}
			}

			.user-content-nick {
				font-weight: bold;
				width: 75%;
				padding-left: 20px;
				.box-border-box;
				float: right;

				@media screen and (max-width: 640px){
					padding-left: 10px;
				}
			}

			h3 {
				font-weight: bold;
				font-size: 120%;
				color: @main-color;
				margin-bottom: 0.5em;
				width: 75%;
				padding-left: 20px;
				.box-border-box;
				float: right;

				@media screen and (max-width: 640px){
					padding-left: 10px;
				}
			}

			.user-content-description {
				width: 75%;
				padding-left: 20px;
				.box-border-box;
				float: right;

				@media screen and (max-width: 640px){
					padding-left: 10px;
					font-size: 90%;
				}
			}

			.user-content-text {
				width: 75%;
				padding-left: 20px;
				.box-border-box;
				float: right;

				@media screen and (max-width: 640px){
					clear: both;
					width: 100%;
					padding-left: 0;
				}

				.user-content-table {
					padding-top: 10px;

					table {
						width: 100%;

						tr {
							th,td {
								padding: 5px;
								border: 1px solid @deep-color;
							}

							th {
								background-color: @light-color;
							}
						}
					}
				}

				.user-content-link {
					text-align: right;
					padding-top: 10px;

					a {
						color: @sub-color;

						&:before {
							content: "\f0da";
							font-family: "FontAwesome";
							padding-right: 0.5em;
						}
					}
				}
			}
		}
	}
}

/*=====================
        送信完了
=====================*/

.complete-info {
	padding: 20px;
	background-color: #fff;
	.radius;

	h2 {
		margin-bottom: 0.5em;
		color: @sub-color;
		font-weight: bold;
		font-size: 120%;
	}
}

/*=====================
          404
=====================*/


#Notfound{
	text-align: center;
	padding:50px 0;
	img{
		width:80px;
		height:80px;
	}
	h3{
		opacity: 0.8;
		padding-bottom:10px;
	}
	h4{
		br{
			@media screen and (min-width: 641px){
				display: none;
			}
		}
	}
	.link{
			margin-top:20px;
		a{
			padding:10px;
			background: @accent-color;
			color:#fff;
		}
	}
}

/*=====================
        プラグイン
=====================*/

.breadcrumbs {
	background: #565656;
	color: #fff;
	font-size: 80%;
	padding: 0.5em 1em;
}

#Form {
	width: 600px;
	margin: 0 auto;

	@media screen and (max-width: 640px){
		width: 100%;
	}

	input,
	textarea {
		font-size: 120%;
		padding: 5px;
		.box-border-box;
		max-width: 100%;
		.radius;
		border: 1px solid @deep-color;
	}

	textarea {
		width: 100%;
	}

	#Type {
		font-size: 140%;
	}

	.half {
		input {
			width: 50%;
		}
	}

	.short {
		input {
			width: 20%;
		}
	}

	input[type="submit"] {
		background: @accent-color;
		padding: 0.5em 1em;
		border: 0;
		cursor: pointer;
		margin: 0 0.5em;
	}

	dl {
		.disp-flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: stretch;

		@media screen and (max-width: 640px){
			flex-flow: column wrap;
		}

		dt {
			width: 30%;
			padding: 1em 1em 1em 0;
			.box-border-box;

			@media screen and (max-width: 640px){
				width: 100%;
				padding: 1em 1em 0 0;
			}

			strong {
				margin-left: 0.5em;
				display: inline-block;
				background: @sub-color;
				color: #fff;
				font-size: 90%;
				padding: 0.1em 0.5em;
			}
		}

		dd {
			width: 70%;
			padding: 1em 0;
			.box-border-box;

			@media screen and (max-width: 640px){
				width: 100%;
			}
		}
	}

	p {
		text-align: center;
		padding: 1em 0;
	}
}

.mw_wp_form_preview {

	#Form {
		dl {
			dd {
				background-color: @light-color;
				padding: 1em;
				.radius;
				margin: 0.2em 0;

				@media screen and (max-width: 640px){
					padding: 0.5em;
				}
			}
		}
	}
}

#Pagenate {
	padding: 20px 0;

	.wp-paginate {
		text-align: center;

		.current {
			background-color: @sub-color;
			border: 0;
		}
	}
}
















/* 募集要項
=================================================================== */
#requirements-area .list h2{
	text-align: center;
    font-size: 32px;
    color: #103377;
    font-weight: bold;
    margin: 80px 0 60px;
    position: relative;
}

#requirements-area .list .outline{
	margin: 0 0 30px;
	position: relative;
	background: #eee;
	padding: 40px;
}
#requirements-area .list .outline .title{
	margin: 0 0 10px 360px;
	border-bottom: #0068b7 1px solid;
}
#requirements-area .list .outline .title h3{
	border: none;
	padding: 0;
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: bold;
	color: #103377;
}
#requirements-area .list .outline .title p{
	margin: 0 0 10px;
}
#requirements-area .list .outline .img{
	position: absolute;
	left: 40px;
	top: 40px;
	width: 320px;
}
#requirements-area .list .outline .table{
	margin: 0 0 30px 360px;
}
#requirements-area .list .outline .table table{
	width: 100%;
	border: none;
	margin: 0;
}
#requirements-area .list .outline .table table th{
	font-weight: bold;
	width: 130px;
	padding: 10px 0;
	color: #103377;
	text-align: left;
	vertical-align: top;
	border: none;
	word-break:break-all;
}
#requirements-area .list .outline .table table td{
	border: none;
	word-break:break-all;
	padding: 10px 0;
}
@media screen and (max-width: 737px){
	#requirements-area .list .outline{
		margin: 0 0 20px;
		padding: 20px;
	}
	#requirements-area .list .outline .title{
		margin: 0 0 10px;
	}
	#requirements-area .list .outline .title h3{
		font-size: 18px;
	}
	#requirements-area .list .outline .img{
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		margin: 0 0 10px;
	}
	#requirements-area .list .outline .table{
		margin: 0 0 20px;
	}
	#requirements-area .list .outline .table table{
		font-size: 12px;
	}
	#requirements-area .list .outline .table table th{
		width: 100px;
	}
}

#requirements-area .list .outline ul.link-btn{
	text-align: center;
	margin: 0;
}
#requirements-area .list .outline ul.link-btn li{
	margin: 0 10px;
	display: inline-block;
}
#requirements-area .list .outline ul.link-btn li a{
	display: inline-block;
	min-width: 260px;
	padding: 15px 25px;
	border-radius: 5px;
	color: #000;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	background: #f5ea43;
	border-bottom:  #e8db13 3px solid;
	text-decoration: none;
	box-sizing: border-box;
}
#requirements-area .list .outline ul.link-btn li a:before{
	content: "\f0a9";
	padding: 0 5px 0 0;
    font-family: "FontAwesome";
}
#requirements-area .list .outline ul.link-btn li a:hover{
	background: #e8db13;
}
@media screen and (max-width: 737px){
	#requirements-area .list .outline ul.link-btn li{
		margin: 0 0 10px;
		display: block;
	}
	#requirements-area .list .outline ul.link-btn li:last-child{
		margin: 0;
	}
	#requirements-area .list .outline ul.link-btn li a{
		display: block;
		width: 100%;
		padding: 10px 25px;
	}
}

/*** ------------------------------------------------------------------------------ 

募集要項詳細

-----------------------------------------------------------------------------  ***/
#requirements-single-area section {
    position: relative;
    padding: 80px 0;
    background-repeat: repeat;
    background-size: cover;
    background-attachment: inherit;
}

#requirements-single-area .block-area .block.no-img{
	padding: 15px 20px;
}
#requirements-single-area .block-area .block .img{
	padding: 0 0 10px;
	margin: -15px 0 0;
}
#requirements-single-area #point-area img {
    width: 100%;
    height: auto;
}
#requirements-single-area .block-area .block .img {
    padding: 0 0 10px;
    margin: -15px 0 0;
}
#requirements-single-area .block-area .block.bg .text {
    padding: 0 20px;
}

#requirements-single-area .set-area .img{
	float:left;
	width: 400px;
	margin: 0;
}

#requirements-single-area h2.font-change{
	text-align: center;
	font-size: 32px;
	color: #103377;
	font-weight: bold;
	margin: 0 0 50px;
	position: relative;
}
#requirements-single-area .set-area .img {
    float: left;
    width: 400px;
    margin: 0;
}
#requirements-single-area .set-area .text{
	margin:0 0 0 420px;
}

#requirements-single-area p.btn {
	margin: 20px 0 40px;
	text-align: center;
}
#requirements-single-area p.btn br{
	display: none;
}
#requirements-single-area p.btn a {
	display: inline-block;
	padding: 15px 25px;
	border-radius: 5px;
	color: #FFF;
	text-align: center;
	font-size: 16px;
	background: #c60125;
	border-bottom:  #97001c 3px solid;
	text-decoration: none;
}
#requirements-single-area p.btn a::before {
	content: "\f0a9";
	padding: 0 5px 0 0;
    font-family: "FontAwesome";
}
#requirements-single-area p.btn a:hover {
	background: #97001c;
}

#requirements-single-area .headline{
	padding: 80px 0 0;
}
#requirements-single-area .headline h1{
	text-align: center;
	font-size: 32px;
	color: #333;
	font-weight: bold;
	margin: 0 0 20px;	
}
#requirements-single-area .headline ul{
	text-align: center;
	border-bottom: #CCC 1px dotted;
	padding: 0 0 10px;
}
#requirements-single-area .headline ul li{
	display: inline-block;
	margin: 0 10px 10px;
}
#requirements-single-area .headline ul li a{
}
#requirements-single-area .headline ul li a::before {
	content: "\f0a9";
	padding: 0 5px 0 0;
    font-family: "FontAwesome";
}
@media screen and (max-width: 737px){
	#requirements-single-area h2.font-change{
	     font-size: 24px;
	    margin: 0 10px 20px;
	}
	#requirements-single-area section{
		padding: 30px 0;
	}
	#requirements-single-area .headline{
		padding: 30px 0;
	}
	#requirements-single-area .headline h1{
		font-size: 22px;	
	}
	#requirements-single-area .set-area .img {
		float: none;
		width: 100%;
		margin: 0 auto 1.6em;
	}
	#requirements-single-area .set-area .text {
    	margin: 0;
	}
}


#requirements-single-area .point,
#requirements-single-area .message,
#requirements-single-area .related{
	background: #eeeeee;
}
#requirements-single-area .related{
	margin: 0 0 -60px !important;
	padding: 60px 0 !important;
}
#requirements-single-area .block{
	background: #FFF;
}
#requirements-single-area .guideline table,
#requirements-single-area .guideline table th,
#requirements-single-area .guideline table td{
	border: 1px #CCC solid;
	word-break:break-all;
	width: 100%;
}
#requirements-single-area .guideline table th{
	width: 240px;
	text-align: left;
	padding: 10px 15px;
	font-weight: bold;
}
#requirements-single-area .guideline table td{
	padding: 10px 15px;
	width: auto;
}

#requirements-single-area .inner .block-area .block {
    width: 31%;
    float: left;
    margin: 0 3% 20px 0;
    padding: 15px 0;
}
#requirements-single-area .inner .block-area .block:nth-of-type(3n){
	margin: 0 0 20px;
}

#requirements-single-area .inner .block-area .block img{
    width: 31%;
    float: left;
    margin: 0 0 20px 0;
}
#requirements-single-area .inner .block-area .block .img {
    padding: 0 0 10px;
    margin: -15px 0 0;
}

#requirements-single-area .inner .block-area .block .img img{
	max-width: 100%;
}


@media screen and (max-width: 737px){
	#requirements-single-area .related{
		padding: 30px 0 !important;
	}
	#requirements-single-area .guideline table th{
		width: 100%;
		padding: 10px;
	}
	#requirements-single-area .guideline table td{
		padding: 10px;
	}
	#requirements-single-area .inner .block-area .block {
		width: 100%;
		float: none;
		margin: 0 0 20px 0;
		padding: 15px 0;
	}
}
#requirements-single-area .message .name{
	text-align: right;
	font-weight: bold;
}
#requirements-single-area .message .set-area .img{
	float:right;
	margin: 0 0 10px 20px;
}
#requirements-single-area .message .set-area .text{
	margin: 0;
}
@media screen and (max-width: 737px){
	#requirements-single-area .message .set-area .img{
		margin: 0 auto 1.6em;
	}
}

#requirements-single-area  .form .inner .input-area {
    border: #CCC 3px solid;
    padding: 30px;
	box-sizing: border-box;
}

#requirements-single-area .form .inner table {
    border: none;
    width: 100%;
}

#requirements-single-area .form .inner table th {
    border: none;
    display: list-item;
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    background: none;
	font-weight: bold;
	text-align: left;
}
#requirements-single-area .form .inner table th span {
    font-size: 12px;
	font-weight: bold;
    background: #f5ea43;
    display: inline-block;
    margin: 0 0 0 10px;
    color: #000;
    padding: 0px 10px;
}
#requirements-single-area .form .inner table td {
    border: none;
    display: list-item;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
#requirements-single-area .form .inner table td input[type=text], #requirements-single-area .form .inner table td textarea {
    background: #eeeeee;
    border: none;
    outline: none;
    padding: 10px;
    width: 100%;
	box-sizing: border-box;
}
#requirements-single-area .form .inner .btn, #requirements-single-area .form .inner .agree {
    text-align: center;
}
#requirements-single-area .form .inner .btn input{
	display: inline-block;
	min-width: 260px;
	padding: 15px 25px;
	border-radius: 5px;
	color: #000;
	font-weight: bold;
	text-align: center;
	font-size: 16px;
	background: #f5ea43;
    border: none;
	border-bottom:  #e8db13 3px solid;
	text-decoration: none;
    cursor: pointer;
	margin: 0 10px 20px;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
}
#requirements-single-area .form .inner .btn input:before{
	content: "\f0a9";
	padding: 0 5px 0 0;
    font-family: "FontAwesome";
}
#requirements-single-area .form .inner .btn input:hover{
	background: #e8db13;
}

.form .inner .input-area{
	border: #CCC 3px solid;
	padding: 30px;
}
#entry-form p{
	margin: 0 0 20px;
}
.form .inner .step02,
.form .inner .step03{
	display: none;
}
.form .inner .mw_wp_form_error .step02{
	display: block;
}
.form .inner .mw_wp_form_error .step01{
	display: none;
}
.form .inner .mw_wp_form_preview .step03{
	display: block;
}
.form .inner .mw_wp_form_preview .step01{
	display: none;
}

@media screen and (max-width: 737px){
	#requirements-single-area table.table-2cell th,
	#requirements-single-area table.table-2cell td{
		display: list-item;
		box-sizing: border-box;
	}
}

#form-flow {
	padding: 80px 0;
}
#form-flow h2{
	background: none;
    text-align: center;
    font-size: 32px;
    color: #103377;
    font-weight: bold;
    margin: 0 0 50px;
    position: relative;
}

#form-flow .input-area{
    border: #CCC 3px solid;
    padding: 30px;
    box-sizing: border-box;
}

#form-flow .btn {
	text-align: center;
}
#form-flow .btn input{
	display: inline-block;
	min-width: 260px;
	padding: 15px 25px;
	border-radius: 5px;
	color: #000;
	font-weight: bold;
	text-align: center;
	font-size: 16px;
	background: #bbb;
    border: none;
	border-bottom:  #aaa 3px solid;
	text-decoration: none;
    cursor: pointer;
	margin: 0 10px 20px;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
}
#form-flow .btn .mfp_element_submit:input{
	background: #f5ea43;
	border-bottom:  #e8db13 3px solid;
}
#form-flow .btn input:before{
	content: "\f0a9";
	padding: 0 5px 0 0;
    font-family: "FontAwesome";
}
#form-flow .btn input:hover{
	background: #e8db13;
}



#form-flow table{
	border: none;
	width: 100%;
}
#form-flow table th{
	border: none;
	display: list-item;
	list-style: none;
	padding: 0;
	margin: 0 0 10px;
	background: none;
	text-align: left;
}
#form-flow table th span{
	font-size: 12px;
	font-weight: bold;
	background: #f5ea43;
	display: inline-block;
	margin: 0 0 0 10px;
	color: #000;
	padding: 0px 10px;
}
#form-flow table td{
	border: none;
	display: list-item;
	list-style: none;
	padding: 0;
	margin: 0 0 20px;
}
#form-flow .mw_wp_form_preview table td{
	border: #CCC 1px solid;
	padding: 10px;
}
#form-flow table td input[type=text],
#form-flow table td textarea{
	background: #eeeeee;
	border: none;
	outline: none;
	padding: 10px;
	width: 100%;
}
#form-flow .btn,
#form-flow .agree {
	text-align: center;	
}
#form-flow .btn input{
	display: inline-block;
	min-width: 260px;
	padding: 15px 25px;
	border-radius: 5px;
	color: #000;
	text-align: center;
	font-size: 16px;
	background: #f5ea43;
    border: none;
	border-bottom: #e8db13 3px solid;
	text-decoration: none;
    cursor: pointer;
	margin: 0 10px 20px;
	transition: 0.3s;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	-ms-transition: 0.3s;
}
#form-flow .btn input:before{
	content: "\f0a9";
	padding: 0 5px 0 0;
    font-family: "FontAwesome";
}
#form-flow .btn input:hover{
	background: #e8db13;
}
#form-flow .btn input:nth-of-type(2){
	background: #999;
	border-bottom:  #666 3px solid;
}
#form-flow .btn input:nth-of-type(2):hover{
	background: #666;
}
#form-flow .step01 {
    display: none;
}
#form-flow .step02{
    display: none;
}


@media screen and (max-width: 737px){
	#form-flow {
		padding: 30px 0;
	}
	#form-flow .form-tel{
		display: block;
		border-radius: 5px;
		padding: 10px;
		border: #c60125 1px solid;
		border-bottom: #c60125 3px solid;
		color: #c60125;
		text-align: center;
	}
	#form-flow .input-area{
		border: #CCC 3px solid;
		padding: 10px;
	}
	#form-flow .contact-number{
		font-size: 18px;
	}
	#form-flow .contact-number li{
		display: block;
		margin: 0 0 10px;
		color: #333;
		font-size: 14px;
	}
	#form-flow .contact-number li span{
		font-size: 12px;
	}
	#form-flow .contact-number li strong{
		display: block;
		border-radius: 5px;
		padding: 10px;
		border: #666 1px solid;
		border-bottom: #666 3px solid;
		color: #666;
		text-align: center;
	}
	#form-flow .contact-number li strong span{
		background: #666;
	}
	#form-flow .contact-number li a{
		display: block;
		border-radius: 5px;
		padding: 10px;
		border: #c60125 1px solid;
		border-bottom: #c60125 3px solid;
		color: #c60125;
		font-weight: bold;
		text-align: center;
	}
	#form-flow .agree {
		text-align: left;	
	}
}