@charset "UTF-8";


/* ----------------------------------------------------------------
共通・基本設定
---------------------------------------------------------------- */
.rec_tl_box .eng {
    font-size: 4.4em;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;
}

/* ----------------------------------------------------------------
FV (First View) 全体
---------------------------------------------------------------- */
.recruit_fv {
  overflow: hidden;
  position: relative;
}
.recruit_fv .inner {
  width: 100%;
  margin: 0 auto 50px;
}
.recruit_fv .fv_row {
  position: relative;
}
.recruit_fv .fv_top { margin-bottom: clamp(14px, 2vw, 22px); }
.recruit_fv .fv_txt { margin: clamp(10px, 2vw, 18px) 0; }
.recruit_fv .fv_bottom { margin-top: clamp(14px, 2vw, 22px); }

/* ----------------------------------------------------------------
FV テキストループ (fv_txt) - 消失・速度不安定対策済み
---------------------------------------------------------------- */
.marquee-text .marquee__viewport {
  display: block !important; /* 絶対に消さない */
  overflow: hidden;
  width: 100%;
}

.text_track {
  display: flex;
  gap: 80px; /* JSの変数 gap と合わせる */
  width: max-content;
  white-space: nowrap;
  font-weight: 700;
  font-size: 59px;
  will-change: transform;
  transform: translateY(105%);
  opacity: 0;
}

/* 登場：下からスッと出る */
.recruit_fv.is-text-in .text_track {
  animation: textCutInUp 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

/* ループ：JSが計算した --durText 秒で一定速度に */
.recruit_fv.is-loop .text_track {
  opacity: 1;
  transform: translateY(0);
  animation: marqueeLeftFixed var(--durText, 20s) linear infinite;
}

@keyframes textCutInUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes marqueeLeftFixed {
  from { transform: translateX(0); }
  /* JSで2枚に複製しているため -50%で無限に繋がる */
  to { transform: translateX(calc(-50% - 40px)); }
}

@media screen and (max-width: 767px) {
  .text_track {
    font-size: 35px;
    gap: 40px;
  }
  .recruit_fv .fv_txt {
    min-height: 35px;
  }
}
/* ループアニメーションの終着点を JSから受け取ったピクセル数にする */
.recruit_fv.is-loop .text_track {
  opacity: 1;
  transform: translateY(0);
  animation: marqueeSeamless var(--durText, 20s) linear infinite;
}

@keyframes marqueeSeamless {
  from { transform: translateX(0); }
  to { transform: translateX(var(--moveDist, -1000px)); } 
}

/* スマホ用設定 */
@media screen and (max-width: 767px) {
  .text_track {
    font-size: 35px;
    gap: 40px; /* スマホでは余白を狭く */
  }
  /* スマホ用の余白をJSに伝えるのは大変なので、CSSで上書き調整 */
  @keyframes marqueeSeamless {
    from { transform: translateX(0); }
    /* スマホで距離がズレる場合は、JS内の gap 変数もメディアクエリで変える必要がありますが、
       一旦このままでも「画面を埋める」ロジックで動きます */
  }
}
/* ----------------------------------------------------------------
FV 画像ループ (fv_top / fv_bottom)
---------------------------------------------------------------- */
.marquee .marquee__viewport {
  overflow: hidden;
  width: 100%;
}
.marquee .marquee__track {
  display: flex;
  gap: clamp(10px, 1.2vw, 18px); /* JSの gap 計算と同期 */
  align-items: center;
  width: max-content;
  will-change: transform;
}
.marquee .marquee__track li {
  list-style: none;
  overflow: hidden;
	position: relative;
  border-radius: 8px;
}
.marquee .marquee__track .txt_area,
.marquee .marquee__track .side_txt{
	position: absolute;
	z-index: 1;
}
.marquee .marquee__track img {
  display: block;
  height: 385px;
  width: auto;
}
.marquee .marquee__track .txt_area{
	left: 5%;
	bottom: 5%;
}
.marquee .marquee__track .txt_area div{
	margin-bottom: 5px;
}
.marquee .marquee__track .txt_area p{
	  display: inline;
	line-height: 1.7;
  background-color: #fff;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.marquee .marquee__track .txt_area .main{
	    font-size: 1.4em;
}
.marquee .marquee__track .side_txt {
    top: 5%;
    z-index: 1;
    writing-mode: vertical-rl;
    right: 3%;
    text-orientation: mixed;
    letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .marquee .marquee__track img { height: 180px; }
		.marquee .marquee__track .side_txt {
    font-size: 0.6em;
}
.marquee .marquee__track .txt_area p {
    font-size: 0.6em;
    line-height: 1.2;
}
	.marquee .marquee__track .txt_area div{
	margin-bottom: 3px;
}
.marquee .marquee__track .txt_area p.main {
    font-size: 0.7em;
	 line-height: 1;
	        padding: 2px;
}
}

/* 初回画像カットイン */
.recruit_fv:not(.is-loop) .marquee .marquee__track li {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-8px);
  opacity: 0.001;
  animation: imgCutIn 1.6s cubic-bezier(.2,.9,.2,1) forwards;
}
.recruit_fv:not(.is-loop) .fv_bottom .marquee__track li {
  clip-path: inset(0 0 0 100%);
  transform: translateX(8px);
  animation: imgCutIn 1.6s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes imgCutIn {
  to {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* 画像ループ開始 */
.recruit_fv.is-loop .marquee .marquee__track {
  animation: marqueeSeamlessImg var(--durCustom, 30s) linear infinite;
  display: flex;
  width: max-content;
}
/* 逆方向（右向き）の設定 */
.recruit_fv.is-loop .marquee[data-dir="right"] .marquee__track {
  animation-direction: reverse;
}

@keyframes marqueeImgAnim {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marqueeSeamlessImg {
  from { transform: translateX(0); }
  to { transform: translateX(var(--moveDist, -100%)); }
}

/* テキストループも同じアニメーション名を使うか、個別に設定 */
.recruit_fv.is-loop .text_track {
  animation: marqueeSeamlessImg var(--durCustom, 20s) linear infinite;
}
/* ----------------------------------------------------------------
Voice / Business / Keyword / Entry 以降
---------------------------------------------------------------- */
/* --- 以前お送りいただいた正常に動いているコード部分を維持 --- */

#second_view {
  background: linear-gradient(0deg, rgba(36, 51, 116, 1) 0%, rgba(57, 109, 245, 1) 51%, rgba(79, 162, 193, 1) 100%);
  padding: 120px 0;
  color: #fff;
  text-align: center;
}
#second_view p { line-height: 2.7; font-size: 1.2em; margin-bottom: 45px; }
#second_view p.main { font-weight: 800; font-size: 4.4em; margin-top: 80px; }

#voice { padding: 80px 0 120px; overflow: hidden; }
#voice .flex_box .box_r li { will-change: transform, opacity; }
#voice .flex_box .box_r li.is-in { transform: none !important; opacity: 1 !important; }

/* --- ページ下部の既存スタイルをここに継続 --- */

/* (以下、容量削減のため中略しますが、お手元のファイルのvoice以降のスタイルをそのまま残してください) */

/* ----------------------------------------------------------------
second_view
---------------------------------------------------------------- */
#second_view{
	background: linear-gradient(0deg, rgba(36, 51, 116, 1) 0%, rgba(57, 109, 245, 1) 51%, rgba(79, 162, 193, 1) 100%);
	    padding: 120px 0;
}
#second_view > .inner{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}
#second_view p {
    font-weight: 400;
    line-height: 2.7;
    font-size: 1.2em;
	    margin-bottom: 45px;
}
#second_view p.big{
	    font-weight: 500;
	    font-size: 2.2em;
	    line-height: 1.8;
}
#second_view p.main {
    font-weight: 800;
    font-size: 4.4em;
    margin-top: 80px;
	    line-height: 1.8;
}
@media screen and (max-width: 767px) {
	#second_view {
    padding: 40px 0 20px;
}
	#second_view p {
    margin-bottom: 20px;
    font-size: 1em;
        line-height: 1.9;
}
#second_view p.big {
    font-size: 1.4em;
}
	#second_view p.main {
    font-size: 1.6em;
    margin-top: 30px;
}
}
/* ----------------------------------------------------------------
voice
---------------------------------------------------------------- */
#voice{
width: 100%;
	padding: 80px 0 120px;
	position: relative;
	overflow: hidden;
}
#voice  .pages_tl_area > .inner{
	width: 100% !important;
}
#voice > .inner {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
}
#voice .flex_box{
	display: flex;
    justify-content: space-between;
	        margin-right: calc(52.5% - 50vw);
	    position: relative;
}
#voice .flex_box .box_l{
    margin-right: 30px;
	width: 30%;
	position: sticky;
	top: 0;
}
#voice .flex_box .box_l > div{
	    position: sticky;
    top: 150px;
}
#voice .flex_box .box_r{
	    width: 50vw;
	/*overflow: hidden;*/
}
#voice .flex_box .box_r li{
	margin-bottom: 30px;
}
#voice .flex_box .box_r li a {
    padding: 30px;
    width: 100%;
    height: auto;
	/*overflow: hidden;*/
    position: relative;
	    display: flex;
	flex-direction: column; 
	 justify-content: space-between;
    aspect-ratio: 750 / 450;
}
#voice .flex_box .box_r li a > div{
	    position: relative;
	    width: 100%;
}
#voice .flex_box .box_r li a:hover{
	text-decoration: none !important;
}
	#voice .btn .link .btn_arrow{
		position: absolute;
	}
#voice .btn .link::before{
	content: none;
}
#voice .flex_box .box_r li a .number .number_txt {
    font-size: 4em;
    font-weight: 600;
}
#voice .flex_box .box_r li a .number .number_name {
    font-weight: 600;
	    font-size: 1.7em;
}
#voice .flex_box .box_r li a .number .number_name span {
    font-size: 0.7em;
    padding-right: 10px;
}
#voice .flex_box .box_r li a .box_bottom{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
#voice .flex_box .box_r li a .box_bottom .txt_line 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);
}
#voice .flex_box .box_r li a .box_bottom .btn{
	    width: 30px;
}
#voice .flex_box .box_r li a .btn .link .btn_arrow{
	background: #fff;
}
#voice .flex_box .box_r .btn .link .btn_arrow svg {
    color: #000;
}
@media screen and (min-width: 768px) {
  /*pcのみ*/
#voice .flex_box .box_r li a:hover .btn_arrow svg{
  animation: arrowLoopSvg .6s ease-in-out both;
}
#voice .flex_box .box_r li a:hover .box_bottom .txt_line p{
  background-size: 100% 100%, 100% 100%;
}
}
#voice .flex_box .box_r li a:before{
  content: "";
  position: absolute;
  inset: 0; /* top:0;left:0;width:100%;height:100%; と同義 */
  
  background: url("../img/voice01.jpg") center center no-repeat;
  background-size: cover;

  transform: scale(1);
  transform-origin: center center;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}

/* hover時 */
#voice .flex_box .box_r li a:hover:before{
  transform: scale(1.03);
}
#voice .flex_box .box_r li:nth-child(1) a:before{
	background: url("../img/voice01.jpg") center center no-repeat;
	background-size: cover;
}
#voice .flex_box .box_r li:nth-child(2) a:before{
		background: url("../img/voice02.jpg") center center no-repeat;
	background-size: cover;
}
#voice .flex_box .box_r li:nth-child(3) a:before{
		background: url("../img/voice03.jpg") center center no-repeat;
	background-size: cover;
}
#voice .flex_box .box_r li:nth-child(4) a:before{
		background: url("../img/voice04.jpg") center center no-repeat;
	background-size: cover;
}
@media screen and (max-width: 767px) {
	#voice .flex_box .box_r li:nth-child(1) a:before{
	background: url("../img/voice01_sp.jpg") center center no-repeat;
	background-size: cover;
}
#voice .flex_box .box_r li:nth-child(2) a:before{
		background: url("../img/voice02_sp.jpg") center center no-repeat;
	background-size: cover;
}
#voice .flex_box .box_r li:nth-child(3) a:before{
		background: url("../img/voice03_sp.jpg") center center no-repeat;
	background-size: cover;
}
#voice .flex_box .box_r li:nth-child(4) a:before{
		background: url("../img/voice04_sp.jpg") center center no-repeat;
	background-size: cover;
}
#voice .flex_box .box_r li a .number .number_name {
    margin-bottom: 10px;
}
}
/* ---------------------------------
  #voice li scroll-in（下10%で開始 → 下50%で完了 / 巻き戻しなし）
--------------------------------- */
#voice .flex_box .box_r li{
  will-change: transform, opacity;
}

/* 完了後はクラスで安定させる（JSが is-in を付けます） */
#voice .flex_box .box_r li.is-in{
  transform: none !important;
  opacity: 1 !important;
}

/* prefers-reduced-motion 対策 */
@media (prefers-reduced-motion: reduce){
  #voice .flex_box .box_r li{
    transform: none !important;
    opacity: 1 !important;
  }
}
@media screen and (max-width: 767px) {
#voice {
    width: 100%;
    padding: 30px 0 20px;
}
	#voice .flex_box {
    display: block;
    margin-right: auto;
}
	#voice .flex_box .box_l {
    margin-right: 0;
    width: 100%;
    position: static;
    top: 0;
}
	#voice .flex_box .box_l > div {
    position: static;
    margin-bottom: 30px;
}
.rec_tl_box .eng {
    font-size: 3em;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;
}
#voice .flex_box .box_r {
    width: 100%;
    overflow: hidden;
}
#voice .flex_box .box_r li a {
    padding:15px 20px;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    aspect-ratio: auto;
}
	#voice .flex_box .box_r li a .number .number_txt {
    font-size: 3em;
}
#voice .flex_box .box_r li a .box_bottom .txt_line p {
    font-size: 1.2em;
}
#voice 	.btn .link {
    padding-bottom: 20px;
}
}
/* ----------------------------------------------------------------
business
---------------------------------------------------------------- */
#business{
	background: #f2f2f2;
	padding: 40px 0 120px;
}
#business > .inner{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;	
}
#business .rec_tl_box{
	margin-bottom: 60px;
}
#business .img_box .box{
	margin-bottom: 120px;
	position: relative;
}
#business .img_box .box:before{
	position: absolute;
	content: "";
    width: 50%;
    height: 420px;
	background: #000;
}
#business .img_box .box:nth-child(even):before {
	    right: 0;
}
#business .img_box .box:nth-child(1):before{
	background: url("../img/business01.jpg")center center no-repeat;
	background-size: cover;
}
#business .img_box .box:nth-child(2):before{
	background: url("../img/business02.jpg")center center no-repeat;
	background-size: cover;
}
#business .img_box .box:nth-child(3):before{
	background: url("../img/business03.jpg")center center no-repeat;
	background-size: cover;
}
#business .img_box .box:nth-child(4):before{
	background: url("../img/business04.jpg")center center no-repeat;
	background-size: cover;
}
#business .img_box .box:last-child{
	margin-bottom: 0px;
}
#business .img_box .box .box_inner{
	    width: 60%;
	 margin-left: auto;
	position: relative;
}
#business .img_box .box:nth-child(even) .box_inner{
	    margin-right: auto;
	margin-left: 0;
}
#business .img_box .box .box_inner .tl_area{
	margin-bottom: 120px;
	    margin-left: 20.5%;
	    display: flex;
    align-items: center;
}
#business .img_box .box:nth-child(even) .box_inner .tl_area{
	    margin-right: 20.5%;
	  margin-left: 0;
	text-align: right;
	    justify-content: end;
}
#business .img_box .box .box_inner .tl_area .number {
    font-size: 4em;
    font-weight: 300;
	margin-right: 20px;
	    line-height: 1;
}
#business .img_box .box .box_inner .tl_area .tl {
	    line-height: 1;
	    font-size: 3em;
}
#business .img_box .box .box_inner .txt{
	    padding: 35px 33px;
	background: #fff;
	    line-height: 1.8;
}
@media screen and (max-width: 767px) {
	
	#business {
    padding: 40px 0 30px;
}
#business .rec_tl_box {
    margin-bottom: 20px;
}
#business .img_box .box {
    margin-bottom: 40px;
}
#business .img_box .box:before {
    width: 63%;
    height: auto;
    aspect-ratio: 600/420;
}
#business .img_box .box .box_inner {
    width: 90%;
}
#business .img_box .box .box_inner .tl_area {
    margin-bottom: 24vw;
    margin-left: 61.5%;
}
#business .img_box .box .box_inner .tl_area .number {
    font-size: 2.2em;
    margin-right: 10px;
}
#business .img_box .box .box_inner .tl_area .tl {
            font-size: 1.6em;
}
#business .img_box .box .box_inner .txt {
    padding: 20px;
    font-size: 0.9em;
}
#business .img_box .box:nth-child(even) .box_inner .tl_area {
    margin-right: 61.5%;
    margin-left: 0;
}
}
/* ----------------------------------------------------------------
keyword
---------------------------------------------------------------- */
#keyword{
	    max-width: 1200px;
    width: 90%;
    margin: 0 auto;	
	padding: 40px 0 120px;
}
#keyword .keyword_box{
	margin-top: 70px;
}
#keyword .keyword_box ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#keyword .keyword_box ul li{
	    width: calc(100% / 3);
    text-align: center;
	    padding: 40px;
}
@media screen and (min-width: 768px) {
#keyword .keyword_box ul li:not(:nth-child(3n)) {
    border-right: dashed 1px #ccc;
}
#keyword .keyword_box ul li:not(:nth-last-child(-n+3)){
		border-bottom: dashed 1px #ccc;
}
}
#keyword .keyword_box ul li > div {
    width: 100%;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#keyword .keyword_box ul li > div:before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
}
#keyword .keyword_box ul li:nth-child(1) div:before{
	background: url("../img/keyword01.jpg") center center no-repeat;
	background-size: contain;
}
#keyword .keyword_box ul li:nth-child(2) div:before{
	background: url("../img/keyword02.jpg") center center no-repeat;
	background-size: contain;
}
#keyword .keyword_box ul li:nth-child(3) div:before{
	background: url("../img/keyword03.jpg") center center no-repeat;
	background-size: contain;
}
#keyword .keyword_box ul li:nth-child(4) div:before{
	background: url("../img/keyword05.jpg") center center no-repeat;
	background-size: contain;
}
#keyword .keyword_box ul li:nth-child(5) div:before{
	background: url("../img/keyword06.jpg") center center no-repeat;
	background-size: contain;
}
#keyword .keyword_box ul li:nth-child(6) div:before{
	background: url("../img/keyword07.jpg") center center no-repeat;
	background-size: contain;
}
#keyword .keyword_box ul li div p span {
    position: relative;
    color: #fff;
    font-size: clamp(1rem, -0.873rem + 3.96vw, 2.1rem);
    font-weight: 300;
    background: linear-gradient(transparent 95%, #fff 0%);
    padding: 0 1px 0px;
}
@media screen and (max-width: 767px) {
#keyword {
    padding: 40px 0 40px;
}
#keyword .keyword_box {
    margin-top: 30px;
}
#keyword .keyword_box ul li {
    width: calc(100% / 2);
    padding: 15px;
}
	#keyword .keyword_box ul li:not(:nth-child(2n)) {
    border-right: dashed 1px #ccc;
}
#keyword .keyword_box ul li:not(:nth-last-child(-n+1)) {
    border-bottom: dashed 1px #ccc;
}
#keyword .keyword_box ul li div p span{
    font-size: 1em;
	        font-weight: 700;
}
}
/* ----------------------------------------------------------------
recruitment
---------------------------------------------------------------- */
#recruitment{
	background: #f2f2f2;
	padding: 80px 0 120px;
}
#recruitment > .inner{
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;	
}
#recruitment .rec_tl_box{
	margin-bottom: 120px;
}
.profile_area {
  border-bottom: solid 1px #666666;
}
.profile_area dl {
  border-top: solid 1px #666666;
  padding: 26px 15px;
  display: flex;
  font-size: 1.3em;
  justify-content: space-between;
}
.profile_area dl dt {
  width: 25%;
}
.profile_area dl dd {
  max-width: 900px;
  width: 75%;
	    line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .profile_area dl {
    padding: 20px 10px;
    font-size: 0.9em;
  }
  .profile_area dl dt {
    width: 25%;
  }
  .profile_area dl dd {
    width: 70%;
  }
}
@media screen and (max-width: 767px) {
	
	#recruitment {
    padding: 40px 0 40px;
}
	#recruitment .rec_tl_box {
    margin-bottom: 30px;
}
}
/* ----------------------------------------------------------------
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;
}
}
/* ----------------------------------------------------------------
recruit_btn
---------------------------------------------------------------- */
.recruit_btn {
    position: fixed;
    bottom: 5vh;
    right: 2%;
	    z-index: 2;
	  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
}
.recruit_btn.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.recruit_btn.is-hide{
  opacity: 0;
  transform: translateY(20px);
}
.recruit_btn a {
    width: 180px;
    height: 180px;
    color: #fff;
    background: linear-gradient(90deg, rgba(36, 51, 116, 1) 0%, rgba(57, 109, 245, 1) 51%, rgba(79, 162, 193, 1) 100%);
    border-radius: 90px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1px #fff;
}
.recruit_btn a p {
    font-size: 1.8em;
    width: 100%;
    text-align: center;
	margin-bottom: 10px;
	transition: 0.4s;
}
.recruit_btn a .btn{
	    width: 30px;
}
.recruit_btn a .btn .link .btn_arrow{
	background: #fff;
	    position: absolute;
}
.recruit_btn a .btn .link .btn_arrow svg {
    color: #000;
}
.recruit_btn a .btn .link::before{
	content: none;
}
@media screen and (min-width: 768px) {
  /*pcのみ*/
.recruit_btn a:hover .btn_arrow svg{
  animation: arrowLoopSvg .6s ease-in-out both;
	}
	.recruit_btn a:hover{
		text-decoration: none;
	}
	.recruit_btn a:hover p{
	text-decoration: none;
		opacity: 0.7;
}
}
@media screen and (max-width: 767px) {
	.recruit_btn{
		    bottom: 5%;
	}
	.recruit_btn a {
    width: 100px;
		height: 100px;
	}
.recruit_btn a p {
    font-size: 1.2em;
    margin-bottom: 8px;
}
	.recruit_btn a .btn .link{
		        padding-bottom: 20px;
	}
}

/* ----------------------------------------------------------------
Loading Screen
---------------------------------------------------------------- */
#loading_screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
background: linear-gradient(0deg, rgba(36, 51, 116, 1) 0%, rgba(57, 109, 245, 1) 51%, rgba(79, 162, 193, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 最前面に */
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* ローディング完了時に消すためのクラス */
#loading_screen.is-loaded {
  opacity: 0;
  visibility: hidden;
}

.loading_content {
  text-align: center;
}

/* 読み込みアニメーション（スピナー） */
.loading_spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin 1s linear infinite;
}

.loading_text {
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  font-weight: 600;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===============================
   feedin（汎用フェード）
=============================== */
.feedin_txt{
  opacity: 0;
  transform: translateY(10px);   /* いらなければ消してOK */
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.feedin_txt.active{
  opacity: 1;
  transform: translateY(0);
}
/* ===============================
   追加アニメーション設定
=============================== */

/* --- .big_txt 白い帯のアニメーション --- */
.big_txt {
  position: relative;
  display: inline-block; /* 帯の幅をテキストに合わせるため */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.big_txt::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #fff; /* 白い帯 */
  z-index: 2;
}

/* 実行時：帯が伸びて消え、文字が出る */
.big_txt.active {
  opacity: 1;
  transition: opacity 0s linear 0.4s; /* 帯が伸びきったタイミングで文字を表示 */
}

.big_txt.active::after {
  animation: whiteBarAnim 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes whiteBarAnim {
  0% { width: 0; left: 0; }
  50% { width: 100%; left: 0; }
  100% { width: 0; left: 100%; }
}

/* --- .ultra_txt ぼかしアニメーション --- */
.ultra_txt {
  filter: blur(20px);
  opacity: 0;
  transform: scale(0.95);
  transition: filter 1.2s ease, opacity 1.2s ease, transform 1.2s ease;
  will-change: filter, opacity;
}

.ultra_txt.active {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}

/* モバイル対応：文字が重ならないよう調整 */
@media screen and (max-width: 767px) {
  .big_txt { display: block; }
}
.u-recaptcha-policy {
    font-size: 0.8em;
    max-width: 440px;
	width: 100%;
    margin: 0 auto;
}