@charset "UTF-8";
/* CSS Document */
h3 .motion-txt {
	height: 70px;
}
.tra_sys {
	margin-top: 5rem;
}
.tra_sys_ttl,
.welfare_ttl,
.comp_trip_ttl{
    position: relative;
    overflow: hidden;
    padding: 10% 0;
    margin-bottom: 2rem;
}
.tra_sys_ttl .js-scroll:nth-child(2),
.welfare_ttl .js-scroll:nth-child(2),
.comp_trip_ttl .js-scroll:nth-child(2) {
	text-align: center;
}
.tra_sys .fl,
.welfare .fl,
.comp_trip .fl,
.tra_sys .fr,
.welfare .fr,
.comp_trip .fr {
	width: 45%;
	text-align: center;
}
.tra_sys_ttl h3,
.welfare_ttl h3,
.comp_trip_ttl h3{
    font-family: Oswald;
	color: #ff0000;
	font-size: 60px;
	font-weight: 400;    
    text-align: center;
    padding-bottom: 2rem;
    position: relative;
    display: inline-block;
    margin-bottom: 1em;
}
.tra_sys_ttl h3::before,
.welfare_ttl h3::before,
.comp_trip_ttl h3::before{
    content: '';
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 1vh;
    height: 3px;
    left: 0%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #e30606;
	animation: width150 .2s linear .1s normal forwards;
	
}
.tra_sys_ttl p,
.welfare_ttl p,
.comp_trip_ttl p{
	font-size: 30px;
    text-align: center;
    font-weight: bold;
}
.tra_sys_img,
.comp_trip_img{
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    transform: skew(-10deg);
    width: 55%;
}
.tra_sys_img,
.tra_sys_img > img,
.comp_trip_img,
.comp_trip_img > img{
    display: inline-block;
    transform-origin: 0 100%;
    overflow: hidden;
}
.tra_sys_img >img,
.comp_trip_img >img{
    transform: skew(10deg);
    width: 100%;
}
.welfare_img{
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    transform: skew(10deg);
    width: 55%;
}
.welfare_img,
.welfare_img >img{
    display: inline-block;
    transform-origin: 0 100%;
    overflow: hidden;
}
.welfare_img >img{
    transform: skew(-10deg);
    width: 100%;
}
.work_list ul{
    margin-bottom: 3rem;
}

.work_list ul li{
    display: inline-flex;
    border-bottom: solid 3px #eeeeee;
    overflow: hidden;
    margin-bottom: 2rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
	width: 100%;
}
.work_list ul li .blue_num{
    background-color: #328abe;
    color: #ffffff;
	font-size: 48px;
    display: inline-block;
    padding: 1rem;
}
.work_list ul li h5{
    -webkit-transform: skewX(170deg);
    -moz-transform: skewX(170deg);
    transform: skewX(170deg);
    border-right: 3px solid #eeeeee;
    width: 70%;
    text-align: center;
    padding: 2rem 1rem 0;
    font-size: 18px;
}
.work_list ul li h5 span{
    display: inline-block;
    transform: skewX(-170deg);
}
.work_list ul li p{
    padding: 1rem 0 1rem 1.5rem;
	width: 100%;
}
.comp_trip{
    margin-bottom: 5rem;
}
.trip_list h3{
	font-size: 24px;
    text-align: center;
    margin: 3rem 0 2rem;
    position: relative;
    font-weight: bold;
}
.trip_list .line_r::before{
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 3px;
    top: 50%;
    right: -3%;
    -moz-transform: translateX(60%);
    -webkit-transform: translateX(60%);
    -ms-transform: translateX(60%);
    transform: translateX(60%);
    background-color: #000;
}
.trip_list .line_r.line_w::before {
	animation: width100 .1s linear .2s normal forwards;
}
.trip_list .line_l::before{
    content: '';
    position: absolute;
    display: inline-block;
    width: 0;
    height: 3px;
    top: 50%;
    right: 3%;
    -moz-transform: translateX(-60%);
    -webkit-transform: translateX(-60%);
    -ms-transform: translateX(-60%);
    transform: translateX(-60%);
    background-color: #000;
}
.trip_list .line_l.line_w::before {
	animation: width-100 .1s ease .2s normal forwards;
}
.trip_list dl{
    max-width: 48%;
    margin: 1%;
}
.trip_list dl dt{
    text-align: center;
}
.trip_list dl dt img {
    width: 500px;
    height: 300px;
	object-fit: cover;
}
.trip_list dl dd{
    padding: 1rem 2rem;
}
@media screen and (min-width:1980px) and (max-width: 2560px) {
	
}
@media screen and (max-width:1024px) {
	.hidden_area {
		padding-top: 0%;
	}
	.tra_sys_ttl h3, .welfare_ttl h3, .comp_trip_ttl h3 {
		font-size: 54px;
		padding-bottom: 1rem;
	}
	.tra_sys {
		margin-top: 3rem;
	}
	.tra_sys_ttl p, .welfare_ttl p, .comp_trip_ttl p {
		font-size: 26px;
	}
	.work_list ul li h5 {
		font-size: 16px;
		padding: 2rem .5rem 0;
	}
	.work_list ul li p {
		font-size: 16px;
		padding: 1rem 0 1rem 1rem;
	}
	.work_list ul li .blue_num {
		font-size: 44px;
	}
	.trip_list .line_r::before {
		right: -6%;
	}
	.trip_list .line_l::before {
		right: 6%;
	}
	.trip_list h3 {
		font-size: 22px;
	}
}
@media screen and (max-width:900px) {
	.tra_sys {
		margin-top: 2rem;
	}
	.tra_sys_ttl h3, .welfare_ttl h3, .comp_trip_ttl h3 {
		font-size: 40px;
		padding-bottom: .5rem;
		margin-bottom: .5rem;
	}
	h3 .motion-txt {
		height: 50px;
	}
	.tra_sys_ttl h3::before, .welfare_ttl h3::before, .comp_trip_ttl h3::before {
		 bottom: 2px;
	}
	.tra_sys_ttl p, .welfare_ttl p, .comp_trip_ttl p {
		font-size: 24px;
	}
	.work_list ul li h5 {
		font-size: 14px;
		width: 85%;
	}
	.work_list ul li p {
		font-size: 14px;
		padding: 1rem 0 1rem 1rem;
	}
	.work_list ul li .blue_num {
		font-size: 38px;
	}
	.work_list ul li {
		margin-bottom: 1rem;
	}
	.trip_list h3 {
		font-size: 20px;
	}
	.trip_list dl dd {
		font-size: 14px;
	}
}
@media screen and (max-width:768px) {
	.tra_sys_ttl h3, .welfare_ttl h3, .comp_trip_ttl h3 {
		font-size: 34px;
	}
	h3 .motion-txt {
		height: 40px;
	}
	.tra_sys_ttl h3::before, .welfare_ttl h3::before, .comp_trip_ttl h3::before {
		bottom: 0px;
	}
	.tra_sys_ttl p, .welfare_ttl p, .comp_trip_ttl p {
		font-size: 20px;
	}
	.work_list ul li h5 {
		font-size: 14px;
	}
	.work_list ul li p{
		font-size: 12px;
	}
	.work_list ul li .blue_num {
		font-size: 36px;
	}
	.trip_list h3 {
		font-size: 16px;
	}
	.trip_list dl dt img {
		height: 240px;
	}
	.comp_trip {
		margin-bottom: 2rem;
	}
}
@media screen and (max-width:500px) {
	.tra_sys_ttl h3, .welfare_ttl h3, .comp_trip_ttl h3 {
		font-size: 24px;
	}
	.tra_sys_ttl p, .welfare_ttl p, .comp_trip_ttl p {
    	font-size: 12px;
	}
	.tra_sys_ttl h3::before, .welfare_ttl h3::before, .comp_trip_ttl h3::before{
		height: 2px;
		bottom: -2px;
	}
	h3 .motion-txt {
		height: 30px;
	}
	.tra_sys {
		margin-top: 1rem;
	}
	.tra_sys_ttl, .welfare_ttl, .comp_trip_ttl {
		margin-bottom: 1rem;
	}
	.work_list ul {
		margin-bottom: 1rem;
	}
	.work_list ul li {
		display: block;
	}
	.work_list ul li h5 {
		border-right: none;
		width: 60%;
		display: inline-block;
	}
	.work_list ul li h5,
	.work_list ul li h5 span {
		transform: none;
	}
	.work_list ul li p {
		font-size: 11px;
	}
	.work_list ul li .blue_num {
		font-size: 26px;
		padding: 1rem;
	}
	.trip_list h3 {
		font-size: 14px;
	}
	.trip_list .line_r::before {
		right: -14%;
		height: 2px;
	}
	.trip_list .line_l::before {
		right: 14%;
		height: 2px;
	}
	.trip_list dl {
		max-width: none;
		margin: 0 auto;
	}
	.trip_list .fl,
	.trip_list .fr {
		float: none;
		width: 80%;
	}
	.trip_list dl dd {
		font-size: 11px;
	}
	.trip_list dl dt img {
		height: 180px;
	}
}
@media screen and (max-width:320px) {
	.tra_sys_ttl h3, .welfare_ttl h3, .comp_trip_ttl h3 {
		font-size: 20px;
	}
	.tra_sys_ttl p, .welfare_ttl p, .comp_trip_ttl p {
		font-size: 12px;
	}
	.trip_list h3 {
		font-size: 12px;
	}
	.trip_list .line_r::before {
		right: -15%;
	}
	.trip_list .line_l::before {
		right: 15%;
	}
}
@media all and (-ms-high-contrast: none){
	.tra_sys_ttl p, .welfare_ttl p, .comp_trip_ttl p{
		line-height: 2;
	}
}