/*
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
	デフォルト: WXGA
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
*/
* {
	box-sizing: border-box;
	font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
}

html, body {
	text-align: center;
	margin: 0;
	padding: 0;
	width: 100%;
}

#body-frame {
	position: relative;
	width: 100%;
	text-align: center;
}
header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 186px;
	background-color: #fff;
	text-align: center;
	z-index: 100;
}

footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 20px;
	background-color: #555;
	text-align: center;
	z-index: 100;
	color: #000;

	padding-top: 2px;
	box-shadow: 0px -3px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px -3px 3px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px -3px 3px rgba(0,0,0,0.6);
	opacity: 0.7;
}

.frame {
	width: 100%;
	margin: auto;
	text-align: center;
}
.head-frame {
	width: 1140px;
	margin: auto;
	text-align: center;
}

/* WORKS内テキストのマウスオーバー色変更 2018.12.25 */
.title a:hover {
color:#ff0000 !important;
}



#head-top {
	margin: auto;
}

	#head-top .left {
		display: inline-block;
		float: left;
		width: 70px;
		height: 35px;
		background: transparent url(../img/kage_hidari_ue.png) no-repeat bottom left;
	}
	#head-top .center {
		display: inline-block;
		float: left;
		width: 1000px;
		height: 35px;
		background: transparent url(../img/kage_ue.png) repeat-x bottom center;
	}
	#head-top .right {
		display: inline-block;
		float: left;
		width: 70px;
		height: 35px;
		background: transparent url(../img/kage_migi_ue.png) no-repeat bottom left;
	}

#head-middle {

}
	#head-middle .left {
		display: inline-block;
		float: left;
		width: 40px;
		height: 114px;
		background: transparent url(../img/ribbon_hidari.png) no-repeat bottom left;
	}
	#head-middle .center {
		display: inline-block;
		float: left;
		width: 1060px;
		height: 114px;
		background: transparent url(../img/ribbon_naka.png) repeat-x top center;
		text-align: left;
	}
	#head-middle .right {
		display: inline-block;
		float: left;
		width: 40px;
		height: 114px;
		background: transparent url(../img/ribbon_migi.png) no-repeat bottom right;
	}

#head-bottom {
	position: relative;
}

	#head-bottom .left {
		display: inline-block;
		float: left;
		width: 40px;
		height: 37px;
		background: transparent url(../img/kage_hidari.png) repeat-y top left;
	}
	#head-bottom .center {
		display: inline-block;
		float: left;
		width: 1060px;
		height: 87px;
		margin-top: -35px;
		background: transparent url(../img/ribbon_sita.png) repeat-x top center;
		text-align: left;
	}

		#head-bottom .center nav {
			margin-top: -8px;
			position: relative;
		}
		#head-bottom .center nav a {
			display: inline-block;
			position: absolute;
			text-decoration: none;
		}
		#head-bottom .center nav .nav-item {
			float: left;
			text-align: center;
			font-size: 20px;
			color: #5A5859;
			padding: 15px 20px;
			width: 159px;
			height: 70px;
			margin-top: -10px;
			font-weight: normal;
			text-shadow: 1px 1px 1px #666;
		}
		#head-bottom .center nav a:nth-child(1) {
			left: 0px;
		}
		#head-bottom .center nav a:nth-child(2) {
			left: 125px;
		}
		#head-bottom .center nav a:nth-child(3) {
			left: 250px;
		}

		#head-bottom .center nav .nav-item p {
			/*display: none;*/
			font-weight: bold;
			font-size: 12px;
			margin-top: 3px;
		}

		#head-bottom .center nav .nav-item.active {
			width: 159px;
			/*height: 112px;*/
			text-align: center;
			/*background: transparent url(../img/menu/menu_1.png) no-repeat -9px 0px scroll;*/
			font-size: 20px;
			color: #CC0F2D;
		}
		#head-bottom .center nav .nav-item.active p {
			display: block;
			margin-top: 3px;
		}

	#head-bottom .right {
		display: inline-block;
		float: left;
		width: 40px;
		height: 37px;
		background: transparent url(../img/kage_migi.png) repeat-y top right;
	}


#main {
	width: 1140px;
	margin-top: 187px;
}

	#main .left {
		display: inline-block;
		float: left;
		width: 40px;
		height: 300px;
		background: transparent url(../img/kage_hidari.png) repeat-y top left;
	}
	#main .center {
		display: inline-block;
		float: left;
		width: 1060px;
		height: 100%;
		text-align: left;
		padding: 55px 30px 30px;
	}

		#main .center .items {
			float: left;
			display: inline-block;
			width: 780px;
			padding: 0;
			margin: 0 20px 0 0;
		}

		#main .center .item {
			position: relative;
			display: inline-block;
			width: 25%;
			height: 287px;
			margin: 0;
			padding: 0 10px 10px 0;
			border: 0;
			overflow: hidden;
		}

		#main .center .item .inner {
			position: relative;
			margin: 0;
			width: 100%;
			height: 100%;
			border: 0;
			overflow: hidden;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
		}

		#main .center .item .inner .fill {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			background: transparent url(../img/contents_title.png) repeat-x left bottom;
			width: 100%;
			height: 100%;
		}

		#main .center .item .inner .icon {
			position: absolute;
			top: 5px;
			left: 5px;
			z-index: 3;
			background: transparent url(../img/contents_label.png) no-repeat center;
			background-size: contain;
			width: 52.5px;
			height: 52.5px;
			display: table;
			vertical-align: middle;
		}
		#main .center .item .inner .icon div {
			display: table-cell;
			color: #fff;
			text-align: center;
			vertical-align: middle;
			font-size: 12px;
			font-weight: normal;
			line-height: 14px;
			padding-top: 2px;

			-webkit-transform: scale(0.65,0.65);
			-moz-transform: scale(0.65,0.65);
			-ms-transform: scale(0.65,0.65);
			-o-transform: scale(0.65,0.65);
			transform: scale(0.65,0.65);
  		}
		#main .center .item .inner .icon div span {
			font-size: 10px;
		}
		#main .center .item .inner .icon div span.min {
			line-height: 6px;
		}

		#main .center .item .inner .icon div p {
			font-size: 10px;
			padding: 0;
			margin: 0;
		}

		#main .center .item .inner .label {
			color: #fff;
			position: absolute;
			bottom: 0px;
			left: 0px;
			width: 100%;
			height: 30%;
			padding: 10px;
			z-index: 3;
			display: table;
			text-shadow: 1px 1px 3px #000, -1px 1px 3px #000, 1px -1px 3px #000, -1px -1px 3px #000;
			box-sizing: border-box;
		}
		#main .center .item .inner .label .label-inner {
			display: table-cell;
			text-align: left;
			vertical-align: bottom;
			font-size: 10px;
			line-height: 14px;
			opacity: 0.8;
			height: 217px;
		}
		#main .center .item .inner .label .label-inner p {
			padding: 0;
			margin: 0;
			width: 100%;
		}
		#main .center .item .inner .label .label-inner .title {
			line-height: 17px;
			font-size: 14px;
			margin-bottom: 5px;
		}
		#main .center .item .inner .label .label-inner .title a {
			color:white;
			text-decoration: none;
		}
		#main .center .twitter {
			float: left;
			display: inline-block;
			width: 196px;
			height: 580px;
			padding: 0;
			margin: 0;
			margin-bottom: 20px;
		}
		#main .center .twitter .twitter-timeline {
			width: 100%;
			height: 100%;
		}

		#main .center .about-item-first {
			position: relative;
			display: block;
			width: 770px;
			margin: 0;
			padding: 0 10px 10px 0;
			border: 0;
			overflow: hidden;
		}

		#main .center .about-item-first .title,
		#main .center .about-item .title {
			box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.6);
			-webkit-box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.6);
			-moz-box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.6);
		}

		#main .center .about-item-first .content,
		#main .center .about-item .content {
			color: #707070;
			padding: 20px;
			min-height: 70px;
		}

		#main .center .about-item {
			position: relative;
			display: inline-block;
			width: 370px;
			margin: 0;
			padding: 0 10px 10px 0;
			border: 0;
			overflow: hidden;
			vertical-align: top;
		}

		#main .center .about-item:nth-child(2n+0) {
			margin-right: 30px;
		}

		#main .center .about-item .title {
		}

		#main .center .about-item .content {
		}

	#main .right {
		display: inline-block;
		float: left;
		width: 40px;
		height: 300px;
		background: transparent url(../img/kage_migi.png) repeat-y top left;
	}

	#page-top {
		position: fixed;
		right: 0;
		bottom: 60px;
		z-index: 100;
	}
@media screen and (min-width:801px) and (max-width:1500px) {
	#main .center .division-item {
			position: relative;
			display: inline-block;
			width: 255px;
			padding: 0 20px 20px 20px;
			border: 0;
			vertical-align: top;
			background:url(../img/division/line.png) no-repeat;
			background-position:left;
		}
}


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

#main .center .division-item {
			position: relative;
			display: inline-block;
			width: 370px;
			margin: 0;
			padding: 0 23px 23px 23px;
			border: 0;
			overflow: hidden;
			vertical-align: top;
			background:url(../img/division/line.png) no-repeat;
			background-position:left;
		}
}

#main .center .div_ttl{
	background:url(../img/division/icon.png) no-repeat;
	font-weight:bold;
	background-position:left;
	padding:4px 0 0 27px;
	margin:28px 0 0 0;
	vertical-align:top;
}

/*#main .center .div_ttl span.bold_ttl{
	font-weight:bold;
	color:#3e3a39;
	margin-left:27px;
	padding:0 0 0 0;

}*/
#main .center  .div_contents{
	color:#3e3a39;
	margin-left:27px;
	margin-top:4px;
}
#main .center .division-item .title {
	padding-top:1px;
		}




/*
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
	スマホ・タブレット
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
*/
@media only screen and (max-width: 800px) {
	footer { font-size: 12px; padding-top: 0px; }
	.frame { width: 100%; }
	.head-frame { width: 620px; }

		#head-top .left   { background-position: center bottom; }
		#head-top .center { background-position: center bottom; width: 480px; }
		#head-top .right  { background-position: center bottom; }

		#head-middle .center { width: 540px; }
		#head-bottom .center { width: 540px; }
		#head-bottom .center nav { margin-top: -14px; }

	#main { width: 640px; }
		#main .left   { background-position: center top; width: 60px; }
		#main .center { width: 520px; padding: 50px 20px 30px; }
		#main .right  { background-position: center top; width: 60px; }

			#main .center .items { width: 500px; margin: 0 30px 20px 0; }
			#main .center .item  { width: 475px; height: 675px; padding: 0 0 0; margin-bottom: 10px; }

			#main .center .item .inner { width: 475px; height: 665px; }
			#main .center .item .inner .icon { width: 100px; height: 100px; }
			#main .center .item .inner .label { padding: 20px; width: 435px; }
			#main .center .item .inner .label .label-inner { font-size: 22px; line-height: 28px; height: 585px; width: 435px !important; }
			#main .center .item .inner .label .label-inner p { width: 435px !important; }
			#main .center .item .inner .label .label-inner .title { font-size: 28px; line-height: 36px; width: 435px; }
			#main .center .twitter { width: 475px; height: 970px; }

		#main .center .about-item-first,
		#main .center .about-item { width: 485px; }
		#main .center .about-item-first .title,
		#main .center .about-item .title { width: 485px; padding: 0; font-size: 20px; }
		#main .center .about-item-first .content,
		#main .center .about-item .content { margin-bottom: 40px; font-size: 24px; }

		#main .center .item .inner .icon div {
			-webkit-transform: scale(1.0,1.0);
			-moz-transform: scale(1.0,1.0);
			-ms-transform: scale(1.0,1.0);
			-o-transform: scale(1.0,1.0);
			transform: scale(1.0,1.0);
		}
		#main .center .sp_mt50{
			margin-top:50px;
		}
		#main .center .sp_mb40{
			margin-bottom:40px;
		}

		#main .center .division-item {
			font-size:24px;
			background: url(../img/division/line.png) no-repeat;
			background-position: left;
			padding-left:20px;
		}
		#main .center  .div_contents{
	font-size:20px;
}

}


@media only screen and (min-width: 801px) {
	#main .center .div_ttl span.bold_ttl{
	font-size:15px;
}
#main .center  .div_contents{
	font-size:13px;
}

}



/*
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
	PC: Full HD 16:9
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
*/
@media only screen and (min-width: 1500px) {
	.frame { width: 100%; }
	.head-frame { width: 1560px; }

		#head-top .left   { background-position: center bottom; }
		#head-top .center { background-position: center bottom; width: 1400px; }
		#head-top .right  { background-position: center bottom; }
		#head-middle .center { width: 1460px; }
		#head-bottom .center { width: 1460px; }

	#main { width: 1540px; }
		#main .left   { background-position: center top; width: 30px; }
		#main .right  { background-position: center top; width: 30px; }
		#main .center { width: 1460px; padding: 55px 30px 30px; }
			#main .center .items { width: 1120px; margin: 0 20px 0 0; }
			#main .center .item  { width: 280px; height: 380px; padding: 0 10px 10px 0; }
			#main .center .item .inner { width: 270px; height: 380px; }
			#main .center .item .inner .icon { width: 70px; height: 70px; }
			#main .center .item .inner .label .label-inner { font-size: 12px; line-height: 16px; height: 320px; }
			#main .center .item .inner .label .label-inner .title { line-height: 17px; font-size: 15px; }
			#main .center .twitter { width: 260px; height: 770px; }

		#main .center .about-item-first { width: 1110px; }
		#main .center .about-item-first .title,
		#main .center .about-item { width: 540px; }

		#main .center .item .inner .icon div {
			-webkit-transform: scale(0.9,0.9);
			-moz-transform: scale(0.9,0.9);
			-ms-transform: scale(0.9,0.9);
			-o-transform: scale(0.9,0.9);
			transform: scale(0.9,0.9);
		}
}

/*
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
	PC: Full HD 4:3
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
*/
/*
@media only screen and (min-width: 1400px) {
	.frame { width: 1400px; }
	.head-frame { width: 1400px; }

		#head-top .left   { background-position: center bottom; }
		#head-top .center { background-position: center bottom; width: 1140px; }
		#head-top .right  { background-position: center bottom; }
		#head-middle .center { width: 1300px; }
		#head-bottom .center { width: 1300px; }

	#main { width: 1380px; }
		#main .left   { background-position: center top; width: 30px; }
		#main .right  { background-position: center top; width: 30px; }
		#main .center { width: 1460px; padding: 30px; }
			#main .center .items { width: 1120px; margin: 0 20px 0 0; }
			#main .center .item  { width: 280px; height: 380px; padding: 0 10px 10px 0; }
			#main .center .item .inner { width: 270px; height: 380px; }
			#main .center .item .inner .icon { width: 70px; height: 70px; }
			#main .center .item .inner .label .label-inner { font-size: 12px; line-height: 16px; }
			#main .center .item .inner .label .label-inner .title { line-height: 17px; font-size: 15px; }
			#main .center .twitter { width: 260px; height: 770px; }
}
*/
