@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');

/* reset */
*,
*::after,
*::before {
  box-sizing: border-box
}

ul,
ol {
  list-style-type: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* variant */
:root {
  /* color */
  --main-light: #3388dd;
  --subaccent: #d1e9eb;
  --sp-xl: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ダークモード */
    --main-light: #77aaff;
    --subaccent: #5a8a8c;
  }
}

.zen-maru-gothic {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: normal;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.sem-box {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px dotted var(--main-light);
  border-bottom: 1px dotted var(--main-light);
  margin-bottom: var(--sp-xl);
}

.sem-box th.sem-head,
.sem-box td.sem-cell {
  border: 1px dotted var(--main-light);
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
}

.sem-box th.sem-head {
  background-color: var(--subaccent);
  white-space: nowrap;
}

/* デフォルト(PC)は横並び = tr内でthとtdがセルとして並ぶ、特に指定不要 */

/* スマホ表示:縦並びにする */
@media (max-width: 600px) {

  .sem-box,
  .sem-box tbody,
  .sem-box tr,
  .sem-box th.sem-head,
  .sem-box td.sem-cell {
    display: block;
    width: 100%;
  }

  .sem-box th.sem-head {
    white-space: normal;
  }

  .sem-box th.sem-head,
  .sem-box td.sem-cell {
    border: none;
    border-bottom: 1px dotted var(--main-light);
  }
}