/* z-index: {modal: 110, side-menu: 100, modal-backdrop: 50, header-nav: 10} */
/* namingRule: {id:"camelCase", class:"snake_case", tagName: "kebab-case"} */
:root {
  --var-primary-color: rgb(130, 229, 150);
  --var-secondary-color: rgb(59, 130, 246);
  --var-tertiary-color: rgb(107, 114, 128);
  --var-point-color: rgb(246, 175, 59);
  --var-shadow-color: rgba(0, 0, 0, 0.5);
  --var-basic-font: rgb(255, 255, 255);
}
#modal {
  display: none;
  width: 50vw;
  height: 50vh;
}
#sideMenu {
  position: fixed;
  top: 0;
  right: -20rem;
  width: 20rem;
  height: 100vh;
  z-index: 100;
  transition: ease-out 300ms;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.5rem;
  background-color: white;
}
#sideMenu > .menu_header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
#menuToggle:checked ~ #sideMenu {
  right: 0;
  transition: ease-in 200ms;
}
#modalBackdrop {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  display: none;
}
#root {
  background-color: transparent;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main div,
main section {
  background-color: white;
}
#root > header {
  height: fit-content;
  display: flex;
  text-shadow: -0.1rem 0 0.1rem black, 0 0.1rem 0.1rem black, 0.1rem 0 0.1rem black, 0 -0.1rem 0.1rem black;
  color: white;
}
#root header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
  padding: 0 1rem;
  top: 0;
  background-color: transparent;
  z-index: 10;
}
#root .sns {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.sns a:any-link,
.sns a:visited {
  color: white;
}
#logo {
  font-size: 2rem;
  font-family: "Caveat Brush", cursive;
}
#carousel {
  display: flex;
  width: 300vw;
  transition: all 1s;
}
#carousel .item {
  display: flex;
  float: left;
  width: 100vw;
}
#carousel img {
  width: 100%;
  height: 100vh;
  z-index: 1;
}
#carousel ~ .carousel_controller {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 2;
}
#carousel ~ .prev,
#carousel ~ .next {
  width: 5rem;
  height: 100%;
  padding: 1rem;
}
#carousel ~ .prev > span:hover,
#carousel ~ .next > span:hover {
  cursor: pointer;
}
#carousel ~ .prev {
  left: 0;
  justify-content: start;
}
#carousel ~ .next {
  justify-content: end;
  right: 0;
}
#carousel ~ .indicators {
  width: 100%;
  height: 3rem;
  bottom: 0;
  gap: 0.3rem;
}
#carousel ~ .indicators label {
  width: 1rem;
  height: 0.5rem;
  border-radius: 5rem;
  background-color: rgba(255, 255, 255, 0.7);
}
#carousel ~ .indicators input:checked + label {
  width: 2rem;
  border: 2px solid white;
  background-color: white;
}
#root > main {
  background-color: transparent;
  min-height: 101vh;
  z-index: 1;
}
#ourPurpose {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 2rem;
  padding: 1rem;
  box-sizing: border-box;
  border: 0.1em solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
}
#counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
#counters .item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  color: white;
  font-size: 1.5rem;
}
#counters .count_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem;
}
#counters .count_animation {
  font-size: 2.5rem;
}
.fluid_img img {
  width: 100%;
}
.opacity_7 {
  opacity: 0.7;
}
#root main section.contents_block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
#root main section.contents_block header {
  grid-column: 1 / span 4;
  font-size: 2rem;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
#root main section.contents_block .title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  text-align: center;
  text-wrap: balance;
}
#root main section.contents_block .discription {
  font-size: 1rem;
  display: flex;
  justify-content: center;
  text-align: center;
  text-wrap: balance;
}
#fourPillars .item {
  display: flex;
}
#fourPillars img {
  width: 100%;
}
#contactUs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#contactUs .item {
  margin: 2rem;
  width: 20rem;
}
.card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 0 0 1rem var(--var-shadow-color);
}
.card * {
  background-color: transparent;
}
.card header,
.card img {
  width: 100%;
  padding: 0;
  aspect-ratio: 3/2;
}
.card footer {
  padding: 1rem;
  color: var(--var-point-color);
}
.card .discription {
  color: var(--var-tertiary-color);
}
.card button {
  width: 100%;
  border-color: var(--var-point-color);
  background-color: var(--var-point-color);
}
.card button:hover {
  color: var(--var-point-color);
  background-color: transparent;
}
.background_layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100vw;
}
.background_layer img {
  position: absolute;
  right: 0;
  min-height: 101vh;
  width: 100%;
}
#noticeWrap {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap-reverse;
  gap: 3rem;
  padding-top: 1rem;
  padding-bottom: 3rem;
}
#notice {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
table {
  border-collapse: collapse;
  font-size: 0.9em;
  width: 40rem;
  max-width: 80vw;
  height: 15vw;
}
table thead tr {
  background-color: var(--var-secondary-color);
  color: var(--var-basic-font);
  text-align: left;
}
table tbody tr {
  border-bottom: 1px solid #dddddd;
}
table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}
table tbody tr:last-of-type {
  border-bottom: 2px solid var(--var-secondary-color);
}
table tbody tr:hover {
  font-weight: bold;
  color: var(--var-secondary-color);
  cursor: pointer;
}
#notice header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#notice td,
#notice th {
  padding: 0.3rem 0.5rem;
  text-align: left;
}
#notice td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 1;
  color: white;
  background-color: rgb(0, 0, 25);
  padding: 1rem 0;
  gap: 1rem;
  position: relative;
}
footer > .site_map {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 1rem;
  display: flex;
}
footer > .site_map > details {
  flex: 1;
}
footer > .site_map summary {
  user-select: none;
}
footer > .site_map summary:hover {
  cursor: pointer;
}
footer > .site_map summary ~ .items {
  margin: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer > .site_map .item {
  width: 15rem;
  padding: 1rem;
}
footer > .info {
  width: 100%;
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
}
footer > .info > address {
  border-left: 1px solid gray;
  padding-left: 1rem;
  font-size: 0.8rem;
  word-break: keep-all;
}
footer > .copyright {
  color: gray;
  margin: 0 1rem;
}
footer > .qr_code {
  position: absolute;
  background-color: white;
  right: 0;
  bottom: 0;
  padding: 0.1rem;
  margin: 1rem;
  width: 5em;
  height: 5em;
}
.qr_code img {
  width: 100%;
}
.transparent {
  background-color: transparent;
}
.relative_flex_end {
  position: relative;
  width: 100%;
  min-height: 60vh;
  height: fit-content;
  display: flex;
  justify-content: end;
  align-items: center;
}
#root main .over_contents {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding-left: 3rem;
  padding-right: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  word-break: keep-all;
}
#root main .over_contents .header {
  border-bottom: 0.2rem solid white;
  padding-bottom: 0.7rem;
  width: fit-content;
}
button {
  border: 0.2rem solid white;
  color: white;
  font-size: 1rem;
  background-color: transparent;
  padding: 1rem;
  width: fit-content;
}
button:hover {
  cursor: pointer;
  border-color: var(--var-point-color);
  color: var(--var-point-color);
}
.font_bold {
  font-weight: bold;
}
.point_color,
.point_color * {
  background-color: var(--var-point-color);
  color: var(--var-basic-font);
}
.primary_color,
.primary_color * {
  background-color: var(--var-primary-color);
  color: var(--var-basic-font);
}
.secondary_color,
.secondary_color * {
  background-color: var(--var-secondary-color);
  color: var(--var-basic-font);
}