@charset "utf-8";

/* =========================
   Xeoryリセット
========================= */
#header,
.page_top_image{
display:none;
}

#main, #main .wrap, #main .content{
max-width:none !important;
width:100%;
}

.left-content .main-inner{
margin:0;
}

/* =========================
   全体
========================= */
html{
scroll-behavior:smooth;
}

.hk-recruit-wrap{
width:100vw;
margin-left:calc(50% - 50vw);
}

.hk-recruit{
width:100%;
font-family:'Noto Sans JP', sans-serif;
}

.pc_break{
	display:none;
}

.sp_break{
display:block;	
}

/* =========================
   セクション
========================= */
.hk-section{
width:100%;
padding:100px 0;
position:relative;
}

.hk-inner{
max-width:1020px;
margin:0 auto;
padding:0 20px;
position:relative;
}

.ap__top--txt{
	text-align:center;
}

/* 背景切替 */
.hk-recruit > .hk-section:nth-of-type(even){
background:#f2f2f2;
margin-top: -20px;
}

.hk-recruit > .hk-section:nth-of-type(odd){
background:#fff;
}

/* =========================
   タイトル
========================= */
h2{
font-weight:700!important;
}

.hk-title-wrap{
position:relative;
height:200px;
display:flex;
align-items:center;
justify-content:center;
}

.hk-en{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
font-size:120px;
font-weight:700;
white-space:nowrap;
letter-spacing:8px;
z-index:0;
}

.hk-title{
position:relative;
z-index:2;
font-size:26px;
font-weight:700;
color:#1f3f8f;
text-align:center;
}

/* 背景色ごとの英字色 */
.hk-recruit > .hk-section:nth-of-type(even) .hk-en{
color:#fff;
}
.hk-recruit > .hk-section:nth-of-type(odd) .hk-en{
color:#e9edf6;
}

/* =========================
   MESSAGE
========================= */
.hk-tabs{
text-align:center;
margin-bottom:30px;
}

.hk-tabs button{
border:1px solid #1f3f8f;
padding:10px 20px;
margin:0 5px;
background:#fff;
color:#1f3f8f;
cursor:pointer;
border-radius:50px;
transition:.3s;
}

.hk-tabs button.active{
background:#1f3f8f;
color:#fff;
}

.hk-tab{
display:none;
margin:0 auto;
line-height:2;
font-size:15px;
text-align:center;
}

.hk-tab.active{
display:block;
}

/* =========================
   メッセージ下の画像
========================= */
.hk-message-images{
display:flex;
gap:20px;
margin-top:40px;
}

.hk-message-images img{
width:25%; /* 4枚並び */
aspect-ratio:4/3;
object-fit:cover;
display:block;
}

/* =========================
   SP
========================= */
@media(max-width:768px){
.hk-mv img{
object-fit:cover;
object-position: 13% center;
}
	
.hk-message-images{
gap:0;
}
	
.hk-message-images img{
width:50%; /* 2枚並び */
}

/* 3枚目・4枚目を非表示 */
.hk-message-images img:nth-child(n+3){
display:none;
}

}


/* =========================
   カード
========================= */
.hk-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}

.hk-card{
overflow:hidden;
}

.hk-card img{
width:100%;
transition:.3s;
}

.hk-card:hover img{
transform:scale(1.05);
opacity:.8;
}

/* =========================
   ヘッダー
========================= */
.hk-header{
position:fixed;
top:0;
left:0;
right:0;
background:#fff;
z-index:9999;
border-bottom:1px solid #eee;
}

.hk-header-inner{
display:flex;
align-items:center;
justify-content:space-between;
height:100px;
padding:0 30px;
box-sizing:border-box;
}

.hk-nav{
display:flex;
align-items:center;
gap:16px;
}

.hk-nav a{
text-decoration:none;
font-size:15px!important;
}

.hk-nav a{
position:relative;
text-decoration:none;
}

/* 下線 */
.hk-nav a::after{
content:"";
position:absolute;
left:0;
bottom:-5px;
width:0;
height:1.5px;
background:#1f3f8f;
transition:.3s;
}

/* ホバーで伸びる */
.hk-nav a:hover::after{
width:100%;
}

.hk-btn{
background:#1f3f8f;
color:#fff;
padding:8px 20px;
border-radius:50px;
display:inline-flex;
align-items:center;
transition:.3s;
}

.hk-nav a.hk-btn::after{
display:none;
}

.hk-btn:hover{
opacity:0.8;
}

#menuBtn{
	display:none;
}

/* =========================
   MV
========================= */
.hk-mv{
height:clamp(500px, 80vh, 100vh);
position:relative;
overflow:hidden;
}

.hk-mv img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:1s;
}

.hk-mv img.active{
opacity:1;
}

.hk-mv-text{
position:absolute;
bottom:clamp(30px, 8vw, 80px);
left:clamp(20px, 5vw, 60px);
z-index:10;
color:#fff;
}

/* コピー */
.hk-copy-sub{
font-size:20px;
color:#fff;
display: inline-block;
margin-bottom:5px;
}

.hk-copy-main p{
display:inline-block;
background:#fff;
color:#1f3f8f;
font-size:clamp(33px, 4vw, 65px) ;
font-weight:700;
padding:5px 20px 10px;
margin:0;
line-height:1.3;
}

.hk-copy-main p + p{
margin-top:10px;
display:block;
}

.hk-copy-main p:nth-child(2){
margin-left:40px;
}

/* スクロール */
.hk-scroll{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
text-align:center;
}

.hk-scroll span{
display:block;
width:2px;
height:40px;
background:#fff;
margin:0 auto 10px;
animation:scroll 1.5s infinite;
}

@keyframes scroll{
0%{transform:translateY(0);opacity:0;}
50%{opacity:1;}
100%{transform:translateY(20px);opacity:0;}
}

/* =========================
   TABLE
========================= */
.hk-recruit-table .hk-table{
width:100%;
border-collapse:collapse;
/* font-size:14px; */
}

.hk-recruit-table th{
width:25%;
background:#f5f7fb;
text-align:left;
border-bottom:1px solid #ddd;
}

.hk-recruit-table td{
border-bottom:1px solid #ddd;
}

/* =========================
   ENV
========================= */
.hk-env-card{
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
border-radius:20px;
padding:40px 50px;
margin-top:60px;
}

.hk-env-image{
width:60%;
}

.hk-env-image img{
width:100%;
border-radius:10px;
display:block;
}

.hk-env-content{
width:40%;
text-align:center;
}

.hk-env-content p:first-child{
font-size:20px;
font-weight:700;
margin-bottom:15px;
}

.hk-env-content p{
line-height:1.8;
margin-bottom:25px;
}

/* =========================
   1300px以上
========================= */

@media screen and (min-width:769px) and ( max-width:1300px){
.hk-mv-text{
bottom:40px;
left:30px;
}
.hk-copy-main p{
font-size:40px !important;
}
}



/* =========================
   SP
========================= */
@media(max-width:768px){
.sp_break{
display:none;
}

.pc_break{
display:block;	
}

.hk-header-inner {
padding: 0 10px;		
height:60px;
}	
	
.hk-header-inner img{
max-width: 80%;		
}		
	
.hk-nav{
display:none;
flex-direction:column;
position:absolute;
top:60px;
left:0;
width:100%;
background:#fff;
padding:20px;
}

.hk-nav.active{
display:flex;
}

#menuBtn{
display:block;
font-size:40px;
}
	
.hk-mv-text{
left: 20px;
}

.hk-section{
padding:10px 0 50px;
}

.hk-inner p{
text-align:left;		
}

.hk-title-wrap{
margin:-30px auto -50px;
position:relative;
z-index:1;
}

.hk-en{
font-size:45px;
letter-spacing:3px;
pointer-events:none;
}
	
.hk-inner .hk-env-content p{
text-align:center;
}
	
.hk-env-content{
padding-top:20px;
}	

.hk-copy-main p{
font-size:30px;
padding:0 15px 5px;
}

.hk-copy-sub{
font-size:15px;
}

.hk-grid{
grid-template-columns:1fr;
}

.hk-tabs{
position:relative;
z-index:2;
}

.hk-tab{
text-align:left;	
}	
	
.hk-env-card{
flex-direction:column;
padding:30px 20px;
margin-top:0;
}

.hk-env-image,
.hk-env-content{
width:100%;
}

/* .hk-env-btn{
width:100%;
}
 */
.hk-recruit-table th,
.hk-recruit-table td{
/* display:block; */
width:100%;
}

.hk-recruit-table th{
background:#eef1f5;
border-bottom:none;
width: 40%!important;
}

}


/* 私たちの仕事についてのCSS　　=========================================================================　*/



/* =========================
   アンカーリンク
========================= */
.hk-anchor{
display:flex;
justify-content:center;
gap:30px;
margin-top:40px;
flex-wrap:wrap;
}

/* =========================
   アンカー：下線＋丸下矢印
========================= */
.hk-anchor a{
position:relative;
display:inline-block;
padding-right:34px; /* アイコン分 */
padding-bottom:8px; /* ← 下線との余白 */
color:#1f3f8f;
text-decoration:none;
}

/* =========================
   アンカー：下線＋丸＋下矢印（確実版）
========================= */
.hk-anchor a{
position:relative;
display:inline-block;
padding-right:34px;
padding-bottom:8px;
color:#1f3f8f;
text-decoration:none;
}

/* 下線 */
.hk-anchor a::before{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
background:#ccc;
}

/* 丸 */
.hk-anchor a::after{
content:"";
position:absolute;
right:0;
top:40%;
transform:translateY(-50%);
width:20px;
height:20px;
border-radius:50%;
background:#1f3f8f;
}

/* 矢印（←ここ重要） */
.hk-anchor a span{
position:absolute;
right:7px;
top:35%;
width:6px;
height:6px;
display:block;
transform:translateY(-50%) rotate(45deg); /* ←これで下向きに見せる */
border-right:2px solid #fff;
border-bottom:2px solid #fff;
z-index:2; /* ←丸より前に出す */
}

.hk-anchor a:hover::after{
transform:translateY(-50%) scale(1.3);
transition:.3s;
}

/* .hk-anchor a:hover{
	opacity:0.8;
} */

/* =========================
   サブタイトル
========================= */
.hk-sub-title{
font-size:22px!important;
color:#1f3f8f;
margin-bottom:20px;
font-weight:700!important;
}

.hk-text{
margin-bottom:30px;
line-height:1.8;
}

/* =========================
   画像
========================= */
.hk-image{
width:100%;
overflow:hidden;
}

.hk-image img{
width:100%;
height:100%;
object-fit:cover;
}

/* =========================
   仕事一覧
========================= */
.hk-job{
margin-top:40px;
}

.hk-job-item{
display:flex;
gap:30px;
padding:30px 0;
border-bottom:1px solid #ddd;
align-items:center;
}

.hk-job-item img{
width:30%;
object-fit:cover;
}

.hk-job-item h4{
font-size:16px;
color:#1f3f8f;
margin-bottom:10px;
}

/* =========================
   小見出し
========================= */
.hk-mini{
margin: 40px 0 15px !important;
color:#333;
font-weight:700;
}

/* =========================
   CTA
========================= */
.hk-cta{
display:flex;
justify-content:center;
gap:20px;
margin-top:40px;
}

.hk-cta-btn{
display:inline-block;
padding:15px 40px 20px;
border-radius:40px;
color:#fff;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.hk-cta-btn:hover{
opacity:.8;
}

.hk-cta-btn span{
margin-left:10px;
font-size:20px;

}

.hk-cta-btn.light{
background:#4bc2ea;
text-decoration:none;
}

.hk-cta-btn.dark{
background:#1f3f8f;
text-decoration:none;
}


/* =========================
   SP
========================= */
@media(max-width:768px){
h3.ap__top--txt{
font-size:15px!important;
}
	
	
.hk-job-item{
flex-direction:column;
align-items:flex-start;
gap:0;
border-bottom:none;
padding:10px 0;
	}

.hk-job-item img{
width:100%;
}

.hk-cta{
flex-direction:column;
}
	

.hk-cta-btn{
width:100%;
text-align:center;
}
	
.hk-anchor{
margin-top:0;		
}

	.hk-mini{
margin: 15px 0 10px !important;
}
	
}



/* 社員インタビューのCSS　　=========================================================================　*/

/* =========================
   CASEナビ
========================= */
.hk-anchor--interview{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
text-align:center;
}

/* SP */
@media(max-width:768px){
.hk-anchor{
grid-template-columns:repeat(2,1fr);
}
}

/* =========================
   CASE
========================= */
.hk-case-title{
color:#1f3f8f;
margin-bottom:20px;
}

/* カード */
.hk-case-card{
background:#fff;
border-radius:20px;
padding:40px;
}

/* メイン画像 */
.hk-case-main{
position:relative;
margin-bottom:20px;
}

.hk-case-main img{
width:100%;
}

/* プロフィール */
.hk-case-profile{
margin:20px 0;
line-height:1.8;
}

.hk-case-profile-name{
color:#1f3f8f;
font-size:20px;
}

/* 画像 */
.hk-case-row{
display:flex;
gap:25px;
margin-top:40px;
align-items:center; /* ←中央揃えをやめる */
}

/* 左右比率を安定させる */
.hk-case-row img{
width:35%;
aspect-ratio: 1 / 1; /* 縦横比を1:1に固定 */
object-fit: cover; /* 画像が歪まないようにトリミング */
}

.hk-case-text{
width:60%;
}

/* インタビュー内容 */
.hk-question{
font-weight:700;
margin-bottom:0!important;
color:#333;
}

.hk-bubble{
background:#e9edf6;
padding:15px;
border-radius:10px;
margin-bottom:20px;
line-height:1.6;
}


/* =========================
   SP
========================= */
@media(max-width:768px){
.hk-case-card{
padding:25px;
}
	
.hk-case-row{
flex-direction:column;
margin-top:0;
}

/* .hk-case-row.reverse{
flex-direction:column;
} */

.hk-case-row img,
.hk-case-text{
width:100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}

.hk-case-copy{
font-size:14px;
}
	
.hk-anchor{
margin-top:0;		
}	

}




/* 働く環境を知るのCSS　　=========================================================================　*/

/* =========================
   タブ
========================= */
.hk-gallery-tabs{
display:flex;
justify-content:center;
gap:10px;
margin:40px 0;
flex-wrap:wrap;
}

.hk-gallery-tabs button{
border:1px solid #1f3f8f;
background:#fff;
color:#1f3f8f;
padding:8px 20px;
border-radius:30px;
cursor:pointer;
transition:.3s;
}

.hk-gallery-tabs button.active{
background:#1f3f8f;
color:#fff;
}

/* =========================
   ギャラリー
========================= */
.hk-gallery-content{
display:none;
}

.hk-gallery-content.active{
display:block;
}

/* グリッドはそのまま */
.hk-gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

/* 1枚ごとの箱 */
.hk-gallery-item{
overflow:hidden; /* ← ここに付ける！ */
}

/* 画像 */
.hk-gallery-item img{
width:100%;
aspect-ratio:4/3;
object-fit:cover;
transform:scale(1.1);
transition:.3s;
}

/* hover */
.hk-gallery-item:hover img{
transform:scale(1.15);
opacity:0.8;
}

.hk-gallery-video{
grid-column:1 / -1; /* 横幅いっぱい */
margin-top:20px;
}

.hk-gallery-video iframe{
width:100%;
aspect-ratio:16/9;
border-radius:10px;
}

/* =========================
   モーダル
========================= */
.hk-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
justify-content:center;
align-items:center;
z-index:9999;
}

.hk-modal img{
max-width:90%;
max-height:90%;
}

.hk-modal.active{
display:flex;
}

/* 閉じるボタン */
.hk-modal-close{
position:absolute;
top:20px;
right:30px;
color:#fff;
font-size:30px;
cursor:pointer;
}

/* =========================
   SP
========================= */
@media(max-width:768px){
.hk-gallery-grid{
grid-template-columns:repeat(2,1fr);
}
.hk-gallery-tabs{
gap:5px;
}
.hk-gallery-tabs button{
padding: 8px 7px;
font-size: 11px;
}
.hk-gallery-grid{
gap:15px;
}
.gallery{
margin-top: -70px!important;
}
}