: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;
}

.home-section {
  container-type: inline-size;
  container-name: home-section-container;
}
.home-section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: "about recruit" "info info" "school school" "collabo collabo";
  gap: 16px;
  width: 100%;
  max-width: var(--element-maxWidth);
  margin-right: auto;
  margin-left: auto;
}
@container main-container (max-width: 768px) {
  .home-section-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "about" "recruit" "info" "school" "collabo";
  }
}

#homeAbout {
  grid-area: about;
}

#homeRecruit {
  grid-area: recruit;
}

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

#homeSchool {
  grid-area: school;
}
#homeSchool .school-info {
  margin-top: 16px;
}
#homeSchool .school-info:has(.content-none) {
  display: none;
}
#homeSchool .info-archive-item {
  background: #f2f0ef;
}

#homeCollabo {
  grid-area: collabo;
}

.fv {
  aspect-ratio: 16/10;
  width: 100%;
  max-height: 480px;
  background: #d3d3d3;
  margin-bottom: 32px;
}
.fv-content {
  position: relative;
  width: 100%;
  max-width: var(--element-maxWidth);
  height: 100%;
  background: #3fe2ce;
  margin-right: auto;
  margin-left: auto;
}

.section-inner {
  position: relative;
  width: 100%;
  max-width: var(--element-maxWidth);
  border-radius: var(--border-radius-value);
  box-shadow: var(--box-shadow-value);
  background: #fff;
  margin-right: auto;
  margin-left: auto;
}
.school-image-picture {
  background-image: url("../assets/img/school/school.jpg");
}

.collaboration-image-picture {
  background-image: url("../assets/img/collaboration/wanokuninoen-umesyrup.jpg");
}
.collaboration-product {
  margin-top: 16px;
}
.collaboration-product-title {
  line-height: 1.4;
  font-weight: 500;
  font-size: 18px;
}
@container home-section-container (max-width: 375px) {
  .collaboration-product-title {
    font-size: 16px;
  }
}
.collaboration-product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.collaboration-product-remarks-list {
  font-size: 13px;
  margin-top: 8px;
}
.collaboration-product-remarks-item:not(:last-of-type) {
  margin-bottom: 2px;
}/*# sourceMappingURL=home.css.map */