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

/* ---------会社紹介---------------------------------- */

#about .text_back {
	width: 100%;
	background:repeating-linear-gradient(
45deg,
#dcdcdc,
#dcdcdc 5px,
#fff 0,
#fff 10px
);
}

#about p {
	font-family: nitalago-ruika, sans-serif;
	font-weight: 100;
	font-style: normal;
	font-size: 1.1em;
	width: 75%;
	margin: 0 auto;
	line-height: 1.8em;
	color: #000;
}


@media screen and (max-width: 767px) {
	#about p {
	width: 95%;
}
}


/*--------- 事業案内 --------------------------------*/
#services {
	width: 100%; 
	padding: 60px 0;
}

.imgBox_se {
	width: 100%; 
     padding: 30px 0; 
	position: relative;
	overflow-x: hidden;
	margin-bottom: 1.5vw;	
}
/*マウスオン用のアニメーション*/
.imgBox_se::before {
	content: "";position: absolute;top: 0;left: 100%;width: 100%;height: 100%;
	background: rgba(0,0,0,0.3);		/*写真に重ねておく半透明の黒い色。。*/
	transition: transform 0.5s 0.1s;	/*アニメーションの速度（0.5秒）と待機時間（0.1秒）。*/
}
.imgBox_se:hover::before {
	transform: translateX(-100%);	/*マウスオンで半透明の黒を枠に戻す。*/
}

/*各事業内容イメージ設定*/
.print {
	 background: #fff;
}
.web {
	background: #fff;
}
.sticker {
	background: #fff;
}
.signboard {
	background: #fff;
}
.novelty {
	background: #fff;
}
.security {
	background: #fff;
}

#services .front {
	z-index: 100;
	text-align: center;
}

#services h3 {
	font-size: 2.2rem; 
     font-weight: bold;
     text-align: center;
     margin: 40px auto; 
     padding-bottom: 10px;
	color: #000;
	text-shadow: 2px 2px 10px #fff,
		-2px 2px 10px #fff,
		2px -2px 10px #fff,
		-2px -2px 10px #fff;
}
#services .services_text {
	width: 80%;
	font-size: 1.2rem; 
     font-weight: bold;
     text-align: left;
     margin: 40px auto; 
     padding-bottom: 10px;
	color: #000;
	text-shadow: 2px 2px 10px #fff,
		-2px 2px 10px #fff,
		2px -2px 10px #fff,
		-2px -2px 10px #fff;
}
/* ボタン */
#services .c-btn {
  background: #426579;
  border: 2px solid #426579;
  border-radius: 60px;
  color: #fff;
  display: block;
  font-weight: bold;
  max-width: 300px;
  padding: 15px 40px;
  text-align: center;
	margin: 0 auto;
	cursor: pointer;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
}
#services .c-btn.slide {
  background: #fff;
  color: #426579;
  overflow: hidden;
  position: relative;
  z-index: 1;
	margin-top: 10px;
}
#services .c-btn.slide::after {
  background: #426579;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
#services .c-btn.slide:hover {
  color: #fff;
}
#services .c-btn.slide:hover::after {
  transform: scale(1, 1);
}

/* 事業内容イメージ */
#services .photbox {
	width: 80%;
	margin: 20px auto;
    display: inline-block;
	background: #fff;
	padding: 20px;
}

#services .photbox img {
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
}
/* 角切込み　*/
.kado {
	width:80%;
	margin:0 auto;
	position: relative;
}
.kado::before,
.kado::after {
	content: "";
	width: 60px;
	height: 20px;
	display:block;
	transform: rotate(-35deg);
	background: #fff;
	position: absolute;
	z-index: 1;
}
.kado::before {
	border-bottom: 1px solid #aaa;
	top: 15px;
	left: 1px;
}
.kado::after {
	border-top: 1px solid #aaa;
	bottom:15px;
	right:0px;
}

/* まるっとおまかせ*/
.l_bunner {
	width: 80%;
	margin: 0 auto;
	display:block; 
	position:relative;
 text-decoration:none;
}
.image_link{
 display:block; 
 position:relative;
 text-decoration:none;
}
.image_link img{
  display:block;
  width:100%;
}
.image_link:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#000;
  opacity:0;
  transition:0.3s;
}
.image_link:after{
  content:"まかせて安心！";
  display:block;
  color:#fff;
  line-height:48px;
  width:180px;
  border:solid 2px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-1em;
  margin-left:-90px;
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:bold;
  letter-spacing:0.2em;
}
.image_link:hover:before{
  opacity:0.7;
}
.image_link:hover:after{
  opacity:1;
  margin-top:-0.5em;
}

.omakase_t {
	width: 70%;
	margin: 30px auto;
}

@media screen and (min-width: 1000px) {
	.l_bunner {
	width: 70%;
}
}

@media screen and (max-width: 767px) {
	.l_bunner {
	width: 95%;
	}
	.omakase_t {
	width: 90%;
}
}