@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ==================================================
   特定技能 担当者の手引き 共通CSS
   貼り付け先：Cocoon Child の style.css の末尾
   適用範囲：tt- で始まるクラスを付けたブロックのみ
   ================================================== */

/* サイトの色（藍と朱）。朱は期限と重要な注意だけに使う */
:root {
  --tt-main: #1F3A5F;
  --tt-main-light: #E8EEF4;
  --tt-accent: #9C3320;
  --tt-accent-light: #FBECE8;
}

/* 表の共通 */
.wp-block-table.tt-table { margin: 1.25em 0 1.75em; overflow-x: visible; }
.wp-block-table.tt-table table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 15px; line-height: 1.7; }
.wp-block-table.tt-table th,
.wp-block-table.tt-table td { padding: .7em .8em; border: 1px solid #cfd8e0; vertical-align: top; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.wp-block-table.tt-table th { background: var(--tt-main); color: #fff; font-weight: 700; white-space: normal; }
.wp-block-table.tt-table tbody tr,
.wp-block-table.tt-table tbody tr:nth-of-type(2n+1),
.wp-block-table.tt-table tbody tr:nth-of-type(2n) { background: #fff; }

/* Cocoonの「1列目を固定」設定が有効でも、この表では固定しない */
.wp-block-table.tt-table .scrollable-table.stfc-sticky table:not(.wp-calendar-table) tr > *:first-child { position: static; }
.wp-block-table.tt-table .scrollable-table.stfc-sticky table:not(.wp-calendar-table) thead tr > th:first-child { background: var(--tt-main); color: #fff; }
.wp-block-table.tt-table .scrollable-table.stfc-sticky table:not(.wp-calendar-table) tbody tr > td:first-child { background: #fff; color: inherit; }

/* 冒頭の要点 */
.wp-block-table.tt-keypoints td:first-child,
.wp-block-table.tt-keypoints .scrollable-table.stfc-sticky table:not(.wp-calendar-table) tbody tr > td:first-child { width: 1%; white-space: nowrap; background: var(--tt-main-light); }

/* 冒頭の要点：期限の行だけ朱で目立たせる */
.wp-block-table.tt-keypoints tbody tr:first-child td,
.wp-block-table.tt-keypoints .scrollable-table.stfc-sticky table:not(.wp-calendar-table) tbody tr:first-child > td:first-child { background: var(--tt-accent-light); color: var(--tt-accent); font-weight: 700; }

/* 図 */
.tt-flow { max-width: 480px; margin: 1.5em auto 1.75em; }
.tt-flow svg { display: block; width: 100%; height: auto; }

/* スマホ：3列の書類表を、1件ずつのカードにする */
@media screen and (max-width: 600px) {
  .wp-block-table.tt-table table { font-size: 14.5px; }
  .wp-block-table.tt-table th,
  .wp-block-table.tt-table td { padding: .6em .65em; }

  .wp-block-table.tt-docs thead { display: none; }
  .wp-block-table.tt-docs table,
  .wp-block-table.tt-docs tbody,
  .wp-block-table.tt-docs tr,
  .wp-block-table.tt-docs td { display: block; width: 100%; box-sizing: border-box; }
  .wp-block-table.tt-docs tr { margin-bottom: 1em; border: 1px solid #cfd8e0; border-radius: 6px; overflow: hidden; }
  .wp-block-table.tt-docs td { border: 0; border-top: 1px solid #e3e9ee; }
  .wp-block-table.tt-docs td:first-child,
  .wp-block-table.tt-docs .scrollable-table.stfc-sticky table:not(.wp-calendar-table) tbody tr > td:first-child { border-top: 0; background: var(--tt-main-light); font-weight: 700; }
  .wp-block-table.tt-docs td:nth-child(2)::before { content: "必要な場面"; display: block; font-size: 12.5px; font-weight: 700; color: var(--tt-main); }
  .wp-block-table.tt-docs td:nth-child(3)::before { content: "注意点"; display: block; font-size: 12.5px; font-weight: 700; color: var(--tt-main); }
}