@charset "UTF-8";
/* ----------------------------------------------------------------
共通
---------------------------------------------------------------- */
h2.tl_h2{
	font-size: 85px;
}
#contents .wrap > section{
	position: relative;
}
@media screen and (max-width: 767px) {
  /*Spのみ*/
h2.tl_h2 {
    font-size: 35px;
}
}
/* ----------------------------------------------------------------
汎用アニメーション関連
---------------------------------------------------------------- */
/* 汎用性フェードイン */
.js-fadeHalf{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.js-fadeHalf.is-in{
  opacity: 1;
  transform: translateY(0);
}
/* 汎用性カットイン */
.cutin_anime,.cutin_anime07{
	overflow: hidden;
}
.cutin_anime .anime,
.cutin_anime07 .anime{
    transform: translate3d(0, 110%, 0);
    will-change: transform;
    display: block;
}
.cutin_anime.active .anime,
.cutin_anime07.active .anime{
    transition: transform 1.9s cubic-bezier(.12, 1.15, .22, 1);
    transform: translate3d(0, 0, 0);
}
/* テキストに帯 */
.cutin_anime span.line {
    position: relative;
    display: inline-block;
    z-index: 0;
    margin: 0 5px;
    padding: 0 5px;
}
p.cutin_anime span.line::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.6em);
    width: 100%;
    height: 1.3em;
    background: #fff;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(.12,1.05,.22,1);
}
p.cutin_anime.active span.line::before{
	transition: transform 0.9s cubic-bezier(.15,.9,.25,1);
  transform: scaleX(1);
  transition-delay: 0.6s;
}
/* テキスト横スクロール */
.c-text {
    overflow: hidden;
    font-family: "Poppins", sans-serif;
    width: 90%;
    position: absolute;
    line-height: 1;
    font-size: 12vh;
    font-weight: 800;
    margin: auto;
    left: 0;
    right: 0;
    top: calc(20vh - 9vh);
}
.c-text.cutin_anime .show_under{
	display: flex;
transform: translate3d(0, 110%, 0);
  will-change: transform;
}
.c-text.cutin_anime.active .show_under {
    transition: transform 1.5s cubic-bezier(.12, 1.15, .22, 1);
    transition-delay: .7s;
    transform: translate3d(0, 0, 0);
}
/* FV専用 */
body #fv .c-text .show_under{
	display: flex;
transform: translate3d(0, 110%, 0);
  will-change: transform;
}
body.pv-open #fv .c-text .show_under {
    transition: transform 1.5s cubic-bezier(.12, 1.15, .22, 1);
    transition-delay: .7s;
    transform: translate3d(0, 0, 0);
}
.c-text__item {
  flex-shrink: 0;
  white-space: nowrap;
	padding: 0 10px;
	 animation: slideToLeft 20s linear infinite;
	animation-delay: 4s;
}
@keyframes slideToLeft {
  to {
    translate: -100%;
  }
}
@media screen and (max-width: 767px) {
.c-text {
    font-size: 7vh;
    top: calc(15vh - 5vh);
}
}
/* ----------------------------------------------------------------
ローディングアニメーション
---------------------------------------------------------------- */
#contents .wrap > #intro {
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 99999;
}
#intro .box {
	position: fixed;
	width: 95%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;
}
#intro .box .intro_logo{
	width: clamp(3rem, 5vw, 80px);
	margin: 0 auto 30px;
}
#intro .box p{
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 3vw, 3.8rem);
	line-height: 1;
	text-align: center;
	overflow: hidden;
}
/* 回転時：見切れ防止解除 */
#intro .box.spin .intro_logo {
  overflow: visible;
}
#intro .intro_logo span,
#intro .intro_copy span{
  display: block;
  transform: translate3d(0, 110%, 0);
  will-change: transform;
}

#intro .box.active .intro_logo span{
  transition: transform 1.5s cubic-bezier(.12, 1.15, .22, 1);
  transform: translate3d(0, 0, 0);
}

#intro .box.active .intro_copy span{
  transition: transform 1.5s cubic-bezier(.12, 1.15, .22, 1);
  transition-delay: 0.3s;
  transform: translate3d(0, 0, 0);
}

/* ロゴ回転アニメ */
@keyframes logoSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 初期状態：回転しない */
#intro .intro_logo img {
  display: block;
  will-change: transform;
	transform-origin: 48.826% 66.313%;
}

/* 回転発火 */
#intro .box.spin .intro_logo img {
  animation: logoSpin 1.9s cubic-bezier(.12,.9,.2,1) forwards;
}


/* ----------------------------------------------------------------
main_pv
---------------------------------------------------------------- */
#contents .wrap > section#main_pv {
    position: fixed;
    width: 100%;
    height: calc(100vh + 1px);
    overflow: hidden;
}
#main_pv .inner {
    width: 90%;
    height: 80vh;
    overflow: hidden;
    border-radius: 30px 30px 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#main_pv video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  transition: transform 0.4s ease-out;
}
#main_pv .bg{
	position: absolute;
	width: 100%;
	height: 100%;
}

/* 初期状態：中央の“線”だけ見える（左右50%ずつ切り抜き） */
#main_pv .inner{
  clip-path: inset(0 50% 0 50%);
  will-change: clip-path;
}

body.pv-open #main_pv .inner{
   animation: curtainOpen 1.4s cubic-bezier(.15, .65, .3, 1) forwards;
}

@keyframes curtainOpen{
  0% {
    clip-path: inset(0 50% 0 50%);
  }
  75% {
    clip-path: inset(0 -3.5% 0 -3.5%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@media screen and (max-width: 767px) {
  /*Spのみ*/
#main_pv .inner {
    height: 85vh;
    border-radius: 20px 20px 0 0;
}
#main_pv .slide_inner{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

#main_pv .slide_inner .eco_slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.2s ease;
}
	#main_pv.nofixed{
		display: none;
	}
}

/* ----------------------------------------------------------------
fv
---------------------------------------------------------------- */
#contents .wrap > section#fv{
	    width: 100%;
    height: 100lvh;
}
.fv_scroll {
    position: fixed;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 9999;
    mix-blend-mode: difference;
}
.fv_scroll p{
	line-height: 1;
	overflow: hidden;
	font-size: 1em;
	color: #ffffff;
	display: flex;
	    justify-content: center;
	margin-bottom: 5px;
}
.fv_scroll p span{
				  transform: translate3d(0, 110%, 0);
  will-change: transform;
}
.fv_scroll {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.fv_scroll.is-hide {
  opacity: 0;
  pointer-events: none; /* 念のため */
}
body.pv-open .fv_scroll p span{
	  transition: transform 1.5s cubic-bezier(.12, 1.15, .22, 1);
  transition-delay: 2.5s;
  transform: translate3d(0, 0, 0);
}
.fv_scroll .line span{
	background: #fff;
	height: 1px;
	display: block;
	    margin: 0 auto 5px;
	overflow: hidden;
	transform: scale(0, 1);
        transform-origin: left top;
        transition: transform 0.6s;
	transition-delay: 3s;
}
.fv_scroll .line span:nth-child(1){
	width: 60px;
}
.fv_scroll .line span:nth-child(2){
	width: 40px;
}
.fv_scroll .line span:nth-child(3){
	width: 30px;
	margin-bottom: 0;
}
body.pv-open .fv_scroll .line span {
transform: scale(1, 1);
}
/* ----------------------------------------------------------------
second_view
---------------------------------------------------------------- */
#second_view{
	min-height: 85lvh;
	height: 100%;
	color: #fff;
	text-align: center;
		padding-top: 50px;
}
#second_view .inner{
	width: 95%;
	max-width: 1000px;
	margin: 0 auto;
	min-height: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#second_view .inner .main_txt{
		overflow: hidden;
		    margin-bottom: 9vh;
}
#second_view .inner .main_txt p{
	font-size: clamp(2rem, -1.281rem + 6.84vw, 3.5rem);
	letter-spacing: 0.09em;
	font-weight: 700;
}
#second_view .inner .main_txt span.line{
	color: #000;
 text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
#second_view .inner .txt_box{
	position: relative;
}
#second_view .inner .txt_box p{
	overflow: hidden;
}

#second_view .inner .txt_box::before {
    content: "";
    position: absolute;
    background: url("../../common/img/logo_gray.svg") center center no-repeat;
    background-size: contain;
    width: 100%;
    height: 160%;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;   
    filter: blur(24px);
    transform: scale(1.05);     
    transition:
      opacity 1.2s ease,
      filter 1.2s ease,
      transform 1.2s ease;
}
#second_view.active .inner .txt_box::before {
    opacity: 0.4;
    filter: blur(0);
    transform: scale(1);
	transition-delay: 1s;
}

#second_view .inner .midahi{
	position: relative;
	font-size: 1.9em;
	font-weight: 700;
	margin-bottom: 30px;
	
}
#second_view .inner .txt{
	position: relative;
	    font-size: 1.2em;
    line-height: 1.8;
}
@media screen and (max-width: 767px) {
	/*Spのみ*/
	#second_view{
		    min-height: 95lvh;
	}
	#second_view .inner {
    width: 90%;
}
#second_view .inner .txt_area {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
    justify-content: center;
}
#second_view .inner .main_txt p {
    font-size: 1.8em;
}
#second_view .inner .midahi {
    font-size: 1.5em;
    margin-bottom: 20px;
}
#second_view .inner .txt {
    font-size: 0.85em;
}
#second_view .inner .txt_box:before {
    height: 110%;
}
}
/* ----------------------------------------------------------------
aboutus
---------------------------------------------------------------- */
#aboutus{
	background: #fff;
	    padding: 50px 0 30px;
	margin-top: -1px;
}
#aboutus .inner{
	margin: 0 auto 17vh;
	width: 100%;
	overflow: hidden;
}
#aboutus .about_tl{
		margin:0 0 150px;
	width: 100%;
	    text-align: center;
	position: relative;
	    overflow: hidden;
}
#aboutus .about_tl .inner_txt {
    margin: 0 auto;
    width: 95%;
    max-width: 1000px;
    position: absolute;
    top: 0;
    z-index: 1;
    margin: 0 auto;
    left: 0;
    right: 0;
}
#aboutus .about_tl .main_tl {
    font-family: "Poppins", sans-serif;
    line-height: 1;
    font-size: 8vh;
    letter-spacing: 0.05em;
    font-weight: 800;
}
#aboutus .about_tl .inner_txt .sub{
	    font-weight: 500;
    font-size: 1.4em;
	transition: color 0.3s ease 1.2s;
}
#aboutus .about_tl .inner_txt .sub span.line::before {
    background: #000;
}
#aboutus .about_tl .inner_txt .sub.active {
    color: #fff;
}
#aboutus .about_tl .c-text {
    width: 100%;
    color: #f8f8f8;
    position: relative;
    top: 0;
    padding-top: 3vh;
}
#aboutus .about_tl .c-text .c-text__item{
		    animation-delay: 0s;
}
#aboutus .about_tl .c-text span{
	font-weight: 500;
}

#aboutus .inner .about_box{
	margin:0 auto 100px;
	width: 95%;
	max-width: 1000px;
}
#aboutus .inner .about_box.box03{
	margin-bottom: 0;
}
#aboutus .inner .about_box .number_area{
	  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
	display: flex;
	align-items: flex-start;
	margin-bottom: 30px;
	
}
#aboutus .inner .about_box.box02 .number_area{
	    justify-content: end;
}
#aboutus .inner .about_box .number_area .txt {
    display: inline-block;
    padding: 5px 5px 5px 5px;
    font-size: 1.5em;
    border-top: solid 1px #000;
    line-height: 1;
    margin-top: 0.3em;
    margin-left: 0.2em;
}
#aboutus .inner .about_box .number_area .num_txt{
	    font-size: 3.7em;
    line-height: 1;
}
#aboutus .inner .about_box .img_area{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
#aboutus .inner .about_box.box03 .img_area{
	align-items: center;
}
#aboutus .inner .about_box .img_area .tl_area{
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	font-size: 5.2em;
	    letter-spacing: 0.09em;
	font-weight: 700;
	flex-shrink: 0; 
	white-space: nowrap;
}
#aboutus .inner .about_box .img_area .tl_area span{
		color: #fff;
 text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
              -1px 1px 0 #000, 1px -1px 0 #000,
              0px 1px 0 #000,  0-1px 0 #000,
              -1px 0 0 #000, 1px 0 0 #000;
	position: relative;
	display: inline-block;
}
#aboutus .tl_area span::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(0% - 0.15em);
    width: 100%;
    height: calc(100% + 0.3em);
    background: #000;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.6s ease;
    z-index: -1;
}
#aboutus .tl_area.is-in span::before{
  transform: scaleY(1);
  transition-delay: 1.2s;
}

#aboutus .inner .about_box.box01 .img_area  .main_img{
	padding-right: 5%;
}
#aboutus .inner .about_box.box02 .img_area  .main_img{
	padding-left: 5%;
}
#aboutus .inner .about_box .img_area02{
	width: 100%;
	margin: 0 auto;
	position: relative;
}
#aboutus .inner .about_box .img_area02 div{
position: relative;
	    display: inline-block;
}
#aboutus .inner .about_box .img_area02 {
    margin-top: -15%;
    height: auto;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
#aboutus .inner .about_box.box02 .img_area02{
	margin-top: -10%;
}
#aboutus .inner .about_box .img_area02 .goUp01{
	padding-bottom: 5%;
}
#aboutus .inner .about_box .txt_area{
	    text-align: center;
	    position: relative;
	margin-top: 50px;
}
#aboutus .inner .about_box .txt_area .btn_area{
	margin-bottom: 1px;
}
#aboutus .inner .about_box .txt_area > p {
    font-size: 1em;
    font-weight: 600;
    margin: 10px auto 40px;
    line-height: 1.9;
}
#aboutus .inner .about_box.box03 .img_area .tl_box{
	padding-right: 5vw;
}
#aboutus .inner .about_box.box03 .logo_anime{
  flex: 0 0 auto;
  position: relative;
  left: auto;  
  transform: none;

  width: calc(100% - 8vw);
  margin-left: calc((100vw - 100%) / 8);
}



@media screen and (max-width: 767px) {
	/*Spのみ*/
#aboutus {
    padding: 50px 0 70px;
	        margin-top: -1px;
}
#aboutus .inner {
    width: 90%;
	        margin-bottom: 0;
}
#aboutus .about_tl {
    margin: 0 0 50px;
	    overflow: visible;
}
	#aboutus .about_tl .main_tl{
		font-size: 35px;
	}
#aboutus .about_tl .inner_txt .sub {
    font-size: 0.9em;
}
	#aboutus .inner .about_box {
    margin-bottom: 60px;
}
#aboutus .inner .about_box .number_area .txt {
    padding: 5px 10px 5px 5px;
    font-size: 1em;
}
#aboutus .inner .about_box .number_area .num_txt {
    font-size: 2.5em;
}
#aboutus .inner .about_box .number_area {
    margin-bottom: 20px;
}
#aboutus .inner .about_box .img_area .tl_area {
    font-size: 2.2em;
    margin-right: 15px;
}
	#aboutus .inner .about_box.box02 .img_area .tl_area {
    margin-right: 0;
		margin-left: 15px;
}
	#aboutus .inner .about_box .img_area img{
	flex: 1 1 auto;
    min-width: 0;
}
	#aboutus .inner .about_box.box01 .img_area  .main_img {
    padding-right: 0;
}
	#aboutus .inner .about_box.box02 .img_area  .main_img {
    padding-left: 0;
}
	#aboutus .inner .about_box.box03 .txt_area > p {
    margin-top: -5vw;
}
	#aboutus .inner .about_box .img_area02{
		width: 95%;
	}
	#aboutus .inner .about_box .img_area02 .goUp01 {
    padding-bottom: 13%;
}
	#aboutus .inner .about_box.box01 .img_area02 div:nth-child(1){
		width: 50%;
	}
		#aboutus .inner .about_box.box01 .img_area02 div:nth-child(2){
		width:35%;
	}
	#aboutus .inner .about_box .txt_area{
		margin-top: 0;
	}
	#aboutus .inner .about_box .txt_area > p {
    font-size: 0.9em;
    margin: 30px auto;
		text-align: left;
}
	#aboutus .inner .about_box.box02 .img_area img{
		    margin-right: -5%;
		display: flex;
	}
		#aboutus .inner .about_box.box02 .img_area02 div:nth-child(1){
		width: 40%;
			padding-bottom: 15%;
	}
		#aboutus .inner .about_box.box02 .img_area02 div:nth-child(2){
        width: 55%;
	}
	#aboutus .inner .about_box.box02 .img_area02 div img{
		flex: 1 1 auto;
    min-width: 0;
	}
}
/* ----------------------------------------------------------------
aboutus画像アニメ
---------------------------------------------------------------- */
/* 各初期オフセットはそのまま */
.goUp00{ --startY: 20%; }
.goUp01{ --startY: 25%; }
.goUp02{ --startY: 35%; }

/* 初期：非表示＆下にいる */
.fadeup{
  opacity: 0;
  --p: 0;
  transform: translateY(calc(var(--startY, 10%) * (1 - var(--p))));
  transition: opacity .8s ease;
  will-change: transform, opacity;
}

/* 発火後：opacityだけ表示（追従のtransformは--pで継続） */
.fadeup.is-in{
  opacity: 1;
}

/* 画像：初期モノクロ */
.fadeup img{
  filter: grayscale(100%);
  transition: filter .8s ease;
  will-change: filter;
}

/* ディレイ後にカラー */
.fadeup.is-color img{
  filter: grayscale(0%);
}

/* ----------------------------------------------------------------
aboutanime
---------------------------------------------------------------- */
.about_box.box03 .txt_area{
	    margin-top: 3vw;
}

.logo_anime .anime_area{
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.logo_anime .anime_area .san img{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 50% 66.666%;
}
.logo_anime .anime_area .san::before{
  content:"";
  position:absolute;
  z-index:1;
  inset: 0; 
  left: 0;
  top: 0;
  transform: scaleX(1.1) scaleY(1.20);
  transform-origin: left top;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 15%,
    rgba(255,255,255,1) 80%
  );
  pointer-events: none;
}

.logo_anime .txt{
  position: absolute;
  left: -6.25vw;
  bottom: -1.25vw;
  width: clamp(120px, 18vw, 330px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: scale(0);
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
  z-index: 2;
overflow: hidden;
}
.logo_anime .txt.text01{
	background: url("../img/logo_anime01_bg.png") center center no-repeat;
	background-size: contain;
}
.logo_anime .txt.text02{
	background: url("../img/logo_anime02_bg.png") center center no-repeat;
	background-size: contain;
}
.logo_anime .txt.text03{
	background: url("../img/logo_anime03_bg.png") center center no-repeat;
	background-size: contain;
}
.logo_anime .txt p img{
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
	/*Spのみ*/
  #aboutus .inner .about_box.box03 .logo_anime{
    width: calc(100% - 15vw);
    margin-left: calc((100vw - 100%) / 15);
  }
.logo_anime .txt {
    left: -14.25vw;
    bottom: -4.25vw;
    width: 30vw;
}
	#aboutus .inner .about_box.box03 .img_area {
    overflow: hidden;
    padding-bottom: 15vw;
}
.about_box.box03 .txt_area {
    margin-top: -15vw;
}
.logo_anime .anime_area .san::before {
    background: linear-gradient(90deg,
    rgba(255,255,255,0) 15%,
    rgba(255,255,255,1) 50%
  );
}
}


.logo_anime .anime_area .san img{
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: transform 1.6s cubic-bezier(.16, 1, .30, 1);
  will-change: transform;
}

.logo_anime .txt{
  opacity: 1;              /* 常に1にする */
  transform: scale(0);
  visibility: hidden;

  transition:
    transform .35s cubic-bezier(.22, .8, .3, 1),
    visibility 0s linear .35s;

  will-change: transform;
}

.logo_anime .txt.is-show{
  transform: scale(1);
  visibility: visible;

  transition:
    transform .35s cubic-bezier(.22, .8, .3, 1),
    visibility 0s linear 0s;
}



/* ----------------------------------------------------------------
recruit_tl_area
---------------------------------------------------------------- */
#recruit_tl_area {
    text-align: center;
    padding: 13vh 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
#recruit_tl_area .main_tl{
	font-family: "Poppins", sans-serif;
    line-height: 1;
    font-size: 8vh;
    letter-spacing: 0.05em;
    font-weight: 800;
	color: #ffffff85;
}
/* ----------------------------------------------------------------
recruit
---------------------------------------------------------------- */
#white_recruit_bg{
	background: #fff
}
#recruit_bg{
		background: url("../img/recruit_bg_pc.jpg")center center no-repeat;
	background-size: cover;
	position: relative;
	    min-height: 110vh !important;
}

#recruit{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#recruit .inner {
    margin: 0 auto;
    width: 100%;
    padding: 5vh 20vw;
    max-width: calc(1200px + 20vw);
    height: 100%;
}
#recruit .inner .main_box {
    text-align: center;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5vh;
    height: 100%;
}
#recruit .inner .main_box > div{
	width: 100%;
}
#recruit .inner .main_box .tl{
	font-size: clamp(2rem, -1.281rem + 6.84vw, 3.5rem);
    letter-spacing: 0.09em;
    font-weight: 700;
	    position: relative;
    z-index: 1;
	color: #fff;
}
#recruit .inner .main_box .tl span.linetxt{
	    color: #000;
    text-shadow: 1px 1px 0 #FFF, -1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF, 0 -1px 0 #FFF, -1px 0 0 #FFF, 1px 0 0 #FFF;
}
#recruit .inner .main_box .donyu{
	    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	text-align: start;
    margin: 0 auto;
	    width: auto;
	    position: relative;
    z-index: 1;
}
#recruit .inner .main_box .donyu p {
    display: inline;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 1em 0.7em;
    font-size: 1.1em;
    color: #000;
    line-height: 4;
    background: rgba(255, 255, 255, 1);
}
#recruit .inner .main_box .btn_area{
		    position: relative;
    z-index: 1;
}
#recruit .inner .main_box .btn_area a {
    background: #00000000;
	color: #fff;
    border: solid 1px #fff;
}
#recruit .inner .main_box .btn_area a:hover{
	        color: #000;
}
#recruit .inner .main_box .btn_area a::after {
    background: #fff;
}
#recruit .inner .main_box .btn_area a .arrow{
	    background-color: #fff;
}
#recruit .inner .main_box .btn_area a .arrow::before, #recruit .inner .main_box .btn_area a .arrow::after {
    background-color: #fff;
}
#recruit .inner .main_box .btn_area a:hover .arrow,#recruit .inner .main_box  .btn_area a:hover  .arrow::before, #recruit .inner .main_box  .btn_area a:hover  .arrow::after {
    background-color: #000;
}
@media screen and (max-width: 767px) {
	/*Spのみ*/
#recruit_bg{
		background: url("../img/recruit_bg_sp.jpg")center center no-repeat;
	background-size: cover;
}
	#recruit_tl_area .main_tl{
		font-size: 35px;
	}
#recruit_tl_area .sub {
    font-size: 0.9em;
}
	#recruit .inner {
    padding: 5vh 10vw;
}
	#recruit .inner .main_box .tl {
    font-size: 1.5em;
}
	#recruit .inner .main_box .donyu p{
	        font-size: 0.8em;
        padding: 1em 0.4em;
        line-height: 3;
	}
}
/* ----------------------------------------------------------------
recruit 画像
---------------------------------------------------------------- */
#recruit .img_area .img-wrap{
  position: absolute;
  display: inline-block;
}

#recruit .img_area .img-wrap > div{
  position: relative;
  display: block;
  --fx: 0px;
  --fy: 0px;
  will-change: transform;
}

#recruit .img_area .img-wrap > div::before{
    content: "";
    position: absolute;
    filter: blur(4px);
    top: 5%;
    left: -5%;
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

/* 画像は前面 */
#recruit .img_area .img-wrap img{
  position: relative;
  z-index: 1;
  display: block;
}
#recruit .img_area .img-wrap.img01 {
    left: 0;
    top: 0%;
    transform: translateX(-100%);
    width: 13vw;
    max-width: 160px;
}
#recruit   .img_area .img-wrap.img02 {
    left: 0;
    top: 50%;
    transform: translateX(-100%)translateY(-50%);
    max-width: 290px;
    width: 20vw;
}

#recruit   .img_area .img-wrap.img03 {
    left: -10vw;
    bottom: 10%;
    transform: translateX(-90%);
    max-width: 100px;
    width: 10vw;
}

#recruit   .img_area .img-wrap.img04 {
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    width: 17vw;
    max-width: 200px;
}

#recruit   .img_area .img-wrap.img05 {
    right: 0;
    top: 3%;
    transform: translateX(100%);
    max-width: 180px;
    width: 11vw;
}

#recruit   .img_area .img-wrap.img06 {
    right: -3vw;
    top: 55%;
    transform: translateX(100%)translateY(-50%);
    max-width: 290px;
    width: 17vw;
}

#recruit   .img_area .img-wrap.img07 {
    right: 0vw;
    bottom: 5%;
    transform: translateX(100%);
    max-width: 230px;
    width: 15vw;
}

#recruit   .img_area .img-wrap img {
  position: relative;
  z-index: 1;
  display: block;
	    width: 100%;
}

@media screen and (max-width: 767px) {
	/*Spのみ*/
	#recruit .img_area .img-wrap {
    opacity: 0.8;
}
#recruit .main_box .img-wrap.img01 {
    top: 12vh;
    transform: translateX(-12vw);
    width: 19vw;
}
	#recruit   .img_area .img-wrap > div::before {
    filter: blur(2px);
}
#recruit   .img_area .img-wrap.img02 {
    top: 49%;
    left: -7vw;
    width: 33vw;
    bottom: 32vh;
    transform: translateX(-10vw)translateY(54%);
}
#recruit   .img_area .img-wrap.img06 {
    right: 12vw;
    top: 24vh;
    transform: translateX(100%)translateY(-50%);
    max-width: 290px;
    width: 28vw;
}
#recruit   .img_area .img-wrap.img05 {
    top: 69%;
    transform: translateX(15vw)translateY(-50%);
    width: 31vw;
}
}
/* ----------------------------------------------------------------
recruit コンテンツ表示アニメ
---------------------------------------------------------------- */
#recruit.active70 .tl p{
	overflow: hidden;
}
#recruit.active70 .tl .anime{
    transform: translate3d(0, 220%, 0);
    will-change: transform;
    display: block;
}
#recruit.active70.active .tl .anime{
    transition: transform 1.9s cubic-bezier(.12, 1.15, .22, 1);
    transform: translate3d(0, 0, 0);
	white-space: nowrap;
}
#recruit.active70 .tl span.linetxt {
    position: relative;
    display: inline-block;
    z-index: 0;
    margin: 0 5px;
    padding: 0 5px;
}
#recruit.active70 .tl span.linetxt::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 0.6em);
    width: 100%;
    height: 1.3em;
    background: #fff;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(.12,1.05,.22,1);
}
#recruit.active70.active .tl span.linetxt::before{
	transition: transform 0.9s cubic-bezier(.15,.9,.25,1);
  transform: scaleX(1);
  transition-delay: 0.6s;
}
#recruit.active70 .donyu,
#recruit.active70 .btn_area,
#recruit.active70 .anime_img
{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
#recruit.active70.active .donyu,
#recruit.active70.active .btn_area,
#recruit.active70.active .anime_img
{
  opacity: 1;
  transform: translateY(0);
}
#recruit.active70.active .donyu{
	transition-delay: 1s;
}
#recruit.active70.active .btn_area{
	transition-delay: 1.2s;
}
@media screen and (min-width: 768px) {
#recruit.active70 .img_area .img_anime01{
		transition-delay: 1.9s;
}
#recruit.active70 .img_area .img_anime02{
	transition-delay: 2.6s;
}
#recruit.active70 .img_area .img_anime03{
		transition-delay: 1.7s;
}
#recruit.active70 .img_area .img_anime04{
transition-delay: 2.2s;
}
#recruit.active70 .img_area .img_anime05{
	transition-delay: 2.4s;
}
#recruit.active70 .img_area .img_anime06{
	transition-delay: 1.5s;
}
#recruit.active70 .img_area .img_anime07{
	transition-delay: 2.1s;
}
}
@media screen and (max-width: 767px) {
	/*Spのみ*/
#recruit.active70 .img_area .img_anime01{
		transition-delay: 1.7s;
}
#recruit.active70 .img_area .img_anime02{
	transition-delay: 2.1s;
}
#recruit.active70 .img_area .img_anime05{
	transition-delay: 1.9s;
}
#recruit.active70 .img_area .img_anime06{
	transition-delay: 1.5s;
}
}
/* ----------------------------------------------------------------
recruit 画像アニメ用
---------------------------------------------------------------- */
@keyframes floatY {
  0%   { transform: translateY(var(--fy1)); }
  50%  { transform: translateY(var(--fy2)); }
  100% { transform: translateY(var(--fy1)); }
}

#recruit .main_box .img_area .img-wrap > div{
  animation: floatY var(--fd, 10s) ease-in-out var(--fdel, 0s) infinite;
}

/* ----------------------------------------------------------------
NEWS・TOPICS
---------------------------------------------------------------- */
#contents .wrap > section#news_topics{
		background: #fff;
}
#contents .wrap > section#news_topics > .inner{
	width: 95%;
	max-width: 900px;
	margin: 0 auto;
		padding: 100px 0 100px;
}
#news_topics h2.tl_h2{
	text-align: center;
}
#news_topics  .sub{
	text-align: center;
	    font-weight: 500;
		margin-bottom: 50px;
    font-size: 1.4em;
	color: #fff;
	    transition: color 0.3s ease 1.2s;
}
#news_topics  .sub span.line::before {
    background: #000;
}
#news_topics  .sub.active {
    color: #fff;
}
#news_topics .news_list{
	margin-bottom: 40px;
}
#news_topics .news_list ul{
	border-bottom: solid #c2c2c2 1px;
}
#news_topics .news_list ul li{
	border-top: solid #c2c2c2 1px;
	padding: 25px 35px 25px 10px;
	position: relative;
}
#news_topics .news_list ul li::before, #news_topics .news_list ul li::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 9px;
    width: 9px;
    height: 1px;
    border-radius: 9999px;
    background-color: #999999;
    transform-origin: calc(100% - 0px) 50%;
}

#news_topics .news_list ul li::before {
  transform: rotate(45deg);
}

#news_topics .news_list ul li::after {
  transform: rotate(-45deg);
}
#news_topics .news_list ul li.nopost{
    text-align: center;
}
#news_topics .news_list ul li.nopost::before,
#news_topics .news_list ul li.nopost::after{
    content:none;
}
#news_topics .news_list ul li .day_area{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
#news_topics .news_list ul li .day_area .day{
	font-size: 0.9em;
	margin-right: 10px;
}
#news_topics .news_list ul li .day_area .cate{
    	display: flex;
	align-items: center;
    gap:5px;
}
#news_topics .news_list ul li .day_area .cate a{
	font-size: 0.7em;
	display: block;
	background: #e6e6e6;
	padding: 2px 20px;
	text-align: center;
	border-radius: 3px;
	transition: background-color 0.3s ease;
}
#news_topics .news_list ul li .day_area .cate a:hover{
	text-decoration: none;
	background: #f4f4f4;
}
#news_topics .news_list ul li a.tl{
	font-weight: 500;
	transition: opacity 0.5s ease-out;
	    display: block;
        overflow-wrap: break-word;
}
#news_topics .news_list ul li a.tl:hover{
	opacity: 0.3;
	text-decoration: none;
}

@media screen and (max-width: 767px) {
  /*Spのみ*/
#contents .wrap > section#news_topics > .inner {
    width: 90%;
    padding: 50px 0 50px;
}
#news_topics .sub{
    margin-bottom: 20px;
}
#news_topics .news_list ul li {
    padding: 15px 25px 15px 10px;
}
#news_topics .news_list ul li::before, #news_topics .news_list ul li::after {
    right: 7px;
    width: 7px;
}
    #news_topics .news_list ul li .day_area {
    margin-bottom: 10px;
        display: block;
}
#news_topics .news_list ul li .day_area .day {
    font-size: 0.8em;
        margin-right: 0;
    margin-bottom: 10px;
}
#news_topics .news_list ul li .day_area .cate a {
        font-size: 0.5em;
        padding: 4px 4px;
}
	#news_topics .news_list ul li a.tl{
		 font-size: 0.9em;
	}
	#news_topics .btn_area{
		opacity: 1 !important;
	}
}

/* ----------------------------------------------------------------
second_view：ストライプ上部フェードマスク
---------------------------------------------------------------- */
#second_view{
  position: relative;
  overflow: hidden;
}

#second_view .sv-borders{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: none; /* JSで制御 */

  /* 上30%を透明 → 不透明にするマスク */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

#second_view .sv-borders span{
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  height: 1px;
}
/* ==============================
RECRUIT PV（高さauto / 可逆カーテン / 余計なvh無し）
============================== */

#recruit_bg_wrap{
  position: relative;
  overflow: visible;
}

/* #recruit_bg 自体をPV化 */
#recruit_bg.is-pv{
  position: sticky;
  top: 0;
  overflow: hidden;
    padding: 20vh 0;
  margin-left: auto;
  margin-right: auto;

  /* JSで変える（初期値だけ置く） */
  width: 90%;
  border-radius: 30px 30px 0 0;

  /* 高さは中身依存 */
  height: auto;
  min-height: 0;

  /* 見た目拡大（高さautoのまま） */
  --sy: 0.9;
  transform: scaleY(var(--sy));
  transform-origin: center top;

  /* カーテン（可逆：JSが --curtain を0〜1で更新） */
  --curtain: 1; /* 1=閉、0=全開 */
  clip-path: inset(0 calc(50% * var(--curtain)) 0 calc(50% * var(--curtain)));

  will-change: width, border-radius, transform, clip-path;
}

@media screen and (max-width: 767px){
  #recruit_bg.is-pv{
    border-radius: 20px 20px 0 0;
	      padding: 13vh 0 0px;
  }
}

/* 暗転レイヤー（JSで背景色を更新） */
#recruit_bg.is-pv .bg{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none;
  z-index: 0;
}

/* 中身は前面 */
#recruit_bg.is-pv > *{
  position: relative;
  z-index: 1;
}