@charset "utf-8";

* {
  word-break: break-all;
}

.spico {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.spbico {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.spb2ico {
  width: 36px;
  height: 36px;
  vertical-align: middle;
}

@media screen and (max-width: 1024px) {
  /*  case w<=xxx for SP  */
  .spico {
    width: 32px;
    height: 32px;
    vertical-align: middle;
  }

  .spbico {
    width: 40px;
    height: 40px;
    vertical-align: middle;
  }

  .spb2ico {
    width: 48px;
    height: 48px;
    vertical-align: middle;
  }
}

/* 全体のスタイル */
body {
  font-size: 1.3em;
  font-family: "メイリオ", "ＭＳ Ｐゴシック", "ヒラギノ角ゴシックW3", "Osaka", sans-serif;
  text-align: center;
  background-position: center top;
  background-repeat: repeat-y;
  background-color: #6294FB;
  background-image: url('im/bg1280960.gif'); /* 背景画像 */
}

body.school {
  background-size: 120vw;
  background-repeat: repeat-y;
  background-image: none;
}

.app-bg {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.top_title {
  display: inline-block;
  font-size: 45pt;
  font-weight: bold;
  line-height: normal;
  padding: 8px;
  border: 5px solid #6D6D6D;
  border-collapse: separate;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
}
.top_title span{
  word-break: normal;
}

.font_maru {
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO", serif;
}

.emj {
  font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

marquee {
  font-size: 1.35em;
}

/* 白い透明の下地のスタイル */
#mahoimain {
  margin: 0 auto;
  text-align: center;
  color: #101040;
  width: 50em;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 3px #3333cc solid;
  box-shadow: #000 4px 4px 10px;
  padding: 10px;
  background-image: url('im/gray128.png');
}

#app {
  margin-top: 80px;
}

/* 白い透明の下地のスタイル */
#school-main {
  margin: 0 auto;
  text-align: center;
  color: #101040;
  width: 90%;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 3px #3333cc solid;
  box-shadow: #000 4px 4px 10px;
  padding: 10px;
  background-color: rgba(240, 248, 255, 0.5);
  opacity: 0.9;
}


#mahoimain > table, table.top_title {
  display: inline-table;
  font-size: 2.4em;
}

/* 練習日等のリンク一覧のセンタリング下地 */
.div_table {
  display: inline-block;
  font-size: 1.7em;
  text-align: left;
  line-height: 1.8;
  font-weight: bold;
  padding: 4px;
}

/* 練習日等のリンク一覧のセンタリング下地 */
.div_table_small, .div_table_l {
  display: inline-block;
  font-size: 1.5em;
  text-align: left;
  line-height: 1.7;
  font-weight: bold;
  padding: 4px;
}

/* 下地2のスタイル */
.mahoimain2 {
  position: relative;
  font-size: 1em;
  margin: auto;
  text-align: left;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 1px #3333cc solid;
  background-color: #fff;
  box-shadow: #000 4px 4px 10px;
  padding: 10px;
  z-index: 65536;
}

/*カウンター */
.cnt {
  font-size: 1em;
  text-align: center;
  font-weight: bold;
  padding: 4px;
}

.cnt img {
  width: 1.2em;
}

@media screen and (max-width: 1024px) {
  /* case w<=xxx for SP */
  .cnt img {
    width: 1.5em;
  }
}

.cnt .cnt_today,
.cnt .cnt_yesterday {
  font-size: 1em;
  font-weight: bold;
}

.calendar {
  width: 95%;
  font-size: 1.4em;
  background-color: rgba(204, 255, 204, 0.55);
}

.calendar a {
  text-decoration: none;
}

i.fa {
  padding: 6px;
  font-size: 1.2em;
}

/* popup */
.ui-tooltip, .arrow:after {
  background: #f0e68c;
  border: 2px solid brown;
}

.ui-tooltip {
  padding: 8px 8px;
  color: #C00000;
  border-radius: 10px;
  font: bold 18px Sans-Serif;
  text-transform: uppercase;
  box-shadow: 0 0 7px black;
}

.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

.arrow.top {
  top: -16px;
  bottom: auto;
}

.arrow.left {
  left: 20%;
}

.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top:after {
  bottom: -20px;
  top: auto;
}

.ui-tooltip {
  max-width: 100%;
  background-color: #F5F5F5;
}

.ui-tooltip.popup {
  font-size: 1em;
}

.a-map img {
  vertical-align: middle;
}

.cal_tc {
  font-size: 1em;
}

/* tailwindcss */

.text-left {
  text-align: left
}

.text-center {
  text-align: center
}

.font-bold {
  font-weight: 700;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-7xl {
  font-size: 4.5rem;
  line-height: 1;
}
.text-8xl {
  font-size: 6rem;
  line-height: 1;
}
.text-9xl {
  font-size: 8rem;
  line-height: 1;
}

.leading-18 {
  line-height: 1.8;
}