/*
Theme Name: 就労移行支援ベルテールlien
Theme URI: 
Author: Toshimi Nishihara
Author URI: lien小金井
Memo: 2025/09｜全3ページ構成にリニューアルする段階で新規作成したCSS。
Note: lien小金井ページで使うスタイルを記述。
*/

/* ------------------------------------------------------------------- */
/* 主なプログラム                                                       */
/* ------------------------------------------------------------------- */
.pgm_section article {
  background: #f0f4e6;
  margin-bottom: 40px;
  padding: 0;
}

.pgm_section article h3 {
  background: #74a447;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  padding: 10px 20px;
  color: #FFFFFF;
}

/* コンテンツ横並び（Flex） */
.pgm_section .pgm_content {
  display: flex;
  gap: 0; /* 写真とテキストの余白 */
  align-items: flex-start;
}

/* 写真幅固定 */
.pgm_photo {
  flex: 0 0 275px;
}

.pgm_photo img {
  width: 275px;
  height: auto;
  display: block;
}

/* テキストエリアは残り幅 */
.pgm_txt {
  flex: 1;
  padding: 40px;
}

.pgm_txt p {
  margin-bottom: 16px;
}

/* 奇数番目 → 写真左・テキスト右 */
.pgm_section article:nth-of-type(odd) .pgm_photo {
  order: 1;
}
.pgm_section article:nth-of-type(odd) .pgm_txt {
  order: 2;
}

/* 偶数番目 → 写真右・テキスト左 */
.pgm_section article:nth-of-type(even) .pgm_photo {
  order: 2;
}
.pgm_section article:nth-of-type(even) .pgm_txt {
  order: 1;
}

/* ------------------------------------------------------------------- */
/* 施設内の様子                                                         */
/* ------------------------------------------------------------------- */
/* PC用テーブル */
.photo_table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.photo_table td {
  width: 30%;
  padding: 2px;
  vertical-align: top;
}

.photo_table .tate {
  width: 34%;
}

.photo_table img {
  width: 100%;
  height: auto;
  display: block;
}

/* PC時はテーブル表示、SP用は非表示 */
.pc { display: block; }
.sp { display: none; }

/* ------------------------------------------------------------------- */
/* タイムスケジュール                                                    */
/* ------------------------------------------------------------------- */
.schedule_list {
  position: relative;
  margin-bottom: 40px;
}

.schedule_list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  position: relative;
}

.schedule_list .time {
  padding: 16px;
  min-width: 25%;
  position: relative;
  padding-left: 80px;
}

.schedule_list .desc {
  padding: 16px;
  min-width: 75%;
}

/* 時計アイコン（10時） */
.schedule_list li.time10 .time::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 57px;
  height: 57px;
  background: url("images/time_icon01x2.png") no-repeat center center;
  background-size: 57px 57px;
}

/* 時計アイコン（16時） */
.schedule_list li.time16 .time::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 57px;
  height: 57px;
  background: url("images/time_icon02x2.png") no-repeat center center;
  background-size: 57px 57px;
}

.schedule_list::before {
  content: "";
  position: absolute;
  left: 66px;
  top: 58px;
  bottom: 0;
  width: 4px;
  background-color: #cccccc;
}


/* 交互に背景色 */
.schedule_list li:nth-child(even) {
  /*background: linear-gradient(to right, transparent 0px, transparent 60px, #eaf7ff 60px);*/
  background: linear-gradient(to right, transparent 0px, transparent 59px, #eaeff3 60px, #eaeff3 100%);
}


/* ------------------------------------------------------------------- */
/* レスポンシブ対応                                                      */
/* ------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

  .flex-block01 {
    flex-direction: column;
    gap: 24px;
  }

  .flex-block01 img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .flex-block01 .txt {
    width: 100%;
  }

}

/* ------------------------------------------------------------------- */

@media screen and (max-width: 425px) {

  /* ------------------------------------------------------------------- */
  /* 主なプログラム                                                       */
  /* ------------------------------------------------------------------- */
  /* 回り込み解除 → 縦並びに */
  .pgm_section .pgm_content {
    flex-direction: column;
    align-items: center; /* 写真中央寄せ */
  }

  /* 写真は中央に固定幅で */
  .pgm_photo {
    flex: none;
    padding: 0 !important;
    margin: 0 auto;
  }

  .pgm_photo img {
    width: 275px;
    height: auto;
    display: block;
  }

  /* テキストエリアは左右40px余白 */
  .pgm_txt {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    padding: 40px;
  }

  /* 奇数・偶数の余白リセット（念のため） */
  .pgm_section article:nth-of-type(odd) .pgm_txt,
  .pgm_section article:nth-of-type(even) .pgm_txt {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .pgm_section article:nth-of-type(odd) .pgm_photo,
  .pgm_section article:nth-of-type(even) .pgm_photo {
    padding: 0 !important;
  }

  /* 奇数番目 → 写真の上に余白 */
  .pgm_section article:nth-of-type(odd) .pgm_photo {
    margin-top: 40px;
    margin-bottom: 0;
  }

  /* 偶数番目 → 写真の下に余白 */
  .pgm_section article:nth-of-type(even) .pgm_photo {
    margin-top: 0;
    margin-bottom: 40px;
  }

  /* ------------------------------------------------------------------- */
  /* 施設内の様子                                                         */
  /* ------------------------------------------------------------------- */

  .pc { display: none; }
  .sp { display: block; }

  .photo_sp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 40px 0;
  }

  .photo_sp img {
    width: 100%;
    /*max-width: 275px;*/
    height: auto;
    display: block;
    margin: 0;
  }

}