/* 画面用 */
@media screen {
#main_print { display: none; }
}

/* 印刷用 */
@media print {
#main_print img { margin: 0 auto;}
}


#mainimage {
	position: relative;
	z-index: 0;
	width:100%;
	overflow: hidden;
	background: url("../images/h2.jpg") no-repeat scroll 50% 50% / cover;
	/*height: 200px;*/
	height: 240px;
	/*margin-top: 10px;*/
}
#mainimage.career_top {
	/*background: url("../images/career2/h2.jpg") no-repeat scroll 50% 50% / cover;*/
	background: #fff;
}
#mainimage.career_top .gara{
	/*
	background: url("../images/career/h2_bg.jpg") no-repeat left top;
	-moz-background-size:100% 100%;
	background-size:100% 100%; 
	*/
	position: absolute;
	left: 0;
	top: 0;
	/*width: 40%;*/
	width: 50%;
	height: 100%;
	z-index: 1;
	/*clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);*/
}
#mainimage.career_top .gara img{
	padding: 10px 10px;
	background: url("../images/main_filter.png") repeat;
}
@media print, screen and (min-width: 576px){
	#mainimage { height: 280px;}
	#mainimage.career_top .gara{ width: 40%;}
}
@media print, screen and (min-width: 768px){
	#mainimage { height: 270px;}
	#mainimage.career_top .gara{ width: 50%;}
	#mainimage.career_top .gara img{ padding: 20px 20px;}
}
@media print, screen and (min-width: 992px){
	#mainimage { height: 345px;}
}
@media print, screen and (min-width: 1200px){
	#mainimage { height: 420px;}
}
@media print, screen and (min-width: 1600px){
	#mainimage { height: 750px;}
	#mainimage.career_top .gara img{ padding: 30px 30px;}
}

.sp-slide{
}
.sp-slide img{
	display: block;
    aspect-ratio: 300/200;
    width: 100%;
    height: 100%;
    object-fit: cover;	
	/*object-position: 0 100%;*/
	/*clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);*/
	/*
	transform: skewX(30deg);
	transform: skewX(-30deg);
	*/
}
@media print, screen and (min-width: 576px){
	.sp-slide img{
		/*aspect-ratio: 300/160;*/
	}
}
@media print, screen and (min-width: 768px){
	.sp-slide img{
		/*aspect-ratio: 300/200;*/
		aspect-ratio: 300/160;
	}
}



	.wide{
		width: 70%;
		margin-left: auto;
	}



.midashi_h2{
	z-index: 15;
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	width: 100%;
}
.midashi_h2 h2{
	font-size: 20px;
	line-height: 1.4em;
	font-family: "BIZ UDPGothic", sans-serif;
	font-weight: 700;
	color: #fff;
	text-shadow: 1px 2px 3px #222;
}
.midashi_h2 h2.en{
	font-size: 30px;
	line-height: 1.4em;
	/*letter-spacing:0.1em;*/
	text-shadow: 1px 2px 3px #222;
}


@media print, screen and (min-width: 768px) {
	.midashi_h2{
		left: 10%;
	}
	#mainimage.h2_area { height: 180px;}
	.midashi_h2 h2{ font-size: 25px;}
	.midashi_h2 h2.en{ font-size: 40px;}
}
@media print, screen and (min-width: 992px) {
	#mainimage.h2_area { height: 260px;}
	.midashi_h2 h2{ font-size: 30px;}
	.midashi_h2 h2.en{ font-size: 60px;}
}
@media print, screen and (min-width: 1200px) {
	#mainimage.h2_area { height: 300px;}
	.midashi_h2 h2{ font-size: 35px;}
	.midashi_h2 h2.en{ font-size: 70px;}
}
@media print, screen and (min-width: 1600px) {
	.midashi_h2 h2.en{ font-size: 80px;}
}

h2 .text span {
  clip-path: inset(0 0 100% 0);
  transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 1s;
}
h2 .text span:nth-child(1) {
  transition-delay: 0.06s;
}
h2 .text span:nth-child(2) {
  transition-delay: 0.12s;
}
h2 .text span:nth-child(3) {
  transition-delay: 0.18s;
}
h2 .text span:nth-child(4) {
  transition-delay: 0.24s;
}
h2 .text span:nth-child(5) {
  transition-delay: 0.3s;
}
h2 .text span:nth-child(6) {
  transition-delay: 0.36s;
}
h2 .text span:nth-child(7) {
  transition-delay: 0.42s;
}
h2 .text span:nth-child(8) {
  transition-delay: 0.48s;
}
h2 .text span:nth-child(9) {
  transition-delay: 0.54s;
}
h2 .text span:nth-child(10) {
  transition-delay: 0.6s;
}
h2 .text span:nth-child(11) {
  transition-delay: 0.66s;
}
h2 .text span:nth-child(12) {
  transition-delay: 0.72s;
}
h2 .text span:nth-child(13) {
  transition-delay: 0.78s;
}
h2 .text span:nth-child(14) {
  transition-delay: 0.84s;
}
h2 .text span:nth-child(15) {
  transition-delay: 0.9s;
}
h2 .text span:nth-child(16) {
  transition-delay: 0.96s;
}
h2 .text span:nth-child(17) {
  transition-delay: 1.02s;
}
h2 .text span:nth-child(18) {
  transition-delay: 1.08s;
}
h2 .text span:nth-child(19) {
  transition-delay: 1.14s;
}
h2 .text span:nth-child(20) {
  transition-delay: 1.2s;
}
.text.-visible span {
  clip-path: inset(0 0 0 0);
}


/* scroll */
.scroll_area{
	position: relative;
	width: 55%;
}
.scroll_anime {
  position: absolute;
  bottom: 106px;
  right: min(3.91vw, calc(30px + 16px + 10px));
  writing-mode: vertical-rl;
  white-space: nowrap;
	/*
  font-family: "Oswald", sans-serif;
  font-weight: 500;
	*/
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.1em;
  z-index: 4;
	font-family: "Roboto", sans-serif;
	font-weight: 700;
}

.scroll_anime::before {
  content: "";
  position: absolute;
  bottom: -106px;
  left: calc(16px + 10px);
  width: 1px;
  height: 160px;
  /*background: rgba(29, 32, 135, 0.5);*/
	background: none;
}
.scroll_anime::after {
  content: "";
  position: absolute;
  bottom: -106px;
  left: calc(16px + 10px);
  width: 1px;
  height: 160px;
  background: #fff;
  animation: lineAnime 3s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes lineAnime {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}



.main_moji{
	position: absolute;
	/*
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	*/
	left: 10%;
	bottom: 5%;
	z-index: 10;
}
.main_moji img{
	max-width: 720px;
	width:100%;
	height: auto;
	/*margin: 0 auto;*/
}
@media print, screen and (min-width: 768px){
	.main_moji{
		left: 5%;
		bottom: 5%;
	}
	.main_moji img{
		width:70%;
	}
}