/*
 Theme Name:     Divi Child recruit
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
  
/* =Theme customization starts here
------------------------------------------------------- */
/*複数の列の高さを均一化する*/
.equal-height-cols .et_pb_column  {
    display: flex;
    flex-direction: column;
  }
  .equal-height-cols .et_pb_module  { flex-grow: 1;}
  .equal-height-cols .et_pb_gutters1 .et_pb_column_1_5, .et_pb_gutters1.et_pb_row .et_pb_column_1_5 {
    width:20%!important;
  }
  .equal-height-cols .et_pb_gutters1.et_pb_row_5col>.et_pb_column.et_pb_column_1_5 {
    width:20%!important;
  }
  /*複数の列の高さを均一化する*/
  .equal-height-cols .et_pb_column .item-end-box  {
    display: flex;
    flex-direction: column;
  }
  .equal-height-cols .et_pb_module .item-end-box {
    flex-grow: 1;
    align-items:flex-end;
  }
  .et_pb_scroll_top.et-pb-icon  {
    background: #d33c3c;
    font-size: 2.5em;
  }
  /* モバイルメニューのカスタマイズ */
  .opened .mobile_menu_bar:before {
    content: "\4d"!important;
    left: 0;
    top: 0;
    cursor: pointer;
  }
  /* モバイルメニューのカスタマイズ */
  .et_pb_fullwidth_menu .et_mobile_nav_menu  {  margin: 0 1px 0 6px;}
  /*
  .et_mobile_nav_menu:before   {
    content: 'MENU';
    position: absolute;
    TOP: 53px;
    right:5px;
    margin-top:0px;
    color: #333;
    font-size:14px;
  }
  */
  /*お知らせ一覧設定タブの基本デザイン */
  .tabs  {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
  }
  .tabs button  {
    height: 35px;
    width: 150px;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 10px;
    border: 1px solid #df939b;
    background: transparent;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 15px;
    padding: 0 10px;
  }
  /* ▶ 印のデザイン */
  .tabs button::before  {
    content: "▶";
    color: #df939b;
    font-size: 1em;
  }
  /* アクティブなタブのデザイン */
  .tabs button.active  {
    background: #df939b;
    color: #ffffff;
    border: none;
  }
  /* アクティブなタブの ▶ 印 */
  .tabs button.active::before  { color: #ffffff;}
  /* アクティブなタブの ▶ 印 */
  .tabs button.active::before  { color: #ffffff;}
  /* 🔹 記事一覧のレイアウト */
  .post-item  {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #d3d3d3;
  }
  /* 🔹 最初のリストに border-top を追加 */
  .post-item:first-child  {
    border-top: 1px solid #d3d3d3;
  }
  /* 日付のデザイン */
  .post-date  {
    font-size: 1.2em;
    color: #000;
    margin-right: 10px;
  }
  /* ラベルデザイン */
  .label  {
    display: inline-block;
    font-size: 1.1em;
    font-weight: bold;
    padding: 7px 10px;
    width: 140px;
    text-align: center;
    color: #000;
    border-radius: 50px;/* 両側を丸くする */
    background: #f4dcdd;/* デフォルトの背景色 */
    margin-right: 10px;
  }
  /* 特定のラベル色 */
  .label-honbu { background: #bfa97f;}
  .label-recruit { background: #a8cee5;}
  /* 記事タイトル */
  .post-title  {
    font-size: 1.2em;
    color: #000;
    text-decoration: none;
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left:30px;
  }
  /* 🔹 レスポンシブ対応（820px以下） */
  @media (max-width: 820px) {
    .tabs button  {
        height: 26px;
        width: 90px;
        font-size: 0.8em;
        font-weight: bold;
        border-radius: 5px;
        gap: 5px;
    }
    .label {
        display: inline-block;
        font-size: 1em;
        font-weight: bold;
        padding: 7px 10px;
        width: 120px;
    }
    .post-item {flex-wrap: wrap;}
    .post-title {
        width: 100%;
        margin-top: 5px;
        padding-left:15px;
    }
  }
  @media (max-width: 480px)  {
    .post-item { padding: 10px 0;}
    .tabs  { gap: 5px;}
    .tabs button  {
        width: 110px;
        padding: 0 5px;
    }
    .post-date  {
        font-size: 1em;
    }
    .label  {
        display: inline-block;
        font-size: 1em;
        font-weight: 400;
        padding: 0px 10px;
        width: 120px;
    }
    .post-title  {
        width: 100%;
        margin-top: 5px;
        padding-left:0px;
        font-size: 1em;
    }
  }
  .vertical-text  {
    writing-mode: vertical-rl;/* 右から左へ縦書きの場合 */
    text-orientation: upright;/* 文字を立たせる（横向きにならないように） */
  }
  @media screen and (max-width:980px) {
    .vertical-text  {
        writing-mode: horizontal-tb !important;
        text-orientation: initial !important;
    }
  }
  @media screen and (max-width:980px) {
  .sp-none{display:none!important;}
  }
  @media screen and (min-width:981px) {
    .pc-disnone { display:none!important;}
  }
  /* PCレイアウト */
  @media screen and (min-width: 981px) {
    .falist  {
        width: 100%;
        max-width: 1280px;
        border-collapse: collapse;
        table-layout: fixed;
    }
    th.area  { width: 15%;}
    th.rb.mainth { width: 50%;}
    th.etc  { width: 35%;}
  }
  /* === タブレット (980px以下) === */
  @media screen and (max-width: 980px)  {
    .falist th.area  { display: none;/* 地域タイトルを非表示 */ }
    .falist th.area::before { display: none;}
    .falist th.mainth, .falist td.maintd { width: 60%;}
    .falist th.etc, .falist td.kleft  {
        width: 40%;
        font-size: 1.1em;
    }
    .falist td.last-height  { padding-bottom:15px;}
  }
  /* === スマートフォン (768px以下) === */
  @media screen and (max-width: 768px)  {
    .falist  {
        display: block;/* Table構造を解除 */
        width: 100%;
    }
    .falist tr  {
        display: block;/* 行ごとにブロック化 */
        width: 100%;
    }
    .falist td, .falist th  {
        display: block;/* 各セルをブロック化 */
        width: 100%;/* すべてのカラムを100%に */
        text-align: left;
    }
    .falist th.mainth, .falist th.etc  {
        width: 100%;
        display: block;
    }
    .falist td.maintd  {
        width: 100%;
        border-right: none;
        border-bottom: dashed 1px #a57a43;
    }
    .falist td.kleft  {
        width: 100% !important;/* 幅を100%に */
        display: block;/* flexを解除してブロック要素に */
        border-bottom: solid 2px #a57a43;
    }
    .falist td.kleft .container7  {
        display: flex;
        flex-wrap: nowrap; /* 横並びを維持 */
        width: 100%;
    }
    .falist td.kleft .container7 div  {
        width:50%;
        min-width: 100px;
    }
    .falist td.last-height {padding-bottom:15px;}
  }
  /*３カラムのレスポンシブ停止*/
  @media (max-width: 980px)  {
    .report-seet .et_pb_column_1_3  {
        width: 29.6667%;
    }
  }
  @media (max-width: 480px)  {
    .report-seet .et_pb_column_1_3  {
        width: 29.6667%!important;
    }
  }
  @font-face { font-display: swap}
  .hidden-element { visibility: hidden}
  .bg-left{
    width:75%;
    background:#ecf6ff;
    border-radius: 0 5% 5% 0;
  }
  /*地区お知らせ一覧設定*/
  .news-info {
      background: transparent;
      padding: 10px 20px 20px;
  }
  .news-info h2 {
      color: #0062c2;
      font-size: 2.3em;
      margin-bottom: 15px;
      font-weight:bold;
  }
  .newslist {
      display: flex;
      align-items: center; /* 子要素を垂直方向中央揃え */
      padding: 10px 0;
      position: relative;
  }
  .newslist:first-child {
      border-bottom: 1px solid #d3d3d3;
      border-top: 1px solid #d3d3d3;
  }
  .newslist:last-child {
      border-bottom: 1px solid #d3d3d3;
  }
  /* 日付の配置を完全に中央に */
  .entryday {
      font-size: 1.2em;
      color: #000;
      white-space: nowrap;
      margin-right: 15px; /* 日付とタイトルの間隔 */
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 1.2em; /* 最小限の高さを確保 */
      flex-shrink: 0;
      padding-top:15px;
  }
  /* タイトルの枠全体をリンク化 */
  .news-title {
      font-size: 1.2em;
      color: #000;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center; /* 中央揃え */
      position: relative;
  }
  
  /* タイトル枠全体をクリックできるように */
  .news-title a {
      color: #000;
      text-decoration: none;
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; /* 省略記号 (...) を表示 */
      width: 100%;
      height: 100%;
      padding: 10px 0; /* クリック範囲を広げる */
      display: flex;
      align-items: center;
  }
  /* リンクのホバー時のスタイル */
  .news-title a:hover {text-decoration: underline;}
  @media screen and (max-width:768px){
      .news-info h2 {
          color: #d35e70;
          font-size: 1.9em;
          margin-bottom: 15px;
      }
  }
  /*施設紹介ページ*/
  .mark-area{display:block;}
  .mark-info{
      display:flex;
      flex-wrap: wrap;
  }
  .mark-info .mark-title{
      width:100%;
      padding:10px;
      color:#000;
  }
  .mark-info .mark-title p{font-size:1.7em;}
  .mark-info .mark-title h2{
      font-size:2.8em;
      padding:10px 0;
  }
  .mark-info .icon-unit{
      width: 47%;
      padding:0 1%;
  }
  .mark-info .icon-unit img{
      width:100%;
      padding:10px 15px;
      text-align:center;
      margin:0 auto;
  }
  .mark-info .icon-unit p{
      font-size:1.4em;
      text-align:center;
      color:#000;
  }
  @media screen and (max-width:980px){
      .mark-info .mark-title{ width:40%;}
      .mark-info .icon-unit{ width:15%; }
  }
  @media screen and (max-width:768px){
      .mark-info .mark-title{
          width:40%;
          padding:10px 0;
      }
      .mark-info .mark-title p{font-size:1.2em;}
      .mark-info .mark-title h2{
          font-size:2.6em;
          padding:10px 0;
      }
      .mark-info .icon-unit{ width:20%;}
      .mark-info .icon-unit img{ padding:10px 5px;}
      .mark-info .icon-unit p{font-size:1em;}
  }
  @media screen and (max-width:480px){
      .mark-info .mark-title{
          width:60%;
          padding:10px 0;
      }
      .mark-info .mark-title p{font-size:1em;}
      .mark-info .mark-title h2{
          font-size:2.2em;
          padding:10px 0;
      }
      .mark-info .icon-unit{width:20%;}
      .mark-info .icon-unit img{padding:10px 5px;}
      .mark-info .icon-unit p{ font-size:1em;}
  }
  h2.dvmd_tm_title { padding-bottom:8px; border-bottom: 1px solid #000;}
  /*色分け下線設定*/
  .underline h3{
    padding-bottom: 1px;
    font-weight: bold;
    font-size: 2.5em;
    position: relative;
    border-bottom: 3px solid #dcdddd;/*右：グレー*/
    margin-bottom:10px;
  }
  .underline h3::before{
    content: '';
    position: absolute;
    bottom: -3px;
    width: 15%;
    height: 3px;
    background: #0062c2;/*左:ブルー*/
  }
    /*色分け下線設定*/
  .underline h4{
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 1.6em;
    color:#0062c2;/*左:ブルー*/
    position: relative;
    border-bottom: 3px solid #dcdddd;/*右：グレー*/
    margin-bottom:10px;
  }
  .underline h4::before{
    content: '';
    position: absolute;
    bottom: -3px;
    width: 15%;
    height: 3px;
    background: #0062c2;/*左:ブルー*/
  }

    /*要項一覧のタブ設定*/
  .et_pb_tabs_controls li{ width:50%;} 
  .et_pb_tab_0 a, .et_pb_tab_1 a{
    border-bottom:3px solid #dcdddd;
    text-align:center;
  }
  .et_pb_tab_active a{
    border-bottom:4px solid #0062c2;/*左:ブルー*/
  }
/*募集要項テーブル設定*/
  table.entry-summary {
    /*border-collapse: collapse;*/
    width: 100%;
  }
  .tb01 th{
    width:18%;
    padding: 20px 10px!important;
    border-top: solid 1px #999; 
    text-align:left;
    box-sizing:border-box;
    color: #0062c2!important;
  }
  .tb01 td{
    padding: 20px 10px!important;
    border-top: solid 1px #999!important;
    box-sizing:border-box;
    text-align:left;
    color:#000;
  }
  .tb01 th {
    background: #fff;
    color: #0062c2;
  }
  .tb01 tr:last-child{
    border-bottom: solid 1px #ccc;
  }
  .list-style-black{
    color:#0062c2;
  }
  .list-style-black span{
    color:#000;    
  }
  @media screen and (max-width: 980px) {
    .tb01 th{ width: 30%;}
}
  @media screen and (max-width: 767px) {
      .et_pb_tabs_controls li{
        float: left!important;
      }
      .et_pb_tab_0 a, .et_pb_tab_1 a{
        width:50%;
        text-align:center;
      }
      .et_pb_tab_active a{
        border-bottom:4px solid #0062c2;/*左:ブルー*/
      }
    .tb01 {
      width: 100%;
    }
    .tb01 th {
      background: #0062c2;
      color: #fff!important;
      text-align:center;
    }
    .tb01 th,
    .tb01 td {
      display: block;
      width: 100%;
      border-bottom:none;
    }
  }
 
  .info-btn{    
    text-align:center;
    margin:10px auto -10px;
  }
  .info-btn2{
    margin:10px 0 -10px;
  }
  .info-btn a,.info-btn2 a{
    background: #0062c2;
    padding:10px 20px;
    text-align:center;
    border-radius:25px!important;
    font-size:1.1em;
    color:#fff;
  }
  .info-btn a:hover,.info-btn2 a:hover{
    background: #ecf6ff;
    border:solid 2px #0062c2!important;
    box-sizing: border-box;
    color:#0062c2;
    cursor: pointer;
  }
  .list-btn-on{
    display:flex;
    justify-content:space-between;
  }
  @media screen and (max-width: 767px) {
    .info-btn a,.info-btn2 a{
      padding:10px 12px;
      border-radius:22px!important;
      font-size:0.9em;
    }
  }
  /*フロー図*/
/* ============================= */
/* 共通スタイル（PC・スマホ共通） */
/* ============================= */

/* 全体ラッパー */
.flow-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* タイトル部分 */
.flow-container > h3 {
  text-align: center;
  font-size: 1.6rem;
  margin-bottom: 40px;
  font-weight: bold;
}

/* フロー図部分：PC版は横並び */
.flow-diagram {
  display: flex;
  align-items: center; /* 中央揃えが必要な場合は調整 */
  justify-content: center; /* 中央揃えが必要な場合は調整 */
  gap: 25px; /* 矢印の幅(20px) + 要素間の隙間(20px) = 40px 程度に調整 */
  flex-wrap: wrap; /* PCでも画面幅が狭い場合に折り返すように */
}

/* 各ステップの基本スタイル */
.arrow-box {
  position: relative;  /* 擬似要素配置用 */
  background-color: #0062c2;
  padding: 1em 0.5em;
  text-align: center;
  min-width: 90px;
  border-radius: 4px;
  overflow: visible;  /* 擬似要素がはみ出しても表示 */
  flex: 1; /* ステップの幅を均等にする場合など */
  max-width: 180px; /* 幅が広がりすぎないように最大幅を設定（調整可能） */
}

/* pタグのスタイル */
.arrow-box p {
  margin: 0 0 0.3em;
  font-weight: bold;
  color: #ecf6ff;
}

/* h4タグのスタイル */
.arrow-box h4 {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
}

/* ============================= */
/* PC用スタイル (デフォルト) */
/* ============================= */

/* PC表示時：右向きの矢印を生成 (:not(.last) をここに追加) */
.arrow-box:not(.last)::after {
  content: "";
  position: absolute;
  top: 50%; /* 上下中央に配置 */
  transform: translateY(-50%); /* 上下中央揃えの調整 */
  right: -20px; /* ボックスの右端から矢印の幅分外側に配置 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 40px 20px; /* 上下 右 左 */
  border-color: transparent transparent transparent #0062c2; /* 左側の色だけ指定 */
  z-index: 1; /* 他の要素より手前に表示する場合 */
}

/* 最後の要素の矢印は非表示 (明示的に指定する場合) */
/* .arrow-box.last::after { */
/* display: none; */
/* } */
/* 全体ラッパー */
.flow-container2 {
  max-width: 570px;
  margin: 40px 0;
  padding: 0 ;
}

/* フロー図部分：PC版は横並び */
.flow-diagram {
  display: flex;
  align-items: center; /* 中央揃えが必要な場合は調整 */
  justify-content: left; /* 中央揃えが必要な場合は調整 */
  gap: 25px; /* 矢印の幅(20px) + 要素間の隙間(20px) = 40px 程度に調整 */
  flex-wrap: wrap; /* PCでも画面幅が狭い場合に折り返すように */
}

/* 各ステップの基本スタイル */
.arrow-box2 {
  position: relative;  /* 擬似要素配置用 */
  background-color: #0062c2;
  padding: 1em 0.5em;
  text-align: center;
  min-width: 90px;
  border-radius: 4px;
  overflow: visible;  /* 擬似要素がはみ出しても表示 */
  flex: 1; /* ステップの幅を均等にする場合など */
  max-width: 140px; /* 幅が広がりすぎないように最大幅を設定（調整可能） */
  min-height:84px;
  /* 文字を上下中央に揃えるためにFlexboxを追加 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 上下中央揃え */
  align-items: center;     /* 左右中央揃え */
  text-align: center;      /* テキストの中央寄せ */
}

/* pタグのスタイル */
.arrow-box2 p {
  margin: 0 0 0.3em;
  font-weight: bold;
  color: #ecf6ff;
}

/* h4タグのスタイル */
.arrow-box2 h4 {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
}

/* ============================= */
/* PC用スタイル (デフォルト) */
/* ============================= */

/* PC表示時：右向きの矢印を生成 (:not(.last) をここに追加) */
.arrow-box2:not(.last)::after {
  content: "";
  position: absolute;
  top: 50%; /* 上下中央に配置 */
  transform: translateY(-50%); /* 上下中央揃えの調整 */
  right: -20px; /* ボックスの右端から矢印の幅分外側に配置 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 40px 20px; /* 上下 右 左 */
  border-color: transparent transparent transparent #0062c2; /* 左側の色だけ指定 */
  z-index: 1; /* 他の要素より手前に表示する場合 */
}

/* ============================= */
/* スマートフォン用レスポンシブ (767px以下) */
/* ============================= */
@media screen and (max-width: 767px) {
  /* フロー図を縦並びに */
  .flow-diagram {
    flex-direction: column;
    gap: 60px; /* ステップ間の余白（下矢印分を含む） */
    align-items: stretch; /* 各ステップを親要素の幅いっぱいに伸ばす */
  }

  /* 各ステップを横幅100%に */
  .arrow-box{
    width: 100%; /* 幅を100%に */
    max-width: none; /* PC用の max-width を解除 */
    margin-bottom: 0; /* flexのgapで間隔を調整するので不要に */
    /* 縦並び時の左右マージンが必要な場合はここで設定 */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* max-width: 90%; /* 中央寄せにする場合など */
  }
    /* 各ステップを横幅100%に */
    .arrow-box2{
      width: 100%; /* 幅を100%に */
      max-width: none; /* PC用の max-width を解除 */
      margin-bottom: 0; /* flexのgapで間隔を調整するので不要に */
      min-height:60px;
    }

  /* PC用の矢印スタイルを上書きして、下向き矢印に変更 */
  .arrow-box:not(.last)::after,.arrow-box2:not(.last)::after {
    /* 位置と形状を上書き */
    top: 75%; /* ボックスの下端に配置 */
    left: 50%;
    bottom: auto; /* PC用の bottom (または暗黙のauto) をリセット */
    right: auto; /* PC用の right をリセット */
    transform: translateX(-50%); /* 左右中央揃え */
    margin-top: 20px; /* ボックスと矢印の間の隙間 (gapで調整したので0でも良いかも) */

    /* border を使った三角形に変更 (clip-pathより互換性が高い場合がある) */
    border-width: 20px 20px 0 20px; /* 上 右 下 左 */
    border-color: #0062c2 transparent transparent transparent; /* 上側の色だけ指定 */
  }
}
/* --- 言語切り替えボタンのスタイル --- */

/* 基本スタイル（すべてのボタン要素に適用） */
.btn-position{
 display:flex;
 justify-content:flex-end;
}
.language-switch-button {
  display: block; /* ボタンを横並びにする */
  padding: 8px 13px; 
  margin: 0 5px 5px;
  border: 2px solid #cccccc;
  border-radius: 25px; 
  background-color: #f0f0f0; 
  color: #333333; 
  font-size: 1em; 
  font-weight: bold; 
  text-align: center; 
  text-decoration: none; /* リンクの下線を消す */
  cursor: pointer; 
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* ホバー時の変化を滑らかに */
  -webkit-appearance: none; /* iOSなどのデフォルトスタイル解除 */
  -moz-appearance: none;
  appearance: none;
  width:220px;
}

/* 他言語への切り替えボタン（アクティブなリンク）にマウスが乗った時のスタイル */
.language-switch-button:not(.current-language):hover {
  background-color: #e0e0e0; /* ホバー時の背景色（少し濃く） */
  border-color: #bbbbbb; /* ホバー時の枠線色 */
  color: #000000; /* ホバー時の文字色（黒） */
}

/* 現在表示中の言語のボタン（非アクティブ）のスタイル */
.language-switch-button.current-language {
  background-color: #ffffff; /* 背景色（例: WordPressの標準的な青） */
  color: #0062c2; /* 文字色（白） */
  border-color: #0062c2; /* 枠線色 */
  cursor: default; /* クリックできないことを示すカーソル */
  opacity: 0.9; /* 少しだけ透明にする（任意） */
}

/* 現在表示中の言語ボタンにマウスが乗ってもスタイルは変えない（任意） */
/* もしホバー効果を付けたい場合は、この部分をコメントアウトまたは削除して上記 :hover を調整 */
.language-switch-button.current-language:hover {
   /* スタイルを固定する場合は特に指定しないか、通常時と同じ値を書く */
   /* background-color: #0073aa; */
   /* color: #ffffff; */
   /* border-color: #0073aa; */
}

@media screen and (max-width:980px){
  .btn-position{
    display:none;
   }
}

/* デフォルトではインドネシア語用コンテンツを非表示にする */
.indonesia-content {
  display: none;
}

/* lang属性が "id" のときは表示する */
html:lang(id-ID) .indonesia-content {
  display: block;
}