@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
部活・イベント 共通
---------------------------------------------------------------------------------------------------------------------
*/
.event-heading {
  margin-bottom: 54px; }
  @media screen and (min-width: 768px) {
    .event-heading {
      margin-bottom: 68px; } }
  @media screen and (min-width: 1200px) {
    .event-heading {
      margin-bottom: 70px; } }
  .event-heading p.en {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1em;
    color: #223588;
    margin: 0 0 5px 0; }
    @media screen and (min-width: 768px) {
      .event-heading p.en {
        font-size: 0.9em; } }
    @media screen and (min-width: 1200px) {
      .event-heading p.en {
        font-size: 1.0em;
        margin: 0 0 10px 0; } }
  .event-heading h2.ja {
    color: #223588;
    font-size: 1.75em;
    font-weight: 500;
    line-height: 1.4em;
    margin: 0; }
    @media screen and (min-width: 768px) {
      .event-heading h2.ja {
        font-size: 2.125em; } }
    @media screen and (min-width: 1200px) {
      .event-heading h2.ja {
        font-size: 2.25em; } }

.event-card-heading {
  align-items: center;
  border-bottom: 1px solid #223588;
  display: flex;
  gap: 10px;
  padding-bottom: 12px; }
  @media screen and (min-width: 768px) {
    .event-card-heading {
      gap: 20px;
      padding-bottom: 14px; } }
  .event-card-heading .icon {
    flex-shrink: 0;
    height: 36px;
    width: 36px; }
    @media screen and (min-width: 768px) {
      .event-card-heading .icon {
        height: 42px;
        width: 42px; } }
    .event-card-heading .icon img {
      display: block;
      object-fit: contain; }
  .event-card-heading .title {
    font-size: 1.125em;
    font-weight: 600;
    line-height: 1.4em;
    color: #223588;
    margin: 0; }
    @media screen and (min-width: 768px) {
      .event-card-heading .title {
        font-size: 1.45em; } }
    @media screen and (min-width: 1200px) {
      .event-card-heading .title {
        font-size: 1.75em; } }

/*
---------------------------------------------------------------------------------------------------------------------
部活動・同好会
---------------------------------------------------------------------------------------------------------------------
*/
.club-event {
  position: relative;
  color: #111;
  padding: 60px 0 90px; }
  @media screen and (min-width: 768px) {
    .club-event {
      padding: 80px 0 120px; } }
  @media screen and (min-width: 1200px) {
    .club-event {
      padding: 88px 0 140px; } }
  .club-event::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.95);
    height: 100%;
    mix-blend-mode: screen;
    z-index: -1; }
  .club-event__inner {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1400px; }
  .club-event__intro {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 0 5%; }
    @media screen and (min-width: 768px) {
      .club-event__intro {
        gap: 46px;
        padding: 0; } }
    @media screen and (min-width: 1000px) {
      .club-event__intro {
        align-items: flex-start;
        display: grid;
        gap: 90px;
        grid-template-columns: minmax(0, 1fr) 480px; } }
  @media screen and (min-width: 768px) {
    .club-event__intro-text {
      padding: 0 0 0 5%; } }
  @media screen and (min-width: 1024px) {
    .club-event__intro-text {
      padding: 0 0 0 8%; } }
  .club-event__catch {
    font-size: 1.6em;
    font-weight: 600;
    line-height: 1.4em;
    margin: 0; }
    @media screen and (min-width: 768px) {
      .club-event__catch {
        font-size: 2em; } }
    @media screen and (min-width: 1200px) {
      .club-event__catch {
        font-size: 2.25em; } }
  .club-event__lead {
    font-size: 0.85em;
    line-height: 2.0em;
    margin: 28px 0 0; }
    @media screen and (min-width: 768px) {
      .club-event__lead {
        font-size: 0.9em;
        margin-top: 32px; } }
    @media screen and (min-width: 1200px) {
      .club-event__lead {
        font-size: 1.0em; } }
  .club-event__main-image {
    overflow: hidden;
    width: 100%; }
    @media screen and (min-width: 768px) {
      .club-event__main-image {
        margin-left: auto;
        max-width: 540px; } }
    @media screen and (min-width: 1000px) {
      .club-event__main-image {
        height: 250px;
        max-width: none;
        width: 480px; } }
    .club-event__main-image img {
      display: block;
      object-fit: cover; }
      @media screen and (min-width: 1000px) {
        .club-event__main-image img {
          height: 100%; } }
  .club-event__content {
    margin: 80px auto 0;
    padding: 0 5%;
    max-width: 1200px; }
    @media screen and (min-width: 768px) {
      .club-event__content {
        margin-top: 100px;
        padding: 0 8%; } }
    @media screen and (min-width: 1200px) {
      .club-event__content {
        margin-top: 120px; } }

.club-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 40px; }
  @media screen and (min-width: 768px) {
    .club-list {
      gap: 80px;
      margin-top: 60px; } }
  @media screen and (min-width: 1200px) {
    .club-list {
      gap: 100px;
      margin-top: 80px; } }

.club-card__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 30px; }
  @media screen and (min-width: 768px) {
    .club-card__body {
      align-items: flex-start;
      display: grid;
      gap: 48px;
      grid-template-columns: 240px minmax(0, 1fr);
      margin-top: 34px; } }
  @media screen and (min-width: 1200px) {
    .club-card__body {
      gap: 64px;
      grid-template-columns: 260px minmax(0, 1fr); } }
.club-card__image {
  overflow: hidden;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .club-card__image {
      width: 260px; } }
  .club-card__image img {
    display: block;
    object-fit: cover; }
  .club-card__image--square {
    aspect-ratio: 1.35 / 1; }
    @media screen and (min-width: 768px) {
      .club-card__image--square {
        width: 240px; } }
    @media screen and (min-width: 1200px) {
      .club-card__image--square {
        width: 260px; } }
  .club-card__image--circle {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    width: 220px; }
    @media screen and (min-width: 768px) {
      .club-card__image--circle {
        width: 180px; } }
    @media screen and (min-width: 1200px) {
      .club-card__image--circle {
        width: 190px; } }
.club-card__text p {
  font-size: 0.85em;
  line-height: 2.0em;
  margin: 0; }
  @media screen and (min-width: 768px) {
    .club-card__text p {
      font-size: 0.9em; } }
  @media screen and (min-width: 1200px) {
    .club-card__text p {
      font-size: 1.0em; } }
  .club-card__text p + p {
    margin-top: 6px; }

.club-other {
  display: grid;
  gap: 22px 28px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 78px 0 0;
  padding: 0; }
  @media screen and (min-width: 480px) {
    .club-other {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media screen and (min-width: 768px) {
    .club-other {
      gap: 28px 54px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 94px; } }
  @media screen and (min-width: 1200px) {
    .club-other {
      gap: 34px 70px;
      margin-top: 108px; } }
  .club-other__item {
    align-items: center;
    color: #223588;
    display: flex;
    gap: 12px; }
    @media screen and (min-width: 768px) {
      .club-other__item {
        gap: 14px; } }
    .club-other__item p {
      font-size: 1.125em;
      font-weight: 600;
      line-height: 1.2em;
      margin: 0; }
      @media screen and (min-width: 768px) {
        .club-other__item p {
          font-size: 1.25em; } }
      @media screen and (min-width: 1200px) {
        .club-other__item p {
          font-size: 1.45em; } }
    @media screen and (min-width: 768px) {
      .club-other__item--wide {
        grid-column: span 2; } }
  .club-other__icon {
    flex-shrink: 0;
    height: 34px;
    width: 34px; }
    @media screen and (min-width: 768px) {
      .club-other__icon {
        height: 40px;
        width: 40px; } }
    .club-other__icon img {
      display: block;
      object-fit: contain; }

.event-section {
  position: relative;
  padding: 60px 0 90px; }
  @media screen and (min-width: 768px) {
    .event-section {
      padding: 80px 0 110px; } }
  @media screen and (min-width: 1200px) {
    .event-section {
      padding: 80px 0 140px; } }
  .event-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.95);
    height: 100%;
    mix-blend-mode: screen;
    z-index: -1; }
  .event-section__inner {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 5%; }
    @media screen and (min-width: 768px) {
      .event-section__inner {
        padding: 0 8%; } }

.event-list {
  display: flex;
  flex-direction: column;
  gap: 64px; }

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 28px; }
  @media screen and (min-width: 768px) {
    .event-card__body {
      align-items: flex-start;
      display: grid;
      gap: 50px;
      grid-template-columns: 280px minmax(0, 1fr);
      margin-top: 28px; } }
  @media screen and (min-width: 1200px) {
    .event-card__body {
      gap: 60px;
      grid-template-columns: 300px minmax(0, 1fr); } }
.event-card__image {
  overflow: hidden;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .event-card__image {
      width: 300px; } }
  @media screen and (min-width: 768px) {
    .event-card__image {
      width: 280px; } }
  @media screen and (min-width: 1200px) {
    .event-card__image {
      width: 300px; } }
  .event-card__image img {
    aspect-ratio: 1.55 / 1;
    display: block;
    object-fit: cover; }
.event-card__text p {
  font-size: 0.85em;
  line-height: 2.0em;
  margin: 0; }
  @media screen and (min-width: 768px) {
    .event-card__text p {
      font-size: 0.9em; } }
  @media screen and (min-width: 1200px) {
    .event-card__text p {
      font-size: 1.0em; } }