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

:root {
  --about-element-maxWidth: 1024px;
}

.section-column {
  grid-template-areas: "project project" "vision goal" "contribution contribution" "hometown hometown" "outline outline";
}
@container main-container (max-width: 768px) {
  .section-column {
    grid-template-areas: "project" "vision" "goal" "contribution" "hometown" "outline";
  }
}

.about-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;
}
.about-project {
  grid-area: project;
}
.about-vision {
  grid-area: vision;
}
.about-contribution {
  grid-area: contribution;
}
.about-hometown {
  grid-area: hometown;
}
.about-outline {
  grid-area: outline;
}
.about-description-head {
  display: inline-block;
  line-height: 1.4;
  font-weight: 400;
  font-size: 24px;
}
@container section-container (max-width: 768px) {
  .about-description-head {
    font-size: 22px;
  }
}
@container section-container (max-width: 480px) {
  .about-description-head {
    font-size: 20px;
  }
}
@container section-container (max-width: 375px) {
  .about-description-head {
    font-size: 18px;
  }
}
.about-description-list {
  font-size: var(--base-fontSize);
  margin-top: 8px;
}
.about-description-item {
  line-height: 1.5;
  font-weight: 400;
  font-size: inherit;
  color: #252525;
}
.about-description-item:not(:last-of-type) {
  margin-bottom: 0.5em;
}

.hometown-item {
  position: relative;
  display: grid;
  grid-template-areas: "head head" "txt img";
  grid-template-columns: 1fr auto;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
@container section-container (max-width: 768px) {
  .hometown-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "img" "txt";
  }
}
.hometown-item:not(:last-of-type) {
  margin-bottom: 32px;
}
.hometown-item-text {
  grid-area: txt;
  margin-top: 12px;
}
@container section-container (max-width: 768px) {
  .hometown-item-text {
    margin-top: 16px;
  }
}
.hometown-item-image {
  grid-area: img;
}
@container section-container (max-width: 768px) {
  .hometown-item-image {
    margin-top: 8px;
  }
}
.hometown-item-image-picture {
  aspect-ratio: 3/2;
  display: block;
  width: 280px;
  border-radius: var(--border-radius-value);
  background: #d3d3d3;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hometown-item-head {
  grid-area: head;
  display: flex;
  align-items: center;
  -moz-column-gap: 12px;
       column-gap: 12px;
  line-height: 1.4;
}
.hometown-item-head-town {
  line-height: inherit;
}
.hometown-item-head-pref {
  display: inline-block;
  line-height: inherit;
  color: #898989;
  font-weight: 400;
  font-size: 15px;
}
@container section-container (max-width: 768px) {
  .hometown-item-head-pref {
    font-size: 14px;
  }
}
@container section-container (max-width: 480px) {
  .hometown-item-head-pref {
    font-size: 13px;
  }
}
@container section-container (max-width: 375px) {
  .hometown-item-head-pref {
    font-size: 12px;
  }
}
.hometown-item-features {
  line-height: 1.3;
  font-weight: 500;
  font-size: 18px;
}
@container section-container (max-width: 768px) {
  .hometown-item-features {
    font-size: 17px;
  }
}
@container section-container (max-width: 480px) {
  .hometown-item-features {
    font-size: 16px;
  }
}
@container section-container (max-width: 375px) {
  .hometown-item-features {
    font-size: 15px;
  }
}
.hometown-source {
  margin-top: 16px;
}
.hometown-minabe .hometown-item-image-picture {
  background-image: url("../assets/img/hometown/minabe.jpg");
}
.hometown-tanabe .hometown-item-image-picture {
  background-image: url("../assets/img/hometown/tanabe.jpg");
}
.hometown-shirahama .hometown-item-image-picture {
  background-image: url("../assets/img/hometown/shirahama.jpg");
}

.contribution-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@container section-container (max-width: 768px) {
  .contribution-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.outline-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 16px;
       column-gap: 16px;
}
@container section-container (max-width: 768px) {
  .outline-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.outline-list-column {
  container-type: inline-size;
  container-name: outline-column-container;
}
@container section-container (min-width: 769px) {
  .outline-list-column .outline-item:not(:last-of-type)::after {
    content: "";
  }
}
@container section-container (max-width: 768px) {
  .outline-list-column:not(:last-of-type) .outline-item::after {
    content: "";
  }
}
.outline-item {
  position: relative;
  display: grid;
  align-items: flex-start;
  grid-template-columns: minmax(20%, 92px) minmax(0, 1fr);
  -moz-column-gap: 16px;
       column-gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
@container outline-column-container (max-width: 600px) {
  .outline-item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
  }
}
.outline-item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #d3d3d3;
}
.outline-item-head {
  line-height: 1.4;
  font-weight: 500;
  font-size: 15px;
  color: #898989;
}
@container section-container (max-width: 768px) {
  .outline-item-head {
    font-size: 14px;
  }
}
@container section-container (max-width: 375px) {
  .outline-item-head {
    font-size: 13px;
  }
}
.outline-item-content {
  --outline-content-base-fontSize: 16px;
  line-height: 1.4;
  font-weight: 400;
  font-size: var(--outline-content-base-fontSize);
  color: #252525;
}
@container section-container (max-width: 768px) {
  .outline-item-content {
    --outline-content-base-fontSize: 15px;
  }
}
@container section-container (max-width: 375px) {
  .outline-item-content {
    --outline-content-base-fontSize: 14px;
  }
}
.outline-item-content .ground-detail {
  --ground-detail-base-fontSize: var(--outline-content-base-fontSize);
}
.outline-item-subtext {
  display: block;
  line-height: 1.3;
  font-size: calc(var(--outline-content-base-fontSize) - 2px);
  margin-top: 0.2em;
}
.outline-item-subtext.italic {
  font-style: italic;
}
.outline-item-subtext.bold {
  font-weight: 500;
}
.outline-item-subtext.thin {
  font-weight: 300;
}
.outline-item-subtext.gray {
  color: #898989;
}
.outline-name .outline-item-content {
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.outline-name-jp {
  display: block;
}
.outline-name-logo {
  display: inline-block;
  margin-left: auto;
}
.outline-name-logo::after {
  content: "";
  aspect-ratio: 467/581;
  display: block;
  width: 44px;
  background-image: url("../assets/img/logo/kssc.png");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.outline-teamcolor-head {
  display: flex;
  align-items: center;
  -moz-column-gap: 4px;
       column-gap: 4px;
}
.outline-teamcolor-image {
  align-self: center;
  display: inline-block;
  aspect-ratio: 1/1;
  width: 16px;
  border-radius: var(--border-radius-value-xs);
}
.outline-teamcolor-image-wrap {
  display: flex;
  align-items: center;
  -moz-column-gap: 2px;
       column-gap: 2px;
}
.outline-teamcolor-image--first {
  background: #3fe2ce;
}
.outline-teamcolor-image--second {
  background: #3fe2ce;
}
.outline-hometown-item {
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.outline-hometown-item:not(:last-of-type) {
  margin-bottom: 8px;
}
.outline-hometown-minabe .outline-hometown-link::after {
  background-image: url("../assets/img/logo/minabe-town.png");
}
.outline-hometown-tanabe .outline-hometown-link::after {
  background-image: url("../assets/img/logo/tanabe-city.png");
}
.outline-hometown-shirahama .outline-hometown-link::after {
  background-image: url("../assets/img/logo/shirahama-town.png");
}
.outline-hometown-shirahama .outline-hometown-subhead {
  margin-top: 0;
}
.outline-hometown-link {
  display: inline-block;
  margin-left: auto;
}
.outline-hometown-link::after {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 36px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.project-description {
  line-height: 1.5;
  font-weight: 400;
  margin-top: 1em;
}
.project-description > p {
  line-height: inherit;
}
.project-description > p:not(:last-of-type) {
  margin-bottom: 0.5em;
}

.slogan {
  line-height: 1.4;
  font-weight: 500;
  font-size: 24px;
}
@container section-container (max-width: 768px) {
  .slogan {
    font-size: 22px;
  }
}
@container section-container (max-width: 480px) {
  .slogan {
    font-size: 20px;
  }
}
@container section-container (max-width: 375px) {
  .slogan {
    font-size: 18px;
  }
}

.goal-description {
  line-height: 1.5;
}
.goal-description > p {
  line-height: inherit;
}
.goal-description > p:not(:last-of-type) {
  margin-bottom: 0.5em;
}
.goal-hierarchie-image {
  aspect-ratio: 768/432;
  display: block;
  width: 100%;
  max-width: 600px;
  background-image: url("../assets/img/jp-soccer-hierarchie.jpg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-top: 16px;
  margin-right: auto;
}/*# sourceMappingURL=about.css.map */