h1 {
  display: none;
}
@media screen and (max-width: 768px) {
  h1 {
    display: block;
    font-family: var(--poppins);
    font-size: var(--large);
    font-weight: var(--bold);
    line-height: 1;
    padding: 10px 30px;
    display: flex;
    align-items: end;
    gap: 10px;
  }
  h1 small {
    font-size: 10px;
    font-weight: 400;
  }
}

main {
  background-color: var(--sub-color);
  background-image: url(../images/grid_1.png);
  background-size: 20px 20px;
  background-repeat: repeat;
}

#kv {
  padding: 10px 40px 150px 40px;
}
@media screen and (max-width: 768px) {
  #kv {
    padding: 15px 0 135px 20px;
  }
}
#kv #color_1 {
  width: 197px;
  margin: 0 0 15px 0;
}
#kv picture img {
  margin: 0 0 10px 0;
}
#kv #color_2 {
  display: flex;
  justify-content: flex-end;
  padding: 0 15px 0 0;
}
#kv #color_2 div {
  width: 197px;
  margin: 0 0 15px 0;
}

#contents {
  padding: 0 0 40px 0;
  background-color: var(--sub-color);
}

#event_report_1 {
  width: min(900px, 100%);
  padding: 30px;
  margin: 0 auto;
  background-image: url(../images/parentheses_1.png), url(../images/parentheses_2.png);
  background-size: 219px 84px, 219px 84px;
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
  transform: translate(0, -120px);
}
#event_report_1 div {
  padding: 50px 100px;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  #event_report_1 div {
    padding: 40px 10px 30px 10px;
  }
}
#event_report_1 div h2 {
  font-family: var(--poppins);
  font-size: var(--xx-large);
  font-weight: var(--bold);
  color: var(--theme-color);
  text-align: center;
  margin: 0 0 40px 0;
}
@media screen and (max-width: 768px) {
  #event_report_1 div h2 {
    font-size: var(--x-large);
    margin: 0 0 20px 0;
  }
}
#event_report_1 div h3 {
  font-size: var(--large);
  font-weight: var(--bold);
  color: var(--theme-color);
  text-align: center;
  margin: 0 0 20px 0;
}
@media screen and (max-width: 768px) {
  #event_report_1 div h3 {
    font-size: var(--medium);
  }
}
#event_report_1 div p {
  line-height: 1.8;
}

#summary {
  width: min(900px, 100%);
  padding: 0 30px;
  margin: auto;
  transform: translate(0, -80px);
}
#summary figure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 75px;
  padding: 20px 75px 20px 20px;
  background-color: #d9d9d9;
}
@media screen and (max-width: 768px) {
  #summary figure {
    padding: 20px 20px 60px 20px;
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
#summary figure figcaption p {
  font-size: var(--medium);
  color: var(--off-color);
  padding: 4px;
  margin: 0 0 30px 0;
  display: inline-block;
  background-color: #000;
}
#summary figure figcaption div {
  display: grid;
  gap: 20px;
}
#summary figure figcaption div dl {
  display: grid;
  grid-template-columns: 1fr 5fr;
  border-bottom: 1px solid #000;
}
#summary figure figcaption div dl dt {
  font-family: var(--poppins);
}

#topics {
  color: var(--off-color);
  padding: 100px 0 120px 0;
  margin: -20px 0 0 0;
  border-top-left-radius: 30px;
  background-color: var(--theme-color);
  background-image: url(../images/grid_2.png);
  background-size: 20px 20px;
  background-repeat: repeat;
}
@media screen and (max-width: 768px) {
  #topics {
    padding: 60px 0 120px 0;
  }
}
#topics h2 {
  font-size: var(--x-large);
  font-weight: var(--bold);
  text-align: center;
  padding: 0 30px;
  margin: 60px 0 40px 0;
}
@media screen and (max-width: 768px) {
  #topics h2 {
    font-size: var(--large);
    text-align: left;
    margin: 40px 0 60px 0;
  }
}
#topics p {
  width: min(700px, 100%);
  padding: 0 30px;
  margin: auto;
  line-height: 1.8;
}

#workshop {
  padding: 80px 0 220px 0;
  margin: -20px 0 0 0;
  border-top-left-radius: 30px;
  background: linear-gradient(180deg, #eae5d6, #eae9e7);
}
@media screen and (max-width: 768px) {
  #workshop {
    padding: 40px 0 140px 0;
  }
}
#workshop h2 {
  font-family: var(--poppins);
  font-size: var(--xx-large);
  font-weight: var(--bold);
  color: var(--theme-color);
  text-align: center;
  padding: 0 30px;
  margin: 0 0 90px 0;
}
@media screen and (max-width: 768px) {
  #workshop h2 {
    text-align: left;
    margin: 0 0 40px 0;
  }
}
#workshop h3 {
  font-size: var(--large);
  font-weight: var(--bold);
  color: var(--theme-color);
  text-align: center;
  padding: 0 30px;
  margin: 0 0 40px 0;
}
@media screen and (max-width: 768px) {
  #workshop h3 {
    text-align: left;
  }
}
#workshop p {
  width: min(700px, 100%);
  padding: 0 30px;
  margin: 0 auto 100px auto;
  color: var(--theme-color);
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  #workshop p {
    margin: 0 auto 160px auto;
  }
}
#workshop ul {
  width: min(1200px, 100%);
  padding: 0 30px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 20px;
       column-gap: 20px;
  row-gap: 40px;
}
@media screen and (max-width: 768px) {
  #workshop ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
#workshop ul figcaption {
  font-size: var(--medium);
  font-weight: var(--bold);
  text-align: center;
  padding: 10px 0 0 0;
}
@media screen and (max-width: 768px) {
  #workshop ul figcaption {
    text-align: left;
  }
}
#workshop ul.column_3 {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 768px) {
  #workshop ul.column_3 {
    grid-template-columns: repeat(1, 1fr);
  }
}

.guest {
  padding: 80px 0 140px 0;
  margin: -20px 0 0 0;
  border-top-left-radius: 30px;
  background-image: url(../images/grid_2.png);
  background-size: 20px 20px;
  background-repeat: repeat;
  position: relative;
}
@media screen and (max-width: 768px) {
  .guest {
    padding: 40px 0 180px 0;
  }
}
.guest h2 {
  font-family: var(--poppins);
  font-size: var(--xx-large);
  font-weight: var(--bold);
  color: var(--off-color);
  text-align: center;
  padding: 0 30px;
  margin: 0 0 50px 0;
}
@media screen and (max-width: 768px) {
  .guest h2 {
    text-align: left;
    margin: 0 0 60px 0;
  }
}
.guest .person {
  width: min(1050px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: 1.5fr 4fr;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .guest .person {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) {
  .guest .person figure {
    width: 270px;
    margin: auto;
  }
}
.guest .person figure img {
  border-radius: 10px;
}
.guest .person figure figcaption {
  font-size: var(--large);
  font-weight: var(--bold);
  color: var(--off-color);
  text-align: center;
  padding: 10px 0 0 0;
}
.guest .person figure figcaption small {
  font-size: 14px;
  font-weight: 400;
}
.guest .person p {
  font-size: var(--large);
  font-weight: var(--bold);
  color: var(--off-color);
  padding: 20px 45px;
  margin: 0 0 20px 0;
}
@media screen and (max-width: 768px) {
  .guest .person p {
    padding: 20px 30px;
  }
}
.guest .person p small {
  font-size: 14px;
  font-weight: 400;
}
.guest .person .bgcolor_1 {
  background-color: rgba(117, 104, 84, 0.5);
}
.guest .person .bgcolor_2 {
  background-color: #a97371;
}
.guest .person .bgcolor_3 {
  background-color: #5dc2d0;
}
.guest .person ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .guest .person ul {
    grid-template-columns: 1fr;
    padding: 0 30px;
  }
}
.guest #color_guest {
  width: min(1200px, 100%);
  padding: 0 30px;
  margin: auto;
  transform: translate(0, 90px);
}
@media screen and (max-width: 768px) {
  .guest #color_guest {
    transform: translate(0, 50px);
  }
}
.guest #color_guest img {
  width: 197px;
}
.guest #icon {
  width: 24px;
  height: 24px;
  position: absolute;
  right: 10%;
  bottom: 8px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .guest #icon {
    right: 30px;
  }
}

#thoughts {
  padding: 80px 0 0 0;
  margin: -20px 0 0 0;
  border-top-left-radius: 30px;
  background-color: var(--sub-color);
  background-image: url(../images/grid_1.png);
  background-size: 20px 20px;
  background-repeat: repeat;
  position: relative;
}
#thoughts article {
  padding: 0 0 80px 0;
  background-color: var(--sub-color);
}
#thoughts article #event_report_2 {
  width: min(900px, 100%);
  padding: 30px;
  margin: 0 auto;
  background-image: url(../images/parentheses_1.png), url(../images/parentheses_2.png);
  background-size: 219px 84px, 219px 84px;
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
  transform: translate(0, -40px);
}
#thoughts article #event_report_2 div {
  padding: 50px 100px;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  #thoughts article #event_report_2 div {
    padding: 40px 10px 30px 10px;
  }
}
#thoughts article #event_report_2 div h2 {
  font-size: var(--x-large);
  font-weight: var(--bold);
  color: var(--theme-color);
  text-align: center;
  margin: 0 0 20px 0;
}
@media screen and (max-width: 768px) {
  #thoughts article #event_report_2 div h2 {
    text-align: left;
  }
}
#thoughts article #event_report_2 div p {
  line-height: 1.8;
}

#promise {
  padding: 80px 0 0 0;
  margin: -20px 0 0 0;
  border-top-left-radius: 30px;
  background-color: var(--theme-color);
  background-image: url(../images/grid_2.png);
  background-size: 20px 20px;
  background-repeat: repeat;
  position: relative;
}
@media screen and (max-width: 768px) {
  #promise {
    padding: 80px 0 180px 0;
  }
}
#promise h2 {
  font-size: var(--x-large);
  font-weight: var(--bold);
  color: var(--off-color);
  text-align: center;
  line-height: 2;
  padding: 0 30px;
  margin: 0 0 80px 0;
}
@media screen and (max-width: 768px) {
  #promise h2 {
    text-align: left;
    margin: 0 0 30px 0;
  }
}
#promise ul {
  width: min(1185px, 100%);
  padding: 0 30px 180px 30px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 40px;
       column-gap: 40px;
  row-gap: 60px;
}
@media screen and (max-width: 768px) {
  #promise ul {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 25px;
    padding: 0 30px 25px 30px;
  }
}
#promise ul li {
  padding: 20px 0 40px 0;
  background-color: #cfcce0;
  background-size: 20px 40px;
  background-position: left top;
  background-repeat: no-repeat;
}
#promise ul li h3 {
  margin: 0 0 10px 0;
}
#promise ul li p {
  font-size: var(--medium);
  text-align: center;
  line-height: 1.8;
}
#promise ul li:nth-child(1) {
  background-image: url(../images/promise_01.png);
}
#promise ul li:nth-child(2) {
  background-image: url(../images/promise_02.png);
}
#promise ul li:nth-child(3) {
  background-image: url(../images/promise_03.png);
}
#promise ul li:nth-child(4) {
  background-image: url(../images/promise_04.png);
}
#promise ul li:nth-child(5) {
  background-image: url(../images/promise_05.png);
}
#promise ul li:nth-child(6) {
  background-image: url(../images/promise_06.png);
}

#color_3 {
  width: min(1185px, 100%);
  margin: auto;
  padding: 0 30px;
}
#color_3 img {
  width: 197px;
}

.br_break {
  display: none;
}
@media screen and (max-width: 768px) {
  .br_break {
    display: block;
  }
}

#return {
  background-color: var(--theme-color);
}/*# sourceMappingURL=archives.css.map */