@charset "UTF-8";
/*------------------------------------------------------------
共通
------------------------------------------------------------*/
.txt , .text02{
	line-height: 1.78;
	letter-spacing: .08em;
}
/* 上下のアニメーション*/
.slideAnimeDownUp {
    animation-name:slideTextY100;
    animation-duration:1s;
    animation-fill-mode:forwards;
}
@keyframes slideTextY100 {
    from {
        transform: translateX(-10%);/* 要素を上の枠外に移動*/
		-webkit-transform: translateX(-10%);
		-moz-transform: translateX(-10%);
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
    }
}

@media all and (min-width: 960px) {
/* メニューのフォントカラー */
.header,.h1-ttl{color: #333;}
.header02{position: relative;}
.header02::after{
	content: "";
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url("../img/svg/logo03.svg") no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	top: 0;
	transition: all 0.8s ease;
}
/* スクロールしたらロゴのカラー変更 */
.headerColorScroll02 {
  position: relative;
  transition: all 0.8s ease;
}
.headerColorScroll02::after{
	content: "";
	display: inline-block;
	width: 60px;
	height: 60px;
	background: url("../img/svg/logo03.svg") no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	top: 0;
	transition: all 0.8s ease;
}
/* メインビジュアルの画像の領域 */
.top-visual {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
  margin-top: 100px
}
.top-image {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* イントロエリア */
	.introArea{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		max-width: 700px;
		margin: 60px auto 120px;
	}
	.intro .Cnt{
		width: 68%;
		height: auto;
		position: relative;
	}
	.intro .Cnt02{
		width: 15%;
		height: auto;
	}
	.intro .ttl{
	font-size: 2em;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	}
	.intro .txt{
	font-size: 1.6rem;
	letter-spacing: .1rem;;
	line-height: 2;
	color:#343334;
	position: absolute;
	top: 50px;
	text-align: justify;
	}
.txt02{
		font-size: 1.4rem;
		width: 100%;
		max-width: 980px;
		margin: 10px auto 120px;
	}
.subArea{
		width: 100%;
		max-width: 600px;
		margin: 0 auto 40px;
	}
.subArea .sub-ttl{
	text-align: center;
	font-size: 2em;
		margin-bottom: 20px;
	}
.subArea p{
		 line-height: 1.8;	
	}
.note{
		font-size: 1.4rem;
		margin-top: 5px;
	}
/*------------------------------------------------------------
mainVisual ttl
------------------------------------------------------------*/
.mainVisual{
	position: relative;
	}
.mainVisual .ttlArea{
	position: absolute;
	top: 50%;
	bottom: 50%;
	right: 5.35rem;
	}	
/*------------------------------------------------------------
service
------------------------------------------------------------*/
.service .content{
		max-width: 1280px;
		margin: 0 auto;
	}
/* メインビジュアルの画像 */
.service .top-visual .top-image {
	background-image: url("../img/index/top03.jpg");
	background-position: center;
}
.service .top-visual .ttl{
    width: 380px;
	height: 90px;
	overflow: hidden;
	display: inline-block;
}
.service .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 380px;
	height: 90px;
	background: url("../img/svg/Service.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
	.service .serviceMenu{
		width: 830px;
		height: auto;
		margin: 0 auto 120px;
	}
	.service .menuCnt{
		width: 24%;
		height: 400px;
	}
	.service .menuCnt .menu-ttl{
		-ms-writing-mode: tb-rl;
    	writing-mode: vertical-rl;
		min-height: 220px
	}
	.service .menuCnt .menu-img{
		position: relative;
		height: 100%;
	}

	.service .menuCnt .menu-img::before{
		content: "";
		width: 100%;
		height: 400px;
		display: inline-block;
		background-position: top;
		position: absolute;
		top: 0;
		left: 0;
	}
	.service .menuCnt:nth-child(1) .menu-img::before{
		background: url("../img/service/service01.jpg") no-repeat;
		background-size: cover;
	}
	.service .menuCnt:nth-child(2) .menu-img::before{
		background: url("../img/service/service02.jpg") no-repeat;
		background-size: cover;
	}
	.service .menuCnt:nth-child(3) .menu-img::before{
		background: url("../img/service/service03.jpg") no-repeat;
		background-size: cover;
	}
	.service .menuCnt:nth-child(4) .menu-img::before{
		background: url("../img/service/service04.jpg") no-repeat;
		background-size: cover;
	}
	.service .menuCnt .menu-img::after{
		content: " ";
		display: inline-block;
		background:rgba(0,0,0,0.6);
		width: 100%;
		height: 400px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
		.service .menuCnt .menu-img:hover::after{
		background-color: rgba(0,0,0,.2);
	}
	.service .menu-ttl{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		color: #fff;
		font-size: 2rem;
		letter-spacing: .1em;
		z-index: 2;
	}
	.service .menuCnt a{
		position: relative;
	}

	.service .Box{
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
	}
	.service .Box .Cnt{
		width: 48%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.service .Box .ttl{
		font-size: 3rem;
		margin-bottom: 10px;
	}
	.service .Box .Cnt .txt{
		text-align: justify;
		max-width: 90%;
		margin-bottom: 30px;
	}
	.service .Box .type{
		margin-bottom: 5px;
		text-align: right;
		width: 90%;
	}
	.service .Box .design01{
		width: 90%;
	}
	.service .sub-ttl{
		text-align: center;
		font-size: 2em;
	}
	
	.service .Area,.service .subArea{
		padding-top:200px;
	}
	.service .subArea{
		width: 100%;
		max-width: 600px;
		margin: 0 auto 40px;
	}
	.service .subArea .sub-ttl{
		margin-bottom: 20px;
	}
	.service .subArea p{
		 line-height: 1.8;	
	}
	.service .note{
		font-size: 1.4rem;
		margin-top: 5px;
	}
/*------------------------------------------------------------
strength
------------------------------------------------------------*/
/* メインビジュアルの画像 */
.strength .top-visual .top-image {
	background-image: url("../img/strength/strength.jpg");
	background-position: center;
	position: relative;
}
	.strength .top-visual .top-image::before{
		width: 100%;
		height: 100%;
		content: "";
		display: inline-block;
		background: rgba(0,0,0,.2);
		position: absolute;
		top: 0;
		left: 0;
	}
.strength .top-visual .ttl{
    width: 380px;
	height: 90px;
	overflow: hidden;
	display: inline-block;
}
.strength .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 380px;
	height: 90px;
	background: url("../img/svg/Strength.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
.strength .Box{
		width: 100%;
		max-width: 1280px;
		margin: 160px auto 0;
	}
	.strength .Box .Area{
		margin-bottom: 200px;
	}
.strength .Box .Cnt{
		width: 48%;
		height: auto;
	}
	.strength .Box .ttl{
		font-size: 3rem;
		margin-bottom: 10px;
	}
	.strength .Box .Cnt .txt{
		text-align: justify;
		max-width: 85%;
		margin-bottom: 30px;
		
	}
	.strength .strengthNo{
		font-size: 6em;
		color: rgba(38,39,15,.3);
		line-height: 1;
		position: relative;
		margin-bottom: 40px;
	}
	.strength .strengthNo::after{
		content: "";
		width: 100px;
		height: 50px;
		background: url("../img/svg/Strength02.svg") no-repeat;
		background-position: top;
		background-size: contain;
		position: absolute;
		bottom:-50px;
		left: 0;
	}
/*------------------------------------------------------------
works
------------------------------------------------------------*/
.works .content{
		max-width: 1280px;
		margin: 0 auto;
	}
/* メインビジュアルの画像 */
.works .top-visual .top-image {
	background-image: url("../img/strength/strength01.jpg");
	position: relative;
}
	.works .top-visual .top-image::before{
		width: 100%;
		height: 100%;
		content: "";
		display: inline-block;
		background: rgba(0,0,0,.2);
		position: absolute;
		top: 0;
		left: 0;
	}
.works .top-visual .ttl{
    width: 380px;
	height: 90px;
	overflow: hidden;
	display: inline-block;
}
.works .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 380px;
	height: 90px;
	background: url("../img/svg/Works.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
	.works .Box{
		width: 100%;
		max-width: 1024px;
		margin: 0 auto 10px;
		padding: 16px;
	}
	.works .Box .Cnt{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.works .Box .ttl{
		font-size: 2rem;
		margin: 20px 0 10px;
	}
	.works .Area{
		width: 30%;
	}
	.works .Box .Cnt .txt{
		text-align: justify;
		max-width: 90%;
		margin-bottom: 30px;
	}
	.works .Box .type{
		margin-bottom: 5px;
		text-align: right;
		width: 100%;
	}
	.works .Box .design01{
		width: 100%;
	}
	.works .sub-ttl{
		text-align: center;
		font-size: 2em;
	}
	.works .subArea{
		width: 100%;
		max-width: 600px;
		margin: 0 auto 40px;
	}
	.works .subArea .sub-ttl{
		margin-bottom: 20px;
	}
	.works .subArea p{
		 line-height: 1.8;	
	}
	.works .note{
		font-size: 1.4rem;
		margin-top: 5px;
	}
/*------------------------------------------------------------
about
------------------------------------------------------------*/
/* メインビジュアルの画像 */
.about .top-visual .top-image {
	background-image: url("../img/index/top01.jpg");
	background-position: top;
	position: relative;
}
	.about .top-visual .top-image::before{
		width: 100%;
		height: 100%;
		content: "";
		display: inline-block;
		background: rgba(0,0,0,.2);
		position: absolute;
		top: 0;
		left: 0;
	}
.about .top-visual .ttl{
    width: 380px;
	height: 90px;
	overflow: hidden;
	display: inline-block;
}
.about .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 380px;
	height: 90px;
	background: url("../img/svg/voice02.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
/*セミ共通*/
.about .Box{
		width: 100%;
		max-width: 1280px;
		margin: 160px auto 0;
	}
	.about .Box .Area{
		margin-bottom: 200px;
	}
.about .Box .Cnt{
		width: 48%;
		height: auto;
		position: relative;
	margin: 10px;
	}
.about .Box .Cnt:nth-child(2){
		width: 46%;
		height: auto;
		position: relative;
	margin: 10px;
	}
	.about .Box .ttl{
	font-size: 2.6rem;
	width: 90%;
	margin: 0 auto;
	}
	.about .Box .name{
	font-size: 1.4rem;
	width: 80%;
	margin: 0 auto 5px;
	text-align: right;
	}
	.about .Box .name02{
		font-size: 1.8rem;
	width: 80%;
	margin: 0 auto ;
		text-align: right;
	}
	.about .Box .Cnt .txt{
		text-align: justify;
		width: 90%;
		margin: 10px auto;
		line-height: 1.78;
	}
/*------------------------------------------------------------
campanyPage recruitPage
------------------------------------------------------------*/
	
.companyPage .top-visual .top-image {
	background-image: url("../img/commn/comoany.jpg");
	position: relative;
	background-position: center;
}
.recruitPage .top-visual .top-image {
	background-image: url("../img/index/voice01.jpg");
	position: relative;
	background-position: center;
}
.companyPage .top-visual .top-image::before,.recruitPage .top-visual .top-image::before{
		width: 100%;
		height: 100%;
		content: "";
		display: inline-block;
		background: rgba(0,0,0,.2);
		position: absolute;
		top: 0;
		left: 0;
	}
.companyPage .top-visual .ttl,.recruitPage .top-visual .ttl{
    width: 380px;
	height: 90px;
	overflow: hidden;
	display: inline-block;
}
.companyPage .top-visual .ttl::after,.recruitPage .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 380px;
	height: 90px;
	background: url("../img/svg/Company.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
.company_sec{
	height: auto;
	margin: 0 0 120px;
	width: 100%;
	padding: 0 32px;
}
.companyArea{
	width: 100%;
    height: auto;
    margin: 0 auto;
    background: rgba(255,255,255,.1);
    padding: 5%;
    font-size: 1.6rem;
    color: #000;
	max-width: 980px;
}
.companyArea a{
	color: #000;
}
.companyArea ul li{
	padding: 30px 0;
	border-bottom: 1px solid #000;
}
.data_ttl{
	margin-left: 20px;
	display: inline-block;
	width: 20%;
	font-weight: 700;
	max-width: 200px;
	font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic', YuGothic,"Noto Sans JP", 'ヒラギノ角ゴ ProN W3', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'メイリオ', meiryo, "ＭＳ Ｐゴシック", Verdana, sans-serif;
}
/* -----------------------------------------*/
/* privacyPage */
/* -----------------------------------------*/
/* メインビジュアルの画像 */
.privacyPage .top-visual .top-image {
	background-image: url("../img/commn/privacy.jpg");
	background-position: center;
}
.privacyPage .top-visual .ttl{
    width: 380px;
	height: 90px;
	overflow: hidden;
	display: inline-block;
}
.privacyPage .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 380px;
	height: 90px;
	background: url("../img/svg/Privacy.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
	.privacy_sec{
		width: 100%;
		max-width: 880px;
		margin: 0 auto;
	}
.privacyArea{
	margin-bottom: 20px;
}
.privacyArea h3{
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 2rem;
}
}


@media all and (max-width: 960px) {
/* メインビジュアルの画像の領域 */
.top-visual {
  position: relative;
  width: 100%;
  height: 50vh;
  overflow: hidden;
}
.top-image {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* メインビジュアルの画像 */
/*service*/
.service .top-visual .top-image {
	background-image: url("../img/index/top03.jpg");
}
/*strength*/
.strength .top-visual .top-image {
	background-image: url("../img/strength/strength.jpg");
	position: relative;
}
/*works*/
.works .top-visual .top-image {
	background-image: url("../img/strength/strength01.jpg");
	position: relative;
}
/*about*/
.about .top-visual .top-image {
	background-image: url("../img/index/top01.jpg");
	position: relative;
}
/*recruitPage*/
.recruitPage .top-visual .top-image {
	background-image: url("../img/index/voice01.jpg");
	position: relative;
}
/*companyPage*/
.companyPage .top-visual .top-image {
	background-image: url("../img/commn/comoany.jpg");
	position: relative;
}
/*privacyPage*/
.privacyPage .top-visual .top-image {
	background-image: url("../img/commn/privacy.jpg");
	position: relative;
}
.strength .top-visual .top-image::before , .works .top-visual .top-image::before, .privacyPage .top-visual .top-image::before{
		width: 100%;
		height: 100%;
		content: "";
		display: inline-block;
		background: rgba(0,0,0,.2);
		position: absolute;
		top: 0;
		left: 0;
	}
/*------------------------------------------------------------
mainVisual ttl
------------------------------------------------------------*/
.mainVisual{
	position: relative;
	}
.mainVisual .ttlArea{
	position: absolute;
	top: 70%;
	bottom: 30%;
	right: 20px;
	}
/*------------------------------------------------------------
イントロ
------------------------------------------------------------*/
	.introArea{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		max-width: 90%;
		margin: 30px auto 60px;
		height: 150px;
	}
	.intro .Cnt{
		width: 73%;
		height: auto;
		position: relative;
	}
	.intro .Cnt02{
		width: 21%;
		height: auto;
		position: relative;
	}
	.intro .ttl{
	font-size: 1.6em;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	position: absolute;
	top: -35px;
	}
	.intro .txt{
	font-size: 1.4rem;
	letter-spacing: .1rem;;
	line-height: 1.78;
	color:#343334;
	position: relative;
	text-align: justify;
	}
	.txt02{
		width: 90%;
		margin: 0 auto;
	}
	.subArea{
		padding-top:60px;
	}
	.subArea{
		width: 100%;
		max-width: 100%;
		margin: 0 auto 40px;
		
	}
	.subArea .sub-ttl{
		text-align: center;
		font-size: 1.8em;
		margin-bottom: 20px;
	}
	.subArea p{
		 line-height: 1.8;
		width: 90%;
		margin: 0 auto 10px;
	}
	.subArea .note{
		font-size: 1.4rem;
		margin-top: 5px;
	}
/*------------------------------------------------------------
service
------------------------------------------------------------*/
.service .top-visual .ttl{
    width: 200px;
	height: 60px;
	overflow: hidden;
	display: inline-block;
}
.service .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 200px;
	height: 60px;
	background: url("../img/svg/Service.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
.service .content{
	max-width: 100%;
	margin: 0 auto;
	}
	.service .serviceMenu{
		width: 90%;
		height: auto;
		margin: 0 auto 40px;
		position: relative;
	}
	.service .menuCnt{
		width: 100%;
		height: 100px;
		margin: 10px;
	}
	.service .menuCnt .menu-ttl{
		-ms-writing-mode: horizontal-tb;
    	writing-mode: horizontal-tb;
	}
	.service .menuCnt .menu-img{
		position: relative;
		height: 100%;
	}

	.service .menuCnt .menu-img::before{
		content: "";
		width: 100%;
		height: 100px;
		display: inline-block;
		background-position: top;
		position: absolute;
		top: 0;
		left: 0;
	}
	.service .menuCnt:nth-child(1) .menu-img::before{
		background: url("../img/service/service01-main.jpg") no-repeat;
		background-size: cover;
	}
	.service .menuCnt:nth-child(2) .menu-img::before{
		background: url("../img/service/service02-main.jpg") no-repeat;
		background-size: cover;
	}
	.service .menuCnt:nth-child(3) .menu-img::before{
		background: url("../img/service/service03-main.jpg") no-repeat;
		background-size: cover;
	}
	.service .menuCnt:nth-child(4) .menu-img::before{
		background: url("../img/service/service04-main.jpg") no-repeat;
		background-size: cover;
	}
	.service .menu-ttl{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		color: #fff;
		font-size: 2rem;
		letter-spacing: .1em;
		z-index: 2;
		width: 90%;
	}
	.service .menuCnt a{
		position: relative;
	}
	.service .menuCnt a::before{
		content: "";
		width: 100%;
		height: 100px;
		display: inline-block;
		background-color: rgba(0,0,0,.6);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}
	.service .menuCnt a:hover::before{
		background-color: rgba(0,0,0,.2);
	}
/*セミ共通*/
	.service .Box{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	.service .Box .Cnt{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.service .Box .Cnt:nth-child(2){
		width: 90%;
		margin: 0 auto;
	}
	.service .Box .ttl{
		font-size: 1.6em;
		margin: 10px 0;
		font-weight: 700;
	}
	.service .Box .Cnt .txt{
		text-align: justify;
		max-width: 100%;
		margin-bottom: 30px;
	}
	.service .Box .type{
		margin-bottom: 5px;
		text-align: right;
		width: 100%;
	}
	.service .Box .design01{
		width: 100%;
	}
	.service .sub-ttl{
		text-align: center;
		font-size: 1.6em;
	}
	
	.service .Area,.service .subArea{
		padding-top:60px;
	}
	.service .subArea{
		width: 100%;
		max-width: 100%;
		margin: 0 auto 40px;
	}
	.service .subArea .sub-ttl{
		margin-bottom: 20px;
	}
	.service .subArea p{
		 line-height: 1.8;
		width: 90%;
		margin: 0 auto 10px;
	}
	.service .note{
		font-size: 1.4rem;
		margin-top: 5px;
	}
/*------------------------------------------------------------
strength
------------------------------------------------------------*/
.strength .top-visual .ttl{
    width: 200px;
	height: 60px;
	overflow: hidden;
	display: inline-block;
}
.strength .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 200px;
	height: 60px;
	background: url("../img/svg/Strength.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
/*セミ共通*/
	.strength .Box{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	.strength .Box .Cnt{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.strength .Box .Cnt:nth-child(2){
		width: 90%;
		margin: 0 auto 40px;
	}
	.strength .Box .ttl{
		font-size: 1.6em;
		margin: 10px 0;
		font-weight: 700;
	}
	.strength .Box .Cnt .txt{
		text-align: justify;
		max-width: 100%;
		margin-bottom: 30px;
	}
	.strength .strengthNo{
		font-size: 4em;
		color: rgba(38,39,15,.3);
		line-height: 1;
		position: relative;
		margin-top: 20px;
		margin-bottom: 15px;
	}
	.strength .strengthNo::after{
		content: "";
		width: 59px;
		height: 25px;
		background: url(../img/svg/Strength02.svg) no-repeat;
		background-position: top;
		background-size: contain;
		position: absolute;
		bottom: -24px;
		left: 0;
	}
/*------------------------------------------------------------
works
------------------------------------------------------------*/	
.works .intro .ttl{
	font-size: 1.6em;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	position: absolute;
	top: -35px;
	left: 30%;
	}
	.works .introArea {
		margin-bottom: 0;
	}
.works .top-visual .ttl{
    width: 200px;
	height: 60px;
	overflow: hidden;
	display: inline-block;
}
.works .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 200px;
	height: 60px;
	background: url("../img/svg//Works.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
	.works .txt02{
		margin-top: 20px;
	}	
/*セミ共通*/
	.works .Box{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	.works .Box .Area{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.works .Box .Cnt{
		width: 90%;
		margin: 0 auto;
	}
	.works .Box .ttl{
		font-size: 1.6em;
		margin: 10px 0;
		font-weight: 700;
	}
	.works .Box .Cnt .txt{
		text-align: justify;
		max-width: 100%;
		margin-bottom: 30px;
	}
	.works .Box .type{
		margin-bottom: 5px;
		text-align: right;
		width: 100%;
	}
	.works .Box .design01{
		width: 100%;
	}
	.works .sub-ttl{
		text-align: center;
		font-size: 1.6em;
	}
	
	.works .Area,.service .subArea{
		padding-top:60px;
	}
	.works .subArea{
		width: 100%;
		max-width: 100%;
		margin: 30px auto 40px;
	}
	.works .subArea .sub-ttl{
		margin-bottom: 20px;
	}
	.works .subArea p{
		 line-height: 1.8;
		width: 90%;
		margin: 0 auto 10px;
	}
	.works .note{
		font-size: 1.4rem;
		margin-top: 5px;
	}
/*------------------------------------------------------------
about
------------------------------------------------------------*/
.about .top-visual .ttl{
    width: 200px;
	height: 60px;
	overflow: hidden;
	display: inline-block;
}
.about .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 200px;
	height: 60px;
	background: url("../img/svg/Voivce02.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
.about .Box{
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	.about .Box .Area{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column-reverse;
		justify-content: center;
		margin-bottom: 40px;
		align-items: center;
	}
	.about .Box .Cnt{
		width: 90%;
		margin: 0 auto;
	}
	.about .Box .ttl{
		font-size: 1.6em;
		margin: 10px 0;
		font-weight: 700;
	}
	.about .Box .name,.about .Box .name02{
	text-align: right;
	}
	.about .Box .Cnt .txt{
		text-align: justify;
		max-width: 100%;
		margin: 10px auto;
		    line-height: 1.78;
	}
/*------------------------------------------------------------
companyPage .recruitPage
------------------------------------------------------------*/
.companyPage .top-visual .top-image::before,.recruitPage .top-visual .top-image::before{
		width: 100%;
		height: 100%;
		content: "";
		display: inline-block;
		background: rgba(0,0,0,.2);
		position: absolute;
		top: 0;
		left: 0;
	}
.companyPage .top-visual .ttl,.recruitPage .top-visual .ttl{
    width: 200px;
	height: 60px;
	overflow: hidden;
	display: inline-block;
}
.companyPage .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 200px;
	height: 60px;
	background: url("../img/svg/Company.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
.recruitPage .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 200px;
	height: 60px;
	background: url("../img/svg/recruit.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
.companyPage .intro .ttl,.recruitPage .intro .ttl{
	position: absolute;
	left: 30%;		
	}
.company_sec{
	height: auto;
	margin: 0 0 120px;
	width: 100%;
}
.companyArea{
	width: 100%;
    height: auto;
    margin: 0 auto;
    background: rgba(255,255,255,.1);
    padding: 5%;
    font-size: 1.6rem;
    color: #000;
	max-width: 980px;
}
.companyArea ul li{
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
	}
	.companyArea ul li span:nth-child(1){
		width: 20%;
	}
	.companyArea ul li span:nth-child(2){
		width: 75%;
	}
.companyArea ul li{
	padding: 15px 0;
	border-bottom: 1px solid #000;
	    font-size: 1.4rem;
	font-family: '游ゴシック Medium', '游ゴシック体', 'Yu Gothic', YuGothic,"Noto Sans JP", 'ヒラギノ角ゴ ProN W3', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'メイリオ', meiryo, "ＭＳ Ｐゴシック", Verdana, sans-serif;
}
.data_ttl{
	display: inline-block;
	width: 20%;
	max-width: 200px;
	font-weight: 700;
}
	.mapArea{
		margin-bottom: 60px;
	}
	
/*------------------------------------------------------------
privacyArea
------------------------------------------------------------*/	
.privacyPage .top-visual .ttl{
    width: 200px;
	height: 60px;
	overflow: hidden;
	display: inline-block;
}
.privacyPage .top-visual .ttl::after{
	content: "";
	display: inline-block;
	width: 100%;
	max-width: 200px;
	height: 60px;
	background: url("../img/svg/Privacy.svg") no-repeat;
	background-position: top;
	background-size: contain;
	position: absolute;
	top: 0;
}
.privacy_sec{
	width: 90%;
	margin: 0 auto;
}
.privacyArea{
	margin-bottom: 20px;
}
.privacyArea h3{
	margin-bottom: 10px;
	font-weight: 700;
	font-size: 2rem;
}
}






/*========= 流れるテキスト ===============*/

/*全共通*/

.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}