@charset "UTF-8";
/*----------------------------------------------------
	style_index.css
	トップページ
----------------------------------------------------*/

/* PC
--------------------------------------------------------------------------------------------------------*/

/* ---------- メインイメージ ---------- */
#mainimage {
	width: 100vw;
  height: 100vh;
  margin: 0 0 100px 0;
  position: relative;
  overflow: hidden;
}
#mainimage .item {
	opacity: 0;
	transform: scale(1);
	transition: opacity 2s linear, transform 7.5s linear;
	position: relative;
	z-index: 1;
}
#mainimage .item:first-child {
	position: absolute;
	top: 0;
	left : 0;
}
#mainimage .item.show { opacity: 1; }
#mainimage .item.zoom { transform: scale(1.1); }
#mainimage .item img {
	width: 100vw;
	height: 100vh;
	display: block;
}
#mainimage #maintxt {
	width: 100%;
	font-size: 50px;
	font-size: 5.0rem;
	font-family: source-han-serif-japanese, serif;
	font-style: normal;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 8px #000;
	position: absolute;
	top: 50%;
	z-index: 10;
}
#mainimage .bg {
	width: 100%;
	height: 100vh;
	background: url(../images/cover_mainimage.png) repeat;
	position: absolute;
	top: 0;
	z-index: 5;
}


/* ---------- BUSINESS ---------- */
#business .box {
	width: 1000px;
	margin: 0 auto;
}
#business .box .list {
	margin: 0 0 150px 0;
}
#business .box .list dl {
	width: 800px;
	margin: -80px 0 0 0;
	padding: 30px;
	background: #fff;
	position: relative;
	z-index: 5;
}
#business .box .list dl dt {
	padding: 0 0 20px 0;
	font-size: 20px;
	font-size: 2.0rem;
	color: #0068b7;
}
#business .box .list dl dd a {
	margin: 10px 0 0 0;
	display: inline-block;
}

/* 写真左寄せ */
#business .box .list.lbox dl {
	border-radius: 30px 0 0 0;
	float: right;
}

/* 写真右寄せ */
#business .box .list.rbox .photo { float: right; }
#business .box .list.rbox dl {
	border-radius: 0 30px 0 0;
	float: left;
}

/* ---------- NEWS & WORKS ---------- */
#works {
	margin: 0 0 100px 0;
	padding: 60px 0 80px 0;
}
#works .box {
	width: 1000px;
	margin: 0 auto;
}
#works .inner {
	width: 100%;
	padding: 0 0 20px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#works .inner dl {
	width: calc((100% - 40px) / 3);
}
#works .inner dl dt {
	width: 100%;
	height: 200px;
  overflow: hidden;
}
#works .inner dl dt span { width: 100% !important; }
#works .inner dl dt img {
	width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
#works .inner dl dd.info {
	padding: 5px 0;
	font-size: 1.6rem;
}
#works .inner dl dd.title { font-size: 1.8rem; }
#works .bt_link { text-align: center; }


/* ---------- COMPANY ---------- */
#company {
	margin: 0 0 100px 0;
	padding: 60px 0 80px 0;
	background: #d8f1fa;
}
#company .box {
	width: 1000px;
	margin: 0 auto;
	padding: 60px 0;
}
#company dl {
  border: 2px solid #d8f1fa;
  border-top: none;
  display: flex;
  flex-wrap: wrap;
}
#company dt {
  width: 30%;
  padding: 10px;
  background: #f3f3f3;
  border-top: 2px solid #d8f1fa; 
  box-sizing: border-box;
}
#company dd {
	width: 70%;
	margin: 0;
  padding: 10px;
  background: #fff;
  border-left: 2px solid #d8f1fa;
  border-top: 2px solid #d8f1fa; 
  box-sizing: border-box;
}
#company dd i {
	margin: 0 0 0 5px;
	display: inline-block;
}
#company dd .bn {
	padding: 20px 0 0 0;
	display: flex;
}
#company dd .bn li {
	width: calc((100% - 40px) / 2);
	margin: 0 20px 0 0;
	display: block;
}
#company dd .bn li img {
	width: 100%;
	height: auto;
}

/* ---------- INQUIRY ---------- */
#contact .box {
	width: 1000px;
	margin: 0 auto 100px auto;
}
#contact .txt_inquiry { margin: 0 0 40px 0; }
#contact .attention {
	font-size: 14px;
	font-size: 1.4rem;
	color: #f19716;
}
#contact .mark {
	font-size: 14px;
	font-size: 1.4rem;
	color: #a40000;
}
#contact .check { margin: 0 0 30px 0; }
#contact dl dt { margin: 0 0 5px 0; }
#contact dl dd { margin: 0 0 30px 0; }

/* 個人情報保護方針 */
#privacy .catch { margin: 0 0 40px 0; }
#privacy dl dt {
	border-bottom: 1px dotted #1c75bc;
	color: #1c75bc;
}
#privacy dl dd { padding: 0 0 30px 0; }
#privacy dl dd p { margin: 0 0 10px 0; }
#privacy dl dd ul li {
	padding: 0 0 0 0.7em;
	text-indent: -0.7em;
}
#privacy dl dd ul li::before {
	content:  "";
	width: 10px;
	height: 10px;
	margin: 0 2px 0 0;
	display:  inline-block;
	background-color: #1c75bc;
	position:  relative;
	top: -1px;
	border-radius:  50%;
}
#privacy .modal:link { text-decoration: underline; }

/* メールフォーム用CSS */
form#mail_form dl dt span.required,
form#mail_form dl dt span.optional { display: none;
/*
	display: inline-block;
	float: left;
	color: #ffffff;
	line-height: 1;
	padding: 8px 9px;
	border-radius: 3px;
*/
}
form#mail_form dl dt span.required {
	background: #d9534f;
	border: 1px solid #d43f3a;
}
form#mail_form dl dt span.optional {
	background: #337ab7;
	border: 1px solid #2e6da4;
}
form#mail_form dl dd span.error_blank,
form#mail_form dl dd span.error_format,
form#mail_form dl dd span.error_match {
	display: block;
	color: #ff0000;
	margin-top: 3px;
}
span.loading {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-top: 5px solid rgba( 255, 255, 255, 0.2 );
	border-right: 5px solid rgba( 255, 255, 255, 0.2 );
	border-bottom: 5px solid rgba( 255, 255, 255, 0.2 );
	border-left: 5px solid #ffffff;
	-webkit-transform: translateZ( 0 );
	-ms-transform: translateZ( 0 );
	transform: translateZ( 0 );
	-webkit-animation: load-circle 1.0s linear infinite;
	animation: load-circle 1.0s linear infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
}
@-webkit-keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}
@keyframes load-circle {
	0% {
		-webkit-transform: rotate( 0deg );
		transform: rotate( 0deg );
	}
	100% {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
	}
}

/* 必須要素上書き */
.st_mark::before {
	content: "※";
	margin: 0 2px 0 0;
	color: #a40000;
}


/* SP
--------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 999px) {
	/* ---------- メインイメージ ---------- */
	#mainimage {
		width: 100vw;
	  height: auto;
	  margin: 0 0 60px 0;
	  position: relative;
	  overflow: hidden;
	}
	#mainimage .item img { width: 180%; }
	#mainimage #maintxt { font-size: 8vw;	}
	
	/* ---------- BUSINESS ---------- */
	#business .box {
		width: 100%;
		margin: 0;
		padding: 0 20px;
	}
	#business .box .list {
		margin: 0 0 60px 0;
		position: inherit;
	}
	#business .box .list .photo img {
		width: 100%;
		height: auto;
	}
	#business .box .list dl {
		width: 100%;
		margin: 0;
		padding: 20px 0;
		position: inherit;
		z-index: inherit;
	}
	#business .box .list dl dt {
		padding: 0 0 10px 0;
		font-size: 18px;
		font-size: 1.8rem;
	}
	
	/* 写真左寄せ */
	#business .box .list.lbox dl {
		border-radius: 0;
		float: none;
	}
	
	/* 写真右寄せ */
	#business .box .list.rbox .photo { float: none; }
	#business .box .list.rbox dl {
		border-radius: 0;
		float: none;
	}
	
	/* ---------- COMPANY ---------- */
	#company {
		margin: 0 0 100px 0;
		padding: 60px 0 80px 0;
		background: #d8f1fa;
	}
	#company .box {
		width: 100%;
		margin: 0;
		padding: 0 20px;
	}

	/* ---------- NEWS & WORKS ---------- */
	#works .box {
		width: 100%;
		margin: 0 0 80px 0;
		padding: 0 20px;
	}
	#works .inner {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 30px;
	}
	#works .inner dl { width: calc((100% - 60px) / 2); }
	#works .inner dl dt { height: 300px; }
	
	/* ---------- INQUIRY ---------- */
	#contact .box {
		width: 100%;
		margin: 0 0 80px 0;
		padding: 0 20px;
	}
	
	/* メールフォーム用CSS */
	form#mail_form dl dt span.required,
	form#mail_form dl dt span.optional {
		margin-right: 1em;
		margin-bottom: 2em;
	}
}