:root {
  --breakPoint-tablet-ls: 1024px;
  --breakPoint-tablet: 768px;
  --breakPoint-sp-l: 480px;
  --breakPoint-sp: 375px;
  --breakPoint-minWidth: 320px;
}

:root {
  --clr-base-sage: #bbb791;
  --clr-base-sage-rgb: 187, 183, 145;
  --clr-base-green: #2e6f40;
  --clr-base-green-rgb: 46, 111, 64;
  --clr-base-ebony: #5d6658;
  --clr-base-ebony-rgb: 93, 102, 88;
  --clr-base-yellow: #ffbf00;
  --clr-base-yellow-rgb: 255, 191, 0;
  --clr-base-tan: #d6b588;
  --clr-base-tan-rgb: 214, 181, 136;
  --clr-base-bronze: #c68346;
  --clr-base-bronze-rgb: 198, 131, 70;
  --clr-base-sunset: #fd5e53;
  --clr-base-sunset-rgb: 253, 94, 83;
  --clr-base-orange: #e84b3d;
  --clr-base-orange-rgb: 232, 75, 61;
  --clr-base-rosegold: #dea193;
  --clr-base-rosegold-rgb: 222, 161, 147;
  --clr-base-pink: #ff91a4;
  --clr-base-pink-rgb: 255, 145, 164;
  --clr-base-mahogany: #c04000;
  --clr-base-mahogany-rgb: 192, 64, 0;
  --clr-base-red: #ed2100;
  --clr-base-red-rgb: 237, 33, 0;
  --clr-base-wine: #722f37;
  --clr-base-wine-rgb: 114, 47, 55;
  --clr-base-burgundy: #660033;
  --clr-base-burgundy-rgb: 102, 0, 51;
  --clr-base-slateblue: #557c99;
  --clr-base-slateblue-rgb: 85, 124, 153;
  --clr-base-blue: #4166f5;
  --clr-base-blue-rgb: 65, 102, 245;
  --clr-base-navy: #272757;
  --clr-base-navy-rgb: 39, 39, 87;
  --clr-base-lilac: #a47dab;
  --clr-base-lilac-rgb: 164, 125, 171;
  --clr-base-purple: #9966cc;
  --clr-base-purple-rgb: 153, 102, 204;
  --clr-base-white: #fff;
  --clr-base-white-rgb: 255, 255, 255;
  --clr-base-offwhite: #f2f0ef;
  --clr-base-offwhite-rgb: 242, 240, 239;
  --clr-base-gray: #898989;
  --clr-base-gray-rgb: 137, 137, 137;
  --clr-base-slate: #6d8196;
  --clr-base-slate-rgb: 109, 129, 150;
  --clr-base-gunmetal: #353e43;
  --clr-base-gunmetal-rgb: 53, 62, 67;
  --clr-base-black: #252525;
  --clr-base-black-rgb: 37, 37, 37;
  --clr-light-lightgreen: #88e788;
  --clr-light-lightgreen-rgb: 136, 231, 136;
  --clr-light-lightseagreen: #20b2aa;
  --clr-light-lightseagreen-rgb: 32, 178, 170;
  --clr-light-lightyellow: #ffffc5;
  --clr-light-lightyellow-rgb: 255, 255, 197;
  --clr-light-lightorange: #ffdbbb;
  --clr-light-lightorange-rgb: 255, 219, 187;
  --clr-light-lightpink: #ffb5c0;
  --clr-light-lightpink-rgb: 255, 181, 192;
  --clr-light-lightblue: #90d5ff;
  --clr-light-lightblue-rgb: 144, 213, 255;
  --clr-light-lightpurple: #dab1da;
  --clr-light-lightpurple-rgb: 218, 177, 218;
  --clr-light-lightgray: #d3d3d3;
  --clr-light-lightgray-rgb: 211, 211, 211;
  --clr-pastel-pastelgreen: #80ef80;
  --clr-pastel-pastelgreen-rgb: 128, 239, 128;
  --clr-pastel-pastelyellow: #ffee8c;
  --clr-pastel-pastelyellow-rgb: 255, 238, 140;
  --clr-pastel-pastelorange: #ffc067;
  --clr-pastel-pastelorange-rgb: 255, 192, 103;
  --clr-pastel-pastelpink: #ffc5d3;
  --clr-pastel-pastelpink-rgb: 255, 197, 211;
  --clr-pastel-pastelred: #ff746c;
  --clr-pastel-pastelred-rgb: 255, 116, 108;
  --clr-pastel-pastelblue: #b3ebf2;
  --clr-pastel-pastelblue-rgb: 179, 235, 242;
  --clr-pastel-pastelpurple: #b39eb5;
  --clr-pastel-pastelpurple-rgb: 179, 158, 181;
  --clr-kssc-main: #3fe2ce;
  --clr-kssc-main-rgb: 63, 226, 206;
  --clr-kssc-mainDarken: #39cbb9;
  --clr-kssc-mainDarken-rgb: 57, 203, 185;
}

.section-column {
  grid-template-areas: "introduce introduce" "outline outline" "join join" "info info";
}

#introduce {
  grid-area: introduce;
}
#introduce .section-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(33%, 180px);
  align-items: flex-start;
  gap: 16px;
}
@container section-container (max-width: 768px) {
  #introduce .section-content {
    grid-template-columns: minmax(0, 1fr);
  }
}

#outline {
  grid-area: outline;
}

#lessonDate {
  grid-area: lessonDate;
}

#info {
  grid-area: info;
}
#info .section-content {
  width: 100%;
}
#info .section-content:has(.content-none) {
  width: var(--element-width);
}
#info .archive-list {
  width: var(--element-width);
}

#join {
  grid-area: join;
}

.school-section {
  position: relative;
  width: 100%;
  max-width: var(--about-element-maxWidth);
  border-radius: var(--border-radius-value);
  box-shadow: var(--box-shadow-value);
  background: #fff;
  margin-right: auto;
  margin-left: auto;
}
.school-image-slider {
  border-radius: var(--border-radius-value);
}
.school-image-picture {
  display: block;
  aspect-ratio: 3/2;
  width: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.school-image-picture-01 {
  background-image: url("../assets/img/school/school.jpg");
}
.school-image-picture-02 {
  background-image: url("../assets/img/school/school02.jpg");
}
.school-image-picture-03 {
  background-image: url("../assets/img/school/school03.jpg");
}

:root {
  --lesson-class-table-minWidth: 600px;
}

.lesson-class-table {
  position: relative;
  width: 100%;
  min-width: var(--lesson-class-table-minWidth);
  border: 1px solid #898989;
  border-radius: var(--border-radius-value-s);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.lesson-class-table-overflow-wrap {
  position: relative;
  width: 100%;
  overflow-x: scroll;
}
.lesson-class-table-overflow-text {
  display: none;
  align-items: center;
  -moz-column-gap: 2px;
       column-gap: 2px;
  line-height: 1.3;
  color: #898989;
  font-size: 12px;
  margin-top: 4px;
}
.lesson-class-table-overflow-text.is-show {
  display: inline-flex;
}
.lesson-class-header {
  position: relative;
  background: #898989;
  color: #fff;
}
.lesson-class-header-item {
  position: relative;
  line-height: 1.3;
  font-weight: 400;
  font-size: 13px;
  padding: 8px;
}
@container section-container (max-width: 375px) {
  .lesson-class-header-item {
    font-size: 12px;
  }
}
.lesson-class-ess {
  background: rgba(144, 213, 255, 0.32);
}
.lesson-class-elder {
  background: rgba(255, 255, 197, 0.32);
}
.lesson-class-beginner {
  background: rgba(136, 231, 136, 0.32);
}
.lesson-class-row {
  position: relative;
}
.lesson-class-row.lesson-class-row-top:not(.lesson-class-row-first) .lesson-class-item {
  border-top: 1px solid #898989;
}
.lesson-class-row.lesson-class-row-bottom .lesson-class-item {
  border-bottom: none;
}
.lesson-class-item {
  position: relative;
  line-height: 1.4;
  font-weight: 400;
  padding: 8px;
}
.lesson-class-item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  content: "";
  width: 1px;
  background: rgba(211, 211, 211, 0.6);
}
.lesson-class-item.lesson-class-lastitem .lesson-class-number {
  border-bottom: none;
}
.lesson-class-name {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
}
@container section-container (max-width: 375px) {
  .lesson-class-name {
    font-size: 15px;
  }
}
.lesson-class-name::before {
  content: none;
}
.lesson-class-name .classname-head {
  line-height: 1.3;
}
.lesson-class-name .classname-head:not(:last-of-type) {
  margin-bottom: 0.4em;
}
.lesson-class-target {
  text-align: center;
  font-size: 0.9em;
}
.lesson-class-number {
  text-align: center;
  border-bottom: 1px solid rgba(211, 211, 211, 0.6);
}
.lesson-class-lessontime {
  text-align: center;
}
.lesson-class-week {
  text-align: center;
  border-bottom: 1px solid rgba(211, 211, 211, 0.6);
}
.lesson-class-time {
  text-align: center;
}
.lesson-class-price {
  text-align: center;
  border-bottom: 1px solid rgba(211, 211, 211, 0.6);
}
.lesson-class-subtext {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: #898989;
  margin-top: 0.2em;
}
@container section-container (max-width: 375px) {
  .lesson-class-subtext {
    font-size: 12px;
  }
}
.lesson-outline-column .lesson-outline-item:not(:last-of-type) {
  margin-bottom: 16px;
}
.lesson-outline-item-head {
  line-height: 1.3;
  font-weight: 500;
  font-size: 18px;
}
@container section-container (max-width: 375px) {
  .lesson-outline-item-head {
    font-size: 16px;
  }
}
.lesson-outline-item-content {
  line-height: 1.4;
  margin-top: 8px;
}
.lesson-outline-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 16px;
}
@container section-container (max-width: 768px) {
  .lesson-outline-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.lesson-outline-field .lesson-outline-item-content {
  container-type: inline-size;
  container-name: lesson-outline-field-container;
}
.lesson-outline-field-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@container lesson-outline-field-container (max-width: 480px) {
  .lesson-outline-field-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.lesson-outline-field-name {
  line-height: 1.4;
  font-size: 16px;
}
.lesson-outline-field-map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.lesson-outline-field-map-wrap {
  aspect-ratio: 16/9;
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: var(--border-radius-value-s);
  margin-top: 8px;
  margin-right: auto;
  overflow: hidden;
}
@container section-container (max-width: 375px) {
  .lesson-outline-field-map-wrap {
    margin-top: 8px;
  }
}
.lesson-outline-field-address {
  line-height: 1.3;
  color: #898989;
  font-style: italic;
  font-size: 14px;
  margin-top: 0.3em;
}
@container section-container (max-width: 375px) {
  .lesson-outline-field-address {
    font-size: 13px;
  }
}
.lesson-outline-prepare-item:not(:last-of-type) {
  margin-bottom: 0.3em;
}

.introduce-description-text > p {
  line-height: 1.6;
}
.introduce-description-text > p:not(:last-of-type) {
  margin-bottom: 0.5em;
}
.introduce-description-image {
  aspect-ratio: 3/2;
  width: 100%;
  max-width: 400px;
  border-radius: var(--border-radius-value);
  background: #d3d3d3;
}

.join-button {
  margin-top: 8px;
}

.ground-detail {
  --ground-detail-base-fontSize: var(--base-fontSize);
}/*# sourceMappingURL=school.css.map */