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


#business .box-link h3, #business .contents01 h2, #business .lay-jobdetail .box-job::after, #business .lay-jobdetail .box-comment .box-detail h6, #business .lay-jobdetail2 .box-comment .box-detail h6, #business .box-title_schedule h4, #business .box-schedule h5, #business .box-schedule h6 {
     font-family: var(--title-font);
    font-weight: var(--base-font-weight2);
}

/* title-top */


#business .title-page .box-inner {
    background-image: url("../../img/business/img-title.svg");
    background-position: right top -20px;
}

#business .title-page .box-text::before {
	background-image: url("../../img/business/text-title.svg");
}


/* box-link */

#business .box-link {
	display: flex;
  justify-content: center;
flex-wrap: wrap;
    gap:0px 40px;
    text-align: center;
}

#business .box-link .box {
    width: 35%;
	max-width: 580px;
}

#business .box-link a {
    border-radius: 20px 20px 0px 0px;
    width: 100%;
    height: 160px;
    position: relative;
    display: flex;
  justify-content: center;
align-items: center;
flex-wrap: wrap;
    padding-right: 150px;
}

#business .box-link a:hover {
    opacity: 1;
}

#business .box-link .box:nth-child(1) a {
    background-color: var(--color-sub);
}

#business .box-link .box:nth-child(2) a {
    background-color: var(--color-sub2);
}

#business .box-link a::before {
    content: "";
	position: absolute;
right: 50px;
bottom: 0px;
background-position: right bottom;
background-repeat: no-repeat;
	background-size: auto 100%;
    width: 128px;
	height: 188px;
}

#business .box-link .box:nth-child(1) a::before {
	background-image: url("../../img/business/icon-tab01.svg");
}

#business .box-link .box:nth-child(2) a::before {
	background-image: url("../../img/business/icon-tab02.svg");
}

#business .box-link h3 {
    font-size: 38px;
color: #FFF;
line-height: 1.2;
letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 45px;
}

#business .box-link h3::before {
    content: "";
	position: absolute;
left: 0px;
bottom: 0px;
	background-image: url("../../img/business/link-arrow01.svg");
background-position: center bottom;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 30px;
    transition: .5s;
}

#business .box-link .box:hover h3::before {
    margin-bottom: -5px;
}

/* contents01 */

#business .contents01 {
	width: 100%;
    position: relative;
}

#business .contents01::before {
    content: "";
	position: absolute;
top: 0px;
	width: 92%;
	height: 100%;
    display: block;
    background : -moz-linear-gradient(50% 100% 90deg,rgba(255, 255, 255, 1) 0%,rgba(239, 244, 248, 1) 100%);
  background : -webkit-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(239, 244, 248, 1) 100%);
  background : -webkit-gradient(linear,50% 100% ,50% 0% ,color-stop(0,rgba(255, 255, 255, 1) ),color-stop(1,rgba(239, 244, 248, 1) ));
  background : -o-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(239, 244, 248, 1) 100%);
  background : -ms-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(239, 244, 248, 1) 100%);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EFF4F8' ,GradientType=0)";
  background : linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(239, 244, 248, 1) 100%);
}

#business .contents01a::before {
right: 0px;
    border-radius: 100px 0px 0px 0px; 
}

#business .contents01b::before {
left: 0px;
    border-radius: 0px 100px 0px 0px;
}

@media screen and (max-width: 1920px) {
    #business .contents01::before {
	width: 96%;
}
}

#business .contents01 .box-inner {
	width: 80%;
    max-width: 1380px;
    position: relative;
    padding-top: 100px;
}

#business .contents01 .box-title {
	margin-bottom: 70px;
}

#business .contents01 h2 {
	font-size: 55px;
line-height: 1.3;
letter-spacing: 0.1em;
    margin-bottom: 30px;
    text-align: center;
}

#business #business01 h2 {
color: var(--color-sub);
}

#business #business02 h2 {
color: var(--color-sub2);
}

#business .contents01 .box p {
	line-height: 1.8;
    letter-spacing: 0em;
}


/* lay-jobdetail */

#business .lay-jobdetail, #business .lay-jobdetail2 {
    padding-bottom: 80px;
    margin-bottom: 80px;
    border-bottom-style : solid;
border-color : #E4ECF2;
border-width : 3px;
}

#business .lay-jobdetail {
    display: flex;
  justify-content: space-between;
flex-wrap: wrap;
    padding-top: 30px;
}

#business .slider-jobdetail {
    display: none;
}

#business .lay-jobdetail .box {
    width: 31.5%;
}

#business .lay-jobdetail .box-job, #business .lay-jobdetail2 .box-job {
    background-color: #FFF;
    border-radius: 20px;
    margin-bottom: 50px;
    position: relative;
    padding: 70px 0px 40px;
    min-height: 690px;
}

#business .lay-jobdetail2 .box-job {
   padding: 70px 0px;
    min-height: 0px;
    margin-bottom: 60px;
}

#business .lay-jobdetail .box-job::after {
    content: "";
	position: absolute;
left: 0%;
top: 0px;
	width: 100%;
    height: 50px;
    font-size: 22px;
color: #FFF;
line-height: 1.2;
letter-spacing: 0.1em;
    padding-top: 13px;
    text-align: center;
    background-image: url("../../img/business/fukidashi01.svg");
background-position: center top;
background-repeat: no-repeat;
background-size: auto 100%;
    margin-top: -22px;
}

#business .lay-jobdetail .box:nth-child(1) .box-job::after, #business .lay-jobdetail .box-wrap01 .box:nth-child(1) .box-job::after {
    content: "開発";
}

#business .lay-jobdetail .box:nth-child(2) .box-job::after, #business .lay-jobdetail .box-wrap02 .box:nth-child(1) .box-job::after {
    content: "プラスチック成形";
}

#business .lay-jobdetail .box:nth-child(3) .box-job::after, #business .lay-jobdetail .box-wrap03 .box:nth-child(1) .box-job::after {
    content: "組立";
}

#business .lay-jobdetail .box-job .box-img {
    width: 100%;
    height: 260px;
    text-align: center;
    position: relative;
    display: flex;
  justify-content: center;
align-items: center;
flex-wrap: wrap;
    margin-bottom: 30px;
}

#business .lay-jobdetail .box-job .box-img::before {
   content: "";
	position: absolute;
left: 0px;
top: 40px;
    display: block;
	width: 100%;
	height: 190px;
    background-color: #DFEAF2;
}

#business .lay-jobdetail .box-job .box-img img {
    height: 100%;
    width: auto;
    position: relative;
}

#business .lay-jobdetail .box:nth-child(1) .box-job .box-img img {
    height: 90%;
}

#business .lay-jobdetail .box:nth-child(3) .box-job .box-img img {
    height: 82%;
}

#business .lay-jobdetail2 .box-job .box-img img {
    width: 80%;
    max-width: 1115px;
}

#business .lay-jobdetail .box-job .box-text {
    padding: 0px 10%;
}

#business .lay-jobdetail .box-comment, #business .lay-jobdetail2 .box-comment {
    position: relative;
    padding: 35px 10% 30px;
    min-height: 350px;
}

#business .lay-jobdetail2 .box-comment {
    min-height: 0px;
    display: flex;
  justify-content: space-between;
flex-wrap: wrap;
    padding: 30px 5%;
}

#business .lay-jobdetail .box-comment::before, #business .lay-jobdetail2 .box-comment::before {
    content: "";
	position: absolute;
right: 0px;
bottom: 0px;
	background-image: url("../../img/business/icon-memo.png");
background-position: left top;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 80px;
	height: 80px;
    margin-right: -28px;
    margin-bottom: -28px;
}

#business .lay-jobdetail .box-comment::after, #business .lay-jobdetail2 .box-comment::after {
    content: "";
	position: absolute;
left: 20px;
top: 0px;
	background-image: url("../../img/business/clip01.svg");
background-position: left top;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 52px;
	height: 50px;
    margin-top: -20px;
}

#business .lay-jobdetail2 .box-comment::after {
	background-image: url("../../img/business/clip02.svg");
}

#business .lay-jobdetail .box-comment .inner, #business .lay-jobdetail2 .box-comment .inner {
    display: flex;
  justify-content: space-between;
flex-wrap: wrap;
    align-items: center;
    gap:0px 20px;
    border-bottom-style : solid;
border-color : #E4ECF2;
border-width : 2px;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

#business .lay-jobdetail2 .box-comment .inner {
    border-bottom-style : none;
    border-right-style : solid;
    padding-bottom: 0px;
    margin-bottom: 0px;
    width: 30%;
}

#business .lay-jobdetail .box-comment .box-img, #business .lay-jobdetail2 .box-comment .box-img {
    width: 120px;
}

#business .lay-jobdetail .box-comment .box-detail, #business .lay-jobdetail2 .box-comment .box-detail {
    flex: 1;
}

#business .lay-jobdetail2 .box-comment .box-text {
    flex: 1;
    padding-left: 40px;
    display: flex;
  justify-content: center;
align-items: center;
flex-wrap: wrap;
}

#business .lay-jobdetail .box-comment .box-detail p, #business .lay-jobdetail2 .box-comment .box-detail p {
    line-height: 1.4;
    margin-bottom: 8px;
}

#business .lay-jobdetail .box-comment .box-detail h6, #business .lay-jobdetail2 .box-comment .box-detail h6 {
    font-size: 20px;
color: var(--color-sub);
line-height: 1.2;
letter-spacing: 0.1em;
}

#business .lay-jobdetail2 .box-comment .box-detail h6 {
color: var(--color-sub2);
}


/* lay-schedule */

#business .lay-schedule {
    margin-bottom: 80px;
}

#business .box-title_schedule {
    margin-bottom: 60px;
    text-align: center;
}

#business #business01 .box-title_schedule h3, #business #business01 .box-title_schedule h4 {
    color: var(--color-sub);
}

#business #business02 .box-title_schedule h3, #business #business02 .box-title_schedule h4 {
    color: var(--color-sub2);
}

#business .box-title_schedule h3 {
    font-family: var(--subtitle-font);
   font-size: 55px;
line-height: 0.8;
letter-spacing: 0.05em;
font-weight: 700;
    margin-bottom: 10px;
}

#business .box-title_schedule h4 {
   font-size: 22px;
line-height: 1.2;
letter-spacing: 0.05em;
}

#business .box-schedule {
    display: flex;
  justify-content: space-between;
flex-wrap: wrap;
}

#business .box-schedule .box-detail {
    width: 55%;
}

#business .box-schedule .box-detail .box {
    padding: 25px 10px;
    display: flex;
  justify-content: space-between;
flex-wrap: wrap;
    border-radius: 20px;
}

#business .box-schedule .box-detail .box:not(:last-child) {
    margin-bottom: 25px;
}

#business .box-schedule .box-detail .box-time {
    width: 20%;
    border-right-style : solid;
border-color : #E4ECF2;
border-width : 2px;
    display: flex;
  justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
    padding-left: 5px;
}

#business .box-schedule .box-detail .box-task {
    flex: 1;
    display: flex;
  justify-content: space-between;
flex-wrap: wrap;
    align-items: center;
    padding-left: 30px;
}

#business .box-schedule .box-img {
    width: 45%;
}

#business .box-schedule .box-slide_businessimg {
   display: none;
}

#business .box-schedule .box-img .box:not(:last-child) {
    margin-bottom: 20px;
}

#business .box-schedule .box-img .box:nth-child(2) {
    display: flex;
  justify-content: flex-end;
flex-wrap: wrap;
}

#business .box-schedule .box-img img {
    border-radius: 20px;
    width: 70%;
}

#business .box-schedule h5 {
    color : var(--color-main);
    font-family: var(--subtitle-font);
    font-weight: var(--base-font-weight3);
   font-size: 20px;
line-height: 0.8;
letter-spacing: 0.05em;
    position: relative;
    padding-left: 40px;
}

#business .box-schedule h5::before {
    content: "";
	position: absolute;
left: 0px;
top: 0px;
	background-image: url("../../img/business/icon-time01.svg");
background-position: left top;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 28px;
	height: 28px;
    margin-top: -7px;
}

#business #business02 .box-schedule h5::before {
	background-image: url("../../img/business/icon-time02.svg");
}

#business .box-schedule h6 {
    color : var(--color-main);
   font-size: 17px;
line-height: 1.2;
letter-spacing: 0em;
    width: 40%;
}

#business .box-schedule p {
line-height: 1.4;
    font-size: 14px;
    flex: 1;
}

/* lay-check */

#business .lay-check {
    border-style : solid;
border-color : #E4ECF2;
border-width : 5px;
    border-radius: 20px;
    padding: 35px 0px;
    display: flex;
  justify-content: space-between;
flex-wrap: wrap;
    position: relative;
}

#business .lay-check::after {
    content: "";
	position: absolute;
left: 0px;
	background-image: url("../../img/business/icon-check.svg");
background-position: left bottom;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 100px;
	height: 107px;
    margin-left: -10px;
    margin-bottom: -40px;
}

@media screen and (min-width: 768px) {
    #business .lay-check::after {
bottom: 0px;
}
}

#business .lay-check h6 {
   width: 22%;
    display: flex;
  justify-content: center;
align-items: center;
flex-wrap: wrap;
    text-align: center;
    border-right-style : solid;
border-color : #E4ECF2;
border-width : 3px;
    color : var(--color-main);
    font-family: var(--subtitle-font);
    font-weight: 700;
   font-size: 30px;
line-height: 0.8;
letter-spacing: 0.05em;
}


#business .lay-check p {
   flex: 1;
    padding: 0px 50px;
}

.sp-view {
	display: none;
}