@charset "UTF-8";
/* CSS Document */

/* --------  function  -------- */

$minWidth:940px;
$blue:#004DA0;
$aqua:#68BCE4;
$aq2:#F0F7FC;
$aq3:#DFF0F7;
$black:#212124;
$gr00:#f2f5f5;
$gr01:#4D4D54;
$gr02:#D2D2D4;
$gr03:#E6E6E6;
$text:$black;
$link:#555;
$hover:$blue;

@mixin opacity($opacity:.7) {
     opacity: $opacity;
     $opacityIE: $opacity * 100;
     filter: alpha(opacity=$opacityIE);
}
@mixin clearfix(){
  *zoom:1;
  &:before,&:after{
    display:block;
    height:0;
    visibility:hidden;
    content:'.';
  }
  &:after {
    clear:both;
  }
}
@mixin radius($radius:5px){
	border-radius:$radius;
	-webkit-border-radius:$radius;
	-o-border-radius:$radius;
	-ms-border-radius:$radius;
	-moz-border-radius:$radius;
}
@mixin box_shadow($shadow...) {
    -webkit-box-shadow: $shadow;
       -moz-box-shadow: $shadow;
        -ms-box-shadow: $shadow;
            box-shadow: $shadow;
}
@mixin headBgList(){
	width:100%;
	height:100%;
	position:fixed;
	z-index:10;
	ul{
		overflow:hidden;
		li{
			width:100%;
			height:100%;
			position:absolute;
			top:0;
			left:0;
			img{
				width:100%;
				height:auto;
			}
		}
	}
}

//mediaQuery

$width-pc: 980px;
$width-sp: 640px;

@mixin mq($width-mq:$width-pc){
  @media only screen and (max-width: $width-mq) {
    @content;
  }
}
@mixin pc(){
  @media only screen and (min-width: $width-pc) {
    @content;
  }
}
@mixin sp(){
  @media only screen and (max-width: $width-sp) {
    @content;
  }
}



@mixin blue($width,$pad){
	display:block;
	background:$blue;
	color:#fff;
	font-weight:bold;
	text-align:center;
	width:$width;
	padding:$pad;
	margin-right:7px;
	vertical-align:middle;
	float:left;
}

@mixin blueBox($pad:25px){
	border:2px solid $blue;
	background:$gr00;
	.title{
		background:$blue;
		text-align:center;
		color:#fff;
		font-weight:bold;
		font-size:130.8%;
		padding:5px 0;
	}
	.box{
		padding:$pad;
		.blueList{
			@include clearfix();
			li{
				width:430px;
				float:left;
				.blueImg{
					border:1px solid darken($gr02,10);
				}
				.blueTitle{
					font-size:115.4%;
					font-weight:bold;
					padding-top:15px;
				}
				.blueText{
					padding-top:7px;
				}
				&.even{
					float:right;
				}
				&.three{
					width:282px;
					overflow:hidden;
					margin-left:20px;
					margin-bottom:25px;
				}
				&:first-child{
					margin-left:0;
				}
			}
		}
	}
}

/* --------  base  -------- */

body{
	color:$text;
	font:13px 'Lucida Grande','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN', Meiryo, sans-serif;
	word-wrap:break-word;
	-webkit-text-size-adjust:100%;
	text-align: justify;
	text-justify: inter-ideograph;
	a{
		color:$link;
		&:hover,&.hover,&.focus,&.current{
			color:$hover;
		}
	}
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	.cont{
		overflow:hidden;
		width:$minWidth;
		margin:0 auto;
	}
	.boxLink{
		cursor:pointer;
	}
	.Roll{
		position:relative;
		z-index:999;
		cursor:pointer;
	}
	.rollParent{
		position:relative;
		display:inline-block;
	}
	.clone{
		position:absolute;
		top:auto;
		bottom:0;
		left:0;
	}
}

/* --------  follow  -------- */

.pagetop{
	position:absolute;
	//display:none;
	width:100px;
	height:27px;
	top:-27px;
	left:50%;
	margin-left:370px;
	cursor:pointer;
	background:url(../images/pagetop_off.gif) no-repeat center top $aqua;
	text-indent:-9999px;
	&:hover{
		background:url(../images/pagetop_on.gif) no-repeat center top $blue;
		//top:-29px;
	}
}
.abs{
	position:absolute;
	bottom:335px;
}

/* --------  popup  -------- */

#cover{
	width:100%;
	height:100%;
	background:red;
	@include opacity();
	position:absolute;
	z-index:100;
	display:none;
	cursor:pointer;
}
#popupCont{
	position:relative;
	height:100%;
	width:100%;
	z-index:1000;
	li{
		display:none;
		overflow:hidden;
		position:relative;
		padding:20px;
		background:#fff;
		width:80%;
		height:80%;
		margin:auto;
		top:0;
		right:0;
		bottom:0;
		left:0;
		position:fixed;
		text-align:center;
		img{
			width:auto;
			height:auto;
			background:#fff;
		}
		.prev{
			position:absolute;
			top:50%;
			left:5%;
			margin-top:-50px - 50/2;
			img{
				background:red;
				width:26px !important;
				height:75px !important;
				background:none;
				padding:50px 50px;
				border:0;
			}
		}
		.next{
			@extend .prev;
			left:auto;
		}
		.close{
			margin-top:-20px;
			cursor:pointer;
			display:block;
			text-align:center;
			img{
				width:58px !important;
				height:18px !important;
				text-align:center;
				background:none;
				padding:20px 0;
				margin-top:10px;
				border:0;
				&.clone{
					margin:auto 0;
					left:auto;
				}
			}
		}
	}
}

/* --------  rayout  -------- */

#wrapper{
	min-width:$minWidth + 20;
	height:auto;
	margin:0 auto;
	position:relative;

	&.black{
		#header{
			#mainNav{
				border-bottom:3px solid $aqua;
			}
		}
		#contents{
			background:url(../images/neon_bg.jpg) no-repeat center -30px #000;
			.section{
				.secTitle{
					border-bottom:1px solid $aqua;
				}
			}
		}

	}
	#header{
		position:relative;
		//padding:30px 0 0 0;
		z-index:100;
		background:url(../images/mainImage01.jpg) no-repeat center -100px;
		&.fix{
				position:fixed;
				top:0;
				left:0;
			}
		.index &{
			//padding:110px 0 0 0;
			background:url(../images/mainImage01.jpg) no-repeat center bottom;
		}
		h1#logo{
			margin:30px auto;
			width:154px;
			height:90px;
			.index &{
				margin-bottom:0;
				margin-top:0;
				width:177px;
				height:105px;
			}
			a{
				margin:0 auto;
				width:154px;
				height:90px;
				display:block;
				text-indent:-9999px;
				background:url(../images/logo_lower.png);
				.index &{
					width:177px;
					height:105px;
					background:url(../images/logo.png);
				}
			}
		}
		#copy{
			text-align:center;
			padding-top:30px;
			font-size:84.6%;
			color:$gr01;
			line-height:1.7em;
			margin-bottom:300px;
		}
		#mainNav{
			position:relative;
			background:$blue;
			width:100%;
			border-bottom:3px solid $gr03;
			z-index:100000;
			ul{
				overflow:hidden;
				background:url(../images/mainNav_bg.gif) no-repeat center center;
				margin:0 auto;
				width:$minWidth - 1;
				padding-right:1px;
				li{
					float:left;
					margin-left:1px;
					a{
						display:block;
					}
				}
			}
			#navBar{
				width:18px;
				height:9px;
				text-align:center;
				position:absolute;
				z-index:900;
				bottom:-9px;
				height:9px;
				background:url(../images/navBar.png) no-repeat center bottom;
			}
			&.fix{
				position:fixed;
				top:0;
				left:0;
			}
		}
		#breadcrumb{
			width:100%;
			background:url(../images/dots03.gif) repeat-x center top;
			ul{
				overflow:hidden;
				width:$minWidth - 20;
				margin:0 auto;
				li{
					float:left;
					margin-right:15px;
					line-height:3em;
					font-size:92.3%;
					a{
						background:url(../images/arrow03.gif) no-repeat right center;
						padding:10px 20px 10px 0;
						&:hover{
						}
					}
					&.current{
					}
				}
			}
		}
	}
	#contents{
		overflow:hidden;
		position:relative;
		height:auto;
		padding-top:50px;
		z-index:0;
		.section{
			position:relative;
			.secTitle{
				border-bottom:1px solid $gr02;
				padding-left:45px;
				padding-bottom:10px;
				margin-bottom:25px;
				background:url(../images/logo_min.png) no-repeat left top;
				.index &{
					background:url(../images/logo_min.png) no-repeat left center;
				}
				.tonews{
					@include blue(100px,5px);
					float: right;
					vertical-align: bottom;
					margin-top:2px;
					display: block;
					&:hover{
						background: $aqua;
					}
				}
			}
			.secImg{
				position:absolute;
				top:0;
				right:0;
			}
			.secCont{
				.artTitle{
					font-size:123.1%;
					margin-bottom:12px;
					font-weight:bold;
					background:$blue;
					padding:1px 0;
					color:#fff;
					padding-left:8px;
				}
				.secText{
					min-height:210px;
					width:560px;
					font-size:107.7%;
					line-height:1.8em;
				}
				.blueBox{
					@include blueBox();
				}
				.tableBox{
					border:2px solid $blue;
					table{
						tr{
							th{
								background:$gr03;
								border-bottom:1px solid $gr01;
								border-right:1px solid $gr01;
								font-size:123.1%;
								padding:10px 30px 10px 10px;
								&.last{
									border-bottom:none;
								}
							}
							td{
								border-bottom:1px solid $gr01;
								font-size:115.4%;
								padding:10px 15px;
								&.last{
									border:none;
								}
							}

						}
					}
				}
			}

		}
		#bottom{
			clear:both;
			background:url(../images/isao.png) no-repeat right bottom;
			#banners{
				padding:60px 0 40px;
				@include clearfix();
				li{
					width:250px;
					height:77px;
					border:2px solid $blue;
					float:left;
					margin-right:15px;
					&:hover{
						border:2px solid $aqua;
						cursor:pointer;
					}
				}
			}
		}
	}
	#footer{
		clear:both;
		width:100%;
		color:#fff;
		position:relative;
		background:#eee;
		#footCont{
			padding:30px 0;
			background:$blue;
			a{
				color:#fff;
				&:hover{
					color:$aqua;
				}
			}
			#footBox{
				width:445px;
				@include clearfix();
				#footInfo{
					padding-left:40px;
					.text01{
						font-size:138.5%;
						font-weight:bold;
					}
					.text02{
						font-size:92.3%;
						line-height:1em;
					}
					.text03{
						padding-top:18px;
						line-height:1em;
						font-size:215.4%;
						font-weight:bold;
						span{
							font-size:42.85%;
							background:$aqua;
							color:$blue;
							padding:0px 4px;
							margin-right:6px;
							vertical-align:middle;
						}
					}
				}
			}
			#footNav{

				@include clearfix();
				ul{
					float:left;
					padding-left:30px;
					li{
						border-left:1px solid #fff;
						padding-left:8px;
						margin-bottom:10px;
						height:1.3em;
						line-height:1.3em;
						overflow:visible;
						a{
							//padding:5px 0;
							display:block;
							height:2em;
							line-height:1.4em;
						}
					}
				}
			}
		}
		#small{
			$smallH:35px;
			height:$smallH;
			line-height:$smallH;
			text-align:center;
			font-size:92.3%;
			color:$blue;
		}
	}
}



/* --------  contents  -------- */
#wrapper{
#contents{

#topics{
	float:left;
	width:610px;
	.tonews{
		margin-top:7px !important;
	}
	#topicsList{
		li{
			overflow: hidden;
			margin-top:20px;
			&:first{
				margin-top:0;
			}
			.thumb{
				width:140px;
				margin-left:5px;
				float:left;
				height:90px;
				background:url(../images/logo_min.png) no-repeat center center #e6e6e6;
				overflow:hidden;
				img{
					height:auto;
					position:relative;
				}
			}
			.box{
				float: right;
				//background: #eee;
				width: 445px;
				.title{
					font-size:115%;
					font-weight: bold;
					display: block;
					a{
						display: block;
					}
				}
				.date{
					float: left;
					font-size: 93%;
					font-weight: bold;
					a{
						color:$blue;
					}
				}
				.cate{
					float: left;
					li{
						margin: 0;
						float: left;
						margin-left: 10px;
						text-decoration:underline;
						a{
						}
					}
				}
				.text{
					clear: both;
					padding-top:10px;
					a{
						display: block;
					}

				}
			}
		}
	}
}
#about{
	float:right;
	width:280px;
	.text01{
		margin-bottom:20px;
	}
	#infoList{
		li{
			@include clearfix();
			margin-bottom:10px;
			span{
				@include blue(3em,1px);
				font-size:92.3%;
			}
			.text02{
				font-size:184.6%;
				line-height:1.0em;
				font-weight:bold;
			}
		}
	}
}
#planning{
	#planList{
		width:100%;
		min-height:990px;
		position:relative;
		background:url(../images/planList_bg.gif) no-repeat center 30px;
		a{
			color:$blue;
			text-decoration:underline;
			font-weight:bold;
			padding: 0 2px;
			&:hover{
				color:$gr01;
			}
		}
		li{
			width:380px;
			position:absolute;
			.img{
				border:2px solid $blue;
				margin-bottom:15px;
			}s
			&.left{
				left:0;
			}
			&.right{
				right:0;
			}
			&#flow01{
				top:0;
			}
			&#flow02{
				top:0px;
				padding-left:48px;
				background:url(../images/planList_left.png) no-repeat left 170px;
			}
			&#flow03{
				top:75px;
				padding-right:48px;
				background:url(../images/planList_top.png) no-repeat right 230px;
			}
			&#flow04{
				top:290px;
				padding-left:48px;
				background:url(../images/planList_left.png) no-repeat left 140px;
			}
			&#flow05{
				top:480px;
				padding-right:48px;
				background:url(../images/planList_right.png) no-repeat right 110px;
			}
			&#flow07{
				top:650px;
				padding-left:48px;
				background:url(../images/planList_left.png) no-repeat left 170px;
			}
		}
	}
}
#print{
	.blueBox{
		.text{
			.blueList{
				@include clearfix();
				li{
					width:430px;
					float:left;
					.blueImg{
						border:1px solid $gr02;
					}
					.blueTitle{
						font-size:115.4%;
						font-weight:bold;
						padding-top:15px;
					}
					.blueText{
						padding-top:10px;
					}
					&.even{
						float:right;
					}
				}
			}
		}
	}
}
#product{
	#productList{
		@include clearfix();
		li{
			@include blueBox(22px);
			width:456px;
			float:left;
			margin-bottom:20px;
			.img{
				padding-bottom:15px;
				text-align:center;
			}
			&.even{
				float:right;
			}
		}
	}
}
#const{
	#constList{
		@include clearfix();
		margin-left:-20px;
		margin-bottom:30px;
		li{
			float:left;
			width:300px;
			margin-left:20px;
			margin-bottom:30px;
			.img{
				padding-bottom:10px;
			}
			.title{
				font-size:123.1%;
				font-weight:bold;
			}
		}
	}
}
#support{
	min-height:355px;
	#partner{
		.title{
			font-size:158.3%;
			padding-left:26px;
			line-height:1em;
			background:url(../images/icon_heart.gif) no-repeat left top;
			font-weight:bold;
			color:$blue;
			margin-bottom:25px;
		}
		.box{
			.boxTitle{
				font-weight:bold;
				font-size:115.4%;
				padding-bottom:10px;
			}
			.boxText{
			}
		}
		.btn{
			padding-top:25px;
			@include clearfix();
			li{
				float:left;
				margin-right:15px;
			}
		}
	}
}
#recruit{
	#infoBox{
		float:left;
		table{
			width:450px;
		}
	}
	.blueBox{
		width:450px;
		float:right;
	}
}
#company{
	#greeting{
		margin-bottom:30px;
		font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		.artTitle{
			font-size:123.1%;
			margin-bottom:12px;
			font-weight:bold;
			//text-align:center;
			background:$blue;
			color:#fff;
			padding-left:8px;
		}
		.artCont{
			padding:3px;
			.text01{
				font-size:123.1%;
				line-height:1.7em;
				padding-bottom:19px;
				//letter-spacing:.1em;
			}
			.name{
				text-align:right;
				padding-bottom:6px;
				span{
					font-size:92.3%;
					padding-right:10px;
				}
				p{
					display:inline;
					font-size:138.5%;
					font-weight:bold;
				}
			}
		}
	}
	#infoBox{
		float:left;
		margin-bottom:40px;
		table{
			width:450px;
			font-size:86.7%;
		}
	}
	#map{
		float:right;
		width:450px;
		#gmap{
			width:446px;
			height:267px;
			border:2px solid $blue;
			margin-bottom:20px;
		}
		#mapInfo{
			ul{
				margin-bottom:30px;
				li{
					@include clearfix();
					margin-bottom:5px;
					span{
						@include blue(3.5em,2px);
					}
					p{
						font-size:107.7%;
						line-height:1.7em;
					}
					&.odd{
						p{
							font-size:184.6%;
							line-height:1.2em;
							font-weight:bold;
						}
					}
				}
			}
			.btn{
			}
		}
	}
	.blueBox{
		clear:both;
	}
}
#info{
	#thanks{
		margin-bottom:40px;
		.artCont{

		}
	}
	#info_tel{
		margin-bottom:40px;
		span{
			font-size:215.4%;
			font-weight:bold;
			color:$blue;
			padding-right:5px;
		}
	}
	#info_mail{
		table{
			width:936px;
			font-size:93.3%;
			tr{
				th{
					text-align:right;
					padding:10px 15px 10px 35px;
				}
				td{
					padding:15px;
					a{
						background:url(../images/icon_blank.gif) no-repeat right center $blue;
						color:#fff;
						font-size:92.3%;
						padding:2px 23px 2px 5px;
						font-weight:bold;
						margin-left:10px;
						border-right:5px solid $blue;
						&:hover{
							background:url(../images/icon_blank.gif) no-repeat right center $aqua;
							border-right:5px solid $aqua;
						}
					}
					input{
						border:1px solid lighten($gr01,40);
						padding:3px;
						&:focus{
							background:$aq3;
						}
					}
					textarea{
						border:1px solid lighten($gr01,40);
						padding:3px;
						&:focus{
							background:$aq3;
						}
					}
					button{
						border:none;
						width:125px;
						height:36px;
						text-indent:-9999px;
						background:url(../images/info_btn_submit_off.gif);
						&:hover{
							background:url(../images/info_btn_submit_on.gif);
							cursor:pointer;
						}
					}
					ul{
						li{
							margin-top:10px;
							&:first-child{
								margin-top:0;
							}
						}
					}
					&.last{
						label{
							float:left;
							cursor:pointer;
						}
						button{
							float:right;
						}
					}
				}
				&.req{
					th{
						background:url(../images/icon_required.gif) no-repeat 10px center $gr03;
					}
					td{
						input{
							background:$aq2;
							&:focus{
								background:lighten($aqua,25);
							}
						}
						textarea{
							background:$aq2;
							&:focus{
								background:lighten($aqua,25);
							}
						}
					}
				}
			}
		}
	}
}
#neon{
	.text01{
		font-size:107.7%;
		color:#fff;
		text-align:center;
		line-height:2.6em;
		margin-bottom:120px;
		p{
			font-size:130.8%;
			font-weight:bold;
			padding-top:10px;
			padding-bottom:20px;
		}
	}
	#neonImg{
		@include clearfix();
		margin-bottom:20px;
		//background:red;
		li{
			float:left;
			&.center{
				padding:0 25px 0 0;
			}
		}
	}
}
#news{
	#side{
		width:190px;
		float:left;
		.sideBox{
			border:2px solid $blue;
			margin-top:20px;
			background:$blue;
			&:first-child{
				margin-top:0;
			}
			.sideTitle{
				height:18px;
				padding:5px 0;
				text-align:center;
				border-bottom:2px solid $blue;
				img{
					vertical-align:top;
				}
			}
			.sideCont{
				li{
					background:$gr03;
					padding:5px;
					margin-top:1px;
					&:first-child{
						margin-top:0;
					}
					a{
						display:block;
					}
				}
				&#cateList{
					li{
						text-align:center;
						font-size:107.7%;
						font-weight:bold;
					}
				}
				&#latestList{
					li{
						.date{
							a{
								color:$blue;
								font-weight:bold;
								font-size:92.3%;

							}
						}
						.text{
							font-size:92.3%;
						}
					}
				}
				&#acvList{
					@extend #cateList;
				}
			}
		}
	}
	#newsBox{
		width:720px;
		float:right;
		#pageNavi{
			position: relative;
			margin-top:25px;
			margin-bottom:30px;
			@include clearfix();
			span{
				top:0;
				position: absolute;

				a{
					display: block;
					background: $blue;
					color: #FFF;
					padding: 8px 13px;
					&:hover{
						background: $aqua;
					}
				}

				&#prev{
					left:0;
				}
				&#next{
					right:0;
				}
				&#list{
					a{
						width:6em;
						background: $aqua;
					}

					position: relative;
					margin: 0 auto;
				}
			}
		}
		.wp-pagenavi{
			padding-top:30px;
			min-height:54px;
			position:relative;
			clear: both;
			span{
				display:inline-block;
				padding: 4px 12px;
				@include radius(4px);
				font-size:107.7%;
				text-decoration: none;
				background:$blue;
				color:#fff;
				&.pages{
					margin-right:10px;
				}
				&.current{
					font-weight: bold;
					padding: 4px 12px;
					background:$aqua;
					color:#FFF;
				}
			}
			a{
				@extend span;
				margin-left:5px;
				padding: 4px 12px;
				&:hover{
					background:$blue;
				}
				&.prevpostslink{
					margin-left:10px;
				}
				&.nextpostslink{
					margin-left:10px;
				}
				&.prev{
					background:none;
					position:absolute;
					padding:0;
					left:0;
				}
				&.back{
					background:none;
					position:relative;
					left:179px;
					padding:0;
				}
				&.next{
					background:none;
					padding:0;
					position:absolute;
					right:0;
				}
			}

		}

		#newsList{
			li{
				margin-top:40px;
				@include clearfix();
				&:first-child{
					margin-top:0;
				}
				.title{
					background:$gr03;
					color:$blue;
					font-size:138.5%;
					font-weight:bold;
					padding:8px 10px;
					border-left:4px solid $blue;
					margin-bottom:10px;
				}
				.date{
					color:$blue;
					font-weight:bold;
					float:left;
				}
				.cate{
					float:left;
					margin-left:15px;
					ul{
						@include clearfix();
						li{
							float:left;
							margin-top:0;
							margin-left:5px;
							&:first-child{
								margin-left:0;
							}
							a{
								display:inline-block;
								margin:0 4px;
								text-decoration:underline;
								color:$aqua;
								&:hover{
									color:$blue;
								}
							}
						}
					}
				}
				.text{
					clear:both;
					padding-top:15px;
					font-size:107.7%;
					line-height:1.8em;
					a{
						display: inline;
					}
					img{
						padding: 5px 0;
					}
				}
			}
		}
	}
}

}
}


/* --------  loading  -------- */

.index{
	#wrapper{
		overflow:hidden;
		opacity:0;
		#header{
			.cont{
				padding-top:80px;

			}
		}
	}
	#logo,#copy,#mainNav,#contents{
		opacity:0;
	}
}



/* --------  UDDATE20210908  -------- */

#wrapper{
#contents{

#message{
	width: 100%;
	padding: 20px 0 100px;
	>.secCont{
		>.text{
			text-align: center;
			p{
				font-size: 115.4%;
				line-height: 2.85;
				letter-spacing: 0.06em;
				&:nth-child(3){
					margin-bottom: 1.8em;
				}
				&.date{
					margin-bottom: 1.2em;
				}
			}
			h4{
				display: -ms-flex;
				display: -webkit-flex;
				display: flex;
				//nowrap/wrap/wrap-reverse
				-ms-flex-wrap: wrap;
				-webkit-flex-wrap: wrap;
				flex-wrap: wrap;
				//水平方向の位置｜flex-start/flex-end/center/space-between/space-around
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				//垂直方向の位置｜stretch/flex-start/flex-end/center/baseline
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;

				font-size: 130.8%;
				>span{
					margin-right: 1em;
					font-size: 75%;

				}
				&:first-of-type{
					margin-bottom: 0.4em;
				}
			}
		}
	}
}
}}