@charset "utf-8";


/* common
-----------------------------------------------------*/
#main .contentOneBox {
	margin-top: 100px;
}
#main .contentOneBox.ptE {
	margin-top: 30px;
}

#main .topCommonBtn01 {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	max-width: 250px;
	font-size: 1.3rem;
	text-align: center;
	text-decoration: none;
	padding: 1em 0;
	border: 1px solid #000000;
	background: url("../img/common/common_mark03.png") 95% center no-repeat #fff;
}
#main .topCommonBtn01.single {
	padding: 1em;
}

#main .topCommonBtn01:hover {
	text-decoration: underline;
}

#main .topCommonBtn01 span{
	padding-right: 15px;
}

@media only screen and (max-width: 767px) {
	#main .topCommonBtn01 {
		max-width: none;
	}
}

/* topMainSlideBox
-----------------------------------------------------*/
#topMainSlideBox {
	height: 100%;
	position: relative;
}
#topMainSlideBox::before {
	content: "";
}
#topMainSlideBox.pt02::before {
	content: "";
	display: block;
	background: url("../img/top/top_main_slide_img01.png") center top 85% no-repeat;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 10%;
	width: 80%;
	height: 100%;
	z-index: 2;
}
#topMainSlideBox.pt03::before {
	content: "";
	display: block;
	background: url("../img/top/top_main_slide_img02.png") center center no-repeat;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 10%;
	width: 80%;
	height: 100%;
	z-index: 2;
}

#topMainSlideBox.pt03::after {
	content: "";
	display: block;
	background: url("../img/top/top_main_slide_img03.png") center center no-repeat;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 10%;
	width: 80%;
	height: 100%;
	z-index: 2;
}

#topMainSlideBox > .item01,
#topMainSlideBox > .item02,
#topMainSlideBox > .item03,
#topMainSlideBox > .item04{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;
	transition: 1.5s;
}
#topMainSlideBox > div.current {
	opacity: 1;
	transition: 3.0s;
}

#topMainSlideBox .topTxt{
    display: block;
	position: absolute;
	top: 50%;
	left: 10%;
	width: 80%;
     transform: translate(0%, -50%);
	z-index: 2;
    opacity: 1;
}

#topMainSlideBox .topTxtCont{
    position: relative;
}

#topMainSlideBox .set{
    display: block;
    position: absolute;
	margin: 0;
    padding: 0;
    bottom: 0;
	width: 100%;
}
#topMainSlideBox .caption01,
#topMainSlideBox .caption02{
    display: block;
    position: absolute;
	margin: 0;
    padding: 0;
    top: 0;
	width: 100%;
    opacity: 0;
    transition: 1.5s;
}

#topMainSlideBox .current {
	opacity: 1;
	transition: 3.0s;
}


#topMainSlideBox > div.item01 {
	background: url("../img/top/top_main_slide_bg01.jpg") center center no-repeat;
	background-size: cover;
}
#topMainSlideBox > div.item02 {
	background: url("../img/top/top_main_slide_bg02.jpg") center center no-repeat;
	background-size: cover;
}
#topMainSlideBox > div.item03 {
	background: url("../img/top/top_main_slide_bg03.jpg") center center no-repeat;
	background-size: cover;
}
#topMainSlideBox > div.item04 {
	background: url("../img/top/top_main_slide_bg04.jpg") center center no-repeat;
	background-size: cover;
}

/* sp */
#topMainSlideBoxSP {
	display: none;
}

@media only screen and (max-width: 1000px) {
	#topMainSlideBoxSP {
		display: block;
		height: 450px;
		position: relative;
	}
	#topMainSlideBoxSP::before {
		content: "";
		display: block;
		background: url("../img/top/top_main_slide_img01_sp.png") center center no-repeat;
		background-size: 100% auto;
		position: absolute;
		transform: translate(-50%, 0);
		top: 0;
		left: 50%;
		max-width: 338px;
		width: 40%;
		height: 100%;
		z-index: 20;
	}
	#topMainSlideBoxSP > div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		opacity: 0;
		-webkit-animation: anime 24s 0s infinite;
		animation: anime 24s 0s infinite;
	}
	#topMainSlideBoxSP > div.item01 {
		background: url("../img/top/top_main_slide_bg01.jpg") center center no-repeat;
		background-size: cover;
	}
	#topMainSlideBoxSP > div.item02 {
		background: url("../img/top/top_main_slide_bg02.jpg") center center no-repeat;
		background-size: cover;
		-webkit-animation-delay: 6s;
		animation-delay: 6s;
	}
	#topMainSlideBoxSP > div.item03 {
		background: url("../img/top/top_main_slide_bg03.jpg") center bottom no-repeat;
		background-size: cover;
		-webkit-animation-delay: 12s;
		animation-delay: 12s;
	}
	#topMainSlideBoxSP > div.item04 {
		background: url("../img/top/top_main_slide_bg04.jpg") center center no-repeat;
		background-size: cover;
		-webkit-animation-delay: 18s;
		animation-delay: 18s;
	}
}

@media only screen and (max-width: 767px) {
	#topMainSlideBoxSP {
		display: block;
		height: 400px;
		position: relative;
	}
	#topMainSlideBoxSP::before {
		content: "";
		display: block;
		background: url("../img/top/top_main_slide_img01_sp.png") center center no-repeat;
		background-size: 100% auto;
		position: absolute;
		transform: translate(-50%, 0);
		top: 0;
		left: 50%;
		width: 60%;
		height: 100%;
		z-index: 20;
	}
	#topMainSlideBoxSP > div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 10;
		opacity: 0;
		-webkit-animation: anime 24s 0s infinite;
		animation: anime 24s 0s infinite;
	}
	#topMainSlideBoxSP > div.item01 {
		background: url("../img/top/top_main_slide_bg01.jpg") center center no-repeat;
		background-size: cover;
	}
	#topMainSlideBoxSP > div.item02 {
		background: url("../img/top/top_main_slide_bg02.jpg") center center no-repeat;
		background-size: cover;
		-webkit-animation-delay: 6s;
		animation-delay: 6s;
	}
	#topMainSlideBoxSP > div.item03 {
		background: url("../img/top/top_main_slide_bg03.jpg") center bottom no-repeat;
		background-size: cover;
		-webkit-animation-delay: 12s;
		animation-delay: 12s;
	}
	#topMainSlideBoxSP > div.item04 {
		background: url("../img/top/top_main_slide_bg04.jpg") center center no-repeat;
		background-size: cover;
		-webkit-animation-delay: 18s;
		animation-delay: 18s;
	}
}
@keyframes anime {
	0% { opacity: 0; }
	8% { opacity: 1;}
	17% { opacity: 1; }
	70% {
		opacity: 0;
		z-index:9;
	}
	100% { opacity: 0 }
}


/* topAboutBox
-----------------------------------------------------*/
#topAboutBox {
	clear: both;
}

#topAboutBox .txt01 {
	font-size: 1.4rem;
	line-height: 2.35;
	margin: 0;
}
#topAboutBox .mobiusBox {
	margin: 80px 0 0 0;	
	text-align: center;
}
#topAboutBox .mobiusBox .inblock{
	display: inline-block;
	position: relative;
}

@media only screen and (max-width: 767px) {
	#topAboutBox .mobiusBox {
		margin-top: 40px;
	}
}
#topAboutBox .mobiusBox figure {
	margin: 0;
}
#topAboutBox .mobiusBox figure figcaption {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	left: 50%;
	display: flex;
	padding: 0 0 0 5%;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#topAboutBox .mobiusBox figure figcaption a {
	font-size: 1.3rem;
}
#topAboutBox .mobiusBox figure figcaption a::after {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 8px;
	height: 12px;
	background: url("../img/common/common_mark03.png") 0 0 no-repeat;
	background-size: contain;
	margin: 0 0 0 5px;
}

/* topStrengthBox
-----------------------------------------------------*/
#topStrengthBox {
	clear: both;
	padding: 20px 0 0 0;
	background: url("../img/common/common_logo01.png") right top no-repeat;
	background-size: 58% auto;
}
#topStrengthBox .txt01 {
	font-size: 1.4rem;
	line-height: 2.35;
	margin: 0;
}
#topStrengthBox .box01 {
	border: 1px solid #000000;
}
#topStrengthBox .inBox01 {
	padding: 20px 40px;
}
#topStrengthBox .inBox01 + .inBox01 {
	border-top: 1px solid #000000;
}
#topStrengthBox .box01 {
	margin: 80px 0 0 0;
}
@media only screen and (max-width: 767px) {
	#topStrengthBox .inBox01 {
		padding: 20px;
		text-align: center;
	}
	
	#topStrengthBox .box01 {
		margin-top: 40px;
	}
}
#topStrengthBox .box01 h3 {
	font-size: 1.4rem;
	font-weight: bold;
	margin: 0;
	position: relative;
	text-align: center;
}
#topStrengthBox .box01 h3.ttl01::before ,
#topStrengthBox .box01 h3.ttl02::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 50px;
	margin: 0 10px 0 0;
}
#topStrengthBox .box01 h3.ttl01::before {
	height: 44px;
	background: url("../img/top/top_strength_img01.png") 0 0 no-repeat;
	background-size: contain;
}
#topStrengthBox .box01 h3.ttl02::before {
	height: 56px;
	background: url("../img/top/top_strength_img08.png") 0 0 no-repeat;
	background-size: contain;
}
#topStrengthBox .box01 .list01 {
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}
@media only screen and (max-width: 767px) {
	#topStrengthBox .box01 .list01 {
		display: block;
	}
	
	#topStrengthBox .box01 h3 {
		font-size: 1.4rem;
		margin: 0;
		display: inline-block;
		font-weight: bold;
		position: relative;
		text-align: left;
		line-height: 140%;
		left: 0;
		padding-left: 10px;
	}
	
	#topStrengthBox .box01 h3.ttl01::before ,
	#topStrengthBox .box01 h3.ttl02::before {
		content: "";
		display: block;
		position: absolute;
		left: -34px;
		top: 0;
		vertical-align: middle;
		width: 34px;
		margin: 0;
	}
	#topStrengthBox .box01 h3.ttl01::before {
		height: auto;
		min-height: 34px;
		background: url("../img/top/top_strength_img01.png") 0 0.2em no-repeat;
		background-size: 34px 30px;
	}
	#topStrengthBox .box01 h3.ttl02::before {
		height: auto;
		min-height: 38px;
		background: url("../img/top/top_strength_img08.png") 0 0 no-repeat;
		background-size: 34px 38px;
	}
	
	#topStrengthBox .box01 h3.ttl01 .view_sp,
	#topStrengthBox .box01 h3.ttl02 .view_sp{
		display: inline-block;
	}
}
#topStrengthBox .box01 .list01 > li {
	text-align: left;
	margin: 15px 15px 0;
	padding: 0;
	list-style-type: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
	#topStrengthBox .box01 .list01 > li {
		width: auto;
	}
}
#topStrengthBox .box01 .list01 > li > a {
	display: table;
	width: 100%;
	height: 36px;
	font-size: 1.3rem;
	line-height: 1.07;
	text-decoration: none;
	padding: 0 0 0 40px;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#topStrengthBox .box01 .list01 > li.item01 a ,
#topStrengthBox .box01 .list01 > li.item04 a {
	width: 120px;
}
#topStrengthBox .box01 .list01 > li.item02 a ,
#topStrengthBox .box01 .list01 > li.item05 a {
	width: 160px;
}
#topStrengthBox .box01 .list01 > li.item03 a ,
#topStrengthBox .box01 .list01 > li.item06 a {
	width: 160px;
}
@media only screen and (max-width: 767px) {
	#topStrengthBox .box01 .list01 > li > a {
		width: auto;
		max-width: none!important;
	}
	#topStrengthBox .box01 .list01 > li.item01 a ,
	#topStrengthBox .box01 .list01 > li.item04 a {
		width: 100%;
	}
	#topStrengthBox .box01 .list01 > li.item02 a ,
	#topStrengthBox .box01 .list01 > li.item05 a {
		width: 100%;
	}
	#topStrengthBox .box01 .list01 > li.item03 a ,
	#topStrengthBox .box01 .list01 > li.item06 a {
		width: 100%;
	}
}
#topStrengthBox .box01 .list01 > li > a:hover {
	text-decoration: underline;
}
#topStrengthBox .box01 .list01 > li > a > span {
	display: table-cell;
	padding-left: 5px;
	vertical-align: middle;
}
#topStrengthBox .box01 .list01 > li > a::after {
	content: "";
	display: table-cell;
	width: 20px;
	background: url("../img/common/common_mark03.png") right center no-repeat;
}
#topStrengthBox .box01 .list01 > li.item01 > a {
	background: url("../img/top/top_strength_img02.png") 0 center no-repeat;
}
#topStrengthBox .box01 .list01 > li.item02 > a {
	background: url("../img/top/top_strength_img03.png") 0 center no-repeat;
}
#topStrengthBox .box01 .list01 > li.item03 > a {
	background: url("../img/top/top_strength_img04.png") 0 center no-repeat;
}
#topStrengthBox .box01 .list01 > li.item04 > a {
	background: url("../img/top/top_strength_img05.png") 0 center no-repeat;
}
#topStrengthBox .box01 .list01 > li.item05 > a {
	background: url("../img/top/top_strength_img06.png") 0 center no-repeat;
}
#topStrengthBox .box01 .list01 > li.item06 > a {
	background: url("../img/top/top_strength_img07.png") 0 center no-repeat;
}
#topStrengthBox .box01 .list02 {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}
@media only screen and (max-width: 767px) {
	#topStrengthBox .box01 .list02 {
		display: block;
	}
}
#topStrengthBox .box01 .list02 > li {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin: 15px 15px 0;
	padding: 0;
	list-style-type: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
@media only screen and (max-width: 767px) {
	#topStrengthBox .box01 .list02 > li {
		width: 100%;
		display: block;
	}
}
#topStrengthBox .box01 .list02 > li.item01 {
	justify-content: flex-start;
}
#topStrengthBox .box01 .list02 > li.item03 {
	padding-right: 0;
}
#topStrengthBox .box01 .list02 > li > a {
	display: table;
	font-size: 1.3rem;
	line-height: 1.07;
	text-decoration: none;
	position: relative;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
#topStrengthBox .box01 .list02 > li > a:hover {
	text-decoration: underline;
}
#topStrengthBox .box01 .list02 > li > a > span {
	display: table-cell;
	text-align: right;
	vertical-align: middle;
}
#topStrengthBox .box01 .list02 > li > a::after {
	content: "";
	display: table-cell;
	width: 20px;
	background: url("../img/common/common_mark03.png") right center no-repeat;
}

@media only screen and (max-width: 767px) {
	#topStrengthBox .box01 .list02 > li > a {
		display: table;
		width: 100%;
		padding-right: 30px;
	}
	#topStrengthBox .box01 .list02 > li > a > span {
		text-align: left;
	}
}
/* topProductBox
-----------------------------------------------------*/
#topProductBox {
	clear: both;
	padding: 20px 0 0 0;
	background: url("../img/common/common_logo01.png") right top no-repeat;
	background-size: 58% auto;
}
#topProductBox .txt01 {
	font-size: 1.4rem;
	line-height: 2.35;	
}
#topProductBox .btn01 {
	margin: 40px 0 0 0;
}
#topProductBox .btn01Cover{
	display: flex;
	justify-content: center;
}
#topProductBox .img01Box {
	margin: 60px 0 0 0;
	text-align: center;
}
#topProductBox .btn02 {
	margin: 40px 0 0 0;
}
#topProductBox .btn02 span {
	display: block;
	text-align: center;
}
#topProductBox .btn02 a {
	display: block;
	max-width: 250px;
	margin: 0 auto;
	font-size: 1.3rem;
	text-align: center;
	text-decoration: none;
	padding: 1em 0;
	border: 1px solid #000000;
	background: url("../img/common/common_icon_site.png") 95% center no-repeat;
}
#topProductBox .btn02 a:hover {
	text-decoration: underline;
}

/* topCompanyBox
-----------------------------------------------------*/
#topCompanyBox {
	clear: both;
	padding: 20px 0 0 0;
	background: url("../img/common/common_logo01.png") right top no-repeat;
	background-size: 58% auto;
}
#topCompanyBox .txt01 {
	font-size: 1.4rem;
	line-height: 2.35;
	margin-bottom: 15px;
}
#topCompanyBox .list01 {
	margin: -20px 0 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
#topCompanyBox .list01 > a {
	margin: 20px 20px 0 0;
	list-style-type: none;
	width: 48%;
}
@media only screen and (max-width: 767px) {
	#topCompanyBox .list01 {
		display: block;
	}
	#topCompanyBox .list01 > a {
		width: auto;
	}
}



/* topRecruitBox
-----------------------------------------------------*/
#topRecruitBox {
	clear: both;
}
#topRecruitBox .btn01 {
	margin: 40px 0 0 0;
}
#topRecruitBox .btn01 .topCommonBtn01 {
	margin: 0;
}



/* topAboutBox pattern
-----------------------------------------------------*/
#topAboutBox.pt01{
	padding-bottom: 120px;
	background:url("../img/top/bg_first02.png") no-repeat left bottom;
	background-size: 90% auto;
}

#topAboutBox.pt01 .innerBox02{
	background:url("../img/top/bg_first01.png") no-repeat right top;
}

#topAboutBox.pt02{
	padding-bottom: 140px;
	padding-bottom: 140px;
	background:url("../img/top/bg_first03.png") no-repeat left bottom;
	background-size: 90% auto;
}

#topAboutBox.pt02 .innerBox02{	
	background:url("../img/top/bg_first01.png") no-repeat right top;
	
}

#topAboutBox.pt03{
	background:url("../img/top/bg_first04.png") no-repeat right top;
}

#topAboutBox.pt04{
	padding: 20px 0 100px;
}

#topAboutBox.pt04 .mobiusBox{
	padding-bottom: 40px;
}

#topAboutBox.pt05{
	background:url("../img/top/bg_first06.png") repeat left top;
	margin: 0;
	padding: 60px 0 100px;
}

#topAboutBox.pt05-2{
	background: url("../img/top/bg_first07-2.png") no-repeat center bottom;
	padding-bottom: 40px;
	background-size: contain;
}

#topAboutBox.pt06{
	margin: 0;
	padding: 60px 0 100px;
}

#topAboutBox.pt05 .mobiusBox,
#topAboutBox.pt06 .mobiusBox{
	background: url("../img/top/bg_first07.png") no-repeat center bottom;
	background-size: cover;
	padding-bottom: 40px;
}

#topAboutBox.pt01 .mobiusBox,
#topAboutBox.pt02 .mobiusBox{
	margin-top: 50px;
}

#topAboutBox.pt04 .mobiusBox{
	margin-top: 40px;
}

#topAboutBox.pt04{
	overflow: hidden;
}

#topAboutBox.pt04 .innerBox02{
	
}

#topAboutBox.pt04 .innerBox02 figure{
	position: relative;
}

#topAboutBox.pt04 .innerBox02 .pen{
	position: absolute;
	right: -40%;
	bottom: -40%;
	width: 40%;
	top: inherit!important;
}

@media only screen and (max-width: 767px) {
	#topAboutBox.pt01{
		padding-bottom: 50px;
		background:url("../img/top/bg_first02.png") no-repeat left bottom;
		background-size: 90% auto;
	}
	#topAboutBox.pt02{
		padding-bottom: 50px;
		background:url("../img/top/bg_first03.png") no-repeat left bottom;
		background-size: 90% auto;
	}
	#topAboutBox.pt03{
		background:url("../img/top/bg_first04.png") no-repeat right top;
		background-size: auto 100%;
	}
}


#topAboutBox.pt06{
	position: relative;
}

#topAboutBox .fss{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background:url("../img/top/bg_first06.png") repeat left top;
	margin: 0;;
	z-index: 2;
}
.fadeIn06{
	position: relative;
	transition: 1.5s;
	transform: scaleY(0);
	transform-origin:left top;
}
.inScroll{
	transform: scaleY(1);
}


#topAboutBox.pt06 .innerBox,
#topAboutBox.pt06 .mobiusBox{
	position: relative;
	z-index: 100;
}