@charset "UTF-8";
/* ----------------------------------------------------------------
共通
---------------------------------------------------------------- */
.staff_name {
    position: fixed;
    z-index: 1;
    top: 200px;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    translate: -50% 0;
    left: 50%;
}
.staff_name > div{
	display: inline-block;
}
.staff_name .txt_01{
	border-bottom: solid 1px #000;
	margin-bottom: 30px;
	padding-bottom: 20px;
}
.staff_name .txt_01 .sub{
	font-size: 1.3em;
	margin-bottom: 5px;
}
.staff_name .txt_01 .eng{
	font-weight: 400;
}
.staff_name .txt_02{
	margin-bottom: 30px;
}
.staff_name .txt_02 .name{
	font-size: 3em;
	line-height: 1;
	margin-bottom: 10px;
}
.staff_name .txt_02 .eng {
    font-size: 1.8em;
    font-weight: 500;
}
.staff_name .txt_02 .eng span {
    font-weight: 600;
    font-size: 0.7em;
    padding-right: 10px;
}
.staff_name .tL_box p {
    display: inline;
    padding: 0.2em 0.4em;
    font-size: 1.8em;
    line-height: 2.1;
    color: #fff;
	white-space: nowrap;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background-image: linear-gradient(#000, #000),
    linear-gradient(90deg, rgba(36, 51, 116, 1) 0%, rgba(57, 109, 245, 1) 51%, rgba(79, 162, 193, 1) 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 0% 100%, 100% 100%;
    background-position: left top, left top;
    transition: background-size 0.5s cubic-bezier(.4,0,.2,1);
}
@media screen and (max-width: 767px) {
	
	.staff_name {
    position: absolute !important;
    top: 50px !important;
    translate: 0;
    left: 5%;
}
.staff_name .txt_01 .sub {
    font-size: 1em;
}
.staff_name .txt_01 {
    border-bottom: solid 1px #000;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.staff_name .txt_02 {
    margin-bottom: 20px;
}
.staff_name .txt_02 .name {
    font-size: 1.5em;
    line-height: 1;
    margin-bottom: 5px;
}
.staff_name .txt_02 .eng {
    font-size: 1.5em;
}
.staff_name .tL_box p {
    font-size: 1.4em;
    line-height: 2.1;
}
}
/* ----------------------------------------------------------------
FV
---------------------------------------------------------------- */
 #staff_fv {
    width: 100%;
    height: 550px;
    position: relative;
}
 #staff_fv .inner:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 767px) {
 #staff_fv {
    height: 300px;
}
}
/* ----------------------------------------------------------------
interview
---------------------------------------------------------------- */
#interview{
	margin: 80px 0;
	position: relative;
    z-index: 1;
}
#interview > .inner {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
#interview dl{
	margin-bottom: 70px;
	    padding-left: 37%;
}
#interview dl dt {
    position: relative;
    display: block;
    font-size: 1.1em;
    font-weight: 600;
    background: #e6e6e6;
    padding: 30px 30px 30px 120px;
}
#interview dl dt:before {
    position: absolute;
    content: "Q";
    width: 90px;
    font-family: "Montserrat", sans-serif;
    background: linear-gradient(90deg, rgba(36, 51, 116, 1) 0%, rgba(57, 109, 245, 1) 51%, rgba(79, 162, 193, 1) 100%);
    height: 100%;
    left: 0;
    top: 0;
    color: #fff;
    font-size: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
}
#interview dl dd{
	margin-top: 30px;
    font-weight: 600;
    line-height: 2;
}
#interview dl dd img{
	width: 100%;
	margin-top: 30px;
}
@media screen and (max-width: 767px) {
	#interview {
    margin: 40px 0;
}
#interview dl {
    margin-bottom: 40px;
    padding-left: 0;
}
#interview dl dt {
    font-size: 1em;
    padding: 15px 20px 15px 70px;
}
#interview dl dt:before {
    width: 60px;
    font-size: 1.5em;
}
#interview dl dd {
    margin-top: 20px;
    font-size: 0.9em;
}
#interview dl dd img {
    margin-top: 20px;
}
}
/* ----------------------------------------------------------------
staff_btn_area
---------------------------------------------------------------- */
#staff_btn_area{
	    max-width: 1200px;
    width: 90%;
    margin: 0 auto 30px;	
}
#staff_btn_area a {
    background: linear-gradient(90deg, rgba(36, 51, 116, 1) 0%, rgba(57, 109, 245, 1) 51%, rgba(79, 162, 193, 1) 100%);
    display: block;
    width: 550px;
    margin: 0 auto;
    color: #fff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#staff_btn_area a p{
		transition:opacity 0.4s;
}
#staff_btn_area a:hover{
	text-decoration: none;
}
#staff_btn_area a:hover p{
		opacity: 0.6;
}
#staff_btn_area a .eng{
font-size: 40px;	
}
#staff_btn_area a .btn .link .btn_arrow{
		position: absolute;
	}
#staff_btn_area a .btn .link::before{
	content: none;
}
#staff_btn_area a .btn{
	    width: 30px;
}
#staff_btn_area a .btn .link .btn_arrow{
	background: #fff;
}
#staff_btn_area a .btn .link .btn_arrow svg {
    color: #000;
}
@media screen and (min-width: 768px) {
  /*pcのみ*/
#staff_btn_area a:hover .btn_arrow svg{
  animation: arrowLoopSvg_l .6s ease-in-out both;
}
#staff_btn_area a:hover .box_bottom .txt_line p{
  background-size: 100% 100%, 100% 100%;
}
}
@keyframes arrowLoopSvg_l{
  0%   { transform: translateX(0);    opacity: 1; }
  45%  { transform: translateX(-20px); opacity: 1; } /* 右へ→見切れ */
  46%  { transform: translateX(20px);opacity: 0; } /* 左外へワープ */
  60%  { transform: translateX(20px);opacity: 1; } /* 左から出現 */
  100% { transform: translateX(0);    opacity: 1; }
}
@media screen and (max-width: 767px) {
	#staff_btn_area{
		margin-bottom: 0;
	}
	#staff_btn_area a{
		width: 100%;
	}
	#staff_btn_area a .eng {
    font-size: 27px;
}
	#staff_btn_area  .btn .link {
    padding-bottom: 18px;
}
}
/* ----------------------------------------------------------------
entry
---------------------------------------------------------------- */
#entry{
	padding: 100px 0;
}
#entry > .inner{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;	
}
#entry .entey_btn {
    display: block;
    background: linear-gradient(90deg, rgba(36, 51, 116, 1) 0%, rgba(57, 109, 245, 1) 51%, rgba(79, 162, 193, 1) 100%);
    color: #fff;
    padding: 20px;
    height: 220px;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-end;
	position: relative;
}
#entry .entey_btn .arrow{
	position: absolute;
	overflow: hidden;
	width: 50px;
	height: 50px;
	right: 20px;
	top: 20px;
}
#entry .entey_btn .sub{
	width: 100%;
	    font-size: 1.5em;
}
#entry .entey_btn .main {
    width: 100%;
    font-size: 5em;
    line-height: 1;
    font-weight: 600;
}
#entry .entey_btn:hover{
	text-decoration: none;
}
#entry .entey_btn:hover img{
	opacity: 1;
}
/* ---------------------------------
  ENTRY hover：テキストスロット + 矢印斜めループ（JS不要）
--------------------------------- */

/* “見た目の文字”は slot_stack 側にする */
#entry .entey_btn .sub,
#entry .entey_btn .main{
  position: relative;
  overflow: hidden;      /* 窓 */
}

/* SR用：見た目は消すが読み上げ用に残す */
#entry .entey_btn .slot_sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* 2段スタック（これが動く） */
#entry .entey_btn .slot_stack{
  display: block;
  will-change: transform;
}

/* 2段目を下に並べる */
#entry .entey_btn .slot_item{
  display: block;
}

/* 1行分の高さを固定して “スロット窓” を成立させる */
#entry .entey_btn .sub{ line-height: 1.2; }
#entry .entey_btn .main{ line-height: 1; }

/* 重要：窓の高さ＝1行分（line-height）にする */
#entry .entey_btn .sub{ height: 1.2em; }
#entry .entey_btn .main{ height: 1em; }

@media screen and (min-width: 768px) {
/* hoverで上に1段分スライド（=上に抜けて下から同じ文字が入る） */
@media (hover:hover){
  #entry .entey_btn:hover .sub .slot_stack,
  #entry .entey_btn:hover .main .slot_stack{
    animation: entrySlotUp .55s cubic-bezier(.2,.9,.2,1) both;
  }

  #entry .entey_btn:hover .arrow img{
    animation: entryArrowDiagLoop .55s cubic-bezier(.2,.9,.2,1) both;
  }
}
}
@keyframes entrySlotUp{
  to{ transform: translateY(-50%); }
  /* 2段の合計が2行分なので、-50% でちょうど1行分上へ */
}

/* 矢印：右上に抜けて→左下から戻る（ワープで一周） */
@keyframes entryArrowDiagLoop{
  0%   { transform: translate(0,0); opacity: 1; }
  49%  { transform: translate(130%,-130%); opacity: 1; }
  50%  { transform: translate(-130%,130%); opacity: 0.001; }
  100% { transform: translate(0,0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  #entry .entey_btn .slot_stack,
  #entry .entey_btn .arrow img{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
@media screen and (max-width: 767px) {
	
	#entry {
    padding: 40px 0;
}
#entry .entey_btn {
    padding: 10px;
    height: 150px;
}
#entry .entey_btn .sub {
    width: 100%;
    font-size: 1em;
}
#entry .entey_btn .main {
    width: 100%;
    font-size: 3em;
    line-height: 1;
    font-weight: 600;
}
#entry .entey_btn .arrow {
    width: 30px;
    height: 30px;
    right: 10px;
    top: 10px;
}
}