@charset "utf-8";

/* CSS Document */

/*----------------------------------------------------------------------------
   common
------------------------------------------------------------------------------*/
.fc-blue { color:#014099; }
.fc-red { color:#e60013; }

.line-2s { line-height: 1.2; }
.line-s  { line-height: 1.4; }
.line-m  { line-height: 1.8; }
.line-l  { line-height: 2.0; }

.txt-right   { text-align: right; }
.txt-nowrap  { display: inline-block; }

/* category-title */
.category-title {
  width: 100%;
  background-color: #e4f3ff;
  margin-bottom: 48px;
  line-height: 1;
}
.category-title-name {
  display: inline-block;
  background-color: #fff;
  padding: 0 50px;
  border-left: 60px solid #008aff;
}
.category-title-eng {
  display: inline-block;
  color: #008aff;
  font-size: 72px;
  font-weight: bold;
  margin-top: -12px;
}
.category-title-jp {
  display: inline-block;
  color: #3a3a3a;
  font-size: 24px;
  font-weight: bold;
  margin-top: 12px;
}
@media (max-width:900px) {
  .category-title-name { border-left: 30px solid #008aff; }
}
@media (max-width:640px) {
  .category-title-name { padding: 0 30px; }
  .category-title-eng  { font-size: 60px; }
  .category-title-jp   { font-size: 20px; }
}

/*----------------------------------------------------------------------------
   mainvisual
------------------------------------------------------------------------------*/
.recruit .mv {
  background-image:url("../image/mainvisual/03.jpg?upd=20250826");
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
  width:100%;
  height:0;
  padding-top:36.585%;
  margin-bottom:30px;
}

/*----------------------------------------------------------------------------
   rinen
------------------------------------------------------------------------------*/
.rinen {
  background-image:url("../image/contents/recruit/rinen-bg.jpg");
  background-position:center top;
  background-repeat:no-repeat;
  background-size:cover;
  width:100%;
}
.rinen-content-wrap {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; padding:48px;
}
.rinen-img { width: calc(50% - 270px); }
.rinen-img img { width:100%; max-width:430px; height:auto; }
.rinen-img-02 { text-align:right; }
.rinen-content {
  width:540px; box-sizing:border-box; padding:0 24px; text-align:center;
}
#subpage #contents .rinen-content h3 { background:none; border:none; height:auto; padding:0; }
.rinen-content p {
  color:#fff; font-size:48px; font-weight:200; line-height:2; margin-bottom:0;
}
@media (max-width:1500px) {
  .rinen-img { width: calc(50% - 215px); }
  .rinen-content { width:430px; }
  .rinen-content p { font-size:36px; }
}
@media (max-width:1200px) {
  .rinen-img-01 { display:none; }
  .rinen-img { width: calc(50% - 20px); }
  .rinen-content {
    width: calc(50% - 20px); padding:0; margin-right:40px;
  }
  .rinen-content img { width:100%; max-width:382px; height:auto; }
  .rinen-content p { font-size:clamp(23px, 2.6vw, 30px); }
}
@media (max-width:900px) {
  .rinen-content-wrap { padding:48px 24px; }
}

/*----------------------------------------------------------------------------
   about-hinata（整理版）
   - 既定：左右2カラム
   - .work：本文の下に3枚ギャラリー（SPはスライド）
   - .end ：画像小さめ右寄せ／SPは大きく
------------------------------------------------------------------------------*/
.about-hinata { margin:60px 0; }
.about-hinata .work,
.about-hinata .end { margin-top:30px; }

/* 共通2カラム */
.about-hinata-content-wrap {
  display:flex; flex-wrap:wrap; align-items:flex-start;
}
.about-hinata-content {
  width: calc(100% - 550px);
  margin-right:30px;
  font-size:112.5%;
}
.about-hinata-content strong { display:block; font-size:137.5%; }
.about-hinata-content .fs-l { font-size:137.5%; }

/* 既定（共通） */
.about-hinata-image { width:520px; margin-top:30px; }
.about-hinata-image img{
  width:70%;
  height:auto;
  display:block;
  margin:40px auto 0;
}

.about-hinata-image.img--main img{
  width:70%;
  margin-top:40px;
}

/* 社長写真だけの調整 */
.about-hinata .end .about-hinata-image.img--ceo img{
  width:80%;
  display:block;
  margin:0 auto;             /* いったん中央 */
  transform: translateX(-8%);/* ちょい左へ */
}

/* PC時は“上下も中央”に */
@media (min-width:1001px){
  /* 親コンテナは列の高さを揃える（縦中央が効くように） */
  .about-hinata .company .about-hinata-content-wrap{
    align-items: stretch; /* 既存が flex-start なら上書き */
  }
  /* 画像側の列で縦横センター */
  .about-hinata .company .about-hinata-image{
    display: flex;
    align-items: center;    /* 縦中央 */
    justify-content: center;/* 横中央（念のため） */
  }
}

/* スマホ（～1000px）だけ100%に変更 */
@media (max-width:1000px){
  .about-hinata-image img{ width:100%; }
}

/* 1400px↓：右カラム縮小 */
@media (max-width:1400px) {
  .about-hinata-content { width: calc(100% - 350px); }
  .about-hinata-image   { width:320px; }
}

/* 1000px↓：縦並び */
@media (max-width:1000px) {
  .about-hinata-content { order:2; width:100%; margin-right:0; margin-top:30px; }
  .about-hinata-image   { order:1; width:520px; margin:0 auto; }
}

@media (min-width:1001px){
  /* テキスト列：100% - (画像420px + カラム間30px) */
  .about-hinata .end .about-hinata-content{
    width: calc(100% - 450px); /* 420 + 30 */
    margin-right:30px;
    max-width:720px;
  }
  /* 画像列：右端固定をやめる */
  .about-hinata .end .about-hinata-image{
    width:420px;
    margin-left:0;   /* ← auto を 0 に */
  }

  /* 画像：左寄せ */
  .about-hinata .end .about-hinata-image.img--ceo img{
    width:80%;
    display:block;
    margin:0 0 0 0; /* 完全左寄せ */
  }
}
/* 1) PCのみ左パディング */
@media (min-width:1001px){
  .about-hinata .company .about-hinata-content{
    padding-left:40px;
  }
}

/* 2) 幅計算をパディング込みに（はみ出し防止） */
.about-hinata-content{
  box-sizing:border-box;
}

/* 3) SPは左右パディングを軽めに（読みやすさ＋安全マージン） */
@media (max-width:1000px){
  .swap-pc-bottom-sp-top .about-hinata-content{
    padding: 0 16px;  /* 右も左も16px */
  }
}

/* スマホ時は画像を大きく（1000px以下のとき） */
@media (max-width:1000px){
  .about-hinata-image.img--main img {
    width: 100%;     /* 既存の70%を上書きしてフル幅 */
    max-width: none; /* 万一の max-width 制限を解除 */
  }
}
@media (max-width:1000px){
  /* 3セクション共通でタイトル下の余白を小さく */
  .about-hinata .company h3,
  .about-hinata .work h3,
  .about-hinata .end h3 {
    margin-bottom: 10px; /* デフォルトより小さめ */
  }

  /* 画像まわりの余白を詰める */
  .about-hinata .company .about-hinata-image,
  .about-hinata .work .about-hinata-image,
  .about-hinata .end .about-hinata-image {
    margin-top: 10px; /* 既存30px → 10px */
  }

  /* メイン画像・CEO画像の上マージンも軽くする */
  .about-hinata .company .about-hinata-image.img--main img,
  .about-hinata .end .about-hinata-image.img--ceo img {
    margin-top: 10px; /* 既存40px → 10px */
  }
}



/* =========================
   「どんな職場？」（.work）
   本文の下に3枚ギャラリー
   ========================= */
.about-hinata .work .about-hinata-content {
  width:100%; margin-right:0;
}
.about-hinata .work .about-hinata-image {
  width:100%; max-width:1200px; margin:20px auto 0;
  display:flex; justify-content:center; gap:20px; flex-wrap:nowrap;
  overflow:visible;
}
.about-hinata .work .about-hinata-image img {
  width:calc((100% - 40px)/3); /* 3枚 + gap20*2 */
  height:auto; border-radius:6px; object-fit:cover; flex:0 0 auto;
}
/* SP：横スライド＆スナップ */
@media (max-width:768px) {
  .about-hinata .work .about-hinata-image {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; gap:10px; padding-bottom:10px;
  }
  .about-hinata .work .about-hinata-image img {
    flex:0 0 85%; max-width:85%; scroll-snap-align:center;
  }
}

/* =========================
   「最後に」（.end）
   PC：右寄せ小さめ＋本文幅やや狭め
   SP：画像を大きく
   ========================= */

/* PC専用（1001px以上） */
@media (min-width:1001px) {
  .about-hinata .end .about-hinata-content {
    width: calc(100% - 320px);   /* 既定の2カラム計算 */
    margin-right:30px;
    max-width: 720px;            /* ← 本文を狭める（600–760pxで好み調整） */
  }
  .about-hinata .end .about-hinata-image {
    width:420px; margin-left:auto;
  }
  .about-hinata .end .about-hinata-image img { display:inline-block; }
}

/* 1400px↓：PCレイアウト内の微調整（任意） */
@media (min-width:1001px) and (max-width:1400px) {
  .about-hinata .end .about-hinata-image { width:260px; }
}

/* 1000px以下：縦並び＋画像大きめ */
@media (max-width:1000px) {
  .about-hinata .end .about-hinata-content {
    width:100%; margin-right:0; max-width:none; /* ← max-widthの縛りを解除 */
  }
  .about-hinata .end .about-hinata-image {
    width:92vw; max-width:640px;
    margin:20px auto 0; text-align:center;
  }
  .about-hinata .end .about-hinata-image img {
    width:100%; height:auto;
  }
}

/* PC=下 / SP=上（縦積み固定） */
.swap-pc-bottom-sp-top {
  display: flex;
  flex-direction: column;
}

/* スマホ：画像を上（order:1）、文章を下（order:2） */
.swap-pc-bottom-sp-top .about-hinata-image  { order: 1; }
.swap-pc-bottom-sp-top .about-hinata-content{ order: 2; }

/* PC：画像を下（order:2）、文章を上（order:1） */
@media (min-width:1001px) {
  .swap-pc-bottom-sp-top .about-hinata-image  { order: 2; }
  .swap-pc-bottom-sp-top .about-hinata-content{ order: 1; }
}

/* もともとの2カラム幅指定を無効化（このブロック内だけ） */
.swap-pc-bottom-sp-top .about-hinata-content,
.swap-pc-bottom-sp-top .about-hinata-image {
  width: 100%;
  margin: 0;           /* 既存の margin-right などを打ち消し */
}


.about-hinata-content {
  padding-left: 40px; /* ← 数値で右に寄せる */
}
/* ===== SP時のテキスト余白を統一（会社紹介・どんな職場？・最後に） ===== */
.about-hinata-content{ box-sizing: border-box; } /* パディング込みで100%計算 */

@media (max-width:1000px){
  /* 会社紹介／どんな職場？／最後に の本文カラムを同じ見え方に */
  .about-hinata .company .about-hinata-content,
  .about-hinata .work .about-hinata-content,
  .about-hinata .end .about-hinata-content{
    padding: 0 16px; /* さっきのSP余白と同じ */
  }
}

/* ===== PCだけ左パディング（上書き用：元の .about-hinata-content {padding-left:40px;} を置き換え） ===== */
@media (min-width:1001px){
  .about-hinata .company .about-hinata-content,
  .about-hinata .work .about-hinata-content,
  .about-hinata .end .about-hinata-content{
    padding-left: 40px;
  }
}

/*----------------------------------------------------------------------------
   works
------------------------------------------------------------------------------*/
.works { margin-bottom:80px; }
.works .works-contents {
  width:100%; box-sizing:border-box; padding:80px 50px;
  background-image:url("../image/contents/recruit/works-bg.gif");
  background-repeat:repeat;
}
.works .works-list {
  display:flex; flex-wrap:wrap;
  width:100%; max-width:1200px; margin:0 auto;
}
.works .works-list-card {
  width:calc(33.33% - 20px); background:#fff; margin-right:30px;
}
.works .works-list-card:last-child { margin-right:0; }
.works .works-list-thum { aspect-ratio:190 / 150; overflow:hidden; }
.works .works-list-thum img { width:100%; height:auto; }
.works .works-list-description { padding:20px; }
.works .works-list-description strong { display:block; line-height:1.4; }
.works .works-list-description .jpn { color:#008aff; font-size:180%; }
.works .works-list-description .eng { color:#797979; font-weight:normal; }
.works .works-list-description p { margin-bottom:0; }
@media (max-width:1200px) {
  .works .works-list-card {
    display:flex; align-items:center; padding:20px;
    width:100%; margin-right:0; margin-bottom:30px;
  }
  .works .works-list-card:last-child { margin-bottom:0; }
  .works .works-list-thum { width:33.33%; margin-right:20px; }
  .works .works-list-description { width:calc(66.67% - 20px); padding:0; }
}
@media (max-width:900px) { .works .works-contents { padding:80px 24px; } }
@media (max-width:640px) {
  .works .works-list-card { flex-wrap:wrap; padding:0; }
  .works .works-list-thum { width:100%; margin-right:0; }
  .works .works-list-description { padding:24px; width:100%; }
}

.accordion-title {
  width: 100%;
  text-align: left;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #008aff;          /* 青文字 */
  background: #fff;        /* 背景白 */
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s;
}

.accordion-title:hover {
  background: #f7f7f7;
}

.accordion-icon {
  font-size: 20px;
  font-weight: bold;
  color: #008aff;
  margin-left: 10px;
}

.accordion-content {
  display: none;
  padding: 15px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-radius: 0 0 6px 6px;
  background: #fff;
}

.works-list-card {
  width: 100%;
  background: #fff;
  border: 1px solid #f0f0f0;       /* ほぼ見えないくらい薄い枠 */
  border-radius: 8px;              /* 少し丸みを強調 */
  margin-bottom: 20px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* ふんわり影 */
  transition: box-shadow 0.3s ease;
}

.works-list-card:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.1); /* ホバーで少し強め */
}

.accordion-title {
  width: 100%;
  text-align: left;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #008aff;
  background: #fff;
  border: none;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 15px;
  background: #fff;
  border-top: 1px solid #f0f0f0; /* タイトルとの区切りだけ */
}

/* WORKSタイトルの余白を調整 */
.works .category-title {
  margin-bottom: 48px; /* 既存48px → コンパクトに */
}

/* WORKSコンテンツ内の余白も少し詰める */
.works .works-contents {
  padding-top: 20px;   /* 上の余白を減らす */
  padding-bottom: 20px;/* 下は少し残すと見やすい */
}

.works-list-card {
  margin-bottom: 12px !important; /* 強制的に12pxに */
}

/* WORKSカードのレイアウト */
.works-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC時：3列 */
  gap: 20px; /* カード間の余白 */
}

/* タブレット・スマホは縦並び */
@media (max-width: 1000px) {
  .works-list {
    grid-template-columns: 1fr; /* 1列表示 */
  }
}

/* --- WORKS: PCは3列固定 / 旧flexを打ち消す --- */
.works .works-list{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* ①②③ / ④⑤⑥ / ⑦⑧⑨ */
  column-gap: 16px;
  row-gap: 12px;
}

/* 旧flex由来の幅・余白を無効化 */
.works .works-list-card{
  width: auto !important;         /* 旧: calc(33.33% - 20px) や 100% を打消し */
  margin: 0 !important;           /* 旧: margin-right / margin-bottom を打消し（gapで管理） */
  display: block !important;      /* 旧: display:flex を打消し（画像なしならblockでOK） */
  box-sizing: border-box;
}

/* 旧レイアウトの右カラム用幅指定を無効化（テキストを100%に） */
.works .works-list-description{
  width: 100% !important;
  padding: 15px;                  /* お好みで */
}

/* --- ブレークポイント調整 --- */
@media (max-width:1200px){
  .works .works-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* タブレットは2列 */
  }
  .works .works-list-card{
    display: block !important;    /* 旧: display:flex を上書き */
  }
}

@media (max-width:640px){
  .works .works-list{
    grid-template-columns: 1fr;   /* スマホは1列 */
  }
}

/*----------------------------------------------------------------------------
   candidates
------------------------------------------------------------------------------*/
.candidates { margin-bottom:80px; }
.candidates-contents {
  display:grid; grid-template-columns:1fr 1fr; grid-column-gap:60px;
  width:100%; padding:30px 0; box-sizing:border-box;
  background-image:url("../image/contents/recruit/candidates-bg.jpg");
  background-repeat:no-repeat; background-position:top left; background-color:#f6f6f6;
}
.candidates-img { display:grid; grid-template-rows:1fr 1fr; grid-row-gap:30px; }
.candidates-img img { width:100%; height:auto; }
.candidates-list { display:grid; grid-row-gap:30px; }
.candidates-item { width:100%; padding:30px; box-sizing:border-box; background:#fff; }
.candidates-item .candidates-title {
  display:flex; align-items:center; width:100%; padding-bottom:16px;
  background-image:url("../image/contents/recruit/candidates-title-border.gif");
  background-position:left bottom; background-repeat:repeat-x; line-height:1.3;
}
.candidates-item .candidates-num {
  display:flex; justify-content:center; align-items:center;
  background:#008aff; width:56px; height:56px; color:#fff;
  font-size:36px; font-weight:bold; line-height:1; margin-right:20px;
}
.candidates-item .candidates-title strong { font-size:30px; }
.candidates-item p { margin-bottom:0; }
@media (max-width:1400px) {
  .candidates-contents { grid-template-columns:1fr 1.5fr; grid-column-gap:30px; }
}
@media (max-width:1200px) {
  .candidates-contents {
    grid-template-rows:auto auto; grid-template-columns:1fr; grid-column-gap:0;
  }
  .candidates-img {
    display:grid; grid-template-rows:1fr; grid-row-gap:0;
    grid-template-columns:1fr 1fr; grid-column-gap:30px; margin-bottom:30px;
  }
}
@media (max-width:640px) {
  .candidates-item .candidates-title strong { font-size:38px; }
}

/*----------------------------------------------------------------------------
   requirement
------------------------------------------------------------------------------*/
.requirement { margin-bottom:80px; }
.requirement .requirement-contents {
  width:100%; box-sizing:border-box; padding:80px 50px;
  background-image:url("../image/contents/recruit/works-bg.gif");
  background-repeat:repeat;
}
.requirement .requirement-list { width:100%; max-width:1200px; margin:0 auto; }
.requirement .requirement-list-item {
  position:relative; width:100%; padding:30px; background:#fff;
  box-sizing:border-box; border-top:3px solid #ccc; margin-bottom:30px;
}
.requirement .requirement-list-header { margin-bottom:30px; }
.requirement .requirement-list-info {
  width:calc(100% - 294px); padding-bottom:30px; border-bottom:1px solid #ccc; margin-right:30px;
}
.requirement .requirement-list-info strong { display:block; color:#008aff; font-size:24px; margin-bottom:12px; }
.requirement .requirement-list-category { display:flex; }
.requirement .requirement-list-syokusyu { display:flex; align-items:center; margin-right:40px; }
.requirement .requirement-list-syokusyu-title {
  display:flex; justify-content:center; align-items:center;
  width:118px; height:42px; background:#008aff; color:#fff; margin-right:20px;
}
.requirement .requirement-list-syokusyu-name { color:#008aff; }
.requirement .requirement-list-kubun { display:flex; align-items:center; }
.requirement .requirement-list-kubun-title {
  display:flex; justify-content:center; align-items:center;
  width:118px; height:42px; background:#69a1b1; color:#fff; margin-right:20px;
}
.requirement .requirement-list-kubun-name { color:#69a1b1; }
.requirement .requirement-list-btn {
  position:absolute; top:30px; right:30px; display:flex;
  width:264px; text-decoration:none; transition:0.2s;
}
.requirement .requirement-list-btn:hover { filter:brightness(1.05); }
.requirement .requirement-list-btn-txt {
  display:flex; justify-content:center; align-items:center;
  width:220px; height:74px; background:#ffe066; color:#f26f6f; font-weight:bold;
}
.requirement .requirement-list-btn-arrow {
  display:flex; justify-content:center; align-items:center;
  width:40px; height:74px; background:#f26f6f;
}
.requirement .requirement-list-btn-arrow img { width:100%; max-width:14px; height:auto; }
@media (max-width:1200px) {
  .requirement .requirement-list-info { width:100%; }
  .requirement .requirement-list-btn  { position:static; }
}
@media (max-width:900px) { .requirement .requirement-contents { padding:80px 24px; } }
@media (max-width:640px) {
  .requirement .requirement-list-btn { width:320px; }
  .requirement .requirement-list-btn-txt { width:276px; }
}

.requirement .requirement-entry-note {
  display:flex; flex-wrap:wrap; width:100%; max-width:1200px;
  padding:12px 30px; background:#fffadf; box-sizing:border-box; margin:0 auto;
  font-size:112.5%;
}
.requirement .requirement-entry-menu { width:180px; margin-right:40px; }
.requirement .requirement-entry-description { width:calc(100% - 220px); }
.requirement .requirement-entry-address {
  display:flex; flex-wrap:wrap; column-gap:30px; font-size:125%;
}
@media (max-width:1200px) {
  .requirement .requirement-entry-note { padding-bottom:30px; }
  .requirement .requirement-entry-menu {
    width:100%; display:flex; margin-right:0;
  }
  .requirement .requirement-entry-menu p { width:50%; }
  .requirement .requirement-entry-description { width:100%; }
}
@media (max-width:640px) { .requirement .requirement-entry-note { font-size:100%; } }

/*----------------------------------------------------------------------------
   recruit-detail
------------------------------------------------------------------------------*/
.recruit-detail .recruit-detail-title {
  width:100%; padding:24px 36px; background:#008aff; box-sizing:border-box; text-align:center; margin-bottom:2em;
}
.recruit-detail .recruit-detail-title h1 {
  font-size:175%; margin:0; padding:0; color:#fff; line-height:1.4;
}
.recruit-detail .recruit-detail-category { margin-top:0.75em; }
.recruit-detail .recruit-detail-syokusyu,
.recruit-detail .recruit-detail-kubun {
  display:inline-block; padding:0.5em 1.5em; background:#fff; color:#232323; font-weight:bold;
}
.recruit-detail .recruit-detail-syokusyu { margin-right:0.5em; }
.recruit-detail-description { margin-bottom:2em; }