@charset "UTF-8";

/*=====================
 基本カラー設定はここから
=====================*/

/*ベース色カラー（スライダー背景色）*/
@base-bgcolor: #FFF4F6;

/*メイン背景カラー（コンテンツ背景）*/
@main-bgcolor: #fff;

/*サブ背景カラー（右カラム背景）*/
@sub-bgcolor: #fff5bc;

/*メインテキストカラー*/
@main-txtcolor: #333;

/*抜きテキストカラー*/
@light-txtcolor: #fff;

/*サブカラー（タグ・お問い合わせボタン背景色）*/
@sub-color: #0078CF;

@sub-coloron: @sub-color + #111111;

/*サブカラー２（カテゴリ・ナビ背景）*/
@sub2-color: #8C8E8F;

/*オレンジ*/
@orange: #FABE00;

/*明るめオレンジ*/
@lightorange: #FFC800;

/*明るめブルー*/
@lightblue: #2CAEDE;

/*背景薄ブルー*/
@whiteblue: #EFF3F6;

/*ディープブルー*/
@deepblue: #123e60;

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

/*メインボーダースタイル*/
.main-border {
	border: 1px #ccc solid;
}

/*ボーダー付背景グラデ*/
.grad-box {
	background-image: -webkit-linear-gradient(#fff 0%, #eee);
	background-image: -o-linear-gradient(#fff 0%, #eee);
	background-image: linear-gradient(#fff 0%, #eee);
}

/*ボーダー付背景グラデon*/
.grad-box-on {
	background-image: -webkit-linear-gradient(#eee 0%, #fff);
	background-image: -o-linear-gradient(#eee 0%, #fff);
	background-image: linear-gradient(#eee 0%, #fff);
}

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

/*背景透明黒*/
.bg-alpha-bk {
	background-color:rgba(0,0,0,0.65);
}

/*線・パディング込のボックスサイズ*/
.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: "ヒラギノ明朝 ProN W3","HiraMinProN-W3","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
}

/*英語Font*/
.font-en {
	font-family: 'Slabo 27px', serif;
}

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

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

/*=====================
　　記事内スタイル設定
=====================*/

.post_box {
	font-size: 16px;

	@media screen and (max-width: 640px){
		font-szie: 14px;
	}

	h1 {
		color: @deepblue;
		border-bottom: 5px solid @deepblue;
		//以下固定
		font-size: 180%;
		margin: 30px 0 10px;
		background: #FFF;
		clear: both;
	}

	h2 {
		color: #fff;
		//以下固定
		font-size: 150%;
		margin: 30px 0 10px;
		background: @deepblue;
		padding: 0 10px;
		clear: both;
	}

	h3 {
		color: @deepblue;
		border-bottom: 5px double @deepblue;
		background: #FFF;
		//以下固定
		font-size: 150%;
		margin: 30px 0 10px;
		padding: 0 10px;
		clear: both;
	}

	h4 {
		color: @deepblue;
		border-bottom: 3px solid @deepblue;
		//以下固定
		font-size: 130%;
		margin: 30px 0 10px;
		clear: both;
	}

	h5 {
		border-bottom: 2px dotted;
		//以下固定
		font-size: 25px;
		margin: 30px 0 10px;
		font-size: 130%;
		clear: both;
	}

	h6 {
		font-size: 130%;
		//以下固定
		font-size: 22px;
		margin: 30px 0 10px;
		border-bottom: 1px solid;
		clear: both;
	}

	blockquote {
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		background-color: #fff;
		margin: 10px 0;
		padding: 3em 1em;
		position: relative;
	}

	blockquote:before {
		content: "“";
		font-size: 600%;
		line-height: 1em;
		font-family: "ＭＳ Ｐゴシック",sans-serif;
		color: #ccc;
		position: absolute;
		left: 0;
		top: 0;
	}

	blockquote:after {
		content: "”";
		font-size: 600%;
		line-height: 0em;
		font-family: "ＭＳ Ｐゴシック",sans-serif;
		color: #ccc;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	img {
		max-width: 100%;
		height: auto;
		margin: 1em 0;
	}
}

/*=====================
    共通ルールなど
=====================*/

.full_c_title {
	width: 100%;
	text-align: center;
	margin-bottom: 30px;

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

	p {
		border-top: 3px solid @sub-color;
		font-size: 150%;
		font-weight: bold;
		padding-top: 10px;
		color: @sub-color;
	}
}

.full_c_button {
	width: 100%;
	text-align: center;

	a {
		display: inline-block;
		padding: 5px 20px;
		font-size: 150%;
	}
}

.top_main_content {
	h3.title {
		color: @deepblue;
	    font-size: 350%;
	    margin-bottom: 10px;
	    text-align: left;
	    .font-en;

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

	.img {
		margin-bottom: 10px;

		img {
			max-width: 100%;
		}
	}

	.morelink {
		text-align: right;

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

		a {
			text-align: right;
			padding: 12px 15px;
			background: @deepblue;
			color: #fff;
			font-size: 120%;

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

.top_main_content {
	h4.title {
		color: @deepblue;
	    font-size: 190%;
	    margin-bottom: 10px;
	    text-align: left;

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

.breadcrumbs {
	text-align: left;
	padding: 10px;
	background: @deepblue;
	color: #fff;
	width: 100%;
	.box-border-box;

	a {
		color: #fff;
	}
}
.reform-breadcrumbs{
	background-color:#76001C;
}

/*=====================
     各ページヘッダー
=====================*/

#Pageid_top {
	background: #fff;
}

#Pageid_inpage {
	background: @whiteblue;

	#Top_news {

		li {
			padding: 20px 14px 25px 14px;
		}
	}
}

/*=====================
        基本css
=====================*/

body {
	font-family: YuGothic, '游ゴシック', sans-serif;
	color: @main-txtcolor;/*基本のテキストのカラー設定*/
	background-color: #f2f2f2;/*基本背景カラー設定*/
	width: 100%;
	letter-spacing: 0.2em;
}//body_end

	#Header {
		position: fixed;
		width: 100%;
		top: 0;
		left:0;
		z-index: 999;
		margin: 0 auto;

		@media screen and (max-width: 1000px){
			height: 60px;
			background: rgba(0,0,0,0.5);
		}

		#Header_pc {
			overflow: hidden;
			z-index: 5;
			width: 1000px;
			background: rgba(0,0,0,0.5);
			margin: 0 auto;

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

			#Top {
				float: left;
				margin: 0 auto;
				overflow: hidden;
				max-height: 100%;

				h1 {
					float: left;
					padding: 5px;
					max-height: 100%;
					padding-left: 10px;

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

				#Contact {
					float: right;
					width: 700px;
					padding-top: 10px;
					display: none;

					ul {
						li {
							width: 100%;
							text-align: right;
						}

						.bottom {
							padding-top: 5px;
							font-size: 160%;

							.number {
								padding-right: 10px;
								padding-left: 5px;
								padding-top: 5px;
								font-weight: bold;
							}

							a {
								display: inline-block;
								background: @sub-color;
								padding: 3px 20px;
								color: #fff;
								.radius(@radius:5px);
							}

							a:hover {
								background: @sub-coloron;
							}
						}
					}
				}
			}

			#Header_nav {
				width: 100%;
				height: 50px;
				float: right;
				width: 700px;

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

				.menu-header_nav-container {
					width: 1000px;
					margin: 0 auto;

					ul {
						overflow: hidden;
						padding: 0 5px;

						li {
							float: left;
							width: 137px;
							text-align: center;
						    letter-spacing: 2px;
							padding-top: 8px;

							a {
								color: #fff;
								padding-top: 7px;
								display: block;
								.transition;
								font-size: 120%;
							}

							a:hover {
								opacity: 0.4;
							    filter: alpha(opacity=60);
							}
						}
					}
				}
			}
		}

		#Header_sm {
			float: left;
			height: 49px;
			z-index: 5;

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

			h1 {
				padding: 5px 5px 0;

				img {
					width: 80px;
				}
			}
		}

		.right-menu {
			float: right;
			z-index: 10;
			padding: 10px;

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

			img {
				width: 35px;
				height: 35px;
			}
		}
	}//Header_end

	#sidr-right {
		background: #123E60 !important;
		-webkit-box-shadow: none !important;
		        box-shadow: none !important;

		li {
			border-top: none !important;
			border-bottom: 1px solid #475F71;

			a {
				color: #FFF !important;
			}

			a:hover {
				-webkit-box-shadow: none;
				        box-shadow: none;
			}
		}
	}

	#Content {
		min-height: 200px;
		overflow: hidden;
		padding: 0;
		overflow: hidden;

		@media screen and (max-width: 640px){
			width: 100%;
			min-height: 500px;
		}
	}//Content_end

		#Main {
			width: 1000px;
			margin: 0 auto;
			overflow: hidden;

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

			@media screen and (min-width: 641px) and (max-width: 1000px){
				width: 640px;
				marign: 0 auto;
				float: none;
				padding-top: 20px;
			}
		}//Main_end

		#Main_page {
			min-width: 300px;
			padding: 10px 180px 0;
			position: relative;

			@media screen and (max-width: 640px){
				position: static;
			}

			#Center {
				overflow: hidden;
				width: 90%;
				margin: 0 auto;
			}
		}

		#Side {
			float: left;
			padding-top: 20px;
			width: 270px;
			margin-left: 20px;

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

			@media screen and (min-width: 641px) and (max-width: 1000px){
				width: 640px;
				margin: 40px auto 0;
				overflow: hidden;
				float: none;
			}

			#Left {
				width: 100%;

				@media screen and (min-width: 641px) and (max-width: 1000px){
					float: left;
					width: 50%;
					padding-right: 20px;
					.box-border-box;
				}

				>div {
					margin-bottom: 20px;
				}

				.left_banner {

					ul {
						overflow: hidden;

						li {
							@media screen and (max-width: 1000px){
								width: 50%;
								float: left;
								text-align: center;
								.box-border-box;
								padding: 5px;
							}

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

				#Category {

					a {
						width: 270px;
						display: block;
						padding: 15px 20px;
						.box-border-box;
						font-size: 15px;
						background-color: #fff;
						margin-bottom: 5px;
						.radius(@radius:5px);
						.main-border;
						color: @sub2-color;
						font-weight: bold;

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

					a:hover {
					    text-decoration: none;
					    background-color: @sub2-color;
					    .main-border;
					    color: #fff;
					}
				}

				#Widget_left {

					>li {
						margin-bottom: 20px;
					}

					.widget_search {

						text-align: center;

						input{
							font-size: 15px;
						}

						#s {
							width: 150px;
						}
					}

					.tagcloud{

						a {
							.main-border;
							.radius(@radius:5px);
							padding: 5px 5px 5px 20px;
							background: url(../img/tag_ico.png) no-repeat 6px 6px;
							margin-bottom: 5px;
							display: inline-block;
							background-color: #fff;
						}

						a:hover {
							text-decoration: none;
							background: @base-bgcolor url(../img/tag_ico.png) no-repeat 6px 6px;
						}
					}
				}
			}

			#Right {
				width: 270px;
				float: left;
				.box-border-box;

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

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

				#Favorite {
					z-index: 1;
					background: #FFF;
					padding: 15px;
					margin-bottom: 10px;

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

					.wpp-list>li {
						list-style: none;

						@media screen and (max-width: 1000px){
							margin-bottom: 10px;
							overflow: hidden;
							min-height: 75px;
							padding: 10px 0;
							border-top: 1px dotted @sub-color;
							width: 100%;
						}

						.wpp-thumbnail {
							margin-bottom: 5px;
							z-index: 1;

							@media screen and (max-width: 1000px){
								width: 100px;
								height: auto;
								min-height: 75px;
								position: absolute;

							}

						}

					}

					h3 {
						text-align: center;
						font-weight: normal;
						font-size: 19px;
					}

					.mini_subtxt {
						text-align: center;
						font-size: 13px;
						color: #888;
					}

					a {
						overflow: hidden;
						display: block;
						z-index: 1;

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

					.wpp-post-title {
						font-size: 12px;
						line-height: 1.3em;
						margin-bottom: 15px;
						border-bottom: 1px dotted @sub-color;
						padding-bottom: 3px;

						@media screen and (max-width: 1000px){
							border-bottom: none;
							padding: 25px 0 0 110px;
						}
					}

					.wpp-list {
						counter-reset: wpp-ranking;
						z-index: 1;

						li {
							position: relative;
						}
					}

					.wpp-list li:before {
						content: counter(wpp-ranking, decimal);
						counter-increment: wpp-ranking;
						text-align: center;
						background: url(../img/clown.png) no-repeat;
						width: 20px;
						height: 20px;
						color: #fff;
						display: block;
						padding-top: 5px;
						position: absolute;
						top: 0px;
						z-index: 2!important;

						@media screen and (max-width: 1000px){
							top: 0;
							left: 110px;
							margin-top: 10px;
						}
					}
				}

				ul {
					overflow: hidden;

					li {
						width: auto;

						@media screen and (max-width: 1000px){
							.box-border-box;
							padding: 5px;
						}

						img {
							width: 100%;
							height: auto;
						}
					}
				}
			}
		}//Side_end

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

footer {
	clear: both;
	margin: 0;
}//footer_end

#Footer_bg {
	width: 100%;
	background: #123e60;
	overflow: hidden;

	#Footer_bottom {
		width: 1000px;
		padding: 0;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		padding: 20px 0;

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

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

		.scroll {
			width: 300px;
			margin: 0 auto;
			padding: 10px 0;
		}
	}

	#Fb_box {
		width: 320px;
		float: left;

		@media screen and (max-width: 640px){
			width: 100%;
			text-align: center;
			float: none;
		}

		iframe {
			background-color: #fff;
		}
	}

	#Powered {
		width: 660px;
		float: right;

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

		@media screen and (max-width: 640px){
			width: 100%;
			float: none;
			margin-top: 10px;
			padding: 10px 20px;
			.box-border-box;
		}
	}

	#Copyright {
		text-align: center;
		clear: both;
		float: right;
		color: #fff;
		font-size: 90%;

		@media screen and (max-width: 1000px){
			float: none;
			width: 100%;
			text-align: center;
		}

		@media screen and (max-width: 640px){
			font-size: 70%;
			letter-spacing: 0;
		}
	}
}

/*=====================
        トップ
=====================*/

.smp_slide {

	@media screen and (max-width: 1000px){
    	display: inline;
    	margin-top: 20px;
	}

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

#Slider_bg {
	width: 100%;
	padding: 0;
	background: #fff;
	position: relative;

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

	#Topimage_txt {
		position: absolute;
	    top: 50%;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    width: 700px;
	    margin: 0 auto;
	    text-align: center;
	    color: #FFF;
	    letter-spacing: 2px;

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

		@media screen and (max-width: 640px){
			background: url(../img/topimage_sm.png) top center no-repeat;
			.bgsize-cover;
			width: auto;
			height: 500px;
			top: 0;
		}

		p {
			font-weight: bold;
			line-height: 60px;
	   		display: none;
	   		font-weight: normal;
	   		font-size: 150%;
	   		text-shadow: 0 0 5px #444;

			@media screen and (max-width: 640px){
				padding-top: 160px;
				font-size: 100%;
			}

			strong {
				font-size: 300%;
				.font-en;

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

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

		li {
			width: 50%;
			float: left;
			padding: 20px 10px;
			.box-border-box;

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

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

			a {
				display: block;
				color: #fff;
				.radius(@radius:5px);
				font-size: 180%;
				text-align: center;
				padding: 20px 0;

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

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

			.ippan {
				background: @orange;
			}

			.hojin {
				background: @lightblue;
			}
		}
	}
}

/* スライダー */
.wideslider {
	width: 100%;
	height: auto;
	text-align: left;
	position: relative;
	overflow: hidden;
	margin: 0 auto;

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

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

	ul, ul li {
		float: left;
		display: inline;
		overflow: hidden;
	}

	ul {
		display: inline-block;
		overflow: hidden;
		width:1000px;

		&:after {
			content: ".";
			height: 0;
			clear: both;
			display: block;
			visibility: hidden;
		}
	}

	img {
		width:1000px;
		height: 380px;
	}
}

.wideslider_base {
	top: 0;
	position: absolute;
}
.wideslider_wrap {
	top: 0;
	position: absolute;
	overflow: hidden;

}

.slider-wrapper {
	padding: 0;
}

.slider_prev,
.slider_next {
	top: 0;
	overflow: hidden;
	position: absolute;
	z-index: 100;
	cursor: pointer;
}
.slider_prev {background: #fff /*url(../images/slider/prev.jpg) no-repeat right center*/;}
.slider_next {background: #fff /*url(../images/slider/next.jpg) no-repeat left center*/;}

.pagination {
	bottom: 10px;
	left: 0;
	width: 100%;
	height: 15px;
	text-align: center;
	position: absolute;
	z-index: 200;

	a {
		margin: 0 5px;
		width: 15px;
		height: 15px;
		display: inline-block;
		overflow: hidden;
		background: #333;
	}

	a.active {
		filter:alpha(opacity=100)!important;
		-moz-opacity: 1!important;
		opacity: 1!important;
	}
}

/*スライドここまで*/


#Sp_topimage {
	display: none;

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

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

/*スライドここまで*/

.top_main_content {
	width: 1000px;
	margin: 0 auto;
	padding: 60px 20px;
	.box-border-box;
	overflow: hidden;

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

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

	>h3 {
		font-size: 200%;
		text-align: center;
		margin-bottom: 30px;

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

		&:after {
			content: "";
			height: 1px;
			display: block;
			width: 100%;
		}
	}

	>h4 {
		font-size: 200%;
		text-align: center;
		margin-bottom: 30px;

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

		&:after {
			content: "";
			height: 1px;
			display: block;
			width: 100%;
		}
	}

	>h5 {
		background: @sub2-color;
		padding: 6px;
		border-radius: 4px;
		margin-bottom: 10px;
		color: #fff;
		border: none;
		font-size: 120%;
	}

	.left {
		float: left;
		.box-border-box;
	}

	.right {
		float: right;
		.box-border-box;
	}
}

#Top_vision {
	background: url(../img/vision_bg.png) repeat;
	.bgsize-cover;

	#Top_vision_bg {
		background: url(../img/group.png) center center no-repeat;
		.bgsize-cover;
		width: 100%;
	}

	.top_main_content {
		width: 1000px;
		margin: 0 auto;

		@media screen and (max-width: 1000px){
			-webkit-background-size: contain;
			     -o-background-size: contain;
			        background-size: contain;
		    height: auto;
		    width: 640px;
		}

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

		.vision_box {
			float: left;
			width: 50%;
			color: @deepblue;

			@media screen and (max-width: 1000px){
				float: none;
				width: auto;
				padding: 10px;
			}

			h2 {
				font-size: 350%;
				.font-en;

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

			h3 {
				font-size: 190%;
				margin-bottom: 40px;

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

			p {
				font-size: 130%;

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

#Top_menu {
	ul {
		overflow: hidden;

		li {
			float: left;
			width: 50%;
			background: #000;
			background-image: url(../img/Top_Concept.jpg);
			background-position:top center;
			background-repeat: no-repeat;
			.bgsize-cover;

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

			a {
				padding: 100px;
				text-align: center;
				color: #fff;
				display: block;
				font-size: 350%;
				font-weight: bold;

				&:hover {
					-webkit-animation-duration: 0.7s;
					animation-duration: 0.7s;
					-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
				    -webkit-animation-name: pulse;
			  		animation-name: pulse;
				}

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

				span {
					display: block;
					font-size: 50%;
					font-weight: normal;
				}

				strong {
					.font-en;
				}
			}
		}

		li:nth-child(2) {
			background-image: url(../img/Top_Works.jpg);
		}

		li:nth-child(3) {
			background-image: url(../img/top_menu02.png);
		}

		li:nth-child(4) {
			background-image: url(../img/Top_Company.jpg);
		}
	}
}

#Top_news {
	background: #000 url(../img/news_bg.png) top center no-repeat;
	.bgsize-cover;

	.top_main_content {
		padding: 60px;

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

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

	h3 {
		color: @deepblue;
		font-size: 350%;
		margin-bottom: 10px;
		text-align: left;
		.font-en;

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

	ul {
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;

		li {
		    width: 30%;
		    padding: 20px 44px 20px 0;

			@media screen and (max-width: 1000px){
				width: auto;
				float: none;
				overflow: hidden;
				margin-bottom: 25px;
				padding: 0;
			}

			.thumb {

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

				img {
					max-width: 100%;
					display: block;
					margin: 0 auto;
					height: auto;

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

			.post_txt {

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

		li:last-child {
			padding-right: 0;
		}
	}

	a {
		display: inline-block;
		font-size: 120%;
		color: #000;

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

	p {
		display: inline-block;
		margin-top: 10px;
		color: #000;

		@media screen and (min-width: 641px) and (max-width: 1000px){
			display: block;
			margin-top: 0;
		}

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

	.morelink {
		text-align: center;

		a {
			display: inline-block;
	    	padding: 0.5em 2em;
	    	border: 2px solid @deepblue;
	    	color: @deepblue;
	    	font-size: 120%;
	    	margin: 10px auto;
	    	font-weight: bold;
	    	.transition;
	    	background: none;

	    	&:hover {
	    		background: @deepblue;
	    		color:  #fff;
	    	}
    	}
	}
}

#Top_bannerlist {
	ul {
		overflow: hidden;
		text-align: center;

		li {
			display: inline-block;
			width: 33.333%;
			padding: 0 20px;
			.box-border-box;

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

			a {
				border: 3px @deepblue solid;
				display: block;

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

#Top_stafflist {

	ul {
		overflow: hidden;

		li {
			width: 25%;
			float: left;
			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%;
			}

			.top_staffset {
				position: relative;
				width: 100%;
				height: 330px;
				cursor: default;
				overflow: hidden;
				text-align: center;

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

				.staff-mask, .staff_info {
			    	width: 100%;
				    height: 330px;
				    position: absolute;
				    overflow: hidden;
				    top: 0;
				    left: 0;
			    }

				.staff-mask {
					background-color: rgba(115,146,184, 0.8);
					width: 200%;
					height: 200%;
				    padding: 60px;
					opacity: 0;
					transform: translate(265px, 265px) rotate(45deg);
					transition: all 0.2s ease-in-out;

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

				.staff_photo {
					display: block;
					width: 100%;
					height: 100%;
					position: relative;
					background-position: top center;
					.bgsize-cover;
					transition: all 0.2s ease-in;

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

				.staff_info {
					@media screen and (max-width: 1000px){
						position: static;
						background: @sub-color;
						height: auto;
					}
				}

				h3 {
			    	text-transform: uppercase;
				    color: #fff;
				    text-align: center;
				    position: relative;
				    font-size: 120%;
				    padding: 10px;
				    background: rgba(0, 0, 0, 0.8);
				    background: transparent;
				    transform: translate(200px, -200px);
					transition: all 0.2s ease-in-out;
					margin: 20px 0;

					@media screen and (max-width: 1000px){
						transform: inherit;
						transition: inherit;
						margin: 0;
					}

					strong {
						font-size: 160%;
					}
			    }

			    p {
				    font-size: 100%;
				    position: relative;
				    color: #fff;
				    padding: 10px 20px 20px;
				    text-align: center;
				    transform: translate(-200px, 300px);
					transition: all 0.2s ease-in-out;
					text-align: left;

					@media screen and (max-width: 1000px){
						transform: inherit;
						transition: inherit;
						padding: 10px;
					}
			    }

			    a.staff_more {
			    	display: inline-block;
				    text-decoration: none;
				    padding: 7px 14px;
				    background: #444;
				    color: #fff;
				    text-transform: uppercase;
				    transform: translate(0px, 300px);
					transition: all 0.2s 0.1s ease-in-out;

					@media screen and (max-width: 1000px){
						transform: inherit;
						transition: inherit;
						margin: 10px 0;
					}

					&:hover {
						background: #9E9E9E;
					}
			    }

				/*hover-animation*/
			    &:hover {

			    	@media screen and (min-width: 1001px){

				    	.staff-mask {
				    		opacity:1;
							transform: translate(-150px, -180px) rotate(45deg);
				    	}

				    	h3 {
				    		transform: translate(0px,50px);
							transition-delay: 0.2s;
				    	}

				    	p {
				    		transform: translate(0px,50px);
							transition-delay: 0.3s;
				    	}

				    	a.staff_more {
				    		transform: translate(0px,70px);
							transition-delay: 0.4s;
				    	}
			    	}
			    }
			}
		}
	}

	.full_c_button {
		padding: 20px 0;

		a {
			border: @sub-color 3px solid;
			color: @sub-color;

			&:hover {
				border: @sub-color 3px solid;
				color: #fff;
				background: @sub-color;
			}
		}
	}
}

#Top_future {
	background-image: url(../img/top_future_bg.jpg);
	background-repeat: no-repeat;
    background-attachment: fixed;
    .bgsize-cover;

    @media screen and (max-width: 640px){
		background-attachment: scroll;
    }

    .full_c_title {

    	p {
    		color: @lightblue;
    		border-top: @lightblue 3px solid;
    	}
    }

	.future_text {
		color: #fff;
		font-size: 120%;
		padding: 0 100px;
		display: block;
		margin-bottom: 30px;

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

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

    .full_c_button {
    	a {
			border: #fff 3px solid;
			color: #fff;

			&:hover {
				border: #fff 3px solid;
				color: @sub-color;
				background: #fff;
			}
		}
    }
}

#Top_blog {
	background: @whiteblue;

	#Top_full_postbox {
		overflow: hidden;

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

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

		/*投稿記事ボックス*/
		>li {
			width: 290px;
			min-height: 300px;
			padding: 10px;
			margin: 15px;
			background: #fff;
			float: left;
			.box-border-box;

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

			@media screen and (min-width: 641px) and (max-width: 1000px){
				margin: 9px;
				width: 192px;
			}

			.postbox_img {
				width: 100%;
				height: 210px;
				position: relative;
				overflow: hidden;
				background: url(../img/potbox_img_bg.jpg) top center;
				.bgsize-cover;

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

				a {
					display: block;

					img {
						width: 100%;
						height: 210px;

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

					h3 {
						.bg-alpha-bk;
						position: absolute;
						bottom: 0;
						left: 0;
						padding: 3px;
						font-size: 15px;
						font-weight: bold;
						color: #fff;
						width:274px;
						background-color: #555\9;

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

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

			>p {
				line-height: 1.5em;
				padding: 8px 0 5px;
			}

			dl {

				overflow: hidden;

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

					a {
						background: @lightblue;
						color: #fff;
						.radius(@radius:5px);
						float: left;
						padding: 1px 5px;
						margin-right: 5px;
						margin-bottom: 5px;
					}

					a:hover {
						background: @lightblue - #444;
						color: #fff;
					}
				}

				dd {
					float: right;
					font-weight: bold;
					color: @sub-color;
					width: 100%;
					padding-top: 5px;

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

	.full_c_button {
		padding: 20px 0;

		a {
			border: @sub-color 3px solid;
			color: @sub-color;

			&:hover {
				border: @sub-color 3px solid;
				color: #fff;
				background: @sub-color;
			}
		}
	}
}

#Top_uservoice {
	ul {
		overflow: hidden;

		li {
			float: left;
			width: 50%;

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

			dl {
				overflow: hidden;

				dt {
					float: left;
					width: 50%;
					height: 250px;
					.bgsize-cover;
					background-position: center center;

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

				dd {
					float: left;
					width: 50%;
					height: 250px;
					background: @sub-color;
					padding: 15px;
					.box-border-box;
					position: relative;

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

					p {
						color: #fff;
						font-size: 110%;

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

					a {
						display: inline-block;
						padding: 3px 10px;
						background: #FFF;
						color: @sub-color;
						position: absolute;
						bottom: 15px;
						right: 15px;
						.radius(@radius:5px);
						font-weight: bold;

						&:hover {
							background: @lightblue;
						}
					}
				}
			}

			&:nth-child(2) {
				dt {
					@media screen and (min-width: 641px) and (max-width: 1000px){
						float: right;
					}
				}

				dd {
					@media screen and (min-width: 641px) and (max-width: 1000px){
						float: left;
					}
				}
			}

			&:nth-child(3) {
				dt {
					float: right;

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

				dd {
					float: left;

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

			&:nth-child(4) {

				dt {
					float: right;
				}

				dd {
					float: left;
				}
			}
		}
	}

	.full_c_button {
		padding: 20px 0;

		a {
			border: @sub-color 3px solid;
			color: @sub-color;

			&:hover {
				border: @sub-color 3px solid;
				color: #fff;
				background: @sub-color;
			}
		}
	}
}

#Top_banner {
	background: @sub-color;
}

#Top_voice {
	margin: 20px;
	padding: 20px;
	background: #FFF;

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

	dl {
		overflow: hidden;

		dt {
			float: left;
			width: 35%;

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

			a {
				display: block;

				div {
					width: 100%;
					.bgsize-cover;
					background-position: center center;
					height: 280px;

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

		dd {
			float: right;
			width: 65%;
			padding-left: 20px;
			.box-border-box;

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

			h3 {
				font-size: 150%;
				border-bottom: 2px double;
				margin-bottom: 20px;
			}

			ul {
				overflow: hidden;
				margin-bottom: 20px;

				li {
					float: left;
					background: @sub-color;
					padding: 2px 5px;
					margin-right: 10px;
					color: #fff;

					&:last-child {
						margin-right: 0;
						background: none;
						color: #000;
						padding: 0 5px;
						font-size: 130%;
					}
				}
			}

		}
	}

	.reply {
		background: #eee;
		margin: 20px 0;
		.radius (@radius: 5px);
		padding: 15px;
		clear: both;

		h4 {
			margin-bottom: 10px;
		}
	}

	.more {
		text-align: right;
	}
}

#Top_postlist {
	overflow: hidden;
	float: right;
	width: 685px;
	padding-left: 5px;

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

	#Top_postbox {
		overflow: hidden;
		width: 685px;

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

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

		/*投稿記事ボックス*/
		>li {
			width: 280px;
			min-height: 300px;
			.main-border;
			padding: 10px;
			margin: 20px;
			background: #fff;
			float: left;

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

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

			.postbox_img {
				width: 280px;
				height: 210px;
				position: relative;
				overflow: hidden;
				background: url(../img/potbox_img_bg.jpg) top center;
				.bgsize-cover;


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

				a {

					img {
						width: 100%;
						height: 210px;

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

					h3 {
						.bg-alpha-bk;
						position: absolute;
						bottom: 0;
						left: 0;
						padding: 3px;
						font-size: 15px;
						font-weight: bold;
						color: #fff;
						width:274px;
						background-color: #555\9;

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

			>p {
				line-height: 1.5em;
				padding: 8px 0 5px;
			}

			dl {

				overflow: hidden;

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

					a {
						background: @sub2-color;
						color: #fff;
						.radius(@radius:5px);
						float: left;
						padding: 1px 5px;
						margin-right: 5px;
						margin-bottom: 5px;
					}

					a:hover {
						background: #999;
						color: #fff;
					}
				}

				dd {
					float: right;
					font-weight: bold;
					color: @sub-color;
					width: 100%;
					padding-top: 5px;

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

	#Top_camp_bn {
		width: 100%;
		.box-border-box;
		overflow: hidden;
		padding: 20px 20px 0;

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

		img {
			max-width: 100%;
		}

	}

	#Top_ser_other {
		width: 100%;
		.box-border-box;
		padding: 0 5px;

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

		li {
			max-width: 100%;
			.box-border-box;
			text-align: center;
			padding:10px;
			background: #fff;
			border: 2px #009C9F solid;
			text-align: center;
			.radius(@radius:5px);
			margin: 10px;

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

			h3 {
				color: #e06f24;
				font-size: 120%;
				margin: 10px 0;

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

			img {
				margin-top: 10px;
				width: auto;
				height: 90px;

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

		li:hover {
			background: #d7f5e2;
		}
	}
}

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

#Single_post {
	width: 600px;
	margin: 20px auto;
	padding: 20px;

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

	@media screen and (min-width: 641px) and (max-width: 1000px){
		width: 640px;
		padding: 20px;
		.box-border-box;
		margin: 0 auto;
		float: none;
	}

	.post {

		.tag_list {
			overflow: hidden;

			a {
				color: @sub-color;
				margin-right: 10px;
				font-weight: bold;
			}

		}

		>h3 {
			font-size: 30px;
			margin-bottom: 10px;
			color: @deepblue;

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

			a {
				color: @deepblue;
			}
		}

		.postinfo {
			margin-bottom: 40px;
			border-bottom: 10px solid #fff;
			line-height: 2.5em;
			color: @sub2-color;

			@media screen and (max-width: 640px){
				overflow: hidden;
				margin-bottom: 20px;
			}

			.date {
				margin-right: 25px;

				@media screen and (max-width: 640px){
					width: 100%;
					display: block;
					font-size: 15px;
					margin-right: 0;
					line-height: 1.2em;
				}
			}

			.catg {
				@media screen and (max-width: 640px){
					width: 100%;
					display: block;
					font-size: 13px;
				}
			}
		}

		.post_box {

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

	.pagelink {
		margin-top: 40px;
		overflow: hidden;
		border-top: 10px solid #fff;

		.oldpage {
			width: 50%;
			display: block;
			float: left;
			.box-border-box;
			padding: 10px 20px 10px 10px;
		}

		.newpage {
			width: 50%;
			display: block;
			float: right;
			.box-border-box;
			padding: 10px 10px 10px 20px;
		}
	}
}

/*=====================
      スタッフページ
=====================*/

/*スタッフ個別ページ*/

.staff_post {

	table{
		border: 1px solid #ccc;
	}

    .post_box {

    	#Name {
    		h4 {
    			background: #8BAC07;
				padding: 6px;
				border-radius: 4px;
				margin-bottom: 10px;
				color: #fff;
				border: none;
				font-size: 120%;
        	}

	        h3 {
	          	color: #000;
	          	border: none;
	          	margin: 0;
	          	font-size: 150%;
	        }
      	}

      		.column-1{
      			background: #D1DBA8;
      		}

      	#Case_photos {
        	li {
        		.imgs {
        			img {
              			max-width: 100%;
            		}
          		}
        	}
      	}

      	#Comment {
        	padding: 30px 0;
      	}
    }
}//staff_post


#Staff-slider{
	margin-bottom: 30px;
}


.staff_listbox {
	overflow: hidden;

	li {
	    float: left;
	    width: 230px;
	    padding: 10px;
    	text-align: center;

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

	    @media screen and (max-width: 640px){
	    	width: 50%;
	    	.box-border-box;
	    }

    	a {
    		img {
        		max-width: 100%;
      		}
    	}

    	p {
      		font-size: 110%;

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

    	h3 {
      		font-size: 140%;
    	}

    	.icon {
      		display: inline;

    		img {
        		width: 40px;
        		height: 40px;
      		}
    	}
  	}
}//.staff_listbox_end

/*スタッフ一覧ページ*/

#Pageid_stafflist {

	#Content {

		.post_staff_sm {
			width: 645px;
			.box-border-box;
			height: auto;
			position: relative;
			min-height: 210px;

	    	@media screen and (max-width: 1000px){
	        	width: 100%;
	        	.box-border-box;
	        	margin: 0 0 30px;
	    	}

	    	.postbox_img {
	      		float: left;

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

	      		a {
	        		img {
	          			height: auto;
	        		}
	      		}
	    	}

	    	.staff_info {
	    		float: right;
	    		width: 330px;

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

			    h4 {
			        font-size: 120%;
			    }

			    h3 {
			        font-size: 150%;
			        margin-bottom: 20px;
			    }

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

	    .staff_more {
			width: 140px;
			height: 30px;
			right: 10px;
			bottom: 10px;
			position: absolute;
			display: block;
			background: @sub2-color;
			color: #fff;
			text-align: center;
			.radius(@radius:5px);
			font-size: 120%;
			padding-top: 10px;
	    }

	    .staff_more:hover {
	        filter: alpha(opacity=60);
	    	-moz-opacity:0.60;
	    	opacity:0.60;
	    	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);  /* For IE 5-7 */
	    	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* For IE 8 */
	    }
	}//#Content_end
}//#Pageid_stafflist

}
/*=====================
      　中ページ
=====================*/

#Page_main {
	width: 100%;
	margin: 125px auto 0;
	text-align: center;
	padding-bottom: 60px;
	background: @lightblue;

	@media screen and  (min-width: 640px) and (max-width: 1000px){
		width: 100%;
		margin: 0;
		margin-top: 60px;
	}

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

	p {
		font-size: 35px;
		letter-spacing: .2em;
		padding-top: 40px;
		text-shadow: -1px 1px 0 rgba(0,0,0,0.3);
		color: #fff;
		font-weight: bold;

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

		a {
			color: #fff;
		}
	}
}//#Page_main_end

#Page_content {
	width: 600px;
	margin: 20px auto;
	padding: 20px;

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

	@media screen and (min-width: 641px) and (max-width: 1000px){
		width: 640px;
		padding: 20px;
		.box-border-box;
		margin: 0 auto;
		float: none;
	}

	/*お問い合わせ*/

	#Contactform {
		font-size: 16px;

		dl {
			overflow: hidden;
			clear: both;
			border-bottom: 1px dotted @sub-color;
			padding: 20px 0;

			dt {
				float: left;
				width: 220px;
				text-align: center;

				@media screen and (max-width: 640px){
					float: none;
					text-align: left;
					width: 100%;
					padding-bottom: 10px;
				}

				.hissu {
					margin-left: 15px;
					padding: 5px;
					background: @sub-color;
					font-size: 14px;
					font-weight: bold;
					color: @light-txtcolor;
				}
			}//dt_end

			dd {
				float: left;
				font-size: 14px;
				width: 350px;

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

				input {
					font-size: 18px;
					padding: 5px;
					width: 350px;

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

				span {
					width: 100%;
					.box-border-box;
				}

				textarea {
					font-size: 18px;
					padding: 5px;
					width: 100%;
					.box-border-box;
				}
			}//dd_end
		}

		p {
			text-align: center;
			margin-top: 20px;

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

			input {
				display: inline-block;
				background: @sub-color;
				padding: 5px 50px;
				color: #fff;
				.radius(@radius:5px);
				border: none;
				font-size: 150%;
				cursor: pointer;

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

			input:hover {
				background: @sub-coloron;
			}
		}
	}
}//Page_content_end

/*=====================
      　経営理念
=====================*/

#Concept_concept {
	.syomei {
		text-align: right;
		padding-top: 2em;
		font-size: 150%;
	}
}

#Concept_greeting {
	background-image: url(../img/fulltitle_bg.png);
	background-repeat: no-repeat;
    background-position: center;
    .bgsize-cover;
    position: relative;

    p.m-pagetitle {
    	.font-en;
    	opacity:0;
    	font-size: 700%;
    	text-align: center;
    	color: #fff;
    	text-shadow: 0 0 4px #444;
    	padding: 70px 0 5px;
    	.transition(@transition: 1s);
    	-moz-animation:FADEIN .6s ease-in-out .4s forwards;
    	-webkit-animation:FADEIN .6s ease-in-out .4s forwards;
    	-o-animation:FADEIN .6s ease-in-out .4s forwards;
    	animation:FADEIN .6s ease-in-out .4s forwards;

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

    	@media screen and (max-width: 640px){
			font-size: 400%;
			padding: 40px 0 5px;
    	}
    }
}

@keyframes FADEIN {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@-webkit-keyframes FADEIN {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}



.movelogo {
	text-align: center;
	padding: 30px 0 0;
	.transition(@transition: 0.3s);

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

	.move-path {
		stroke: #fff;
    	fill: rgba(255,255,255,1);
    	stroke-width: 1;
    	stroke-dasharray: 3000;
		stroke-dashoffset: 3000;
		-moz-animation:DASH 2s ease-in-out 1s forwards;
    	-webkit-animation:DASH 2s ease-in-out 1s forwards;
    	-o-animation:DASH 2s ease-in-out 1s forwards;
    	animation:DASH 2s ease-in-out 1s forwards;
		-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;
	}
}

@keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:rgba(255,255,255,0);}
    80% {stroke-dashoffset:2000;fill:rgba(255,255,255,0);stroke: #fff;}
    100%{stroke-dashoffset:0;fill:rgba(255,255,255,1);stroke: none;}
}

@-moz-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:rgba(255,255,255,0);}
    80% {stroke-dashoffset:2000;fill:none(255,255,255,0);stroke: #fff;}
    100%{stroke-dashoffset:0;fill:rgba(255,255,255,1);stroke: none;}
}

@-webkit-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:rgba(255,255,255,0);}
    80% {stroke-dashoffset:2000;fill:none(255,255,255,0);stroke: #fff;}
    100%{stroke-dashoffset:0;fill:rgba(255,255,255,1);stroke: none;}
}

@-o-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:rgba(255,255,255,0);}
    80% {stroke-dashoffset:2000;fill:none(255,255,255,0);stroke: #fff;}
    100%{stroke-dashoffset:0;fill:rgba(255,255,255,1);stroke: none;}
}

@-ms-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:rgba(255,255,255,0);}
    80% {stroke-dashoffset:2000;fill:none(255,255,255,0);}
    100%{stroke-dashoffset:0;fill:rgba(255,255,255,1);}
}

.fullmain_text {
	font-size: 120%;
	margin-top: 30px;
}

#Concept_four {
	background: #FFF;

	ul {
		overflow: hidden;
		width: 100%;
		.box-border-box;
		margin-top: 30px;

		li {
			float: left;
			text-align: center;
			width: 50%;
			padding: 15px;
			.box-border-box;

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

			div {
				padding: 70px 0;
				.bgsize-cover;
				border: 1px solid @lightblue;
				background-position: center;

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

			.concept_four_01 {
				background-image: url(../img/concept_four_01.jpg);
			}

			.concept_four_02 {
				background-image: url(../img/concept_four_02.jpg);
			}

			.concept_four_03 {
				background-image: url(../img/concept_four_03.jpg);
			}

			.concept_four_04 {
				background-image: url(../img/concept_four_04.jpg);
			}

			h5 {
				font-size: 600%;
				.font-en;
				color: @deepblue;

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

			p {
				font-size: 140%;

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


/*=====================
      　経営理念(開発)
=====================*/

.concept_content{
	text-align: center;
	.top_main_content{
		.title{
			text-align: center;
		}
		h4{
			color:#000;
			font-size:310%;
			line-height: 1.2em;
			font-weight: normal;
			position: relative;
			display: inline-block;
			.font-en;
			@media screen and (max-width: 640px){
				font-size:250%;
			}
			&:after{
				content:"";
				position: absolute;
				left:50%;
				bottom:-25px;
				display: inline-block;
				width:100px;
				height:1px;
				background-color: black;
				-moz-transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
				transform: translateX(-50%);/*位置調整*/
			}
		}
		p{
			@media screen and (max-width: 640px){
				font-size:95%;
			}
		}
		h2{
			font-size:180%;
			font-weight: normal;
		}
	}
}
#Concept_content_vision{
	.top_main_content{
		padding-bottom: 0;
		p{
			width:85%;
			margin:50px auto 0;
			@media screen and (max-width: 640px){
				text-align: left;
			}
		}
	}
}
#Concept_content_greeting{
	.concept_disp{
		margin-top:30px;
		.disp-flex;
		@media screen and (max-width: 640px){
			display: inline-block;
			position: relative;
		}
		.president_img{
			width:26%;
			margin-right:4%;
			height:250px;
			background-image: url("../img/president.jpg");
			background-position: center;
			background-size: cover;
			@media screen and (max-width: 640px){
				position: absolute;
				bottom: 15px;
				left:15px;
				height:120px;
			}
		}
		.greeting_text{
			width:70%;
			text-align: left;
			padding:30px;
			background: #fff;
			@media screen and (max-width: 640px){
				width:100%;
				padding:0;
			}
			.title{
				text-align: left;
				@media screen and (max-width: 640px){
					padding:15px 15px 0;
				}
			}
			p{
				@media screen and (max-width: 640px){
					padding:0 15px;
				}
			}
			#signature{
				text-align: right;
				font-size:160%;
				margin-top:10px;
				@media screen and (max-width: 640px){
					padding:100px 15px 15px;
					font-size:150%;
				}
			}
		}
	}
}

#Concept_content_gallery{
	width:100%;
	height:300px;
	.disp-flex;
	@media screen and (max-width: 640px){
		height:120px;
	}
	.concept_gallery_img{
		background-position: center;
		background-size: cover;
	}
	#concept_gallery_img1{
		background-image: url("../img/concept_gallery_img1.jpg");
		width: 15.5%;
		margin:0 1% ;
	}
	#concept_gallery_img2{
		background-image: url("../img/concept_gallery_img2.jpg");
		width: 32%;
		margin-right:1%;
	}
	#concept_gallery_img3{
		background-image: url("../img/concept_gallery_img3.jpg");
		width: 15.5%;
		margin-right:1%;
	}
	#concept_gallery_img4{
		background-image: url("../img/concept_gallery_img4.jpeg");
		width: 32%;
		margin-right:1%;

	}
}

#Concept_content_philosophy{
	width:80%;
	margin:0 auto 30px;
	@media screen and (max-width: 640px){
		width:95%;
	}
	.philosophy_content{
		width:100%;
		margin-top:50px;
		.philosophy_content_text{
			background: #E6E6E6;
			padding:30px;
			position: absolute;
			top:20px;
			@media screen and (max-width: 640px){
				padding:15px;
				top:auto;
				bottom: 15px;
			}
			h2{
				font-size: 130%;
				width:10em;
				display: flex;
				margin:0 auto;
				align-items: center;
				@media screen and (max-width: 640px){
					font-size: 120%;
				}
				&:before, &:after{
					border-top:1px solid #000;
					content:"";
					display: inline;
					flex-grow:1;
				}
				&:before{
					margin-right: 0.5em;
				}
				&:after{
					margin-left: 0.5em;
				}
			}
			h3{
				font-size: 160%;
				font-weight: normal;
				line-height: 3em;
				@media screen and (max-width: 640px){
					font-size:120%;
					line-height: 2em;
				}
			}
		}
		.philosophy_bg{
			width:80%;
			background-position: center;
			background-size: cover;
			height:320px;
			@media screen and (max-width: 640px){
				height:230px;
			}
		}
	}
	#philosophy_content1{
		position: relative;
		#philosophy_content_text1{
			position: absolute;
			left:5%;
			@media screen and (max-width: 640px){
				left:auto;
				right:0;
			}
		}
		#philosophy_bg1{
			margin-left:20%;
			background-image: url("../img/pholosophy_img1.jpeg");
			@media screen and (max-width: 640px){
				background-position: top left;
				margin:0 20% 0 0;
			}
		}
	}
	#philosophy_content2{
		position: relative;
		#philosophy_content_text2{
			position: absolute;
			right:5%;
			@media screen and (max-width: 640px){
				position: absolute;
				right:auto;
				left:0;
			}
		}
		#philosophy_bg2{
			margin-right:20%;
			background-image: url("../img/pholosophy_img2.jpeg");
			@media screen and (max-width: 640px){
				margin:0 0 0 20%;
			}
		}
	}
}

#Concept_content_conduct{
	margin-top: 30px;
	@media screen and (max-width: 640px){
		margin:0;
	}
	.top_main_content{
		h3{
			font-size: 270%;
		}
		p{
			width:85%;
			margin:20px auto 0;
		}
		h4{
			margin-top:20px;
			&:after{
				display: none;
				background: #fff;
			}
			@media screen and (max-width: 640px){
				font-size:170%;
			}
		}
		.conduct-img{
			background-image: url("../img/conduct_img.jpeg");
			background-position: center top;
			width: 100%;
			height:450px;
			margin-top:30px;
			@media screen and (max-width: 640px){
				height :250px;
				background-size: cover;
			}
		}
	}
}



/*=====================
      　事業案内
=====================*/

/*新*/

#Service_g_b {
	ul {
		display: table;
		width: 100%;

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

		li {
			display: table-cell;
			width: 50%;
			background-repeat: no-repeat;
		    background-position: center;
		    .bgsize-cover;

		    @media screen and (max-width: 640px){
				width: 100%;
				display: block;
				margin-bottom: 10px;
		    }

			div {
				padding: 200px 0;
				text-align: center;
				color: #fff;

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

				p  {
					font-size: 400%;
					.font-en;

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

				a {
					display: inline-block;
					padding: 0.5em 2em;
					border: 2px solid #fff;
					color: #fff;
					font-size: 120%;

					&:hover {
						background: rgba(255,255,255,0.3);
					}
				}
			}
		}

		.sf_general {
			background-image: url(../img/electrical-construction-bg.jpg);
			p{
				line-height: 1em;
				padding-bottom: 20px;
			}
		}

		.sf_business {
			background-image: url(../img/exterior-renewal-bg.jpg);

			p{
				line-height: 1em;
				padding-bottom: 20px;
			}
		}
	}
}

#ForBusiness_lineup {
	background-image: url(../img/forb_lineup_bg.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
	.bgsize-cover;

	ul {
		overflow: hidden;
		padding: 30px 0;

		li {
			float: left;
			width: 20%;
			padding: 5px 20px;
			.box-border-box;

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

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

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

#ForBusiness_management {
	background: #FFF;

	ul {
		overflow: hidden;
		padding: 30px 0;

		li {
			float: left;
			width: 25%;
			font-size: 150%;
			text-align: center;
			padding: 10px;
			.box-border-box;

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

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

			p {
				background: @whiteblue;
				padding: 0.5em 0;
				color: @deepblue;
				border-bottom: 2px solid @deepblue;
				border-top: 2px solid @deepblue;
			}
		}
	}
}

#ForGeneral_nss {
	ul {
		overflow: hidden;
		margin: 30px 0;

		li {
			float: left;
			width: 50%;
			padding: 5px;
			.box-border-box;
			color: #fff;

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

			&:nth-child(4) {
				width: 100%;
			}
			&:nth-child(-n + 3) {
				width: 33.333%;
				@media screen and (max-width: 640px){
					width: 100%;
				}
			}
			>div {
				background-repeat: no-repeat;
				background-position: bottom center;
				.bgsize-cover;

				.nss-content {
					text-align: center;
					padding: 70px 20px;

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

					>p {
						.font-en;
						font-size: 400%;
						&:nth-child(-n+3){
							font-size: 250%;
						}
					}

					>h3 {
						font-size: 180%;
					}
				}

				.black-text {
					background: rgba(0,0,0,0.5);
					padding: 15px;
					&:nth-of-type(-n+3){
						height:95px;
						@media screen and (max-width: 640px){
							height:auto;
						}
					}
				}
			}
		}

		.nss-solar {
			background-image: url(../img/e.jpg);
			@media screen and (max-width: 640px){
				background-image: url(../img/e_2.jpg);
			}

			.solarlist {
				width: 70%;
				margin: 50px auto;

				@media screen and (max-width: 1000px){
					width: 100%;
					margin: 20px auto;
				}

				li {
					width: 33%;
					font-size: 170%;
					float: left;

					@media screen and (max-width: 640px){
						font-size: 100%;
						letter-spacing: 0;
					}

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

			h4 {
				font-size: 180%;
			}
		}
		.nss-electrical-construction {
			background-image: url(../img/q.jpg);
		}
		.nss-solar-power{
			background-image: url(../img/w.jpg);
		}
		.nss-air-conditioning{
			background-image: url(../img/nss-solar_bg.jpg);
		}
		.nss-led {
			background-image: url(../img/nss-led_bg.jpg);
		}

		.nss-pps {
			background-image: url(../img/nss-pps_bg.jpg);
		}
	}
}

#ForGeneral_nm {
	background: #FFF;

	#NextMaintenance  {
		margin: 50px 0;
	}

	.tab {
		overflow:hidden;

		li {
			background:#ccc;
			padding: 20px 0;
			float: left;
			text-align: center;
			cursor: pointer;
			width: 20%;
			border-right: 1px solid #fff;
			border-bottom: 1px solid @deepblue;
			.box-border-box;

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

			&:last-child {
				border-right: none;
			}

			p {
				font-weight: bold;
				color: @deepblue;

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

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

			i {
				font-size: 250%;
				color: @deepblue;
				margin-bottom: 0.2em;

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

		li.select {
			background: @whiteblue;
			border-right: 1px solid @deepblue;
			border-top: 1px solid @deepblue;
			border-left: 1px solid @deepblue;
			border-bottom: none;
			.box-border-box;
		}

	}

	.tab-content {
		>li {
			background: @whiteblue;
			padding:20px;
			border-right: 1px solid @deepblue;
			border-bottom: 1px solid @deepblue;
			border-left: 1px solid @deepblue;

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

			.maintenance_point {

				li {
					background: #FFF;
					.radius(@radius: 10px);
					padding: 0.5em 1em;
					margin-top: 10px;
					color: @deepblue;
					font-weight: bold;
				}
			}

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

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

				h4 {
					background: @deepblue;
					color:  #fff;
					font-size: 110%;
					padding: 0.3em 1em;
				}

				p {
					margin: 10px 0 30px;

					&:last-child {
						margin: 10px 0 0;
					}
				}
			}
		}
	}

	.hide {
		display:none;
	}
}

.lrset {
	width: 100%;
	overflow: hidden;

	.left {
		float: left;
		.box-border-box;
	}

	.right {
		float: right;
		.box-border-box;
	}

	.half {
		width: 50%;
		padding: 10px;
	}

	.third {
		width: 33%;
		padding: 10px;

		p {
			font-size: 120%;
		}
	}

	.main {
		width: 70%;
		padding: 20px 10px;
	}

	.sub {
		width: 30%;
		padding: 10px;
	}

	img {
		max-width: 100%;
		height: auto;
	}
}
#Exterior-renewal{
	color:#000;
	h3{
		font-size: 290%;
		padding-left:20px;
		border-left:10px solid #76001C;
		padding-top:0;
		padding-bottom: 0;
		margin:30px 0;
		color:#000 !important;
		@media screen and (max-width: 640px){
			font-size: 200%;
		}
	}
	.top_main_content{
		padding: 60px 0;
		h4{
			line-height: 1.4em;
			color:#000 !important;
			.font-en;
		}
		p{
			font-size: 120%;
			padding-top:20px;
			@media screen and (max-width: 640px){
				font-size: 110%;
			}
		}
		.title{
			&:after{
				display: none;
			}
		}
		@media screen and (max-width: 640px){
			padding:25px 10px;
		}
	}
}
.renewal-contents{
	width:1000px;
	margin:0 auto;
	@media screen and (max-width: 640px){
		width:100%;
	}

	.renewal-images{
		.disp-flex;
		.renewal-image{
			background-size:cover;
			background-position: center;
			width: 32%;
			height:230px;
			margin: 15px 2% 15px 0;
			&:nth-child(3){
				margin-right: 0;
			}
			@media screen and (max-width: 640px){
				height:130px;
			}
		}
		.renewal-image1{
			background-image: url("../img/renewal1.jpeg");
		}
		.renewal-image2{
			background-image: url("../img/renewal2.jpg");
		}
		.renewal-image3{
			background-image: url("../img/renewal3.jpeg");
		}
	}
	.renewal-message{
		margin-top:60px;
		@media screen and (max-width: 640px){
			margin-top: 25px;
			padding: 0 10px;
		}
		h3{
			font-size:350%;
			padding-top:40px;
			.font-en;
		}
		img{
			width:100%;
		}
		h4{
			text-align: center;
			font-size: 200%;
			padding:30px 20px;
			.font-en;
			@media screen and (max-width: 640px){
				font-size: 150%;
				padding-top:15px;
			}
		}
		p{
			text-align: center;
			font-size: 110%;
			@media screen and (max-width: 640px){
				text-align: left;
			}

		}
	}
	.renewal-promises{
		margin-top:40px;
		.disp-flex;
		@media screen and (max-width: 640px){
			display: inline-block;
		}
		.renewal-promise{
			width: 32%;
			margin: 15px 2% 15px 0;
			padding:15px;
			display: inline-block;
			&:nth-child(3){
				margin-right: 0;
			}
			@media screen and (max-width: 640px){
				width:95%;
				margin:10px 0;
				padding:0 2.5%;
			}
			span{
				font-size:150%;
				width:100%;
				font-weight: bold;
				color:#76001C;
				.font-en;
			}
			h4{
				font-size: 145%;
				width:100%;
				font-weight: bold;
				color:#76001C;
				.font-en;
			}
			img{
				width:100%;
				height:200px;
				@media screen and (max-width: 640px){
					height:auto;
				}

			}
			p{
				width:100%;
				padding:10px 0;
			}
			ul{
				width:100%;
				padding-left: 19px;
				li{
					list-style: square !important;
					font-size: 110%;
				}
			}
		}
	}
	.link-reform{
		text-align: center;
		margin: 45px 0 65px;
		&:hover a{
			opacity: 0.8;
		}
		img{
			width:100%;
		}
		@media screen and (max-width: 640px){
			margin:10px 0 25px;
		}

	}
}

/*=====================
      　Notfound
=====================*/

#Notfound {
	margin-top: 200px;
	width: 100%;
	text-align: center;
	min-height: 1000px;

	h3 {
		font-size: 300%;
	}

	a {
		margin-top: 100px;
		font-size: 200%;
		display: block;
		font-weight: bold;
	}
}

/*=====================
      　会社概要
=====================*/

#Company {
	padding: 50px 0;

  	table {
    	width: 100%;
    	font-size: 100%;

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

		th {
			padding: 1%;
			width: 29%;
			text-align: center;

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

    	td {
			padding: 1%;
			width: 69%;

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

    	td.column-1 {
    		padding: 1%;
			width: 29%;
			text-align: center;

			@media screen and (max-width: 640px){
				width: 100%;
				display: block;
				.box-border-box;
				text-align: left;
				color: @deepblue;
				font-weight: bold;
				padding-top: 15px;
			}
    	}

    	td.column-2 {
    		@media screen and (max-width: 640px){
				border-top: none;
				padding-bottom: 15px;
    		}
    	}
	}

	.ggmap {
    	position: relative;
	    padding-bottom: 56.25%;
	    padding-top: 30px;
	    height: 0;
	    overflow: hidden;
	    margin: 30px 0;
	}

	.ggmap iframe,
	.ggmapr object,
	.ggmap embed {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	}

	#Officephoto {

		ul {
	    	overflow: hidden;

	    	li {
				width: 25%;
				float: left;
				padding: 10px;
				.box-border-box;

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

	    		img {
					max-width: 100%;
	    		}
	    	}
		}
	}
}//#Company_end

/*=====================
  写真なしスタッフページ
=====================*/

#Stafflist-nophoto {
	table {
		border-top: 1px solid @deepblue;

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

		tr {
			border-left: 1px solid @deepblue;

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

			th,td {
				padding: 20px;
				.box-border-box;
			}

			th {
				background: #FFF;
				width: 25%;
				position: relative;
				color: @deepblue;
				border-bottom: 1px solid @deepblue;

				@media screen and (max-width: 1000px){
					display: block;
					width: 100%;
					height: 150px;
					border-right: 1px solid @deepblue;
				}

				@media screen and (max-width: 640px){
					border-top: 1px solid @deepblue;
					border-left: 1px solid @deepblue;
					height: 100px;
				}

				div {
					position: absolute;
					top: 20px;
					left: 20px;

					p {
						font-size: 130%;
					}

					h3 {
						font-size: 200%;
					}
				}

				strong {
					bottom: 20px;
					left: 20px;
					display: block;
					position: absolute;
					font-size: 250%;
					.font-en;

					@media screen and (max-width: 1000px){
						bottom: 15px;
						right: 20px;
						left: auto;
						line-height: 1.3em;
					}

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

			td {
				background: @deepblue;
				color: #fff;
				width: 75%;
				border-bottom: 1px #fff solid;

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

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

				.commentbox {
					background: #FFF;
					.radius;
					padding: 0.1em 0.5em;
					color: #000;
					font-size: 120%;

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

				.infopersonal {
					padding: 0.5em;
					font-size: 110%;

					p {
						display: block;
					}

					.book {

						&:before {
							content: "\f02d 好きな本：";
							font-family: "FontAwesome";
							padding-right: 0.2em;
						}
					}

					.hobby {
						&:before {
							content: "\f118 趣味：";
							font-family: "FontAwesome";
							padding-right: 0.2em;
						}
					}
				}

				ul {
					li {
						padding: 5px 0;
						h4 {
							.font-en;
							font-size: 180%;
							margin-bottom: 0.4em;
							border-bottom: 2px solid #fff;
						}
					}
				}
			}
		}
	}
}

/*=====================
     rentroofページ
=====================*/

.rentroof {

	.top_main_content {

		.title {
			border-bottom: 1px solid #000;
			padding-bottom: 10px;
		}

		.fullmain_text {
			margin-bottom: 40px;
		}

		.txt_list {

			li {
				font-weight: bold;
				margin-bottom: 10px;
				font-size: 120%;
			}

			li:before {
				content: "◉";
				color: #FFCF3D;
			}

			p {
				margin-bottom: 20px;
			}

			.sub_title {
				background: #eee;
			    padding: 5px 5px 5px 10px;
			    margin-bottom: 5px;
				.radius (@radius: 8px);
			}
		}

		.flow {
			ul {
				margin: 20px 0;

				li {
					background: #fff;
					padding: 10px;
					text-align: center;
					font-size: 140%;
					.radius (@radius: 15px);
					border: 2px solid @deepblue;
					font-weight: bold;

					span {
						color: #FFCF3D;
					}
				}

				.next {
					font-size: 130%;
					text-align: center;
					margin: 10px 0;
					color: @deepblue;
				}
			}
		}

		.faq_box {
			margin: 30px 0;

			.faq {
				margin-bottom: 30px;
				font-size: 110%;

				.que {
					margin-bottom: 5px;
					font-weight: bold;
					font-size: 130%;
				}

				.que:before {
					content: "Q.";
					color: #FFCF3D;
				}

				.anser:before {
					content: "A.";
					color: #81D3FD;
				}
			}
		}

		.solar {
			background: #fff;
			margin: 10px 0;
			padding: 20px;
			overflow: hidden;
			.radius (@radius: 15px);

			.s_txt {
				width: 50%;
				float: left;

				@media screen and (max-width: 640px){
					float: none;
					width: auto;
					margin-bottom: 20px;
				}

				p {
					font-size: 110%;
				}
			}

			.s_img {
				width: 49%;
				float: right;

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

				img {
					max-width: 100%;
					display: block;
					margin: 0 auto;
				}
			}
		}

		.title02 {
			font-size: 150%;
			font-weight: bold;
			margin-bottom: 10px;
			text-align: center;
			border-bottom: 2px solid @deepblue;
			padding-bottom: 10px;
			color: @deepblue;

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

		.morelink02 {
			margin-top: 30px;
			text-align: center;

			a {
				display: block;
				width: 300px;
				margin: 0 auto;
				background: @deepblue;
				padding: 10px;
				color: #FFF;
				font-size: 130%;
				.radius (@radius: 15px);

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

	.bg_white {
		background: #FFF;

		.txt_list {
			margin: 30px 0;
		}
	}
}

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

/*sharebar*/
body ul#sharebar {
    border-radius: 8px;        /* CSS3草案 */
    -webkit-border-radius: 8px;    /* Safari,Google Chrome用 */
    -moz-border-radius: 8px;   /* Firefox用 */
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
    padding: 5px 0 5px 0;
    margin-top: 40px;
}

/*WordPress Related Posts」*/
#wp_rp_first {

	margin: 30px 0;

	li {
		min-height: 80px;
	}
}

/*facebookコメント*/
.fb-comments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb-comments iframe[style],
.fb-social-plugin span,
.fb-comments span {
    width: 100% !important;
    display: block;
}

/*各シェアボタン*/
#Post_sharebox {
	overflow: hidden;

	.commoninput {
	    border: none;
	    color: #fff;
	    font-size: 18px;
	    .transition(@transition: 0.3s);
	    border-radius: 0;
	}

    .snsfb-btn {
    	-webkit-appearance: button;
        background: #305097;
        height: 70px;
        width: 50%;
        line-height: 50px;
        text-align: center;
        display: inline-block;
        .box-border-box;
        float: left;
        border: 3px solid #fff;
        margin-top: 50px;

        @media screen and (max-width: 1000px){
			width: 100%;
			margin-top: 5px;
        }
    }

    .snsfb-btn:focus, .snsfb-btn:hover, .snsfb-btn:active {
        outline: none;
        background: #22417d;
        cursor: pointer;
    }

    .snstw-btn {
    	-webkit-appearance: button;
        background: #00aced;
        height: 70px;
        width: 50%;
        line-height: 50px;
        text-align: center;
        display: inline-block;
        border: 3px solid #fff;
        .box-border-box;
        float: left;
        margin-top: 50px;

        @media screen and (max-width: 1000px){
			width: 100%;
			margin-top: 5px;
        }
    }

    .snstw-btn:focus, .snstw-btn:hover, .snstw-btn:active {
        outline: none;
        background: #056e93;
        cursor: pointer;
    }

    .snsline-btn {
    	-webkit-appearance: button;
        background: #5ae628;
        height: 70px;
        width: 100%;
        line-height: 50px;
        text-align: center;
        display: inline-block;
        margin-top: 20px;
        border: 3px solid #fff;
        .box-border-box;

        @media screen and (max-width: 640px){
			 margin-top: 5px;
        }
    }
}//#Post_sharebox_end

/*Pagenate*/

#Pagenate {
	width: 685px;
	overflow: hidden;
	text-align: center;
	min-height: 20px;
	margin: 0 auto;
	padding: 20px 0;

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

	.wp-paginate {

		.current {
			display: -webkit-inline-box;
			display: inline-block;
	    	*display: inline;
	    	*zoom: 1;
	    }

	    a {
	    	display: -webkit-inline-box;
			display: inline-block;
	    	*display: inline;
	    	*zoom: 1;
	    }
	}
}//Pagenate_end

/*faq Manager*/
#faq-block {

	h3 {
		font-size: 120%;
	}
}

/*ギャラリーの場合のみ高さ*/
#Top_postlist #Top_postbox .page-gallery {
	min-height: 260px;
}

/*facebook_comment*/

.facebook_comment {
	h3 {
		margin-top: 30px;
		font-size: 150%!important;
		background: #305097;
		color: #fff;
		padding: 5px 10px;
	}
}