@charset "UTF-8";
/* page-about.php から分離 */

  /* =====================
   CONCEPT SECTION
===================== */
.concept-all {
  background-image: url('../img/about/2026/about_all.png');
  background-size: 1320px auto;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 2014px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 80px 0;
}

.concept-inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1;
}

.concept-row { display: flex; width: 100%; }
.concept-row-1 { justify-content: flex-start; }
.concept-row-2 { justify-content: flex-end; }
.concept-row-3 { justify-content: flex-start; }

.concept-box { width: 450px; background: none; }

.concept-heading {
  display: inline-block;
  background: #fff;
  font-size: 35px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 14px;
  color: #646464;
  padding: 8px 8px 8px 16px;
  box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.18);
}
.concept-row-1 .concept-heading { width: max-content; white-space: nowrap; color: #fc5c9f; }
.concept-row-2 .concept-heading { width: 520px; color: #5bbdff; }
.concept-row-3 .concept-heading { width: 540px; color: #00bc6e; }

.concept-body {
  font-size: 20px;
  font-weight: 400;
  color: #040000;
  line-height: 2;
  background: none;
}

/* =====================
   HISTORY
===================== */
.history {
  background: #fff;
  padding: 70px 20px 60px;
}
.history-title {
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  color: #646464;
}
.history-title em { font-style: normal; }

.history-rule {
  display: flex;
  width: 1000px;
  max-width: 100%;
  height: 10px;
  margin: 0 auto 48px;
}
.history-rule span:nth-child(1) { flex: 1; background: #fff451; }
.history-rule span:nth-child(2) { flex: 1; background: #00bc6e; }

.timeline { max-width: 1000px; margin: 0 auto; }
.tl-row { display: flex; align-items: stretch; }
.tl-row:nth-child(odd) { background: #e5f8f0; }
.tl-row:nth-child(even) { background: #fffddc; }
.tl-year {
  flex: 0 0 110px;
  font-size: 25px;
  font-weight: 400;
  color: #646464;
  padding: 28px 30px;
  white-space: nowrap;
  display: flex;
  align-items: flex-start;
}
.tl-text {
  flex: 1;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.9;
  color: #646464;
  padding: 28px 30px 28px 0;
  display: flex;
  align-items: center;
}

/* =====================
   EVENT SECTIONS
===================== */
.events {
  background: #ffefe6;
  padding: 60px 20px 80px;
}
.events-inner { max-width: 1000px; margin: 0 auto; }
.event-block { margin-bottom: 56px; }

.event-header {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}
.event-label {
  display: inline-block;
  background: #00bc6e;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  padding: 9px 36px 9px 18px;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%);
  flex-shrink: 0;
}
.event-line {
  flex: 1;
  height: 1px;
  background: #00bc6e;
  margin-left: -18px;
}

.event-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 35px;
  color: #646464;
}

.overview-wrap { display: flex; align-items: flex-start; }
.overview-text { flex: 0 0 613px; width: 613px; }
.overview-logo { margin-left: auto; padding-right: 25px; flex-shrink: 0; }
.overview-logo img { display: block; width: 264px; }

.registered-wrap { display: flex; gap: 40px; align-items: flex-start; }
.registered-text { flex: 1; }
.registered-imgs { flex: 0 0 367px; }
.registered-imgs img { width: 367px; }


/* =====================
   RESPONSIVE
===================== */
@media (max-width: 640px) {
  /* History title */
  .history-title { font-size: 28px; white-space: nowrap; }

   /* Concept */
  .concept-box { width: 90%; }
  .concept-row-1 .concept-heading,
  .concept-row-2 .concept-heading,
  .concept-row-3 .concept-heading {
    font-size: 20px;
    width: auto;
    white-space: normal;
  }
  .concept-body { font-size: 14px; }

  .concept-row-1 {
    align-items: flex-start;
    padding-left: 10px;
    position: relative;
    top: -210px;
  }
  .concept-row-1 .concept-box { width: 55%; }
  .concept-row-1 .concept-heading { font-size: 19px; white-space: nowrap; width: auto; }

  .concept-row-3 {
    padding-left: 10px;
    margin-top: -400px;
    position: relative;
    top: 140px;
  }

  .concept-row-2 {
    justify-content: flex-end;
    padding-right: 10px;
    margin-top: -628px;
    position: relative;
    top: 22px;
  }
  .concept-row-2 .concept-box { text-align: right; }
  .concept-row-2 .concept-heading { text-align: left; margin-bottom: 0; }
  .concept-row-2 .concept-body {
    position: relative;
    top: 50px;
    margin-top: -30px;
  }

  .tl-year {
    font-size: 14px;
    font-weight: 700;
  }
  .tl-text {
    font-size: 14px;
  }
  .event-body {
    font-size: 14px;
    line-height: 25px;
  }
  /* Events */
  .overview-wrap, .registered-wrap { flex-direction: column; }
  .overview-text { flex: none; width: 100%; }
  .overview-logo, .registered-imgs { flex: none; width: 100%; padding-right: 0; }
  .overview-logo img { width: 200px; margin: 20px auto 0; }
  .registered-imgs img { width: 100%; }


}