@charset "UTF-8";

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

body {
/* モダンなシステムフォントスタック */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", 
               "BIZ UDPGothic", Meiryo, sans-serif;
  
  /* 可読性を高める推奨設定 */
  line-height: 1.7;        /* 少し広めの行間で読みやすく */
  letter-spacing: 0.03em;  /* 少し字間を空けて窮屈さを解消 */
}
@media (min-width: 992px) {
  body {
    font-size:18px; /* PCのフォントサイズ */
  }
}

h1, h2, h3, h4, h5, h6,strong,.job-detail dt {
  font-weight: 700; /* 見出しや強調 */
}

h3{
  text-align:center;
}

section{
  padding:3rem 0;
}

ul {
  margin-bottom:0;
}

/* パンくずリスト_フォントサイズ */
ul.breadcrumb{
  font-size:85%;
}
ul.breadcrumb a:hover{
  text-decoration: none;
}



/* リスト（数字） */
ol { 
    counter-reset: item;
    list-style-type: none;
    margin:0.5em 0;
    padding:0 0 0 1em;
  }

/* リスト_数字の後に）をいれる */
ol {counter-reset: count 0;}
ol li:before {
    content: counter(count) ". ";
    counter-increment: count 1;
}


/* 画像横並び（4列） 
------------------------- */
.grid-4-cols {
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(2, 1fr); /* スマホ時は2列 */
}
@media (min-width: 992px) {
  .grid-4-cols {
    grid-template-columns: repeat(4, 1fr); /* PC時は3列 */
  }
}

/* 横幅80%（width）
------------------------- */
.w80{ width:100%; }
@media (min-width: 992px) {
    .w80{
        width:80%;margin: 0 auto; 
    }
}

/* 余白
------------------------- */
.mt3 {margin-top:3rem;}
.mb3 {margin-bottom:3rem;}

/* リストスタイル（募集概要）
------------------------- */
.job-detail {
    background-color: #f6f6f6; /* 薄い背景で情報を囲む #F1F1F1*/
    border:1px solid var(--pico-color-grey-150);
    padding: 20px;
    border-radius: 8px;
}

.job-detail dt {
    margin-bottom: 4px;
    padding-bottom:10px;
    border-bottom: 1px dotted var(--pico-color-grey-150);
}

.job-detail dd {
    margin: 0 0 20px 0; /* 下にしっかり余白を作る */
    line-height: 1.6;
    border-bottom: 1px solid var(--pico-color-grey-150); /* 区切り線で情報の塊を強調 */
    padding-bottom: 15px;
    padding-top: 15px;
}

/* 最後の要素だけ枠線を消す場合はこちら */
.job-detail dd:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}



/*--------------------------
（メリット）section_横幅100%・上下ラインあり
------------------------- */
.border-box{
    border-top:1px solid var(--pico-color-grey-150);
    border-bottom:1px solid var(--pico-color-grey-150);
    margin: 0 calc(50% - 50vw);
    padding: 4px calc(50vw - 50% + 8px);
    width: 100vw;
}

/*--------------------------
（メリット）ボックス横並び
------------------------- */
.grid-box {
  display: grid;
  gap: var(--pico-spacing);
  padding: 0.8rem; /* 影切れ対策 */
  /* スマホ：デフォルトは1列 */
  grid-template-columns: 1fr;
}
/* タブレット以上：2列 */
@media (min-width: 576px) {
  .grid-box {
    grid-template-columns: 1fr 1fr;
  }
}
/* PC以上：3列 */
@media (min-width: 992px) {
  .grid-box {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* 吹き出し
------------------------- */
.box-01{
  display: flex;
  justify-content: center; 
}

.fukidashi {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 1rem auto 0;
  padding: 1rem;
  border: 2px solid var(--pico-color-grey-700);
  border-radius: 5px;
  background:#fff;
}
/* タブレット以上：2列 */
  @media (min-width: 576px) {
  .fukidashi {
    width: 90%;
  }
}

.fukidashi::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 10px 15px 10px;
  border-color: transparent transparent var(--pico-color-grey-700);
  translate: -50% -100%;
}

.fukidashi::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 7.6px 11.4px 7.6px;
  border-color: transparent transparent #ffffff;
  translate: -50% -100%;
}

.fukidashi p {
  margin: 0;
  padding: 0;
}


/*--------------------------
 Footer
------------------------- */
.footer{
  margin:0;
  padding:0;
  background:var(--pico-color-grey-50);
}

.footer .f-layout{
    display: grid;
    place-items: center; /* 上下左右中央 */
    grid-auto-flow: row;   /* 縦並び */
    /*gap: 0px;     */  
}
.footer .f-layout ul{
  font-size:14px;
  margin:1em 0 0;
  padding:0;
}
.footer .f-layout  li{
    list-style:none;
    letter-spacing:1px;
    text-align: center;
  }
.footer .f-layout  li a { 
    display: block;
    text-decoration: none;
    font-weight:normal;
    margin:0;padding:0;
}
.footer .f-layout  li a:hover { 
  text-decoration:none;
  color: var(--pico-color-azure-700);
}
.footer img.f-logo{max-width:180px;}


/*--------------------------
 ページタイトル
------------------------- */
.pagetitle {
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pico-color-grey-700); /* 画像が読み込まれるまでの背景色 */
}

.pagetitle img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
  /* Photoshopで調整済みなら center center でOK */
  object-position: center center;
}

/* 文字を読みやすくするための半透明の重ね*/
/*.pagetitle .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); 
  z-index: 2;
}*/

.pagetitle h2 {
  position: relative;
  z-index: 3; /* overlayよりも上に配置 */
  color: white;
  margin: 0;
  padding: 10px 20px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  letter-spacing: 0.1em;
  line-height:1.5;
  text-align: center;
  font-size: 1.5rem;
}
.pagetitle h2 small{
  font-size: 0.9rem;
  font-weight:400;
  display: block;
}

@media screen and (max-width: 480px) {
  .pagetitle h2 {
    font-size: 1.2rem;
    letter-spacing: 0;
  }
}

/*--------------------------
 HEADER
------------------------- */
/* ヘッダー（共通・PCベース）
------------------------- */
.site-header {
    background-color: #fff;
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.1);*/
    top: 0;
    margin:0;
    padding:0;
}

.header-container {
  /*max-width: 1200px;*/
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between; /* ロゴとメニューを左右に割振る */
  align-items: center;
}

h1.logo img {
  width: 200px;
}

h1.logo {
  margin:0 15px; 
  display: block;
  height: auto;
}

.pc-nav { 
  margin-right:15px; 
}

.pc-nav ul {
  gap: 20px; /* メニュー間の余白 */
}

.pc-nav a {
  font-size: 16px;
  font-weight: 700;
  transition: color 0.3s;
  color:#333;
  text-decoration: none;
}

.pc-nav a:hover {
  color: var(--pico-color-azure-700); /* ホバー時の色 */
}

/*--------------------------
 スマホ用ボトムナビゲーション（初期値：非表示）
------------------------- */
.sp-bottom-nav {
  display: none; /* PCでは非表示 */
}

/*--------------------------
 レスポンシブ対応（スマホサイズ：767px以下）
------------------------- */
@media (max-width: 767px) {
  /* 1. PC用ナビを非表示にする */
  .pc-nav {
    display: none;
  }

  /* 2. スマホ用ボトムナビを表示・画面下に固定 */
  .sp-bottom-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--pico-color-azure-550);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;

    /* 基本の高さ（60px）に、セーフエリア（スマホ固有の余白）の高さが自動でプラスされます */
    height: calc(60px + env(safe-area-inset-bottom)); 
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sp-bottom-nav ul {
    display: flex;
    justify-content: space-around; /* 均等に配置 */
    align-items: center;
    height: 60px;
  }

  .sp-bottom-nav li {
    flex: 1;
    text-align: center;
  }

  .sp-bottom-nav a {
    display: flex;
    flex-direction: column; /* アイコンと文字を縦並びに */
    justify-content: center;
    align-items: center;
    font-size: 10px; /* 文字は小さめに */
    height: 100%;
    font-weight: 700;
    color:#fff;
  }

  .sp-bottom-nav .material-symbols-outlined {
    margin-bottom: 2px;
    font-variation-settings:
    'FILL' 0,
    'wght' 300, 
    'GRAD' 0,
    'opsz' 30;
  }

  .sp-bottom-nav a:active {
    color: var(--pico-color-azure-700); /* タップ時の色 */
  }
  .sp-bottom-nav a:hover{
    /*color: var(--pico-color-amber-150);  */
    text-decoration: none;
    background:var(--pico-color-azure-350);
  }

  /* リンクボタン単体のスタイル */
  /*.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    font-size: 10px;
  }

  .nav-icon {
    font-size: 18px;
    margin-bottom: 2px;
  }
    */

  /* 3. ボトムナビに被らないようにメインコンテンツの下部に余白を作る */
  .footer{
    padding-bottom: 80px; /* ナビの高さ＋余裕分 */
  }
}

/*--------------------------
 ページトップボタン 
------------------------- */
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px var(--pico-color-grey-700);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid var(--pico-color-grey-700);
    border-right: 3px solid var(--pico-color-grey-700);
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop__arrow {
        border-color: var(--pico-color-azure-500);
    }
}
@media (max-width: 767px) {
  /* 1. スマホ用では非表示にする */
  .pagetop {
    display: none;
  }
}

/*--------------------------
 お問い合わせボタン_ページ遷移のため<button>タグは使用しない
------------------------- */
a.linkbutton01{
  width:100%;
  margin:1rem 0 0;
  background:var(--pico-color-violet-650);
  border:none;
}
a.linkbutton01:hover{
  background:var(--pico-color-violet-550);
}

/*--------------------------
 採用情報_リンクボタン
------------------------- */
/* 全体コンテナ */
.recruit-links-container {
    max-width: 100%;
    margin: 40px auto;
    padding: 0;
}

/* 見出しスタイル */
.recruit-title {
  display: flex;
  align-items: center;
  white-space: nowrap;  /* 念のため、文字が途中で改行されるのを防ぐ */
  margin-bottom:1rem;
}
.recruit-title::after {
  content: '';
  display: inline-block;
  flex-grow: 1;
  height: 1px;
  background: var(--pico-color-grey-150);
  margin-left: 1em;
}

/* リストの基本設定 */
.recruit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: grid;
    gap: 20px; /* ボタン同士の余白 */
}
.recruit-list li{
    list-style:none;
}

/* ボタン（リンク）の共通装飾 */
.recruit-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-color: #fff;
  color: #333;
  font-weight: 700;
  border: 1px solid var(--pico-color-grey-200);
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}
/* ホバー時の動き */
.recruit-list a:hover {
  background-color: var(--pico-color-azure-550);
  color: #fff;
  border-color: var(--pico-color-azure-550);
}

/*--------------------------
グループごとの出し分け（レスポンシブ）
------------------------- */
/* スマホ・タブレット（デフォルト：縦に並べる、または2列） */
@media (max-width: 991px) {
  /* 大きなボタン（働き方）：1列 */
  .wide-buttons .recruit-list {
    grid-template-columns: 1fr;
  }
  .wide-buttons .recruit-list a {
    height: 60px; /* 高さを出して押しやすく */
    font-size: 1rem;
  }

  /* 標準ボタン（職種別）：2列 */
  .standard-buttons .recruit-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .standard-buttons .recruit-list a {
    height: 50px;
    font-size: 0.95rem;
  }
}

/* PCサイズ */
@media (min-width: 992px) {
  /* 大きなボタン：横並び2列（幅広） */
  .wide-buttons .recruit-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .wide-buttons .recruit-list a {
    height: 70px;
    font-size: 1rem;
  }

  /* 標準ボタン：横並び4列 */
  .standard-buttons .recruit-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .standard-buttons .recruit-list a {
    height: 55px;
    font-size: 0.95rem;
  }
}

/*--------------------------
戻る_webフォント
------------------------- */
div.center{
  display: grid;
  place-content: center;
}

.icon-undo {
  display: inline-flex;
  align-items: center;
  gap: 0.4em; /* pico.cssの余白感に合わせて少し広めに */
  text-decoration: none;
  font-size:0.9em;
}

/* アイコン自体のスタイリング */
.icon-undo .material-symbols-outlined {
  font-size: 1.25em; /* 文字の大きさに自然に連動させます */
  
  /* ↓ここで線の太さを細く（100〜700）カスタマイズできます！ */
  /* pico.cssの洗練された雰囲気に合わせるなら 300〜400 あたりがおすすめです */
  font-variation-settings:
    'FILL' 0,
    'wght' 300, 
    'GRAD' 0,
    'opsz' 24;
}

/* ホバー時の色変更 */
.icon-undo:hover {
  color: var(--pico-color-azure-700);
}

/* -------------------------
ダークモード時のテキストカラー
------------------------- */
@media (prefers-color-scheme: dark) {
  .job-detail,.job-detail dt,.job-detail dd,.job-detail li,
  .fukidashi p,
  .footer {
  color: #424751;
  }
}