@charset "UTF-8";

/*--------------------------------------------------------------------
 *	共通の記述
 *--------------------------------------------------------------------*/

body.home article section h1 {
	text-align: center;
}
body.home article section h1 span {
	display: inline-block;
	background: linear-gradient(to right, #7b59a3, #cf5fe0);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #cf5fe0;
}
body.home article section h1 span.trans {
	background: none;
	display: block;
}
body.home article section .btn_details {
	margin: 2em auto;
	text-align: center;
	font-weight: bold;
}
body.home article section .btn_details a {
	position: relative;
	display: block;
	margin: 0 auto;
	border-style: solid;
	border-image: linear-gradient(to right, #7b59a3 0%, #cf5fe0 100%);
	border-image-slice: 1;
	text-decoration: none;
}
body.home article section .btn_details a span {
	background: linear-gradient(to right, #7b59a3, #cf5fe0);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #cf5fe0;
}

/*------------------------------------------ スクロールでフェード */

body.home article .effect-fade {
	opacity : 0;
	transform : translate(0, 45px);
	transition : all 300ms;
}

body.home article .effect-fade.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}



/*------------------------------------------ section_client */

body.home article #section_client {
	position: relative;
	padding: 0;
	background-color: #f2eefa;
}
body.home article #section_client p.catch_visual {
	margin: 0;
	overflow: hidden;
}
body.home article #section_client div.catch_phrase {
	position: absolute;
}
body.home article #section_client div.catch_phrase h1 {
	margin: 0;
	font-family: 'Arial';
	font-weight: bold;
	text-align: left;
	filter: drop-shadow(0px 0px 1px rgba(255,255,255,0.6));
}
body.home article #section_client div.catch_phrase p {
	margin: 0.5em 0;
	background: linear-gradient(to right, #7b59a3, #cf5fe0);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	filter: drop-shadow(0px 0px 1px rgba(255,255,255,0.6));
	color: #cf5fe0;
}
body.home article #section_client #btn_scroll {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 20;
}

/*------------------------------------------ biz_cont */

body.home article .biz_cont {
	position: relative;
}

/*------------------------------------------ section_web */

body.home article #section_web {
}
body.home article #section_web p.icon_img {
	position: relative;
	z-index: 10;
}
body.home article #section_web p.icon_img::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #f7eeff;
	z-index: -1;
	box-shadow:0px 0px 13px 0px rgba(0,0,0, 0.2);
}

/*------------------------------------------ section_software */

body.home article #section_software {
	transform-origin: top right;
	padding: 0;
	background-color: #f7f7fd;
}
body.home article #section_software p.icon_img {
	position: relative;
	z-index: 10;
}
body.home article #section_software p.icon_img::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #fff;
	z-index: -1;
	box-shadow:0px 0px 13px 0px rgba(0,0,0, 0.2);
}

/*------------------------------------------ section_production */

body.home article #section_production p.icon_img {
	position: relative;
	z-index: 10;
}
body.home article #section_production p.icon_img::before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #efe8ff;
	z-index: -1;
	box-shadow:0px 0px 13px 0px rgba(0,0,0, 0.2);
}


/*------------------------------------------ achievements */

body.home article #section_achievements {
	background-color: #9a55bb;
}
body.home article #section_achievements h1 span {
	background: none;
	background-clip: text;
	-webkit-background-clip: border-box;
	-webkit-text-fill-color: #fff;
	color: #fff;
}
body.home article #section_achievements .carousel {
	overflow: hidden;
}
body.home article #section_achievements .flipster__button {
	margin-right: 0;
	margin-left: 0;
}
body.home article #section_achievements .flipster__button svg {
	stroke-width: 1;
	color: #fff;
	filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.6));
}
body.home article #section_achievements ul li {
	width: 39%;
}

body.home article #section_achievements .btn_details a {
	border-color: #fff;
	color: #fff;
	border-image: linear-gradient(to right, #fff 0%, #fff 100%);
	border-image-slice: 1;
}
body.home article #section_achievements .btn_details a span {
	background: none;
	background-clip: text;
	-webkit-background-clip: border-box;
	-webkit-text-fill-color: #fff;
	color: #fff;
}

/*------------------------------------------ news */

body.home article #section_news dl dt {
	margin: 0;
	color: #7b59a3;
}
body.home article #section_news dl dt::after {
	margin-left: 1em;
	padding: 0 1em;
	color: #fff;
}
body.home article #section_news dl dt.update::after {
	content: '更新情報';
	background-color: #dc8426;
}
body.home article #section_news dl dt.announce::after {
	content: 'お知らせ';
	background-color: #3c87be;
}
body.home article #section_news dl dd {
	margin: 0;
	border-bottom: 1px solid #969696;
}
body.home article #section_news dl dd a {
	text-decoration: none;
	color: #505050;
}

/*------------------------------------------ activities */

body.home article #section_activities {
	background-color: #f5f5f5;
}
body.home article #section_activities ul {
	list-style-type: none;
	margin: 0;
}
body.home article #section_activities ul li {
	margin: 0 0 24px;
	box-sizing: border-box;
	box-shadow:0px 0px 13px 0px #dcdcdc;
	background-color: #fff;
	line-height: 1.3;
}
body.home article #section_activities ul li a {
	display: block;
	text-decoration: none;
	color: #000;
}
body.home article #section_activities ul li .tmb_img {
	margin: 0;
}
body.home article #section_activities ul li h2 {
	margin: 0;
	padding: 1em 4.7%;
	font-size: 1.4rem;
	font-weight: bold;
}
body.home article #section_activities ul li h2 span {
	font-size: 1.2rem;
	font-weight: normal;
}

/*------------------------------------------ others */

body.home article #section_others h1 {
	margin: 54px 0 0.5em;
}
body.home article #section_others h1 span {
	background: none;
	background-clip: text;
	-webkit-background-clip: border-box;
	-webkit-text-fill-color: #fff;
	color: #fff;
}
body.home article #section_others #area_recruit {
	padding: 1px 0;
	background: transparent url('../img/top_recruit_bg.jpg') no-repeat left top;
	background-size: cover;
}
body.home article #section_others #area_contact {
	padding: 1px 0;
	background: transparent url('../img/top_contact_bg.jpg') no-repeat left top;
	background-size: cover;
}
body.home article #section_others .btn_details {
	margin-top: 1.2em;
	margin-bottom: 2.4em;
}
body.home article #section_others .btn_details a {
	border-color: #fff;
	color: #fff;
	border-image: linear-gradient(to right, #fff 0%, #fff 100%);
	border-image-slice: 1;
}
body.home article #section_others .btn_details a span {
	background: none;
	background-clip: text;
	-webkit-background-clip: border-box;
	-webkit-text-fill-color: #fff;
	color: #fff;
}

/*--------------------------------------------------------------------
 *	736px以下用（SP用）の記述
 *--------------------------------------------------------------------*/

@media screen and (max-width: 736px) {
/* 736px以下用（SP用）の記述 */

body.home article section {
	padding-top: 60px;
	padding-bottom: 60px;
}
body.home article section h1 {
	margin: 0 auto 1.0em;
	font-size: 3.3rem;
	line-height: 1.2;
}
body.home article section h1 span.trans {
	font-size: 1.4rem;
}
body.home article section .btn_details {
	font-size: 1.3rem;
}
body.home article section .btn_details a {
	max-width: 202px;
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	border-width: 1px;
}

/*------------------------------------------ section_client */

body.home article #section_client div.catch_phrase {
	bottom: 20.6%;
	left: 0;
	margin: 0 8%;
}
body.home article #section_client div.catch_phrase h1 {
	font-size: 4.5rem;
}
body.home article #section_client #btn_scroll {
	bottom: -25px;
	width: 50px;
}



/*------------------------------------------ section_web */

body.home article #section_web {
	padding-top: 90px;
	padding-bottom: 30px;
	background: transparent url('../img/top_web_bg.jpg') no-repeat left 90px;
	background-size: 100% auto;
}
body.home article #section_web .wrap {
}
body.home article #section_web p {
	text-align: center;
}
body.home article #section_web p.icon_img img {
	width: auto;
	height: 140px;
}
body.home article #section_web p.icon_img::before {
	width: 140px;
	height: 140px;
}


/*------------------------------------------ section_software */

body.home article #section_software {
	margin-bottom: 10%;
	padding: 4% 0;
	transform: skewy(-4deg);
	background: transparent url('../img/top_software_bg.jpg') no-repeat left top;
	background-size: cover;
}
body.home article #section_software .wrap {
	margin-top: 30px;
	margin-bottom: 30px;
	transform: skewy(4deg);
}
body.home article #section_software p {
	text-align: center;
}
body.home article #section_software p.icon_img img {
	width: auto;
	height: 140px;
}
body.home article #section_software p.icon_img::before {
	width: 140px;
	height: 140px;
}

/*------------------------------------------ section_production */

body.home article #section_production {
	padding-top: 10px;
	padding-bottom: 30px;
	background: transparent url('../img/top_production_bg.jpg') no-repeat left top;
	background-size: 100% auto;
}
body.home article #section_production p {
	text-align: center;
}
body.home article #section_production p.icon_img img {
	width: auto;
	height: 140px;
}
body.home article #section_production p.icon_img::before {
	width: 140px;
	height: 140px;
}


/*------------------------------------------ achievements */

body.home article #section_achievements {
	background: transparent url('../img/top_achievements_bg.gif') no-repeat left top;
	background-size: cover;
}
body.home article #section_achievements .carousel {
	margin-bottom: 70px;
}

/*------------------------------------------ news */

body.home article #section_news dl {
	margin-bottom: 35px;
}
body.home article #section_news dl dt {
	margin-bottom: 5px;
}
body.home article #section_news dl dd {
	margin-bottom: 1em;
	padding-bottom: 1em;
}


/*------------------------------------------ activities */

body.home article #section_activities .wrap {
	padding-right: 8%;
	padding-left: 8%;
}

/*------------------------------------------ others */

body.home article #section_others {
	padding-bottom: 0;
}
body.home article #section_others .wrap {
	padding-right: 8%;
	padding-left: 8%;
}
body.home article #section_others h1 {
	font-size: 3.0rem;
}
body.home article #section_others h1 span.trans {
	font-size: 1.18rem;
}
body.home article #section_others #area_recruit {
	margin-bottom: 24px;
}
body.home article #section_others .btn_details {
	font-size: 1.18rem;
}


/* 736px以下用（SP用）の記述 end */
}


/*--------------------------------------------------------------------
 *	737px以上用（PC用）の記述
 *--------------------------------------------------------------------*/
@media screen and (min-width: 737px), print {
/* 737px以上用（PC用）の記述 */

body.home article {
	z-index: 2;
}
body.home article section {
	margin: 0 ;
}
body.home article section .wrap {
}

body.home article section h1 {
	margin-top: 1.8em;
	font-size: 5.0rem;
	line-height: 1.1;
}
body.home article section h1 span.trans {
	font-size: 1.6rem;
}
body.home article section .btn_details {
	font-size: 1.6rem;
}
body.home article section .btn_details a {
	max-width: 316px;
	padding-top: 0.7em;
	padding-bottom: 0.7em;
	border-width: 2px;
}
body.home article section .btn_details a:hover {
	background: linear-gradient(to right, #7b59a3, #cf5fe0);
	color: #fff;
}
body.home article section .btn_details a:hover span {
	background: none;
	background-clip: text;
	-webkit-background-clip: border-box;
	-webkit-text-fill-color: #fff;
	color: #fff;
}


/*------------------------------------------ section_client */

body.home article #section_client {
	width: 100%;
}

body.home article #section_client p.catch_visual {
	position: relative;
	padding-top: 686px;
}
body.home article #section_client p.catch_visual img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 2000px;
	max-height: 100%;
}
body.home article #section_client div.catch_phrase {
	top: 17.4%;
	right: 50%;
	margin: 0;
	-webkit-transform: translate(40%, 0%);
	-ms-transform: translate(40%, 0%);
	transform: translate(40%, 0%);
	width: 100%;
	max-width: 1000px;
}
body.home article #section_client div.catch_phrase h1 {
	font-size: 8.0rem;
	text-align: right;
}
body.home article #section_client div.catch_phrase p {
	font-size: 2.0rem;
	text-align: right;
}
body.home article #section_client #btn_scroll {
	bottom: -39px;
	width: 78px;
	cursor: pointer;
}
.mask {
	position: absolute;
	top: 0; 
	left: 0; 
	width: 100%;
	height: 1900px;
}

/*------------------------------------------ section_web */

body.home article #section_web {
	padding-top: 190px;
	padding-bottom: 380px;
	background: transparent url('../img/top_web_bg_pc.jpg') no-repeat right center;
	background-size: 888px auto;
}
body.home article #section_web p.icon_img {
	float: left;
	width: auto;
	margin: 0 5% 0 0;
	z-index: 100;
}
body.home article #section_web p.icon_img img {
	width: auto;
	height: 280px;
}
body.home article #section_web p.icon_img::before {
	width: 280px;
	height: 280px;
}
body.home article #section_web .exp_text {
	margin-left: 40.5%;
}
body.home article #section_web .exp_text h1 {
	text-align: left;
	margin-top: 0;
	margin-bottom: 0;
}
body.home article #section_web .exp_text .btn_details a {
	margin: 0;
	transition: all 0.3s;
}


/*------------------------------------------ section_software */

body.home article #section_software {
	position: relative;
	margin-top: -280px;
	padding-top: 300px;
	padding-bottom: 260px;
	background: transparent url('../img/top_software_bg_pc.png') no-repeat left top;
	background-size: 2000px auto;
	z-index: 1;
}
body.home article #section_software .wrap {
	z-index: 2;
}
body.home article #section_software p.icon_img {
	float: right;
	width: auto;
	margin: 0 7% 0 0;
	z-index: 100;
}
body.home article #section_software p.icon_img img {
	width: auto;
	height: 280px;
}
body.home article #section_software p.icon_img::before {
	width: 280px;
	height: 280px;
}
body.home article #section_software .exp_text {
	margin-left: 17.3%;
	margin-right: 40%;
}
body.home article #section_software .exp_text h1 {
	text-align: left;
	margin-top: 0;
	margin-bottom: 0;
}
body.home article #section_software .exp_text .btn_details a {
	margin: 0;
	transition: all 0.3s;
}
body.home article #section_software .line1 {
	position: absolute;
	top: 370px;
	right: 50%;
	content: '';
	width: 800px;
	height: 1px;
	background-color: #7b59a3;
	transform:  translate(28%, 0%) rotate(45deg);
	-webkit-transform: translate(28%, 0%) rotate(45deg);
	transform-origin: 100% 100%;
	z-index: 1;
}
body.home article #section_software .line2 {
	position: absolute;
	top: 500px;
	right: 50%;
	content: '';
	width: 700px;
	height: 1px;
	background-color: #7b59a3;
	transform:  translate(30%, 0%) rotate(-45deg);
	-webkit-transform: translate(30%, 0%) rotate(-45deg);
	transform-origin: 100% 0;
	z-index: 1;
}

/*------------------------------------------ section_production */

body.home article #section_production {
	margin-top: -260px;
	padding-top: 300px;
	padding-bottom: 170px;
	background: transparent url('../img/top_production_bg_pc.jpg') no-repeat right bottom;
	background-size: 906px auto;
}
body.home article #section_production p.icon_img {
	float: left;
	width: auto;
	z-index: 100;
}
body.home article #section_production p.icon_img img {
	width: auto;
	height: 280px;
}
body.home article #section_production p.icon_img::before {
	width: 280px;
	height: 280px;
}
body.home article #section_production .exp_text {
	margin-left: 40.5%;
}
body.home article #section_production .exp_text h1 {
	text-align: left;
	margin-top: 0;
	margin-bottom: 0;
}
body.home article #section_production .exp_text .btn_details a {
	margin: 0;
	transition: all 0.3s;
}

/*------------------------------------------ achievements */

body.home article #section_achievements {
	position: relative;
	margin-top: 0;
	padding-bottom: 90px;
	background: transparent url('../img/top_achievements_bg_pc.gif') no-repeat center top;
	background-size: cover;
	z-index: 10;
}
body.home article #section_achievements .carousel {
	margin-bottom: 70px;
}
body.home article #section_achievements .btn_details a {
	transition: all 0.3s;
}
body.home article #section_achievements .btn_details a:hover {
	background: none;
	background-color: #fff;
}
body.home article #section_achievements .btn_details a:hover span {
	background: linear-gradient(to right, #7b59a3, #cf5fe0);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #cf5fe0;
}

/*------------------------------------------ news */

body.home article #section_news {
	padding-bottom: 90px;
}
body.home article #section_news dl dt {
	float: left;
	width: 14em;
	font-weight: bold;
}
body.home article #section_news dl dt:after {
	font-weight: normal;
}
body.home article #section_news dl dd {
	margin-bottom: 2em;
	padding-bottom: 2em;
	padding-left: 14em;
}


/*------------------------------------------ activities */

body.home article #section_activities {
	padding-bottom: 80px;
}
body.home article #section_activities ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
body.home article #section_activities ul li {
	width: 32%;
	margin-right: 2%;
}
body.home article #section_activities ul li:last-child {
	margin-right: 0;
}

body.home article #section_activities ul li .tmb_img {
	overflow: hidden;
}
body.home article #section_activities ul li .tmb_img img {
	-moz-transition: -moz-transform 0.3s linear;
	-webkit-transition: -webkit-transform 0.3s linear;
	-o-transition: -o-transform 0.3s linear;
	-ms-transition: -ms-transform 0.3s linear;
	transition: transform 0.3s linear;
}
body.home article #section_activities ul li a:hover .tmb_img img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

/*------------------------------------------ others */

body.home article #section_others {
	padding-top: 90px;
}
body.home article #section_others div.wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
body.home article #section_others h1 {
	margin-top: 80px;
}
body.home article #section_others #area_recruit {
	width: 49%;
	margin-right: 2%;
}
body.home article #section_others #area_contact {
	width: 49%;
}
body.home article #section_others .btn_details {
	margin-bottom: 4em;
	font-size: 1.4rem;
}
body.home article #section_others .btn_details a {
	padding-top: 1em;
	padding-bottom: 1em;
	transition: all 0.3s;
}
body.home article #section_others .btn_details a:hover {
	background: none;
	background-color: #fff;
}
body.home article #section_others .btn_details a:hover span {
	background: linear-gradient(to right, #7b59a3, #cf5fe0);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #cf5fe0;
}

/* 737px以上用（PC用）の記述 end */
}

/*--------------------------------------------------------------------
 *	IE（IE8～11）の記述
 *--------------------------------------------------------------------*/
@media screen\0 {
/* IE（IE8～11）の記述 */
body.home article section h1 span,
body.home article section .btn_details a span,
body.home article #section_client div.catch_phrase p,
body.home article #section_achievements .btn_details a:hover span,
body.home article #section_others .btn_details a:hover span {
	background: none;
}

/* IE（IE8～11）の記述 end */
}



/*--------------------------------------------------------------------
 *	印刷用（PC表示）の記述
 *--------------------------------------------------------------------*/
@media print {
/* 印刷用（PC表示）の記述 */


/* 印刷用（PC表示）の記述 end */
}


/*------------------------------------------ clear */
body.home article #section_news dl {
	zoom: 100%;
}

body.home article #section_news dl:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}