@charset "utf-8";

/* ======================================= */

:root {
  --c-primary: #bbeeee;
  --c-blue:    #47f;
  --c-yellow:  #e80;
  --c-red:     #e33;
  --tt-bin:      70px;
  --tt-konzatsu: 100px;
  --tt-spacer:     5px;
}


/* ======================================= */
/* 運休中 */
/* ======================================= */

.tbl_jikoku {
  position: relative;
  &::before,
  &::after {
    content: "運休中";
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 0;
    width: var(--tt-konzatsu); height: 100%;
    background-color: color-mix( in srgb, #000, transparent 40% );
    color: #fff;
    font-weight: 900; font-size: 1.5em;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
  }
  &::before {
    left: 50%;
    translate: calc( -1 * var(--tt-bin) + 2.5px ) 0;
  }
  &::after { right: 0; }
}



/* ======================================= */
/* 改正日のご案内 */
/* ======================================= */
.kaisei_info {
  padding:1.2em; margin-bottom: 2em;
  font-weight:bold; font-size:1.15em;
  background-color:color-mix(in srgb, #ff9696, transparent 70%)
}

i[class^="ri-emotion"]     { font-size: 1.5em; font-weight:normal; }
[class*="emotion-laugh"]   { color: var(--c-blue); }
[class*="emotion-normal"]  { color: var(--c-yellow); }
[class*="emotion-unhappy"] { color: var(--c-red); }



/* ======================================= */
/* タブ */
/* ======================================= */
.tabs {
  width: 100%;
  margin-bottom: 30px;
  /* ボタン */
  [role="tablist"] {
    width: 100%;
    display: flex; flex-wrap: wrap; gap: 3px;
    button[role="tab"]{
      appearance: none;
      display: block;
      padding: 0.8lh 1.5lh; margin: 0;
      cursor: pointer;
      border: 0; border-radius: 8px 8px 0 0;
      font-size: 1.3em; font-weight: 700; line-height: normal;
      transition: background-color 0.3s ease,
                  opacity          0.3s ease;
      background-color: color-mix(in srgb, #333, var(--c-primary) 50%);
      color: #fff;
      &[aria-selected="true"] {
        opacity: 1.0;
        background-color: color-mix(in srgb, #333, transparent 20%);
        &::before { content: "▼ "; color:var(--c-primary); }
      }
      &[aria-selected="false"] {
        opacity: 0.7;
        &:hover{ opacity: 0.9; }
      }
    }
  }
  /* コンテンツ */
  [role="tabpanel"] {
    padding: 24px 32px 32px;
    border-radius: 0 0 16px 16px;
    background-color: #fff;
    border: 1px solid color-mix(in srgb, #333, transparent 90%);
    &.is-hidden { display: none !important; }
  }
}



/* ======================================= */
/* 時刻表ブロック */
/* ======================================= */
.box_tt {
  &:not(:last-child) { margin-block: 0 32px; }
  &:last-child       { margin-block: 0 !important; }
  > * {
    &:not(:last-child) { margin-block: 0 24px; }
    &:last-child       { margin-block: 0 !important; }
  }
  /* ----------------- */
  /* テーブル */
  /* ----------------- */
  /* 予約便について */
  .tbl_rsvcaption {
    padding: 8px 0;
    display:flex; flex-wrap: wrap; gap:0 1.5em;
    justify-content:start; align-items:center;
    > * {
      display: block;
      &:where( strong ) { font-size:1.3em; color:#fff; color:var(--c-red); width: fit-content; }
      &:where( span )   { flex: 1; font-weight: 700; }
    }
  }
  .timetable_tbl {
    /* 初期化 */
    font-weight: 500;
    &.b_on1  *  { text-align: unset; }
    /* テーブル本体 */
    &.tbl_jikoku {
      col {
        &.tt_bin      { width: var(--tt-bin); }
        &.tt_konzatsu { width: var(--tt-konzatsu); }
        &.tt_spacer   { width: var(--tt-spacer); background-color: #666 !important; }
      }
      th,
      td { text-align: center; line-height: normal; padding: 0.5em; }
      td {
        font-size: 1.2em;
        &:has( i[class^="ri-emotion"] ) {
          vertical-align: middle;
          i { display: block; }
        }
        &.td_spacer { background-color: transparent; }
      }
    }
    &.tbl_bikou {
      line-height: 1.7;
      th { text-align: center; }
      td {
        line-height: 1.9;
        text-align:left; padding: 10px;
        * { text-align:left; }
      }
      .box_flex.box_flex__col2 {
        display:flex; flex-wrap:nowrap; gap:10px;
      }
    }
  }
}



/* ======================================= */
/* 顔アイコン凡例 */
/* ======================================= */
.emotion_hanrei {
  width: fit-content;
  padding: 1.5em;
  background: #eee;
  display: flex; flex-wrap: wrap; gap: 15px;
  > div:nth-child(1),
  > div:nth-child(2) {
    display: flex; flex-direction: column; flex-wrap:nowrap;
  }
  /* ----------------- */
  > div:nth-child(1) {
    width:fit-content;
    > span {
      flex: 1;
      display:block; width: 5px; margin: -1px auto -1px;
      background: linear-gradient(to bottom, var(--c-red), var(--c-yellow), var(--c-blue));
    }
  }
  > div:nth-child(1)::before,
  > div:nth-child(1)::after {
    content: ""; display: block;
    width: 15px; height: calc(tan(60deg) * 10px / 2);
  }
  > div:nth-child(1)::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--c-red); }
  > div:nth-child(1)::after  { clip-path: polygon(0 0, 100% 0, 50% 100%);    background: var(--c-blue); }
  /* ----------------- */
  > div:nth-child(2) {
    flex: 1; justify-content: space-between;
    font-weight: bold;
    mix-blend-mode: multiply;
  }
}
/* ============================== */