/* =========================================
           Reset & Base Styles
        ========================================= */
       *, *::before, *::after {
           box-sizing: border-box;
           margin: 0;
           padding: 0;
       }

       body {
           font-family: 'Noto Sans JP', sans-serif;
           color: #333;
           background-color: #f5f5f5;
           overflow-x: hidden;
           line-height: 1.6;
       }

       .wrap {
           min-width: 320px;
           width: 100%;
           min-height: 100vh;
           position: relative;
           overflow-x: hidden;
           background-image:
               linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
               linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
           background-size: 40px 40px;
       }

       .wrap img {
           max-width: 100%;
           height: auto;
           display: block;
       }

       .wrap a {
           text-decoration: none;
           color: inherit;
           transition: transform 0.3s ease;
           color: #fff;
       }

       .wrap a:hover {
           transform: translateY(-4px);
           opacity: 0.95;
       }



       /* =========================================
           Header
        ========================================= */
       .site-header {
           position: relative;
           z-index: 100;
           background: white;
           text-align: center;
           padding: 1.5rem 0;
           box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
       }

       .header-logo {
           margin: 0;
           font-size: 2.5rem;
           font-weight: 900;
           font-style: italic;
           letter-spacing: 0.15em;
           background: linear-gradient(135deg, #0068b7, #2a5298);
           -webkit-background-clip: text;
           -webkit-text-fill-color: transparent;
           background-clip: text;
           display: inline-block;
           transform-origin: center center;
       }


       @media (max-width: 480px) {
           .site-header {
               padding: 1rem 0;
           }

           .header-logo {
               font-size: 1.8rem;
           }
       }



       /* =========================================
           Section Layout & Animations
        ========================================= */
       .scroll-section {
           position: relative;
           margin: 50px 0;
           padding: 50px 0 clamp(11.25rem, 15vw + 6.25rem, 22.25rem) 0;
           min-height: 70vh;
           display: flex;
           justify-content: center;
           align-items: center;
           overflow: hidden;
           width: 100%;
       }

       .bg-shape {
           position: absolute;
           top: 0;
           left: 50%;
           transform: translateX(-50%);
           height: 100%;
           width: 50vw;
           border-radius: 30vw;
           z-index: -2;
           will-change: width, border-radius;
       }

       .section-watermark {
           position: absolute;
           left: 50%;
           z-index: -1;
           pointer-events: none;
           font-size: clamp(5rem, 15vw, 16rem);
           font-weight: 900;
           font-style: italic;
           text-transform: uppercase;
           white-space: nowrap;
           color: rgba(0, 0, 0, 0.03);
           -webkit-text-stroke: 3px rgba(255, 255, 255, 0.9);
           filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.2));
           letter-spacing: 0.05em;
       }

       .container {
           position: relative;
           z-index: 1;
           width: 90%;
           max-width: 1000px;
           margin: 0 auto;
           opacity: 0;
           transform: translateY(30px);
       }

       .container h2 img {
           display: block;
           max-height: 150px;
           margin: 10px auto 50px;
       }

       /* セクションごとの背景色定義 */
       .color-game1 {
           background-color: #A3E416;
       }

       .color-fffff {
           background-color: #0072CE;
       }

       .color-movie1 {
           background-color: #F8971D;
       }

       .color-movie2 {
           background-color: #22AC38;
       }

       .color-column {
           background-color: #FFF100;
       }

       .color-social {
           background-color: #111827;
       }

       /* =========================================
           Components
        ========================================= */
       .card {
           background-color: white;
           border-radius: 30px;
           padding: 2rem;
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
           margin-bottom: 2rem;
           width: 100%;
       }

       @media (max-width: 768px) {
           .card {
               padding: 1.5rem;
               border-radius: 20px;
           }
       }

       @media (max-width: 480px) {
           .card {
               padding: 1rem;
           }
       }


       .card figure img {
           display: block;
           margin: 10px auto 20px;
       }

       .card h2 {
           font-size: 1.2rem;
           margin-bottom: 10px;
       }

       .card .detail {
           text-align: center;
           font-size: 0.95rem;
           color: #555;
       }

       @media screen and (max-width: 800px) {
           .card .detail {
               text-align: left;
           }
       }

       a.card-banner {
           display: block;
           background-color: #000;
           color: white;
           text-align: center;

           max-width: 300px;
           margin: 30px auto 0;
           padding: 14px 22px;
           border-radius: 50px;
           font-weight: 900;
           font-size: 1.05rem;
       }

       a.banner img {
           display: block;
           margin: 30px auto 0;
       }



       /* =========================================
           Specific Section Styles
        ========================================= */

       .game2-card-content {
           display: flex;
           flex-direction: column;
           gap: 20px;
       }

       .game2-title {
           font-size: 1.2rem;
           font-weight: bold;
           text-align: center;
       }

       .game2-slider-container {
           width: 100%;
           max-width: 100%;
           overflow: hidden;
       }

       .game2-img {
           min-height: 200px;
           width: 100%;
           object-fit: cover;
           border-radius: 12px;
       }

       .game2-text {
           font-size: 0.95rem;
       }

       .fffff-slider {
           width: 100%;
           max-width: 100%;
           overflow: hidden;
           padding-bottom: 30px;
       }

       .fffff-slider .swiper-pagination {
           bottom: 0;
       }

       .fffff-slider .swiper-pagination-bullet-active {
           background-color: #0072CE;
       }

       /* --- Movie 共用 --- */
       .movie-main-video {
           width: 100%;
           aspect-ratio: 16 / 9;
           border-radius: 20px 20px 0 0;
           font-size: 1.5rem;
           display: block;
           overflow: hidden;
       }

       .movie-main-video .size {
           padding-bottom: 56.25%;
           height: 0px;
           position: relative;
       }

       .size iframe {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
       }

       .movie-title-bar {
           background-color: #111;
           color: white;
           padding: 15px 20px;
           border-radius: 0 0 20px 20px;
           font-weight: bold;
           margin-bottom: 30px;
       }

       /* --- Channel Link --- */
       .movie-channel-link {
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-end;
           gap: 10px;
           margin-top: 30px;
           padding-right: 10px;
       }

       .movie-channel-link a {
           display: inline-flex;
           align-items: center;
           gap: 10px;
           background-color: #111;
           color: white;
           padding: 6px 25px;
           border-radius: 30px;
           font-weight: bold;
           font-size: 1rem;
           transition: opacity 0.2s, transform 0.2s;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
       }

       @media screen and (max-width: 800px) {
           .movie-channel-link {
               justify-content: center;
           }

           .movie-channel-link a {
               font-size: 0.8rem;
               width: 100%;
           }
       }


       .channel-link-btn:hover {
           opacity: 0.8;
           transform: translateY(-2px);
       }

       .youtube-icon-small {
           width: 28px;
           height: 18px;
           background-color: #ff0000;
           border-radius: 6px;
           display: flex;
           justify-content: center;
           align-items: center;
           position: relative;
       }

       .youtube-icon-small::after {
           content: "";
           border-style: solid;
           border-width: 5px 0 5px 8px;
           border-color: transparent transparent transparent white;
           margin-left: 2px;
       }

       /* --- Movie 2 (めざせ甲子園) --- */
       .koshien-logo {
           text-align: center;
           color: white;
           font-size: 2.5rem;
           font-weight: 900;
           font-style: italic;
           margin-bottom: 20px;
           text-shadow: 2px 2px 0 #0068b7;
       }

       .koshien-title-bar {
           background-color: #111;
           color: white;
           padding: 15px 20px;
           border-radius: 0 0 20px 20px;
           margin-bottom: 30px;
       }

       .koshien-title {
           font-size: 1.2rem;
           font-weight: bold;
           margin-bottom: 5px;
       }

       .koshien-title-bar span,
       .movie-list-text span {
           display: inline-block;
           font-size: 0.8rem;
       }

       .movie-list-item {
           display: flex;
           background-color: #111;
           color: white;
           margin-bottom: 15px;
           border-radius: 10px;
           overflow: hidden;
       }

       @media (max-width: 768px) {
           .movie-list-item {
               flex-direction: column;
           }
       }

       .movie-list-img {
           width: 25%;
           aspect-ratio: 16 / 9;
           min-height: 100px;
           border-radius: 0;
           background-color: white;
           color: #333;
           object-fit: cover;
           flex-shrink: 0;
       }

       @media (max-width: 768px) {
           .movie-list-img {
               width: 100%;
               height: 150px;
           }
       }

       .movie-list-text {
           width: 75%;
           padding: 15px;
           font-size: 0.85rem;
       }

       @media (max-width: 768px) {
           .movie-list-text {
               width: 100%;
               padding: 12px;
           }
       }

       /* --- Social Section Styles --- */
       .social-card-content {
           display: flex;
           flex-direction: column;
           align-items: center;
           text-align: center;
           gap: 25px;
           padding: 15px 0;
       }

       .social-profile {
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: 12px;
       }

       .social-avatar {
           width: 200px;
           height: 200px;
           border-radius: 50%;
           display: flex;
           justify-content: center;
           align-items: center;
           color: white;
           font-size: 2.2rem;
           font-weight: 900;
           font-style: italic;
           border: 3px solid white;
           box-shadow: 0 8px 24px rgba(0, 104, 183, 0.3);
           letter-spacing: 1px;
           transform-origin: center;
           transition: transform 0.3s ease;

           overflow: hidden;
       }

       .social-avatar:hover {
           transform: scale(1.08) rotate(-5deg);
       }

       .social-name {
           font-size: 1.6rem;
           font-weight: 900;
           color: #111;
           letter-spacing: 0.05em;
       }

       .social-tag {
           font-size: 0.95rem;
           color: #777;
           font-weight: bold;
           margin-top: -8px;
       }

       .social-links-container {
           display: flex;
           justify-content: center;
           flex-wrap: wrap;
           gap: 15px;
           width: 100%;
           max-width: 650px;
           margin-top: 10px;
       }

       a.social-link-card {
           flex: 1;
           min-width: 140px;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 10px;
           padding: 14px 22px;
           border-radius: 50px;
           font-weight: 900;
           font-size: 1.05rem;
           color: white;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
           transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
           color: #fff;
       }

       @media (max-width: 480px) {
           .social-link-card {
               width: 100%;
               min-width: 0;
           }
       }

       .social-link-card:hover {
           transform: translateY(-4px);
           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
           opacity: 0.95;
       }

       .social-link-card svg {
           width: 22px;
           height: 22px;
           fill: currentColor;
       }

       /* SNSブランド固有スタイル */
       .social-x {
           background-color: #000000;
       }

       .social-youtube {
           background-color: #FF0000;
       }

       .social-instagram {
           background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
       }

       /* =========================================
           Swiper Custom Styles
        ========================================= */
       .swiper-button-next, .swiper-button-prev {
           background-color: #111;
           color: white !important;
           width: 40px !important;
           height: 40px !important;
           border-radius: 50%;
       }

       .swiper-button-next::after, .swiper-button-prev::after {
           font-size: 16px !important;
           font-weight: bold;
       }

       .movie-slider {
           width: 100%;
           max-width: 100%;
           overflow: hidden;
           position: relative;
       }

       .movie-slider .swiper-slide {
           width: 45%;
       }

       @media (max-width: 768px) {
           .movie-slider .swiper-slide {
               width: 80%;
           }

           .column-slider .swiper-slide {
               width: 80%;
           }

       }


       .slide-img {
           aspect-ratio: 16 / 9;
           width: 100%;
           object-fit: cover;
           border-radius: 12px 12px 0 0;
       }

       .slide-title {
           background-color: #111;
           color: white;
           padding: 10px;
           font-size: 0.9rem;
           border-radius: 0 0 12px 12px;
           text-align: center;
       }

       .column-slider-wrapper {
           padding: 40px 0;
           width: 100%;
           max-width: 100%;
           overflow: hidden;
       }

       .column-slider {
           width: 100%;
           max-width: 100%;
           overflow: hidden;
       }

       .column-slider .swiper-slide {
           width: 60%;
           transition: transform 0.3s ease, opacity 0.3s ease;
           opacity: 0.5;
           transform: scale(0.8);
       }

       .column-slider .swiper-slide-active {
           opacity: 1;
           transform: scale(1);
       }

       .column-slide-content {
           display: block;
           background-color: white;
           border-radius: 20px;
           overflow: hidden;
           box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
       }

       .column-slide-img {
           aspect-ratio: 16 / 9;
           width: 100%;
           object-fit: cover;
           border-radius: 0;
       }

       .column-slide-title {
           background-color: #111;
           font-weight: bold;
           color: white;
           padding: 20px;
           text-align: center;
       }

       .column-slide-title span {
           display: block;
           font-size: 0.9rem;
           font-weight: normal;
           margin-bottom: 10px;
           color: #FFE33F;
       }


       .column-slider-wrapper .swiper-button-next,
       .column-slider-wrapper .swiper-button-prev {
           background-color: black;
       }