@charset "UTF-8";

/*------------------------------------------------------------------------------------
                                 　　INDEX
------------------------------------------------------------------------------------*/

/*VISUAL*/

.index-header {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.visual {
	width: 100%;
	height: 100%;
	opacity: 0;
	background: url(../images/index/visual-sky-sp.jpg) center center / cover no-repeat;
}

.visual-inner {
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translate(0,100%);
}

.visual-inner img {
	display: block;
	width: 100%;
}

.visual-title {
	width: 100%;
	height: auto;
	padding: 0 16px;
	position: absolute;
	top: 47.5%;
	left: 0;
	transform: translate(0,-50%);
}

.visual-title h1 {
	text-align: center;
	transform: translate(0,-21px);
}

.visual-title span {
	display: inline-block;
    height: 32px;
    font-size: 1.2rem;
	letter-spacing: .1rem;
	text-indent: .1rem;
    text-align: center;
    line-height: 32px;
	color: #fff;
    border-radius: 16px;
    padding: 0 16px;
    background: #0046AF;
	margin-bottom: 16px;
	opacity: 0;
	transform: translate(0,-150%);
}


/*ADD MOVIE-BTN 20200401*/

.visual-link {
    width: 30%;
    position: absolute;
    left: 16px;
    bottom: 32px;
    z-index: 10;
}

.visual-link a {
    display: block;
}

.visual-link img {
    animation: attention 1800ms ease infinite;
}

@keyframes attention {
    0%,60%,98.5%,100% { transform: translate(0,0);}
    75% { transform: translate(0,-12%);}
    85% { transform: translate(0,1.5%);}
    90% { transform: translate(0,-4%);}
    95% { transform: translate(0,0.5%);}
    97.5% { transform: translate(0,-1%);}
}


/*ANIMATION VISUAL*/

#index #header {
	display: none;
}

#index.active .visual {
	transition: all 2400ms cubic-bezier(0.77, 0, 0.175, 1);
	opacity: 1;
}

#index.active .visual-inner {
	transform: translate(0,0);
	transition: all 1600ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
}

#index.active .visual-title h1 {
	transform: translate(0,0);
	transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1) 1000ms;
}

#index.active .visual-title span {
	transform: translate(0,0);
	opacity: 1;
	transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1) 1000ms;
}


/*CONCEPT*/

.index-concept {
	padding-top: 100px;
	padding-bottom: 90px;
	position: relative;
	z-index: 5;
	background-position: center top;
	margin-top: -20px;
}

.index-concept .hidden {
	display: none;
}

.index-concept .index-concept-txt {
	line-height: 2.5;
	padding: 0 16px;
}


/*TOP CONTENTS*/

.index-top-contents {
	position: relative;
	z-index: 5;
}

.index-top-contents-inner + .index-top-contents-inner {
	margin-top: 60px;
}

.index-top-img {
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.index-top-img img {
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.hover .index-top-img img {
	transform: scale(1.1);
}

.index-top-txt {
	padding-top: 24px;
}

.index-top-txt .index-top-txt-title {
	text-align: center;
}

.index-top-txt .index-top-txt-title span {
	display: block;
	margin-bottom: 4px;
}

.index-top-txt p {
	margin: 12px 0 24px;
}


/*INTERVIEW*/

.index-interview {
	padding-top: 20px;
	background: url(../images/common/big-dots-bk.gif) center center / 100px 100px repeat;
}

.index-interview .section-title {
	padding-top: 70px;
}

.index-interview-inner {
	position: relative;
	margin-top: 30px;
}

.index-interview-inner .slide figure {
	width: calc(100% / 8 * 6);
	overflow: hidden;
	position: relative;
	z-index: 1;
	border-radius: 0 0 34vw 34vw;
	margin: 0 auto 24px;
}

.index-interview-inner .slide figure img {
	position: relative;
	z-index: 1;
	transform-origin: center top;
	transform: translate(0,25%);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.index-interview-inner .slide .slick-active figure img {
	transform: translate(0,0);
}

.index-interview-inner .slide .slick-active.hover figure img {
	transform: scale(1.1);
}

.index-interview-inner .slide figure span {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 100%;
	border-radius: 50%;
	background: linear-gradient(125deg, #00afeb, #0087e6, #0046af);
	position: absolute;
	left: 0;
	bottom: 0;
}

.index-interview-inner .slide p {
	text-align: center;
	line-height: 1.54;
	margin-bottom: 24px;
}

#interview-arrow .arrow-prev,
#interview-arrow .arrow-next {
	top: calc(77vw / 2 - 15px);
}

#interview-arrow .arrow-prev {
	left: 16px;
}

#interview-arrow .arrow-next {
	right: 16px;
}


/*SPECIAL*/

.index-special {
	background: linear-gradient(#00afeb, #0087e6);
}

.index-special .index-special-inner {
	color: #fff;
}

.index-special .index-special-contents-inner + .index-special-contents-inner {
	margin-top: 60px;
}

/*ADD MOVIE-BTN 20200401*/

.index-movie-contents .index-top-img {
    border-radius: 0;
    overflow: visible;
}

.index-movie-contents .index-top-img:before {
    content: "";
    display: block;
    width: calc(100% - 32px);
    height: 100%;
    margin: auto;
    background: #F6F55F;
    border-radius: 24px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.index-movie-contents .index-top-img:after {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    background: url(../images/index/index-movie-background.png) 0 center / 400% auto repeat-x;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 1;
    animation: slideshow 200000ms linear infinite;
}

@keyframes slideshow {
    from { background-position: 0 center; }
    to { background-position: 1000% center; }
}   

.index-movie-contents .index-top-img h2 {
    width: calc(100% - 32px);
    padding: 5% 12.5%;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.index-movie-contents .index-top-txt {
    padding-top: 16px;
}

.index-movie-contents .index-top-txt p {
    margin-top: 0;
}


/*OTEHR*/

.index-bottom-contents-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.index-bottom-contents-inner li {
	width: 47.5%;
	text-align: center;
	margin-bottom: 30px;
}

.index-bottom-contents-inner li a {
	display: block;
}

.index-bottom-contents-inner li figure {
	border-radius: 24px;
	border: 2px solid #00afeb;
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin-bottom: 12px;
}

.index-bottom-contents-inner li figure img {
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.index-bottom-contents-inner li .hover figure img {
	transform: scale(1.12);
}

.index-bottom-contents-inner li p {
	line-height: 1.54;
}


/*OFFICE INFO*/

#office-info {
	overflow: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
}

.office-info-inner {
	width: calc((50% - 32px) * 10);
	display: flex;
	justify-content: space-between;
	padding: 0 16px;
}

.office-info-inner li {
	width: 10%;
	text-align: center;
}

.office-info-inner li a {
	display: block;
}

.office-info-inner li figure {
	border-radius: 24px;
	border: 2px solid #00afeb;
	background: #fff;
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin-bottom: 12px;
}

.office-info-inner li figure span {
	display: block;
    border: 8px solid #fff;
    border-radius: inherit;
    overflow: hidden;
	position: relative;
	z-index: 1;
}

.office-info-inner li figure span img {
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.office-info-inner li .hover figure span img {
	transform: scale(1.15);
}

.office-info-inner li p {
	line-height: 1.54;
}


/*AFFILIATED*/

#affiliated {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 5;
	background: rgba(0, 52, 167, 0.9);
	transform: translate(0,100%);
    transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

#affiliated.fixed {
	transform: translate(0,0);
}

#affiliated.fixed.hidden {
	transform: translate(0,100%);
}

#affiliated > p {
	line-height: 1;
	text-align: center;
	color: #fff;
	padding: 10vw 16px 0;
}

#affiliated .affiliated-inner {
	overflow: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
}

#affiliated .affiliated-list {
	width: calc((45% - 32px) * 9);
    display: flex;
    justify-content: space-between;
    padding: 20px 16px 10vw 16px;
}

#affiliated .affiliated-list li {
	width: calc(100% / 9 - 16px);
    text-align: center;
}

#affiliated .affiliated-list li a {
	display: block;
	width: 100%;
	height: 42px;
	border: 1px solid #567FBD;
	border-radius: 21px;
	line-height: 40px;
	color: #fff;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#affiliated .affiliated-list li a.hover {
	border-color: #00afeb;
	background: #00afeb;
}

#affiliated-toggle-btn {
	width: 25vw;
    height: 25vw;
    border-radius: 50%;
    background: #0046AF;
    position: absolute;
    top: calc(-25vw - 16px);
    right: 16px;
	z-index: 8;
	padding: 16px;
	cursor: pointer;
	transform: scale(0);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

#affiliated-toggle-btn.hover {
	background: #00afeb;
}

#affiliated-toggle-btn.fixed {
	transform: scale(1);
}

#affiliated-toggle-btn img {
	display: block;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

#affiliated #affiliated-toggle-btn .close {
	display: block;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#affiliated.fixed.hidden #affiliated-toggle-btn .open {
	transform: scale(1);
}

#affiliated.fixed #affiliated-toggle-btn .open {
	transform: scale(0);
}

#affiliated.fixed.hidden #affiliated-toggle-btn .close {
	transform: scale(0);
}

#affiliated.fixed #affiliated-toggle-btn .close {
	transform: scale(1);
}


/*------------------------------------------------------------------------------------
                                 　　日鉄物流のシゴト
------------------------------------------------------------------------------------*/

/*FLOW*/

#works .w-w-reverse {
	padding-bottom: 70px;
}

.workflow {
	background: url(../images/common/big-dots-bk.gif) center top / 100px 100px repeat;
}

.workflow .section-title {
	padding-top: 70px;
}

.workflow-list {
	position: relative;
}

.workflow-list:before {
    content: "";
    display: block;
    width: 10px;
    height: 100%;
	border-radius: 5px;
    background: #00aeea;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.workflow-list-inner {
	position: relative;
}

.workflow-list-inner:not(:first-child) {
	margin-top: 60px;
}

.workflow-img {
	width: 100%;
	padding: 36px 24px 69px;
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
}

.workflow-txt {
	margin-top: -45px;
}

.workflow-txt .workflow-txt-button {
    width: calc(100% - 48px);
	text-align: center;
	background: #0046af;
	padding: 16px 0;
	border-radius: 45px;
    margin: 0 auto 24px;
	position: relative;
	z-index: 1;
	transition: all 350ms cubic-bezier(0.77, 0, 0.175,01);
	cursor: pointer;
}

.workflow-txt .workflow-txt-button.hover {
	background: #00afeb;
}

.workflow-txt .workflow-txt-button.active {
	background: #00afeb;
}

.workflow-txt .workflow-txt-button .maximum {
	color: #fff;
	line-height: 1;
}

.workflow-txt .workflow-txt-button .read-more {
	height: auto;
	padding: 0;
}

.workflow-txt .workflow-txt-button .read-more .read-more-inner {
	height: auto;
	line-height: 1;
	margin-top: 12px;
	background: none;
	padding: 0;
	overflow: hidden;
}

.workflow-txt .workflow-txt-button.active .read-more .read-more-inner {
	color: #00afeb;
}

.workflow-txt .workflow-txt-button .read-more .read-more-inner svg {
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

.workflow-txt .workflow-txt-button.hover .read-more .read-more-inner svg {
	transform: rotate(180deg);
}

.workflow-txt .workflow-txt-button.active .read-more .read-more-inner svg {
	left: 50%;
	transform: translate(-50%,0) rotate(315deg);
}

.workflow-txt + .small {
	color: #00afeb;
	line-height: 1;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	position: absolute;
    top: 20px;
    left: 20px;
}

.workflow-txt .workflow-txt-button + .workflow-description {
	max-height: 0;
    overflow: hidden;
    transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
}

.workflow-txt .workflow-txt-button.passive + .workflow-description {
	max-height: 0 !important;
}

.workflow-txt .workflow-description .workflow-description-inner {
	color: #fff;
    font-weight: 700;
    padding: 24px;
    border-radius: 24px;
    z-index: 1;
	overflow: hidden;
}

.workflow-txt .workflow-txt-button.passive + .workflow-description .workflow-description-inner p {
	opacity: 0;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.workflow-txt .workflow-txt-button.active + .workflow-description .workflow-description-inner p {
	opacity: 1;
}

.workflow-list-inner .vehicle-img {
	width: 85%;
	text-align: center;
	margin: 0 auto;
	margin-top: -20px;
}

.workflow-list-inner .vehicle-img figcaption {
	display: inline-block;
	line-height: 36px;
	color: #fff;
	padding: 0 18px;
	border-radius: 18px;
	background: #00aeea;
	margin-top: 16px;
}

.workflow-list-rear .maximum {
	width: 100%;
    height: 120px;
    line-height: 120px;
    color: #fff;
    text-align: center;
    border-radius: 60px;
}


/*SCROLL ANIMATION*/

.workflow-img,
.workflow-list-rear {
	opacity: 0;
	transform: scale(1.25);
}

.in .workflow-img,
.workflow-list-rear.in {
	opacity: 1;
	transform: scale(1);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.workflow-txt,
.vehicle-img figcaption {
	opacity: 0;
	transform: scale(.75);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 250ms;
}

.in .workflow-txt,
.in .vehicle-img figcaption {
	opacity: 1;
	transform: scale(1);
}

.workflow-txt + .small {
	opacity: 0;
	transition: all 1000ms cubic-bezier(0.77, 0, 0.175, 1);
}

.in .workflow-txt + .small {
	opacity: 1;
}

.vehicle-img img {
	opacity: 0;
	transform: translate(40%,0);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.in .vehicle-img img {
	opacity: 1;
	transform: translate(0,0);
}


/*BASE*/

.base .section-title {
	position: relative;
	z-index: 1;
}

.base .base-inner #map-container {
	line-height: 0;
	margin-top: -25px;
}

.base .base-inner #map-container .map-container-inner {
	position: relative;
}

.base .base-inner #map-container .japan {
	width: 100%;
}

.base .base-inner #map-container .mapIcons {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.base .base-inner #map-container .mapIcons span {
	display: block;
	width: 2vw;
	height: 2vw;
	background: #00AEEB;
	border-radius: 50%;
	position: absolute;
	transition: all 350ms cubic-bezier(0.77, 0, 0.175, 1);
}

.base .base-inner #map-container .mapIcons span.base-1 { top: 40.3%; left: 80.3%;}
.base .base-inner #map-container .mapIcons span.base-2 { top: 59.5%; left: 72.3%;}
.base .base-inner #map-container .mapIcons span.base-3 { top: 66.7%; left: 68%;}
.base .base-inner #map-container .mapIcons span.base-4 { top: 68.5%; left: 54.1%;}
.base .base-inner #map-container .mapIcons span.base-5 { top: 68.5%; left: 38%;}
.base .base-inner #map-container .mapIcons span.base-6 { top: 68.5%; left: 35.8%;}
.base .base-inner #map-container .mapIcons span.base-7 { top: 75.6%; left: 9.75%;}
.base .base-inner #map-container .mapIcons span.base-8 { top: 84.4%; left: 17.8%;}
.base .base-inner #map-container .mapIcons span.base-9 { top: 75.6%; left: 40%;}
.base .base-inner #map-container .mapIcons span.base-10 { top: 70%; left: 40%;}

.base .base-inner #map-container.lv1 .mapIcons span.base-1,
.base .base-inner #map-container.lv2 .mapIcons span.base-2,
.base .base-inner #map-container.lv3 .mapIcons span.base-3,
.base .base-inner #map-container.lv4 .mapIcons span.base-4,
.base .base-inner #map-container.lv5 .mapIcons span.base-5,
.base .base-inner #map-container.lv6 .mapIcons span.base-6,
.base .base-inner #map-container.lv7 .mapIcons span.base-7,
.base .base-inner #map-container.lv8 .mapIcons span.base-8,
.base .base-inner #map-container.lv9 .mapIcons span.base-9,
.base .base-inner #map-container.lv10 .mapIcons span.base-10 { 
	background: #FFB700;
	transform: scale(2.5);
	z-index: 2;
}

.base .base-inner #map-container .mapIcons span:after {
	content: "";
	display: block;
	font-size: 10px;
	text-align: center;
	line-height: 10px;
	font-weight: 700;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-110%) scale(.75);
	opacity: 0;
	visibility: hidden;
	transition: all 350ms cubic-bezier(0.77, 0, 0.175, 1);
}

.base .base-inner #map-container .mapIcons span.base-1:after { content: "釜石"; width: 20px; }
.base .base-inner #map-container .mapIcons span.base-2:after { content: "鹿島"; width: 20px; }
.base .base-inner #map-container .mapIcons span.base-3:after { content: "君津"; width: 20px; }
.base .base-inner #map-container .mapIcons span.base-4:after { content: "名古屋"; width: 30px; }
.base .base-inner #map-container .mapIcons span.base-5:after { content: "広畑"; width: 20px; }
.base .base-inner #map-container .mapIcons span.base-6:after { content: "広畑鋼板工業"; width: 60px; }
.base .base-inner #map-container .mapIcons span.base-7:after { content: "八幡"; width: 20px; }
.base .base-inner #map-container .mapIcons span.base-8:after { content: "大分"; width: 20px; }
.base .base-inner #map-container .mapIcons span.base-9:after { content: "和歌山"; width: 30px; }
.base .base-inner #map-container .mapIcons span.base-10:after { content: "阪神"; width: 20px; }

.base .base-inner #map-container.lv1 .mapIcons span.base-1:after,
.base .base-inner #map-container.lv2 .mapIcons span.base-2:after,
.base .base-inner #map-container.lv3 .mapIcons span.base-3:after,
.base .base-inner #map-container.lv4 .mapIcons span.base-4:after,
.base .base-inner #map-container.lv5 .mapIcons span.base-5:after,
.base .base-inner #map-container.lv6 .mapIcons span.base-6:after,
.base .base-inner #map-container.lv7 .mapIcons span.base-7:after,
.base .base-inner #map-container.lv8 .mapIcons span.base-8:after,
.base .base-inner #map-container.lv9 .mapIcons span.base-9:after,
.base .base-inner #map-container.lv10 .mapIcons span.base-10:after {
	opacity: 1;
	visibility: visible;
}

.base .base-inner #map-container .map-figure {
	width: 50%;
	position: absolute;
}

.base .base-inner #map-container .map-figure.map-pointer1 {
	top: 14%;
    left: 0;
}

.base .base-inner #map-container .map-figure.map-pointer2 {
	bottom: 0;
    left: 62%;
}

.base-list {
	overflow: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
	margin-top: 20px;
}

.base-list-slide {
	width: calc((50% - 32px) * 9);
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
}

.base-list-slide li {
	width: 10%;
    text-align: center;
}

.base-list-slide li a {
	display: block;
}

.base-list-slide li figure {
	border-radius: 24px;
    border: 2px solid #00afeb;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}

.base-list-slide li figure span {
	display: block;
    border: 8px solid #fff;
    border-radius: inherit;
    overflow: hidden;
	position: relative;
	z-index: 1;
}

.base-list-slide li figure span img {
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.base-list-slide li .hover figure span img {
	transform: scale(1.15);
}

.base-list-slide li p {
	line-height: 1.54;
}


/*------------------------------------------------------------------------------------
                                 　　日鉄物流のシゴト 個別
------------------------------------------------------------------------------------*/

.works-inner .columnInner:not(:last-child) {
	margin-bottom: 60px;
}

.works-inner .works-img {
	overflow: hidden;
	border-radius: 24px;
	position: relative;
	z-index: 1;
}

.works-inner .largest {
	font-size: 2.4rem;
	text-align: center;
	padding-top: 16px;
    padding-bottom: 12px;
}

.works-inner .works-person {
	position: absolute;
	width: 65%;
	left: 0;
	right: 0;
	bottom: -1%;
	margin: 0 auto;
	z-index: 2;
}

.characteristic {
	color: #fff;
}

.characteristic .characteristic-txt {
	margin-top: 32px;
}

.recruit .recruit-list {
	border-top: 1px solid #00afeb;
}

.recruit .recruit-list dt {
	display: inline-block;
	border-top: 1px solid #0046AF;
	padding-top: 30px;
	margin-top: -1px;
	position: relative;
	z-index: 1;
}

.recruit .recruit-list dd {
	text-align: justify;
	line-height: 1.8;
	padding-top: 10px;
}

.recruit .recruit-list dd:not(:last-child) {
	padding-bottom: 30px;
	border-bottom: 1px solid #00afeb;
}

#map {
	width: 100%;
    height: calc(100vw - 32px);
    background: white;
    border-radius: 24px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: 20px;
}

.recruit .recruit-list dd span.linkTxt {
    display: block;
    margin-top: 8px;
}

.recruit .recruit-list dd span.linkTxt a {
    font-weight: 700;
	text-decoration: underline;
	color: #1db0e9;
}


/*------------------------------------------------------------------------------------
                                 　　教えてセンパイ！
------------------------------------------------------------------------------------*/

.interviewee-list li:not(:last-child) {
	margin-bottom: 60px;
}

.interviewee-list li a {
	display: block;
}

.interviewee-list li figure {
	width: 100%;
	padding-top: 15%;
	background: linear-gradient(125deg, #00afeb, #0087e6, #0046af);
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.interviewee-list li figure img {
	display: block;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.interviewee-list li .hover figure img {
	transform: scale(1.1);
}

.interviewee-list li figure figcaption {
	width: 100%;
	text-align: center;
	color: #fff;
	position: absolute;
	top: 8%;
	left: 0;
}

.interviewee-list li .interviewee-head {
	margin: 24px auto;
}

.interviewee-list li .interviewee-profile {
	line-height: 1.32;
}

.interviewee-list li .interviewee-profile .txt {
	display: block;
	line-height: 1.48;
    padding-top: 16px;
}


/*------------------------------------------------------------------------------------
                                 教えてセンパイ！ 個別
------------------------------------------------------------------------------------*/

.interviewee-header {
	position: relative;
}

.interviewee-header-inner figure {
	background: linear-gradient(125deg, #00afeb, #0087e6, #0046af);
	padding-top: calc(52px + 15%);
}

.interviewee-header-head {
	color: #fff;
}

.interviewee-header-head .small {
	width: 100%;
	text-align: center;
	position: absolute;
	top: calc(52px + 3.5%);
	left: 0;
}

.interviewee-header-head .maximum {
	margin: 40px 0;
}

.interviewee-header-profile-inner {
	width: calc(100% - 16px);
	background: #fff;
	border-radius: 20px 0 0 20px;
	padding: 32px 16px 32px 58px;
	margin-left: 16px;
	position: relative;
}

.interviewee-header-profile-inner dt {
	color: #00afeb;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	position: absolute;
	top: 32px;
	left: 24px;
}

.interviewee-header-profile-inner dd .interviewee-header-profile-name {
	line-height: 1;
	margin-bottom: 12px;
}

.interviewee-header-profile-inner dd .interviewee-header-profile-txt {
	line-height: 1.8;
}

.interviewee-contents {
	margin: 60px auto 0;
}

.interviewee-contents-img,
.interviewee-contents-img img {
	display: block;
}

.interviewee-contents-inner {
	color: #fff;
}

.interviewee-contents-inner .interviewee-contents-head {
	margin: 40px auto 32px;
}

.interviewee-contents-inner .interviewee-contents-head .small {
	display: block;
	margin-bottom: 16px;
}

.interviewee-column {
	color: #fff;
	padding-bottom: 60px;
}

.interviewee-column-img {
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin-bottom: 32px;
}

.interviewee-index {
	background: #fff;
}


/*OTHER INTERVIEWEE*/

.other-interviewee {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.other-interviewee .other-interviewee-inner {
    padding-top: 40px;
	background: linear-gradient(#0087e6, #0046af);
}

.other-interviewee .other-interviewee-img {
    width: 100%;
    margin: 0 auto;
	opacity: .25;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.other-interviewee .hover .other-interviewee-img {
	transform: scale(1.1);
}

.other-interviewee .other-interviewee-txt {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.other-interviewee .other-interviewee-txt p {
	text-align: center;
	line-height: 1.54;
	color: #fff;
	margin-bottom: 24px;
}

.other-interviewee .other-interviewee-txt p .font-comfortaa {
	display: block;
	margin-bottom: 12px;
}

.other-interviewee .w-w {
	display: block;
    width: 100%;
    height: 20px;
    padding: 0;
    position: relative;
    margin-top: -20px;
    z-index: 1;
}


/*------------------------------------------------------------------------------------
                                 　　教育制度
------------------------------------------------------------------------------------*/

.educate-img {
	width: calc(100% - 16px);
    position: relative;
    overflow: hidden;
    z-index: 1;
	border-radius: 24px 0 0 24px;
    margin-left: 16px;
}

.educate-reverse .educate-img {
	border-radius: 0 24px 24px 0;
    margin-left: 0;
}

.educate-txt {
	width: 100%;
    padding: 0 16px;
	margin-top: 32px;
}

.educate-pdf {
	padding-top: 40px;
	background: #eef2f7;
}

.career-graph {
	width: 100%;
	margin-top: 50px;
}

.career-graph img {
	width: 100%;
}


/*三交替制度 2022.10.31追加*/

#education .working-wrap {
    width: 100%;
    margin-top: 50px;
}

#education .working-wrap .working-inner {
	width: 100%;
}

#education .working-wrap .working-inner .img {
	width: 100%;
	padding: 0 48px;
}

#education .working-wrap .working-inner .img img {
	display: block;
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#education .working-wrap .working-inner .img figcaption {
    line-height: 1.32;
    font-weight: 700;
    margin-top: 12px;
}

#education .working-wrap .working-inner .list {
    width: 100%;
    margin-top: 50px;
	position: relative;
}

#education .working-wrap .working-inner .list ol {
	position: relative;
}

#education .working-wrap .working-inner .list ol:before {
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	background: linear-gradient(#19c896, #00aeea, #3a78ff);
	position: absolute;
	top: 1px;
	left: 29.5px; 
}

#education .working-wrap .working-inner .list li + li {
	margin-top: 42px;
}

#education .working-wrap .working-inner .list li h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#education .working-wrap .working-inner .list li h3 .call {
    display: block;
    line-height: 60px;
    font-size: 2.6rem;
    width: 60px;
    height: 60px;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 15px rgba(0,0,0,.25);
	position: relative;
	z-index: 1;
}

#education .working-wrap .working-inner .list li.ko h3 .call { background-color:#19c896; }
#education .working-wrap .working-inner .list li.otsu h3 .call { background-color:#00aeea; }
#education .working-wrap .working-inner .list li.hei h3 .call { background-color:#3a78ff; }

#education .working-wrap .working-inner .list li h3 span:not(.call) {
    display: block;
	min-width: 176px;
	height: 48px;
    font-size: 1.8rem;
    line-height: 50px;
    color: #fff;
    background: red;
    padding: 0 20px 0 35px;
    border-radius: 0 23px 23px 0;
    position: relative;
    left: -20px;
}

#education .working-wrap .working-inner .list li.ko h3 span:not(.call) { background-color:#19c896; }
#education .working-wrap .working-inner .list li.otsu h3 span:not(.call) { background-color:#00aeea; }
#education .working-wrap .working-inner .list li.hei h3 span:not(.call) { background-color:#3a78ff; }

#education .working-wrap .working-inner .list li dl {
    padding: 15px 0 0 60px;
}

#education .working-wrap .working-inner .list li dl dt {
    font-size: 1.8rem;
    font-weight: 700;
}

#education .working-wrap .working-inner .list li dl dd {
    line-height: 1.8;
    margin-top: 10px;
}

#education .working-wrap .working-inner .list .attention {
	line-height: 1.6;
    margin-top: 25px;
}


#education .working-wrap .working-schedule {
    width: 100%;
    margin-top: 50px;
    background: #fff;
    border-radius: 24px;
	padding: 36px 0;
}

#education .working-wrap .working-schedule h3 {
    padding: 0 36px;
    font-size: 2rem;
}

#education .working-wrap .working-schedule .schedule-inner {
	overflow: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
	margin-top: 20px;
}

#education .working-wrap .working-schedule .schedule-inner::-webkit-scrollbar {
	display: none;
}

#education .working-wrap .working-schedule .schedule-inner figure {
	width: calc(36px + 944px + 36px);
	padding: 0 36px;
}

#education .working-wrap .working-schedule .schedule-inner figure figcaption {
    display: block;
    font-size: 1rem;
    text-align: left;
    margin-top: 6px;
}


/*------------------------------------------------------------------------------------
                                 　　よくある質問
------------------------------------------------------------------------------------*/

.faqInner .question {
	border-top: 1px solid #00afeb;
	padding: 30px 36px 30px 30px;
	position: relative;
	cursor: pointer;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.faqInner .question:before,
.faqInner .question:after {
	content: "";
	display: block;
	width: 15px;
	height: 1px;
	background: #0046AF;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.faqInner .question.passive:after {
	transform: rotate(-90deg);
}

.faqInner .question:after {
	transform: rotate(0);
}

.faqInner .question .initials {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
}

.faqInner .question.passive + .answer {
	max-height: 0 !important;
	margin-bottom: 0 !important;
}

.faqInner .question + .answer {
	max-height: 0;
	overflow: hidden;
	transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
	margin-bottom: 32px !important;
}

.faqInner .question + .answer .answerInner {
	padding: 24px;
	border-radius: 24px;
	background: #eef2f7;
}

.faqInner .question + .answer .answerInner .initials {
	text-align: center;
}

.faqInner .question + .answer .answerInner .initials,
.faqInner .question + .answer .answerInner .answer-txt {
	opacity: 0;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.faqInner .question.active + .answer .answerInner .initials,
.faqInner .question.active + .answer .answerInner .answer-txt {
	opacity: 1;
}


/*------------------------------------------------------------------------------------
                                 	日鉄物流のくらし
------------------------------------------------------------------------------------*/

/*LIFE EVENT*/

.life-event-graph {
	font-size: 1.2rem;
	font-weight: 700;
	margin: 30px auto 0;
}

.life-event-graph .graph-head {
	float: left;
	width: 60px;
}

.life-event-graph .graph-head li {
	height: 75px;
	position: relative;
	margin-bottom: 15px;
}

.life-event-graph .graph-head li p {
	width: 100%;
	line-height: 1;
	text-align: center;
	position: absolute;
	left: 0;
	bottom: 0;
}

.life-event-graph .graph-head li:last-child {
	margin-bottom: 0;
}

.life-event-graph .graph-contents {
	float: right;
	width: calc(100% - 72px);
}

.life-event-graph .graph-contents-inner {
	display: flex;
	justify-content: space-between;
	position: relative;
}

.life-event-graph .graph-contents-inner ul {
	width: calc(20% - 8px);
	position: relative;
}

.life-event-graph .graph-contents-inner ul li {
	width: 100%;
	background: #00afeb;
	position: relative;
	border-radius: 50px;
}

.life-event-graph .graph-contents-inner ul.list1 li { height: 615px; }

.life-event-graph .graph-contents-inner ul.list2 li:nth-of-type(1) { height: 75px; }
.life-event-graph .graph-contents-inner ul.list2 li:nth-of-type(2) { height: 435px; margin-top: 15px; }

.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(1) { height: 75px; margin-top: 90px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(2) { height: 75px; margin-top: 15px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(3) { height: 75px; margin-top: 15px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(4) { height: 75px; margin-top: 15px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(5) { height: 75px; margin-top: 15px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(6) { height: 128px; margin-top: 52px; }

.life-event-graph .graph-contents-inner ul.list4 li:nth-of-type(1) { height: 165px; margin-top: 270px; }
.life-event-graph .graph-contents-inner ul.list4 li:nth-of-type(2) { height: 165px; margin-top: 15px; }

.life-event-graph .graph-contents-inner ul.list5 li:nth-of-type(1) { height: 165px; margin-top: 90px; }
.life-event-graph .graph-contents-inner ul.list5 li:nth-of-type(2) { height: 165px; margin-top: 15px; }
.life-event-graph .graph-contents-inner ul.list5 li:nth-of-type(3) { height: 165px; margin-top: 15px; }

.life-event-graph .graph-contents-inner ul li.point1 {
	background: #19c896;
}

.life-event-graph .graph-contents-inner ul li.point2 {
	background: #3a78ff;
}

.life-event-graph .graph-contents-inner ul li p {
	height: 100%;
	text-align: center;
	line-height: 1.24;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	text-orientation: upright;
	-webkit-text-orientation: upright; 
	color: #fff;
	padding: 4px 0;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.life-event-graph .graph-contents-inner ul li p .smallest {
	display: block;
	transform: scale(.8);
}

.life-event-graph .graph-contents-inner .point-icon {
	width: 25%;
	position: absolute;
	top: 0;
	transform: translate(0,-120%);
}

.life-event-graph .graph-contents-inner .point-icon.no1 {
	left: 6.5%;
}

.life-event-graph .graph-contents-inner .point-icon.no2 {
	left: 78.5%;
}


/*POINT*/

.welfare-inner {
	padding-top: 10px;
}

.point-inner.point1 {
	color: #19c896;
}

.point-inner.point2 {
	color: #3a78ff;
}

.point-inner .section-title .font-comfortaa {
	display: inline-block;
    line-height: 32px;
    border: 2px solid;
    background: #fff;
    padding: 0 16px;
    border-radius: 18px;
}

.welfare-list li {
	width: 100%;
	padding: 36px;
	background: #fff;
	border-radius: 24px;
}

.welfare-inner li:not(:first-child) {
	margin-top: 32px;
}

.welfare-inner li .welfare-title  {
	position: relative;
	padding-bottom: 16px;
}

.welfare-inner li .welfare-title  span {
	display: inline-block;
	color: #fff;
	line-height: 30px;
	border-radius: 30px;
	padding: 0 15px;
	background: #9cb2c8;
	position: absolute;
	top: 0;
	right: 0;
}

.welfare-inner .housing-img,
.welfare-box-container .welfare-img-box {
	width: 70%;
    margin: 16px auto 0;
}

.welfare-inner .housing-img img,
.welfare-box-container .welfare-img-box img {
	display: block;
	width: 100%;
}


/*------------------------------------------------------------------------------------
                                 　先生・保護者の方へ
------------------------------------------------------------------------------------*/

.message-txt h2 {
	text-align: center;
}

.message-txt h2 + p {
	text-align: justify;
	margin-top: 40px;
}

.message-txt p + p {
	text-align: justify;
	margin-top: 2.5rem;
}

.message-img {
	border-radius: 24px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin-bottom: 32px;
}

.message-img + p {
	text-align: justify;
}

.message-img img {
	display: block;
}

.message-figure {
	width: 100%;
    margin-top: 30px;
}

.message-bk-loop {
	width: 100vw;
    height: 180px;
    margin-left: -16px;
    margin-bottom: 32px;
	background: url(../images/message/message-bk-loop.jpg) 0 center / auto 100% repeat-x;
	animation: looping 300000ms linear infinite;
}

@keyframes looping {
    from { background-position: 0 center; }
    to { background-position: 1000% center; }
}  

/*------------------------------------------------------------------------------------
                                 　日鉄物流へようこそ
------------------------------------------------------------------------------------*/

.hp-comments {
	padding-top: 50px;
}

.hp-comments-inner .hp-img {
	width: calc(100% - 16px);
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.hp-comments-inner + .hp-comments-inner {
	margin-top: 60px;
}

.hp-comments-inner:nth-of-type(2n+1) .hp-img {
	border-radius: 24px 0 0 24px;
	margin-left: 16px;
}

.hp-comments-inner:nth-of-type(2n) .hp-img {
	border-radius: 0 24px 24px 0;
	margin-right: 16px;
}

.hp-comments-inner .hp-img img {
	display: block;
}

.hp-comments-inner .hp-img.plural-img {
	position: relative;
}

.hp-comments-inner .hp-img.plural-img figure {
	display: block;
	width: 100%;
	height: 100%;
}

.hp-comments-inner .hp-img.plural-img figure:first-child {
	position: relative;
	z-index: 1;
	animation: slide-in 9600ms linear infinite;
}

.hp-comments-inner .hp-img.plural-img figure:last-child {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}

@keyframes slide-in {
	from, 22.5% { opacity: 1; }
	27.5%, 72.5% { opacity: 0; }
	77.5% ,to { opacity: 1; }
}

.hp-comments-inner .hp-img.plural-img figure figcaption {
	position: absolute;
    right: 16px;
    bottom: 16px;
    font-size: 10px;
    line-height: 18px;
    font-weight: bold;
    background: #fff;
    border-radius: 9px;
    padding: 0 9px;
}

.hp-comments-inner .hp-txt {
	width: 100%;
	color: #fff;
	padding: 0 16px;
}

.hp-comments-inner .hp-txt-head {
	margin: 40px auto 32px;
}

.hp-comments-inner .hp-txt-head .small {
	display: block;
    margin-bottom: 16px;
}

.hp-comments-inner .hp-profile {
	width: calc(100% - 16px);
    background: #fff;
    padding: 32px 16px 32px 58px;
    position: relative;
	margin-top: 40px;
}

.hp-comments-inner:nth-of-type(2n+1) .hp-profile {
	border-radius: 20px 0 0 20px;
    margin-left: 16px;
}

.hp-comments-inner:nth-of-type(2n) .hp-profile {
	border-radius: 0 20px 20px 0;
    margin-right: 16px;
}

.hp-comments-inner .hp-profile dt {
	color: #00afeb;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    top: 32px;
    left: 24px;
}

.hp-comments-inner .hp-profile .hp-profile-name {
	line-height: 1;
    margin-bottom: 12px;
}

.hp-comments-inner .hp-profile .hp-profile-txt {
	line-height: 1.8;
}


/*------------------------------------------------------------------------------------
                                 　　スペシャルコンテンツ
------------------------------------------------------------------------------------*/

#special #header {
	display: none;
}

#special #main article > section:last-child {
	padding-bottom: 0;
}

.special-header {
	width: 100%;
	height: 100vh;
	position: relative;
	background: #00aeea;
}

.special-header-inner {
	width: 100%;
	height: 100%;
	background: url(../images/common/dots-bk.png) center center / 12px 12px repeat;
}

.special-header-inner .special-index-figure {
	width: 110%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	overflow: hidden;
	line-height: 0;
	z-index: 1;
}

.special-header-inner .special-index-figure img {
	width: 100%;
	position: absolute;
	left: 0;
	transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
}

.special-header-inner .special-index-figure .title {
	position: relative;
	z-index: 4;
	opacity: 0;
}

.special-header-inner .special-index-figure .title.active {
	opacity: 1;
}

.special-header-inner .special-index-figure .front {
	bottom: 19%;
	z-index: 3;
	transform: scale(.8,0);
	transform-origin: center bottom;
}

.special-header-inner .special-index-figure .back {
	bottom: 19%;
	z-index: 2;
	transform: scale(.8,0);
	transform-origin: center bottom;
}

.special-header-inner .special-index-figure .front.active,
.special-header-inner .special-index-figure .back.active {
	transform: scale(1,1);
}

.special-header-inner .special-index-figure .text {
	top: -14%;
	z-index: 1;
	transform: rotate(-180deg);
	transition: all 900ms cubic-bezier(0.77, 0, 0.175, 1);
}

.special-header-inner .special-index-figure .text.active {
	transform: rotate(0);
}

.special-header-inner .illust {
	position: absolute;
	opacity: 0;
	width: 40%;
}

.special-header-inner .illust.lv1 { top: 74%; left: 28%; }
.special-header-inner .illust.lv2 { top: 16%; left: 60%; }
.special-header-inner .illust.lv3 { top: 75%; left: -11%; }
.special-header-inner .illust.lv4 { top: 61%; left: 76%; }
.special-header-inner .illust.lv5 { top: 21%; left: -12%; }
.special-header-inner .illust.lv6 { top: 78%; left: 72%; }
.special-header-inner .illust.lv7 { top: 14%; left: 28%; }
.special-header-inner .illust.lv8 { top: 59%; left: -26%; }
.special-header-inner .illust.lv9 { top: 93%; left: 58%; }
.special-header-inner .illust.lv10 { top: 2%; left: 46%; }
.special-header-inner .illust.lv11 { top: 4%; left: 0%; }
.special-header-inner .illust.lv12 { top: 89%; left: 6%; }
.special-header-inner .illust.lv13 { top: 10%; left: 93%; }
.special-header-inner .illust.lv14 { top: 33%; left: 87%; }

.special-header-inner .to-anchor-button {
	width: 60px;
	height: 60px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	margin: auto;
	transform: translate(0,150%);
	opacity: 0;
	transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 600ms;
}

.special-header-inner .to-anchor-button.active {
	transform: translate(0,0);
	opacity: 1;
}

.special-header-inner .arrow {
	transform: rotate(-90deg);
}

.special-header-inner .arrow.hover {
	background: #0046AE !important;
}

.special-contents-inner:not(:first-of-type) {
	margin-top: 8px;
}

.special-contents-inner {
	width: 100%;
	height: 150vw;
	position: relative;
}

.special-contents-inner.photographer-bk {
	background: url(../images/special/photographer-img-sp.jpg) center center / cover no-repeat;
}

.special-contents-inner.phototour-bk {
	background: url(../images/special/phototour-img-sp.jpg) center center / cover no-repeat;
}

.special-contents-txt {
	position: absolute;
	left: 0;
	top: 48px;
}

.special-contents-txt .special-contents-txt-inner p {
	line-height: 1.72;
	margin: 12px 0 24px;
}

.special-contents-txt .read-more {
	text-align: left;
}

.special-contents-txt-inner.w-ver {
	color: #fff;
}

/*ADD MOVIE-BTN 20200401*/

.movie-bk {
    background: url(../images/special/movie-img-sp.jpg) center center / cover no-repeat;
}

.movie-bk .special-contents-txt {
    text-align: center;
    top: 50%;
    transform: translate(0, -50%);
}

.movie-bk .special-contents-txt-inner h2 {
    width: 80%;
    line-height: 0;
    margin: 0 auto;
}

.movie-bk .special-contents-txt .read-more {
    text-align: center;
}


/*------------------------------------------------------------------------------------
                                 　　製鉄所フォトツアー
------------------------------------------------------------------------------------*/

#photographer .special-header-inner:before,
#phototour .special-header-inner:before {
	content: "";
    display: block;
    width: 100%;
    height: 20px;
    background: url(../images/common/wave-sky-top.png) center bottom / 80px 20px repeat-x;
    position: absolute;
    left: 0;
    bottom: 0;
}

#phototour .special-header {
	background: url(../images/phototour/phototour-visual-bk-sp.jpg) center center / cover no-repeat;
}

.special-contents-title {
	text-align: center;
	color: #fff;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.special-contents-title h1 {
	margin-bottom: 16px;
}

.special-contents-title .maximum {
	display: block;
    font-size: 4.2rem;
    line-height: 1.24;
    margin-top: 12px;
}

.special-contents-title .font-comfortaa {
	display: block;
    font-size: 1.8rem;
    line-height: 1;
}

.special-contents-title h1 + .medium {
	line-height: 1.8;
}

#phototour-list {
	padding-top: 52px;
}

#phototour-list .phototour-list-inner {
	position: relative;
}

#phototour-list .phototour-list-inner:not(:first-child) {
	margin-top: 80px;
}

#phototour-list .phototour-img {
	width: 180%;
	line-height: 0;
	position: relative;
	left: -40%;
	border-radius: 50%;
	overflow: hidden;
	z-index: 1;
}

#phototour-list .phototour-img img {
	opacity: 0;
	transform: scale(1.25);
}

#phototour-list .in .phototour-img img {
	opacity: 1;
	transform: scale(1);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

#phototour-list .phototour-img-caption {
	display: block;
	height: 100%;
	color: #00afeb;
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	text-align: center;
    position: absolute;
    top: 0;
    left: calc(22% + 16px);
}

#phototour-list .phototour-txt {
	padding: 24px 16px 0;
	position: relative;
	z-index: 2;
}

#phototour-list .phototour-guide {
	width: 30%;
	line-height: 0;
    position: absolute;
    left: 16px;
    bottom: -6%;
}

#phototour-list .phototour-txt-inner {
	width: 65%;
    line-height: 1.54;
    background: #fff;
    padding: 16px;
	border-radius: 16px;
	position: relative;
    margin-left: 35%;
}

#phototour-list .phototour-txt-inner svg {
	width: 6vw;
    height: 4vw;
    position: absolute;
    left: -5vw;
    bottom: 12px;
}


/*------------------------------------------------------------------------------------
                                 　　社員がカメラマン
------------------------------------------------------------------------------------*/

#photographer .special-header {
	background: url(../images/photographer/photographer-visual-bk-sp.jpg) center center / cover no-repeat;
}

.photographer-list-inner {
	width: 100%;
}

.photographer-list-inner:not(:first-child) {
	margin-top: -20px;
}

.photographer-txt {
	width: 50%;
	transform: translate(0,-100%);
	position: relative;
    z-index: 1;
}

.photographer-txt .photographer-office {
	text-align: center;
	line-height: 1.26;
	color: #fff;
	margin: 0 auto 20px;
}

.photographer-txt .photographer-office + .read-more {
	text-align: center;
}

.smartphone-outline {
	width: 70%;
	height: 120vw;
	border: 3px solid #fff;
	border-radius: 24px;
	background: #00afeb;
	padding: 40px 4px;
	position: relative;
	box-shadow: 0 20px 40px 4px rgba(0,70,175,.35);
}

.smartphone-outline .smartphone-inner {
	width: 100%;
	height: 100%;
	padding: 12px;
	border-radius: 8px;
	background: #fff;
}

.smartphone-outline .smartphone-inner-img {
	border-radius: 6px;
	overflow: hidden;
	z-index: 1;
	position: relative;
}

.smartphone-outline .smartphone-photographer {
	width: 70%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10%;
    z-index: 1;
    margin: auto;
}

.smartphone-outline .smartphone-photographer img {
	display: block;
	width: 100%;
}

.smartphone-outline .smallest {
	width: 100%;
	text-align: center;
	line-height: 1;
	color: #fff;
	position: absolute;
	top: 17px;
	left: 0;
}

.smartphone-outline .balloon img {
	display: block;
	width: 100%;
}

.photographer-list-inner:nth-child(2n+1) .photographer-txt {
	margin-left: 50%;
}

.photographer-list-inner .smartphone-outline {
	opacity: 0;
	transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
}

.photographer-list-inner:nth-child(2n+1) .smartphone-outline {
	left: -5%;
	transform: rotate(22.5deg) translate(0,100%);
}

.photographer-list-inner:nth-child(2n) .smartphone-outline {
	right: -5%;
	transform: rotate(-22.5deg) translate(0,100%);
	margin-left: 30%;
}

.photographer-list-inner.in:nth-child(2n+1) .smartphone-outline {
	opacity: 1;
	transform: rotate(22.5deg);
}

.photographer-list-inner.in:nth-child(2n) .smartphone-outline {
	opacity: 1;
	transform: rotate(-22.5deg);
}

.photographer-list-inner .smartphone-outline .balloon {
	position: absolute;
    width: 45%;
    z-index: 1;
	transform: scale(0);
	transition: all 400ms cubic-bezier(0.77, 0, 0.175, 1) 450ms;
}

.photographer-list-inner.in .smartphone-outline .balloon {
	transform: scale(1);
}

.photographer-list-inner:nth-child(2n) .smartphone-outline .balloon {
	top: 38%;
    left: -23%;
}

.photographer-list-inner:nth-child(2n+1) .smartphone-outline .balloon {
	top: 47%;
    right: -16%;
}


/*------------------------------------------------------------------------------------
                                 　　社員がカメラマン 個別
------------------------------------------------------------------------------------*/

.page-header.photographer-header {
	background: #fff;
}

.page-header.photographer-header .page-title {
	color: #00aeea;
}

.photographer-pictures .smartphone-outline {
	position: relative;
	z-index: 1;
	margin: -50% auto 0;
}

.photographer-pictures-list {
	position: relative;
	padding: 60px 0 0;
	margin-bottom: -30px;
}

.photographer-pictures-list:before {
	content: "";
	display: block;
	width: 10px;
	height: calc(100% - 32vw);
	border-radius: 0 0 5px 5px;
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.photographer-pictures-list .photographer-pictures-list-inner {
	border-radius: 6px;
	padding: 12px 12px 18px;
	background: #fff;
	position: relative;
	z-index: 1;
	box-shadow: 0 4px 8px 1px rgba(0,70,175,.35);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.photographer-pictures-list .photographer-pictures-list-inner:nth-child(2n) {
	transform: rotate(-22.5deg) translate(60%,60%);
	transform-origin: top right;
	opacity: 0;
}

.photographer-pictures-list .photographer-pictures-list-inner:nth-child(2n+1) {
	transform: rotate(22.5deg) translate(-60%,60%);
	transform-origin: top left;
	opacity: 0;
}

.photographer-pictures-list .photographer-pictures-list-inner:nth-child(2n).in,
.photographer-pictures-list .photographer-pictures-list-inner:nth-child(2n+1).in {
	transform: rotate(0) translate(0,0);
	opacity: 1;
}

.photographer-pictures-list li:not(:first-child) {
	margin-top: 60px;
}

.photographer-pictures-list .photographer-pictures-list-inner h2 {
	text-align: center;
	padding-top: 12px;
}

.photographer-pictures-list .photographer-pictures-list-inner h2 .font-comfortaa {
	display: block;
}

.photographer-pictures-list li.photographer-list-rear {
	width: 100%;
	margin: 60px auto 0;
}

.photographer-pictures-list li.photographer-list-rear .rear-img {
	width: 70%;
    height: 0;
    padding-top: 70%;
    border-radius: 50%;
    background: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 0 40px 4px rgba(0,70,175,.35);
    margin: 0 auto;
    transform: scale(.2);
    transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.photographer-pictures-list li.photographer-list-rear.in .rear-img {
	transform: scale(1);
}

.photographer-pictures-list li.photographer-list-rear .rear-img img {
	display: block;
	width: 67.5%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	opacity: 0;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1) 150ms;
}

.photographer-pictures-list li.photographer-list-rear.in .rear-img img {
	opacity: 1;
}

.photographer-pictures .add-contents-txt {
	color: #fff;
}


/*------------------------------------------------------------------------------------
                                追加動画 20200401
------------------------------------------------------------------------------------*/

#movie .page-header {
    background: url(../images/special/movie-img-sp.jpg) center center / cover no-repeat;
}

#movie .page-title {
    padding-left: calc(10% + 16px);
    padding-right: calc(10% + 16px);
    line-height: 0;
}

#movie .works-inner {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
}

#movie .works-inner .columnInner {
	width: calc(50% - 8px);
}

#movie .works-inner .columnInner:not(:last-child) {
    margin-bottom: 40px;
}

#movie .works-inner .empty {
	display: none;
}

#movie .works-inner .largest {
	font-size: 2rem;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 0;
}

#movie .women-movie {
    background: url(../images/common/pink-dots-bk.gif) center top / 100px 100px repeat;
}

#movie .women-movie .section-title {
    padding-top: 70px;
}

#movie .women-movie-img {
    margin-top: 32px;
}

#movie .women-movie-img a {
    display: block;
    line-height: 0;
    overflow: hidden;
    border-radius: 24px;
    position: relative;
    z-index: 1;
}

#movie .women-movie-img p {
    margin-top: 10px;
}

#movie .movie-play-icon {
	border-radius: 10px;
}

#movie .movie-play-icon:after {
    content: "";
    display: block;
    width: 74px;
    height: 100px;
    background: url(../images/common/movie-play.svg) center center / 100% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.45);
    opacity: .9;
    transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

#movie .hover .movie-play-icon:after,
#movie .movie-play-icon.hover:after{
    opacity: 1;
    transform: translate(-50%, -50%) scale(.6);
}

#movie .women-movie .movie-play-icon:after {
	transform: translate(-50%, -50%) scale(.8);
}

#movie .women-movie .hover .movie-play-icon:after,
#movie .women-movie .movie-play-icon.hover:after{
    transform: translate(-50%, -50%) scale(1);
}

/*20230407 追加*/

#movie .women-movie .wmHead {
	position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

#movie .women-movie .wmHead:before {
	content: "";
	display: block;
	width: 24px;
	height: 33px;
	background: url(../images/movie/wmhead-left.svg) center center / cover no-repeat;
    transform: scale(.75);
}

#movie .women-movie .wmHead:after {
	content: "";
	display: block;
	width: 24px;
	height: 33px;
	background: url(../images/movie/wmhead-right.svg) center center / cover no-repeat;
    transform: scale(.75);
}

#movie .women-movie .wmHead span {
    display: inline-block;
    font-size: 17px;
	position: relative;
}


/*MODAL LITY*/

.lity {
    background: rgba(255, 255, 255, .85);
    transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.lity-content {
    transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

.lity-content:after {
    box-shadow: none;
}

.lity-close,
.lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {
    width: 52px;
    height: 52px;
    position: fixed;
    right: auto;
    left: 0;
    top: 0;
    -webkit-appearance: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    padding: 0;
    color: #fff;
    font-style: normal;
    font-size: 0;
    text-shadow: none;
    border: 0;
    background: #fff;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.lity-close:before,
.lity-close:after {
    content:"";
    display: block;
    width: 20px;
    height: 1px;
    background: #0046AF;
    position: absolute;
    top: 26px;
    left: 16px;
    margin: auto;
}

.lity-close:before {
    transform: rotate(45deg);
}

.lity-close:after {
    transform: rotate(-45deg);
}

/*------------------------------------------------------------------------------------
                                    以下 PC 用
------------------------------------------------------------------------------------*/

@media print, screen and (min-width: 481px) {
	
/*------------------------------------------------------------------------------------
                                 　　INDEX
------------------------------------------------------------------------------------*/
	
/*VISUAL*/
	
.index-header {
    width: 100%;
    height: 100vh !important;
}

.visual {
    background: url(../images/index/visual-sky-pc.jpg) center bottom / cover no-repeat;
}

.visual-title {
	width: 67.5%;
    max-width: 1024px;
    padding: 0;
    top: 52.5%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.visual-title h1 {
    text-align: center;
    transform: translate(0,-50px);
}

.visual-title span {
	margin-bottom: 0;
}

#index.active .visual-title span {
    transform: translate(0,50%);
}
    
/*ADD MOVIE-BTN 20200401*/
    
.visual-link {
    width: 160px;
    left: 30px;
    bottom: 60px;
}


/*CONCEPT*/

.index-concept {
	text-align: center;
	padding-top: 140px;
    padding-bottom: 120px;
	margin-top: -40px;
}

.index-concept .hidden {
	display: inline;
}

.index-concept .index-concept-txt {
	font-size: 2rem;
    line-height: 2.8;
}


/*TOP CONTENTS*/

.index-top-contents-inner {
	width: 1024px;
	margin: 0 auto;
}

.index-top-contents-inner + .index-top-contents-inner {
    margin-top: 80px;
}

.index-top-contents-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.index-top-contents-inner:nth-of-type(2n) {
	flex-direction: row-reverse;
}

.index-top-img {
	width: 640px;
	border-radius: 40px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.index-top-txt {
	width: 336px;
	padding: 0;
}

.index-top-txt .index-top-txt-title span {
	margin-bottom: 20px;
}

.index-top-txt p {
    margin: 24px 0 36px;
}


/*INTERVIEW*/

.index-interview {
    background: url(../images/common/big-dots-bk.gif) center center / 360px 360px repeat;
}

.index-interview-inner {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}

.index-interview .section-title {
	padding-top: 120px;
}

.index-interview-inner .slide {
	width: 440px;
	margin: 0 auto;
}

.index-interview-inner .slide .slick-list {
	overflow: visible;
	margin-bottom: 40px;
}

.index-interview-inner .slide .slick-slide {
	padding: 0 50px;
	position: relative;
	transform: scale(.65);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.index-interview-inner .slide .slick-slide.slick-active {
	transform: scale(1);
}

.index-interview-inner .slide figure {
	width: 340px;
    border-radius: 0 0 170px 170px;
	margin-bottom: 30px;
}

.index-interview-inner .slide p {
	margin-bottom: 0;
}

.index-interview-inner .slide .read-more {
	position: absolute;
	top: 344px;
	left: 40px;
	z-index: 5;
}

#interview-arrow .arrow-prev {
	left: 220px;
}

#interview-arrow .arrow-next {
	right: 220px;
}

#interview-arrow .arrow-prev,
#interview-arrow .arrow-next {
    top: 172px;
}


/*SPECIAL*/
    
.index-special .index-special-inner {
    padding-bottom: 240px;
}

.index-special .index-special-contents {
	width: 1024px;
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
	margin: 0 auto;
	position: relative;
}

.index-special .index-special-contents-inner {
	width: 488px;
}

.index-special .index-special-contents-inner + .index-special-contents-inner {
	margin-top: 120px;
}

.index-special .index-top-img {
	width: 100%;
}

.index-special .index-top-txt {
	width: 100%;
	text-align: left;
	padding-top: 30px;
}

.index-special .index-top-txt .index-top-txt-title {
	font-size: 2.6rem;
	text-align: left;
}

.index-special .index-top-txt p {
	margin: 20px 0 30px;
}

.index-special .read-more {
	display: inline-block;
}

.index-special .index-special-contents .index-special-figure {
	position: absolute;
}

.index-special .index-special-contents .index-special-figure.binoculars {
	top: 340px;
	right: 0;
}

.index-special .index-special-contents .index-special-figure.photographer {
	left: -30px;
    bottom: -250px;
}
    
/*ADD MOVIE-BTN 20200401*/

.index-special .index-movie-contents {   
    width: 100%;
}
    
.index-special .index-movie-contents .index-top-img h2 {
    width: 640px;
    padding: 25px 135px;
    margin: 0 auto;
}
    
.index-special .index-movie-contents .index-top-txt {
    padding-top: 0;
    width: 640px;
    text-align: center;
}
    
.index-movie-contents .index-top-img:before {
    width: 640px;
    height: 100%;
    border-radius: 40px;
}
    
.index-movie-contents .index-top-img:after {
    left: 50%;
    transform: translate(-50%, 0);
    background: url(../images/index/index-movie-background.png) 0 center / auto 240px repeat-x;
}
    

/*OTHER*/

.index-bottom-contents-inner li {
	width: 220px;
}

.index-bottom-contents-inner li figure {
	border-radius: 40px;
	margin-bottom: 20px;
}


/*OFFICE INFO*/

#office-info {
	width: 1024px;
	margin: 0 auto;
	overflow: visible;
	position: relative;
}

.office-info-inner {
	width: 804px;
	padding: 0;
	margin: 0 auto;
}

.office-info-inner li {
	width: 220px;
	margin: 0 24px;
}

.office-info-inner li figure {
	border-radius: 40px;
	margin-bottom: 20px;
}

.office-info-inner li figure span {
	border: 12px solid #fff;
}

#office-info .slick-list {
	overflow: visible;
}

#office-info .slick-slide {
	opacity: .25;
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

#office-info .slick-slide.slick-active {
	opacity: 1;
}

#office-info .arrow-prev,
#office-info .arrow-next {
	top: 68px;
}


/*AFFILIATED*/

#affiliated {
	min-width: 1080px;
}

#affiliated > p {
    padding: 32px 32px 0;
}

#affiliated .affiliated-inner {
    overflow: visible;
}

#affiliated .affiliated-list {
    width: 1024px;
    padding: 16px 0 32px;
	margin: 0 auto;
}


#affiliated .affiliated-list li {
	width: calc(100% / 9 - 12px);
}


#affiliated-toggle-btn {
    width: 120px;
    height: 120px;
	top: -100px;
	right: 32px;
	padding: 24px;
}

#affiliated-toggle-btn.hidden {
	top: -152px;
}

#affiliated #affiliated-toggle-btn .close {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
}


/*------------------------------------------------------------------------------------
                                 　　日鉄物流のシゴト
------------------------------------------------------------------------------------*/

/*FLOW*/

#works .w-w-reverse {
    padding-bottom: 130px;
}

.workflow {
	background: url(../images/common/big-dots-bk.gif) center top / 360px 360px repeat;
}

.workflow .section-title {
    padding-top: 130px;
}

.workflow-list {
	width: 640px;
	margin: 0 auto;
}

.workflow-list-inner:not(:first-child) {
    margin-top: 80px;
}

.workflow-img {
	height: 360px;
	padding: 40px 80px;
	border-radius: 40px;
}

.workflow-txt {
	margin-top: -55px;
}

.workflow-txt + .small {
    top: 0;
    left: -50px;
}

.workflow-txt .workflow-txt-button {
	width: 384px;
	height: 110px;
	border-radius: 55px;
	padding: 21.5px 0;
}

.workflow-txt .workflow-description .workflow-description-inner {
    padding: 40px;
    border-radius: 40px;
}

.workflow-list-inner .vehicle-img {
	width: 420px;
}

.workflow-list-inner .vehicle-img figcaption {
    line-height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    margin-top: 20px;
}

.workflow-list-rear .maximum {
    height: 160px;
    line-height: 160px;
	border-radius: 80px;
}


/*BASE*/

.base .base-inner {
	width: 1024px;
	position: relative;
	margin: 0 auto;
}

.base .base-inner #map-container {
    margin-top: -120px;
}

.base .base-inner #map-container .map-container-inner {
	width: 640px;
	margin-left: 384px;
}

.base .base-inner #map-container .mapIcons span {
	width: 12px;
	height: 12px;
	transform: scale(1.25);
	cursor: pointer;
}

.base .base-inner #map-container .mapIcons span:hover {
	background: #FFB700;
	transform: scale(2.5);
	z-index: 2;
}

.base .base-inner #map-container .mapIcons span:after {
	transform: translate(-50%,-120%) scale(.75);
}

.base .base-inner #map-container .mapIcons span.hover:after {
	opacity: 1;
	visibility: visible;
}

.base .base-inner #map-container .map-figure {
	width: 240px;
}

.base .base-inner #map-container .map-figure.map-pointer1 {
	top: -25px;
    left: -394px;
}

.base .base-inner #map-container .map-figure.map-pointer2 {
	bottom: 50px;
    left: 425px;
}

.base-list {
	width: 768px;
    margin: 0 auto;
    overflow: visible;
    position: absolute;
    top: 150px;
    left: 0;
}

.base-list-slide {
    width: 536px;
    padding: 0;
    margin: 0 auto;
}

.base-list-slide li {
	width: 220px;
    margin: 0 24px;
}

.base-list-slide li figure {
	border-radius: 40px;
    margin-bottom: 20px;
}

.base-list-slide li figure span {
	border: 12px solid #fff;
}

#base-list-arrow .arrow-prev,
#base-list-arrow .arrow-next {
	top: 68px;
	background: #F8FAFC;
}


/*------------------------------------------------------------------------------------
                                 　　日鉄物流のシゴト 個別
------------------------------------------------------------------------------------*/

.works-inner {
	margin-bottom: -80px;
}

.works-inner .columnInner {
    margin-bottom: 80px;
}

.works-inner .works-img {
	border-radius: 40px;
}

.works-inner .largest {
	font-size: 2.5rem;
    padding-top: 18px;
    padding-bottom: 12px;
}

.characteristic .characteristic-img {
	width: 1024px;
	border-radius: 40px;
	overflow: hidden;
	position: relative;
	z-index: 1;
	margin: 0 auto;
}

.characteristic .characteristic-txt {
	margin-top: 60px;
	width: 768px;
}

.recruit .recruit-list {
	display: flex;
	flex-wrap: wrap;
}

.recruit .recruit-list dt {
	display: block;
	width: 256px;
}

.recruit .recruit-list dt,
.recruit .recruit-list dd {
	padding-top: 40px;
}

.recruit .recruit-list dd {
	width: 768px;
}

.recruit .recruit-list dd:not(:last-child) {
	padding-bottom: 40px;
}

#map {
    height: 360px;
    border-radius: 24px;
    margin-top: 40px;
}

.recruit .recruit-list dd span.linkTxt a:hover {
	text-decoration: none;
}


/*------------------------------------------------------------------------------------
                                 　　教えてセンパイ！
------------------------------------------------------------------------------------*/

.interviewee-list li {
	width: 100%;
	height: 384px;
	position: relative;
	border-radius: 40px;
	overflow: hidden;
	z-index: 1;
	margin-bottom: 30px;
}

.interviewee-list li a {
	background: linear-gradient(125deg, #00afeb, #0087e6, #0046af);
}

.interviewee-list li figure {
	width: 100%;
	height: 384px;
	padding-top: 0;
	background: none;
	border-radius: 0;
}

.interviewee-list li figure img {
	width: 440px;
	margin-left: 250px;
}

.interviewee-list li figure figcaption {
	width: 344px;
	font-size: 1.4rem;
	left: 40px;
	top: 50%;
	transform: translate(0,-50%);
}

.interviewee-list li .interviewee-txt {
	width: 344px;
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translate(0,-50%);
	z-index: 5;
}

.interviewee-list li .interviewee-head,
.interviewee-list li .interviewee-profile {
	color: #fff;
	margin-top: 0;
}


/*------------------------------------------------------------------------------------
                                 教えてセンパイ！ 個別
------------------------------------------------------------------------------------*/

.interviewee-header {
	margin-bottom: 200px;
}

.interviewee-header-inner figure {
	width: 70%;
	height: 740px;
	padding-top: 180px;
	text-align: center;
}

.interviewee-header-inner figure img {
	display: inline-block;
	height: 560px;
}

.interviewee-header-txt {
	width: 1024px;
	height: 596px;
	position: absolute;
	top: 144px;
	left: 0;
	right: 0;
	margin: auto;
}

.interviewee-header-head {
	width: 512px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
}

.interviewee-header-head .small {
	text-align: left;
	position: static;
}

.interviewee-header-head .maximum {
	margin-bottom: 0;
}

.interviewee-header-profile-inner {
	width: 512px;
    border-radius: 20px;
    padding: 40px 40px 40px 90px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(0,50%);
}

.interviewee-header-profile-inner dt {
    top: 40px;
    left: 40px;
}

.interviewee-contents {
    margin: 160px auto 0;
}

.interviewee-contents-img, .interviewee-contents-img img {
	width: 100%;
	max-width: 100%;
}

.interviewee-contents-inner .interviewee-contents-head {
	text-align: center;
    margin: 90px auto 60px;
}

.interviewee-contents-inner .interviewee-contents-head .small {
	margin-bottom: 30px;
}

.interviewee-contents-inner .interviewee-contents-txt {
    columns: 2;
	-webkit-columns: 2;
	column-gap: 48px;
	-webkit-column-gap: 48px;
}

.interviewee-column-inner {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}

.interviewee-column-img,
.interviewee-column-txt {
	width: 488px;
	margin: 0;
}


/*OTHER INTERVIEWEE*/

.other-interviewee .other-interviewee-inner {
    padding-top: 20px;
}

.other-interviewee .other-interviewee-img {
	width: 512px;
}

.other-interviewee .w-w {
	height: 40px;
	margin-top: -40px;
}


/*------------------------------------------------------------------------------------
                                 　　教育制度
------------------------------------------------------------------------------------*/

.educate-inner {
	position: relative;
}

.educate-img {
	min-width: 524px;
    width: calc(50% - 24px);
    height: 320px;
	border-radius: 40px 0 0 40px;
    position: absolute;
    top: 0;
	right: 0;
	margin: 0;
}

.educate-reverse .educate-img {
	border-radius: 0 40px 40px 0;
	left: 0;
	right: auto;
}

.educate-img img {
	object-fit: cover;
    object-position: 50% 0;
    font-family: 'object-fit: cover;';
    width: 100%;
    height: inherit;
}

.educate-txt {
	display: flex;
	align-items: center;
	width: 488px;
    min-height: 320px;
    padding: 0;
    margin: 0 auto;
	transform: translate(-268px,0);
}

.educate-reverse .educate-txt {
	transform: translate(268px,0);
}


/*三交替制度 2022.10.31追加*/

#education #container {
	overflow: initial;
}

#education .working-wrap .working-inner {
	display: flex;
    justify-content: space-between;
}

#education .working-wrap .working-inner .img {
	position: sticky;
	top: 40px;
	left: 0;
    width: 472px;
    height: 510px;
    padding: 0;
}

#education .working-wrap .working-inner .img img {
	border-radius: 40px;
}

#education .working-wrap .working-inner .list {
    width: 496px;
    margin-top: 0;
}

#education .working-wrap .working-inner .list:before {
	width: 2px;
    left: 35.5px;
}

#education .working-wrap .working-inner .list li h3 .call {
    line-height: 70px;
    font-size: 3rem;
    width: 72px;
    height: 72px;
}

#education .working-wrap .working-inner .list li h3 span:not(.call) {
    min-width: 196px;
    height: 58px;
    font-size: 2rem;
    line-height: 60px;
    padding: 0 20px 0 35px;
    border-radius: 0 29px 29px 0;
}

#education .working-wrap .working-inner .list li dl {
    padding: 18px 0 0 72px;
}

#education .working-wrap .working-schedule {
    margin-top: 80px;
	border-radius: 40px;
	padding: 40px 0;
}

#education .working-wrap .working-schedule h3 {
    padding: 0 40px;
}

#education .working-wrap .working-schedule .schedule-inner {
    overflow: auto;
    -ms-overflow-style: none;
}

#education .working-wrap .working-schedule .schedule-inner figure {
    width: 1024px;
    padding: 0 40px;
}

#education .working-wrap .working-schedule .schedule-inner figure figcaption {
    font-size: 1.2rem;
    margin-top: 8px;
}

	
/*------------------------------------------------------------------------------------
                                 　　よくある質問
------------------------------------------------------------------------------------*/

.faqInner .question {
	padding: 40px 100px 40px 100px;
}

.faqInner .question .initials {
	left: 40px;
}

.faqInner .question:before,
.faqInner .question:after {
	right: 40px;
}

.faqInner .question + .answer {
	margin-bottom: 40px !important;
}

.faqInner .question + .answer .answerInner {
	display: flex;
	justify-content: space-between;
    padding: 40px 42px;
    border-radius: 40px;
}

.faqInner .question + .answer .answerInner .initials {
	text-align: left;
}

.faqInner .question + .answer .answerInner .answer-txt {
	width: 884px;
}


/*------------------------------------------------------------------------------------
                                 	日鉄物流のくらし
------------------------------------------------------------------------------------*/

/*LIFE EVENT*/
	
.life-event-graph {
	font-size: 1.8rem;
	margin-top: 50px;
}

.life-event-graph .graph-head {
	float: none;
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}

.life-event-graph .graph-head li {
	width: 114px;
	height: 142px;
	margin: 0;
}

.life-event-graph .graph-contents {
	float: none;
	width: 100%;
}

.life-event-graph .graph-contents-inner {
	display: block;
	margin-bottom: -10px;
}

.life-event-graph .graph-contents-inner ul {
	display: flex;
	width: 100%;
	margin-bottom: 10px;
	position: relative;
}

.life-event-graph .graph-contents-inner ul li {
	height: 60px !important;
	margin-top: 0 !important;
}

.life-event-graph .graph-contents-inner ul li p {
	width: 100%;
	height: auto;
	-ms-writing-mode: lr-tb;
	writing-mode: initial;
    text-orientation: initial;
    -webkit-text-orientation: initial;
    padding: 0 5px;
}

.life-event-graph .graph-contents-inner ul li p .smallest {
	transform: none;
}

.life-event-graph .graph-contents-inner ul.list1 li { width: 894px; }

.life-event-graph .graph-contents-inner ul.list2 li:nth-of-type(1) { width: 114px; }
.life-event-graph .graph-contents-inner ul.list2 li:nth-of-type(2) { width: 634px; margin-left: 16px; }

.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(1) { width: 114px; margin-left: 130px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(2) { width: 114px; margin-left: 16px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(3) { width: 114px; margin-left: 16px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(4) { width: 114px; margin-left: 16px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(5) { width: 114px; margin-left: 16px; }
.life-event-graph .graph-contents-inner ul.list3 li:nth-of-type(6) { width: 186px; margin-left: 74px; }

.life-event-graph .graph-contents-inner ul.list4 li:nth-of-type(1) { width: 244px; margin-left: 390px; }
.life-event-graph .graph-contents-inner ul.list4 li:nth-of-type(2) { width: 244px; margin-left: 16px; }

.life-event-graph .graph-contents-inner ul.list5 li:nth-of-type(1) { width: 244px; margin-left: 130px; }
.life-event-graph .graph-contents-inner ul.list5 li:nth-of-type(2) { width: 244px; margin-left: 16px; }
.life-event-graph .graph-contents-inner ul.list5 li:nth-of-type(3) { width: 244px; margin-left: 16px; }

.life-event-graph .graph-contents-inner .point-icon {
    width: 100px;
    height: 32px;
    transform: none;
}

.life-event-graph .graph-contents-inner .point-icon.no1 {
	left: 924px;
	top: 15%;
}

.life-event-graph .graph-contents-inner .point-icon.no2 {
	left: 924px;
	top: 293px;
}


/*POINT*/

.welfare-list {
	margin-bottom: -40px;
}

.welfare-list li {
	padding: 40px;
    border-radius: 40px;
	margin-bottom: 40px;
}

.welfare-inner li:not(:first-child) {
    margin-top: 0;
}

.welfare-inner li .welfare-title span {
	top: 3px;
}

.welfare-box-container li {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.welfare-box-container  .welfare-txt-box {
	width: 700px
}

.welfare-box-container  .welfare-img-box {
	width: 204px;
	margin: 0;
}


/*------------------------------------------------------------------------------------
                                 　先生・保護者の方へ
------------------------------------------------------------------------------------*/

.message-txt h2 + p {
	text-align: center;
	letter-spacing: .075rem;
    margin-top: 60px;
}

.message-txt p + p,
.message-img + p {
	text-align: center;
	letter-spacing: .075rem;
	margin-top: 4rem;
}

.message-img {
	border-radius: 40px;
	margin: 10px auto 60px;
}

.message-figure {
    width: 560px;
    margin: 50px auto 0;
}

.message-bk-loop {
    height: 240px;
    margin-left: 50%;
    transform: translate(-50%, 0);
    margin-bottom: 40px;
}

.message-bk-loop + .medium {
	text-align: center;
}

/*------------------------------------------------------------------------------------
                                 　日鉄物流へようこそ
------------------------------------------------------------------------------------*/

.hp-comments {
	padding-top: 90px;
}

.hp-comments-inner {
	position: relative;
	margin-bottom: 40px;
}

.hp-comments-inner + .hp-comments-inner {
    margin-top: 120px;
}

.hp-comments-inner .hp-img {
	width: 488px;
}

.hp-comments-inner .hp-txt {
	width: 488px;
	min-height: 560px;
	padding: 0;
	margin: 0 auto;
}

.hp-comments-inner:nth-of-type(2n+1) .hp-txt {
	transform: translate(-268px,0);
}

.hp-comments-inner:nth-of-type(2n) .hp-txt {
	transform: translate(268px,0);
}

.hp-comments-inner .hp-txt-head {
	margin: 0 auto 60px;
}

.hp-comments-inner .hp-txt-head .small {
	margin-bottom: 30px;
}

.hp-comments-inner .hp-img,
.hp-comments-inner .hp-img.plural-img {
	min-width: 524px;
	width: calc(50% - 24px);
	height: 560px;
	position: absolute;
	top: 0;
}

.hp-comments-inner .hp-img img {
	object-fit: cover;
	object-position: 50% 0;
    font-family: 'object-fit: cover;';
	width: 100%;
	height: inherit;
}

.hp-comments-inner:nth-of-type(2n+1) .hp-img {
	right: 0;
	margin: 0;
	border-radius: 40px 0 0 40px;
}

.hp-comments-inner:nth-of-type(2n) .hp-img {
	left: 0;
	margin: 0;
	border-radius: 0 40px 40px 0;
}

.hp-comments-inner .hp-img.plural-img figure figcaption {
    right: 24px;
    bottom: 24px;
    font-size: 12px;
    line-height: 24px;
    border-radius: 12px;
    padding: 0 12px;
}

.hp-comments-inner .hp-profile,
.hp-comments-inner:nth-of-type(2n+1) .hp-profile,
.hp-comments-inner:nth-of-type(2n) .hp-profile {
	width: 512px;
    border-radius: 20px;
    padding: 40px 40px 40px 90px;
	z-index: 2;
	margin: -40px auto 0;
	position: absolute;
	top: 560px;
    left: 50%;
}

.hp-comments-inner .hp-profile dt {
	top: 40px;
    left: 40px;
}


/*------------------------------------------------------------------------------------
                                 　　スペシャルコンテンツ
------------------------------------------------------------------------------------*/

.special-header {
    height: 100vh !important;
}

.special-header-inner .special-index-figure {
	width: calc(90vh - 144px);
	min-width: 456px;
	top: 54%;
}

.special-header-inner .illust {
	width: 35vh;
	min-width: 225px;
	top: 50% !important;
	left: 50% !important;
}

.special-header-inner .illust.lv1 { transform: translate(80%,30%); }
.special-header-inner .illust.lv2 { transform: translate(70%,-97%); }
.special-header-inner .illust.lv3 { transform: translate(-128%,158%); }
.special-header-inner .illust.lv4 { transform: translate(-70%,-226%); }
.special-header-inner .illust.lv5 { transform: translate(-157%,-163%); }
.special-header-inner .illust.lv6 { transform: translate(34%,158%); }
.special-header-inner .illust.lv7 { transform: translate(32%,-201%); }
.special-header-inner .illust.lv8 { transform: translate(-197%,21%); }
.special-header-inner .illust.lv9 { transform: translate(-235%,-233%); }
.special-header-inner .illust.lv10 { transform: translate(154%,125%); }
.special-header-inner .illust.lv11 { transform: translate(137%,-173%); }
.special-header-inner .illust.lv12 { transform: translate(-230%,146%); }
.special-header-inner .illust.lv13 { transform: translate(-263%,-102%); }
.special-header-inner .illust.lv14 { transform: translate(167%,-42%); }

.special-header-inner .illust.lv15 { transform: translate(237%,-164%); }
.special-header-inner .illust.lv16 { transform: translate(-290%,45%); }
.special-header-inner .illust.lv17 { transform: translate(-362%,-154%); }
.special-header-inner .illust.lv18 { transform: translate(237%,150%); }
.special-header-inner .illust.lv19 { transform: translate(262%,12%); }
.special-header-inner .illust.lv20 { transform: translate(-360%,152%); }
.special-header-inner .illust.lv21 { transform: translate(-365%,0%); }

.special-header-inner .to-anchor-button {
	width: 80px;
	height: 80px;
	bottom: 20px;
}

.special-contents-inner {
	height: calc(90vh - 144px);
	min-height: 480px;
}

.special-contents-inner:not(:first-of-type) {
    margin-top: 10px;
}

.special-contents-inner.photographer-bk {
	background: url(../images/special/photographer-img-pc.jpg) center center / cover no-repeat;
}

.special-contents-inner.phototour-bk {
	background: url(../images/special/phototour-img-pc.jpg) center center / cover no-repeat;
}

.special-contents-inner:last-child {
	padding-bottom: 40px;
	height: calc(90vh - 104px);
	min-height: 520px;
}

.special-contents-txt {
	left: 0;
	right: 0;
	top: 50%;
	transform: translate(0,-50%);
	padding-right: 512px;
}

.special-contents-inner:nth-of-type(2n+1) .special-contents-txt {
	padding-right: 0;
	padding-left: 512px;
}

.special-contents-txt .special-contents-txt-inner .maximum {
	font-size: 4.8rem;
}

.special-contents-txt .special-contents-txt-inner p {
	margin-bottom: 36px;
}
    
/*ADD MOVIE-BTN 20200401*/
    
.movie-bk {
    background: url(../images/special/movie-img-pc.jpg) center center / cover no-repeat;
}

.special-contents-inner.movie-bk .special-contents-txt {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-right: 0;
    padding-left: 0;
}
    
.movie-bk .special-contents-txt-inner h2 {
    width: 360px;
    margin-bottom: 16px;
}


/*------------------------------------------------------------------------------------
                                 　　製鉄所フォトツアー
------------------------------------------------------------------------------------*/

#phototour .special-header {
	background: url(../images/phototour/phototour-visual-bk-pc.jpg) center center / cover no-repeat;
	background-attachment: fixed;
}

#photographer .special-header-inner:before,
#phototour .special-header-inner:before {
    height: 40px;
    background: url(../images/common/wave-sky-top.png) center bottom / 160px 40px repeat-x;
	animation: waving 2400ms cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

.special-contents-title {
	width: 640px;
	top: calc(50% + 48px);
}

.special-contents-title h1 {
    margin-bottom: 24px;
}

.special-contents-title .maximum {
    font-size: 6rem;
}

.phototour-contents-inner {
	position: relative;
}

#phototour-list {
	padding-top: 100px;
}

#phototour-list .phototour-list-inner {
	padding: 0 100px;
}

#phototour-list .phototour-list-inner:not(:first-child) {
	margin: 0 auto;
}

#phototour-list .phototour-img {
	width: 100%;
	left: 0;
	border-radius: 40px;
	overflow: hidden;
	z-index: 1;
	position: relative;
}

#phototour-list .phototour-img .fit {
	width: 100%;
	height: calc(100vh - 280px);
	left: 0;
	object-fit: cover;
    font-family: 'object-fit: cover;';
	opacity: 1;
	transform: scale(1);
}

#phototour-list .phototour-img-caption {
	text-align: left;
	text-indent: 40px;
	left: 20px;
}

#phototour-list .phototour-txt {
	padding: 20px 0 0;
	z-index: 1;
}

#phototour-list .phototour-guide {
    width: 200px;
	left: 20px;
	bottom: -7px;
}

#phototour-list .phototour-txt-inner {
	width: calc(100% - 220px);
	height: 60px;
	line-height: 60px;
	text-align: center;
	padding: 0 30px; 
	border-radius: 30px;
	margin-left: 220px;
}

#phototour-list .phototour-txt-inner svg {
    width: 30px;
    height: 20px;
    left: -24px;
    bottom: 16px;
}

#phototour-arrow {
	width: calc(100% - 120px);
	position: absolute;
	top: calc((100vh - 120px) / 2 );
	left: 0;
	right: 0;
	margin: auto;
}

#phototour-list .slick-dots li button {
	background: #fff;
}

#phototour-list .slick-dots li.slick-active button {
	background: #0046AE;
}


/*------------------------------------------------------------------------------------
                                 　　社員がカメラマン
------------------------------------------------------------------------------------*/

#photographer .special-header {
    background: url(../images/photographer/photographer-visual-bk-pc.jpg) center center / cover no-repeat;
	background-attachment: fixed;
}

.photographer-contents-inner {
	position: relative;
	padding-top: 100px;
}

.photographer-list {
	width: 100%;
	margin: 0 auto;
}

.photographer-list-inner {
	width: 256px;
	opacity: .25;
	transform: scale(.9);
	transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}

.photographer-list-inner:not(:first-child) {
    margin-top: 0;
}

.photographer-txt {
    width: 100%;
    transform: none;
	margin-top: 20px;
}

.photographer-list-inner:nth-child(2n+1) .photographer-txt {
	margin-left: 0;
}

.photographer-txt .photographer-office br {
	display: none;
}

.smartphone-outline {
	width: 256px;
	height: 448px;
}

.hover .smartphone-outline {
	transform: translate(0,-16px) !important;
}

.photographer-list-inner:nth-child(2n+1) .smartphone-outline,
.photographer-list-inner.in:nth-child(2n+1) .smartphone-outline {
	left: 0;
	opacity: 1;
	transform: none;
	margin: 0 auto;
	transition: all 450ms cubic-bezier(0.77, 0, 0.175, 1);
}

.photographer-list-inner:nth-child(2n) .smartphone-outline,
.photographer-list-inner.in:nth-child(2n) .smartphone-outline {
	right: 0;
	opacity: 1;
	transform: none;
	margin: 0 auto;
	transition: all 450ms cubic-bezier(0.77, 0, 0.175, 1);
}

.photographer-list .slick-list {
	overflow: visible;
}

.photographer-list-inner.slick-active {
	opacity: 1;
	transform: scale(1);
}

#photographer-arrow {
	width: 100%;
	position: absolute;
	top: 286px;
}

.photographer-list .slick-dots li button {
	background: #fff;
}

.photographer-list .slick-dots li.slick-active button {
	background: #0046AE;
}

.photographer-list-inner:nth-child(2n) .smartphone-outline .balloon,
.photographer-list-inner:nth-child(2n+1) .smartphone-outline .balloon {
	width: 110px;
    height: 82px;
    top: 15px;
    left: -50px;
	transform: scale(0) rotate(0);
	transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

.photographer-list-inner.in .smartphone-outline .balloon {
	transform: scale(0) rotate(0);
}

.photographer-list-inner.hover .smartphone-outline .balloon {
	transform: scale(1) rotate(-12deg);
}


/*------------------------------------------------------------------------------------
                                 　　社員がカメラマン 個別
------------------------------------------------------------------------------------*/

.photographer-pictures .smartphone-outline {
    margin: -320px auto 0;
}

.photographer-pictures-list {
	display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
	align-items: flex-start;
	padding: 0;
}

.photographer-pictures-list:before {
    height: calc(100% - 128px);
}

.photographer-pictures-list .photographer-pictures-list-inner {
	width: 447px;
}

.photographer-pictures-list li {
	margin-top: 60px;
}

.photographer-pictures-list li:nth-child(2n) {
	top: 180px;
	margin-left: 130px;
}

.photographer-pictures-list .photographer-pictures-list-inner {
    border-radius: 12px;
    padding: 18px 18px 24px;
}

.photographer-pictures-list .photographer-pictures-list-inner h2 {
    padding-top: 20px;
}

.photographer-pictures-list li.photographer-list-rear {
	margin: 60px auto 0;
}

.photographer-pictures-list li.photographer-list-rear:nth-child(2n+1) {
	margin-top: 240px;
}

.photographer-pictures-list li.photographer-list-rear .rear-img {
	width: 256px;
	padding-top: 256px;
}

.photographer-pictures-list li.photographer-list-rear .rear-img img {
	width: 175px;
}
    

/*------------------------------------------------------------------------------------
                                追加動画 20200401
------------------------------------------------------------------------------------*/
    
#movie .page-header {
    background: url(../images/special/movie-img-pc.jpg) center center / cover no-repeat;
}

#movie .page-title {
    padding-left: 0;
    padding-right: 0;
    width: 375px;
    left: 50%;
    transform: translate(-50%,-50%);
}
    
#movie .works-inner {
    justify-content: center;
}

#movie .works-inner .columnInner {
    width: 314px;
}

#movie .works-inner .columnInner.end {
	margin-right: 0;
}

#movie .works-inner .empty {
    display: block;
    width: 1px;
    height: 1px;
}

#movie .works-inner .works-img {
     border-radius: 24px;
}
    
 #movie .works-inner .columnInner:not(:last-child) {
    margin-bottom: 60px;
}

#movie .works-inner .largest {
    font-size: 2.5rem;
	padding-top: 16px;
}

#movie .movie-play-icon:after {
	transform: translate(-50%, -50%) scale(.8);
}

#movie .hover .movie-play-icon:after,
#movie .movie-play-icon.hover:after{
    transform: translate(-50%, -50%) scale(1);
}

#movie .women-movie {
    background: url(../images/common/pink-dots-bk.gif) center top / 360px 360px repeat;
}
    
#movie .women-movie .section-title {
    padding-top: 160px;
}
    
#movie .women-movie-img {
    width: 640px;
    margin: 50px auto 0;
	position: relative;
}

#movie .women-movie-img + .women-movie-img {
	margin-top: 40px;
}
    
#movie .women-movie-img p {
    margin-top: 15px;
}

.women-movie-inner {
    position: relative;
}
    
#movie .women-movie-img.first:before {
    content: url("../images/movie/movie-women-illsut.png");
    display: block;
    width: 190px;
    height: 236px;
    position: absolute;
    bottom: 33px;
    right: -120px;
    z-index: 5;
}

#movie .women-movie-img.second:before {
    content: url("../images/movie/movie-women-illsut2.png");
    display: block;
    width: 210px;
    height: 236px;
    position: absolute;
    bottom: 33px;
    left: -120px;
    z-index: 5;
}

#movie .women-movie .wmHead {
    margin-bottom: 12px;
}

#movie .women-movie .wmHead:before,
#movie .women-movie .wmHead:after {
    transform: scale(.9);
}

#movie .women-movie .wmHead span {
    font-size: 24px;
}
    
    
/*LITY*/

.lity-close, .lity-close:hover, .lity-close:focus, .lity-close:active, .lity-close:visited {
    width: 90px;
    height: 90px;
}
    
.lity-close:before, .lity-close:after {
    width: 40px;
    top: 44px;
    left: 25px;
    transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
 
.lity-close:hover:before {
    transform: rotate(135deg);
}
    
.lity-close:hover:after {
    transform: rotate(45deg);
}

}


/*------------------------------------------------------------------------------------
                                        SLIDE
------------------------------------------------------------------------------------*/

.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}


/*------------------------------------------------------------------------------------
                                        先生・保護者の方へ
------------------------------------------------------------------------------------*/
/*採用担当より_スライド削除により余白調整 2025.4.15 追加*/

#message #title {
    padding-bottom: 0;
}


/*------------------------------------------------------------------------------------
                                        日鉄物流の福利厚生
------------------------------------------------------------------------------------*/
/*その他手当の充実_イラスト変更により画像サイズも変更 2025.4.15 追加*/

#life #otherWelfare .welfare-box-container .welfare-img-box {
    width: 100%;
}

@media print, screen and (min-width: 481px) {
	#life #otherWelfare .welfare-box-container .welfare-txt-box {
        width: 500px;
    }
    #life #otherWelfare .welfare-box-container .welfare-img-box {
        width: 404px;
        margin: 0;
    }
}