@charset "utf-8";

html, body{
  width: 100%;

  margin: 0;
  padding: 0;

  background-color: var(--base1);

  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-size: 8px;
}

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

header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0;

  width: calc(100% - 4rem * 2);
  height: 10rem;

  margin: 0;
  padding: 0 4rem;

  background-color: #ffffff88;

  backdrop-filter: blur(1rem);
}

header>a{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;

  width: fit-content;
  height: 100%;

  margin: 0;
  padding: 0;

  text-decoration: none;
}

header>a>p{
  display: block;

  width: fit-content;
  height: 100%;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 3rem;

  line-height: 10rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0.1rem;
}
header>a>small{
  display: block;

  width: fit-content;
  height: 100%;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;

  line-height: 10rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0.1rem;
}

header>div{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;

  width: fit-content;
  height: 100%;

  margin: 0;
  padding: 0;
}

header>div>a{
  display: block;

  width: fit-content;
  height: fit-content;

  margin: auto 0;
  padding: 0 2rem;

  border-radius: 2.5rem;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 2rem;

  line-height: 5rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;
}
header>div>a:hover{
  background-color: var(--base2);
  text-decoration: underline;
}

span#topMargin{
  display: block;

  width: 100%;
  height: 10rem;

  margin: 0;
  padding: 0;
}

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

div#mainWindow{
  display: grid;
  grid-template:
    "term term" 5rem
    "class aa" 1fr
    "class others" 1fr
    / 1fr 1fr;
  gap: 2rem;

  width: calc(100% - 4rem * 2);
  height: calc(100dvh - 10rem - 5rem - 2rem * 2);

  margin: 0;
  padding: 2rem 4rem;

  background-color: var(--base2);
}

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

div#term{
  grid-area: term;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0;

  width: calc(100% - 1rem * 2);
  height: 3rem;
  
  margin: 0;
  padding: 1rem;

  border: none;
  border-radius: 2.5rem;

  background-color: var(--base1);
}

div#term>h3{
  display: block;
  
  width: fit-content;
  height: auto;

  margin: 0 2rem 0 1rem;
  padding: 0;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.75rem;

  line-height: 3rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;

  white-space: nowrap;
}

ul#termList{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;

  width: fit-content;
  height: 3rem;
  
  margin: 0;
  padding: 0;

  border: none;
  border-radius: 2.5rem;

  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
ul#termList::-webkit-scrollbar{
  display: none;
}

ul#termList>li{
  display: block;

  width: fit-content;
  height: auto;

  margin: 0;
  padding: 0 3rem;

  border: none;
  border-radius: 1.5rem;

  background-color: var(--base2);

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.75rem;

  line-height: 3rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;

  white-space: nowrap;
  
  cursor: pointer;
}
ul#termList>li.active{
  background-color: var(--blue2);

  color: var(--base1);
}
ul#termList>li.active:hover{
  filter: brightness(1.2);
}
ul#termList>li:not(.active):hover{
  filter: brightness(0.9);
}
ul#termList>li:not(.active):active{
  background-color: var(--base3);
}

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

div#classView{
  grid-area: class;
  
  display: block;

  width: calc(100% - 2rem * 2);
  height: calc(100% - 2rem * 2);

  margin: 0;
  padding: 2rem;

  border: none;
  border-radius: 2.5rem;

  background-color: var(--base1);
}

div#classView>h3{
  display: block;

  width: fit-content;
  height: auto;

  margin: 0 0 1rem 0;
  padding: 0;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.75rem;

  line-height: 3rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;
}

div#classView>div#classTable{
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 5rem repeat(5, 1fr);
  gap: 2px;

  width: 100%;
  height: calc(100% - 3rem - 1rem);

  margin: 0;
  padding: 0;

  border: none;
  border-radius: 0.5rem;

  overflow: hidden;
}

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

/* 時限名 */
div#classTable>div.classTableColumn{
  display: grid;
  grid-template-rows: 3rem repeat(6, 1fr);
  gap: 2px;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  background-color: var(--base1);
}

div#classTable>div.classTableColumn>div{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border-radius: 0.5rem;
}
div#classTable>div#classTablePeriodName>div{
  background-color: var(--base3);
}

div#classTable>div.classTableColumn>div>p{
  display: block;

  width: calc(100% - 1rem * 2);
  height: fit-content;

  margin: auto 0;
  padding: 0 1rem;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;

  line-height: 3rem;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0;
}

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

div#classTable>div.classTableColumn>div:first-of-type{
  background-color: var(--base3);
}
div#classTable>div.classTableColumn>div:not(:first-of-type){
  background-color: var(--base2);
}
div#classTable>div.classTableColumn>div:not(:first-of-type).active{
  outline: var(--blue2) 2px solid;
  outline-offset: -2px;
}
div#classTable>div.classTableColumn>div:not(:first-of-type):has(a){
  background-color: var(--blue5);
}

div#classTable>div.classTableColumn>div:not(:first-of-type)>a{
  display: -webkit-box;

  width: calc(100% - 1rem * 2);
  height: fit-content;
  max-height: 5rem;

  margin: auto 0;
  padding: 0 1rem;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;

  line-height: 2.5rem;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0;
  
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

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

div#classIntensiveView{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;

  width: calc(100% - 2rem * 2);
  height: calc(100% - 1rem * 2);

  margin: 0;
  padding: 1rem 2rem;

  border: none;
  border-radius: 2.5rem;

  background-color: var(--base1);
}

div#classIntensiveView>h3{
  display: block;

  width: fit-content;
  height: auto;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.75rem;

  line-height: 3rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;
}

div#classIntensiveView>div#classIntensiveTable{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;

  width: calc(100% - 1rem * 2);
  height: fit-content;

  margin: 0;

  border: none;
  border-radius: 1rem;

  overflow: hidden;
}

div#classIntensiveView>div#classIntensiveTable>div{
  display: block;

  width: calc(100% - 1rem * 2);
  height: fit-content;

  margin: 0;
  padding: 1rem 2rem;

  background-color: var(--base2);
}

div#classIntensiveView>div#classIntensiveTable>div>p{
  display: block;

  width: fit-content;
  height: fit-content;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;

  line-height: 3rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;
}

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

div#checkBtnContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;

  width: calc(100% - 2rem * 2);
  height: calc(100% - 1rem * 2);

  margin: 0;
  padding: 1rem 2rem;

  border: none;
  border-radius: 2.5rem;

  background-color: var(--base1);
}

div#checkBtnContainer>h3{
  display: block;

  width: fit-content;
  height: auto;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.75rem;

  line-height: 4rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;
}

div#checkBtnContainer>button{
  display: block;

  width: fit-content;
  height: auto;

  margin: 0;
  padding: 0.5rem 2rem;

  border: none;
  border-radius: 2.5rem;

  background-color: var(--blue2);

  color: var(--base1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 2rem;

  line-height: 3rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;

  cursor: pointer;
}
div#checkBtnContainer>button:hover{
  filter: brightness(1.2);
}
div#checkBtnContainer>button:active{
  background-color: var(--blue1);
}

div#checkBtnContainer>button>i{
  display: inline-block;

  width: fit-content;
  height: auto;

  margin: 0 0 0 1rem;
  padding: 0;

  color: var(--base1);
  font-size: 1.5rem;

  line-height: 3rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;
}

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

div#cookieConfirm{
  position: fixed;
  left: 30%;
  bottom: 0;
  display: block;
  
  width: calc(40% - 3rem * 2);
  height: auto;

  margin: 0;
  padding: 3rem;

  border: none;
  border-radius: 2rem 2rem 0 0;

  background-color: var(--base2);

  transition: all 0.2s;

  transform: translateY(100%);
}
div#cookieConfirm.active{
  transform: translateY(0);
}

div#cookieConfirm>h3{
  display: block;

  width: fit-content;
  height: auto;

  margin: 0;
  padding: 0;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 2rem;

  line-height: 4rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;
}

div#cookieConfirm>p{
  display: block;

  width: 100%;
  height: auto;

  margin: 1rem 0;
  padding: 0;

  color: var(--text1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;

  line-height: 3rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;
}

div#cookieConfirm>div{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;

  width: 100%;
  height: auto;

  margin: 2rem 0 0 0;
  padding: 0;
}

div#cookieConfirm>div>button{
  display: block;

  width: fit-content;
  height: auto;

  margin: 0;
  padding: 0.5rem 2rem;

  border: none;
  border-radius: 0;

  background-color: var(--blue2);

  color: var(--base1);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;

  line-height: 3rem;
  text-align: justify;
  text-decoration: none;
  letter-spacing: 0;

  cursor: pointer;
}
div#cookieConfirm>div>button:hover{
  filter: brightness(1.2);
}
div#cookieConfirm>div>button:active{
  background-color: var(--blue1);
}

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

footer{
  display: block;

  width: 100%;
  height: 3rem;

  margin: 0 auto;
  padding: 1rem 0;

  color: var(--text2);
  font-family: "Jost", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;

  line-height: 3rem;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0;
}