@charset "utf-8";

/* ========================================================================================================================/
	
	style.css

/======================================================================================================================== */

/* ------------------------------------------------------------------------------------------------------------------------/
	information
/------------------------------------------------------------------------------------------------------------------------ */
#information {
	position:relative;
	display:block;
	box-sizing:border-box;
	background:transparent url("./image/contents/top/block01_accessory01.png") -150px bottom no-repeat;
	border-top:solid 10px #cccccc;
	border-bottom:solid 10px #cccccc;
	}
	#information .inner {
		position:relative;
		display:block;
		width:1100px;
		box-sizing:border-box;
		margin:0 auto;
		padding:100px 0;
		}
		#information .inner h2 {
			position:relative;
			display:inline-block;
			font-size:35px;
			font-family:"Noto Serif JP","メイリオ","Meiryo","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
			letter-spacing:0.2em;
			margin:0 0 50px 0;
			}
		#information .inner h2:before,
		#information .inner h2:after {
			content:"●";
			position:absolute;
			color:#007dca;
			font-size:20px;
			}
		#information .inner h2:before { left:-50px; }
		#information .inner h2:after { right:-50px; }
		#information .inner .inner_box {
			text-align:left;
			overflow-y:auto;
			list-style:none;
			box-sizing: border-box;
			background-color: rgb(255 255 255 / 0.8);
			}
			#information .inner .inner_box a {
				text-decoration: none;
			}
			#information .inner .inner_box .kijibox {
				box-sizing:border-box;
				background:transparent url("./image/layout/ic_arrow01_off.png") left center no-repeat;
				border-bottom:dotted 1px #cccccc;
				padding:15px 0 15px 30px;
				}
			#information .inner .inner_box .kijibox:first-child { margin:0; }
			#information .inner .inner_box .kijibox span {
					display:block;
					color:#666666;
					font-size:13px;
					font-weight:bold;
					}
		#information .inner ul.banner {
			max-width: 450px;
			list-style:none;
      margin: 30px auto 0;
			}
				#information .inner ul.banner li a {
					display:block;
					}

@media screen and (max-width:1180px) {
	#information .inner {
		width:100%;
	}	
	#information .inner .inner_box {
		float:none;
		width: 920px;
		margin: 0 auto 30px;
	}
	#information .inner .inner_box .kijibox {
		width:100%;
		}
	#information .inner ul.banner {
		float:none;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		width: 920px;
		margin: 0 auto;
	}
	#information .inner ul.banner li {
		display: block;
		width: 450px;
	}
}

@media screen and (max-width:1000px) {
	#information .inner {
		width:calc(100% - 80px);
	}	
	#information .inner .inner_box {
		width: 100%;
	}
}
@media screen and (max-width:640px) {
	#information .inner {
		width:calc(100% - 40px);
	}
	#information .inner .inner_box .kijibox span {
		font-size:20px;
		}
}


/* ------------------------------------------------------------------------------------------------------------------------/
	catch
/------------------------------------------------------------------------------------------------------------------------ */
#catch {
	position:relative;
	display:block;
	height:485px;
	box-sizing:border-box;
	background:transparent url("./image/contents/top/block02_bg01.jpg") center center no-repeat;
	}
	#catch .inner {
		position:relative;
		display:block;
		width:1120px;
		box-sizing:border-box;
		margin:0 auto;
		padding:100px 0;
		}
		#catch .inner h2 {
			display:inline-block;
			font-size:35px;
			font-family:"Noto Serif JP","メイリオ","Meiryo","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
			letter-spacing:0.1em;
			margin:-10px 0 80px 0;
			}
			#catch .inner h2 img {
				width: 257px;
				margin:0 0 -19px 0;
				}
		#catch .inner p {
			font-size:20px;
			font-family:"Noto Serif JP","メイリオ","Meiryo","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
			letter-spacing:0.05em;
			line-height:200%;
			}
@media screen and (max-width:1180px) {
	#catch .inner {
		width:calc(100% - 80px);
		}
}
@media screen and (max-width:740px) {
	#catch .inner {
		padding:90px 0;
		}
	#catch .inner h2 {
			margin:-10px 0 54px 0;
		}
	#catch .inner h2 img {
		margin:10px 0 -19px 0;
		}
}
@media screen and (max-width:640px) {
	#catch .inner {
		width:calc(100% - 40px);
		}
}

/* ------------------------------------------------------------------------------------------------------------------------/
	service
/------------------------------------------------------------------------------------------------------------------------ */
#service {
	position:relative;
	display:block;
	box-sizing:border-box;
	background:transparent url("./image/contents/top/block03_accessory01.png") right 70px bottom no-repeat;
	border-top:solid 10px #cccccc;
	border-bottom:solid 10px #cccccc;
	}
	#service .inner {
		position:relative;
		display:block;
		width:1100px;
		box-sizing:border-box;
		margin:0 auto;
		padding:100px 0;
		}
		#service .inner h2 {
			position:relative;
			display:inline-block;
			font-size:35px;
			font-family:"Noto Serif JP","メイリオ","Meiryo","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
			letter-spacing:0.2em;
			margin:0 0 50px 0;
			}
		#service .inner h2:before,
		#service .inner h2:after {
			content:"●";
			position:absolute;
			color:#007dca;
			font-size:20px;
			}
		#service .inner h2:before { left:-50px; }
		#service .inner h2:after { right:-50px; }

		#service .inner ul.service_menu {
			list-style:none;
			}
			#service .inner ul.service_menu li {
				float:left;
				width:calc((100% - 150px) / 4);
				max-width:237px;
				margin:0 50px 0 0;
				}
			#service .inner ul.service_menu li:nth-of-type(4) {
				margin:0;
				}
				#service .inner ul.service_menu li a {
					color:#232323;
					text-decoration:none;
					}
					#service .inner ul.service_menu li a dl {
						}
						#service .inner ul.service_menu li a dl dt {
							background:#ffffff;
							}
						#service .inner ul.service_menu li a dl dd {
							font-weight:bold;
							box-sizing:border-box;
							background:transparent url("./image/layout/ic_arrow02_off.png") right 10px center no-repeat;
							padding:20px 10px 20px 0;
							}

					#service .inner ul.service_menu li:nth-of-type(1) a dl {
						float:left;
						}
						#service .inner ul.service_menu li:nth-of-type(1) a dl dd {
							font-weight:bold;
							box-sizing:border-box;
							background:#ffffff url("./image/layout/ic_arrow02_off.png") right 10px center no-repeat;
							border-right:solid 1px #efefef;
							padding:34px 10px 20px 0;
							}
						#service .inner ul.service_menu li:nth-of-type(3) a dl dd {
							padding:34px 10px 20px 0;
							}

						#service .inner ul.service_menu li a:hover dl dd {
							background:#ffffff url("./image/layout/ic_arrow02_on.png") right 10px center no-repeat;
							}
							#service .inner ul.service_menu li a:hover dl dt img {
								opacity:0.75;
								filter:alpha(opacity=75);
								-ms-filter:"alpha( opacity=75 )";
								}

		#service .inner ul.banner {
			margin:50px 0 0 0;
			list-style:none;
			}
			#service .inner ul.banner li {
				}
				#service .inner ul.banner li a {
					display:block;
					width:525px;
					margin:0 auto;
					}

		#service .inner .notes {
			position:relative;
			display:inline-block;
			text-align:center;
			color:#ff0000;
			font-size:12px;
			font-weight:normal;
			margin:10px 0 0 0;
			padding:0 0 0 1.5em;
			}
		#service .inner .notes:before {
			content:"※";
			position:absolute;
			left:0;
			}

@media screen and (max-width:1180px) {
	#service .inner {
		width:calc(100% - 80px);
		}
	#service .inner ul.service_menu {
		width: 524px;
		margin: 0 auto -25px;
		}
	#service .inner ul.service_menu li {
		width: 237px;
		margin-bottom: 25px;
		}
	#service .inner ul.service_menu li:nth-of-type(even) {
		margin:0;
		}
}
@media screen and (max-width:640px) {
	#service .inner {
		width:calc(100% - 40px);
		}
	#service .inner ul.service_menu li a dl dd,
	#service .inner ul.service_menu li:nth-of-type(1) a dl dd,
	#service .inner ul.service_menu li a:hover dl dd {
		background-image: none;
		}
	#service .inner .notes {
		font-size: 18px;
	}
}


/* ------------------------------------------------------------------------------------------------------------------------/
	works
/------------------------------------------------------------------------------------------------------------------------ */
#works {
	position:relative;
	display:block;
	height:764px;
	box-sizing:border-box;
	background:transparent url("./image/contents/top/block04_bg01.jpg") center center no-repeat;
	border-bottom:solid 10px #cccccc;
	}
	#works .inner {
		position:relative;
		display:block;
		width:1100px;
		box-sizing:border-box;
		margin:0 auto;
		padding:100px 0;
		}
		#works .inner h2 {
			position:relative;
			display:inline-block;
			font-size:35px;
			font-family:"Noto Serif JP","メイリオ","Meiryo","ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
			letter-spacing:0.2em;
			margin:0 0 50px 0;
			}
		#works .inner h2:before,
		#works .inner h2:after {
			content:"●";
			position:absolute;
			color:#007dca;
			font-size:20px;
			}
		#works .inner h2:before { left:-50px; }
		#works .inner h2:after { right:-50px; }

		#works .inner ul {
			list-style:none;
			display: flex;
			}
			#works .inner ul li {
				float:left;
				width:calc(33.33% - 34px);
				margin:0 50px 0 0;
				}
			#works .inner ul li:nth-of-type(3) {
				margin:0;
				}
				#works .inner ul li {
					color:#232323;
					text-decoration:none;
					}
					#works .inner ul li dl {
						}
						#works .inner ul li dl dt {
							background:#ffffff;
							}
							#works .inner ul li dl dt img {
								height: 250px;
								object-fit: contain;
							}
						#works .inner ul li dl dd {
							font-weight:bold;
							box-sizing:border-box;
							background:#ffffff url("./image/layout/ic_arrow02_off.png") right 10px center no-repeat;
							padding:20px 40px 20px 20px;
							}

						#works .inner ul li:hover dl dd {
							background:#ffffff url("./image/layout/ic_arrow02_on.png") right 10px center no-repeat;
							}
							#works .inner ul li:hover dl dt img {
								opacity:0.75;
								filter:alpha(opacity=75);
								-ms-filter:"alpha( opacity=75 )";
								}

		#works .inner p.button {
			width:600px;
			margin:50px auto 0 auto;
			}
			#works .inner p.button a {
				display:block;
				color:#ffffff;
				text-align:center;
				text-decoration:none;
				line-height:80px;
				box-sizing:border-box;
				background:#007dca url("./image/layout/ic_arrow03_off.png") right 20px center no-repeat;
				padding:0 0 0 20px;
				}
			#works .inner p.button a:hover {
				background:#3687f2 url("./image/layout/ic_arrow03_on.png") right 20px center no-repeat;
				}

@media screen and (max-width:1180px) {
	#works {
		height: auto;
	}
	#works .inner {
		width:calc(100% - 80px);
		}
	#works .inner ul li {
		width:calc(33.33% - 17px);
		margin:0 25px 0 0;
		}
}
@media screen and (max-width:900px) {
	#works .inner ul li dl dt img {
		height: 100%;
		max-height:138px; 
	}
}
@media screen and (max-width:700px) {
	#works .inner p.button {
		width:100%;
		}
}
@media screen and (max-width:640px) {
	#works .inner {
		width:calc(100% - 40px);
		}
}