/* --- 基本リセット & 共通設定 --- */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: source-han-sans-jp-variable, sans-serif;
        font-variation-settings: "wght" 400;
        background-color: #fff;
        color: #333;
        overflow-x: hidden;
        box-sizing: border-box;
      }

      img {
        max-width: 100%;
      }


      /* scroll content */
      .scroll-container {
        position: relative;
        height: 200vh;
        background-color: #b9d7d7;
      }

      .sticky-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        pointer-events: none;
      }

      /* --- キービジュアル 1 (ページTOP) --- */
      .key-visual {
        position: absolute;
        width: 90%;
        max-width: 1200px;
        /* 枠は最大1200px */
        height: 100vh;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #b9d7d7;
        background: url("../images/kv_pc.webp") no-repeat center / contain;
      }

      /* --- キービジュアル 2 (スクロールで出現) --- */
      .second-visual {
        position: absolute;
        width: 60%;
        max-width: 1200px;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #b9d7d7;
        background-color: white;
        opacity: 0;
        transform: scale(0.95);
        background: url("../images/logo.webp") no-repeat center / contain;
      }

      .key-visual img,
      .second-visual img {
        width: 100%;
        height: auto;
        max-height: 100vh;
        object-fit: contain;
      }

      .kv-text {
        position: absolute;
        font-size: 2.5rem;
        font-weight: bold;
        color: #1a365d;
      }

      .sv-text {
        position: absolute;
        font-size: 2.5rem;
        font-weight: bold;
        color: #9b2c2c;
      }


      .main-content {
        position: relative;
        z-index: 10;
        background-color: #ffffff;
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
      }

      .menu-container {
        position: absolute;
        top: 80px;
        left: 15px;
        width: 20vw;
        max-width: 240px;
        min-width: 120px;
        height: 100%;
        pointer-events: none;
        z-index: 20;
      }

      @media (max-width: 980px) {
        .menu-container {
          display: none;
        }
      }


      .item-logo:hover {
        transform: none !important;
        opacity: 0.7;
      }

      .item-logo .note-icon {
        display: none !important;
      }


      .content-body {
        width: 100%;
      }

      .main-long-img {
        width: 100%;
        height: auto;
        display: block;
      }

      /* レスポンシブ対応の調整 */
      @media (max-width: 768px) {

        /* --- キービジュアル 1 (ページTOP) --- */
        .key-visual {
          background: url("../images/kv_sp.webp") no-repeat center / contain;
        }

        .menu-container {
          position: static;
          width: 100%;
          height: auto;
          padding: 20px;
        }

        .sticky-menu-img {
          position: static;
          max-width: 280px;
          margin: 0 auto;
        }
      }


      .sectionWrap {
        width: 100%;
        padding-left: 25%;
        margin: 0 auto;
        padding-top: 5em;
        padding-right: 3em;
      }

      @media (max-width: 980px) {
        .sectionWrap {
          padding-left: 0;
          padding-right: 0;
        }
      }

      .title {
        width: 25%;
        margin: 0 auto 5em;
      }

      .newsBox a:link,
      a:hover,
      a:visited {
        color: #5f5045;
        text-decoration: none;
      }

      .section-stream a:link,
      a:hover,
      a:visited {
        color: #5f5045;
        text-decoration: none;
      }


      .inWrap {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin-bottom: 5em;
        align-items: flex-start;
      }

      .category {
        width: 25%;
        max-width: 135px;
        font-family: urw-din, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: clamp(1rem, 0.893rem + 0.476vw, 1.25rem);
        /* 16-20 */
        padding: 0 1em;
        border-left: 1px solid black;
        border-right: 1px solid black;
        margin-right: 2em;
        /* margin-bottom: 5em; */
        margin-top: 0.3em;
        text-align: center;
        color: #5f5045;
      }

      /* .category:before {
        content: "";
        margin-right: 1em;
        border: 1px solid #5f5045;
      }

      .category::after {
        content: "";
        margin-left: 1em;
        border: 1px solid #5f5045;
      }
 */
      .conte {
        font-family: source-han-sans-jp-variable, sans-serif;
        font-variation-settings: "wght" 400;
        font-size: clamp(0.875rem, 0.768rem + 0.476vw, 1.125rem);
        color: #5f5045;
        line-height: 1.5;
        transform: translateY(-2px);
      }

      .conte span {
        font-family: "urw-din", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: clamp(1.125rem, 0.964rem + 0.714vw, 1.5rem);
        /* 18-24 */
      }

      .eventWrap {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        background-color: #ffffff;
      }

      .boxWrap {
        width: 33%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .boxWrap a {
        text-decoration: none;
      }


      .date {
        width: 100%;
        font-family: urw-din, sans-serif;
        font-weight: 700;
        font-style: normal;

        margin: 0 auto 0.7em;
        font-size: clamp(1.688rem, 1.554rem + 0.595vw, 2rem); /* 27px～32px（360px～1200px）*/
        text-align: center;
        color: #3ebfd5;
      }

      .eventTitle {
        width: 85%;
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: 'wght' 500;
        font-size: 20px;
        margin: 0 auto 1em;
        font-size: clamp(1.063rem, 0.955rem + 0.476vw, 1.313rem); /* 17px～21px（360px～1200px）*/
        text-align: center;
        color: #5f5045;
      }

      .eventTitle span {
        font-family: "source-han-sans-jp-variable", sans-serif;
        font-variation-settings: 'wght' 350;
        font-size: clamp(0.813rem, 0.759rem + 0.238vw, 0.938rem); /* 13px～15px（360px～1200px）*/
        line-height: 1.8;
      }

      .linkBox:hover {
        filter: brightness(1.3) contrast(1.6)
      }

      .section-event {
        position: relative;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background-color: #ffffff;
        background-image: url('../images/common/cracker.png');
        background-size: auto 80%;
        background-position: center top;
        background-repeat: repeat-x;
        padding-top: 5em;
        padding-bottom: 5em;
        padding-left: calc(25% + (100vw - 1200px) / 2);
        padding-right: calc(3em + (100vw - 1200px) / 2);
        margin-top: 12em;

      }

      .section-stream {
        position: relative;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        background-color: #ffffff;
        background-image: url('../images/stream_back.webp');
        background-size: auto 100%;
        background-position: center top;
        background-repeat: no-repeat;
        padding-top: 5em;
        padding-bottom: 5em;
        padding-left: calc(25% + (100vw - 1200px) / 2);
        padding-right: calc(3em + (100vw - 1200px) / 2);
        margin-top: 13em;
      }

      /* stream Area */

      .left-column {
        width: 23%;
        flex-shrink: 0;
        padding: 40px 20px;
        position: relative;
        z-index: 10;
        background-color: #fff9a6;
        background-image: url('back.png');
        background-size: 100vw auto;
        background-position: left top;
        background-repeat: no-repeat;
      }

      .sticky-menu {
        position: sticky;
        top: 40px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid #333;
        border-radius: 16px;
        padding: 30px 20px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      }

      .right-column {
        width: 77%;
        flex-shrink: 0;
        padding: 60px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: transparent;
        position: relative;
        z-index: 1;
      }

      .slider-title {
        margin-bottom: 40px;
        padding-left: 20px;
      }

      .slider-title .en {
        display: block;
        font-size: 3rem;
        font-family: 'Georgia', serif;
        font-style: italic;
        font-weight: bold;
        color: #e25484;
      }

      .slider-title .jp {
        display: block;
        font-size: 0.9rem;
        letter-spacing: 0.3em;
        color: #666;
      }

      .swiper {
        width: 100%;
        overflow: visible !important;
        /* overflow: hidden !important; */
        padding-top: 40px;
        position: relative;
        clip-path: inset(-100px -200vw -100px 0px);
      }

      .swiper-wrapper {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
        overflow: visible !important;
      }

      /* カード共通 */
      .logoBox {
        width: 90%;
        margin: 0 auto;
      }

      /* .card {
        flex-shrink: 0;
        background: #ffffff;
        border: 1px solid #5f5045;
        border-radius: 0px 24px 0px 24px;
        box-sizing: border-box;
        padding: 80px 75px 60px;
        height: auto;
        min-height: 380px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        overflow: visible !important;
        position: relative;
        margin-top: 40px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
      } */

      .card {
        flex-shrink: 0;
        width: 520px;
        max-width: 85vw;
        background: #ffffff;
        border: 1px solid #5f5045;
        border-radius: 0px 24px 0px 24px;
        box-sizing: border-box;
        padding: 80px 75px 60px;
        height: auto;
        min-height: 380px;
        /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); */
        position: relative;
        margin-top: 40px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
      }

      .swiper-slide-active.card {
        border-color: #e84478 !important;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
      }

      .card-logo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: auto;
        max-width: 50%;
        /* height: 130px; */
        height: auto;
      }

      .card h3 {
        margin-top: 0;
        font-size: 1.4rem;
        color: #e25484;
        margin-bottom: 20px;
        border-bottom: 1px dashed #ddd;
        padding-bottom: 10px;
      }

      .card-content-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 20px;
        font-size: 18px;
        color: #3b3b3b;
      }

      /* ページネーション */
      .pagination-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 40px;
      }

      .swiper-pagination {
        position: static !important;
        cursor: pointer;
      }

      .swiper-pagination-bullet {
        background: #ffffff;
        opacity: 0.6;
        width: 14px !important;
        height: 14px !important;
        border-radius: 50%;
        display: inline-block;
        margin: 0 12px !important;
        border: 1px solid #999;
        box-sizing: border-box;
      }

      .swiper-pagination-bullet-active {
        background: #e25484 !important;
        border-color: #e25484;
        opacity: 1;
      }

      footer {
        position: relative;
        z-index: 9;
        width: 100%;
        background-color: #aee2ec;
        border-top: 40px solid #fff99e;
      }

      footer a:hover img {
        opacity: 0.5;
        transition-duration: 0.3s;
      }

      footer ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 675px;
        align-items: center;
        justify-content: center;
        list-style: none;
        margin: 0 auto;
        padding: 50px 0 30px 0;
      }

      footer li {
        width: 23%;
        margin-bottom: 1em;
      }

      footer ul a {
        display: block;
        padding: 0 10px;
      }

      p.copyright {
        font-size: 12px;
        text-align: center;
        color: #6a635b;
        margin: 0;
        padding: 0 0 20px 0;
      }

      @media (max-width: 1200px) {
        .section-stream {
          padding-left: 25%;
          padding-right: 3em;
        }
      }

      @media (max-width: 980px) {
        .second-visual {
          width: 100%;
        }
        
        .content-body {
          width: 90%;
          margin: 0 auto;
        }

        .title {
          width: 24%;
          margin-bottom: 3em;
        }


        .category {
          width: 24%;
          max-width: 110px;
          margin-right: 1em;
          line-height: 1.5;
        }

        .conte {
          line-height: 1.5;
          transform: translateY(2px);
        }

        .conte span {
          margin-bottom: 0.5em;
        }

        .section-event {
          margin-top: 5em;
          padding: 0;
          background-size: auto 50%;

        }

        .eventWrap {
          flex-wrap: wrap;
          width: 90%;
          margin: 0 auto;
        }

        .boxWrap {
          width: 30%;
          margin-bottom: 5em;
        }

        .section-stream {
          margin-top: 5em;
          padding: 0 0 5em 0;
        }

        .swiper {
          padding-top: 0;
          padding-bottom: 0 !important;
          overflow: hidden !important;
          clip-path: none !important;
        }

        .card {
          padding: 80px 15px 30px;
          margin-top: 68px;
          margin-bottom: 10px !important;
          box-shadow: none !important;
        }

        .card-logo {
          max-width: 45%;
        }

        .card-content-grid {
          font-size: clamp(0.813rem, 0.679rem + 0.595vw, 1.125rem);
          /* 13-18 */
          gap: 22px 20px;
        }

        .pagination-container {
          margin-top: 25px;
        }

        footer img {
          max-width: 100%;
        }

        footer ul {
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: wrap;
          width: 100%;
          list-style: none;
          margin: 0 auto;
          padding: 20px 0;
          justify-content: space-around;
        }

        footer li {
          width: 20%;
          margin: 5px;
        }

        footer ul a {
          display: block;
          padding: 0 10px;
        }

        p.copyright {
          font-size: 10px;
          text-align: center;
          color: #6a635b;
          margin: 0;
          padding: 0 0 20px 0;
        }
      }

      @media (max-width: 850px) {

        .boxWrap {
          width: 35%;
        }

        .date {
          font-size: clamp(1.125rem, 0.048rem + 3.438vw, 1.875rem); /* 18px～30px（501px～850px）*/
        }

        .eventTitle {
          width: 95%;
        }

      }

      @media (max-width: 500px) {
        .content-body {
          width: 90%;
          margin: 0 auto;
        }

        .title {
          width: 40%;
          margin-bottom: 3em;
        }

        .inWrap {
          margin-bottom: 2em;
        }

        .section-event {
          margin-top: 5em;
          background-size: auto 40%;
        }

        .eventWrap {
          flex-wrap: wrap;
          width: 100%;
          margin: 0 auto;
          gap: 4em;
        }

        .eventWrap a {
          text-decoration: none;
        }

        .boxWrap {
          width: 73%;
          margin: 0 auto;
        }

        .eventTitle {
          width: 100%;
          line-height: 1.4;
        }

        .logoBox {
          width: 70%;
          margin: 0 auto 0;
        }

        .linkBox {
          width: 75%;
          margin: 0 auto;
        }

        .date {
          font-size: clamp(1.438rem, -0.009rem + 6.429vw, 2rem); /* 23px～32px（360px～500px）*/
        }



        .section-stream {
          margin-top: 5em;
          padding: 0 0 5em 0;
        }

        .swiper {
          padding-top: 0
        }

        .card {
          padding: 80px 15px 30px;
          box-shadow: none !important;
        }

        .card-logo {
          max-width: 65%;
        }

        .card-content-grid {
          font-size: clamp(0.813rem, 0.679rem + 0.595vw, 1.125rem);
          /* 13-18 */
          gap: 22px 20px;
        }

        .pagination-container {
          margin-top: 25px;
        }

        footer img {
          max-width: 100%;
        }

        footer ul {
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: wrap;
          width: 100%;
          list-style: none;
          margin: 0 auto;
          padding: 20px 0;
          justify-content: space-around;
        }

        footer li {
          width: 38%;
          margin: 5px;
        }

        footer ul a {
          display: block;
          padding: 0 10px;
        }

        p.copyright {
          font-size: 10px;
          text-align: center;
          color: #6a635b;
          margin: 0;
          padding: 0 0 20px 0;
        }
      }